viithiisys / spotlight-frontend

Download as
Browse Code »

Commit df911621272a5dfee92cddba3beced8b417db229

Authored by Digvijay Singh
1 parent 4234f1fc06
Exists in master

profile module added

Showing 1 changed file with 1 additions and 1 deletions   Show diff stats
src/components/Profile.vue
Diff comments   View file @df91162
1 <template> 1 <template>
2 <main class="landing-page"> 2 <main class="landing-page">
3 <!-- profile --> 3 <!-- profile -->
4 <div class="popup-wrp" style="display: none"> 4 <div class="popup-wrp" style="display: none">
5 <div class="overlay" @click="hideDialog"></div> 5 <div class="overlay" @click="hideDialog"></div>
6 <div class="popup-set" id="add-profile" style="display: none"> 6 <div class="popup-set" id="add-profile" style="display: none">
7 <div class="popup-header"> 7 <div class="popup-header">
8 <div class="user-photo common_color"> 8 <div class="user-photo common_color">
9 <img :src="userData.profilePic" /> 9 <img :src="userData.profilePic" />
10 </div> 10 </div>
11 <!-- header user --> 11 <!-- header user -->
12 12
13 <ul> 13 <ul>
14 <li> 14 <li>
15 <a href="javasript:void(0);" 15 <a href="javasript:void(0);"
16 ><img src="../assets/images/replace.svg" /><span 16 ><img src="../assets/images/replace.svg" /><span
17 >Replace Avatar</span 17 >Replace Avatar</span
18 ></a 18 ></a
19 > 19 >
20 </li> 20 </li>
21 <li> 21 <li>
22 <a href="javasript:void(0);" @click="getRandomAvatar()" 22 <a href="javasript:void(0);" @click="getRandomAvatar()"
23 ><img src="../assets/images/randomise.svg" /><span 23 ><img src="../assets/images/randomise.svg" /><span
24 >Randomise Avatar</span 24 >Randomise Avatar</span
25 ></a 25 ></a
26 > 26 >
27 </li> 27 </li>
28 </ul> 28 </ul>
29 </div> 29 </div>
30 <!-- header --> 30 <!-- header -->
31 <div class="popup-body"> 31 <div class="popup-body">
32 <form class="popup-forms"> 32 <form class="popup-forms">
33 <div class="row"> 33 <div class="row">
34 <div class="col-sm-6 col-md-6 col-lg-6 col-xl-6"> 34 <div class="col-sm-6 col-md-6 col-lg-6 col-xl-6">
35 <div class="form-group floating-label"> 35 <div class="form-group floating-label">
36 <input 36 <input
37 type="text" 37 type="text"
38 class="form-control" 38 class="form-control"
39 v-model="userData.firstName" 39 v-model="userData.firstName"
40 placeholder=" " 40 placeholder=" "
41 id="fname" 41 id="fname"
42 /> 42 />
43 <label for="fname">First Name</label> 43 <label for="fname">First Name</label>
44 </div> 44 </div>
45 </div> 45 </div>
46 <!-- input --> 46 <!-- input -->
47 <div class="col-sm-6 col-md-6 col-lg-6 col-xl-6"> 47 <div class="col-sm-6 col-md-6 col-lg-6 col-xl-6">
48 <div class="form-group floating-label"> 48 <div class="form-group floating-label">
49 <input 49 <input
50 type="text" 50 type="text"
51 class="form-control" 51 class="form-control"
52 value="" 52 value=""
53 placeholder=" " 53 placeholder=" "
54 id="lname" 54 id="lname"
55 v-model="userData.lastName" 55 v-model="userData.lastName"
56 /> 56 />
57 <label for="lname" class="lname">Last Name</label> 57 <label for="lname" class="lname">Last Name</label>
58 </div> 58 </div>
59 </div> 59 </div>
60 <!-- input --> 60 <!-- input -->
61 <div class="col-sm-5 col-md-5 col-lg-5 col-xl-5"> 61 <div class="col-sm-5 col-md-5 col-lg-5 col-xl-5">
62 <div class="form-group floating-label"> 62 <div class="form-group floating-label">
63 <input 63 <input
64 type="text" 64 type="text"
65 class="form-control" 65 class="form-control"
66 value="" 66 value=""
67 v-model="userData.designation" 67 v-model="userData.designation"
68 placeholder=" " 68 placeholder=" "
69 id="designation" 69 id="designation"
70 /> 70 />
71 <label for="designation">Designation</label> 71 <label for="designation">Designation</label>
72 </div> 72 </div>
73 </div> 73 </div>
74 <!-- input --> 74 <!-- input -->
75 <div class="col-sm-7 col-md-7 col-lg-7 col-xl-7"> 75 <div class="col-sm-7 col-md-7 col-lg-7 col-xl-7">
76 <div class="form-group floating-label"> 76 <div class="form-group floating-label">
77 <input 77 <input
78 type="text" 78 type="text"
79 class="form-control" 79 class="form-control"
80 v-model="userData.organisation" 80 v-model="userData.organisation"
81 id="company" 81 id="company"
82 placeholder=" " 82 placeholder=" "
83 /> 83 />
84 <label for="company">Company</label> 84 <label for="company">Company</label>
85 </div> 85 </div>
86 </div> 86 </div>
87 <!-- input --> 87 <!-- input -->
88 <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12"> 88 <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
89 <div class="form-group floating-label"> 89 <div class="form-group floating-label">
90 <textarea 90 <textarea
91 type="text" 91 type="text"
92 class="form-control" 92 class="form-control"
93 value="" 93 value=""
94 v-model="userData.bio" 94 v-model="userData.bio"
95 id="yourself" 95 id="yourself"
96 placeholder=" " 96 placeholder=" "
97 ></textarea> 97 ></textarea>
98 <label for="yourself" 98 <label for="yourself"
99 >Tell others a little about yourself</label 99 >Tell others a little about yourself</label
100 > 100 >
101 </div> 101 </div>
102 </div> 102 </div>
103 <!-- input --> 103 <!-- input -->
104 <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12"> 104 <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
105 <p class="things">Three things that you talk more about</p> 105 <p class="things">Three things that you talk more about</p>
106 106
107 <ul class="interests"> 107 <ul class="interests">
108 <li v-for="(interest, i) in userData.interests" :key="i"> 108 <li v-for="(interest, i) in userData.interests" :key="i">
109 <span>{{ interest }}</span> 109 <span>{{ interest }}</span>
110 <a 110 <a
111 href="javascript:void(0);" 111 href="javascript:void(0);"
112 @click="removeInterest(i)" 112 @click="removeInterest(i)"
113 class="cat-minus" 113 class="cat-minus"
114 ><img src="../assets/images/minus.svg" 114 ><img src="../assets/images/minus.svg"
115 /></a> 115 /></a>
116 </li> 116 </li>
117 <li> 117 <li>
118 <input 118 <input
119 class="" 119 class=""
120 placeholder="Add interest" 120 placeholder="Add interest"
121 v-on:keyup.enter="addInterest" 121 v-on:keyup.enter="addInterest"
122 v-model="interestName" 122 v-model="interestName"
123 /> 123 />
124 <a href="javascript:void(0);" @click="addInterest()" 124 <a href="javascript:void(0);" @click="addInterest()"
125 ><img src="../assets/images/plus-circle.svg" 125 ><img src="../assets/images/plus-circle.svg"
126 /></a> 126 /></a>
127 </li> 127 </li>
128 </ul> 128 </ul>
129 </div> 129 </div>
130 <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12"> 130 <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
131 <p class="things">Choose Background color</p> 131 <p class="things">Choose Background color</p>
132 132
133 <ul class="colors"> 133 <ul class="colors">
134 <li> 134 <li>
135 <a 135 <a
136 href="javascript:void(0);" 136 href="javascript:void(0);"
137 id="#C4C4C4" 137 id="#C4C4C4"
138 class="silver" 138 class="silver"
139 @click="changeColor('#C4C4C4')" 139 @click="changeColor('#C4C4C4')"
140 ></a> 140 ></a>
141 </li> 141 </li>
142 <li> 142 <li>
143 <a 143 <a
144 href="javascript:void(0);" 144 href="javascript:void(0);"
145 id="#FFF6D7" 145 id="#FFF6D7"
146 class="milk-punch" 146 class="milk-punch"
147 @click="changeColor('#FFF6D7')" 147 @click="changeColor('#FFF6D7')"
148 ></a> 148 ></a>
149 </li> 149 </li>
150 <li> 150 <li>
151 <a 151 <a
152 href="javascript:void(0);" 152 href="javascript:void(0);"
153 id="#BDDBFF" 153 id="#BDDBFF"
154 class="french-pass" 154 class="french-pass"
155 @click="changeColor('#BDDBFF')" 155 @click="changeColor('#BDDBFF')"
156 ></a> 156 ></a>
157 </li> 157 </li>
158 <li> 158 <li>
159 <a 159 <a
160 href="javascript:void(0);" 160 href="javascript:void(0);"
161 id="#C0FAFE" 161 id="#C0FAFE"
162 class="cyan-french-pass" 162 class="cyan-french-pass"
163 @click="changeColor('#C0FAFE')" 163 @click="changeColor('#C0FAFE')"
164 ></a> 164 ></a>
165 </li> 165 </li>
166 <li> 166 <li>
167 <a 167 <a
168 href="javascript:void(0);" 168 href="javascript:void(0);"
169 id="#FFDBDC" 169 id="#FFDBDC"
170 class="cosmos" 170 class="cosmos"
171 @click="changeColor('#FFDBDC')" 171 @click="changeColor('#FFDBDC')"
172 ></a> 172 ></a>
173 </li> 173 </li>
174 <li> 174 <li>
175 <a 175 <a
176 href="javascript:void(0);" 176 href="javascript:void(0);"
177 id="#FEE6AC" 177 id="#FEE6AC"
178 class="cape-Honey" 178 class="cape-Honey"
179 @click="changeColor('#FEE6AC')" 179 @click="changeColor('#FEE6AC')"
180 ></a> 180 ></a>
181 </li> 181 </li>
182 <li> 182 <li>
183 <a 183 <a
184 href="javascript:void(0);" 184 href="javascript:void(0);"
185 id="#E5DFF0" 185 id="#E5DFF0"
186 class="snuff" 186 class="snuff"
187 @click="changeColor('#E5DFF0')" 187 @click="changeColor('#E5DFF0')"
188 ></a> 188 ></a>
189 </li> 189 </li>
190 <li> 190 <li>
191 <a 191 <a
192 href="javascript:void(0);" 192 href="javascript:void(0);"
193 id="#DFE7EF" 193 id="#DFE7EF"
194 class="catskillWhite" 194 class="catskillWhite"
195 @click="changeColor('#DFE7EF')" 195 @click="changeColor('#DFE7EF')"
196 ></a> 196 ></a>
197 </li> 197 </li>
198 <li> 198 <li>
199 <a 199 <a
200 href="javascript:void(0);" 200 href="javascript:void(0);"
201 id="#FFF" 201 id="#FFF"
202 class="white" 202 class="white"
203 @click="changeColor('#FFF')" 203 @click="changeColor('#FFF')"
204 ></a> 204 ></a>
205 </li> 205 </li>
206 </ul> 206 </ul>
207 </div> 207 </div>
208 <div class="col-lg-12 mt-50"> 208 <div class="col-lg-12 mt-50">
209 <p class="notifications"> 209 <p class="notifications">
210 Recieve notifications when you recieve a comment/ Upvote 210 Recieve notifications when you recieve a comment/ Upvote
211 </p> 211 </p>
212 <div class="switch-bt-wrp"> 212 <div class="switch-bt-wrp">
213 <label class="switch-btn"> 213 <label class="switch-btn">
214 <input type="checkbox" class="toggle-btn" /> 214 <input type="checkbox" class="toggle-btn" />
215 <span class="rounded-toggle"></span> 215 <span class="rounded-toggle"></span>
216 </label> 216 </label>
217 <span class="onoff">on/off</span> 217 <span class="onoff">on/off</span>
218 </div> 218 </div>
219 </div> 219 </div>
220 <div class="col-lg-12"> 220 <div class="col-lg-12">
221 <p class="add-socail-ch"> 221 <p class="add-socail-ch">
222 Add your social Channels <span></span> 222 Add your social Channels <span></span>
223 </p> 223 </p>
224 </div> 224 </div>
225 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> 225 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
226 <div class="form-group floating-label"> 226 <div class="form-group floating-label">
227 <select class="form-group"> 227 <select class="form-group">
228 <option value="Facebook">Facebook</option> 228 <option value="Facebook">Facebook</option>
229 </select> 229 </select>
230 <span class="select-arrow" 230 <span class="select-arrow"
231 ><img src="../assets/images/chevron-down.svg" 231 ><img src="../assets/images/chevron-down.svg"
232 /></span> 232 /></span>
233 </div> 233 </div>
234 </div> 234 </div>
235 <!-- input --> 235 <!-- input -->
236 <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8"> 236 <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8">
237 <div class="form-group floating-label"> 237 <div class="form-group floating-label">
238 <input 238 <input
239 type="text" 239 type="text"
240 class="form-control" 240 class="form-control"
241 value="" 241 value=""
242 placeholder="Paste your profile URL here" 242 placeholder="Paste your profile URL here"
243 id="" 243 id=""
244 v-model="userData.socialMediaProfiles.facebook" 244 v-model="userData.socialMediaProfiles.facebook"
245 /> 245 />
246 </div> 246 </div>
247 </div> 247 </div>
248 <!-- input --> 248 <!-- input -->
249 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> 249 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
250 <div class="form-group floating-label"> 250 <div class="form-group floating-label">
251 <select class="form-group"> 251 <select class="form-group">
252 <option value="Linkedin">Linkedin</option> 252 <option value="Linkedin">Linkedin</option>
253 </select> 253 </select>
254 <span class="select-arrow" 254 <span class="select-arrow"
255 ><img src="../assets/images/chevron-down.svg" 255 ><img src="../assets/images/chevron-down.svg"
256 /></span> 256 /></span>
257 </div> 257 </div>
258 </div> 258 </div>
259 <!-- input --> 259 <!-- input -->
260 <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8"> 260 <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8">
261 <div class="form-group floating-label"> 261 <div class="form-group floating-label">
262 <input 262 <input
263 type="text" 263 type="text"
264 class="form-control" 264 class="form-control"
265 value="" 265 value=""
266 placeholder="Paste your profile URL here" 266 placeholder="Paste your profile URL here"
267 id="" 267 id=""
268 v-model="userData.socialMediaProfiles.linkedin" 268 v-model="userData.socialMediaProfiles.linkedin"
269 /> 269 />
270 </div> 270 </div>
271 </div> 271 </div>
272 <!-- input --> 272 <!-- input -->
273 273
274 <!-- input --> 274 <!-- input -->
275 <!-- <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> 275 <!-- <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
276 <div class="form-group floating-label"> 276 <div class="form-group floating-label">
277 <select class="form-group"> 277 <select class="form-group">
278 <option @click="addSocialLink">Add another</option> 278 <option @click="addSocialLink">Add another</option>
279 </select> 279 </select>
280 <span class="select-arrow" 280 <span class="select-arrow"
281 ><img src="../assets/images/chevron-down.svg" 281 ><img src="../assets/images/chevron-down.svg"
282 /></span> 282 /></span>
283 </div> 283 </div>
284 </div> --> 284 </div> -->
285 <!-- input --> 285 <!-- input -->
286 </div> 286 </div>
287 <a href="javascript:void(0);" @click="saveProfile" class="next-bt" 287 <a href="javascript:void(0);" @click="saveProfile" class="next-bt"
288 >Save</a 288 >Save</a
289 > 289 >
290 </form> 290 </form>
291 </div> 291 </div>
292 <div class="clearfix"></div> 292 <div class="clearfix"></div>
293 </div> 293 </div>
294 <!-- add profile --> 294 <!-- add profile -->
295 </div> 295 </div>
296 <!-- profile --> 296 <!-- profile -->
297 <div class="container-fluid inner-wrp"> 297 <div class="container-fluid inner-wrp">
298 <nav class="navbar navbar-expand-sm spotLight-nav"> 298 <nav class="navbar navbar-expand-sm spotLight-nav">
299 <a class="navbar-brand" href="javasript:void(0);" 299 <a class="navbar-brand" href="javasript:void(0);"
300 ><img src="../assets/images/logo.png" 300 ><img src="../assets/images/logo.png"
301 /></a> 301 /></a>
302 <button 302 <button
303 class="navbar-toggler" 303 class="navbar-toggler"
304 type="button" 304 type="button"
305 data-toggle="collapse" 305 data-toggle="collapse"
306 data-target="#navbarsExample03" 306 data-target="#navbarsExample03"
307 aria-controls="navbarsExample03" 307 aria-controls="navbarsExample03"
308 aria-expanded="false" 308 aria-expanded="false"
309 aria-label="Toggle navigation" 309 aria-label="Toggle navigation"
310 > 310 >
311 <span class="navbar-toggler-icon"></span> 311 <span class="navbar-toggler-icon"></span>
312 <span class="navbar-toggler-icon"></span> 312 <span class="navbar-toggler-icon"></span>
313 <span class="navbar-toggler-icon"></span> 313 <span class="navbar-toggler-icon"></span>
314 </button> 314 </button>
315 315
316 <div class="collapse navbar-collapse" id="navbarsExample03"> 316 <div class="collapse navbar-collapse" id="navbarsExample03">
317 <ul class="navbar-nav mr-auto"> 317 <ul class="navbar-nav mr-auto">
318 <li class="nav-item active"> 318 <li class="nav-item active">
319 <a class="nav-link" href="javasript:void(0);">About</a> 319 <a class="nav-link" href="javasript:void(0);">About</a>
320 </li> 320 </li>
321 <li class="nav-item"> 321 <li class="nav-item">
322 <a class="nav-link" href="javasript:void(0);">Masterclass</a> 322 <a class="nav-link" href="javasript:void(0);">Masterclass</a>
323 </li> 323 </li>
324 <li class="nav-item"> 324 <li class="nav-item">
325 <a class="nav-link" href="javasript:void(0);">Stories</a> 325 <a class="nav-link" href="javasript:void(0);">Stories</a>
326 </li> 326 </li>
327 <li class="nav-item"> 327 <li class="nav-item">
328 <a class="nav-link" href="javasript:void(0);">Library</a> 328 <a class="nav-link" href="javasript:void(0);">Library</a>
329 </li> 329 </li>
330 </ul> 330 </ul>
331 </div> 331 </div>
332 <a 332 <a
333 href="javasript:void(0);" 333 href="javasript:void(0);"
334 @click="addProfileDialog" 334 @click="addProfileDialog"
335 class="update_profile" 335 class="update_profile"
336 ><span></span> Update Profile</a 336 ><span></span> Update Profile</a
337 > 337 >
338 <div class=""> 338 <div class="">
339 <a 339 <a
340 href="javascript:void(0);" 340 href="javascript:void(0);"
341 class="user-profile-photo common_color" 341 class="user-profile-photo common_color"
342 @click="userprofileshowDialog" 342 @click="userprofileshowDialog"
343 ><img :src="userData.profilePic" 343 ><img :src="userData.profilePic"
344 /></a> 344 /></a>
345 <div class="sub-menu-user" id="userprofileshow" style="display: none"> 345 <div class="sub-menu-user" id="userprofileshow" style="display: none">
346 <ul> 346 <ul>
347 <li> 347 <li>
348 <a href="javascript:void(0);" @click="addProfileDialog" 348 <a href="javascript:void(0);" @click="addProfileDialog"
349 >Edit Profile</a 349 >Edit Profile</a
350 > 350 >
351 </li> 351 </li>
352 <li><a href="javascript:void(0);" @click="logout">Log Out</a></li> 352 <li><a href="javascript:void(0);" @click="logout">Log Out</a></li>
353 </ul> 353 </ul>
354 </div> 354 </div>
355 </div> 355 </div>
356 </nav> 356 </nav>
357 <!-- menu wrapper --> 357 <!-- menu wrapper -->
358 <div class="row profile-tab-spc-top"> 358 <div class="row profile-tab-spc-top">
359 <div class="col-sm-8 col-md-12 col-lg-8 col-xl-8"> 359 <div class="col-sm-8 col-md-12 col-lg-8 col-xl-8">
360 <div class="inner-profile-ps common_color"> 360 <div class="inner-profile-ps common_color">
361 <img :src="userData.profilePic" class="" /> 361 <img :src="userData.profilePic" class="" />
362 </div> 362 </div>
363 <!-- user profile --> 363 <!-- user profile -->
364 364
365 <div class="user-profile"> 365 <div class="user-profile">
366 <h1> 366 <h1>
367 {{ userData.firstName }} {{ userData.lastName }} 367 {{ userData.firstName }} {{ userData.lastName }}
368 <span 368 <span
369 href="javasript:void(0);" 369 href="javasript:void(0);"
370 class="tags no-cursor no-underline" 370 class="tags no-cursor no-underline"
371 >{{ userData.role }}</span 371 >{{ userData.role }}</span
372 > 372 >
373 </h1> 373 </h1>
374 <ul class="joined-info"> 374 <ul class="joined-info">
375 <li> 375 <li>
376 <a 376 <a
377 href="javascript:void(0);" 377 href="javascript:void(0);"
378 v-if=" 378 v-if="
379 userData.designation.length == 0 && 379 userData.designation.length == 0 &&
380 userData.organisation.length == 0 380 userData.organisation.length == 0
381 " 381 "
382 @click="addProfileDialog" 382 @click="addProfileDialog"
383 >Add your work</a 383 >Add your work</a
384 > 384 >
385 <a 385 <a
386 class="no-cursor no-underline" 386 class="no-cursor no-underline"
387 href="javascript:void(0);" 387 href="javascript:void(0);"
388 v-if="userData.designation.length != 0" 388 v-if="userData.designation.length != 0"
389 >{{ userData.designation }}</a 389 >{{ userData.designation }}</a
390 > 390 >
391 <a 391 <a
392 class="no-cursor no-underline" 392 class="no-cursor no-underline"
393 href="javascript:void(0);" 393 href="javascript:void(0);"
394 v-if=" 394 v-if="
395 userData.designation.length != 0 && 395 userData.designation.length != 0 &&
396 userData.organisation.length != 0 396 userData.organisation.length != 0
397 " 397 "
398 >at</a 398 >at</a
399 > 399 >
400 <a 400 <a
401 class="no-cursor no-underline" 401 class="no-cursor no-underline"
402 href="javascript:void(0);" 402 href="javascript:void(0);"
403 v-if="userData.organisation.length != 0" 403 v-if="userData.organisation.length != 0"
404 >{{ userData.organisation }}</a 404 >{{ userData.organisation }}</a
405 > 405 >
406 <img src="../assets/images/u-info-icon.png" /> <span></span> 406 <img src="../assets/images/u-info-icon.png" /> <span></span>
407 </li> 407 </li>
408 <li> 408 <li>
409 <a href="javasript:void(0);" content="Karma Points" v-tippy> 409 <a href="javasript:void(0);" content="Karma Points" v-tippy>
410 {{ userData.karmaPoints }} Karma</a 410 {{ userData.karmaPoints }} Karma</a
411 > 411 >
412 <span></span> 412 <span></span>
413 </li> 413 </li>
414 <li> 414 <li>
415 <a href="javasript:void(0);" class="no-cursor no-underline" 415 <a href="javasript:void(0);" class="no-cursor no-underline"
416 >Joined on 416 >Joined on
417 {{ moment(userData.createdAt).format("MMM YYYY") }}</a 417 {{ moment(userData.createdAt).format("MMM YYYY") }}</a
418 > 418 >
419 </li> 419 </li>
420 </ul> 420 </ul>
421 <p>{{ userData.bio }}</p> 421 <p>{{ userData.bio }}</p>
422 </div> 422 </div>
423 </div> 423 </div>
424 <!-- user profile --> 424 <!-- user profile -->
425 <div class="col-sm-4 col-md-12 col-lg-4 col-xl-4"> 425 <div class="col-sm-4 col-md-12 col-lg-4 col-xl-4">
426 <div class="list-style-group" v-if="userData.awards"> 426 <div class="list-style-group" v-if="userData.awards">
427 <p>Awards</p> 427 <p>Awards</p>
428 <ul class="list-style"> 428 <ul class="list-style">
429 <li> 429 <li>
430 <a href="javascript:void(0);" 430 <a href="javascript:void(0);"
431 ><img src="../assets/images/icon-1.png" 431 ><img src="../assets/images/icon-1.png"
432 /></a> 432 /></a>
433 </li> 433 </li>
434 </ul> 434 </ul>
435 </div> 435 </div>
436 <!-- list style --> 436 <!-- list style -->
437 </div> 437 </div>
438 </div> 438 </div>
439 <div class="clearfix"></div> 439 <div class="clearfix"></div>
440 <div class="row top-brd profile-tab-spc-top"> 440 <div class="row top-brd profile-tab-spc-top">
441 <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8"> 441 <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8">
442 <ul class="profile-tab"> 442 <ul class="profile-tab">
443 <li class="active c-0"> 443 <li class="active c-0">
444 <a href="javascript:void(0);" @click="caseDialog" 444 <a href="javascript:void(0);" @click="caseDialog"
445 >Case-studies({{ caseStudies.length }})</a 445 >Case-studies({{ caseStudies.length }})</a
446 > 446 >
447 </li> 447 </li>
448 <li class="rp-all"> 448 <li class="rp-all">
449 <a href="javascript:void(0);" @click="repliesDialog" 449 <a href="javascript:void(0);" @click="repliesDialog"
450 >Comments/Replies(0)</a 450 >Comments/Replies(0)</a
451 > 451 >
452 </li> 452 </li>
453 </ul> 453 </ul>
454 </div> 454 </div>
455 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> 455 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
456 <ul class="social-connects"> 456 <ul class="social-connects">
457 <li><span>Follow</span></li> 457 <li><span>Follow</span></li>
458 <li> 458 <li>
459 <a 459 <a
460 href="javascript:void(0);" 460 href="javascript:void(0);"
461 @click="addProfileDialog" 461 @click="addProfileDialog"
462 class="active" 462 class="active"
463 ><img src="../assets/images/plus.png" 463 ><img src="../assets/images/plus.png"
464 /></a> 464 /></a>
465 <span class="connect-social-channel" 465 <span class="connect-social-channel"
466 >Connect your social channels</span 466 >Connect your social channels</span
467 > 467 >
468 </li> 468 </li>
469 </ul> 469 </ul>
470 </div> 470 </div>
471 </div> 471 </div>
472 <!-- tab style --> 472 <!-- tab style -->
473 <div class="profile-data-wrp"> 473 <div class="profile-data-wrp">
474 <div class="container-fluid data-wrp" id="case-study-0"> 474 <div class="container-fluid data-wrp" id="case-study-0">
475 <div class="row" v-if="caseStudies.length == 0"> 475 <div class="row" v-if="caseStudies.length == 0">
476 <div class="col-6 col-lg-6"> 476 <div class="col-6 col-lg-6">
477 <div class="full-w-height-profile ex-light seats_bg"> 477 <div class="full-w-height-profile ex-light seats_bg">
478 <a 478 <a
479 href="javasript:void(0);" 479 href="javasript:void(0);"
480 class="profile-md-bt center-and-spc bt-spc-top" 480 class="profile-md-bt center-and-spc bt-spc-top"
481 @click="openUrl('https://www.productgrowth.org/spotlight')" 481 @click="openUrl('https://www.productgrowth.org/spotlight')"
482 >Explore Spotlights</a 482 >Explore Spotlights</a
483 > 483 >
484 <p>Explore the spotlights others has put together</p> 484 <p>Explore the spotlights others has put together</p>
485 </div> 485 </div>
486 <!-- full width --> 486 <!-- full width -->
487 </div> 487 </div>
488 <!-- col 6 --> 488 <!-- col 6 -->
489 <div class="col-6 col-lg-6"> 489 <div class="col-6 col-lg-6">
490 <div class="full-w-height-profile ex-light spotlight_bg"> 490 <div class="full-w-height-profile ex-light spotlight_bg">
491 <img src="../assets/images/add-role.svg" class="add-role" /> 491 <img src="../assets/images/add-role.svg" class="add-role" />
492 <div class="clearfix"></div> 492 <div class="clearfix"></div>
493 <!-- clearfix --> 493 <!-- clearfix -->
494 <a 494 <a
495 href="javasript:void(0);" 495 href="javasript:void(0);"
496 class="profile-md-bt center-and-spc" 496 class="profile-md-bt center-and-spc"
497 @click=" 497 @click="
498 openUrl( 498 openUrl(
499 'https://www.productgrowth.org/spotlight#typeform-spotlight' 499 'https://www.productgrowth.org/spotlight#typeform-spotlight'
500 ) 500 )
501 " 501 "
502 >Publish Spotlight</a 502 >Publish Spotlight</a
503 > 503 >
504 <p>Share your own insights through Spotlight</p> 504 <p>Share your own insights through Spotlight</p>
505 </div> 505 </div>
506 <!-- full width --> 506 <!-- full width -->
507 </div> 507 </div>
508 <!-- col 6 --> 508 <!-- col 6 -->
509 </div> 509 </div>
510 510
511 <div class="profile-data-wrp" v-if="caseStudies.length != 0"> 511 <div class="profile-data-wrp" v-if="caseStudies.length != 0">
512 <div class="container-fluid data-wrp"> 512 <div class="container-fluid data-wrp">
513 <div class="row"> 513 <div class="row">
514 <div class="" v-for="(study, i) in caseStudies" :key="i"> 514 <div class="" v-for="(study, i) in caseStudies" :key="i">
515 <div class="card-warpper" @click="openStudy(study)"> 515 <div class="card-warpper" @click="openStudy(study)">
516 <div class="company-detail"> 516 <div class="company-detail">
517 <div class="c-logo"> 517 <div class="c-logo">
518 <!-- <img src="../assets/images/image 46.png" /> --> 518 <!-- <img src="../assets/images/image 46.png" /> -->
519 <img :src="study.intro.logoURL" /> 519 <img :src="study.intro.logoURL" />
520 </div> 520 </div>
521 <div class="c-tag"> 521 <div class="c-tag">
522 <img 522 <img
523 src="../assets/images/retake-blue.svg" 523 src="../assets/images/retake-blue.svg"
524 v-if="study.intro.type == 'Retake'" 524 v-if="study.intro.type == 'Retake'"
525 /> 525 />
526 <img 526 <img
527 src="../assets/images/behind-blue.svg" 527 src="../assets/images/behind-blue.svg"
528 v-if="study.intro.type == 'Behind-the-scenes'" 528 v-if="study.intro.type == 'Behind-the-scenes'"
529 /> 529 />
530 <img 530 <img
531 src="../assets/images/critique-blue.svg" 531 src="../assets/images/critique-blue.svg"
532 v-if="study.intro.type == 'Critique'" 532 v-if="study.intro.type == 'Critique'"
533 /> 533 />
534 <img 534 <img
535 src="../assets/images/juxtapose-blue.svg" 535 src="../assets/images/juxtapose-blue.svg"
536 v-if="study.intro.type == 'Juxtapose'" 536 v-if="study.intro.type == 'Juxtapose'"
537 /> 537 />
538 </div> 538 </div>
539 </div> 539 </div>
540 <!-- company detail--> 540 <!-- company detail-->
541 <h1>{{ study.intro.name }}</h1> 541 <h1>{{ study.intro.name }}</h1>
542 <div class="u-detail"> 542 <div class="u-detail">
543 <img src="../assets/images/user-2.png" /> 543 <img src="../assets/images/user-2.png" />
544 <h2 v-for="(name, j) in study.intro.authors" :key="j"> 544 <h2 v-for="(name, j) in study.intro.authors" :key="j">
545 {{ name }} 545 {{ name }}
546 </h2> 546 </h2>
547 </div> 547 </div>
548 <!-- user detail --> 548 <!-- user detail -->
549 <p> 549 <p>
550 <span v-for="(area, j) in study.focusAreas" :key="j"> 550 <span v-for="(area, j) in study.focusAreas" :key="j">
551 {{ area }} 551 {{ area }}
552 </span> 552 </span>
553 </p> 553 </p>
554 <ul class="tags-list"> 554 <ul class="tags-list">
555 <li v-for="(tags, j) in study.insightTags" :key="j"> 555 <li v-for="(tags, j) in study.insightTags" :key="j">
556 <a 556 <a
557 href="javasript:void(0);" 557 href="javasript:void(0);"
558 class="insight-design" 558 class="insight-design"
559 v-if="tags == 'Design'" 559 v-if="tags == 'Design'"
560 >Design</a 560 >Design</a
561 > 561 >
562 <a 562 <a
563 href="javasript:void(0);" 563 href="javasript:void(0);"
564 class="insight-product" 564 class="insight-product"
565 v-if="tags == 'Product'" 565 v-if="tags == 'Product'"
566 >Product</a 566 >Product</a
567 > 567 >
568 <a 568 <a
569 href="javasript:void(0);" 569 href="javasript:void(0);"
570 class="insight-marketing" 570 class="insight-marketing"
571 v-if="tags == 'Marketing'" 571 v-if="tags == 'Marketing'"
572 >Marketing</a 572 >Marketing</a
573 > 573 >
574 <a 574 <a
575 href="javasript:void(0);" 575 href="javasript:void(0);"
576 class="insight-pricing" 576 class="insight-pricing"
577 v-if="tags == 'Pricing'" 577 v-if="tags == 'Pricing'"
578 >Pricing</a 578 >Pricing</a
579 > 579 >
580 <a 580 <a
581 href="javasript:void(0);" 581 href="javasript:void(0);"
582 class="insight-psychology" 582 class="insight-psychology"
583 v-if="tags == 'Psychology'" 583 v-if="tags == 'Psychology'"
584 >Psychology</a 584 >Psychology</a
585 > 585 >
586 </li> 586 </li>
587 <!-- <li><a href="javasript:void(0);" class="rose-bud">Marketing</a></li> 587 <!-- <li><a href="javasript:void(0);" class="rose-bud">Marketing</a></li>
588 <li><a href="javasript:void(0);" class="pattens-blue">Product</a></li> --> 588 <li><a href="javasript:void(0);" class="pattens-blue">Product</a></li> -->
589 </ul> 589 </ul>
590 <div class="clearfix"></div> 590 <div class="clearfix"></div>
591 </div> 591 </div>
592 <!-- card wrpper --> 592 <!-- card wrpper -->
593 <!-- card wrpper --> 593 <!-- card wrpper -->
594 </div> 594 </div>
595 <!-- all card wrpper --> 595 <!-- all card wrpper -->
596 </div> 596 </div>
597 </div> 597 </div>
598 </div> 598 </div>
599 <!-- data wrp --> 599 <!-- data wrp -->
600 </div> 600 </div>
601 <!-- case study 0 --> 601 <!-- case study 0 -->
602 <div 602 <div
603 class="container-fluid data-wrp" 603 class="container-fluid data-wrp"
604 id="all-replies" 604 id="all-replies"
605 style="display: none" 605 style="display: none"
606 > 606 >
607 <div class="row"> 607 <div class="row">
608 <div class="replies col-md-12"> 608 <div class="replies col-md-12">
609 <div class="replies-wrp"> 609 <div class="replies-wrp">
610 <!-- <h1>PhonePe vs GooglePay <span>Critique</span></h1> 610 <!-- <h1>PhonePe vs GooglePay <span>Critique</span></h1>
611 <ul class="joined-info"> 611 <ul class="joined-info">
612 <li><a href="javasript:void(0);">37D</a> <span></span></li> 612 <li><a href="javasript:void(0);">37D</a> <span></span></li>
613 <li><img src="../assets/images/heart.png" /></li> 613 <li><img src="../assets/images/heart.png" /></li>
614 <li><a href="javasript:void(0);"> 4</a></li> 614 <li><a href="javasript:void(0);"> 4</a></li>
615 <li class="comment-spc"> 615 <li class="comment-spc">
616 <img src="../assets/images/comment.svg" /> 616 <img src="../assets/images/comment.svg" />
617 </li> 617 </li>
618 <li><a href="javasript:void(0);"> 6</a></li> 618 <li><a href="javasript:void(0);"> 6</a></li>
619 </ul> 619 </ul>
620 <p> 620 <p>
621 I wonder what the difference between “<strong> 621 I wonder what the difference between “<strong>
622 Assistant</strong 622 Assistant</strong
623 >” and “<strong>Pickup and Drop</strong>” are. If they are the 623 >” and “<strong>Pickup and Drop</strong>” are. If they are the
624 same, there are two “call to actions” for the same workflow 624 same, there are two “call to actions” for the same workflow
625 </p> --> 625 </p> -->
626 </div> 626 </div>
627 <!-- replies wrapper --> 627 <!-- replies wrapper -->
628 </div> 628 </div>
629 <!-- all card wrpper --> 629 <!-- all card wrpper -->
630 </div> 630 </div>
631 </div> 631 </div>
632 <!-- all Relpies --> 632 <!-- all Relpies -->
633 </div> 633 </div>
634 <!-- data wrp --> 634 <!-- data wrp -->
635 <!-- body wrapper --> 635 <!-- body wrapper -->
636 </div> 636 </div>
637 </main> 637 </main>
638 </template> 638 </template>
639 639
640 <script> 640 <script>
641 import Vue from "vue"; 641 import Vue from "vue";
642 import router from "../router"; 642 import router from "../router";
643 import $ from "jquery"; 643 import $ from "jquery";
644 import axios from "axios"; 644 import axios from "axios";
645 645
646 export default { 646 export default {
647 name: "Profile", 647 name: "Profile",
648 data: () => ({ 648 data: () => ({
649 loggedinFlag: false, 649 loggedinFlag: false,
650 usertoken: null, 650 usertoken: null,
651 userData: { 651 userData: {
652 verified: null, 652 verified: null,
653 bgColor: null, 653 bgColor: null,
654 interests: [], 654 interests: [],
655 karmaPoints: null, 655 karmaPoints: null,
656 socialLogin: null, 656 socialLogin: null,
657 notification: null, 657 notification: null,
658 profilePic: null, 658 profilePic: null,
659 role: null, 659 role: null,
660 name: null, 660 name: null,
661 email: null, 661 email: null,
662 firstName: null, 662 firstName: null,
663 lastName: null, 663 lastName: null,
664 createdAt: null, 664 createdAt: null,
665 firstLogin: null, 665 firstLogin: null,
666 bio: null, 666 bio: null,
667 designation: "", 667 designation: "",
668 organisation: "", 668 organisation: "",
669 socialMediaProfiles: { facebook: null, linkedin: null }, 669 socialMediaProfiles: { facebook: null, linkedin: null },
670 }, 670 },
671 caseStudies: [], 671 caseStudies: [],
672 interestName: null, 672 interestName: null,
673 oldId: null, 673 oldId: null,
674 socialLink: null, 674 socialLink: null,
675 currentSocialLinkName: null, 675 currentSocialLinkName: null,
676 showCompany: false, 676 showCompany: false,
677 showDesignation: false, 677 showDesignation: false,
678 }), 678 }),
679 679
680 mounted() { 680 mounted() {
681 this.userData = {}; 681 this.userData = {};
682 this.socialLink = []; 682 this.socialLink = [];
683 this.userData.interests = []; 683 this.userData.interests = [];
684 this.userData.socialMediaProfiles = {}; 684 this.userData.socialMediaProfiles = {};
685 this.userData.designation = ""; 685 this.userData.designation = "";
686 this.userData.organisation = ""; 686 this.userData.organisation = "";
687 this.userData.socialMediaProfiles.facebook = null; 687 this.userData.socialMediaProfiles.facebook = null;
688 this.userData.socialMediaProfiles.linkedin = null; 688 this.userData.socialMediaProfiles.linkedin = null;
689 var userdata = localStorage.getItem("spotlight_usertoken"); 689 var userdata = localStorage.getItem("spotlight_usertoken");
690 if (userdata) { 690 if (userdata) {
691 userdata = JSON.parse(userdata); 691 userdata = JSON.parse(userdata);
692 this.usertoken = userdata.token; 692 this.usertoken = userdata.token;
693 this.getProfile(); 693 this.getProfile();
694 this.getCaseStudies(); 694 this.getCaseStudies();
695 } 695 }
696 }, 696 },
697 methods: { 697 methods: {
698 goToSignUp() { 698 goToSignUp() {
699 this.$router.push("/"); 699 this.$router.push("/");
700 }, 700 },
701 goToReset() { 701 goToReset() {
702 this.$router.push("/reset"); 702 this.$router.push("/reset");
703 }, 703 },
704 logout() { 704 logout() {
705 this.$router.push("/login"); 705 this.$router.push("/login");
706 }, 706 },
707 addSocialLink(obj) { 707 addSocialLink(obj) {
708 this.socialLink.push(); 708 this.socialLink.push();
709 }, 709 },
710 addInterest() { 710 addInterest() {
711 console.log(this.userData.interests.length, "called", this.interestName); 711 console.log(this.userData.interests.length, "called", this.interestName);
712 if (this.userData.interests.length <= 2) { 712 if (this.userData.interests.length <= 2) {
713 this.userData.interests.push(this.interestName); 713 this.userData.interests.push(this.interestName);
714 this.interestName = null; 714 this.interestName = null;
715 } else { 715 } else {
716 this.$toaster.info("Only 3 interest are allowed"); 716 this.$toaster.info("Only 3 interest are allowed");
717 } 717 }
718 }, 718 },
719 removeInterest(i) { 719 removeInterest(i) {
720 console.log("i",i) 720 console.log("i",i)
721 this.userData.interests.splice(i, 1); 721 this.userData.interests.splice(i, 1);
722 console.log(" this.userData", this.userData.interests) 722 console.log(" this.userData", this.userData.interests)
723 }, 723 },
724 assignClass() { 724 assignClass() {
725 var element = document.getElementById(this.userData.bgColor); 725 var element = document.getElementById(this.userData.bgColor);
726 element.classList.add("active"); 726 element.classList.add("active");
727 var cols = document.getElementsByClassName("common_color"); 727 var cols = document.getElementsByClassName("common_color");
728 for (var i = 0; i < cols.length; i++) { 728 for (var i = 0; i < cols.length; i++) {
729 cols[i].style.backgroundColor = this.userData.bgColor; 729 cols[i].style.backgroundColor = this.userData.bgColor;
730 } 730 }
731 }, 731 },
732 changeColor(clr) { 732 changeColor(clr) {
733 console.log(this.oldId, "clr", clr); 733 console.log(this.oldId, "clr", clr);
734 var element = document.getElementById(clr); 734 var element = document.getElementById(clr);
735 element.classList.add("active"); 735 element.classList.add("active");
736 var removeelement = document.getElementById(this.oldId); 736 var removeelement = document.getElementById(this.oldId);
737 removeelement.classList.remove("active"); 737 removeelement.classList.remove("active");
738 this.oldId = clr; 738 this.oldId = clr;
739 var cols = document.getElementsByClassName("common_color"); 739 var cols = document.getElementsByClassName("common_color");
740 for (var i = 0; i < cols.length; i++) { 740 for (var i = 0; i < cols.length; i++) {
741 cols[i].style.backgroundColor = clr; 741 cols[i].style.backgroundColor = clr;
742 } 742 }
743 this.userData.bgColor = clr; 743 this.userData.bgColor = clr;
744 }, 744 },
745 getProfile() { 745 getProfile() {
746 axios 746 axios
747 .get("/profile", { 747 .get("/profile", {
748 headers: { 748 headers: {
749 Authorization: "Bearer " + this.usertoken, 749 Authorization: "Bearer " + this.usertoken,
750 }, 750 },
751 }) 751 })
752 .then((response) => { 752 .then((response) => {
753 if (!response.data.data.socialMediaProfiles) { 753 if (!response.data.data.socialMediaProfiles) {
754 this.userData.socialMediaProfiles = {}; 754 this.userData.socialMediaProfiles = {};
755 } 755 }
756 this.userData = response.data.data; 756 this.userData = Object.assign(this.userData, response.data.data);
757 757
758 // this.userData = response.data.data; 758 // this.userData = response.data.data;
759 this.oldId = this.userData.bgColor; 759 this.oldId = this.userData.bgColor;
760 console.log(this.oldId, "this.userData.", this.userData); 760 console.log(this.oldId, "this.userData.", this.userData);
761 this.showDesignation = 761 this.showDesignation =
762 this.userData.designation.length == 0 ? true : false; 762 this.userData.designation.length == 0 ? true : false;
763 this.showCompany = 763 this.showCompany =
764 this.userData.organisation.length == 0 ? true : false; 764 this.userData.organisation.length == 0 ? true : false;
765 console.log("this.userData.firstLogin ",this.userData.firstLogin ) 765 console.log("this.userData.firstLogin ",this.userData.firstLogin )
766 if (this.userData.firstLogin == true) { 766 if (this.userData.firstLogin == true) {
767 this.addProfileDialog(); 767 this.addProfileDialog();
768 } 768 }
769 this.assignClass(); 769 this.assignClass();
770 console.log(response.data.data); 770 console.log(response.data.data);
771 }) 771 })
772 .catch((error) => console.log(error)); 772 .catch((error) => console.log(error));
773 }, 773 },
774 getRandomAvatar() { 774 getRandomAvatar() {
775 axios 775 axios
776 .get("/randomAvatar", { 776 .get("/randomAvatar", {
777 headers: { 777 headers: {
778 Authorization: "Bearer " + this.usertoken, 778 Authorization: "Bearer " + this.usertoken,
779 }, 779 },
780 }) 780 })
781 .then((response) => { 781 .then((response) => {
782 this.userData.profilePic = response.data.imageURL; 782 this.userData.profilePic = response.data.imageURL;
783 console.log(response.data.imageURL); 783 console.log(response.data.imageURL);
784 }) 784 })
785 .catch((error) => console.log(error)); 785 .catch((error) => console.log(error));
786 }, 786 },
787 getCaseStudies() { 787 getCaseStudies() {
788 axios 788 axios
789 .get("/caseStudy/all", { 789 .get("/caseStudy/all", {
790 headers: { 790 headers: {
791 Authorization: "Bearer " + this.usertoken, 791 Authorization: "Bearer " + this.usertoken,
792 }, 792 },
793 }) 793 })
794 .then((response) => { 794 .then((response) => {
795 console.log(response.data.data.caseStudies); 795 console.log(response.data.data.caseStudies);
796 this.caseStudies = response.data.data.caseStudies; 796 this.caseStudies = response.data.data.caseStudies;
797 }) 797 })
798 .catch((error) => console.log(error)); 798 .catch((error) => console.log(error));
799 }, 799 },
800 openStudy(payload) { 800 openStudy(payload) {
801 console.log("payload-", payload); 801 console.log("payload-", payload);
802 payload.intro.date = payload.createdAt; 802 payload.intro.date = payload.createdAt;
803 payload.intro.focusPoint = payload.createdAt; 803 payload.intro.focusPoint = payload.createdAt;
804 axios 804 axios
805 .get("/caseStudy/slides?caseStudyId=" + payload._id, { 805 .get("/caseStudy/slides?caseStudyId=" + payload._id, {
806 headers: { 806 headers: {
807 Authorization: "Bearer " + this.usertoken, 807 Authorization: "Bearer " + this.usertoken,
808 }, 808 },
809 }) 809 })
810 .then((response) => { 810 .then((response) => {
811 this.createSlide(payload, response.data.data); 811 this.createSlide(payload, response.data.data);
812 }) 812 })
813 .catch((error) => console.log(error)); 813 .catch((error) => console.log(error));
814 }, 814 },
815 815
816 createSlide(payload, slides) { 816 createSlide(payload, slides) {
817 var finalSlides = []; 817 var finalSlides = [];
818 slides.forEach((slides_) => { 818 slides.forEach((slides_) => {
819 var url = this.assignRoutes(slides_.templateId); 819 var url = this.assignRoutes(slides_.templateId);
820 var obj = { 820 var obj = {
821 forward: true, 821 forward: true,
822 backward: true, 822 backward: true,
823 ur: url, 823 ur: url,
824 slideId: slides_._id, 824 slideId: slides_._id,
825 caseStudyId: slides_.caseStudyId, 825 caseStudyId: slides_.caseStudyId,
826 payload: { 826 payload: {
827 metaData: slides_.metaData, 827 metaData: slides_.metaData,
828 comments: slides_.comments, 828 comments: slides_.comments,
829 insight: slides_.insight ? slides_.insight : null, 829 insight: slides_.insight ? slides_.insight : null,
830 }, 830 },
831 }; 831 };
832 // slides_ 832 // slides_
833 finalSlides.push(obj); 833 finalSlides.push(obj);
834 }); 834 });
835 console.log("payload", payload); 835 console.log("payload", payload);
836 // add first slide at begining 836 // add first slide at begining
837 finalSlides.unshift({ 837 finalSlides.unshift({
838 forward: true, 838 forward: true,
839 backward: false, 839 backward: false,
840 ur: "EpisodeIntro", 840 ur: "EpisodeIntro",
841 slideId: "INTRO_oqkdMOVDrwRptsdWJ6Ye", 841 slideId: "INTRO_oqkdMOVDrwRptsdWJ6Ye",
842 caseStudyId: payload._id, 842 caseStudyId: payload._id,
843 payload: { 843 payload: {
844 metaData: payload.intro, 844 metaData: payload.intro,
845 comments: [], 845 comments: [],
846 }, 846 },
847 }); 847 });
848 finalSlides.push({ 848 finalSlides.push({
849 forward: true, 849 forward: true,
850 backward: false, 850 backward: false,
851 ur: "Outro", 851 ur: "Outro",
852 slideId: "OUTRO_oqkdMOVDrwRptsdWJ6Ye", 852 slideId: "OUTRO_oqkdMOVDrwRptsdWJ6Ye",
853 caseStudyId: payload._id, 853 caseStudyId: payload._id,
854 payload: { 854 payload: {
855 metaData: payload.outro, 855 metaData: payload.outro,
856 comments: [], 856 comments: [],
857 }, 857 },
858 }); 858 });
859 859
860 console.log(finalSlides); 860 console.log(finalSlides);
861 localStorage.setItem( 861 localStorage.setItem(
862 "spotlight_slide" + payload._id, 862 "spotlight_slide" + payload._id,
863 JSON.stringify(finalSlides) 863 JSON.stringify(finalSlides)
864 ); 864 );
865 this.$router.push({ 865 this.$router.push({
866 name: "EpisodeIntro", 866 name: "EpisodeIntro",
867 params: { 867 params: {
868 caseStudyId: finalSlides[0].caseStudyId, 868 caseStudyId: finalSlides[0].caseStudyId,
869 slideId: finalSlides[0].slideId, 869 slideId: finalSlides[0].slideId,
870 }, 870 },
871 }); 871 });
872 }, 872 },
873 assignRoutes(tempId) { 873 assignRoutes(tempId) {
874 // /episode-intro 874 // /episode-intro
875 // /outro 875 // /outro
876 var routes = [ 876 var routes = [
877 { 877 {
878 url: "AuthorIntro", 878 url: "AuthorIntro",
879 tempId: "T1_RoeMG8130Xko1DvhC3Ou", 879 tempId: "T1_RoeMG8130Xko1DvhC3Ou",
880 }, 880 },
881 { 881 {
882 url: "NoScreenshotSingleAuthor", 882 url: "NoScreenshotSingleAuthor",
883 tempId: "T2_ROsUOEy3vxsRAiQ72XdI", 883 tempId: "T2_ROsUOEy3vxsRAiQ72XdI",
884 }, 884 },
885 { 885 {
886 url: "SingleMobileScreenInsightTwo", 886 url: "SingleMobileScreenInsightTwo",
887 tempId: "T3_cqNIf7tuqL4jyON63dA7", 887 tempId: "T3_cqNIf7tuqL4jyON63dA7",
888 }, 888 },
889 { 889 {
890 url: "TwoScreenWithoutInsight", 890 url: "TwoScreenWithoutInsight",
891 tempId: "T4_4QC8W7kIYnJtZ26Jt0Go", 891 tempId: "T4_4QC8W7kIYnJtZ26Jt0Go",
892 }, 892 },
893 { 893 {
894 url: "noscreenshotSingleautho", 894 url: "noscreenshotSingleautho",
895 tempId: "T5_za3c3sYgx7bVvtKz5r0e", 895 tempId: "T5_za3c3sYgx7bVvtKz5r0e",
896 }, 896 },
897 { 897 {
898 url: "SingleMobileScreenInsightOne", 898 url: "SingleMobileScreenInsightOne",
899 tempId: "T6_za3c3sYgx7bVvtKz5sgf", 899 tempId: "T6_za3c3sYgx7bVvtKz5sgf",
900 }, 900 },
901 { 901 {
902 url: "TwoScreenWithInsight", 902 url: "TwoScreenWithInsight",
903 tempId: "T7_za3c3sYgx7bVvtKzasdf", 903 tempId: "T7_za3c3sYgx7bVvtKzasdf",
904 }, 904 },
905 ]; 905 ];
906 var i = routes.findIndex((routes_) => routes_.tempId == tempId); 906 var i = routes.findIndex((routes_) => routes_.tempId == tempId);
907 return routes[i].url; 907 return routes[i].url;
908 }, 908 },
909 saveProfile() { 909 saveProfile() {
910 var obj = {}; 910 var obj = {};
911 if (this.userData.firstLogin == true) { 911 if (this.userData.firstLogin == true) {
912 this.userData.firstLogin = false; 912 this.userData.firstLogin = false;
913 } 913 }
914 this.userData.name = 914 this.userData.name =
915 this.userData.firstName + " " + this.userData.lastName; 915 this.userData.firstName + " " + this.userData.lastName;
916 obj = Object.assign(obj, this.userData); 916 obj = Object.assign(obj, this.userData);
917 // if(!obj.socialMediaProfiles){ 917 // if(!obj.socialMediaProfiles){
918 // obj.socialMediaProfiles = {}; 918 // obj.socialMediaProfiles = {};
919 // } 919 // }
920 delete obj.createdAt; 920 delete obj.createdAt;
921 delete obj.email; 921 delete obj.email;
922 delete obj.role; 922 delete obj.role;
923 delete obj.verified; 923 delete obj.verified;
924 delete obj.updatedAt; 924 delete obj.updatedAt;
925 delete obj.__v; 925 delete obj.__v;
926 delete obj._id; 926 delete obj._id;
927 delete obj.karmaPoints; 927 delete obj.karmaPoints;
928 delete obj.awards; 928 delete obj.awards;
929 delete obj.socialLogin; 929 delete obj.socialLogin;
930 axios 930 axios
931 .put("/profile", obj, { 931 .put("/profile", obj, {
932 headers: { 932 headers: {
933 Authorization: "Bearer " + this.usertoken, 933 Authorization: "Bearer " + this.usertoken,
934 }, 934 },
935 }) 935 })
936 .then((response) => { 936 .then((response) => {
937 // this.userData = response.data.data; 937 // this.userData = response.data.data;
938 this.$toaster.success("Profile Updated"); 938 this.$toaster.success("Profile Updated");
939 this.closeDialog(); 939 this.closeDialog();
940 console.log(response.data.data); 940 console.log(response.data.data);
941 }) 941 })
942 .catch((error) => { 942 .catch((error) => {
943 if (error.response) { 943 if (error.response) {
944 this.$toaster.error(error.response.data.message); 944 this.$toaster.error(error.response.data.message);
945 } 945 }
946 }); 946 });
947 }, 947 },
948 addProfileDialog() { 948 addProfileDialog() {
949 $(".inner-wrp").addClass("body-blur"); 949 $(".inner-wrp").addClass("body-blur");
950 $("#add-social-links").hide(); 950 $("#add-social-links").hide();
951 $(".popup-wrp, #add-profile").show(); 951 $(".popup-wrp, #add-profile").show();
952 }, 952 },
953 nextProfileDialog() { 953 nextProfileDialog() {
954 $("#add-profile").hide(); 954 $("#add-profile").hide();
955 $("#add-social-links").show(); 955 $("#add-social-links").show();
956 this.saveProfile(); 956 this.saveProfile();
957 }, 957 },
958 closeDialog() { 958 closeDialog() {
959 $(".popup-wrp").hide(); 959 $(".popup-wrp").hide();
960 $(".inner-wrp").removeClass("body-blur"); 960 $(".inner-wrp").removeClass("body-blur");
961 // this.saveProfile(); 961 // this.saveProfile();
962 }, 962 },
963 hideDialog() { 963 hideDialog() {
964 $(".popup-wrp").hide(); 964 $(".popup-wrp").hide();
965 $(".inner-wrp").removeClass("body-blur"); 965 $(".inner-wrp").removeClass("body-blur");
966 }, 966 },
967 /// 967 ///
968 caseDialog() { 968 caseDialog() {
969 $(".rp-all").removeClass("active"); 969 $(".rp-all").removeClass("active");
970 $(".c-0").addClass("active"); 970 $(".c-0").addClass("active");
971 $("#all-replies").hide(); 971 $("#all-replies").hide();
972 $("#case-study-0").show(); 972 $("#case-study-0").show();
973 }, 973 },
974 repliesDialog() { 974 repliesDialog() {
975 $(".c-0").removeClass("active"); 975 $(".c-0").removeClass("active");
976 $(".rp-all").addClass("active"); 976 $(".rp-all").addClass("active");
977 $("#case-study-0").hide(); 977 $("#case-study-0").hide();
978 $("#all-replies").show(); 978 $("#all-replies").show();
979 }, 979 },
980 980
981 userprofileshowDialog() { 981 userprofileshowDialog() {
982 $("#userprofileshow").toggle(); 982 $("#userprofileshow").toggle();
983 }, 983 },
984 openUrl(url) { 984 openUrl(url) {
985 window.open(url); 985 window.open(url);
986 }, 986 },
987 }, 987 },
988 }; 988 };
989 </script> 989 </script>
990 <style> 990 <style>
991 .no-cursor { 991 .no-cursor {
992 cursor: default !important; 992 cursor: default !important;
993 } 993 }
994 .no-underline { 994 .no-underline {
995 text-decoration: none !important; 995 text-decoration: none !important;
996 } 996 }
997 </style> 997 </style>
998 998