viithiisys / spotlight-frontend

Download as
Browse Code »

Commit 2991bacc1d7eefcd33120d2aa56b71b5bb62c854

Authored by Digvijay Singh
1 parent d06044c201
Exists in master

ui flow change

Showing 8 changed files with 246 additions and 97 deletions   Show diff stats
src/auth/index.js
Diff comments   View file @2991bac
... ... @@ -124,14 +124,18 @@ export const useAuth0 = ({
124 124 verified: true
125 125 // profileImage: u.picture
126 126 }).then(res => {
127   - console.log("res", res);
  127 + console.log("res---profile", res);
128 128 this.$toaster.success(res.data.message);
129   - localStorage.setItem('spotlight_usertoken', JSON.stringify(res.data.data))
  129 + localStorage.setItem('spotlight_usertoken', JSON.stringify(res.data.data));
  130 + localStorage.setItem('spotlight_id', res.data.data.id);
130 131  
131 132 var previousUrl = localStorage.getItem("previous_url_spotlight");
132 133 console.log("onboarding", previousUrl)
133 134 if (!previousUrl) {
134   - router.push({ name: 'Profile' });
  135 + router.push({ name: 'Profile',
  136 + params: {
  137 + id: res.data.data.id,
  138 + }, });
135 139 } else {
136 140 previousUrl = JSON.parse(previousUrl);
137 141 console.log("onboarding-2", previousUrl)
... ...
src/components/AuthorIntro.vue
Diff comments   View file @2991bac
... ... @@ -78,13 +78,16 @@ export default {
78 78 allSlide:[],
79 79 currentSlideIndex:null,
80 80 currentSlideData:null,
  81 + //
  82 + userId:null,
81 83 };
82 84 },
83 85 mounted() {
84 86 var allSlideData = localStorage.getItem("spotlight_slide"+this.$route.params.caseStudyId);
85 87 if (allSlideData) {
86 88 this.allSlide = JSON.parse(allSlideData);
87   - this.getCurrentSlideData();
  89 + // this.getCurrentSlideData();
  90 + this.generatecaseStudies();
88 91 }else{
89 92 this.generatecaseStudies();
90 93 }
... ... @@ -110,6 +113,7 @@ export default {
110 113  
111 114 openStudy(payload) {
112 115 console.log("payload-", payload);
  116 + this.userId = payload.userId[0];
113 117 payload.intro.date = payload.createdAt;
114 118 payload.intro.focusPoint = payload.focusAreas;
115 119 axios
... ... @@ -259,7 +263,12 @@ export default {
259 263 this.$router.push("/");
260 264 },
261 265 goToProfile() {
262   - this.$router.push("/profile");
  266 + this.$router.push({
  267 + name: "Profile",
  268 + params: {
  269 + id: this.userId,
  270 + },
  271 + });
263 272 },
264 273  
265 274 },
... ...
src/components/Header.vue
Diff comments   View file @2991bac
... ... @@ -73,12 +73,12 @@ export default {
73 73 return {
74 74 usertoken: null,
75 75 profilePictue: null,
  76 + userId: null,
76 77 };
77 78 },
78 79 mounted() {
79   -
80   -
81 80 var userdata = localStorage.getItem("spotlight_usertoken");
  81 + this.userId = localStorage.getItem("spotlight_id");
82 82 if (userdata) {
83 83 userdata = JSON.parse(userdata);
84 84 this.usertoken = userdata.token;
... ... @@ -87,11 +87,17 @@ export default {
87 87 },
88 88 methods: {
89 89 goTo() {
90   - this.$router.push("/profile");
  90 + this.$router.push({
  91 + name: "Profile",
  92 + params: {
  93 + id: this.userId,
  94 + },
  95 + });
91 96 },
92 97 goToLogin() {
93 98 localStorage.removeItem("spotlight_usertoken");
94 99 localStorage.removeItem("spotlight_email");
  100 + localStorage.removeItem("spotlight_id");
95 101 this.$router.push("/login");
96 102 },
97 103 getProfile() {
... ...
src/components/Intermediate.vue
Diff comments   View file @2991bac
... ... @@ -11,8 +11,12 @@
11 11 name: 'Intermediate',
12 12 data() {
13 13 var userdata = localStorage.getItem('spotlight_usertoken')
  14 + var userid = localStorage.getItem('spotlight_id')
14 15 if(userdata){
15   - router.push({ path: '/profile'})
  16 + router.push({ name: 'Profile',
  17 + params: {
  18 + id: userid,
  19 + }, });
16 20 }
17 21 return {
18 22 msg: 'Welcome to Your Vue.js App'
... ...
src/components/LandingPage.vue
Diff comments   View file @2991bac
... ... @@ -42,13 +42,10 @@
42 42 </div>
43 43 </nav>
44 44 <!-- menu wrapper -->
45   - <div class="sign-login-wrp">
  45 + <div class="sign-login-wrp">
46 46 <!-- users land image -->
47 47 <div class="s-l-left-section">
48   - <h1 class="welcome-hd-back">
49   - we’re stoked
50   -you’re back!
51   - </h1>
  48 + <h1 class="welcome-hd-back">we’re stoked you’re back!</h1>
52 49 </div>
53 50 <!-- users land image -->
54 51 <div class="s-l-right-section">
... ... @@ -58,13 +55,19 @@ you’re back!
58 55 <div class="social-login">
59 56 <ul>
60 57 <li>
61   - <a @click="login" class="cursor-pointer"><img src="../assets/images/google.svg" /></a>
  58 + <a @click="login" class="cursor-pointer"
  59 + ><img src="../assets/images/google.svg"
  60 + /></a>
62 61 </li>
63 62 <li>
64   - <a @click="login" class="cursor-pointer"><img src="../assets/images/linkdin.svg" /></a>
  63 + <a @click="login" class="cursor-pointer"
  64 + ><img src="../assets/images/linkdin.svg"
  65 + /></a>
65 66 </li>
66 67 <li>
67   - <a @click="login" class="cursor-pointer"><img src="../assets/images/twitter.svg" /></a>
  68 + <a @click="login" class="cursor-pointer"
  69 + ><img src="../assets/images/twitter.svg"
  70 + /></a>
68 71 </li>
69 72 </ul>
70 73 </div>
... ... @@ -87,27 +90,38 @@ you’re back!
87 90 v-model="userData.password"
88 91 />
89 92  
90   - <a href="javascript:void(0);" class="btn btn-lg sb-button" type="submit"
91   - @click="loginWIthEmail">
  93 + <a
  94 + href="javascript:void(0);"
  95 + class="btn btn-lg sb-button"
  96 + type="submit"
  97 + @click="loginWIthEmail"
  98 + >
92 99 <img src="../assets/images/key.svg" /> Log In to your account
93 100 </a>
94 101 <p class="forget-pass light-font-weight">
95   - Forgot Password? <a class="cursor-pointer light-font-weight" @click="goToReset">Reset</a>
  102 + Forgot Password?
  103 + <a class="cursor-pointer light-font-weight" @click="goToReset"
  104 + >Reset</a
  105 + >
96 106 </p>
97   - <h3 class="ft-normal">Don’t have an account? <a class="cursor-pointer no-underline" @click="goToSignUp">SignUp</a></h3>
  107 + <h3 class="ft-normal">
  108 + Don’t have an account?
  109 + <a class="cursor-pointer no-underline" @click="goToSignUp"
  110 + >SignUp</a
  111 + >
  112 + </h3>
98 113 </div>
99 114 </form>
100 115 </div>
101 116 </div>
102 117 <!-- sign up -->
103   - </div>
  118 + </div>
104 119 <!-- body wrapper -->
105 120 </div>
106 121 </main>
107 122 </template>
108 123  
109 124 <script>
110   -
111 125 import Vue from "vue";
112 126 import router from "../router";
113 127 import $ from "jquery";
... ... @@ -119,49 +133,65 @@ export default {
119 133 data() {
120 134 return {
121 135 loggedinFlag: false,
122   - userData:{},
  136 + userData: {},
123 137 };
124 138 },
125   - mounted() {
  139 + mounted() {
126 140 // this.$auth.logout();
127 141 // localStorage.removeItem("spotlight_usertoken");
128 142 // localStorage.removeItem("spotlight_email");
129 143 var userdata = localStorage.getItem("spotlight_usertoken");
  144 + var userid = localStorage.getItem("spotlight_id");
130 145 if (userdata) {
131   - this.$router.push("/profile");
  146 + // this.$router.push("/profile");
  147 + this.$router.push({
  148 + name: "Profile",
  149 + params: {
  150 + id: userid,
  151 + },
  152 + });
132 153 }
133 154 },
134 155 methods: {
135   - login() {
  156 + login() {
136 157 this.$auth.loginWithRedirect();
137 158 },
138   - goToSignUp(){
  159 + goToSignUp() {
139 160 this.$router.push("/");
140 161 },
141 162 goToReset() {
142 163 this.$router.push("/reset");
143 164 },
144   - loginWIthEmail(){
145   - axios
  165 + loginWIthEmail() {
  166 + axios
146 167 .post("/login", this.userData)
147 168 .then((response) => {
148   - console.log("login- response",response)
149   - this.$toaster.success(response.data.message)
150   - if(response.data.status == 'success'){
151   - localStorage.setItem('spotlight_usertoken', JSON.stringify(response.data.data))
152   - this.$router.push("/profile");
153   - }
  169 + console.log("login- response", response);
  170 + this.$toaster.success(response.data.message);
  171 + if (response.data.status == "success") {
  172 + localStorage.setItem(
  173 + "spotlight_usertoken",
  174 + JSON.stringify(response.data.data)
  175 + );
  176 + localStorage.setItem("spotlight_id", res.data.data.id);
  177 + this.$router.push({
  178 + name: "Profile",
  179 + params: {
  180 + id: res.data.data.id,
  181 + },
  182 + });
  183 + }
154 184 })
155   - .catch( (error) =>{
  185 + .catch((error) => {
156 186 if (error.response) {
157   - this.$toaster.error(error.response.data.message)
158   - if(error.response.data.message == 'Email Not Verified'){
159   - localStorage.setItem('spotlight_email', this.userData.email);
160   - this.$router.push({ name: 'Otp', params: { flag: true }});
  187 + this.$toaster.error(error.response.data.message);
  188 + if (error.response.data.message == "Email Not Verified") {
  189 + localStorage.setItem("spotlight_email", this.userData.email);
  190 + this.$router.push({ name: "Otp", params: { flag: true } });
161 191 }
162 192 }
163 193 });
164   - }
  194 + },
165 195 },
166 196 };
167 197 </script>
... ... @@ -169,8 +199,7 @@ export default {
169 199 .light-font-weight {
170 200 font-weight: 500 !important;
171 201 }
172   -.no-underline{
  202 +.no-underline {
173 203 text-decoration: none;
174 204 }
175   -
176 205 </style>
... ...
src/components/Profile.vue
Diff comments   View file @2991bac
... ... @@ -14,7 +14,9 @@
14 14 <li>
15 15 <a href="javasript:void(0);"
16 16 ><img src="../assets/images/upload-cloud.svg" /><span
17   - >Upload Avatar</span></a>
  17 + >Upload Avatar</span
  18 + ></a
  19 + >
18 20 </li>
19 21 <li>
20 22 <a href="javasript:void(0);" @click="getRandomAvatar()"
... ... @@ -350,7 +352,7 @@
350 352 /></a>
351 353 <div class="sub-menu-user" id="userprofileshow" style="display: none">
352 354 <ul>
353   - <li>
  355 + <li v-if="this.sameUser">
354 356 <a href="javascript:void(0);" @click="addProfileDialog"
355 357 >Edit Profile</a
356 358 >
... ... @@ -381,12 +383,14 @@
381 383 </h1>
382 384 <ul class="joined-info">
383 385 <li>
384   - <a
385   - href="javascript:void(0);"
386   - v-if="!userData.designation && !userData.organisation"
387   - @click="addProfileDialog"
388   - >Add your work</a
389   - >
  386 + <span v-if="this.sameUser">
  387 + <a
  388 + href="javascript:void(0);"
  389 + v-if="!userData.designation && !userData.organisation"
  390 + @click="addProfileDialog"
  391 + >Add your work</a
  392 + >
  393 + </span>
390 394 <a
391 395 class="no-cursor no-underline"
392 396 href="javascript:void(0);"
... ... @@ -421,11 +425,12 @@
421 425 </li>
422 426 </ul>
423 427 <p>{{ userData.bio }}</p>
424   - <div class="talk-to-me-about" v-if="userData.interests.length != 0">
425   - <span>Talk to me about</span> <strong>{{createString(userData.interests)}}</strong>
426   - </div><!-- talk to me about -->
  428 + <div class="talk-to-me-about" v-if="userData.interests.length != 0">
  429 + <span>Talk to me about</span>
  430 + <strong>{{ createString(userData.interests) }}</strong>
  431 + </div>
  432 + <!-- talk to me about -->
427 433 </div>
428   -
429 434 </div>
430 435 <!-- user profile -->
431 436 <div class="col-sm-4 col-md-12 col-lg-4 col-xl-4">
... ... @@ -453,7 +458,7 @@
453 458 </li>
454 459 <li class="rp-all">
455 460 <a href="javascript:void(0);" @click="repliesDialog"
456   - >Comments/Replies({{this.userComments.length}})</a
  461 + >Comments/Replies({{ this.userComments.length }})</a
457 462 >
458 463 </li>
459 464 </ul>
... ... @@ -471,7 +476,7 @@
471 476 </li>
472 477 </ul>
473 478 <ul class="social-connects" v-if="selectedSocialLink.length == 0">
474   - <li>
  479 + <li v-if="this.sameUser">
475 480 <a
476 481 href="javascript:void(0);"
477 482 @click="addProfileDialog"
... ... @@ -553,23 +558,32 @@
553 558 />
554 559 </div>
555 560 </div>
556   -
  561 +
557 562 <!-- company detail-->
558 563 <h1>{{ study.intro.name }}</h1>
559   - <div class="user-views">
560   - <ul>
561   - <li><img src="../assets/images/eye-1.svg" class="spctp" /> {{ study.views }} Views</li>
562   - <li><img src="../assets/images/star-1.svg" /> {{ study.avgRating }} <span v-if="!study.avgRating">0</span> Rating</li>
563   - <li><img src="../assets/images/calendar-1.svg" /> {{ moment(study.createdAt).format("DD MMM YYYY") }}</li>
564   - </ul>
565   -
566   - </div><!-- user views -->
  564 + <div class="user-views">
  565 + <ul>
  566 + <li>
  567 + <img src="../assets/images/eye-1.svg" class="spctp" />
  568 + {{ study.views }} Views
  569 + </li>
  570 + <li>
  571 + <img src="../assets/images/star-1.svg" />
  572 + {{ study.avgRating }}
  573 + <span v-if="!study.avgRating">0</span> Rating
  574 + </li>
  575 + <li>
  576 + <img src="../assets/images/calendar-1.svg" />
  577 + {{ moment(study.createdAt).format("DD MMM YYYY") }}
  578 + </li>
  579 + </ul>
  580 + </div>
  581 + <!-- user views -->
567 582 <div class="u-detail">
568 583 <img src="../assets/images/user-2.png" />
569 584 <h2 v-for="(name, j) in study.intro.authors" :key="j">
570 585 {{ name }}
571 586 </h2>
572   -
573 587 </div>
574 588 <!-- user detail -->
575 589 <p>
... ... @@ -618,8 +632,12 @@
618 632 <img src="../assets/images/arrow-right-action.svg" />
619 633 </a>
620 634 <div class="read-time">
621   - <a href="#"><img src="../assets/images/clock.svg" /> {{ study.intro.readTime}} Min Read</a>
622   - </div><!-- read time -->
  635 + <a href="#"
  636 + ><img src="../assets/images/clock.svg" />
  637 + {{ study.intro.readTime }} Min Read</a
  638 + >
  639 + </div>
  640 + <!-- read time -->
623 641 </div>
624 642 <!-- card wrpper -->
625 643 <!-- card wrpper -->
... ... @@ -637,20 +655,36 @@
637 655 style="display: none"
638 656 >
639 657 <div class="row">
640   - <div class="replies col-md-12" >
641   - <div class="replies-wrp" v-for="(comments, j) in userComments" :key="j" >
642   - <h1>{{comments.casestudy.intro.name}} <span>{{comments.casestudy.intro.type}} </span></h1>
  658 + <div class="replies col-md-12">
  659 + <div
  660 + class="replies-wrp"
  661 + v-for="(comments, j) in userComments"
  662 + :key="j"
  663 + >
  664 + <h1>
  665 + {{ comments.casestudy.intro.name }}
  666 + <span>{{ comments.casestudy.intro.type }} </span>
  667 + </h1>
643 668 <ul class="joined-info">
644   - <li><a href="javasript:void(0);">{{dateGenerator(comments.createdAt)}} D</a> <span></span></li>
  669 + <li>
  670 + <a href="javasript:void(0);"
  671 + >{{ dateGenerator(comments.createdAt) }} D</a
  672 + >
  673 + <span></span>
  674 + </li>
645 675 <li><img src="../assets/images/heart.png" /></li>
646   - <li><a href="javasript:void(0);"> {{comments.likes}}</a></li>
  676 + <li>
  677 + <a href="javasript:void(0);"> {{ comments.likes }}</a>
  678 + </li>
647 679 <li class="comment-spc">
648 680 <img src="../assets/images/comment.svg" />
649 681 </li>
650   - <li><a href="javasript:void(0);"> {{comments.replies}}</a></li>
  682 + <li>
  683 + <a href="javasript:void(0);"> {{ comments.replies }}</a>
  684 + </li>
651 685 </ul>
652 686 <p>
653   - {{comments.comment}}
  687 + {{ comments.comment }}
654 688 <!-- I wonder what the difference between “<strong>
655 689 Assistant</strong
656 690 >” and “<strong>Pickup and Drop</strong>” are. If they are the
... ... @@ -676,7 +710,7 @@ import router from &quot;../router&quot;;
676 710 import $ from "jquery";
677 711 import axios from "axios";
678 712 import Header from "./Header";
679   -import moment from 'moment';
  713 +import moment from "moment";
680 714  
681 715 export default {
682 716 name: "Profile",
... ... @@ -728,6 +762,7 @@ export default {
728 762 currentSocialLinkName: null,
729 763 showCompany: false,
730 764 showDesignation: false,
  765 + sameUser: false,
731 766 socialLink: [
732 767 {
733 768 displayName: "Facebook",
... ... @@ -785,7 +820,7 @@ export default {
785 820 },
786 821 ],
787 822 selectedSocialLink: [],
788   - userComments:[],
  823 + userComments: [],
789 824 }),
790 825  
791 826 mounted() {
... ... @@ -793,14 +828,27 @@ export default {
793 828 // this.socialLink = [];
794 829 this.userData.interests = [];
795 830 var userdata = localStorage.getItem("spotlight_usertoken");
  831 + var userId = localStorage.getItem("spotlight_id");
  832 + if (userId) {
  833 + if (this.$route.params.id == userId) {
  834 + this.sameUser = true;
  835 + }
  836 + }
  837 +
796 838 if (userdata) {
797 839 userdata = JSON.parse(userdata);
798 840 this.usertoken = userdata.token;
799   - this.getProfile();
800   - this.getCaseStudies();
801   - this.getUserComments();
802   - }else{
803   - this.logout();
  841 + // this.getProfile();
  842 + if (this.sameUser) {
  843 + this.getProfileById();
  844 + this.getUserComments();
  845 + this.getCaseStudies();
  846 + }
  847 + }
  848 + if (!this.sameUser) {
  849 + this.getProfileById();
  850 + this.getCaseStudieById();
  851 + this.getUserCommentsById();
804 852 }
805 853 },
806 854 methods: {
... ... @@ -812,14 +860,15 @@ export default {
812 860 },
813 861 logout() {
814 862 localStorage.removeItem("spotlight_usertoken");
  863 + localStorage.removeItem("spotlight_id");
815 864 localStorage.removeItem("spotlight_email");
816 865 this.$router.push("/login");
817 866 },
818   - dateGenerator(curreDate){
819   - var todayDate = moment(new Date(), "DD.MM.YYYY");
820   - var endDate = moment(new Date(curreDate), "DD.MM.YYYY");
821   - var result = todayDate.diff(endDate, 'days');
822   - return result;
  867 + dateGenerator(curreDate) {
  868 + var todayDate = moment(new Date(), "DD.MM.YYYY");
  869 + var endDate = moment(new Date(curreDate), "DD.MM.YYYY");
  870 + var result = todayDate.diff(endDate, "days");
  871 + return result;
823 872 },
824 873 prefillSocialLink(links) {
825 874 var keys = [];
... ... @@ -887,14 +936,14 @@ export default {
887 936 cols[i].style.backgroundColor = this.userData.bgColor;
888 937 }
889 938 },
890   - createString(list){
  939 + createString(list) {
891 940 var name = "";
892   - list.forEach(element => {
893   - name = name+','+element;
  941 + list.forEach((element) => {
  942 + name = name + "," + element;
894 943 });
895 944  
896   - console.log("name is",name);
897   - return name.substring(1);;
  945 + console.log("name is", name);
  946 + return name.substring(1);
898 947 },
899 948 changeColor(clr) {
900 949 console.log(this.oldId, "clr", clr);
... ... @@ -909,6 +958,29 @@ export default {
909 958 }
910 959 this.userData.bgColor = clr;
911 960 },
  961 +
  962 + getProfileById() {
  963 + axios
  964 + .get("/userProfile?userId=" + this.$route.params.id, {})
  965 + .then((response) => {
  966 + if (!response.data.data.socialMediaProfiles) {
  967 + this.userData.socialMediaProfiles = {};
  968 + }
  969 + this.userData = response.data.data;
  970 +
  971 + // this.userData = response.data.data;
  972 + this.oldId = this.userData.bgColor;
  973 + console.log(this.oldId, "this.userData.", this.userData);
  974 + console.log("this.userData.firstLogin ", this.userData.firstLogin);
  975 + this.prefillSocialLink(this.userData.socialMediaProfiles);
  976 + if (this.userData.firstLogin == true) {
  977 + this.addProfileDialog();
  978 + }
  979 + this.assignClass();
  980 + console.log(response.data.data);
  981 + })
  982 + .catch((error) => console.log(error));
  983 + },
912 984 getProfile() {
913 985 axios
914 986 .get("/profile", {
... ... @@ -948,6 +1020,15 @@ export default {
948 1020 })
949 1021 .catch((error) => console.log(error));
950 1022 },
  1023 + getUserCommentsById() {
  1024 + axios
  1025 + .get("/userProfile/comments?userId=" + this.$route.params.id, {})
  1026 + .then((response) => {
  1027 + this.userComments = response.data.data;
  1028 + console.log(response.data);
  1029 + })
  1030 + .catch((error) => console.log(error));
  1031 + },
951 1032 getUserComments() {
952 1033 axios
953 1034 .get("/profile/comments", {
... ... @@ -961,6 +1042,15 @@ export default {
961 1042 })
962 1043 .catch((error) => console.log(error));
963 1044 },
  1045 + getCaseStudieById() {
  1046 + axios
  1047 + .get("/profile/caseStudy?userId=" + this.$route.params.id)
  1048 + .then((response) => {
  1049 + console.log("----", response.data.data.caseStudies);
  1050 + this.caseStudies = response.data.data.caseStudies;
  1051 + })
  1052 + .catch((error) => console.log(error));
  1053 + },
964 1054 getCaseStudies() {
965 1055 axios
966 1056 .get("/caseStudy/all", {
... ... @@ -969,7 +1059,7 @@ export default {
969 1059 },
970 1060 })
971 1061 .then((response) => {
972   - console.log("----",response.data.data.caseStudies);
  1062 + console.log("----", response.data.data.caseStudies);
973 1063 this.caseStudies = response.data.data.caseStudies;
974 1064 })
975 1065 .catch((error) => console.log(error));
... ...
src/components/SignUp.vue
Diff comments   View file @2991bac
... ... @@ -146,8 +146,15 @@ export default {
146 146 // this.$auth.logout();
147 147 // localStorage.removeItem("spotlight_usertoken");
148 148 var userdata = localStorage.getItem("spotlight_usertoken");
  149 + var userId = localStorage.getItem("spotlight_id");
  150 +
149 151 if (userdata) {
150   - this.$router.push("/profile");
  152 + this.$router.push({
  153 + name: "Profile",
  154 + params: {
  155 + id: userId,
  156 + },
  157 + });
151 158 }
152 159 // localStorage.removeItem("spotlight_email");
153 160 },
... ...
src/router/index.js
Diff comments   View file @2991bac
... ... @@ -72,7 +72,7 @@ export default new Router({
72 72 component: Reset,
73 73 },
74 74 {
75   - path: '/profile',
  75 + path: '/profile/:id',
76 76 name: 'Profile',
77 77 component: Profile,
78 78 },
... ...