From 2991bacc1d7eefcd33120d2aa56b71b5bb62c854 Mon Sep 17 00:00:00 2001
From: digvijay26 <digvijay.singh@viithiisys.com>
Date: Thu, 11 Mar 2021 12:59:33 +0530
Subject: [PATCH] ui flow change

---
 src/auth/index.js               |  10 ++-
 src/components/AuthorIntro.vue  |  13 ++-
 src/components/Header.vue       |  12 ++-
 src/components/Intermediate.vue |   6 +-
 src/components/LandingPage.vue  |  99 +++++++++++++--------
 src/components/Profile.vue      | 192 +++++++++++++++++++++++++++++-----------
 src/components/SignUp.vue       |   9 +-
 src/router/index.js             |   2 +-
 8 files changed, 246 insertions(+), 97 deletions(-)

diff --git a/src/auth/index.js b/src/auth/index.js
index f4ab903..1427ea7 100644
--- a/src/auth/index.js
+++ b/src/auth/index.js
@@ -124,14 +124,18 @@ export const useAuth0 = ({
                         verified: true
                         // profileImage: u.picture
                     }).then(res => {
-                        console.log("res", res);
+                        console.log("res---profile", res);
                         this.$toaster.success(res.data.message);
-                        localStorage.setItem('spotlight_usertoken', JSON.stringify(res.data.data))
+                        localStorage.setItem('spotlight_usertoken', JSON.stringify(res.data.data));
+                        localStorage.setItem('spotlight_id', res.data.data.id);
 
                         var previousUrl = localStorage.getItem("previous_url_spotlight");
                         console.log("onboarding", previousUrl)
                         if (!previousUrl) {
-                            router.push({ name: 'Profile' });
+                            router.push({ name: 'Profile',
+                            params: {
+                              id: res.data.data.id,
+                            }, });
                         } else {
                             previousUrl = JSON.parse(previousUrl);
                             console.log("onboarding-2", previousUrl)
diff --git a/src/components/AuthorIntro.vue b/src/components/AuthorIntro.vue
index 5360ef3..cdaa618 100644
--- a/src/components/AuthorIntro.vue
+++ b/src/components/AuthorIntro.vue
@@ -78,13 +78,16 @@ export default {
       allSlide:[],
       currentSlideIndex:null,
       currentSlideData:null,
+      // 
+      userId:null,
     };
   },
   mounted() {
     var allSlideData = localStorage.getItem("spotlight_slide"+this.$route.params.caseStudyId);
      if (allSlideData) {
       this.allSlide = JSON.parse(allSlideData);
-      this.getCurrentSlideData();
+      // this.getCurrentSlideData();
+      this.generatecaseStudies();
     }else{
       this.generatecaseStudies();
     }
@@ -110,6 +113,7 @@ export default {
 
   openStudy(payload) {
       console.log("payload-", payload);
+      this.userId = payload.userId[0];
       payload.intro.date = payload.createdAt;
       payload.intro.focusPoint = payload.focusAreas;
       axios
@@ -259,7 +263,12 @@ export default {
       this.$router.push("/");
     },
     goToProfile() {
-      this.$router.push("/profile");
+      this.$router.push({
+        name: "Profile",
+        params: {
+          id: this.userId,
+        },
+      });
     },
     
   },
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 61726f2..bda1904 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -73,12 +73,12 @@ export default {
     return {
       usertoken: null,
       profilePictue: null,
+      userId: null,
     };
   },
   mounted() {
-
-
     var userdata = localStorage.getItem("spotlight_usertoken");
+    this.userId = localStorage.getItem("spotlight_id");
     if (userdata) {
       userdata = JSON.parse(userdata);
       this.usertoken = userdata.token;
@@ -87,11 +87,17 @@ export default {
   },
   methods: {
     goTo() {
-      this.$router.push("/profile");
+      this.$router.push({
+        name: "Profile",
+        params: {
+          id: this.userId,
+        },
+      });
     },
     goToLogin() {
       localStorage.removeItem("spotlight_usertoken");
       localStorage.removeItem("spotlight_email");
+      localStorage.removeItem("spotlight_id");
       this.$router.push("/login");
     },
     getProfile() {
diff --git a/src/components/Intermediate.vue b/src/components/Intermediate.vue
index 4b2b65e..72d78a2 100644
--- a/src/components/Intermediate.vue
+++ b/src/components/Intermediate.vue
@@ -11,8 +11,12 @@
         name: 'Intermediate',
         data() {
             var userdata = localStorage.getItem('spotlight_usertoken')
+            var userid = localStorage.getItem('spotlight_id')
             if(userdata){
-                router.push({ path: '/profile'})
+                router.push({ name: 'Profile',
+                            params: {
+                              id: userid,
+                            }, });
             }
             return {
                 msg: 'Welcome to Your Vue.js App'
diff --git a/src/components/LandingPage.vue b/src/components/LandingPage.vue
index fccc6e8..5b0fef0 100644
--- a/src/components/LandingPage.vue
+++ b/src/components/LandingPage.vue
@@ -42,13 +42,10 @@
         </div>
       </nav>
       <!-- menu wrapper -->
-         <div class="sign-login-wrp">
+      <div class="sign-login-wrp">
         <!-- users land image -->
         <div class="s-l-left-section">
-          <h1 class="welcome-hd-back">
-            we’re stoked 
-you’re back!
-          </h1>
+          <h1 class="welcome-hd-back">we’re stoked you’re back!</h1>
         </div>
         <!-- users land image -->
         <div class="s-l-right-section">
@@ -58,13 +55,19 @@ you’re back!
               <div class="social-login">
                 <ul>
                   <li>
-                    <a @click="login" class="cursor-pointer"><img src="../assets/images/google.svg" /></a>
+                    <a @click="login" class="cursor-pointer"
+                      ><img src="../assets/images/google.svg"
+                    /></a>
                   </li>
                   <li>
-                    <a @click="login" class="cursor-pointer"><img src="../assets/images/linkdin.svg" /></a>
+                    <a @click="login" class="cursor-pointer"
+                      ><img src="../assets/images/linkdin.svg"
+                    /></a>
                   </li>
                   <li>
-                    <a @click="login" class="cursor-pointer"><img src="../assets/images/twitter.svg" /></a>
+                    <a @click="login" class="cursor-pointer"
+                      ><img src="../assets/images/twitter.svg"
+                    /></a>
                   </li>
                 </ul>
               </div>
@@ -87,27 +90,38 @@ you’re back!
                   v-model="userData.password"
                 />
 
-                <a href="javascript:void(0);" class="btn btn-lg sb-button" type="submit" 
- @click="loginWIthEmail">
+                <a
+                  href="javascript:void(0);"
+                  class="btn btn-lg sb-button"
+                  type="submit"
+                  @click="loginWIthEmail"
+                >
                   <img src="../assets/images/key.svg" /> Log In to your account
                 </a>
                 <p class="forget-pass light-font-weight">
-                 Forgot Password? <a class="cursor-pointer light-font-weight" @click="goToReset">Reset</a>
+                  Forgot Password?
+                  <a class="cursor-pointer light-font-weight" @click="goToReset"
+                    >Reset</a
+                  >
                 </p>
-                <h3 class="ft-normal">Don’t have an account? <a class="cursor-pointer no-underline" @click="goToSignUp">SignUp</a></h3>
+                <h3 class="ft-normal">
+                  Don’t have an account?
+                  <a class="cursor-pointer no-underline" @click="goToSignUp"
+                    >SignUp</a
+                  >
+                </h3>
               </div>
             </form>
           </div>
         </div>
         <!-- sign up -->
-       </div>
+      </div>
       <!-- body wrapper -->
     </div>
   </main>
 </template>
 
 <script>
-
 import Vue from "vue";
 import router from "../router";
 import $ from "jquery";
@@ -119,49 +133,65 @@ export default {
   data() {
     return {
       loggedinFlag: false,
-      userData:{},
+      userData: {},
     };
   },
-   mounted() {
+  mounted() {
     // this.$auth.logout();
     // localStorage.removeItem("spotlight_usertoken");
     // localStorage.removeItem("spotlight_email");
     var userdata = localStorage.getItem("spotlight_usertoken");
+    var userid = localStorage.getItem("spotlight_id");
     if (userdata) {
-       this.$router.push("/profile");
+      // this.$router.push("/profile");
+      this.$router.push({
+              name: "Profile",
+              params: {
+                id: userid,
+              },
+            });
     }
   },
   methods: {
-     login() {
+    login() {
       this.$auth.loginWithRedirect();
     },
-    goToSignUp(){
+    goToSignUp() {
       this.$router.push("/");
     },
     goToReset() {
       this.$router.push("/reset");
     },
-     loginWIthEmail(){
-         axios
+    loginWIthEmail() {
+      axios
         .post("/login", this.userData)
         .then((response) => {
-           console.log("login- response",response)
-           this.$toaster.success(response.data.message)
-            if(response.data.status == 'success'){
-                localStorage.setItem('spotlight_usertoken', JSON.stringify(response.data.data))
-                this.$router.push("/profile");
-            }
+          console.log("login- response", response);
+          this.$toaster.success(response.data.message);
+          if (response.data.status == "success") {
+            localStorage.setItem(
+              "spotlight_usertoken",
+              JSON.stringify(response.data.data)
+            );
+            localStorage.setItem("spotlight_id", res.data.data.id);
+            this.$router.push({
+              name: "Profile",
+              params: {
+                id: res.data.data.id,
+              },
+            });
+          }
         })
-        .catch( (error) =>{
+        .catch((error) => {
           if (error.response) {
-            this.$toaster.error(error.response.data.message)
-            if(error.response.data.message == 'Email Not Verified'){
-               localStorage.setItem('spotlight_email', this.userData.email);
-                this.$router.push({ name: 'Otp', params: { flag: true }});
+            this.$toaster.error(error.response.data.message);
+            if (error.response.data.message == "Email Not Verified") {
+              localStorage.setItem("spotlight_email", this.userData.email);
+              this.$router.push({ name: "Otp", params: { flag: true } });
             }
           }
         });
-    }
+    },
   },
 };
 </script>
@@ -169,8 +199,7 @@ export default {
 .light-font-weight {
   font-weight: 500 !important;
 }
-.no-underline{
+.no-underline {
   text-decoration: none;
 }
-
 </style>
diff --git a/src/components/Profile.vue b/src/components/Profile.vue
index 85a47fa..80d31d6 100644
--- a/src/components/Profile.vue
+++ b/src/components/Profile.vue
@@ -14,7 +14,9 @@
             <li>
               <a href="javasript:void(0);"
                 ><img src="../assets/images/upload-cloud.svg" /><span
-                  >Upload Avatar</span></a>
+                  >Upload Avatar</span
+                ></a
+              >
             </li>
             <li>
               <a href="javasript:void(0);" @click="getRandomAvatar()"
@@ -350,7 +352,7 @@
           /></a>
           <div class="sub-menu-user" id="userprofileshow" style="display: none">
             <ul>
-              <li>
+              <li v-if="this.sameUser">
                 <a href="javascript:void(0);" @click="addProfileDialog"
                   >Edit Profile</a
                 >
@@ -381,12 +383,14 @@
             </h1>
             <ul class="joined-info">
               <li>
-                <a
-                  href="javascript:void(0);"
-                  v-if="!userData.designation && !userData.organisation"
-                  @click="addProfileDialog"
-                  >Add your work</a
-                >
+                <span v-if="this.sameUser">
+                  <a
+                    href="javascript:void(0);"
+                    v-if="!userData.designation && !userData.organisation"
+                    @click="addProfileDialog"
+                    >Add your work</a
+                  >
+                </span>
                 <a
                   class="no-cursor no-underline"
                   href="javascript:void(0);"
@@ -421,11 +425,12 @@
               </li>
             </ul>
             <p>{{ userData.bio }}</p>
-             <div class="talk-to-me-about" v-if="userData.interests.length != 0">
-           <span>Talk to me about</span> <strong>{{createString(userData.interests)}}</strong>
-            </div><!-- talk to me about -->
+            <div class="talk-to-me-about" v-if="userData.interests.length != 0">
+              <span>Talk to me about</span>
+              <strong>{{ createString(userData.interests) }}</strong>
+            </div>
+            <!-- talk to me about -->
           </div>
-         
         </div>
         <!-- user profile -->
         <div class="col-sm-4 col-md-12 col-lg-4 col-xl-4">
@@ -453,7 +458,7 @@
             </li>
             <li class="rp-all">
               <a href="javascript:void(0);" @click="repliesDialog"
-                >Comments/Replies({{this.userComments.length}})</a
+                >Comments/Replies({{ this.userComments.length }})</a
               >
             </li>
           </ul>
@@ -471,7 +476,7 @@
             </li>
           </ul>
           <ul class="social-connects" v-if="selectedSocialLink.length == 0">
-            <li>
+            <li v-if="this.sameUser">
               <a
                 href="javascript:void(0);"
                 @click="addProfileDialog"
@@ -553,23 +558,32 @@
                         />
                       </div>
                     </div>
-                    
+
                     <!-- company detail-->
                     <h1>{{ study.intro.name }}</h1>
-                     <div class="user-views">
-                        <ul>
-                          <li><img src="../assets/images/eye-1.svg" class="spctp" /> {{ study.views }} Views</li>
-                           <li><img src="../assets/images/star-1.svg" /> {{ study.avgRating }} <span v-if="!study.avgRating">0</span> Rating</li>
-                            <li><img src="../assets/images/calendar-1.svg" /> {{ moment(study.createdAt).format("DD MMM YYYY") }}</li>
-                        </ul>
-                        
-                        </div><!-- user views -->
+                    <div class="user-views">
+                      <ul>
+                        <li>
+                          <img src="../assets/images/eye-1.svg" class="spctp" />
+                          {{ study.views }} Views
+                        </li>
+                        <li>
+                          <img src="../assets/images/star-1.svg" />
+                          {{ study.avgRating }}
+                          <span v-if="!study.avgRating">0</span> Rating
+                        </li>
+                        <li>
+                          <img src="../assets/images/calendar-1.svg" />
+                          {{ moment(study.createdAt).format("DD MMM YYYY") }}
+                        </li>
+                      </ul>
+                    </div>
+                    <!-- user views -->
                     <div class="u-detail">
                       <img src="../assets/images/user-2.png" />
                       <h2 v-for="(name, j) in study.intro.authors" :key="j">
                         {{ name }}
                       </h2>
-                     
                     </div>
                     <!-- user detail -->
                     <p>
@@ -618,8 +632,12 @@
                       <img src="../assets/images/arrow-right-action.svg" />
                     </a>
                     <div class="read-time">
-                      <a href="#"><img src="../assets/images/clock.svg" /> {{ study.intro.readTime}} Min Read</a>
-                      </div><!-- read time -->
+                      <a href="#"
+                        ><img src="../assets/images/clock.svg" />
+                        {{ study.intro.readTime }} Min Read</a
+                      >
+                    </div>
+                    <!-- read time -->
                   </div>
                   <!-- card wrpper -->
                   <!-- card wrpper -->
@@ -637,20 +655,36 @@
           style="display: none"
         >
           <div class="row">
-            <div class="replies col-md-12" >
-              <div class="replies-wrp" v-for="(comments, j) in userComments" :key="j" >
-                <h1>{{comments.casestudy.intro.name}} <span>{{comments.casestudy.intro.type}} </span></h1>
+            <div class="replies col-md-12">
+              <div
+                class="replies-wrp"
+                v-for="(comments, j) in userComments"
+                :key="j"
+              >
+                <h1>
+                  {{ comments.casestudy.intro.name }}
+                  <span>{{ comments.casestudy.intro.type }} </span>
+                </h1>
                 <ul class="joined-info">
-                  <li><a href="javasript:void(0);">{{dateGenerator(comments.createdAt)}} D</a> <span></span></li>
+                  <li>
+                    <a href="javasript:void(0);"
+                      >{{ dateGenerator(comments.createdAt) }} D</a
+                    >
+                    <span></span>
+                  </li>
                   <li><img src="../assets/images/heart.png" /></li>
-                  <li><a href="javasript:void(0);"> {{comments.likes}}</a></li>
+                  <li>
+                    <a href="javasript:void(0);"> {{ comments.likes }}</a>
+                  </li>
                   <li class="comment-spc">
                     <img src="../assets/images/comment.svg" />
                   </li>
-                  <li><a href="javasript:void(0);"> {{comments.replies}}</a></li>
+                  <li>
+                    <a href="javasript:void(0);"> {{ comments.replies }}</a>
+                  </li>
                 </ul>
                 <p>
-                  {{comments.comment}}
+                  {{ comments.comment }}
                   <!-- I wonder what the difference between “<strong>
                     Assistant</strong
                   >” and “<strong>Pickup and Drop</strong>” are. If they are the
@@ -676,7 +710,7 @@ import router from "../router";
 import $ from "jquery";
 import axios from "axios";
 import Header from "./Header";
-import moment from 'moment';
+import moment from "moment";
 
 export default {
   name: "Profile",
@@ -728,6 +762,7 @@ export default {
     currentSocialLinkName: null,
     showCompany: false,
     showDesignation: false,
+    sameUser: false,
     socialLink: [
       {
         displayName: "Facebook",
@@ -785,7 +820,7 @@ export default {
       },
     ],
     selectedSocialLink: [],
-    userComments:[],
+    userComments: [],
   }),
 
   mounted() {
@@ -793,14 +828,27 @@ export default {
     // this.socialLink = [];
     this.userData.interests = [];
     var userdata = localStorage.getItem("spotlight_usertoken");
+    var userId = localStorage.getItem("spotlight_id");
+    if (userId) {
+      if (this.$route.params.id == userId) {
+        this.sameUser = true;
+      }
+    }
+
     if (userdata) {
       userdata = JSON.parse(userdata);
       this.usertoken = userdata.token;
-      this.getProfile();
-      this.getCaseStudies();
-      this.getUserComments();
-    }else{
-      this.logout();
+      // this.getProfile();
+      if (this.sameUser) {
+        this.getProfileById();
+        this.getUserComments();
+        this.getCaseStudies();
+      }
+    }
+    if (!this.sameUser) {
+      this.getProfileById();
+      this.getCaseStudieById();
+      this.getUserCommentsById();
     }
   },
   methods: {
@@ -812,14 +860,15 @@ export default {
     },
     logout() {
       localStorage.removeItem("spotlight_usertoken");
+      localStorage.removeItem("spotlight_id");
       localStorage.removeItem("spotlight_email");
       this.$router.push("/login");
     },
-     dateGenerator(curreDate){
-       var todayDate = moment(new Date(), "DD.MM.YYYY");
-        var endDate = moment(new Date(curreDate), "DD.MM.YYYY");
-        var result = todayDate.diff(endDate, 'days');
-        return result;
+    dateGenerator(curreDate) {
+      var todayDate = moment(new Date(), "DD.MM.YYYY");
+      var endDate = moment(new Date(curreDate), "DD.MM.YYYY");
+      var result = todayDate.diff(endDate, "days");
+      return result;
     },
     prefillSocialLink(links) {
       var keys = [];
@@ -887,14 +936,14 @@ export default {
         cols[i].style.backgroundColor = this.userData.bgColor;
       }
     },
-     createString(list){
+    createString(list) {
       var name = "";
-      list.forEach(element => {
-        name = name+','+element;
+      list.forEach((element) => {
+        name = name + "," + element;
       });
 
-  console.log("name is",name);
-      return name.substring(1);;
+      console.log("name is", name);
+      return name.substring(1);
     },
     changeColor(clr) {
       console.log(this.oldId, "clr", clr);
@@ -909,6 +958,29 @@ export default {
       }
       this.userData.bgColor = clr;
     },
+
+    getProfileById() {
+      axios
+        .get("/userProfile?userId=" + this.$route.params.id, {})
+        .then((response) => {
+          if (!response.data.data.socialMediaProfiles) {
+            this.userData.socialMediaProfiles = {};
+          }
+          this.userData = response.data.data;
+
+          // this.userData = response.data.data;
+          this.oldId = this.userData.bgColor;
+          console.log(this.oldId, "this.userData.", this.userData);
+          console.log("this.userData.firstLogin ", this.userData.firstLogin);
+          this.prefillSocialLink(this.userData.socialMediaProfiles);
+          if (this.userData.firstLogin == true) {
+            this.addProfileDialog();
+          }
+          this.assignClass();
+          console.log(response.data.data);
+        })
+        .catch((error) => console.log(error));
+    },
     getProfile() {
       axios
         .get("/profile", {
@@ -948,6 +1020,15 @@ export default {
         })
         .catch((error) => console.log(error));
     },
+    getUserCommentsById() {
+      axios
+        .get("/userProfile/comments?userId=" + this.$route.params.id, {})
+        .then((response) => {
+          this.userComments = response.data.data;
+          console.log(response.data);
+        })
+        .catch((error) => console.log(error));
+    },
     getUserComments() {
       axios
         .get("/profile/comments", {
@@ -961,6 +1042,15 @@ export default {
         })
         .catch((error) => console.log(error));
     },
+    getCaseStudieById() {
+      axios
+        .get("/profile/caseStudy?userId=" + this.$route.params.id)
+        .then((response) => {
+          console.log("----", response.data.data.caseStudies);
+          this.caseStudies = response.data.data.caseStudies;
+        })
+        .catch((error) => console.log(error));
+    },
     getCaseStudies() {
       axios
         .get("/caseStudy/all", {
@@ -969,7 +1059,7 @@ export default {
           },
         })
         .then((response) => {
-          console.log("----",response.data.data.caseStudies);
+          console.log("----", response.data.data.caseStudies);
           this.caseStudies = response.data.data.caseStudies;
         })
         .catch((error) => console.log(error));
diff --git a/src/components/SignUp.vue b/src/components/SignUp.vue
index cad0483..147d5d8 100644
--- a/src/components/SignUp.vue
+++ b/src/components/SignUp.vue
@@ -146,8 +146,15 @@ export default {
     // this.$auth.logout();
     // localStorage.removeItem("spotlight_usertoken");
      var userdata = localStorage.getItem("spotlight_usertoken");
+    var userId = localStorage.getItem("spotlight_id");
+
     if (userdata) {
-       this.$router.push("/profile");
+        this.$router.push({
+              name: "Profile",
+              params: {
+                id: userId,
+              },
+            });
     }
     // localStorage.removeItem("spotlight_email");
   },
diff --git a/src/router/index.js b/src/router/index.js
index aace080..680c625 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -72,7 +72,7 @@ export default new Router({
             component: Reset,
         },
         {
-            path: '/profile',
+            path: '/profile/:id',
             name: 'Profile',
             component: Profile,
         },
-- 
2.0.0