viithiisys / spotlight-frontend

Download as
Browse Code ยป

Commit 4234f1fc06a007cc076705b690dee724315c60bb

Authored by Digvijay Singh
1 parent 56f4b7548f
Exists in master

profile module added

Showing 2 changed files with 188 additions and 83 deletions   Show diff stats
src/auth/index.js
Diff comments   View file @4234f1f
... ... @@ -125,6 +125,7 @@ export const useAuth0 = ({
125 125 // profileImage: u.picture
126 126 }).then(res => {
127 127 console.log("res",res);
  128 + this.$toaster.success(res.data.message);
128 129 localStorage.setItem('spotlight_usertoken', JSON.stringify(res.data.data))
129 130 console.log("onboarding", res)
130 131 router.push({ name: 'Profile' })
... ...
src/components/Profile.vue
Diff comments   View file @4234f1f
... ... @@ -19,8 +19,8 @@
19 19 >
20 20 </li>
21 21 <li>
22   - <a href="javasript:void(0);"
23   - @click="getRandomAvatar()"><img src="../assets/images/randomise.svg" /><span
  22 + <a href="javasript:void(0);" @click="getRandomAvatar()"
  23 + ><img src="../assets/images/randomise.svg" /><span
24 24 >Randomise Avatar</span
25 25 ></a
26 26 >
... ... @@ -118,7 +118,7 @@
118 118 <input
119 119 class=""
120 120 placeholder="Add interest"
121   - v-on:keyup.enter="addInterest"
  121 + v-on:keyup.enter="addInterest"
122 122 v-model="interestName"
123 123 />
124 124 <a href="javascript:void(0);" @click="addInterest()"
... ... @@ -329,10 +329,19 @@
329 329 </li>
330 330 </ul>
331 331 </div>
332   - <a href="javasript:void(0);" @click="addProfileDialog" class="update_profile"><span></span> Update Profile</a>
  332 + <a
  333 + href="javasript:void(0);"
  334 + @click="addProfileDialog"
  335 + class="update_profile"
  336 + ><span></span> Update Profile</a
  337 + >
333 338 <div class="">
334   -
335   - <a href="javascript:void(0);" class="user-profile-photo common_color" @click="userprofileshowDialog"><img :src="userData.profilePic" /></a>
  339 + <a
  340 + href="javascript:void(0);"
  341 + class="user-profile-photo common_color"
  342 + @click="userprofileshowDialog"
  343 + ><img :src="userData.profilePic"
  344 + /></a>
336 345 <div class="sub-menu-user" id="userprofileshow" style="display: none">
337 346 <ul>
338 347 <li>
... ... @@ -356,30 +365,55 @@
356 365 <div class="user-profile">
357 366 <h1>
358 367 {{ userData.firstName }} {{ userData.lastName }}
359   - <span href="javasript:void(0);" class="tags no-cursor no-underline">{{ userData.role }}</span>
  368 + <span
  369 + href="javasript:void(0);"
  370 + class="tags no-cursor no-underline"
  371 + >{{ userData.role }}</span
  372 + >
360 373 </h1>
361 374 <ul class="joined-info">
362 375 <li>
363   - <a href="javascript:void(0);" v-if="userData.designation.length == 0 && userData.organisation.length == 0" @click="addProfileDialog"
  376 + <a
  377 + href="javascript:void(0);"
  378 + v-if="
  379 + userData.designation.length == 0 &&
  380 + userData.organisation.length == 0
  381 + "
  382 + @click="addProfileDialog"
364 383 >Add your work</a
365 384 >
366   - <a class="no-cursor no-underline" href="javascript:void(0);" v-if="userData.designation.length != 0"
367   - >{{userData.designation}}</a
  385 + <a
  386 + class="no-cursor no-underline"
  387 + href="javascript:void(0);"
  388 + v-if="userData.designation.length != 0"
  389 + >{{ userData.designation }}</a
368 390 >
369   - <a class="no-cursor no-underline" href="javascript:void(0);" v-if="userData.designation.length != 0 && userData.organisation.length != 0"
  391 + <a
  392 + class="no-cursor no-underline"
  393 + href="javascript:void(0);"
  394 + v-if="
  395 + userData.designation.length != 0 &&
  396 + userData.organisation.length != 0
  397 + "
370 398 >at</a
371 399 >
372   - <a class="no-cursor no-underline" href="javascript:void(0);" v-if="userData.organisation.length != 0"
373   - >{{userData.organisation}}</a
  400 + <a
  401 + class="no-cursor no-underline"
  402 + href="javascript:void(0);"
  403 + v-if="userData.organisation.length != 0"
  404 + >{{ userData.organisation }}</a
374 405 >
375 406 <img src="../assets/images/u-info-icon.png" /> <span></span>
376 407 </li>
377 408 <li>
378   - <a href="javasript:void(0);" content="Karma Points" v-tippy> {{ userData.karmaPoints }} Karma</a> <span></span>
  409 + <a href="javasript:void(0);" content="Karma Points" v-tippy>
  410 + {{ userData.karmaPoints }} Karma</a
  411 + >
  412 + <span></span>
379 413 </li>
380 414 <li>
381   - <a href="javasript:void(0);"
382   - class="no-cursor no-underline">Joined on
  415 + <a href="javasript:void(0);" class="no-cursor no-underline"
  416 + >Joined on
383 417 {{ moment(userData.createdAt).format("MMM YYYY") }}</a
384 418 >
385 419 </li>
... ... @@ -439,21 +473,39 @@
439 473 <div class="profile-data-wrp">
440 474 <div class="container-fluid data-wrp" id="case-study-0">
441 475 <div class="row" v-if="caseStudies.length == 0">
442   - <div class="col-6 col-lg-6">
443   - <div class="full-w-height-profile ex-light seats_bg" >
444   - <a href="javasript:void(0);" class="profile-md-bt center-and-spc bt-spc-top" @click="openUrl('https://www.productgrowth.org/spotlight')">Explore Spotlights</a>
445   - <p>Explore the spotlights others has put together</p>
446   - </div><!-- full width -->
447   - </div><!-- col 6 -->
448   - <div class="col-6 col-lg-6">
449   - <div class="full-w-height-profile ex-light spotlight_bg">
450   - <img src="../assets/images/add-role.svg" class="add-role" />
451   - <div class="clearfix"></div><!-- clearfix -->
452   - <a href="javasript:void(0);" class="profile-md-bt center-and-spc" @click="openUrl('https://www.productgrowth.org/spotlight#typeform-spotlight')">Publish Spotlight</a>
453   - <p>Share your own insights through Spotlight</p>
454   - </div><!-- full width -->
455   - </div><!-- col 6 -->
456   -
  476 + <div class="col-6 col-lg-6">
  477 + <div class="full-w-height-profile ex-light seats_bg">
  478 + <a
  479 + href="javasript:void(0);"
  480 + class="profile-md-bt center-and-spc bt-spc-top"
  481 + @click="openUrl('https://www.productgrowth.org/spotlight')"
  482 + >Explore Spotlights</a
  483 + >
  484 + <p>Explore the spotlights others has put together</p>
  485 + </div>
  486 + <!-- full width -->
  487 + </div>
  488 + <!-- col 6 -->
  489 + <div class="col-6 col-lg-6">
  490 + <div class="full-w-height-profile ex-light spotlight_bg">
  491 + <img src="../assets/images/add-role.svg" class="add-role" />
  492 + <div class="clearfix"></div>
  493 + <!-- clearfix -->
  494 + <a
  495 + href="javasript:void(0);"
  496 + class="profile-md-bt center-and-spc"
  497 + @click="
  498 + openUrl(
  499 + 'https://www.productgrowth.org/spotlight#typeform-spotlight'
  500 + )
  501 + "
  502 + >Publish Spotlight</a
  503 + >
  504 + <p>Share your own insights through Spotlight</p>
  505 + </div>
  506 + <!-- full width -->
  507 + </div>
  508 + <!-- col 6 -->
457 509 </div>
458 510  
459 511 <div class="profile-data-wrp" v-if="caseStudies.length != 0">
... ... @@ -467,10 +519,22 @@
467 519 <img :src="study.intro.logoURL" />
468 520 </div>
469 521 <div class="c-tag">
470   - <img src="../assets/images/retake-blue.svg" v-if="study.intro.type == 'Retake'"/>
471   - <img src="../assets/images/behind-blue.svg" v-if="study.intro.type == 'Behind-the-scenes'"/>
472   - <img src="../assets/images/critique-blue.svg" v-if="study.intro.type == 'Critique'"/>
473   - <img src="../assets/images/juxtapose-blue.svg" v-if="study.intro.type == 'Juxtapose'"/>
  522 + <img
  523 + src="../assets/images/retake-blue.svg"
  524 + v-if="study.intro.type == 'Retake'"
  525 + />
  526 + <img
  527 + src="../assets/images/behind-blue.svg"
  528 + v-if="study.intro.type == 'Behind-the-scenes'"
  529 + />
  530 + <img
  531 + src="../assets/images/critique-blue.svg"
  532 + v-if="study.intro.type == 'Critique'"
  533 + />
  534 + <img
  535 + src="../assets/images/juxtapose-blue.svg"
  536 + v-if="study.intro.type == 'Juxtapose'"
  537 + />
474 538 </div>
475 539 </div>
476 540 <!-- company detail-->
... ... @@ -487,13 +551,38 @@
487 551 {{ area }}
488 552 </span>
489 553 </p>
490   - <ul class="tags-list" >
  554 + <ul class="tags-list">
491 555 <li v-for="(tags, j) in study.insightTags" :key="j">
492   - <a href="javasript:void(0);" class="insight-design" v-if="tags == 'Design'" >Design</a>
493   - <a href="javasript:void(0);" class="insight-product" v-if="tags == 'Product'">Product</a>
494   - <a href="javasript:void(0);" class="insight-marketing" v-if="tags == 'Marketing'">Marketing</a>
495   - <a href="javasript:void(0);" class="insight-pricing" v-if="tags == 'Pricing'">Pricing</a>
496   - <a href="javasript:void(0);" class="insight-psychology" v-if="tags == 'Psychology'">Psychology</a>
  556 + <a
  557 + href="javasript:void(0);"
  558 + class="insight-design"
  559 + v-if="tags == 'Design'"
  560 + >Design</a
  561 + >
  562 + <a
  563 + href="javasript:void(0);"
  564 + class="insight-product"
  565 + v-if="tags == 'Product'"
  566 + >Product</a
  567 + >
  568 + <a
  569 + href="javasript:void(0);"
  570 + class="insight-marketing"
  571 + v-if="tags == 'Marketing'"
  572 + >Marketing</a
  573 + >
  574 + <a
  575 + href="javasript:void(0);"
  576 + class="insight-pricing"
  577 + v-if="tags == 'Pricing'"
  578 + >Pricing</a
  579 + >
  580 + <a
  581 + href="javasript:void(0);"
  582 + class="insight-psychology"
  583 + v-if="tags == 'Psychology'"
  584 + >Psychology</a
  585 + >
497 586 </li>
498 587 <!-- <li><a href="javasript:void(0);" class="rose-bud">Marketing</a></li>
499 588 <li><a href="javasript:void(0);" class="pattens-blue">Product</a></li> -->
... ... @@ -556,43 +645,44 @@ import axios from &quot;axios&quot;;
556 645  
557 646 export default {
558 647 name: "Profile",
559   -data: () =>({
560   - loggedinFlag: false,
561   - usertoken: null,
562   - userData: {
563   - "verified": null,
564   - "bgColor": null,
565   - "interests": [],
566   - "karmaPoints": null,
567   - "socialLogin": null,
568   - "notification": null,
569   - "profilePic": null,
570   - "role": null,
571   - "name":null,
572   - "email": null,
573   - "firstName":null,
574   - "lastName":null,
575   - "createdAt": null,
576   - "bio": null,
577   - "designation": "",
578   - "organisation": "",
579   - "socialMediaProfiles": {'facebook':null,'linkedin':null}
580   - },
581   - caseStudies: [],
582   - interestName: null,
583   - oldId: null,
584   - socialLink: null,
585   - currentSocialLinkName: null,
586   - showCompany:false,
587   - showDesignation:false,
588   - }),
  648 + data: () => ({
  649 + loggedinFlag: false,
  650 + usertoken: null,
  651 + userData: {
  652 + verified: null,
  653 + bgColor: null,
  654 + interests: [],
  655 + karmaPoints: null,
  656 + socialLogin: null,
  657 + notification: null,
  658 + profilePic: null,
  659 + role: null,
  660 + name: null,
  661 + email: null,
  662 + firstName: null,
  663 + lastName: null,
  664 + createdAt: null,
  665 + firstLogin: null,
  666 + bio: null,
  667 + designation: "",
  668 + organisation: "",
  669 + socialMediaProfiles: { facebook: null, linkedin: null },
  670 + },
  671 + caseStudies: [],
  672 + interestName: null,
  673 + oldId: null,
  674 + socialLink: null,
  675 + currentSocialLinkName: null,
  676 + showCompany: false,
  677 + showDesignation: false,
  678 + }),
589 679  
590 680 mounted() {
591 681 this.userData = {};
592 682 this.socialLink = [];
593 683 this.userData.interests = [];
594 684 this.userData.socialMediaProfiles = {};
595   - this.userData.designation = "";
  685 + this.userData.designation = "";
596 686 this.userData.organisation = "";
597 687 this.userData.socialMediaProfiles.facebook = null;
598 688 this.userData.socialMediaProfiles.linkedin = null;
... ... @@ -627,7 +717,9 @@ data: () =&gt;({
627 717 }
628 718 },
629 719 removeInterest(i) {
  720 + console.log("i",i)
630 721 this.userData.interests.splice(i, 1);
  722 + console.log(" this.userData", this.userData.interests)
631 723 },
632 724 assignClass() {
633 725 var element = document.getElementById(this.userData.bgColor);
... ... @@ -659,15 +751,21 @@ data: () =&gt;({
659 751 })
660 752 .then((response) => {
661 753 if (!response.data.data.socialMediaProfiles) {
662   - this.userData.socialMediaProfiles = {};
  754 + this.userData.socialMediaProfiles = {};
663 755 }
664   - this.userData = Object.assign(this.userData, response.data.data)
665   -
  756 + this.userData = response.data.data;
  757 +
666 758 // this.userData = response.data.data;
667 759 this.oldId = this.userData.bgColor;
668 760 console.log(this.oldId, "this.userData.", this.userData);
669   - this.showDesignation = this.userData.designation.length == 0?true:false;
670   - this.showCompany = this.userData.organisation.length == 0?true:false;
  761 + this.showDesignation =
  762 + this.userData.designation.length == 0 ? true : false;
  763 + this.showCompany =
  764 + this.userData.organisation.length == 0 ? true : false;
  765 + console.log("this.userData.firstLogin ",this.userData.firstLogin )
  766 + if (this.userData.firstLogin == true) {
  767 + this.addProfileDialog();
  768 + }
671 769 this.assignClass();
672 770 console.log(response.data.data);
673 771 })
... ... @@ -681,7 +779,7 @@ data: () =&gt;({
681 779 },
682 780 })
683 781 .then((response) => {
684   - this.userData.profilePic = response.data.imageURL;
  782 + this.userData.profilePic = response.data.imageURL;
685 783 console.log(response.data.imageURL);
686 784 })
687 785 .catch((error) => console.log(error));
... ... @@ -728,7 +826,7 @@ data: () =&gt;({
728 826 payload: {
729 827 metaData: slides_.metaData,
730 828 comments: slides_.comments,
731   - insight: slides_.insight?slides_.insight:null,
  829 + insight: slides_.insight ? slides_.insight : null,
732 830 },
733 831 };
734 832 // slides_
... ... @@ -760,7 +858,10 @@ data: () =&gt;({
760 858 });
761 859  
762 860 console.log(finalSlides);
763   - localStorage.setItem('spotlight_slide'+payload._id, JSON.stringify(finalSlides))
  861 + localStorage.setItem(
  862 + "spotlight_slide" + payload._id,
  863 + JSON.stringify(finalSlides)
  864 + );
764 865 this.$router.push({
765 866 name: "EpisodeIntro",
766 867 params: {
... ... @@ -807,6 +908,9 @@ data: () =&gt;({
807 908 },
808 909 saveProfile() {
809 910 var obj = {};
  911 + if (this.userData.firstLogin == true) {
  912 + this.userData.firstLogin = false;
  913 + }
810 914 this.userData.name =
811 915 this.userData.firstName + " " + this.userData.lastName;
812 916 obj = Object.assign(obj, this.userData);
... ... @@ -877,17 +981,17 @@ data: () =&gt;({
877 981 userprofileshowDialog() {
878 982 $("#userprofileshow").toggle();
879 983 },
880   - openUrl(url){
  984 + openUrl(url) {
881 985 window.open(url);
882 986 },
883 987 },
884 988 };
885 989 </script>
886 990 <style>
887   -.no-cursor{
  991 +.no-cursor {
888 992 cursor: default !important;
889 993 }
890   -.no-underline{
  994 +.no-underline {
891 995 text-decoration: none !important;
892 996 }
893 997 </style>
... ...