viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 4dfee996479254283147aa209ddf06bb725a591a

Authored by Amber Dev
1 parent ba420d0d1c
Exists in master and in 2 other branches amber-development, ui-design

added school events for parent

Showing 2 changed files with 165 additions and 97 deletions   Show diff stats
src/pages/Dashboard/dashboard.vue
Diff comments   View file @4dfee99
... ... @@ -292,7 +292,7 @@
292 292 </v-flex>
293 293 </v-layout>
294 294  
295   - <!-- FOR ADMIN ROLE -->
  295 + <!-- FOR ADMIN,TEACHER ROLE -->
296 296 <v-layout row wrap v-if="role == 'ADMIN'||role == 'TEACHER'">
297 297 <!-- NOTICE -->
298 298 <v-flex xs12 sm6>
... ... @@ -344,6 +344,7 @@
344 344 </v-flex>
345 345  
346 346 <!-- SCHOOL EVENTS -->
  347 +
347 348 <v-flex xs12 sm6>
348 349 <v-card class="card">
349 350 <v-container>
... ... @@ -380,8 +381,6 @@
380 381 </v-flex>
381 382 </v-layout>
382 383  
383   -
384   -
385 384 <!-- FOR TEACHER ROLE -->
386 385 <!-- <v-card class="mt-2 card" v-if="role == 'TEACHER'">
387 386 <v-layout>
... ... @@ -460,15 +459,16 @@
460 459 </v-card-text>
461 460 </v-flex>
462 461 </v-layout>
463   - </v-card> -->
  462 + </v-card>-->
464 463  
465   - <!-- COURSES -->
  464 + <!-- ROLE == PARENT, MY COURSES -->
466 465 <v-layout v-if="role == 'PARENT'">
467 466 <v-flex xs12>
468   - <v-card class="card mt-2 account-Card">
469   - <h4>
470   - <b>My Courses</b>
471   - </h4>
  467 + <v-card class="elevation-0 account-Card">
  468 + <v-container>
  469 + <v-card-title
  470 + class="justify-center title font-weight-bold"
  471 + >My Courses</v-card-title>
472 472 <v-layout wrap>
473 473 <v-flex xs12 sm12>
474 474 <v-list two-line>
... ... @@ -503,94 +503,135 @@
503 503 </v-list>
504 504 </v-flex>
505 505 </v-layout>
  506 + </v-container>
506 507 </v-card>
507 508 </v-flex>
508 509 </v-layout>
509   - <v-layout v-if="role == 'PARENT'">
  510 +
  511 + <v-layout row wrap v-if="role == 'PARENT'">
  512 + <!-- LATEST ANNOUNCEMENTSS , IF ROLE == PARENT -->
510 513 <v-flex xs6>
511   - <v-card class="mt-2 card">
512   - <h4 class="pa-3">
513   - <b>Latest Annoucements</b>
514   - </h4>
  514 + <v-card class="card">
  515 + <v-container>
  516 + <v-card-title
  517 + class="justify-center subheading font-weight-bold"
  518 + >Latest Announcements</v-card-title>
515 519  
516   - <v-data-table
517   - :items="annoucementData"
518   - class="elevation-0"
519   - flat
520   - hide-actions
521   - hide-headers
522   - style="border-spacing: 0 !important;"
523   - >
524   - <template
525   - slot="items"
526   - slot-scope="props"
527   - v-if="props.index < 5"
  520 + <v-data-table
  521 + :items="annoucementData"
  522 + class="elevation-0"
  523 + flat
  524 + hide-actions
  525 + hide-headers
528 526 style="border-spacing: 0 !important;"
529 527 >
530   - <tr class="td-notice">
531   - <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
532   - <td>
533   - <span class="grey--text caption">{{ date(props.item.created) }}</span>
534   - <br />
535   - <span class="body-2">{{ props.item.discussionType}}</span>
536   - </td>
537   - <td class="text-xs-center">
538   - <span>
539   - <v-tooltip top>
540   - <img
541   - slot="activator"
542   - style="cursor:pointer; width:25px; height:25px; "
543   - src="/static/icon/view.png"
544   - />
545   - <span>View</span>
546   - </v-tooltip>
547   - </span>
548   - </td>
549   - </tr>
550   - </template>
551   - </v-data-table>
  528 + <template
  529 + slot="items"
  530 + slot-scope="props"
  531 + v-if="props.index < 5"
  532 + style="border-spacing: 0 !important;"
  533 + >
  534 + <tr class="td-notice">
  535 + <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
  536 + <td>
  537 + <span class="grey--text caption">{{ date(props.item.created) }}</span>
  538 + <br />
  539 + <span class="body-2">{{ props.item.discussionType}}</span>
  540 + </td>
  541 + <td class="text-xs-center">
  542 + <span>
  543 + <v-tooltip top>
  544 + <img
  545 + slot="activator"
  546 + style="cursor:pointer; width:25px; height:25px; "
  547 + src="/static/icon/view.png"
  548 + />
  549 + <span>View</span>
  550 + </v-tooltip>
  551 + </span>
  552 + </td>
  553 + </tr>
  554 + </template>
  555 + </v-data-table>
  556 + </v-container>
552 557 </v-card>
553 558 </v-flex>
  559 + <!-- IF ROLE == PARENT, SCHOOL EVENTS -->
554 560 <v-flex xs6>
555   - <v-card class="mt-2 card">
556   - <h4 class="pa-3">
557   - <b>Online User</b>
558   - </h4>
  561 + <v-card class="card">
  562 + <v-container>
  563 + <v-card-title class="justify-center subheading font-weight-bold">School Events</v-card-title>
  564 + <div
  565 + v-for="(schoolEvent,index) in schoolEvents"
  566 + :key="schoolEvent.title"
  567 + class="mt-2"
  568 + style="cursor: pointer;"
  569 + @click="seeEventDetails(schoolEvent,'schoolEvent')"
  570 + >
  571 + <!-- color dot-->
  572 + <span
  573 + :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
  574 + style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
  575 + ></span>
  576 + <div style="display: inline-block;" class="ml-2">
  577 + <div>
  578 + <!-- date of event -->
  579 + <div
  580 + class="grey--text lighten-1 caption"
  581 + v-if="schoolEvent.dateOfEvent"
  582 + >{{moment(schoolEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
  583 + <!-- event title-->
  584 + <div class="body-1" v-if="schoolEvent.title">{{schoolEvent.title}}</div>
  585 + </div>
  586 + </div>
  587 + </div>
  588 + <div v-if="schoolEvents.length == 0">
  589 + <p class="text-center title grey lighten-4 error--text">No Data Found!</p>
  590 + </div>
  591 + </v-container>
  592 + </v-card>
  593 + </v-flex>
  594 + <!-- ONLINE USER , IF ROLE == PARENT -->
  595 + <v-flex xs6>
  596 + <v-card class="card">
  597 + <v-container>
  598 + <v-card-title class="justify-center subheading font-weight-bold">Online user</v-card-title>
559 599  
560   - <v-data-table
561   - :items="onlineUser"
562   - class="elevation-0"
563   - flat
564   - hide-actions
565   - hide-headers
566   - style="border-spacing: 0 !important;"
567   - >
568   - <template
569   - slot="items"
570   - slot-scope="props"
571   - v-if="props.index < 5"
  600 + <v-data-table
  601 + :items="onlineUser"
  602 + class="elevation-0"
  603 + flat
  604 + hide-actions
  605 + hide-headers
572 606 style="border-spacing: 0 !important;"
573 607 >
574   - <tr class="td-notice">
575   - <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
576   - <td>
577   - <span class="body-2">{{ props.item.user }}</span>
578   - </td>
579   - <td class="text-xs-center">
580   - <span>
581   - <v-tooltip top>
582   - <img
583   - slot="activator"
584   - style="cursor:pointer; width:25px; height:25px; "
585   - src="/static/icon/view.png"
586   - />
587   - <span>View</span>
588   - </v-tooltip>
589   - </span>
590   - </td>
591   - </tr>
592   - </template>
593   - </v-data-table>
  608 + <template
  609 + slot="items"
  610 + slot-scope="props"
  611 + v-if="props.index < 5"
  612 + style="border-spacing: 0 !important;"
  613 + >
  614 + <tr class="td-notice">
  615 + <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
  616 + <td>
  617 + <span class="body-2">{{ props.item.user }}</span>
  618 + </td>
  619 + <td class="text-xs-center">
  620 + <span>
  621 + <v-tooltip top>
  622 + <img
  623 + slot="activator"
  624 + style="cursor:pointer; width:25px; height:25px; "
  625 + src="/static/icon/view.png"
  626 + />
  627 + <span>View</span>
  628 + </v-tooltip>
  629 + </span>
  630 + </td>
  631 + </tr>
  632 + </template>
  633 + </v-data-table>
  634 + </v-container>
594 635 </v-card>
595 636 </v-flex>
596 637 </v-layout>
... ... @@ -936,10 +977,12 @@ export default {
936 977 test(e) {
937 978 console.log(" test - ", e);
938 979 },
  980 +
  981 + /*WHEN CALENDER IS CLICKED - DISPLAYS EVENTS IN DIALOG BOX */
939 982 async handleDayChanged(e) {
940 983 console.log("event calender - ", e);
941 984 /*the list of events that will be used in dialog box to display events */
942   - // this.displayEventsList = [];
  985 +
943 986 this.dialogMeetingEvents = [];
944 987 this.dialogSchoolEvents = [];
945 988  
... ... @@ -957,9 +1000,11 @@ export default {
957 1000 this.dialogSchoolEvents.push(schoolEventResponse.data.data);
958 1001 }
959 1002 }
960   -
  1003 + /* Opens the dialog box */
961 1004 this.viewEventDetails = true;
962 1005 },
  1006 +
  1007 + /* see meeting events, school events individually (when calender is not clicked) */
963 1008 async seeEventDetails(activity, message) {
964 1009 // if (this.$store.state.role === "TEACHER") {
965 1010 // let response = await this.getParticularMeetingEvent({
... ... @@ -970,14 +1015,25 @@ export default {
970 1015 // this.viewEventDetails = true;
971 1016 // }
972 1017 if (this.$store.state.role === "PARENT") {
973   - let response = await this.getParticularMeetingEvent({
974   - meetingEventId: activity.meetingEvent._id,
975   - });
976   - this.displayEventsList = [];
977   - this.displayEventsList.push(response.data.data);
  1018 + if (message == "schoolEvent") {
  1019 + let response = await this.getParticularSchoolEvent({
  1020 + schoolEventId: activity._id,
  1021 + });
  1022 + this.displayEventsList = [];
  1023 + this.displayEventsList.push(response.data.data);
  1024 + } else {
  1025 + let response = await this.getParticularMeetingEvent({
  1026 + meetingEventId: activity.meetingEvent._id,
  1027 + });
  1028 + this.displayEventsList = [];
  1029 + this.displayEventsList.push(response.data.data);
  1030 + }
978 1031 this.viewEventDetails = true;
979 1032 }
980   - if (this.$store.state.role === "ADMIN" || this.$store.state.role === "TEACHER") {
  1033 + if (
  1034 + this.$store.state.role === "ADMIN" ||
  1035 + this.$store.state.role === "TEACHER"
  1036 + ) {
981 1037 if (message == "schoolEvent") {
982 1038 let response = await this.getParticularSchoolEvent({
983 1039 schoolEventId: activity._id,
... ... @@ -1208,6 +1264,8 @@ export default {
1208 1264 this.showLoader = false;
1209 1265 });
1210 1266 },
  1267 +
  1268 + /* MEETING EVENTS, SCHOOL EVENTS */
1211 1269 async getMeetingEventes() {
1212 1270 if (this.role == "TEACHER" || this.role === "ADMIN") {
1213 1271 this.showLoader = true;
... ... @@ -1235,8 +1293,13 @@ export default {
1235 1293 this.showLoader = false;
1236 1294 });
1237 1295 }
1238   - /* If role is ADMIN or TEACHER then school events need to be displayed too */
1239   - if (this.role === "ADMIN" || this.role === "TEACHER") {
  1296 + /* If role is ADMIN,TEACHER, PARENT then school events need to be displayed too */
  1297 + if (
  1298 + this.role === "ADMIN" ||
  1299 + this.role === "TEACHER" ||
  1300 + this.role === "PARENT"
  1301 + ) {
  1302 + /* this will get data in a "schoolEvents" data property */
1240 1303 await this.getSchoolEventsList();
1241 1304 /* set schoolEvents in activityEvents array to highlight event dates in calender */
1242 1305 for (var i = 0; i < this.schoolEvents.length; i++) {
... ... @@ -1247,7 +1310,7 @@ export default {
1247 1310 obj.title = this.schoolEvents[i].title;
1248 1311 obj._id = this.schoolEvents[i]._id;
1249 1312 obj.eventType = "schoolEvent";
1250   - /* activityEvents is an array used to display events in calender on particular dates */
  1313 + /* activityEvents is an array used to display events in calender on particular dates */
1251 1314 this.activityEvents.push(obj);
1252 1315 }
1253 1316 }
... ... @@ -1307,12 +1370,17 @@ export default {
1307 1370 );
1308 1371 obj.title = this.activityList[i].meetingEvent.title;
1309 1372 obj._id = this.activityList[i].meetingEvent._id;
  1373 + obj.eventType = "meetingEvent";
1310 1374 this.activityEvents.push(obj);
1311 1375 }
1312 1376 }
1313 1377  
1314 1378 /* get Latest events list for teacher login*/
1315   - if (this.role == "TEACHER" || this.role == "ADMIN") {
  1379 + if (
  1380 + this.role == "TEACHER" ||
  1381 + this.role == "ADMIN" ||
  1382 + this.role == "PARENT"
  1383 + ) {
1316 1384 await this.getMeetingEventes();
1317 1385 }
1318 1386 },
... ...
static/css/custom.css
Diff comments   View file @4dfee99
... ... @@ -217,7 +217,7 @@ h4 {
217 217 }
218 218  
219 219 .account-Card {
220   - border: 1px solid #71d9ea !important
  220 + border: 2px solid #71d9ea !important
221 221 }
222 222  
223 223 .pink-color {
... ...