viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 2f89adbd737c27f153416fb81d2f6e92be8fd15a

Authored by Shikha Mishra
1 parent 1b9dd5859e
Exists in master and in 1 other branch ui-design

improve ui design while parent login

Showing 1 changed file with 391 additions and 147 deletions   Show diff stats
src/pages/Dashboard/dashboard.vue
Diff comments   View file @2f89adb
... ... @@ -76,13 +76,25 @@
76 76 <v-icon
77 77 size="24"
78 78 class="right"
79   - @click="active=0;displayEventsList=[];dialogSchoolEvents = [];dialogMeetingEvents=[];viewEventDetails = false"
80   - >cancel</v-icon>
  79 + @click="
  80 + active = 0;
  81 + displayEventsList = [];
  82 + dialogSchoolEvents = [];
  83 + dialogMeetingEvents = [];
  84 + viewEventDetails = false;
  85 + "
  86 + >cancel</v-icon
  87 + >
81 88 </v-flex>
82 89 </v-layout>
83   - <v-tabs v-model="active" color="#7f62f8" dark v-if="displayEventsList.length == 0">
  90 + <v-tabs
  91 + v-model="active"
  92 + color="#7f62f8"
  93 + dark
  94 + v-if="displayEventsList.length == 0"
  95 + >
84 96 <v-tabs-slider color="yellow"></v-tabs-slider>
85   - <v-tab v-for="(tab,index) in tabs" :key="index">
  97 + <v-tab v-for="(tab, index) in tabs" :key="index">
86 98 <div class="subheading py-1">{{ tab.name }}</div>
87 99 </v-tab>
88 100 <!-- <v-tab href="#schoolTab" v-if="dialogSchoolEvents.length > 0">School Events</v-tab>
... ... @@ -90,26 +102,44 @@
90 102  
91 103 <!-- SCHOOL EVENTS-->
92 104 <v-tab-item>
93   - <v-card flat class="card-style pa-2" dark v-if="dialogSchoolEvents.length > 0">
  105 + <v-card
  106 + flat
  107 + class="card-style pa-2"
  108 + dark
  109 + v-if="dialogSchoolEvents.length > 0"
  110 + >
94 111 <v-container fluid>
95 112 <v-divider class="white"></v-divider>
96 113 <v-card
97   - v-for="(particularEvent,index) in dialogSchoolEvents"
  114 + v-for="(particularEvent, index) in dialogSchoolEvents"
98 115 :key="index"
99 116 class="mt-3 pa-2 card-style white--text elevation-0"
100 117 >
101 118 <div>
102   - <div class="headline">{{particularEvent.title}}</div>
103   - <div>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
104   - <div v-if="particularEvent.link">Start Time : {{particularEvent.startTime}}</div>
105   - <div v-if="particularEvent.link">Duration : {{particularEvent.duration}}</div>
  119 + <div class="headline">{{ particularEvent.title }}</div>
  120 + <div>
  121 + Date Of Event :
  122 + {{
  123 + moment(particularEvent.dateOfEvent).format(
  124 + "DD MMMM, YYYY"
  125 + )
  126 + }}
  127 + </div>
  128 + <div v-if="particularEvent.link">
  129 + Start Time : {{ particularEvent.startTime }}
  130 + </div>
  131 + <div v-if="particularEvent.link">
  132 + Duration : {{ particularEvent.duration }}
  133 + </div>
106 134 <div v-if="particularEvent.link">
107 135 Link :
108   - <a :href="particularEvent.link">{{particularEvent.link}}</a>
  136 + <a :href="particularEvent.link">{{
  137 + particularEvent.link
  138 + }}</a>
  139 + </div>
  140 + <div v-if="particularEvent.description">
  141 + Description : {{ particularEvent.description }}
109 142 </div>
110   - <div
111   - v-if="particularEvent.description"
112   - >Description : {{particularEvent.description}}</div>
113 143 </div>
114 144 <v-divider class="white mt-3"></v-divider>
115 145 </v-card>
... ... @@ -119,26 +149,44 @@
119 149  
120 150 <!-- MEETING EVENTS -->
121 151 <v-tab-item>
122   - <v-card v-if="dialogMeetingEvents.length > 0" flat class="card-style pa-2" dark>
  152 + <v-card
  153 + v-if="dialogMeetingEvents.length > 0"
  154 + flat
  155 + class="card-style pa-2"
  156 + dark
  157 + >
123 158 <v-container fluid>
124 159 <v-divider class="white"></v-divider>
125 160 <v-card
126   - v-for="(particularEvent,index) in dialogMeetingEvents"
  161 + v-for="(particularEvent, index) in dialogMeetingEvents"
127 162 :key="index"
128 163 class="mt-3 pa-2 card-style white--text elevation-0"
129 164 >
130 165 <div>
131   - <div class="headline">{{particularEvent.title}}</div>
132   - <div>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
133   - <div v-if="particularEvent.link">Start Time : {{particularEvent.startTime}}</div>
134   - <div v-if="particularEvent.link">Duration : {{particularEvent.duration}}</div>
  166 + <div class="headline">{{ particularEvent.title }}</div>
  167 + <div>
  168 + Date Of Event :
  169 + {{
  170 + moment(particularEvent.dateOfEvent).format(
  171 + "DD MMMM, YYYY"
  172 + )
  173 + }}
  174 + </div>
  175 + <div v-if="particularEvent.link">
  176 + Start Time : {{ particularEvent.startTime }}
  177 + </div>
  178 + <div v-if="particularEvent.link">
  179 + Duration : {{ particularEvent.duration }}
  180 + </div>
135 181 <div v-if="particularEvent.link">
136 182 Link :
137   - <a :href="particularEvent.link">{{particularEvent.link}}</a>
  183 + <a :href="particularEvent.link">{{
  184 + particularEvent.link
  185 + }}</a>
  186 + </div>
  187 + <div v-if="particularEvent.description">
  188 + Description : {{ particularEvent.description }}
138 189 </div>
139   - <div
140   - v-if="particularEvent.description"
141   - >Description : {{particularEvent.description}}</div>
142 190 </div>
143 191 <v-divider class="white mt-3"></v-divider>
144 192 </v-card>
... ... @@ -152,22 +200,31 @@
152 200 <v-container fluid>
153 201 <v-divider class="white"></v-divider>
154 202 <v-card
155   - v-for="(particularEvent,index) in displayEventsList"
  203 + v-for="(particularEvent, index) in displayEventsList"
156 204 :key="index"
157 205 class="mt-3 pa-2 card-style white--text elevation-0"
158 206 >
159 207 <div>
160   - <div class="headline">{{particularEvent.title}}</div>
161   - <div>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
162   - <div v-if="particularEvent.link">Start Time : {{particularEvent.startTime}}</div>
163   - <div v-if="particularEvent.link">Duration : {{particularEvent.duration}}</div>
  208 + <div class="headline">{{ particularEvent.title }}</div>
  209 + <div>
  210 + Date Of Event :
  211 + {{
  212 + moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")
  213 + }}
  214 + </div>
  215 + <div v-if="particularEvent.link">
  216 + Start Time : {{ particularEvent.startTime }}
  217 + </div>
  218 + <div v-if="particularEvent.link">
  219 + Duration : {{ particularEvent.duration }}
  220 + </div>
164 221 <div v-if="particularEvent.link">
165 222 Link :
166   - <a :href="particularEvent.link">{{particularEvent.link}}</a>
  223 + <a :href="particularEvent.link">{{ particularEvent.link }}</a>
  224 + </div>
  225 + <div v-if="particularEvent.description">
  226 + Description : {{ particularEvent.description }}
167 227 </div>
168   - <div
169   - v-if="particularEvent.description"
170   - >Description : {{particularEvent.description}}</div>
171 228 </div>
172 229 <v-divider class="white mt-3"></v-divider>
173 230 </v-card>
... ... @@ -180,44 +237,80 @@
180 237 <v-flex xs12 sm12 md8>
181 238 <v-container fluid grid-list-xl>
182 239 <!-- ***** Total Students ***** -->
183   - <v-layout wrap class v-if="$store.state.role != 'PARENT' ">
  240 + <v-layout wrap class v-if="$store.state.role != 'PARENT'">
184 241 <v-flex xs12 sm12 md3>
185   - <router-link :to="{ name:'Students' }">
  242 + <router-link :to="{ name: 'Students' }">
186 243 <v-card class="card pink-bgcolor">
187   - <v-card-title primary-title class="titleCard white--text py-3">Students</v-card-title>
188   - <img src="/static/icon/student.png" class="ml-2" width="40" alt="icons" />
189   - <v-card-title class="headline py-1 white--text">{{ students.length }}</v-card-title>
  244 + <v-card-title primary-title class="titleCard white--text py-3"
  245 + >Students</v-card-title
  246 + >
  247 + <img
  248 + src="/static/icon/student.png"
  249 + class="ml-2"
  250 + width="40"
  251 + alt="icons"
  252 + />
  253 + <v-card-title class="headline py-1 white--text">{{
  254 + students.length
  255 + }}</v-card-title>
190 256 </v-card>
191 257 </router-link>
192 258 </v-flex>
193 259 <!-- ***** Total Teachers***** -->
194 260 <v-flex xs12 sm12 md3>
195   - <router-link :to="{ name:'Teachers' }">
  261 + <router-link :to="{ name: 'Teachers' }">
196 262 <v-card flat class="card elevation-2 firozi-bgcolor">
197   - <v-card-title primary-title class="titleCard white--text py-3">Teachers</v-card-title>
198   - <img src="/static/icon/teacher.png" class="ml-2" width="40" alt="icons" />
  263 + <v-card-title primary-title class="titleCard white--text py-3"
  264 + >Teachers</v-card-title
  265 + >
  266 + <img
  267 + src="/static/icon/teacher.png"
  268 + class="ml-2"
  269 + width="40"
  270 + alt="icons"
  271 + />
199 272  
200   - <v-card-title class="headline py-1 white--text">{{ teachers.length }}</v-card-title>
  273 + <v-card-title class="headline py-1 white--text">{{
  274 + teachers.length
  275 + }}</v-card-title>
201 276 </v-card>
202 277 </router-link>
203 278 </v-flex>
204 279 <!-- ***** Total Parents ***** -->
205 280 <v-flex xs12 sm12 md3>
206   - <router-link :to="{ name:'Parents' }">
  281 + <router-link :to="{ name: 'Parents' }">
207 282 <v-card flat class="card yellow darken-3">
208   - <v-card-title primary-title class="titleCard white--text py-3">Parents</v-card-title>
209   - <img src="/static/icon/parents.png" class="ml-3" width="40px" alt="icons" />
210   - <v-card-title class="headline py-1 white--text">{{ parents.length }}</v-card-title>
  283 + <v-card-title primary-title class="titleCard white--text py-3"
  284 + >Parents</v-card-title
  285 + >
  286 + <img
  287 + src="/static/icon/parents.png"
  288 + class="ml-3"
  289 + width="40px"
  290 + alt="icons"
  291 + />
  292 + <v-card-title class="headline py-1 white--text">{{
  293 + parents.length
  294 + }}</v-card-title>
211 295 </v-card>
212 296 </router-link>
213 297 </v-flex>
214 298 <!-- ***** Total Class***** -->
215 299 <v-flex xs12 sm12 md3>
216   - <router-link :to="{ name:'Class' }">
  300 + <router-link :to="{ name: 'Class' }">
217 301 <v-card flat class="card darkBlue-bgcolor">
218   - <v-card-title primary-title class="titleCard white--text py-3">Class</v-card-title>
219   - <img src="/static/icon/class.png" width="40" alt="icons" class="ml-2" />
220   - <v-card-title class="headline py-1 white--text">{{ classes.length }}</v-card-title>
  302 + <v-card-title primary-title class="titleCard white--text py-3"
  303 + >Class</v-card-title
  304 + >
  305 + <img
  306 + src="/static/icon/class.png"
  307 + width="40"
  308 + alt="icons"
  309 + class="ml-2"
  310 + />
  311 + <v-card-title class="headline py-1 white--text">{{
  312 + classes.length
  313 + }}</v-card-title>
221 314 </v-card>
222 315 </router-link>
223 316 </v-flex>
... ... @@ -226,9 +319,11 @@
226 319 <p
227 320 v-if="studentsData.length === 0 && role == 'PARENT'"
228 321 class="text-center title grey lighten-4 error--text"
229   - >You have no student registered with school</p>
  322 + >
  323 + You have no student registered with school
  324 + </p>
230 325 <!-- ACCOUNT -->
231   - <v-layout v-if="role == 'SUPERADMIN'|| role == 'ADMIN'">
  326 + <v-layout v-if="role == 'SUPERADMIN' || role == 'ADMIN'">
232 327 <v-flex xs12>
233 328 <v-card class="card mt-2 account-Card">
234 329 <h4>
... ... @@ -240,35 +335,48 @@
240 335 <template>
241 336 <v-list-tile>
242 337 <v-list-tile-avatar>
243   - <v-icon class="account-circle darkBlue-color">panorama_fish_eye</v-icon>
  338 + <v-icon class="account-circle darkBlue-color"
  339 + >panorama_fish_eye</v-icon
  340 + >
244 341 </v-list-tile-avatar>
245 342 <v-list-tile-content>
246 343 <v-list-tile-title class="mt-2">
247 344 <p class="subheading font-color">Fees</p>
248 345 </v-list-tile-title>
249   - <v-list-tile-title>Rs. {{ feeData.totalFees }}</v-list-tile-title>
  346 + <v-list-tile-title
  347 + >Rs. {{ feeData.totalFees }}</v-list-tile-title
  348 + >
250 349 </v-list-tile-content>
251 350 </v-list-tile>
252 351 <v-list-tile>
253 352 <v-list-tile-avatar>
254   - <v-icon class="account-circle yellowDark-color">panorama_fish_eye</v-icon>
  353 + <v-icon class="account-circle yellowDark-color"
  354 + >panorama_fish_eye</v-icon
  355 + >
255 356 </v-list-tile-avatar>
256 357 <v-list-tile-content>
257 358 <v-list-tile-title class="mt-2">
258 359 <p class="subheading font-color">Collection</p>
259 360 </v-list-tile-title>
260   - <v-list-tile-title>Rs. {{ feeData.totalCollection }}</v-list-tile-title>
  361 + <v-list-tile-title
  362 + >Rs.
  363 + {{ feeData.totalCollection }}</v-list-tile-title
  364 + >
261 365 </v-list-tile-content>
262 366 </v-list-tile>
263 367 <v-list-tile>
264 368 <v-list-tile-avatar>
265   - <v-icon class="account-circle pink-color">panorama_fish_eye</v-icon>
  369 + <v-icon class="account-circle pink-color"
  370 + >panorama_fish_eye</v-icon
  371 + >
266 372 </v-list-tile-avatar>
267 373 <v-list-tile-content>
268 374 <v-list-tile-title class="mt-2">
269 375 <p class="subheading font-color">Expences</p>
270 376 </v-list-tile-title>
271   - <v-list-tile-title>Rs. {{ expenseData.sum }}</v-list-tile-title>
  377 + <v-list-tile-title
  378 + >Rs. {{ expenseData.sum }}</v-list-tile-title
  379 + >
272 380 </v-list-tile-content>
273 381 </v-list-tile>
274 382 </template>
... ... @@ -293,30 +401,40 @@
293 401 </v-layout>
294 402  
295 403 <!-- FOR ADMIN,TEACHER ROLE -->
296   - <v-layout row wrap v-if="role == 'ADMIN'||role == 'TEACHER'">
  404 + <v-layout row wrap v-if="role == 'ADMIN' || role == 'TEACHER'">
297 405 <!-- NOTICE -->
298 406 <v-flex xs12 sm6>
299 407 <v-card class="card">
300 408 <v-container>
301   - <v-card-title class="justify-center title font-weight-bold">Notice Board</v-card-title>
  409 + <v-card-title class="justify-center title font-weight-bold"
  410 + >Notice Board</v-card-title
  411 + >
302 412 <v-layout column>
303 413 <v-flex
304   - v-for="(item,index) in noticeData"
  414 + v-for="(item, index) in noticeData"
305 415 :key="index"
306   - style="cursor: pointer;"
  416 + style="cursor: pointer"
307 417 >
308 418 <v-layout column>
309 419 <!--Date-->
310 420 <v-flex class="pb-2 pl-2 pr-2">
311 421 <v-chip
312   - :color="colorsArray[index%colorsArray.length]"
  422 + :color="colorsArray[index % colorsArray.length]"
313 423 text-color="white"
314 424 class="ma-0"
315   - >{{ moment(item.created).format("DD MMMM, YYYY") }}</v-chip>
  425 + >{{
  426 + moment(item.created).format("DD MMMM, YYYY")
  427 + }}</v-chip
  428 + >
316 429 </v-flex>
317 430 <!-- title -->
318 431 <v-flex class="pa-2">
319   - <div class="body-1 font-weight-bold px-2" @click="profile">{{item.title}}</div>
  432 + <div
  433 + class="body-1 font-weight-bold px-2"
  434 + @click="profile"
  435 + >
  436 + {{ item.title }}
  437 + </div>
320 438 </v-flex>
321 439  
322 440 <!-- divider -->
... ... @@ -377,33 +495,55 @@
377 495 <v-flex>
378 496 <v-card class="card">
379 497 <v-container>
380   - <v-card-title class="justify-center title font-weight-bold">School Events</v-card-title>
  498 + <v-card-title
  499 + class="justify-center title font-weight-bold"
  500 + >School Events</v-card-title
  501 + >
381 502 <div
382   - v-for="(schoolEvent,index) in schoolEvents"
  503 + v-for="(schoolEvent, index) in schoolEvents"
383 504 :key="schoolEvent.title"
384 505 class="mt-2"
385   - style="cursor: pointer;"
386   - @click="seeEventDetails(schoolEvent,'schoolEvent')"
  506 + style="cursor: pointer"
  507 + @click="seeEventDetails(schoolEvent, 'schoolEvent')"
387 508 >
388 509 <!-- color dot-->
389 510 <span
390   - :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
391   - style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
  511 + :style="{
  512 + 'background-color':
  513 + colorsArray[index % colorsArray.length],
  514 + }"
  515 + style="
  516 + height: 12px;
  517 + width: 12px;
  518 + border-radius: 50%;
  519 + display: inline-block;
  520 + vertical-align: top;
  521 + "
392 522 ></span>
393   - <div style="display: inline-block;" class="ml-2">
  523 + <div style="display: inline-block" class="ml-2">
394 524 <div>
395 525 <!-- date of event -->
396 526 <div
397 527 class="grey--text lighten-1 caption"
398 528 v-if="schoolEvent.dateOfEvent"
399   - >{{moment(schoolEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
  529 + >
  530 + {{
  531 + moment(schoolEvent.dateOfEvent).format(
  532 + "DD MMMM, YYYY"
  533 + )
  534 + }}
  535 + </div>
400 536 <!-- event title-->
401   - <div class="body-1" v-if="schoolEvent.title">{{schoolEvent.title}}</div>
  537 + <div class="body-1" v-if="schoolEvent.title">
  538 + {{ schoolEvent.title }}
  539 + </div>
402 540 </div>
403 541 </div>
404 542 </div>
405 543 <div v-if="schoolEvents.length == 0">
406   - <p class="text-center title grey lighten-4 error--text">No Data Found!</p>
  544 + <p class="text-center title grey lighten-4 error--text">
  545 + No Data Found!
  546 + </p>
407 547 </div>
408 548 </v-container>
409 549 </v-card>
... ... @@ -411,7 +551,9 @@
411 551 <!-- apex charts - Male Female data -->
412 552 <v-flex>
413 553 <v-card>
414   - <v-card-title class="justify-center title font-weight-bold">Students</v-card-title>
  554 + <v-card-title class="justify-center title font-weight-bold"
  555 + >Students</v-card-title
  556 + >
415 557 <div id="chart">
416 558 <apexcharts
417 559 type="donut"
... ... @@ -430,18 +572,23 @@
430 572 <v-flex xs12>
431 573 <v-card class="elevation-3 card">
432 574 <v-container>
433   - <v-card-title class="title font-weight-bold justify-center">My Kids</v-card-title>
434   - <v-data-iterator
435   - :items="activeStudentsList"
436   - :rows-per-page-items="rowsPerPageItems"
437   - :pagination.sync="pagination"
438   - content-tag="v-layout"
439   - row
440   - wrap
441   - >
442   - <template v-slot:item="props">
443   - <v-flex xs12 sm6>
444   - <div style="height: 150px; width: 100% display: inline-block;">
  575 + <v-card-title class="title font-weight-bold justify-center"
  576 + >My Kids</v-card-title
  577 + >
  578 + <v-data-iterator
  579 + :items="activeStudentsList"
  580 + :rows-per-page-items="rowsPerPageItems"
  581 + :pagination.sync="pagination"
  582 + content-tag="v-layout"
  583 + row
  584 + wrap
  585 + >
  586 + <template v-slot:item="props">
  587 + <v-flex xs12 sm6>
  588 + <div
  589 + style="height: 150px; width: 100% display: inline-block;"
  590 + >
  591 + <v-card>
445 592 <v-layout row wrap>
446 593 <!-- IMAGE OF ACTIVE STUDENT -->
447 594 <v-flex xs3 class="text-xs-center">
... ... @@ -469,7 +616,9 @@
469 616 <span class="left">Name:</span>
470 617 </v-flex>
471 618 <v-flex xs9 class="body-1 pa-0 ml-2">
472   - <span class="left">{{props.item.name}}</span>
  619 + <span class="left">{{
  620 + props.item.name
  621 + }}</span>
473 622 </v-flex>
474 623 </v-layout>
475 624 <!--ROLLNO -->
... ... @@ -478,7 +627,9 @@
478 627 <span class="left">Roll No:</span>
479 628 </v-flex>
480 629 <v-flex xs9 class="body-1 pa-0 ml-2">
481   - <span class="left">{{props.item.rollNo}}</span>
  630 + <span class="left">{{
  631 + props.item.rollNo
  632 + }}</span>
482 633 </v-flex>
483 634 </v-layout>
484 635 <!--GENDER -->
... ... @@ -487,7 +638,9 @@
487 638 <span class="left">Gender:</span>
488 639 </v-flex>
489 640 <v-flex xs9 class="body-1 pa-0 ml-2">
490   - <span class="left">{{props.item.gender}}</span>
  641 + <span class="left">{{
  642 + props.item.gender
  643 + }}</span>
491 644 </v-flex>
492 645 </v-layout>
493 646 <!--EMAIL -->
... ... @@ -496,15 +649,18 @@
496 649 <span class="left">Email:</span>
497 650 </v-flex>
498 651 <v-flex xs9 class="body-1 pa-0 ml-2">
499   - <span class="left">{{props.item.email}}</span>
  652 + <span class="left">{{
  653 + props.item.email
  654 + }}</span>
500 655 </v-flex>
501 656 </v-layout>
502 657 </v-flex>
503 658 </v-layout>
504   - </div>
505   - </v-flex>
506   - </template>
507   - </v-data-iterator>
  659 + </v-card>
  660 + </div>
  661 + </v-flex>
  662 + </template>
  663 + </v-data-iterator>
508 664 </v-container>
509 665 </v-card>
510 666 </v-flex>
... ... @@ -513,12 +669,17 @@
513 669 <v-flex xs12>
514 670 <v-card class="elevation-3 card">
515 671 <v-container>
516   - <v-card-title class="justify-center title font-weight-bold">My Courses</v-card-title>
  672 + <v-card-title class="justify-center title font-weight-bold"
  673 + >My Courses</v-card-title
  674 + >
517 675 <v-layout wrap>
518 676 <v-flex xs12 sm12>
519 677 <v-list two-line>
520 678 <template>
521   - <v-list-tile v-for="(course,i) in courseData" :key="i">
  679 + <v-list-tile
  680 + v-for="(course, i) in courseData"
  681 + :key="i"
  682 + >
522 683 <v-list-tile-avatar>
523 684 <!-- <v-icon
524 685 class="account-circle darkBlue-color"
... ... @@ -529,7 +690,11 @@
529 690 <v-tooltip top>
530 691 <img
531 692 slot="activator"
532   - style="cursor:pointer; width:25px; height:25px; "
  693 + style="
  694 + cursor: pointer;
  695 + width: 25px;
  696 + height: 25px;
  697 + "
533 698 src="/static/icon/view.png"
534 699 @click="routeToCourseDetails(course._id)"
535 700 />
... ... @@ -539,9 +704,10 @@
539 704 </v-list-tile-avatar>
540 705 <v-list-tile-content>
541 706 <v-list-tile-title
542   - style="cursor: pointer;"
  707 + style="cursor: pointer"
543 708 @click="routeToCourseDetails(course._id)"
544   - >{{ course.courseName }}</v-list-tile-title>
  709 + >{{ course.courseName }}</v-list-tile-title
  710 + >
545 711 </v-list-tile-content>
546 712 </v-list-tile>
547 713 </template>
... ... @@ -577,28 +743,34 @@
577 743 <v-container>
578 744 <v-card-title
579 745 class="justify-center subheading font-weight-bold"
580   - >Latest Announcements</v-card-title>
  746 + >Latest Announcements</v-card-title
  747 + >
581 748 <v-layout column>
582 749 <v-flex
583   - v-for="(item,index) in annoucementData"
  750 + v-for="(item, index) in annoucementData"
584 751 :key="index"
585   - style="cursor: pointer;"
  752 + style="cursor: pointer"
586 753 >
587 754 <v-layout column>
588 755 <!--Date-->
589 756 <v-flex class="pb-2 pl-2 pr-2">
590 757 <v-chip
591   - :color="colorsArray[index%colorsArray.length]"
  758 + :color="colorsArray[index % colorsArray.length]"
592 759 text-color="white"
593 760 class="ma-0"
594   - >{{ moment(item.created).format("DD MMMM, YYYY") }}</v-chip>
  761 + >{{
  762 + moment(item.created).format("DD MMMM, YYYY")
  763 + }}</v-chip
  764 + >
595 765 </v-flex>
596 766 <!-- title -->
597 767 <v-flex class="pa-2">
598 768 <div
599 769 class="body-1 font-weight-bold px-2"
600 770 @click="profile"
601   - >{{item.discussionType}}</div>
  771 + >
  772 + {{ item.discussionType }}
  773 + </div>
602 774 </v-flex>
603 775  
604 776 <!-- divider -->
... ... @@ -618,33 +790,55 @@
618 790 <v-flex>
619 791 <v-card class="elevation-3 card">
620 792 <v-container>
621   - <v-card-title class="justify-center subheading font-weight-bold">School Events</v-card-title>
  793 + <v-card-title
  794 + class="justify-center subheading font-weight-bold"
  795 + >School Events</v-card-title
  796 + >
622 797 <div
623   - v-for="(schoolEvent,index) in schoolEvents"
  798 + v-for="(schoolEvent, index) in schoolEvents"
624 799 :key="schoolEvent.title"
625 800 class="mt-2"
626   - style="cursor: pointer;"
627   - @click="seeEventDetails(schoolEvent,'schoolEvent')"
  801 + style="cursor: pointer"
  802 + @click="seeEventDetails(schoolEvent, 'schoolEvent')"
628 803 >
629 804 <!-- color dot-->
630 805 <span
631   - :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
632   - style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
  806 + :style="{
  807 + 'background-color':
  808 + colorsArray[index % colorsArray.length],
  809 + }"
  810 + style="
  811 + height: 12px;
  812 + width: 12px;
  813 + border-radius: 50%;
  814 + display: inline-block;
  815 + vertical-align: top;
  816 + "
633 817 ></span>
634   - <div style="display: inline-block;" class="ml-2">
  818 + <div style="display: inline-block" class="ml-2">
635 819 <div>
636 820 <!-- date of event -->
637 821 <div
638 822 class="grey--text lighten-1 caption"
639 823 v-if="schoolEvent.dateOfEvent"
640   - >{{moment(schoolEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
  824 + >
  825 + {{
  826 + moment(schoolEvent.dateOfEvent).format(
  827 + "DD MMMM, YYYY"
  828 + )
  829 + }}
  830 + </div>
641 831 <!-- event title-->
642   - <div class="body-1" v-if="schoolEvent.title">{{schoolEvent.title}}</div>
  832 + <div class="body-1" v-if="schoolEvent.title">
  833 + {{ schoolEvent.title }}
  834 + </div>
643 835 </div>
644 836 </div>
645 837 </div>
646 838 <div v-if="schoolEvents.length == 0">
647   - <p class="text-center title grey lighten-4 error--text">No Data Found!</p>
  839 + <p class="text-center title grey lighten-4 error--text">
  840 + No Data Found!
  841 + </p>
648 842 </div>
649 843 </v-container>
650 844 </v-card>
... ... @@ -689,72 +883,114 @@
689 883 </p>
690 884 <p class="mb-0 caption grey--text">{{ userData.email }}</p>
691 885 <p class="mb-0 caption grey--text">{{ userData.mobile }}</p>
692   - <address class="caption grey--text mb-3">{{ userData.address }}</address>
  886 + <address class="caption grey--text mb-3">
  887 + {{ userData.address }}
  888 + </address>
693 889 </v-flex>
694 890 </v-layout>
695 891 </v-flex>
696 892 <hr />
697   - <div class="text-xs-center py-3 subheading font-weight-bold">Calender</div>
  893 + <div class="text-xs-center py-3 subheading font-weight-bold">
  894 + Calender
  895 + </div>
698 896  
699   - <vue-event-calendar :events="activityEvents" @day-changed="handleDayChanged($event)"></vue-event-calendar>
  897 + <vue-event-calendar
  898 + :events="activityEvents"
  899 + @day-changed="handleDayChanged($event)"
  900 + ></vue-event-calendar>
700 901  
701 902 <!-- MEETING EVENTS -->
702 903 <!-- IF ROLE IS ADMIN -->
703 904 <v-card class="my-3 elevation-0">
704   - <v-card-text v-if="$store.state.role === 'ADMIN' ">
  905 + <v-card-text v-if="$store.state.role === 'ADMIN'">
705 906 <!-- MEETING EVENTS -->
706   - <v-card-title class="justify-center subheading font-weight-bold">Meeting Events</v-card-title>
  907 + <v-card-title class="justify-center subheading font-weight-bold"
  908 + >Meeting Events</v-card-title
  909 + >
707 910 <div
708   - v-for="(activity,index) in activityList"
  911 + v-for="(activity, index) in activityList"
709 912 :key="index"
710 913 class="mt-2"
711   - style="cursor: pointer;"
  914 + style="cursor: pointer"
712 915 @click="seeEventDetails(activity)"
713 916 >
714 917 <span
715   - :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
716   - style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
  918 + :style="{
  919 + 'background-color':
  920 + colorsArray[index % colorsArray.length],
  921 + }"
  922 + style="
  923 + height: 12px;
  924 + width: 12px;
  925 + border-radius: 50%;
  926 + display: inline-block;
  927 + vertical-align: top;
  928 + "
717 929 ></span>
718   - <div style="display: inline-block;" class="ml-2">
  930 + <div style="display: inline-block" class="ml-2">
719 931 <div>
720 932 <div
721 933 class="grey--text lighten-1 caption"
722 934 v-if="activity.dateOfEvent"
723   - >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div>
724   - <div class="body-1" v-if="activity.title">{{activity.title}}</div>
  935 + >
  936 + {{
  937 + moment(activity.dateOfEvent).format("DD MMMM, YYYY")
  938 + }}
  939 + </div>
  940 + <div class="body-1" v-if="activity.title">
  941 + {{ activity.title }}
  942 + </div>
725 943 </div>
726 944 </div>
727 945 </div>
728 946 <div v-if="activityList.length == 0">
729   - <p class="text-center title grey lighten-4 error--text">No Data Found!</p>
  947 + <p class="text-center title grey lighten-4 error--text">
  948 + No Data Found!
  949 + </p>
730 950 </div>
731 951 </v-card-text>
732 952  
733 953 <!-- ROLE IS NOT ADMIN -->
734 954 <v-card-text v-if="$store.state.role != 'ADMIN'">
735   - <v-card-title class="justify-center subheading font-weight-bold">Meeting Events</v-card-title>
  955 + <v-card-title class="justify-center subheading font-weight-bold"
  956 + >Meeting Events</v-card-title
  957 + >
736 958 <div
737   - v-for="(activity,index) in activityList"
  959 + v-for="(activity, index) in activityList"
738 960 :key="index"
739 961 class="mt-2"
740   - style="cursor: pointer;"
  962 + style="cursor: pointer"
741 963 @click="seeEventDetails(activity)"
742 964 >
743 965 <span
744   - :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
745   - style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
  966 + :style="{
  967 + 'background-color':
  968 + colorsArray[index % colorsArray.length],
  969 + }"
  970 + style="
  971 + height: 12px;
  972 + width: 12px;
  973 + border-radius: 50%;
  974 + display: inline-block;
  975 + vertical-align: top;
  976 + "
746 977 ></span>
747   - <div style="display: inline-block;" class="ml-2">
  978 + <div style="display: inline-block" class="ml-2">
748 979 <!-- MEETING EVENTS FOR PARENT -->
749   - <div v-if="$store.state.role === 'PARENT' ">
  980 + <div v-if="$store.state.role === 'PARENT'">
750 981 <div
751 982 class="grey--text lighten-1 caption"
752 983 v-if="activity.meetingEvent"
753   - >{{moment(activity.meetingEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
754   - <div
755   - class="body-2"
756   - v-if="activity.meetingEvent"
757   - >{{activity.meetingEvent.title}}</div>
  984 + >
  985 + {{
  986 + moment(activity.meetingEvent.dateOfEvent).format(
  987 + "DD MMMM, YYYY"
  988 + )
  989 + }}
  990 + </div>
  991 + <div class="body-2" v-if="activity.meetingEvent">
  992 + {{ activity.meetingEvent.title }}
  993 + </div>
758 994 </div>
759 995  
760 996 <!-- MEETING EVENTS FOR TEACHER -->
... ... @@ -762,12 +998,20 @@
762 998 <div
763 999 class="grey--text lighten-1 caption"
764 1000 v-if="activity.dateOfEvent"
765   - >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div>
766   - <div class="body-2" v-if="activity.title">{{activity.title}}</div>
  1001 + >
  1002 + {{
  1003 + moment(activity.dateOfEvent).format("DD MMMM, YYYY")
  1004 + }}
  1005 + </div>
  1006 + <div class="body-2" v-if="activity.title">
  1007 + {{ activity.title }}
  1008 + </div>
767 1009 </div>
768 1010 </div>
769 1011 <div v-if="activityList.length == 0">
770   - <p class="text-center title grey lighten-4 error--text">No Data Found!</p>
  1012 + <p class="text-center title grey lighten-4 error--text">
  1013 + No Data Found!
  1014 + </p>
771 1015 </div>
772 1016 </div>
773 1017 </v-card-text>
... ... @@ -781,7 +1025,7 @@
781 1025 <v-card color="grey lighten-4" flat>
782 1026 <v-toolbar dark color="fixcolors">
783 1027 <v-spacer></v-spacer>
784   - <v-btn icon @click="dialog= false">
  1028 + <v-btn icon @click="dialog = false">
785 1029 <v-icon>close</v-icon>
786 1030 </v-btn>
787 1031 </v-toolbar>
... ... @@ -799,7 +1043,7 @@
799 1043 <v-icon>access_time</v-icon>
800 1044 </v-list-tile-action>
801 1045 <v-list-tile-content>
802   - <v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title>
  1046 + <v-list-tile-title>{{ date(selected.start) }}</v-list-tile-title>
803 1047 </v-list-tile-content>
804 1048 </v-list-tile>
805 1049 </v-flex>
... ...