viithiisys / spotlight-frontend

Download as
Browse Code »

Commit 052b5bc3311d0ea1a3b4cb9d78046588229f569c

Authored by Digvijay Singh
1 parent 61627f88d2
Exists in master and in 1 other branch admin

close dialog

Showing 1 changed file with 4 additions and 1 deletions   Show diff stats
src/components/Profile.vue
Diff comments   View file @052b5bc
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="../assets/images/m-user.svg" /> 9 <img src="../assets/images/m-user.svg" />
10 </div> 10 </div>
11 <!-- header user --> 11 <!-- header user -->
12 12
13 <ul> 13 <ul>
14 <li> 14 <li>
15 <a href="#" 15 <a href="#"
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="#" 22 <a href="#"
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-model="interestName" 121 v-model="interestName"
122 /> 122 />
123 <a href="javascript:void(0);" @click="addInterest()" 123 <a href="javascript:void(0);" @click="addInterest()"
124 ><img src="../assets/images/plus-circle.svg" 124 ><img src="../assets/images/plus-circle.svg"
125 /></a> 125 /></a>
126 </li> 126 </li>
127 </ul> 127 </ul>
128 </div> 128 </div>
129 <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12"> 129 <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
130 <p class="things">Choose Background color</p> 130 <p class="things">Choose Background color</p>
131 131
132 <ul class="colors"> 132 <ul class="colors">
133 <li> 133 <li>
134 <a 134 <a
135 href="javascript:void(0);" 135 href="javascript:void(0);"
136 id="#C4C4C4" 136 id="#C4C4C4"
137 class="silver" 137 class="silver"
138 @click="changeColor('#C4C4C4')" 138 @click="changeColor('#C4C4C4')"
139 ></a> 139 ></a>
140 </li> 140 </li>
141 <li> 141 <li>
142 <a 142 <a
143 href="javascript:void(0);" 143 href="javascript:void(0);"
144 id="#FFF6D7" 144 id="#FFF6D7"
145 class="milk-punch" 145 class="milk-punch"
146 @click="changeColor('#FFF6D7')" 146 @click="changeColor('#FFF6D7')"
147 ></a> 147 ></a>
148 </li> 148 </li>
149 <li> 149 <li>
150 <a 150 <a
151 href="javascript:void(0);" 151 href="javascript:void(0);"
152 id="#BDDBFF" 152 id="#BDDBFF"
153 class="french-pass" 153 class="french-pass"
154 @click="changeColor('#BDDBFF')" 154 @click="changeColor('#BDDBFF')"
155 ></a> 155 ></a>
156 </li> 156 </li>
157 <li> 157 <li>
158 <a 158 <a
159 href="javascript:void(0);" 159 href="javascript:void(0);"
160 id="#C0FAFE" 160 id="#C0FAFE"
161 class="cyan-french-pass" 161 class="cyan-french-pass"
162 @click="changeColor('#C0FAFE')" 162 @click="changeColor('#C0FAFE')"
163 ></a> 163 ></a>
164 </li> 164 </li>
165 <li> 165 <li>
166 <a 166 <a
167 href="javascript:void(0);" 167 href="javascript:void(0);"
168 id="#FFDBDC" 168 id="#FFDBDC"
169 class="cosmos" 169 class="cosmos"
170 @click="changeColor('#FFDBDC')" 170 @click="changeColor('#FFDBDC')"
171 ></a> 171 ></a>
172 </li> 172 </li>
173 <li> 173 <li>
174 <a 174 <a
175 href="javascript:void(0);" 175 href="javascript:void(0);"
176 id="#FEE6AC" 176 id="#FEE6AC"
177 class="cape-Honey" 177 class="cape-Honey"
178 @click="changeColor('#FEE6AC')" 178 @click="changeColor('#FEE6AC')"
179 ></a> 179 ></a>
180 </li> 180 </li>
181 <li> 181 <li>
182 <a 182 <a
183 href="javascript:void(0);" 183 href="javascript:void(0);"
184 id="#E5DFF0" 184 id="#E5DFF0"
185 class="snuff" 185 class="snuff"
186 @click="changeColor('#E5DFF0')" 186 @click="changeColor('#E5DFF0')"
187 ></a> 187 ></a>
188 </li> 188 </li>
189 <li> 189 <li>
190 <a 190 <a
191 href="javascript:void(0);" 191 href="javascript:void(0);"
192 id="#DFE7EF" 192 id="#DFE7EF"
193 class="catskillWhite" 193 class="catskillWhite"
194 @click="changeColor('#DFE7EF')" 194 @click="changeColor('#DFE7EF')"
195 ></a> 195 ></a>
196 </li> 196 </li>
197 <li> 197 <li>
198 <a 198 <a
199 href="javascript:void(0);" 199 href="javascript:void(0);"
200 id="#FFF" 200 id="#FFF"
201 class="white" 201 class="white"
202 @click="changeColor('#FFF')" 202 @click="changeColor('#FFF')"
203 ></a> 203 ></a>
204 </li> 204 </li>
205 </ul> 205 </ul>
206 </div> 206 </div>
207 <div class="col-lg-12 mt-50"> 207 <div class="col-lg-12 mt-50">
208 <p class="notifications"> 208 <p class="notifications">
209 Recieve notifications when you recieve a comment/ Upvote 209 Recieve notifications when you recieve a comment/ Upvote
210 </p> 210 </p>
211 <div class="switch-bt-wrp"> 211 <div class="switch-bt-wrp">
212 <label class="switch-btn"> 212 <label class="switch-btn">
213 <input type="checkbox" class="toggle-btn" /> 213 <input type="checkbox" class="toggle-btn" />
214 <span class="rounded-toggle"></span> 214 <span class="rounded-toggle"></span>
215 </label> 215 </label>
216 <span class="onoff">on/off</span> 216 <span class="onoff">on/off</span>
217 </div> 217 </div>
218 </div> 218 </div>
219 <div class="col-lg-12"> 219 <div class="col-lg-12">
220 <p class="add-socail-ch"> 220 <p class="add-socail-ch">
221 Add your social Channels <span></span> 221 Add your social Channels <span></span>
222 </p> 222 </p>
223 </div> 223 </div>
224 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> 224 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
225 <div class="form-group floating-label"> 225 <div class="form-group floating-label">
226 <select class="form-group" > 226 <select class="form-group" >
227 <option value="Facebook">Facebook</option> 227 <option value="Facebook">Facebook</option>
228 </select> 228 </select>
229 <span class="select-arrow" 229 <span class="select-arrow"
230 ><img src="../assets/images/chevron-down.svg" 230 ><img src="../assets/images/chevron-down.svg"
231 /></span> 231 /></span>
232 </div> 232 </div>
233 </div> 233 </div>
234 <!-- input --> 234 <!-- input -->
235 <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8"> 235 <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8">
236 <div class="form-group floating-label"> 236 <div class="form-group floating-label">
237 <input 237 <input
238 type="text" 238 type="text"
239 class="form-control" 239 class="form-control"
240 value="" 240 value=""
241 placeholder="Paste your profile URL here" 241 placeholder="Paste your profile URL here"
242 id="" 242 id=""
243 v-model="userData.socialMediaProfiles.facebook" 243 v-model="userData.socialMediaProfiles.facebook"
244 /> 244 />
245 </div> 245 </div>
246 </div> 246 </div>
247 <!-- input --> 247 <!-- input -->
248 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> 248 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
249 <div class="form-group floating-label"> 249 <div class="form-group floating-label">
250 <select class="form-group" > 250 <select class="form-group" >
251 <option value="Linkedin">Linkedin</option> 251 <option value="Linkedin">Linkedin</option>
252 </select> 252 </select>
253 <span class="select-arrow" 253 <span class="select-arrow"
254 ><img src="../assets/images/chevron-down.svg" 254 ><img src="../assets/images/chevron-down.svg"
255 /></span> 255 /></span>
256 </div> 256 </div>
257 </div> 257 </div>
258 <!-- input --> 258 <!-- input -->
259 <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8"> 259 <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8">
260 <div class="form-group floating-label"> 260 <div class="form-group floating-label">
261 <input 261 <input
262 type="text" 262 type="text"
263 class="form-control" 263 class="form-control"
264 value="" 264 value=""
265 placeholder="Paste your profile URL here" 265 placeholder="Paste your profile URL here"
266 id="" 266 id=""
267 v-model="userData.socialMediaProfiles.linkedin" 267 v-model="userData.socialMediaProfiles.linkedin"
268 /> 268 />
269 </div> 269 </div>
270 </div> 270 </div>
271 <!-- input --> 271 <!-- input -->
272 272
273 <!-- input --> 273 <!-- input -->
274 <!-- <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> 274 <!-- <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
275 <div class="form-group floating-label"> 275 <div class="form-group floating-label">
276 <select class="form-group"> 276 <select class="form-group">
277 <option @click="addSocialLink">Add another</option> 277 <option @click="addSocialLink">Add another</option>
278 </select> 278 </select>
279 <span class="select-arrow" 279 <span class="select-arrow"
280 ><img src="../assets/images/chevron-down.svg" 280 ><img src="../assets/images/chevron-down.svg"
281 /></span> 281 /></span>
282 </div> 282 </div>
283 </div> --> 283 </div> -->
284 <!-- input --> 284 <!-- input -->
285 </div> 285 </div>
286 <a href="javascript:void(0);" @click="closeDialog" class="next-bt" 286 <a href="javascript:void(0);" @click="closeDialog" class="next-bt"
287 >Save</a 287 >Save</a
288 > 288 >
289 </form> 289 </form>
290 </div> 290 </div>
291 <div class="clearfix"></div> 291 <div class="clearfix"></div>
292 </div> 292 </div>
293 <!-- add profile --> 293 <!-- add profile -->
294 </div> 294 </div>
295 <!-- profile --> 295 <!-- profile -->
296 <div class="container-fluid inner-wrp"> 296 <div class="container-fluid inner-wrp">
297 <nav class="navbar navbar-expand-sm spotLight-nav"> 297 <nav class="navbar navbar-expand-sm spotLight-nav">
298 <a class="navbar-brand" href="#" 298 <a class="navbar-brand" href="#"
299 ><img src="../assets/images/logo.png" 299 ><img src="../assets/images/logo.png"
300 /></a> 300 /></a>
301 <button 301 <button
302 class="navbar-toggler" 302 class="navbar-toggler"
303 type="button" 303 type="button"
304 data-toggle="collapse" 304 data-toggle="collapse"
305 data-target="#navbarsExample03" 305 data-target="#navbarsExample03"
306 aria-controls="navbarsExample03" 306 aria-controls="navbarsExample03"
307 aria-expanded="false" 307 aria-expanded="false"
308 aria-label="Toggle navigation" 308 aria-label="Toggle navigation"
309 > 309 >
310 <span class="navbar-toggler-icon"></span> 310 <span class="navbar-toggler-icon"></span>
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 </button> 313 </button>
314 314
315 <div class="collapse navbar-collapse" id="navbarsExample03"> 315 <div class="collapse navbar-collapse" id="navbarsExample03">
316 <ul class="navbar-nav mr-auto"> 316 <ul class="navbar-nav mr-auto">
317 <li class="nav-item active"> 317 <li class="nav-item active">
318 <a class="nav-link" href="#">About</a> 318 <a class="nav-link" href="#">About</a>
319 </li> 319 </li>
320 <li class="nav-item"> 320 <li class="nav-item">
321 <a class="nav-link" href="#">Masterclass</a> 321 <a class="nav-link" href="#">Masterclass</a>
322 </li> 322 </li>
323 <li class="nav-item"> 323 <li class="nav-item">
324 <a class="nav-link" href="#">Stories</a> 324 <a class="nav-link" href="#">Stories</a>
325 </li> 325 </li>
326 <li class="nav-item"> 326 <li class="nav-item">
327 <a class="nav-link" href="#">Library</a> 327 <a class="nav-link" href="#">Library</a>
328 </li> 328 </li>
329 </ul> 329 </ul>
330 </div> 330 </div>
331 <div class="user-profile-photo common_color"> 331 <div class="user-profile-photo common_color">
332 <a href="javascript:void(0);" @click="userprofileshowDialog" 332 <a href="javascript:void(0);" @click="userprofileshowDialog"
333 ><img src="../assets/images/m-user.svg" 333 ><img src="../assets/images/m-user.svg"
334 /></a> 334 /></a>
335 <div class="sub-menu-user" id="userprofileshow" style="display: none"> 335 <div class="sub-menu-user" id="userprofileshow" style="display: none">
336 <ul> 336 <ul>
337 <li><a href="javascript:void(0);" @click="addProfileDialog">Edit Profile</a></li> 337 <li><a href="javascript:void(0);" @click="addProfileDialog">Edit Profile</a></li>
338 <li><a href="javascript:void(0);" @click="logout">Log Out</a></li> 338 <li><a href="javascript:void(0);" @click="logout">Log Out</a></li>
339 </ul> 339 </ul>
340 </div> 340 </div>
341 </div> 341 </div>
342 </nav> 342 </nav>
343 <!-- menu wrapper --> 343 <!-- menu wrapper -->
344 <div class="row profile-tab-spc-top"> 344 <div class="row profile-tab-spc-top">
345 <div class="col-sm-8 col-md-12 col-lg-8 col-xl-8"> 345 <div class="col-sm-8 col-md-12 col-lg-8 col-xl-8">
346 <div class="inner-profile-ps common_color"> 346 <div class="inner-profile-ps common_color">
347 <img src="../assets/images/m-user.svg" class="" /> 347 <img src="../assets/images/m-user.svg" class="" />
348 </div> 348 </div>
349 <!-- user profile --> 349 <!-- user profile -->
350 350
351 <div class="user-profile"> 351 <div class="user-profile">
352 <h1> 352 <h1>
353 {{ userData.firstName }} {{ userData.lastName }} 353 {{ userData.firstName }} {{ userData.lastName }}
354 <a href="#" class="tags">{{ userData.role }}</a> 354 <a href="#" class="tags">{{ userData.role }}</a>
355 </h1> 355 </h1>
356 <ul class="joined-info"> 356 <ul class="joined-info">
357 <li> 357 <li>
358 <a href="#">Add your work</a> 358 <a href="javascript:void(0);" @click="addProfileDialog">Add your work</a>
359 <img src="../assets/images/u-info-icon.png" /> <span></span> 359 <img src="../assets/images/u-info-icon.png" /> <span></span>
360 </li> 360 </li>
361 <li> 361 <li>
362 <a href="#">{{ userData.karmaPoints }} Karma</a> <span></span> 362 <a href="#">{{ userData.karmaPoints }} Karma</a> <span></span>
363 </li> 363 </li>
364 <li> 364 <li>
365 <a href="#" 365 <a href="#"
366 >Joined on 366 >Joined on
367 {{ moment(userData.createdAt).format("MMM YYYY") }}</a 367 {{ moment(userData.createdAt).format("MMM YYYY") }}</a
368 > 368 >
369 </li> 369 </li>
370 </ul> 370 </ul>
371 <p>{{ userData.bio }}</p> 371 <p>{{ userData.bio }}</p>
372 </div> 372 </div>
373 </div> 373 </div>
374 <!-- user profile --> 374 <!-- user profile -->
375 <div class="col-sm-4 col-md-12 col-lg-4 col-xl-4"> 375 <div class="col-sm-4 col-md-12 col-lg-4 col-xl-4">
376 <div class="list-style-group" v-if="userData.awards"> 376 <div class="list-style-group" v-if="userData.awards">
377 <p>Awards</p> 377 <p>Awards</p>
378 <ul class="list-style"> 378 <ul class="list-style">
379 <li> 379 <li>
380 <a href="javascript:void(0);"><img src="../assets/images/icon-1.png" /></a> 380 <a href="javascript:void(0);"><img src="../assets/images/icon-1.png" /></a>
381 </li> 381 </li>
382 </ul> 382 </ul>
383 </div> 383 </div>
384 <!-- list style --> 384 <!-- list style -->
385 </div> 385 </div>
386 </div> 386 </div>
387 <div class="clearfix"></div> 387 <div class="clearfix"></div>
388 <div class="row top-brd profile-tab-spc-top"> 388 <div class="row top-brd profile-tab-spc-top">
389 <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8"> 389 <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8">
390 <ul class="profile-tab"> 390 <ul class="profile-tab">
391 <li class="active c-0"> 391 <li class="active c-0">
392 <a href="javascript:void(0);" @click="caseDialog" 392 <a href="javascript:void(0);" @click="caseDialog"
393 >Case-studies(0)</a 393 >Case-studies(0)</a
394 > 394 >
395 </li> 395 </li>
396 <li class="rp-all"> 396 <li class="rp-all">
397 <a href="javascript:void(0);" @click="repliesDialog" 397 <a href="javascript:void(0);" @click="repliesDialog"
398 >Comments/Replies(1)</a 398 >Comments/Replies(1)</a
399 > 399 >
400 </li> 400 </li>
401 </ul> 401 </ul>
402 </div> 402 </div>
403 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4"> 403 <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
404 <ul class="social-connects"> 404 <ul class="social-connects">
405 <li><span>Follow</span></li> 405 <li><span>Follow</span></li>
406 <li> 406 <li>
407 <a href="javascript:void(0);" @click="addProfileDialog" class="active" 407 <a href="javascript:void(0);" @click="addProfileDialog" class="active"
408 ><img src="../assets/images/plus.png" 408 ><img src="../assets/images/plus.png"
409 /></a> 409 /></a>
410 <span class="connect-social-channel" 410 <span class="connect-social-channel"
411 >Connect your social channels</span 411 >Connect your social channels</span
412 > 412 >
413 </li> 413 </li>
414 </ul> 414 </ul>
415 </div> 415 </div>
416 </div> 416 </div>
417 <!-- tab style --> 417 <!-- tab style -->
418 <div class="profile-data-wrp"> 418 <div class="profile-data-wrp">
419 <div class="container-fluid data-wrp" id="case-study-0"> 419 <div class="container-fluid data-wrp" id="case-study-0">
420 <div class="row"> 420 <div class="row">
421 <div class="col-lg-12"> 421 <div class="col-lg-12">
422 <div class="profile-buttons"> 422 <div class="profile-buttons">
423 <a 423 <a
424 href="javascript:void(0);" 424 href="javascript:void(0);"
425 class="profile-sm-bt center-and-spc bt-active" 425 class="profile-sm-bt center-and-spc bt-active"
426 @click="addProfileDialog" 426 @click="addProfileDialog"
427 >Update Profile</a 427 >Update Profile</a
428 > 428 >
429 <a href="#" class="profile-md-bt center-and-spc" 429 <a href="#" class="profile-md-bt center-and-spc"
430 >Explore Case-studies</a 430 >Explore Case-studies</a
431 > 431 >
432 <a href="#" class="profile-lg-bt">Publish Your Case Study</a> 432 <a href="#" class="profile-lg-bt">Publish Your Case Study</a>
433 </div> 433 </div>
434 </div> 434 </div>
435 </div> 435 </div>
436 </div> 436 </div>
437 <!-- case study 0 --> 437 <!-- case study 0 -->
438 <div 438 <div
439 class="container-fluid data-wrp" 439 class="container-fluid data-wrp"
440 id="all-replies" 440 id="all-replies"
441 style="display: none" 441 style="display: none"
442 > 442 >
443 <div class="row"> 443 <div class="row">
444 <div class="replies col-md-12"> 444 <div class="replies col-md-12">
445 <div class="replies-wrp"> 445 <div class="replies-wrp">
446 <h1>PhonePe vs GooglePay <span>Critique</span></h1> 446 <h1>PhonePe vs GooglePay <span>Critique</span></h1>
447 <ul class="joined-info"> 447 <ul class="joined-info">
448 <li><a href="#">37D</a> <span></span></li> 448 <li><a href="#">37D</a> <span></span></li>
449 <li><img src="../assets/images/heart.png" /></li> 449 <li><img src="../assets/images/heart.png" /></li>
450 <li><a href="#"> 4</a></li> 450 <li><a href="#"> 4</a></li>
451 <li class="comment-spc"> 451 <li class="comment-spc">
452 <img src="../assets/images/comment.svg" /> 452 <img src="../assets/images/comment.svg" />
453 </li> 453 </li>
454 <li><a href="#"> 6</a></li> 454 <li><a href="#"> 6</a></li>
455 </ul> 455 </ul>
456 <p> 456 <p>
457 I wonder what the difference between “<strong> 457 I wonder what the difference between “<strong>
458 Assistant</strong 458 Assistant</strong
459 >” and “<strong>Pickup and Drop</strong>” are. If they are the 459 >” and “<strong>Pickup and Drop</strong>” are. If they are the
460 same, there are two “call to actions” for the same workflow 460 same, there are two “call to actions” for the same workflow
461 </p> 461 </p>
462 </div> 462 </div>
463 <!-- replies wrapper --> 463 <!-- replies wrapper -->
464 </div> 464 </div>
465 <!-- all card wrpper --> 465 <!-- all card wrpper -->
466 </div> 466 </div>
467 </div> 467 </div>
468 <!-- all Relpies --> 468 <!-- all Relpies -->
469 </div> 469 </div>
470 <!-- data wrp --> 470 <!-- data wrp -->
471 <!-- body wrapper --> 471 <!-- body wrapper -->
472 </div> 472 </div>
473 </main> 473 </main>
474 </template> 474 </template>
475 475
476 <script> 476 <script>
477 import Vue from "vue"; 477 import Vue from "vue";
478 import router from "../router"; 478 import router from "../router";
479 import $ from "jquery"; 479 import $ from "jquery";
480 import axios from "axios"; 480 import axios from "axios";
481 481
482 export default { 482 export default {
483 name: "Profile", 483 name: "Profile",
484 484
485 data() { 485 data() {
486 return { 486 return {
487 loggedinFlag: false, 487 loggedinFlag: false,
488 usertoken: null, 488 usertoken: null,
489 userData: {}, 489 userData: {},
490 interestName: null, 490 interestName: null,
491 oldId: null, 491 oldId: null,
492 socialLink:null, 492 socialLink:null,
493 currentSocialLinkName:null, 493 currentSocialLinkName:null,
494 }; 494 };
495 }, 495 },
496 mounted() { 496 mounted() {
497 this.userData = {}; 497 this.userData = {};
498 this.socialLink = []; 498 this.socialLink = [];
499 this.userData.interests = []; 499 this.userData.interests = [];
500 this.userData.socialMediaProfiles = {}; 500 this.userData.socialMediaProfiles = {};
501 this.userData.socialMediaProfiles.facebook = null; 501 this.userData.socialMediaProfiles.facebook = null;
502 this.userData.socialMediaProfiles.linkedin = null; 502 this.userData.socialMediaProfiles.linkedin = null;
503 var userdata = localStorage.getItem("spotlight_usertoken"); 503 var userdata = localStorage.getItem("spotlight_usertoken");
504 if (userdata) { 504 if (userdata) {
505 userdata = JSON.parse(userdata); 505 userdata = JSON.parse(userdata);
506 this.usertoken = userdata.token; 506 this.usertoken = userdata.token;
507 this.getProfile(); 507 this.getProfile();
508 } 508 }
509 }, 509 },
510 methods: { 510 methods: {
511 goToSignUp() { 511 goToSignUp() {
512 this.$router.push("/signup"); 512 this.$router.push("/signup");
513 }, 513 },
514 goToReset() { 514 goToReset() {
515 this.$router.push("/reset"); 515 this.$router.push("/reset");
516 }, 516 },
517 logout() { 517 logout() {
518 this.$router.push("/"); 518 this.$router.push("/");
519 }, 519 },
520 addSocialLink(obj){ 520 addSocialLink(obj){
521 this.socialLink.push() 521 this.socialLink.push()
522 522
523 }, 523 },
524 addInterest() { 524 addInterest() {
525 console.log(this.userData.interests.length, "called", this.interestName); 525 console.log(this.userData.interests.length, "called", this.interestName);
526 if (this.userData.interests.length <= 2) { 526 if (this.userData.interests.length <= 2) {
527 this.userData.interests.push(this.interestName); 527 this.userData.interests.push(this.interestName);
528 this.interestName = null; 528 this.interestName = null;
529 } else { 529 } else {
530 this.$toaster.info("Only 3 interest are allowed"); 530 this.$toaster.info("Only 3 interest are allowed");
531 } 531 }
532 }, 532 },
533 removeInterest(i) { 533 removeInterest(i) {
534 this.userData.interests.splice(i, 1); 534 this.userData.interests.splice(i, 1);
535 }, 535 },
536 assignClass() { 536 assignClass() {
537 var element = document.getElementById(this.userData.bgColor); 537 var element = document.getElementById(this.userData.bgColor);
538 element.classList.add("active"); 538 element.classList.add("active");
539 var cols = document.getElementsByClassName("common_color"); 539 var cols = document.getElementsByClassName("common_color");
540 for (var i = 0; i < cols.length; i++) { 540 for (var i = 0; i < cols.length; i++) {
541 cols[i].style.backgroundColor = this.userData.bgColor; 541 cols[i].style.backgroundColor = this.userData.bgColor;
542 } 542 }
543 543
544 }, 544 },
545 changeColor(clr) { 545 changeColor(clr) {
546 console.log(this.oldId,"clr",clr); 546 console.log(this.oldId,"clr",clr);
547 var element = document.getElementById(clr); 547 var element = document.getElementById(clr);
548 element.classList.add("active"); 548 element.classList.add("active");
549 var removeelement = document.getElementById(this.oldId); 549 var removeelement = document.getElementById(this.oldId);
550 removeelement.classList.remove("active"); 550 removeelement.classList.remove("active");
551 this.oldId = clr; 551 this.oldId = clr;
552 var cols = document.getElementsByClassName("common_color"); 552 var cols = document.getElementsByClassName("common_color");
553 for (var i = 0; i < cols.length; i++) { 553 for (var i = 0; i < cols.length; i++) {
554 cols[i].style.backgroundColor = clr; 554 cols[i].style.backgroundColor = clr;
555 } 555 }
556 this.userData.bgColor = clr; 556 this.userData.bgColor = clr;
557 557
558 }, 558 },
559 getProfile() { 559 getProfile() {
560 axios 560 axios
561 .get("/profile", { 561 .get("/profile", {
562 headers: { 562 headers: {
563 Authorization: "Bearer " + this.usertoken, 563 Authorization: "Bearer " + this.usertoken,
564 }, 564 },
565 }) 565 })
566 .then((response) => { 566 .then((response) => {
567 this.userData = response.data.data; 567 this.userData = response.data.data;
568 if(!this.userData.socialMediaProfiles){
569 this.userData.socialMediaProfiles = {};
570 }
568 this.oldId = this.userData.bgColor; 571 this.oldId = this.userData.bgColor;
569 console.log(this.oldId,"this.userData.",this.userData.bgColor); 572 console.log(this.oldId,"this.userData.",this.userData.bgColor);
570 573
571 this.assignClass(); 574 this.assignClass();
572 console.log(response.data.data); 575 console.log(response.data.data);
573 }) 576 })
574 .catch((error) => console.log(error)); 577 .catch((error) => console.log(error));
575 }, 578 },
576 saveProfile() { 579 saveProfile() {
577 var obj = {}; 580 var obj = {};
578 this.userData.name = 581 this.userData.name =
579 this.userData.firstName + " " + this.userData.lastName; 582 this.userData.firstName + " " + this.userData.lastName;
580 obj = Object.assign(obj, this.userData); 583 obj = Object.assign(obj, this.userData);
581 // if(!obj.socialMediaProfiles){ 584 // if(!obj.socialMediaProfiles){
582 // obj.socialMediaProfiles = {}; 585 // obj.socialMediaProfiles = {};
583 // } 586 // }
584 delete obj.createdAt; 587 delete obj.createdAt;
585 delete obj.email; 588 delete obj.email;
586 delete obj.role; 589 delete obj.role;
587 delete obj.verified; 590 delete obj.verified;
588 delete obj.updatedAt; 591 delete obj.updatedAt;
589 delete obj.__v; 592 delete obj.__v;
590 delete obj._id; 593 delete obj._id;
591 delete obj.karmaPoints; 594 delete obj.karmaPoints;
592 delete obj.awards; 595 delete obj.awards;
593 delete obj.socialLogin; 596 delete obj.socialLogin;
594 axios 597 axios
595 .put("/profile", obj, { 598 .put("/profile", obj, {
596 headers: { 599 headers: {
597 Authorization: "Bearer " + this.usertoken, 600 Authorization: "Bearer " + this.usertoken,
598 }, 601 },
599 }) 602 })
600 .then((response) => { 603 .then((response) => {
601 // this.userData = response.data.data; 604 // this.userData = response.data.data;
602 this.$toaster.success('Profile Updated'); 605 this.$toaster.success('Profile Updated');
603 606
604 console.log(response.data.data); 607 console.log(response.data.data);
605 }) 608 })
606 .catch((error) => { 609 .catch((error) => {
607 if (error.response) { 610 if (error.response) {
608 this.$toaster.error(error.response.data.message); 611 this.$toaster.error(error.response.data.message);
609 } 612 }
610 }); 613 });
611 }, 614 },
612 addProfileDialog() { 615 addProfileDialog() {
613 $(".inner-wrp").addClass("body-blur"); 616 $(".inner-wrp").addClass("body-blur");
614 $("#add-social-links").hide(); 617 $("#add-social-links").hide();
615 $(".popup-wrp, #add-profile").show(); 618 $(".popup-wrp, #add-profile").show();
616 }, 619 },
617 nextProfileDialog() { 620 nextProfileDialog() {
618 $("#add-profile").hide(); 621 $("#add-profile").hide();
619 $("#add-social-links").show(); 622 $("#add-social-links").show();
620 this.saveProfile(); 623 this.saveProfile();
621 }, 624 },
622 closeDialog() { 625 closeDialog() {
623 $(".popup-wrp").hide(); 626 $(".popup-wrp").hide();
624 $(".inner-wrp").removeClass("body-blur"); 627 $(".inner-wrp").removeClass("body-blur");
625 this.saveProfile(); 628 this.saveProfile();
626 }, 629 },
627 hideDialog() { 630 hideDialog() {
628 $(".popup-wrp").hide(); 631 $(".popup-wrp").hide();
629 $(".inner-wrp").removeClass("body-blur"); 632 $(".inner-wrp").removeClass("body-blur");
630 }, 633 },
631 /// 634 ///
632 caseDialog() { 635 caseDialog() {
633 $(".rp-all").removeClass("active"); 636 $(".rp-all").removeClass("active");
634 $(".c-0").addClass("active"); 637 $(".c-0").addClass("active");
635 $("#all-replies").hide(); 638 $("#all-replies").hide();
636 $("#case-study-0").show(); 639 $("#case-study-0").show();
637 }, 640 },
638 repliesDialog() { 641 repliesDialog() {
639 $(".c-0").removeClass("active"); 642 $(".c-0").removeClass("active");
640 $(".rp-all").addClass("active"); 643 $(".rp-all").addClass("active");
641 $("#case-study-0").hide(); 644 $("#case-study-0").hide();
642 $("#all-replies").show(); 645 $("#all-replies").show();
643 }, 646 },
644 647
645 userprofileshowDialog() { 648 userprofileshowDialog() {
646 $("#userprofileshow").toggle(); 649 $("#userprofileshow").toggle();
647 }, 650 },
648 }, 651 },
649 }; 652 };
650 </script> 653 </script>
651 654