From 4234f1fc06a007cc076705b690dee724315c60bb Mon Sep 17 00:00:00 2001
From: digvijay26 <digvijay.singh@viithiisys.com>
Date: Fri, 8 Jan 2021 08:30:43 +0530
Subject: [PATCH] profile module added

---
 src/auth/index.js          |   1 +
 src/components/Profile.vue | 270 +++++++++++++++++++++++++++++++--------------
 2 files changed, 188 insertions(+), 83 deletions(-)

diff --git a/src/auth/index.js b/src/auth/index.js
index c4a16d7..67460a4 100644
--- a/src/auth/index.js
+++ b/src/auth/index.js
@@ -125,6 +125,7 @@ export const useAuth0 = ({
                         // profileImage: u.picture
                     }).then(res => {
                         console.log("res",res);
+                        this.$toaster.success(res.data.message);
                         localStorage.setItem('spotlight_usertoken', JSON.stringify(res.data.data))
                         console.log("onboarding", res)
                         router.push({ name: 'Profile' })
diff --git a/src/components/Profile.vue b/src/components/Profile.vue
index 43125d1..57ba5d8 100644
--- a/src/components/Profile.vue
+++ b/src/components/Profile.vue
@@ -19,8 +19,8 @@
               >
             </li>
             <li>
-              <a href="javasript:void(0);"
-                @click="getRandomAvatar()"><img src="../assets/images/randomise.svg" /><span
+              <a href="javasript:void(0);" @click="getRandomAvatar()"
+                ><img src="../assets/images/randomise.svg" /><span
                   >Randomise Avatar</span
                 ></a
               >
@@ -118,7 +118,7 @@
                     <input
                       class=""
                       placeholder="Add interest"
-                      v-on:keyup.enter="addInterest" 
+                      v-on:keyup.enter="addInterest"
                       v-model="interestName"
                     />
                     <a href="javascript:void(0);" @click="addInterest()"
@@ -329,10 +329,19 @@
             </li>
           </ul>
         </div>
-          <a href="javasript:void(0);"  @click="addProfileDialog" class="update_profile"><span></span> Update Profile</a>
+        <a
+          href="javasript:void(0);"
+          @click="addProfileDialog"
+          class="update_profile"
+          ><span></span> Update Profile</a
+        >
         <div class="">
-        
-          <a href="javascript:void(0);" class="user-profile-photo common_color" @click="userprofileshowDialog"><img :src="userData.profilePic" /></a>
+          <a
+            href="javascript:void(0);"
+            class="user-profile-photo common_color"
+            @click="userprofileshowDialog"
+            ><img :src="userData.profilePic"
+          /></a>
           <div class="sub-menu-user" id="userprofileshow" style="display: none">
             <ul>
               <li>
@@ -356,30 +365,55 @@
           <div class="user-profile">
             <h1>
               {{ userData.firstName }} {{ userData.lastName }}
-              <span href="javasript:void(0);" class="tags no-cursor no-underline">{{ userData.role }}</span>
+              <span
+                href="javasript:void(0);"
+                class="tags no-cursor no-underline"
+                >{{ userData.role }}</span
+              >
             </h1>
             <ul class="joined-info">
               <li>
-                <a href="javascript:void(0);" v-if="userData.designation.length == 0 && userData.organisation.length == 0" @click="addProfileDialog"
+                <a
+                  href="javascript:void(0);"
+                  v-if="
+                    userData.designation.length == 0 &&
+                    userData.organisation.length == 0
+                  "
+                  @click="addProfileDialog"
                   >Add your work</a
                 >
-                <a  class="no-cursor no-underline" href="javascript:void(0);" v-if="userData.designation.length != 0" 
-                  >{{userData.designation}}</a
+                <a
+                  class="no-cursor no-underline"
+                  href="javascript:void(0);"
+                  v-if="userData.designation.length != 0"
+                  >{{ userData.designation }}</a
                 >
-                <a  class="no-cursor no-underline" href="javascript:void(0);" v-if="userData.designation.length != 0 && userData.organisation.length != 0" 
+                <a
+                  class="no-cursor no-underline"
+                  href="javascript:void(0);"
+                  v-if="
+                    userData.designation.length != 0 &&
+                    userData.organisation.length != 0
+                  "
                   >at</a
                 >
-                <a  class="no-cursor no-underline" href="javascript:void(0);" v-if="userData.organisation.length != 0" 
-                  >{{userData.organisation}}</a
+                <a
+                  class="no-cursor no-underline"
+                  href="javascript:void(0);"
+                  v-if="userData.organisation.length != 0"
+                  >{{ userData.organisation }}</a
                 >
                 <img src="../assets/images/u-info-icon.png" /> <span></span>
               </li>
               <li>
-                <a href="javasript:void(0);" content="Karma Points" v-tippy> {{ userData.karmaPoints }} Karma</a> <span></span>
+                <a href="javasript:void(0);" content="Karma Points" v-tippy>
+                  {{ userData.karmaPoints }} Karma</a
+                >
+                <span></span>
               </li>
               <li>
-                <a href="javasript:void(0);"
-                  class="no-cursor no-underline">Joined on
+                <a href="javasript:void(0);" class="no-cursor no-underline"
+                  >Joined on
                   {{ moment(userData.createdAt).format("MMM YYYY") }}</a
                 >
               </li>
@@ -439,21 +473,39 @@
       <div class="profile-data-wrp">
         <div class="container-fluid data-wrp" id="case-study-0">
           <div class="row" v-if="caseStudies.length == 0">
-             <div class="col-6 col-lg-6">
-               <div class="full-w-height-profile ex-light seats_bg" >
-                   <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>
-  <p>Explore the spotlights others has put together</p>
-                 </div><!-- full width -->
-             </div><!-- col 6 -->
-                  <div class="col-6 col-lg-6">
-               <div class="full-w-height-profile ex-light spotlight_bg">
-                 <img src="../assets/images/add-role.svg" class="add-role" />
-                 <div class="clearfix"></div><!-- clearfix -->
-                   <a href="javasript:void(0);" class="profile-md-bt center-and-spc" @click="openUrl('https://www.productgrowth.org/spotlight#typeform-spotlight')">Publish Spotlight</a>
-  <p>Share your own insights through Spotlight</p>
-                 </div><!-- full width -->
-             </div><!-- col 6 -->
-         
+            <div class="col-6 col-lg-6">
+              <div class="full-w-height-profile ex-light seats_bg">
+                <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
+                >
+                <p>Explore the spotlights others has put together</p>
+              </div>
+              <!-- full width -->
+            </div>
+            <!-- col 6 -->
+            <div class="col-6 col-lg-6">
+              <div class="full-w-height-profile ex-light spotlight_bg">
+                <img src="../assets/images/add-role.svg" class="add-role" />
+                <div class="clearfix"></div>
+                <!-- clearfix -->
+                <a
+                  href="javasript:void(0);"
+                  class="profile-md-bt center-and-spc"
+                  @click="
+                    openUrl(
+                      'https://www.productgrowth.org/spotlight#typeform-spotlight'
+                    )
+                  "
+                  >Publish Spotlight</a
+                >
+                <p>Share your own insights through Spotlight</p>
+              </div>
+              <!-- full width -->
+            </div>
+            <!-- col 6 -->
           </div>
 
           <div class="profile-data-wrp" v-if="caseStudies.length != 0">
@@ -467,10 +519,22 @@
                         <img :src="study.intro.logoURL" />
                       </div>
                       <div class="c-tag">
-                        <img src="../assets/images/retake-blue.svg" v-if="study.intro.type == 'Retake'"/>
-                        <img src="../assets/images/behind-blue.svg" v-if="study.intro.type == 'Behind-the-scenes'"/>
-                        <img src="../assets/images/critique-blue.svg" v-if="study.intro.type == 'Critique'"/>
-                        <img src="../assets/images/juxtapose-blue.svg" v-if="study.intro.type == 'Juxtapose'"/>
+                        <img
+                          src="../assets/images/retake-blue.svg"
+                          v-if="study.intro.type == 'Retake'"
+                        />
+                        <img
+                          src="../assets/images/behind-blue.svg"
+                          v-if="study.intro.type == 'Behind-the-scenes'"
+                        />
+                        <img
+                          src="../assets/images/critique-blue.svg"
+                          v-if="study.intro.type == 'Critique'"
+                        />
+                        <img
+                          src="../assets/images/juxtapose-blue.svg"
+                          v-if="study.intro.type == 'Juxtapose'"
+                        />
                       </div>
                     </div>
                     <!-- company detail-->
@@ -487,13 +551,38 @@
                         {{ area }}
                       </span>
                     </p>
-                    <ul class="tags-list" >
+                    <ul class="tags-list">
                       <li v-for="(tags, j) in study.insightTags" :key="j">
-                        <a href="javasript:void(0);" class="insight-design" v-if="tags == 'Design'" >Design</a>
-                        <a href="javasript:void(0);" class="insight-product" v-if="tags == 'Product'">Product</a>
-                        <a href="javasript:void(0);" class="insight-marketing" v-if="tags == 'Marketing'">Marketing</a>
-                        <a href="javasript:void(0);" class="insight-pricing" v-if="tags == 'Pricing'">Pricing</a>
-                        <a href="javasript:void(0);" class="insight-psychology" v-if="tags == 'Psychology'">Psychology</a>
+                        <a
+                          href="javasript:void(0);"
+                          class="insight-design"
+                          v-if="tags == 'Design'"
+                          >Design</a
+                        >
+                        <a
+                          href="javasript:void(0);"
+                          class="insight-product"
+                          v-if="tags == 'Product'"
+                          >Product</a
+                        >
+                        <a
+                          href="javasript:void(0);"
+                          class="insight-marketing"
+                          v-if="tags == 'Marketing'"
+                          >Marketing</a
+                        >
+                        <a
+                          href="javasript:void(0);"
+                          class="insight-pricing"
+                          v-if="tags == 'Pricing'"
+                          >Pricing</a
+                        >
+                        <a
+                          href="javasript:void(0);"
+                          class="insight-psychology"
+                          v-if="tags == 'Psychology'"
+                          >Psychology</a
+                        >
                       </li>
                       <!-- <li><a href="javasript:void(0);" class="rose-bud">Marketing</a></li>
                       <li><a href="javasript:void(0);" class="pattens-blue">Product</a></li> -->
@@ -556,43 +645,44 @@ import axios from "axios";
 
 export default {
   name: "Profile",
-data: () =>({
-        loggedinFlag: false,
-      usertoken: null,
-      userData: {
-        "verified": null,
-		"bgColor": null,
-		"interests": [],
-		"karmaPoints": null,
-		"socialLogin": null,
-		"notification": null,
-		"profilePic": null,
-		"role": null,
-		"name":null,
-		"email": null,
-		"firstName":null,
-		"lastName":null,
-		"createdAt": null,
-		"bio": null,
-		"designation": "",
-		"organisation": "",
-		"socialMediaProfiles": {'facebook':null,'linkedin':null}
-      },
-      caseStudies: [],
-      interestName: null,
-      oldId: null,
-      socialLink: null,
-      currentSocialLinkName: null,
-      showCompany:false,
-      showDesignation:false,
-     }),
+  data: () => ({
+    loggedinFlag: false,
+    usertoken: null,
+    userData: {
+      verified: null,
+      bgColor: null,
+      interests: [],
+      karmaPoints: null,
+      socialLogin: null,
+      notification: null,
+      profilePic: null,
+      role: null,
+      name: null,
+      email: null,
+      firstName: null,
+      lastName: null,
+      createdAt: null,
+      firstLogin: null,
+      bio: null,
+      designation: "",
+      organisation: "",
+      socialMediaProfiles: { facebook: null, linkedin: null },
+    },
+    caseStudies: [],
+    interestName: null,
+    oldId: null,
+    socialLink: null,
+    currentSocialLinkName: null,
+    showCompany: false,
+    showDesignation: false,
+  }),
 
   mounted() {
     this.userData = {};
     this.socialLink = [];
     this.userData.interests = [];
     this.userData.socialMediaProfiles = {};
-    this.userData.designation = ""; 
+    this.userData.designation = "";
     this.userData.organisation = "";
     this.userData.socialMediaProfiles.facebook = null;
     this.userData.socialMediaProfiles.linkedin = null;
@@ -627,7 +717,9 @@ data: () =>({
       }
     },
     removeInterest(i) {
+      console.log("i",i)
       this.userData.interests.splice(i, 1);
+      console.log(" this.userData", this.userData.interests)
     },
     assignClass() {
       var element = document.getElementById(this.userData.bgColor);
@@ -659,15 +751,21 @@ data: () =>({
         })
         .then((response) => {
           if (!response.data.data.socialMediaProfiles) {
-              this.userData.socialMediaProfiles = {};
+            this.userData.socialMediaProfiles = {};
           }
-          this.userData = Object.assign(this.userData, response.data.data)
-          
+          this.userData = response.data.data;
+
           // this.userData = response.data.data;
           this.oldId = this.userData.bgColor;
           console.log(this.oldId, "this.userData.", this.userData);
-         this.showDesignation =  this.userData.designation.length == 0?true:false; 
-         this.showCompany =  this.userData.organisation.length == 0?true:false; 
+          this.showDesignation =
+            this.userData.designation.length == 0 ? true : false;
+          this.showCompany =
+            this.userData.organisation.length == 0 ? true : false;
+            console.log("this.userData.firstLogin ",this.userData.firstLogin )
+          if (this.userData.firstLogin == true) {
+            this.addProfileDialog();
+          }
           this.assignClass();
           console.log(response.data.data);
         })
@@ -681,7 +779,7 @@ data: () =>({
           },
         })
         .then((response) => {
-         this.userData.profilePic = response.data.imageURL;
+          this.userData.profilePic = response.data.imageURL;
           console.log(response.data.imageURL);
         })
         .catch((error) => console.log(error));
@@ -728,7 +826,7 @@ data: () =>({
           payload: {
             metaData: slides_.metaData,
             comments: slides_.comments,
-            insight: slides_.insight?slides_.insight:null,
+            insight: slides_.insight ? slides_.insight : null,
           },
         };
         // slides_
@@ -760,7 +858,10 @@ data: () =>({
       });
 
       console.log(finalSlides);
-      localStorage.setItem('spotlight_slide'+payload._id, JSON.stringify(finalSlides))
+      localStorage.setItem(
+        "spotlight_slide" + payload._id,
+        JSON.stringify(finalSlides)
+      );
       this.$router.push({
         name: "EpisodeIntro",
         params: {
@@ -807,6 +908,9 @@ data: () =>({
     },
     saveProfile() {
       var obj = {};
+      if (this.userData.firstLogin == true) {
+        this.userData.firstLogin = false;
+      }
       this.userData.name =
         this.userData.firstName + " " + this.userData.lastName;
       obj = Object.assign(obj, this.userData);
@@ -877,17 +981,17 @@ data: () =>({
     userprofileshowDialog() {
       $("#userprofileshow").toggle();
     },
-    openUrl(url){
+    openUrl(url) {
       window.open(url);
     },
   },
 };
 </script>
 <style>
-.no-cursor{
+.no-cursor {
   cursor: default !important;
 }
-.no-underline{
+.no-underline {
   text-decoration: none !important;
 }
 </style>
-- 
2.0.0