viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit a26ba60ed36b5093386abb1ebf9cc105b069a54b

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

Added event dialog box

Showing 2 changed files with 100 additions and 41 deletions   Show diff stats
src/Services/GetApis.js
Diff comments   View file @a26ba60
... ... @@ -5,6 +5,9 @@ export default {
5 5 return {
6 6 courseData: [],
7 7  
  8 + // dashboard.vue data properties
  9 + particularEvent: {},
  10 +
8 11  
9 12 }
10 13 },
... ... @@ -51,6 +54,9 @@ export default {
51 54 }
52 55 },
53 56  
  57 + /***************************************************************************************************************************** */
  58 +
  59 + // APIS USED IN dashboard.vue
54 60 /* studentMeetingEvents required in dashboard to display list of latest events */
55 61 async studentMeetingEvents(params) {
56 62 try {
... ... @@ -65,6 +71,19 @@ export default {
65 71  
66 72 },
67 73  
  74 + async getParticularMeetingEvent(params) {
  75 + try {
  76 + let response = await this.getMethod("/getParticularMeetingEvent", {
  77 + meetingEventId: params.meetingEventId
  78 + })
  79 + this.particularEvent = response.data.data
  80 + } catch (error) {
  81 + console.log("Error in getParticularMeetingEvent - ", error.message)
  82 + }
  83 + },
  84 +
  85 + /************************************************************************************************************************ */
  86 +
68 87  
69 88 /* APIS USED IN announcement.vue */
70 89 async getAnnoucementesList(params) {
... ...
src/pages/Dashboard/dashboard.vue
Diff comments   View file @a26ba60
... ... @@ -68,6 +68,31 @@
68 68 <v-btn flat text @click="snackbar = false">X</v-btn>
69 69 </v-snackbar>
70 70  
  71 + <!-- DIALOG BOX EVENT DETAILS -->
  72 + <v-dialog v-model="viewEventDetails" max-width="500">
  73 + <v-card flat class="card-style pa-2" dark>
  74 + <!-- TITLE -->
  75 + <v-layout>
  76 + <v-layout>
  77 + <v-flex xs12>
  78 + <label class="title text-xs-center">{{particularEvent.title}}</label>
  79 + <v-icon size="24" class="right" @click="viewEventDetails = false">cancel</v-icon>
  80 + </v-flex>
  81 + </v-layout>
  82 + </v-layout>
  83 +
  84 + <v-card-text>
  85 + <v-list dark class="card-style">
  86 + <v-list-tile>
  87 + <v-list-tile-content>
  88 + <v-list-tile-title>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</v-list-tile-title>
  89 + </v-list-tile-content>
  90 + </v-list-tile>
  91 + </v-list>
  92 + </v-card-text>
  93 + </v-card>
  94 + </v-dialog>
  95 +
71 96 <v-layout wrap row>
72 97 <v-flex xs12 sm12 md9>
73 98 <v-container fluid grid-list-xl>
... ... @@ -384,19 +409,18 @@
384 409 </v-flex>
385 410 <hr />
386 411 <div class="text-xs-center py-3 subheading font-weight-bold">Calender</div>
387   - <vue-event-calendar :events="activityEvents"></vue-event-calendar>
  412 + <vue-event-calendar :events="activityEvents" @day-changed="handleDayChanged($event)"></vue-event-calendar>
388 413 <!-- LATEST ACTIVITY -->
389 414 <v-card class="my-3 elevation-0">
390 415 <v-card-text>
391   - <v-card-title
392   - class="justify-center subheading font-weight-bold"
393   - v-if="role != 'TEACHER'"
394   - >Latest Activity</v-card-title>
395   - <v-card-title
396   - class="justify-center subheading font-weight-bold"
397   - v-if="role == 'TEACHER'"
398   - >Latest Event</v-card-title>
399   - <div v-for="(activity,index) in activityList" :key="index" class="mt-2">
  416 + <v-card-title class="justify-center subheading font-weight-bold">Latest Activity</v-card-title>
  417 + <div
  418 + v-for="(activity,index) in activityList"
  419 + :key="index"
  420 + class="mt-2"
  421 + style="cursor: pointer;"
  422 + @click="seeEventDetails({meetingEventId: activity.meetingEvent._id})"
  423 + >
400 424 <span
401 425 :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
402 426 style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
... ... @@ -477,6 +501,9 @@ export default {
477 501 // calendarData: {},
478 502 // calendar: {},
479 503  
  504 + // DIALOG BOX EVENT DETAILS
  505 + viewEventDetails: false,
  506 +
480 507 // CALENDER
481 508 moment: moment,
482 509 activityEvents: [],
... ... @@ -626,38 +653,18 @@ export default {
626 653 activityList: []
627 654 };
628 655 },
629   - mounted() {
630   - // = this.$store.state.schoolToken;
631   - // console.log("this.$store.state.role", this.token);
632   - if (this.$store.state.role === "ADMIN") {
633   - this.token = this.$store.state.token;
634   - } else if (this.$store.state.schoolRole === "SUPERADMIN") {
635   - this.token = this.$store.state.schoolToken;
636   - } else if (this.$store.state.role === "TEACHER") {
637   - this.token = this.$store.state.token;
638   - } else if (this.$store.state.role === "ACCOUNTANT") {
639   - this.token = this.$store.state.token;
640   - } else if (this.$store.state.role === "LIBRARIAN") {
641   - this.token = this.$store.state.token;
642   - } else if (this.$store.state.role === "PARENT") {
643   - this.token = this.$store.state.token;
644   - }
645   - this.role = this.$store.state.role;
646   - // console.log("role", this.$store.state.schoolRole,"tt",this.$store.state.schoolToken);
647   - // this.getData();
648   - this.getStudents();
649   - this.getTeachers();
650   - this.getParents();
651   - this.getClasses();
652   - this.getNoticeData();
653   - this.getUserData();
654   - this.getFeesAndCollectionsData();
655   - this.getExpensesData();
656   - this.getparentStudents();
657   - this.getMeetingEventes();
658   - // this.getUsersList();
659   - },
660 656 methods: {
  657 + async handleDayChanged(e) {
  658 + console.log("date-changed - ", e);
  659 + await this.getParticularMeetingEvent({
  660 + meetingEventId: e.events[0]._id
  661 + });
  662 + this.viewEventDetails = true;
  663 + },
  664 + async seeEventDetails(params) {
  665 + await this.getParticularMeetingEvent(params);
  666 + this.viewEventDetails = true;
  667 + },
661 668 async routeToCourseDetails(courseId) {
662 669 /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/
663 670 let response = await this.getParticularCourseDetail(courseId);
... ... @@ -947,6 +954,38 @@ export default {
947 954 }
948 955 }
949 956 },
  957 +
  958 + mounted() {
  959 + // = this.$store.state.schoolToken;
  960 + // console.log("this.$store.state.role", this.token);
  961 + if (this.$store.state.role === "ADMIN") {
  962 + this.token = this.$store.state.token;
  963 + } else if (this.$store.state.schoolRole === "SUPERADMIN") {
  964 + this.token = this.$store.state.schoolToken;
  965 + } else if (this.$store.state.role === "TEACHER") {
  966 + this.token = this.$store.state.token;
  967 + } else if (this.$store.state.role === "ACCOUNTANT") {
  968 + this.token = this.$store.state.token;
  969 + } else if (this.$store.state.role === "LIBRARIAN") {
  970 + this.token = this.$store.state.token;
  971 + } else if (this.$store.state.role === "PARENT") {
  972 + this.token = this.$store.state.token;
  973 + }
  974 + this.role = this.$store.state.role;
  975 + // console.log("role", this.$store.state.schoolRole,"tt",this.$store.state.schoolToken);
  976 + // this.getData();
  977 + this.getStudents();
  978 + this.getTeachers();
  979 + this.getParents();
  980 + this.getClasses();
  981 + this.getNoticeData();
  982 + this.getUserData();
  983 + this.getFeesAndCollectionsData();
  984 + this.getExpensesData();
  985 + this.getparentStudents();
  986 + // this.getUsersList();
  987 + },
  988 +
950 989 async created() {
951 990 /* get Latest events list */
952 991 if (this.$store.state.role != "TEACHER") {
... ... @@ -962,6 +1001,7 @@ export default {
962 1001 "YYYY/MM/DD"
963 1002 );
964 1003 obj.title = this.activityList[i].meetingEvent.title;
  1004 + obj._id = this.activityList[i].meetingEvent._id;
965 1005 this.activityEvents.push(obj);
966 1006 }
967 1007 }
... ...