viithiisys / spotlight-frontend

Download as
Browse Code »

Commit 145dd9bdece26b23915189250b977753efb7d8f4

Authored by Digvijay Singh
1 parent 09892a73fd
Exists in master

ui fixes

Showing 25 changed files with 347 additions and 132 deletions   Show diff stats
src/assets/images/behance.png
Diff comments   View file @145dd9b

1.9 KB
src/assets/images/dribbble.png
Diff comments   View file @145dd9b

4.28 KB
src/assets/images/facebook.png
Diff comments   View file @145dd9b

317 Bytes | W: | H:

319 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
src/assets/images/github.png
Diff comments   View file @145dd9b

2.61 KB
src/assets/images/instagram.png
Diff comments   View file @145dd9b

3.05 KB
src/assets/images/linkedin.png
Diff comments   View file @145dd9b

363 Bytes | W: | H:

1.25 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
src/assets/images/medium.png
Diff comments   View file @145dd9b

1.7 KB
src/assets/images/stack overflow.png
Diff comments   View file @145dd9b

2.06 KB
src/assets/images/twitter.png
Diff comments   View file @145dd9b

462 Bytes | W: | H:

2.04 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
src/components/NoScreenshotSingleAuthor.vue
Diff comments   View file @145dd9b
... ... @@ -336,7 +336,7 @@
336 336 <input
337 337 type="text"
338 338 class="form-control"
339   - placeholder="Kathy, Something on your mind?"
  339 + placeholder="Something on your mind?"
340 340 id="open_ct_box"
341 341 v-model="comment"
342 342 />
... ...
src/components/NoScreenshotTwoAuthor.vue
Diff comments   View file @145dd9b
... ... @@ -99,7 +99,7 @@
99 99 <div class="row">
100 100 <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">
101 101 <div class="form-group frm-wdth addfrm-spc">
102   - <input type="text" class="form-control" placeholder="Kathy, Something on your mind?" id="">
  102 + <input type="text" class="form-control" placeholder="Something on your mind?" id="">
103 103 </div></div>
104 104 <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">
105 105 <a href="javascript:void(0);" class="add-comment"><img src="../assets/images/add-comment.svg" /> Comment</a>
... ...
src/components/Profile.vue
Diff comments   View file @145dd9b
... ... @@ -222,66 +222,73 @@
222 222 Add your social Channels <span></span>
223 223 </p>
224 224 </div>
225   - <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
226   - <div class="form-group floating-label">
227   - <select class="form-group">
228   - <option value="Facebook">Facebook</option>
229   - </select>
230   - <span class="select-arrow"
231   - ><img src="../assets/images/chevron-down.svg"
232   - /></span>
233   - </div>
234   - </div>
235   - <!-- input -->
236   - <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8">
237   - <div class="form-group floating-label">
238   - <input
239   - type="text"
240   - class="form-control"
241   - value=""
242   - placeholder="Paste your profile URL here"
243   - id=""
244   - v-model="userData.socialMediaProfiles.facebook"
245   - />
  225 +
  226 + <div
  227 + class="row"
  228 + style="width: 100%"
  229 + v-for="(social, i) in selectedSocialLink"
  230 + :key="i"
  231 + >
  232 + <div class="position-left col-sm-4 col-md-4 col-lg-4 col-xl-4">
  233 + <div class="form-group floating-label">
  234 + <select class="form-group">
  235 + <option value="Linkedin">{{ social.displayName }}</option>
  236 + </select>
  237 + <span class="select-arrow"
  238 + ><img src="../assets/images/chevron-down.svg"
  239 + /></span>
  240 + </div>
246 241 </div>
247   - </div>
248   - <!-- input -->
249   - <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
250   - <div class="form-group floating-label">
251   - <select class="form-group">
252   - <option value="Linkedin">Linkedin</option>
253   - </select>
254   - <span class="select-arrow"
255   - ><img src="../assets/images/chevron-down.svg"
256   - /></span>
  242 + <!-- input -->
  243 + <div class="padding-right col-sm-7 col-md-7 col-lg-7 col-xl-7">
  244 + <div class="form-group floating-label">
  245 + <input
  246 + type="text"
  247 + class="form-control"
  248 + value=""
  249 + placeholder="Paste your profile URL here"
  250 + id=""
  251 + v-model="social.fieldValue"
  252 + />
  253 + </div>
257 254 </div>
258   - </div>
259   - <!-- input -->
260   - <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8">
261   - <div class="form-group floating-label">
262   - <input
263   - type="text"
264   - class="form-control"
265   - value=""
266   - placeholder="Paste your profile URL here"
267   - id=""
268   - v-model="userData.socialMediaProfiles.linkedin"
269   - />
  255 + <div class="col-sm-1 col-md-1 col-lg-1 col-xl-1">
  256 + <ul class="interests">
  257 + <li>
  258 + <a
  259 + @click="removeSocialLink(i)"
  260 + href="javascript:void(0);"
  261 + class="cat-minus"
  262 + ><img src="../assets/images/minus.svg"
  263 + /></a>
  264 + </li>
  265 + </ul>
270 266 </div>
271 267 </div>
272 268 <!-- input -->
273 269  
274 270 <!-- input -->
275   - <!-- <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
  271 + <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
276 272 <div class="form-group floating-label">
277   - <select class="form-group">
278   - <option @click="addSocialLink">Add another</option>
  273 + <select
  274 + class="form-group"
  275 + v-model="currentLink"
  276 + v-on:change="addSocialLink(currentLink)"
  277 + >
  278 + <option value="null">Add another</option>
  279 + <option
  280 + v-for="(social, i) in socialLink"
  281 + :key="i"
  282 + :value="social.fieldName"
  283 + >
  284 + {{ social.displayName }}
  285 + </option>
279 286 </select>
280 287 <span class="select-arrow"
281 288 ><img src="../assets/images/chevron-down.svg"
282 289 /></span>
283 290 </div>
284   - </div> -->
  291 + </div>
285 292 <!-- input -->
286 293 </div>
287 294 <a href="javascript:void(0);" @click="saveProfile" class="next-bt"
... ... @@ -330,6 +337,7 @@
330 337 </ul>
331 338 </div>
332 339 <a
  340 + v-if="this.userData.firstLogin"
333 341 href="javasript:void(0);"
334 342 @click="addProfileDialog"
335 343 class="update_profile"
... ... @@ -375,10 +383,7 @@
375 383 <li>
376 384 <a
377 385 href="javascript:void(0);"
378   - v-if="
379   - !userData.designation&&
380   - ! userData.organisation
381   - "
  386 + v-if="!userData.designation && !userData.organisation"
382 387 @click="addProfileDialog"
383 388 >Add your work</a
384 389 >
... ... @@ -391,10 +396,7 @@
391 396 <a
392 397 class="no-cursor no-underline"
393 398 href="javascript:void(0);"
394   - v-if="
395   - userData.designation &&
396   - userData.organisation
397   - "
  399 + v-if="userData.designation && userData.organisation"
398 400 >at</a
399 401 >
400 402 <a
... ... @@ -423,7 +425,7 @@
423 425 </div>
424 426 <!-- user profile -->
425 427 <div class="col-sm-4 col-md-12 col-lg-4 col-xl-4">
426   - <div class="list-style-group" v-if="userData.awards.views">
  428 + <div class="list-style-group" v-if="userData.awards.views != null">
427 429 <p>Awards</p>
428 430 <ul class="list-style">
429 431 <li>
... ... @@ -438,7 +440,7 @@
438 440 </div>
439 441 <div class="clearfix"></div>
440 442 <div class="row top-brd profile-tab-spc-top">
441   - <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8">
  443 + <div class="col-sm-7 col-md-7 col-lg-7 col-xl-7">
442 444 <ul class="profile-tab">
443 445 <li class="active c-0">
444 446 <a href="javascript:void(0);" @click="caseDialog"
... ... @@ -452,14 +454,25 @@
452 454 </li>
453 455 </ul>
454 456 </div>
455   - <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
456   - <ul class="social-connects">
  457 + <div class="col-sm-5 col-md-5 col-lg-5 col-xl-5">
  458 + <ul class="social-connects" v-if="selectedSocialLink.length > 0">
457 459 <li><span>Follow</span></li>
458   - <li>
  460 + <li v-for="(social, i) in selectedSocialLink" :key="i">
  461 +
459 462 <a
460 463 href="javascript:void(0);"
  464 + @click="openUrl(social.fieldValue)"
  465 + class="cursor-pointer"
  466 + ><img :src="social.image"
  467 + /></a>
  468 + </li>
  469 + </ul>
  470 + <ul class="social-connects" v-if="selectedSocialLink.length == 0">
  471 + <li>
  472 + <a
  473 + href="javascript:void(0);"
461 474 @click="addProfileDialog"
462   - class="active"
  475 + class="active cursor-pointer"
463 476 ><img src="../assets/images/plus.png"
464 477 /></a>
465 478 <span class="connect-social-channel"
... ... @@ -648,12 +661,34 @@ export default {
648 661 data: () => ({
649 662 loggedinFlag: false,
650 663 usertoken: null,
  664 + currentLink: null,
651 665 userData: {
652   - verified: null,
  666 + socialMediaProfiles: {
  667 + facebook: null,
  668 + linkedin: null,
  669 + medium: null,
  670 + twitter: null,
  671 + behance: null,
  672 + dribble: null,
  673 + github: null,
  674 + stackoverflow: null,
  675 + instagram: null,
  676 + },
  677 + awards: {
  678 + views: null,
  679 + likes: null,
  680 + comments: null,
  681 + },
  682 + verified: true,
  683 + phoneNo: null,
  684 + bio: null,
  685 + designation: null,
  686 + organisation: null,
653 687 bgColor: null,
654 688 interests: [],
655 689 karmaPoints: null,
656 690 socialLogin: null,
  691 + firstLogin: null,
657 692 notification: null,
658 693 profilePic: null,
659 694 role: null,
... ... @@ -661,31 +696,76 @@ export default {
661 696 email: null,
662 697 firstName: null,
663 698 lastName: null,
664   - createdAt: null,
665   - firstLogin: null,
666   - bio: null,
667   - designation: "",
668   - organisation: "",
669   - socialMediaProfiles: { facebook: null, linkedin: null },
670 699 },
671 700 caseStudies: [],
672 701 interestName: null,
673 702 oldId: null,
674   - socialLink: null,
675 703 currentSocialLinkName: null,
676 704 showCompany: false,
677 705 showDesignation: false,
  706 + socialLink: [
  707 + {
  708 + displayName: "Facebook",
  709 + fieldName: "facebook",
  710 + fieldValue: null,
  711 + image: require(`../assets/images/facebook.png`),
  712 + },
  713 + {
  714 + displayName: "Linkedin",
  715 + fieldName: "linkedin",
  716 + fieldValue: null,
  717 + image: require(`../assets/images/linkedin.png`),
  718 + },
  719 + {
  720 + displayName: "Medium",
  721 + fieldName: "medium",
  722 + fieldValue: null,
  723 + image: require(`../assets/images/medium.png`),
  724 + },
  725 + {
  726 + displayName: "Twitter",
  727 + fieldName: "twitter",
  728 + fieldValue: null,
  729 + image: require(`../assets/images/twitter.png`),
  730 + },
  731 + {
  732 + displayName: "Behance",
  733 + fieldName: "behance",
  734 + fieldValue: null,
  735 + image: require(`../assets/images/behance.png`),
  736 + },
  737 + {
  738 + displayName: "Dribble",
  739 + fieldName: "dribble",
  740 + fieldValue: null,
  741 + image:require(`../assets/images/dribbble.png`),
  742 + },
  743 + {
  744 + displayName: "Github",
  745 + fieldName: "github",
  746 + fieldValue: null,
  747 + image: require(`../assets/images/github.png`),
  748 + },
  749 + {
  750 + displayName: "Stackoverflow",
  751 + fieldName: "stackoverflow",
  752 + fieldValue: null,
  753 + image: require(`../assets/images/stack overflow.png`),
  754 + },
  755 + {
  756 + displayName: "Instagram",
  757 + fieldName: "instagram",
  758 + fieldValue: null,
  759 + image:require(`../assets/images/instagram.png`),
  760 + },
  761 + ],
  762 + selectedSocialLink: [],
678 763 }),
679 764  
680 765 mounted() {
681 766 this.userData = {};
682   - this.socialLink = [];
  767 + // this.socialLink = [];
683 768 this.userData.interests = [];
684   - this.userData.socialMediaProfiles = {};
685   - this.userData.designation = "";
686   - this.userData.organisation = "";
687   - this.userData.socialMediaProfiles.facebook = null;
688   - this.userData.socialMediaProfiles.linkedin = null;
689 769 var userdata = localStorage.getItem("spotlight_usertoken");
690 770 if (userdata) {
691 771 userdata = JSON.parse(userdata);
... ... @@ -704,9 +784,50 @@ export default {
704 784 logout() {
705 785 this.$router.push("/login");
706 786 },
707   - addSocialLink(obj) {
708   - this.socialLink.push();
  787 + prefillSocialLink(links) {
  788 + var keys = [];
  789 + keys = Object.keys(links);
  790 + keys.forEach((link_) => {
  791 + console.log(link_, ":", links[link_]);
  792 + if (links[link_] != null) {
  793 + var i = this.socialLink.findIndex(
  794 + (links_) => links_.fieldName == link_
  795 + );
  796 + if (i != -1) {
  797 + this.selectedSocialLink.push({
  798 + displayName: this.socialLink[i].displayName,
  799 + fieldName: this.socialLink[i].fieldName,
  800 + image: this.socialLink[i].image,
  801 + fieldValue: links[link_],
  802 + });
  803 + }
  804 + }
  805 + });
  806 + console.log("links-- are--", links);
  807 + },
  808 + addSocialLink(id) {
  809 + this.currentLink = null;
  810 + var i = this.selectedSocialLink.findIndex(
  811 + (link_) => link_.fieldName == id
  812 + );
  813 + var j = this.socialLink.findIndex((links_) => links_.fieldName == id);
  814 + if (i == -1) {
  815 + this.selectedSocialLink.push({
  816 + displayName: this.socialLink[j].displayName,
  817 + fieldName: this.socialLink[j].fieldName,
  818 + image: this.socialLink[j].image,
  819 + fieldValue: null,
  820 + });
  821 + } else {
  822 + this.$toaster.info(this.socialLink[j].displayName + " Already Exist");
  823 + }
  824 + },
  825 + removeSocialLink(i) {
  826 + var name = this.selectedSocialLink[i].fieldName;
  827 + this.userData.socialMediaProfiles[name] = null;
  828 + this.selectedSocialLink.splice(i, 1);
709 829 },
  830 +
710 831 addInterest() {
711 832 console.log(this.userData.interests.length, "called", this.interestName);
712 833 if (this.userData.interests.length <= 2) {
... ... @@ -717,9 +838,9 @@ export default {
717 838 }
718 839 },
719 840 removeInterest(i) {
720   - console.log("i",i)
  841 + console.log("i", i);
721 842 this.userData.interests.splice(i, 1);
722   - console.log(" this.userData", this.userData.interests)
  843 + console.log(" this.userData", this.userData.interests);
723 844 },
724 845 assignClass() {
725 846 var element = document.getElementById(this.userData.bgColor);
... ... @@ -758,7 +879,8 @@ export default {
758 879 // this.userData = response.data.data;
759 880 this.oldId = this.userData.bgColor;
760 881 console.log(this.oldId, "this.userData.", this.userData);
761   - console.log("this.userData.firstLogin ",this.userData.firstLogin )
  882 + console.log("this.userData.firstLogin ", this.userData.firstLogin);
  883 + this.prefillSocialLink(this.userData.socialMediaProfiles);
762 884 if (this.userData.firstLogin == true) {
763 885 this.addProfileDialog();
764 886 }
... ... @@ -804,7 +926,6 @@ export default {
804 926 },
805 927 })
806 928 .then((response) => {
807   -
808 929 this.createSlide(payload, response.data.data);
809 930 })
810 931 .catch((error) => console.log(error));
... ... @@ -855,7 +976,7 @@ export default {
855 976 });
856 977  
857 978 console.log(finalSlides);
858   - console.log("payload",payload)
  979 + console.log("payload", payload);
859 980 localStorage.setItem(
860 981 "spotlight_slide" + payload._id,
861 982 JSON.stringify(finalSlides)
... ... @@ -915,6 +1036,10 @@ export default {
915 1036 // if(!obj.socialMediaProfiles){
916 1037 // obj.socialMediaProfiles = {};
917 1038 // }
  1039 + this.selectedSocialLink.forEach((element) => {
  1040 + var key = element.fieldName;
  1041 + obj.socialMediaProfiles[key] = element.fieldValue;
  1042 + });
918 1043 delete obj.createdAt;
919 1044 delete obj.email;
920 1045 delete obj.role;
... ... @@ -993,4 +1118,10 @@ export default {
993 1118 .no-underline {
994 1119 text-decoration: none !important;
995 1120 }
  1121 +.position-left {
  1122 + left: 15px !important;
  1123 +}
  1124 +.padding-right {
  1125 + padding-right: 0px !important;
  1126 +}
996 1127 </style>
... ...
src/components/SingleAuthor.vue
Diff comments   View file @145dd9b
... ... @@ -82,7 +82,7 @@
82 82 <div class="row">
83 83 <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">
84 84 <div class="form-group frm-wdth addfrm-spc">
85   - <input type="text" class="form-control" placeholder="Kathy, Something on your mind?" id="">
  85 + <input type="text" class="form-control" placeholder="Something on your mind?" id="">
86 86 </div></div>
87 87 <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">
88 88 <a href="javascript:void(0);" class="add-comment"><img src="../assets/images/add-comment.svg" /> Comment</a>
... ...
src/components/SingleMobileInsight.vue
Diff comments   View file @145dd9b
... ... @@ -99,7 +99,7 @@
99 99 <div class="row">
100 100 <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">
101 101 <div class="form-group frm-wdth">
102   - <input type="text" class="form-control" placeholder="Kathy, Something on your mind?" id="">
  102 + <input type="text" class="form-control" placeholder="Something on your mind?" id="">
103 103 </div></div>
104 104 <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">
105 105 <a href="javascript:void(0);" class="add-comment"><img src="../assets/images/add-comment.svg" /> Comment</a>
... ...
src/components/SingleMobileScreenChatComments.vue
Diff comments   View file @145dd9b
... ... @@ -95,7 +95,7 @@
95 95 <div class="row">
96 96 <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">
97 97 <div class="form-group frm-wdth">
98   - <input type="text" class="form-control" placeholder="Kathy, Something on your mind?" id="">
  98 + <input type="text" class="form-control" placeholder="Something on your mind?" id="">
99 99 </div></div>
100 100 <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">
101 101 <a href="javascript:void(0);" class="add-comment"><img src="../assets/images/add-comment.svg" /> Comment</a>
... ...
src/components/SingleMobileScreenInsightOne.vue
Diff comments   View file @145dd9b
... ... @@ -328,7 +328,7 @@
328 328 <input
329 329 type="text"
330 330 class="form-control"
331   - placeholder="Kathy, Something on your mind?"
  331 + placeholder="Something on your mind?"
332 332 id="open_ct_box"
333 333 v-model="comment"
334 334 />
... ...
src/components/SingleMobileScreenInsightTwo.vue
Diff comments   View file @145dd9b
... ... @@ -84,7 +84,7 @@
84 84 cmnt.user.karmaPoints
85 85 }}pts
86 86 </li>
87   - <li><span></span>{{dateGenerator(cmnt.createdAt)}}days ago</li>
  87 + <li><span></span>{{dateGenerator(cmnt.createdAt)}}</li>
88 88 </ul>
89 89 </div>
90 90 <!-- header -->
... ... @@ -93,10 +93,12 @@
93 93 </p>
94 94 <div class="joined_wrapper">
95 95 <ul class="joined-info info_bc_spc">
  96 +
96 97 <li>
97   - <img src="../assets/images/purple-heart.png" />
  98 + <img src="../assets/images/heart.svg" v-if="cmnt.like == false" @click="likeComment(true,cmnt._id)" class="cursor-pointer"/>
  99 + <img src="../assets/images/purple-heart.png" v-if="cmnt.like == true" @click="likeComment(false,cmnt._id)" class="cursor-pointer"/>
98 100 </li>
99   - <li><a href="javasript:void(0);"> 0</a></li>
  101 + <li><a href="javasript:void(0);"> {{cmnt.likes.length}}</a></li>
100 102 <li class="comment-spc">
101 103 <img src="../assets/images/purple-comment.png" />
102 104 </li>
... ... @@ -141,7 +143,7 @@
141 143 <span></span
142 144 ><img src="../assets/images/u-info-icon.png" />{{childCmnt.user.karmaPoints}}pts
143 145 </li>
144   - <li><span></span>{{dateGenerator(childCmnt.createdAt)}}days ago</li>
  146 + <li><span></span>{{dateGenerator(childCmnt.createdAt)}}</li>
145 147 </ul>
146 148 </div>
147 149 <p>
... ... @@ -150,7 +152,8 @@
150 152 <div class="joined_wrapper">
151 153 <ul class="joined-info info_bc_spc">
152 154 <li>
153   - <img src="../assets/images/purple-heart.png" />
  155 + <img src="../assets/images/heart.svg" v-if="childCmnt.like == false" @click="likeComment(true,childCmnt._id)" class="cursor-pointer"/>
  156 + <img src="../assets/images/purple-heart.png" v-if="childCmnt.like == true" @click="likeComment(false,childCmnt._id)" class="cursor-pointer"/>
154 157 </li>
155 158 <li><a href="javasript:void(0);"> {{childCmnt.likes.length}}</a></li>
156 159  
... ... @@ -200,7 +203,7 @@
200 203 </div>
201 204 <!-- user thoughts -->
202 205  
203   - <div class="single-author-li-comments">
  206 + <div class="single-author-li-comments" v-if="commentExistCheck(0)">
204 207 <div class="a-intro-comments custom-c-style">
205 208 <!-- <p>
206 209 I wonder what the difference between “
... ... @@ -209,34 +212,40 @@
209 212 >” are. If they are the same, there are two “call to actions”
210 213 for the same workflow
211 214 </p> -->
212   - <p>{{ currentSlideData.payload.comments[0].comment }}</p>
  215 + <p >{{ commentList[0].comment }}</p>
213 216 <ul class="rly-comment-set">
214   - <li>
215   - <img src="../assets/images/color-heart.svg" />
216   - <a href="javascript:void(0);">0</a>
  217 + <!-- like/dislike -->
  218 + <li >
  219 + <img src="../assets/images/heart.svg" v-if="commentList[0].like == false" @click="likeComment(true,commentList[0]._id)" class="cursor-pointer"/>
  220 + <img src="../assets/images/purple-heart.png" v-if="commentList[0].like == true" @click="likeComment(false,commentList[0]._id)" class="cursor-pointer"/>
  221 + <a href="javascript:void(0);">{{commentList[0].likes.length}}</a>
217 222 </li>
  223 + <!-- like/dislike ends -->
218 224 <li>
219 225 <img src="../assets/images/rply.svg" />
220   - <a href="javascript:void(0);" @click="open_ct_box">Reply</a>
  226 + <a href="javascript:void(0);" @click="reply_cht_box(0)">Reply</a>
221 227 </li>
222 228 </ul>
223 229 </div>
224 230 <!-- comments box -->
225 231 </div>
226 232 <!-- single author comments -->
227   - <div class="single-author-li-comments">
  233 + <div class="single-author-li-comments" v-if="commentExistCheck(1)">
228 234 <div class="a-intro-comments custom-c-style">
229 235 <p>
230   - {{ currentSlideData.payload.comments[1].comment }}
  236 + {{ commentList[1].comment }}
231 237 </p>
232 238 <ul class="rly-comment-set">
233   - <li>
234   - <img src="../assets/images/color-heart.svg" />
235   - <a href="javascript:void(0);">0</a>
  239 + <!-- like/dislike -->
  240 + <li >
  241 + <img src="../assets/images/heart.svg" v-if="commentList[1].like == false" @click="likeComment(true,commentList[1]._id)" class="cursor-pointer"/>
  242 + <img src="../assets/images/purple-heart.png" v-if="commentList[1].like == true" @click="likeComment(false,commentList[1]._id)" class="cursor-pointer"/>
  243 + <a href="javascript:void(0);">{{commentList[1].likes.length}}</a>
236 244 </li>
  245 + <!-- like/dislike ends -->
237 246 <li>
238 247 <img src="../assets/images/rply.svg" />
239   - <a href="javascript:void(0);" @click="open_ct_box">Reply</a>
  248 + <a href="javascript:void(0);" @click="reply_cht_box(1)">Reply</a>
240 249 </li>
241 250 </ul>
242 251 </div>
... ... @@ -245,38 +254,44 @@
245 254 <!-- single author comments -->
246 255 </div>
247 256 <!-- single mobile Left insight -->
248   - <div class="c-product-insight-wrp two-screen-spc-top">
  257 + <div class="c-product-insight-wrp two-screen-spc-top" v-if="commentExistCheck(2)">
249 258 <div class="single-author-li-comments">
250 259 <div class="a-intro-comments">
251 260 <p>
252   - {{ currentSlideData.payload.comments[2].comment }}
  261 + {{ commentList[2].comment }}
253 262 </p>
254 263 <ul class="rly-comment-set">
255   - <li>
256   - <img src="../assets/images/color-heart.svg" />
257   - <a href="javascript:void(0);">0</a>
  264 + <!-- like/dislike -->
  265 + <li >
  266 + <img src="../assets/images/heart.svg" v-if="commentList[2].like == false" @click="likeComment(true,commentList[2]._id)" class="cursor-pointer"/>
  267 + <img src="../assets/images/purple-heart.png" v-if="commentList[2].like == true" @click="likeComment(false,commentList[2]._id)" class="cursor-pointer"/>
  268 + <a href="javascript:void(0);">{{commentList[2].likes.length}}</a>
258 269 </li>
  270 + <!-- like/dislike ends -->
259 271 <li>
260 272 <img src="../assets/images/rply.svg" />
261   - <a href="javascript:void(0);" @click="open_ct_box">Reply</a>
  273 + <a href="javascript:void(0);" @click="reply_cht_box(2)">Reply</a>
262 274 </li>
263 275 </ul>
264 276 </div>
265 277 <!-- comments box -->
266 278 </div>
267   - <div class="single-author-li-comments">
  279 + <div class="single-author-li-comments" v-if="commentExistCheck(3)">
268 280 <div class="a-intro-comments">
269 281 <p>
270   - {{ currentSlideData.payload.comments[3].comment }}
  282 + {{ commentList[3].comment }}
271 283 </p>
272 284 <ul class="rly-comment-set">
273   - <li>
274   - <img src="../assets/images/color-heart.svg" />
275   - <a href="javascript:void(0);">0</a>
  285 + <!-- like/dislike -->
  286 + <li >
  287 + <img src="../assets/images/heart.svg" v-if="commentList[3].like == false" @click="likeComment(true,commentList[3]._id)" class="cursor-pointer"/>
  288 + <img src="../assets/images/purple-heart.png" v-if="commentList[3].like == true" @click="likeComment(false,commentList[3]._id)" class="cursor-pointer"/>
  289 + <a href="javascript:void(0);">{{commentList[3].likes.length}}</a>
276 290 </li>
  291 + <!-- like/dislike ends -->
277 292 <li>
278 293 <img src="../assets/images/rply.svg" />
279   - <a href="javascript:void(0);" @click="open_ct_box">Reply</a>
  294 + <a href="javascript:void(0);" @click="reply_cht_box(3)">Reply</a>
280 295 </li>
281 296 </ul>
282 297 </div>
... ... @@ -298,7 +313,7 @@
298 313 <div class="ft-comments-group testi-photos-ct">
299 314 <div class="c-with-photos">
300 315 <span class="count-comments"
301   - >{{ commentList.length - 1 }}+ Comments</span
  316 + >{{ getLastcomment('count',commentList) }}+ Comments</span
302 317 ><!-- count commets -->
303 318 <ul class="comments-photos">
304 319 <li><img src="../assets/images/c-photo-1.png" /></li>
... ... @@ -309,7 +324,7 @@
309 324 </div>
310 325 <div class="comments-detail all-c-space">
311 326 <span
312   - >{{ commentList[commentList.length - 1].user.name }}
  327 + >{{ getLastcomment('name',commentList) }}
313 328 <a href="javascript:void(0);" @click="open_ct_box"
314 329 >View All</a
315 330 ></span
... ... @@ -317,7 +332,7 @@
317 332 <p>
318 333 <!-- I wonder what the difference between “Dunzo Assistant”
319 334 and “Pickup and Drop... -->
320   - {{ commentList[commentList.length - 1].comment }}
  335 + {{ getLastcomment('msg',commentList) }}
321 336 </p>
322 337 </div>
323 338 <!-- comments detail -->
... ... @@ -334,7 +349,7 @@
334 349 <input
335 350 type="text"
336 351 class="form-control"
337   - placeholder="Kathy, Something on your mind?"
  352 + placeholder="Something on your mind?"
338 353 id="open_ct_box"
339 354 v-model="comment"
340 355 />
... ... @@ -413,11 +428,11 @@ export default {
413 428 var allSlideData = localStorage.getItem(
414 429 "spotlight_slide" + this.$route.params.caseStudyId
415 430 );
  431 + var userdata = localStorage.getItem("spotlight_usertoken");
416 432 if (allSlideData) {
417 433 this.allSlide = JSON.parse(allSlideData);
418 434 this.getCurrentSlideData();
419 435 }
420   - var userdata = localStorage.getItem("spotlight_usertoken");
421 436 if (userdata) {
422 437 userdata = JSON.parse(userdata);
423 438 this.usertoken = userdata.token;
... ... @@ -478,6 +493,29 @@ export default {
478 493 }
479 494 });
480 495 },
  496 + likeComment(status,id) {
  497 + console.log("===", this.comment);
  498 + var obj = {
  499 + commentId: id,
  500 + like: status
  501 +
  502 + };
  503 + axios
  504 + .post("/bounceBoard/like", obj, {
  505 + headers: {
  506 + Authorization: "Bearer " + this.usertoken,
  507 + },
  508 + })
  509 + .then((response) => {
  510 + this.getComment();
  511 + console.log(response);
  512 + })
  513 + .catch((error) => {
  514 + if (error.response) {
  515 + this.$toaster.error(error.response.data.message);
  516 + }
  517 + });
  518 + },
481 519 createChildComment(cmnt) {
482 520 console.log(cmnt,"===", this.comment);
483 521 var obj = {
... ... @@ -521,7 +559,9 @@ export default {
521 559 var keys = Object.keys(response.data.data)
522 560 response.data.data
523 561 keys.forEach((key_) => {
524   - comments.push(response.data.data[key_])
  562 + if(response.data.data[key_].comment != null){
  563 + comments.push(response.data.data[key_])
  564 + }
525 565 });
526 566 comments.forEach((coment_)=>{
527 567 coment_.childInput = false;
... ... @@ -535,7 +575,13 @@ export default {
535 575 var todayDate = moment(new Date(), "DD.MM.YYYY");
536 576 var endDate = moment(new Date(curreDate), "DD.MM.YYYY");
537 577 var result = todayDate.diff(endDate, 'days');
538   - return result;
  578 + var date = null;
  579 + if(result == 0){
  580 + date = 'Today';
  581 + }else{
  582 + date = result +' days ago';
  583 + }
  584 + return date;
539 585 },
540 586 goToLogin() {
541 587 this.$router.push("/login");
... ... @@ -562,6 +608,44 @@ export default {
562 608 this.parentInput = true;
563 609  
564 610 },
  611 + reply_cht_box(i){
  612 + console.log(this.commentList,"cmnt");
  613 + $("#cht_box_close").addClass("cht_close");
  614 + $("#open_ct_box, .c_hide").hide();
  615 + $(".footer-top").removeClass("white-bg");
  616 + this.commentList[i].childInput = true;
  617 + this.parentInput = false;
  618 + },
  619 + getLastcomment(flag,commentArray){
  620 + var finalComment = null;
  621 + var totalMessage = 0;
  622 + var name = null;
  623 + commentArray.forEach(comment_ => {
  624 + console.log("comment_",comment_)
  625 + if(comment_.comment != null){
  626 + name = comment_.user.name;
  627 + finalComment = comment_.comment;
  628 + totalMessage++
  629 + }
  630 +
  631 + });
  632 + if(flag == 'count'){
  633 + return totalMessage = totalMessage == 1 ?1:totalMessage-1;
  634 + }else if('name'){
  635 + return name = name;
  636 + }else{
  637 + return finalComment;
  638 + }
  639 + },
  640 + commentExistCheck(number){
  641 + console.log( this.commentList.length,"number",number)
  642 + var returnValue = false;
  643 + if(number < this.commentList.length){
  644 + returnValue = true;
  645 + }
  646 + return returnValue;
  647 +
  648 + }
565 649 },
566 650 };
567 651 //
... ...
src/components/SingleScreengrabOneInsight.vue
Diff comments   View file @145dd9b
... ... @@ -83,7 +83,7 @@ When the user is already onboarded and is in the &lt;strong&gt; engage stage &lt;/strong&gt;
83 83 <div class="row">
84 84 <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">
85 85 <div class="form-group frm-wdth">
86   - <input type="text" class="form-control" placeholder="Kathy, Something on your mind?" id="">
  86 + <input type="text" class="form-control" placeholder="Something on your mind?" id="">
87 87 </div></div>
88 88 <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">
89 89 <a href="javascript:void(0);" class="add-comment"><img src="../assets/images/add-comment.svg" /> Comment</a>
... ...
src/components/SingleWebScreenInsightOne.vue
Diff comments   View file @145dd9b
... ... @@ -83,7 +83,7 @@ When the user is already onboarded and is in the &lt;strong&gt; engage stage &lt;/strong&gt;
83 83 <div class="row">
84 84 <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">
85 85 <div class="form-group frm-wdth">
86   - <input type="text" class="form-control" placeholder="Kathy, Something on your mind?" id="">
  86 + <input type="text" class="form-control" placeholder="Something on your mind?" id="">
87 87 </div></div>
88 88 <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">
89 89 <a href="javascript:void(0);" class="add-comment"><img src="../assets/images/add-comment.svg" /> Comment</a>
... ...
src/components/TwoScreenWithInsight.vue
Diff comments   View file @145dd9b
... ... @@ -350,7 +350,7 @@
350 350 <input
351 351 type="text"
352 352 class="form-control"
353   - placeholder="Kathy, Something on your mind?"
  353 + placeholder="Something on your mind?"
354 354 id="open_ct_box"
355 355 v-model="comment"
356 356 />
... ...
src/components/TwoScreenWithoutInsight.vue
Diff comments   View file @145dd9b
... ... @@ -344,7 +344,7 @@
344 344 <input
345 345 type="text"
346 346 class="form-control"
347   - placeholder="Kathy, Something on your mind?"
  347 + placeholder="Something on your mind?"
348 348 id="open_ct_box"
349 349 v-model="comment"
350 350 />
... ...
src/components/TwoScreengrabWithComments.vue
Diff comments   View file @145dd9b
... ... @@ -93,7 +93,7 @@
93 93 <div class="row">
94 94 <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">
95 95 <div class="form-group frm-wdth">
96   - <input type="text" class="form-control" placeholder="Kathy, Something on your mind?" id="">
  96 + <input type="text" class="form-control" placeholder="Something on your mind?" id="">
97 97 </div></div>
98 98 <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">
99 99 <a href="javascript:void(0);" class="add-comment"><img src="../assets/images/add-comment.svg" /> Comment</a>
... ...
src/components/TwoScreensWithTwoAuthor.vue
Diff comments   View file @145dd9b
... ... @@ -104,7 +104,7 @@
104 104 <div class="row">
105 105 <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">
106 106 <div class="form-group frm-wdth addfrm-spc">
107   - <input type="text" class="form-control" placeholder="Kathy, Something on your mind?" id="">
  107 + <input type="text" class="form-control" placeholder="Something on your mind?" id="">
108 108 </div></div>
109 109 <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">
110 110 <a href="javascript:void(0);" class="add-comment"><img src="../assets/images/add-comment.svg" /> Comment</a>
... ...
src/components/TwoWebScreenWithInsight.vue
Diff comments   View file @145dd9b
... ... @@ -95,7 +95,7 @@
95 95 <div class="row">
96 96 <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">
97 97 <div class="form-group frm-wdth addfrm-spc">
98   - <input type="text" class="form-control" placeholder="Kathy, Something on your mind?" id="">
  98 + <input type="text" class="form-control" placeholder="Something on your mind?" id="">
99 99 </div></div>
100 100 <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">
101 101 <a href="javascript:void(0);" class="add-comment"><img src="../assets/images/add-comment.svg" /> Comment</a>
... ...
src/components/noscreenshotSingleautho.vue
Diff comments   View file @145dd9b
... ... @@ -297,7 +297,7 @@
297 297 <input
298 298 type="text"
299 299 class="form-control"
300   - placeholder="Kathy, Something on your mind?"
  300 + placeholder="Something on your mind?"
301 301 id="open_ct_box"
302 302 v-model="comment"
303 303 />
... ...