viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 019880b6fb2ab5ed46406e7570a9fe5188f203ff

Authored by Amber Dev
1 parent 898c80f271
Exists in master and in 1 other branch ui-design

added students list

Showing 2 changed files with 208 additions and 261 deletions   Show diff stats
src/pages/Dashboard/dashboard.vue
Diff comments   View file @019880b
... ... @@ -411,7 +411,7 @@
411 411 <!-- apex charts - Male Female data -->
412 412 <v-flex>
413 413 <v-card>
414   - <v-card-title class="justify-center title font-weight-bold" >Students</v-card-title>
  414 + <v-card-title class="justify-center title font-weight-bold">Students</v-card-title>
415 415 <div id="chart">
416 416 <apexcharts
417 417 type="donut"
... ... @@ -425,124 +425,106 @@
425 425 </v-flex>
426 426 </v-layout>
427 427  
428   - <!-- FOR TEACHER ROLE -->
429   - <!-- <v-card class="mt-2 card" v-if="role == 'TEACHER'">
430   - <v-layout>
431   - <v-flex xs6 sm6 md6>
432   - <h4 class="pa-3">
433   - <b>Notice</b>
434   - </h4>
435   - <v-data-table
436   - :items="noticeData"
437   - class="elevation-0"
438   - flat
439   - hide-actions
440   - hide-headers
441   - style="border-spacing: 0 !important;"
442   - >
443   - <template
444   - slot="items"
445   - slot-scope="props"
446   - v-if="props.index < 5"
447   - style="border-spacing: 0 !important;"
448   - >
449   - <tr class="td-notice">
450   - <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
451   - <td>
452   - <span class="grey--text caption">{{ date(props.item.created) }}</span>
453   - <br />
454   - <span class="body-2">{{ props.item.title}}</span>
455   - </td>
456   - <td class="grey--text mt-2">{{ props.item.description}}</td>
457   -
458   - <td class="text-xs-center">
459   - <span>
460   - <v-tooltip top>
461   - <img
462   - slot="activator"
463   - style="cursor:pointer; width:25px; height:25px; "
464   - @click="profile"
465   - src="/static/icon/view.png"
466   - />
467   - <span>View</span>
468   - </v-tooltip>
469   - </span>
470   - </td>
471   - </tr>
472   - </template>
473   - </v-data-table>
474   - </v-flex>
475   -
476   - <v-flex xs6 sm6 md6>
477   - <v-card-text>
478   - <v-card-title class="justify-center subheading font-weight-bold">Meeting Events</v-card-title>
479   - <div
480   - v-for="(activity,index) in activityList"
481   - :key="index"
482   - class="mt-2"
483   - style="cursor: pointer;"
484   - @click="seeEventDetails(activity)"
  428 + <v-layout row wrap v-if="role == 'PARENT'">
  429 + <!-- ROLE - PARENT , ACTIVE STUDENTS -->
  430 + <v-flex xs12>
  431 + <v-card class="elevation-0 account-Card">
  432 + <v-container>
  433 + <v-card-title class="title font-weight-bold">Students</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
485 441 >
486   - <span
487   - :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
488   - style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
489   - ></span>
490   - <div style="display: inline-block;" class="ml-2">
491   - <div>
492   - <div
493   - class="grey--text lighten-1 caption"
494   - v-if="activity.dateOfEvent"
495   - >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div>
496   - <div class="body-2" v-if="activity.title">{{activity.title}}</div>
497   - </div>
498   - </div>
499   - </div>
500   - <div v-if="activityList.length == 0">
501   - <p class="text-center title grey lighten-4 error--text">No Data Found!</p>
502   - </div>
503   - </v-card-text>
504   - </v-flex>
505   - </v-layout>
506   - </v-card>-->
  442 + <template v-slot:item="props">
  443 + <v-flex xs12 sm6>
  444 + <v-card style="border: 2px solid black" class="elevation-0" height="300">
  445 + <v-container>
  446 + <v-card-text>
  447 + <v-layout row wrap>
  448 + <!-- IMAGE OF ACTIVE STUDENT -->
  449 + <v-flex xs12 class="text-xs-center">
  450 + <img
  451 + :src="props.item.profilePicUrl"
  452 + alt="profileImage"
  453 + width="80"
  454 + />
  455 + </v-flex>
  456 + <v-flex xs12 class="text-xs-center">
  457 + <!--NAME -->
  458 + <v-layout class="pa-0 ma-0">
  459 + <v-flex xs4 class="body-1 font-weight-bold pa-0 ma-0">
  460 + <span class="left">Name:</span>
  461 + </v-flex>
  462 + <v-flex xs8 class="body-1 font-weight-bold pa-0 ml-2">
  463 + <span class="left">{{props.item.name}}</span>
  464 + </v-flex>
  465 + </v-layout>
  466 + <!--ROLLNO -->
  467 + <v-layout class="pa-0 ma-0">
  468 + <v-flex xs4 class="body-1 font-weight-bold pa-0 ma-0">
  469 + <span class="left">Roll No:</span>
  470 + </v-flex>
  471 + <v-flex xs8 class="body-1 font-weight-bold pa-0 ml-2">
  472 + <span class="left">{{props.item.rollNo}}</span>
  473 + </v-flex>
  474 + </v-layout>
  475 + <!--GENDER -->
  476 + <v-layout class="pa-0 ma-0">
  477 + <v-flex xs4 class="body-1 font-weight-bold pa-0 ma-0">
  478 + <span class="left">Gender:</span>
  479 + </v-flex>
  480 + <v-flex xs8 class="body-1 font-weight-bold pa-0 ml-2">
  481 + <span class="left">{{props.item.gender}}</span>
  482 + </v-flex>
  483 + </v-layout>
  484 + <!--EMAIL -->
  485 + <v-layout class="pa-0 ma-0">
  486 + <v-flex xs4 class="body-1 font-weight-bold pa-0 ma-0">
  487 + <span class="left">Email:</span>
  488 + </v-flex>
  489 + <v-flex xs8 class="body-1 font-weight-bold pa-0 ml-2">
  490 + <span class="left">{{props.item.email}}</span>
  491 + </v-flex>
  492 + </v-layout>
  493 + </v-flex>
  494 + </v-layout>
  495 + </v-card-text>
  496 + </v-container>
  497 + </v-card>
  498 + </v-flex>
  499 + </template>
  500 + </v-data-iterator>
  501 + </v-container>
  502 + </v-card>
  503 + </v-flex>
507 504  
508   - <!-- ROLE == PARENT, MY COURSES -->
509   - <v-layout v-if="role == 'PARENT'">
  505 + <!-- ROLE - PARENT, MY COURSES -->
510 506 <v-flex xs12>
511 507 <v-card class="elevation-0 account-Card">
512 508 <v-container>
513   - <v-card-title class="justify-center title font-weight-bold">My Courses</v-card-title>
  509 + <v-card-title class="title font-weight-bold">My Courses</v-card-title>
514 510 <v-layout wrap>
515   - <v-flex xs12 sm12>
516   - <v-list two-line>
  511 + <v-flex xs3 v-for="(course,i) in courseData" :key="i">
  512 + <v-btn block outline color="#71d9ea" dark>
  513 + <span
  514 + class="subheading font-weight-bold"
  515 + @click="routeToCourseDetails(course._id)"
  516 + >{{ course.courseName }}</span>
  517 + </v-btn>
  518 + <!-- <v-list two-line>
517 519 <template>
518   - <v-list-tile v-for="(course,i) in courseData" :key="i">
  520 + <v-list-tile>
519 521 <v-list-tile-avatar>
520   - <!-- <v-icon
521   - class="account-circle darkBlue-color"
522   - style="cursor: pointer;"
523   - @click="routeToCourseDetails(course._id)"
524   - >panorama_fish_eye</v-icon>-->
525   - <span>
526   - <v-tooltip top>
527   - <img
528   - slot="activator"
529   - style="cursor:pointer; width:25px; height:25px; "
530   - src="/static/icon/view.png"
531   - @click="routeToCourseDetails(course._id)"
532   - />
533   - <span>View</span>
534   - </v-tooltip>
535   - </span>
  522 +
536 523 </v-list-tile-avatar>
537   - <v-list-tile-content>
538   - <v-list-tile-title
539   - style="cursor: pointer;"
540   - @click="routeToCourseDetails(course._id)"
541   - >{{ course.courseName }}</v-list-tile-title>
542   - </v-list-tile-content>
  524 + <v-list-tile-content></v-list-tile-content>
543 525 </v-list-tile>
544 526 </template>
545   - </v-list>
  527 + </v-list>-->
546 528 </v-flex>
547 529 </v-layout>
548 530 </v-container>
... ... @@ -551,140 +533,85 @@
551 533 </v-layout>
552 534  
553 535 <v-layout row wrap v-if="role == 'PARENT'">
554   - <!-- LATEST ANNOUNCEMENTSS , IF ROLE == PARENT -->
555   - <v-flex xs6>
556   - <v-card class="card">
  536 + <!-- ROLE - PARENT , LATEST ANNOUNCEMENTS -->
  537 + <v-flex xs12 sm6 md6>
  538 + <!-- NOTICE -->
  539 + <v-card class="account-Card">
557 540 <v-container>
558   - <v-card-title
559   - class="justify-center subheading font-weight-bold"
560   - >Latest Announcements</v-card-title>
561   -
562   - <v-data-table
563   - :items="annoucementData"
564   - class="elevation-0"
565   - flat
566   - hide-actions
567   - hide-headers
568   - style="border-spacing: 0 !important;"
569   - >
570   - <template
571   - slot="items"
572   - slot-scope="props"
573   - v-if="props.index < 5"
574   - style="border-spacing: 0 !important;"
  541 + <v-card-title class="justify-center subheading font-weight-bold">Latest Announcements</v-card-title>
  542 + <v-layout column>
  543 + <v-flex
  544 + v-for="(item,index) in annoucementData"
  545 + :key="index"
  546 + style="cursor: pointer;"
575 547 >
576   - <tr class="td-notice">
577   - <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
578   - <td>
579   - <span class="grey--text caption">{{ date(props.item.created) }}</span>
580   - <br />
581   - <span class="body-2">{{ props.item.discussionType}}</span>
582   - </td>
583   - <td class="text-xs-center">
584   - <span>
585   - <v-tooltip top>
586   - <img
587   - slot="activator"
588   - style="cursor:pointer; width:25px; height:25px; "
589   - src="/static/icon/view.png"
590   - />
591   - <span>View</span>
592   - </v-tooltip>
593   - </span>
594   - </td>
595   - </tr>
596   - </template>
597   - </v-data-table>
  548 + <v-layout column>
  549 + <!--Date-->
  550 + <v-flex class="pb-2 pl-2 pr-2">
  551 + <v-chip
  552 + :color="colorsArray[index%colorsArray.length]"
  553 + text-color="white"
  554 + class="ma-0"
  555 + >{{ moment(item.created).format("DD MMMM, YYYY") }}</v-chip>
  556 + </v-flex>
  557 + <!-- title -->
  558 + <v-flex class="pa-2">
  559 + <div
  560 + class="body-1 font-weight-bold px-2"
  561 + @click="profile"
  562 + >{{item.discussionType}}</div>
  563 + </v-flex>
  564 +
  565 + <!-- divider -->
  566 + <v-flex class="pa-2">
  567 + <v-divider></v-divider>
  568 + </v-flex>
  569 + </v-layout>
  570 + </v-flex>
  571 + </v-layout>
598 572 </v-container>
599 573 </v-card>
600 574 </v-flex>
601   - <!-- IF ROLE == PARENT, SCHOOL EVENTS -->
602   - <v-flex xs6>
603   - <v-card class="card">
604   - <v-container>
605   - <v-card-title class="justify-center subheading font-weight-bold">School Events</v-card-title>
606   - <div
607   - v-for="(schoolEvent,index) in schoolEvents"
608   - :key="schoolEvent.title"
609   - class="mt-2"
610   - style="cursor: pointer;"
611   - @click="seeEventDetails(schoolEvent,'schoolEvent')"
612   - >
613   - <!-- color dot-->
614   - <span
615   - :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
616   - style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
617   - ></span>
618   - <div style="display: inline-block;" class="ml-2">
619   - <div>
620   - <!-- date of event -->
621   - <div
622   - class="grey--text lighten-1 caption"
623   - v-if="schoolEvent.dateOfEvent"
624   - >{{moment(schoolEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
625   - <!-- event title-->
626   - <div class="body-1" v-if="schoolEvent.title">{{schoolEvent.title}}</div>
  575 +
  576 + <v-flex xs12 sm6>
  577 + <v-layout column>
  578 + <!-- ROLE - PARENT, SCHOOL EVENTS -->
  579 + <v-flex>
  580 + <v-card class="account-Card">
  581 + <v-container>
  582 + <v-card-title class="justify-center subheading font-weight-bold">School Events</v-card-title>
  583 + <div
  584 + v-for="(schoolEvent,index) in schoolEvents"
  585 + :key="schoolEvent.title"
  586 + class="mt-2"
  587 + style="cursor: pointer;"
  588 + @click="seeEventDetails(schoolEvent,'schoolEvent')"
  589 + >
  590 + <!-- color dot-->
  591 + <span
  592 + :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
  593 + style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
  594 + ></span>
  595 + <div style="display: inline-block;" class="ml-2">
  596 + <div>
  597 + <!-- date of event -->
  598 + <div
  599 + class="grey--text lighten-1 caption"
  600 + v-if="schoolEvent.dateOfEvent"
  601 + >{{moment(schoolEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
  602 + <!-- event title-->
  603 + <div class="body-1" v-if="schoolEvent.title">{{schoolEvent.title}}</div>
  604 + </div>
  605 + </div>
627 606 </div>
628   - </div>
629   - </div>
630   - <div v-if="schoolEvents.length == 0">
631   - <p class="text-center title grey lighten-4 error--text">No Data Found!</p>
632   - </div>
633   - </v-container>
634   - </v-card>
  607 + <div v-if="schoolEvents.length == 0">
  608 + <p class="text-center title grey lighten-4 error--text">No Data Found!</p>
  609 + </div>
  610 + </v-container>
  611 + </v-card>
  612 + </v-flex>
  613 + </v-layout>
635 614 </v-flex>
636   -
637   - <!-- <v-flex xs12>
638   - <v-card>
639   - <v-card-title class="justify-center title font-weight-bold">Students</v-card-title>
640   - <v-card-text>
641   -
642   - </v-card-text>
643   - </v-card>
644   - </v-flex> -->
645   - <!-- ONLINE USER , IF ROLE == PARENT -->
646   - <!-- <v-flex xs6>
647   - <v-card class="card">
648   - <v-container>
649   - <v-card-title class="justify-center subheading font-weight-bold">Online user</v-card-title>
650   -
651   - <v-data-table
652   - :items="onlineUser"
653   - class="elevation-0"
654   - flat
655   - hide-actions
656   - hide-headers
657   - style="border-spacing: 0 !important;"
658   - >
659   - <template
660   - slot="items"
661   - slot-scope="props"
662   - v-if="props.index < 5"
663   - style="border-spacing: 0 !important;"
664   - >
665   - <tr class="td-notice">
666   - <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
667   - <td>
668   - <span class="body-2">{{ props.item.user }}</span>
669   - </td>
670   - <td class="text-xs-center">
671   - <span>
672   - <v-tooltip top>
673   - <img
674   - slot="activator"
675   - style="cursor:pointer; width:25px; height:25px; "
676   - src="/static/icon/view.png"
677   - />
678   - <span>View</span>
679   - </v-tooltip>
680   - </span>
681   - </td>
682   - </tr>
683   - </template>
684   - </v-data-table>
685   - </v-container>
686   - </v-card>
687   - </v-flex>-->
688 615 </v-layout>
689 616 </v-container>
690 617 </v-flex>
... ... @@ -884,11 +811,11 @@ export default {
884 811 formatter: function (val, opts) {
885 812 return val + " - " + opts.w.globals.series[opts.seriesIndex];
886 813 },
887   - position: 'bottom',
  814 + position: "bottom",
888 815 },
889 816 dataLabels: {
890 817 enabled: true,
891   - formatter: function (val,opts) {
  818 + formatter: function (val, opts) {
892 819 return opts.w.globals.series[opts.seriesIndex];
893 820 },
894 821 },
... ... @@ -943,8 +870,7 @@ export default {
943 870 feeData: [],
944 871 collectionData: [],
945 872 courseData: [],
946   - studentsData: [],
947   - activeStudent: {},
  873 +
948 874 annoucementData: [],
949 875 role: "",
950 876 attrs: [
... ... @@ -1039,6 +965,15 @@ export default {
1039 965 },
1040 966 },
1041 967  
  968 + /* ROLE PARENT - ACTIVE STUDENTS */
  969 + studentsData: [],
  970 + activeStudent: {},
  971 + activeStudentsList: [],
  972 + rowsPerPageItems: [2],
  973 + pagination: {
  974 + rowsPerPage: 2,
  975 + },
  976 +
1042 977 // LATEST ACTIVITY
1043 978 colorsArray: ["#ff8a89", "#71d9ea", "#7852cc", "#F9A825"],
1044 979 activityList: [],
... ... @@ -1329,6 +1264,7 @@ export default {
1329 1264 })
1330 1265 .then((response) => {
1331 1266 this.annoucementData = response.data.data;
  1267 + console.log("avnn - ", this.annoucementData);
1332 1268 this.showLoader = false;
1333 1269 })
1334 1270 .catch((err) => {
... ... @@ -1390,24 +1326,24 @@ export default {
1390 1326 }
1391 1327 }
1392 1328 },
1393   - async getMaleFemaleData(){
1394   - await http()
1395   - .get("/getStudentsByGender")
1396   - .then((response) => {
1397   - console.log("gender response - ", response)
1398   - for(var i = 0; i < response.data.data.length; i++){
1399   - if(response.data.data[i]._id == "male"){
1400   - this.maleFemaleSeries.push(response.data.data[i].total)
1401   - }
1402   - if(response.data.data[i]._id == "female"){
1403   - this.maleFemaleSeries.push(response.data.data[i].total)
1404   - }
  1329 + async getMaleFemaleData() {
  1330 + await http()
  1331 + .get("/getStudentsByGender")
  1332 + .then((response) => {
  1333 + console.log("gender response - ", response);
  1334 + for (var i = 0; i < response.data.data.length; i++) {
  1335 + if (response.data.data[i]._id == "male") {
  1336 + this.maleFemaleSeries.push(response.data.data[i].total);
1405 1337 }
1406   - })
1407   - .catch((error) => {
1408   - this.showLoader = false;
1409   - });
1410   - }
  1338 + if (response.data.data[i]._id == "female") {
  1339 + this.maleFemaleSeries.push(response.data.data[i].total);
  1340 + }
  1341 + }
  1342 + })
  1343 + .catch((error) => {
  1344 + this.showLoader = false;
  1345 + });
  1346 + },
1411 1347 },
1412 1348  
1413 1349 mounted() {
... ... @@ -1435,13 +1371,18 @@ export default {
1435 1371 } else if (this.$store.state.role === "LIBRARIAN") {
1436 1372 // this.token = this.$store.state.token;
1437 1373 } else if (this.$store.state.role === "PARENT") {
1438   - // this.token = this.$store.state.token;
1439   - // await this.getparentStudents();
1440   - this.studentsData = this.$store.getters.GET_STUDENTS_DATA;
1441   - // console.log("students data - ", this.studentsData);
1442 1374 await this.getCourses();
1443 1375 await this.getAnnoucementes();
1444   - this.activeStudent = this.$store.getters.GET_ACTIVE_STUDENT
  1376 + this.studentsData = this.$store.getters.GET_STUDENTS_DATA;
  1377 + this.activeStudent = this.$store.getters.GET_ACTIVE_STUDENT;
  1378 + /* MAKE A LIST OF STUDENTS WITH STATUS TRUE, FOR DISPLAYING STUDENTS DATA AT TOP */
  1379 + for (var i = 0; i < this.studentsData.length; i++) {
  1380 + if (this.studentsData[i].status == true) {
  1381 + this.activeStudentsList.push(this.studentsData[i]);
  1382 + }
  1383 + }
  1384 + console.log("student list - ", this.activeStudentsList);
  1385 + console.log("active - ", this.activeStudent);
1445 1386 }
1446 1387 this.role = this.$store.state.role;
1447 1388  
... ...
src/pages/changeStudents/changeStudents.vue
Diff comments   View file @019880b
... ... @@ -77,6 +77,12 @@ export default {
77 77 methods: {
78 78 change() {
79 79 localStorage.setItem("parentStudentId", this.changeStudent);
  80 + /* Look for active student object */
  81 + for(var i = 0; i < this.studentsData.length; i++){
  82 + if(this.studentsData[i]._id == this.changeStudent){
  83 + this.$store.dispatch("SET_ACTIVE_STUDENT",this.studentsData[i])
  84 + }
  85 + }
80 86 this.$router.replace({ path: "/" });
81 87 },
82 88 getparentStudents() {
... ...