viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit d802ef8378dcf21b47ed7c3d5991a5ed7cd1fea3

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

added school events along side notice for admin

Showing 3 changed files with 297 additions and 102 deletions   Show diff stats
src/Services/AllApiCalls.js
Diff comments   View file @d802ef8
... ... @@ -15,6 +15,8 @@ export default {
15 15 pdfFileName: "",
16 16 courseData: [],
17 17 teachersList: [],
  18 + schoolEvents: [],
  19 + particularEvent: {},
18 20  
19 21 }
20 22 },
... ...
src/Services/GetApis.js
Diff comments   View file @d802ef8
... ... @@ -3,10 +3,10 @@ export default {
3 3 mixins: [ApiCalls],
4 4 data() {
5 5 return {
6   - courseData: [],
  6 + // courseData: [],
7 7  
8 8 // dashboard.vue data properties
9   - particularEvent: {},
  9 +
10 10  
11 11  
12 12 }
... ... @@ -81,12 +81,38 @@ export default {
81 81 let response = await this.getMethod("/getParticularMeetingEvent", {
82 82 meetingEventId: params.meetingEventId
83 83 })
84   - this.particularEvent = response.data.data
  84 + // this.particularEvent.push = response.data.data
  85 + return response
  86 + } catch (error) {
  87 + console.log("Error in getParticularMeetingEvent - ", error.message)
  88 + }
  89 + },
  90 +
  91 + async getParticularSchoolEvent(params) {
  92 + try {
  93 + let response = await this.getMethod("/getParticularSchoolEvent", {
  94 + schoolEventId: params.schoolEventId
  95 + })
  96 + // this.particularEvent = response.data.data
  97 + return response
85 98 } catch (error) {
86 99 console.log("Error in getParticularMeetingEvent - ", error.message)
87 100 }
88 101 },
89 102  
  103 + async getSchoolEventsList(params) {
  104 + try {
  105 + let response = await this.getMethod("/getSchoolEventsList")
  106 + this.schoolEvents = response.data.data;
  107 + console.log("school events - ", this.schoolEvents)
  108 + return response
  109 + } catch (error) {
  110 + console.log("Error in getParticularMeetingEvent - ", error.message)
  111 + }
  112 +
  113 + },
  114 +
  115 +
90 116 /************************************************************************************************************************ */
91 117  
92 118 /* APIS USED IN LiveOnlineClass.vue */
... ...
src/pages/Dashboard/dashboard.vue
Diff comments   View file @d802ef8
... ... @@ -69,50 +69,115 @@
69 69 </v-snackbar>
70 70  
71 71 <!-- DIALOG BOX EVENT DETAILS -->
72   - <v-dialog v-model="viewEventDetails" max-width="500" persistent>
73   - <v-card flat class="card-style pa-2" dark>
74   - <!-- TITLE -->
  72 + <v-dialog v-model="viewEventDetails" max-width="500" persistent lazy>
  73 + <v-card flat class="card-style elevation-0" height="600" dark>
75 74 <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>
  75 + <v-flex xs12>
  76 + <v-icon
  77 + size="24"
  78 + class="right"
  79 + @click="active=0;displayEventsList=[];dialogSchoolEvents = [];dialogMeetingEvents=[];viewEventDetails = false"
  80 + >cancel</v-icon>
  81 + </v-flex>
82 82 </v-layout>
  83 + <v-tabs v-model="active" color="#7f62f8" dark v-if="displayEventsList.length == 0">
  84 + <v-tabs-slider color="yellow"></v-tabs-slider>
  85 + <v-tab v-for="(tab,index) in tabs" :key="index">
  86 + <div class="subheading py-1">{{ tab.name }}</div>
  87 + </v-tab>
  88 + <!-- <v-tab href="#schoolTab" v-if="dialogSchoolEvents.length > 0">School Events</v-tab>
  89 + <v-tab href="#meetingTab" v-if="dialogMeetingEvents.length > 0">Meeting Events</v-tab>-->
83 90  
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-tile>
92   - <v-list-tile-content>
93   - <v-list-tile-title>Start Time : {{particularEvent.startTime}}</v-list-tile-title>
94   - </v-list-tile-content>
95   - </v-list-tile>
96   - <v-list-tile>
97   - <v-list-tile-content>
98   - <v-list-tile-title>Duration : {{particularEvent.duration}}</v-list-tile-title>
99   - </v-list-tile-content>
100   - </v-list-tile>
101   - <v-list-tile>
102   - <v-list-tile-content>
103   - <v-list-tile-title>
  91 + <!-- SCHOOL EVENTS-->
  92 + <v-tab-item>
  93 + <v-card flat class="card-style pa-2" dark v-if="dialogSchoolEvents.length > 0">
  94 + <v-container fluid>
  95 + <v-divider class="white"></v-divider>
  96 + <v-card
  97 + v-for="(particularEvent,index) in dialogSchoolEvents"
  98 + :key="index"
  99 + class="mt-3 pa-2 card-style white--text elevation-0"
  100 + >
  101 + <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>
  106 + <div v-if="particularEvent.link">
  107 + Link :
  108 + <a :href="particularEvent.link">{{particularEvent.link}}</a>
  109 + </div>
  110 + <div
  111 + v-if="particularEvent.description"
  112 + >Description : {{particularEvent.description}}</div>
  113 + </div>
  114 + <v-divider class="white mt-3"></v-divider>
  115 + </v-card>
  116 + </v-container>
  117 + </v-card>
  118 + </v-tab-item>
  119 +
  120 + <!-- MEETING EVENTS -->
  121 + <v-tab-item>
  122 + <v-card v-if="dialogMeetingEvents.length > 0" flat class="card-style pa-2" dark>
  123 + <v-container fluid>
  124 + <v-divider class="white"></v-divider>
  125 + <v-card
  126 + v-for="(particularEvent,index) in dialogMeetingEvents"
  127 + :key="index"
  128 + class="mt-3 pa-2 card-style white--text elevation-0"
  129 + >
  130 + <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>
  135 + <div v-if="particularEvent.link">
  136 + Link :
  137 + <a :href="particularEvent.link">{{particularEvent.link}}</a>
  138 + </div>
  139 + <div
  140 + v-if="particularEvent.description"
  141 + >Description : {{particularEvent.description}}</div>
  142 + </div>
  143 + <v-divider class="white mt-3"></v-divider>
  144 + </v-card>
  145 + </v-container>
  146 + </v-card>
  147 + </v-tab-item>
  148 + </v-tabs>
  149 +
  150 + <!-- IF NO MULTIPLE EVENTS ON SAME DATE -->
  151 + <v-card flat class="card-style pa-2 elevation-0" dark v-else>
  152 + <v-container fluid>
  153 + <v-divider class="white"></v-divider>
  154 + <v-card
  155 + v-for="(particularEvent,index) in displayEventsList"
  156 + :key="index"
  157 + class="mt-3 pa-2 card-style white--text elevation-0"
  158 + >
  159 + <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>
  164 + <div v-if="particularEvent.link">
104 165 Link :
105 166 <a :href="particularEvent.link">{{particularEvent.link}}</a>
106   - </v-list-tile-title>
107   - </v-list-tile-content>
108   - </v-list-tile>
109   - </v-list>
110   - </v-card-text>
  167 + </div>
  168 + <div
  169 + v-if="particularEvent.description"
  170 + >Description : {{particularEvent.description}}</div>
  171 + </div>
  172 + <v-divider class="white mt-3"></v-divider>
  173 + </v-card>
  174 + </v-container>
  175 + </v-card>
111 176 </v-card>
112 177 </v-dialog>
113 178  
114 179 <v-layout wrap row>
115   - <v-flex xs12 sm12 md9>
  180 + <v-flex xs12 sm12 md8>
116 181 <v-container fluid grid-list-xl>
117 182 <!-- ***** Total Students ***** -->
118 183 <v-layout wrap class v-if="$store.state.role != 'PARENT' ">
... ... @@ -228,58 +293,95 @@
228 293 </v-layout>
229 294  
230 295 <!-- FOR ADMIN ROLE -->
231   - <v-card class="mt-2 card" v-if="role == 'ADMIN'">
232   - <!-- <full-calendar
233   - ref="calendar"
234   - defaultView="month"
235   - droppable="false"
236   - :events="events"
237   - :config="config"
238   - ></full-calendar>-->
239   - <h4 class="pa-3">
240   - <b>Notice</b>
241   - </h4>
  296 + <v-layout row wrap>
  297 + <!-- NOTICE -->
  298 + <v-flex xs12 sm6>
  299 + <v-card class="card" v-if="role == 'ADMIN'">
  300 + <v-container>
  301 + <v-card-title class="justify-center subheading font-weight-bold">Notice</v-card-title>
242 302  
243   - <v-data-table
244   - :items="noticeData"
245   - class="elevation-0"
246   - flat
247   - hide-actions
248   - hide-headers
249   - style="border-spacing: 0 !important;"
250   - >
251   - <template
252   - slot="items"
253   - slot-scope="props"
254   - v-if="props.index < 5"
255   - style="border-spacing: 0 !important;"
256   - >
257   - <tr class="td-notice">
258   - <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
259   - <td>
260   - <span class="grey--text caption">{{ date(props.item.created) }}</span>
261   - <br />
262   - <span class="body-2">{{ props.item.title}}</span>
263   - </td>
264   - <td class="grey--text mt-2">{{ props.item.description}}</td>
  303 + <v-data-table
  304 + :items="noticeData"
  305 + class="elevation-0"
  306 + flat
  307 + hide-actions
  308 + hide-headers
  309 + style="border-spacing: 0 !important;"
  310 + >
  311 + <template
  312 + slot="items"
  313 + slot-scope="props"
  314 + v-if="props.index < 5"
  315 + style="border-spacing: 0 !important;"
  316 + >
  317 + <tr class="td-notice">
  318 + <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
  319 + <td>
  320 + <span class="grey--text caption">{{ date(props.item.created) }}</span>
  321 + <br />
  322 + <span class="body-2">{{ props.item.title}}</span>
  323 + </td>
  324 + <!-- <td class="grey--text mt-2" >{{ props.item.description}}</td> -->
265 325  
266   - <td class="text-xs-center">
267   - <span>
268   - <v-tooltip top>
269   - <img
270   - slot="activator"
271   - style="cursor:pointer; width:25px; height:25px; "
272   - @click="profile"
273   - src="/static/icon/view.png"
274   - />
275   - <span>View</span>
276   - </v-tooltip>
277   - </span>
278   - </td>
279   - </tr>
280   - </template>
281   - </v-data-table>
282   - </v-card>
  326 + <td class="text-xs-center">
  327 + <span>
  328 + <v-tooltip top>
  329 + <img
  330 + slot="activator"
  331 + style="cursor:pointer; width:25px; height:25px; "
  332 + @click="profile"
  333 + src="/static/icon/view.png"
  334 + />
  335 + <span>View</span>
  336 + </v-tooltip>
  337 + </span>
  338 + </td>
  339 + </tr>
  340 + </template>
  341 + </v-data-table>
  342 + </v-container>
  343 + </v-card>
  344 + </v-flex>
  345 +
  346 + <!-- SCHOOL EVENTS -->
  347 + <v-flex xs12 sm6>
  348 + <v-card class="card">
  349 + <v-container>
  350 + <v-card-title class="justify-center subheading font-weight-bold">School Events</v-card-title>
  351 + <div
  352 + v-for="(schoolEvent,index) in schoolEvents"
  353 + :key="schoolEvent.title"
  354 + class="mt-2"
  355 + style="cursor: pointer;"
  356 + @click="seeEventDetails(schoolEvent,'schoolEvent')"
  357 + >
  358 + <!-- color dot-->
  359 + <span
  360 + :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
  361 + style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
  362 + ></span>
  363 + <div style="display: inline-block;" class="ml-2">
  364 + <div>
  365 + <!-- date of event -->
  366 + <div
  367 + class="grey--text lighten-1 caption"
  368 + v-if="schoolEvent.dateOfEvent"
  369 + >{{moment(schoolEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
  370 + <!-- event title-->
  371 + <div class="body-1" v-if="schoolEvent.title">{{schoolEvent.title}}</div>
  372 + </div>
  373 + </div>
  374 + </div>
  375 + <div v-if="schoolEvents.length == 0">
  376 + <p class="text-center title grey lighten-4 error--text">No Data Found!</p>
  377 + </div>
  378 + </v-container>
  379 + </v-card>
  380 + </v-flex>
  381 + </v-layout>
  382 +
  383 + <!-- SCHOOL EVENTS -->
  384 + <div></div>
283 385  
284 386 <!-- FOR TEACHER ROLE -->
285 387 <v-card class="mt-2 card" v-if="role == 'TEACHER'">
... ... @@ -331,7 +433,7 @@
331 433  
332 434 <v-flex xs6 sm6 md6>
333 435 <v-card-text>
334   - <v-card-title class="justify-center subheading font-weight-bold">Latest Events</v-card-title>
  436 + <v-card-title class="justify-center subheading font-weight-bold">Meeting Events</v-card-title>
335 437 <div
336 438 v-for="(activity,index) in activityList"
337 439 :key="index"
... ... @@ -497,7 +599,7 @@
497 599 </v-flex>
498 600 <v-spacer></v-spacer>
499 601 <!-- SIDE BAR -->
500   - <v-flex xs12 sm12 md3>
  602 + <v-flex xs12 sm12 md4>
501 603 <v-card height="100%" class="elevation-0 mt-3 profileDasboard">
502 604 <v-card-text class="px-2">
503 605 <h4 class="text-xs-center py-3">
... ... @@ -540,9 +642,11 @@
540 642 <vue-event-calendar :events="activityEvents" @day-changed="handleDayChanged($event)"></vue-event-calendar>
541 643  
542 644 <!-- LATEST EVENTS -->
  645 + <!-- IF ROLE IS ADMIN -->
543 646 <v-card class="my-3 elevation-0" v-if="role != 'TEACHER'">
544 647 <v-card-text v-if="$store.state.role === 'ADMIN' ">
545   - <v-card-title class="justify-center subheading font-weight-bold">Latest Events</v-card-title>
  648 + <!-- MEETING EVENTS -->
  649 + <v-card-title class="justify-center subheading font-weight-bold">Meeting Events</v-card-title>
546 650 <div
547 651 v-for="(activity,index) in activityList"
548 652 :key="index"
... ... @@ -560,7 +664,7 @@
560 664 class="grey--text lighten-1 caption"
561 665 v-if="activity.dateOfEvent"
562 666 >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div>
563   - <div class="body-2" v-if="activity.title">{{activity.title}}</div>
  667 + <div class="body-1" v-if="activity.title">{{activity.title}}</div>
564 668 </div>
565 669 </div>
566 670 </div>
... ... @@ -568,6 +672,8 @@
568 672 <p class="text-center title grey lighten-4 error--text">No Data Found!</p>
569 673 </div>
570 674 </v-card-text>
  675 +
  676 + <!-- ROLE IS NOT ADMIN -->
571 677 <v-card-text v-if="$store.state.role != 'ADMIN'">
572 678 <v-card-title class="justify-center subheading font-weight-bold">Latest Events</v-card-title>
573 679 <div
... ... @@ -666,7 +772,16 @@ export default {
666 772 // calendar: {},
667 773  
668 774 // DIALOG BOX EVENT DETAILS
  775 + tabs: [
  776 + { name: "School Events", icon: "mdi-account" },
  777 + { name: "Meeting Events", icon: "mdi-account-outline" },
  778 + ],
669 779 viewEventDetails: false,
  780 + active: 0,
  781 + particularEvent: [],
  782 + displayEventsList: [],
  783 + dialogSchoolEvents: [],
  784 + dialogMeetingEvents: [],
670 785  
671 786 // CALENDER
672 787 moment: moment,
... ... @@ -823,26 +938,60 @@ export default {
823 938 console.log(" test - ", e);
824 939 },
825 940 async handleDayChanged(e) {
826   - await this.getParticularMeetingEvent({
827   - meetingEventId: e.events[0]._id,
828   - });
  941 + console.log("event calender - ", e);
  942 + /*the list of events that will be used in dialog box to display events */
  943 + // this.displayEventsList = [];
  944 + this.dialogMeetingEvents = [];
  945 + this.dialogSchoolEvents = [];
  946 +
  947 + for (var i = 0; i < e.events.length; i++) {
  948 + if (e.events[i].eventType == "meetingEvent") {
  949 + let meetingEventResponse = await this.getParticularMeetingEvent({
  950 + meetingEventId: e.events[i]._id,
  951 + });
  952 + this.dialogMeetingEvents.push(meetingEventResponse.data.data);
  953 + }
  954 + if (e.events[i].eventType == "schoolEvent") {
  955 + let schoolEventResponse = await this.getParticularSchoolEvent({
  956 + schoolEventId: e.events[i]._id,
  957 + });
  958 + this.dialogSchoolEvents.push(schoolEventResponse.data.data);
  959 + }
  960 + }
  961 +
829 962 this.viewEventDetails = true;
830 963 },
831   - async seeEventDetails(activity) {
  964 + async seeEventDetails(activity, message) {
832 965 if (this.$store.state.role === "TEACHER") {
833   - await this.getParticularMeetingEvent({ meetingEventId: activity._id });
  966 + let response = await this.getParticularMeetingEvent({
  967 + meetingEventId: activity._id,
  968 + });
  969 + this.displayEventsList = [];
  970 + this.displayEventsList.push(response.data.data);
834 971 this.viewEventDetails = true;
835 972 }
836 973 if (this.$store.state.role === "PARENT") {
837   - await this.getParticularMeetingEvent({
  974 + let response = await this.getParticularMeetingEvent({
838 975 meetingEventId: activity.meetingEvent._id,
839 976 });
  977 + this.displayEventsList = [];
  978 + this.displayEventsList.push(response.data.data);
840 979 this.viewEventDetails = true;
841 980 }
842 981 if (this.$store.state.role === "ADMIN") {
843   - await this.getParticularMeetingEvent({
844   - meetingEventId: activity._id,
845   - });
  982 + if (message == "schoolEvent") {
  983 + let response = await this.getParticularSchoolEvent({
  984 + schoolEventId: activity._id,
  985 + });
  986 + this.displayEventsList = [];
  987 + this.displayEventsList.push(response.data.data);
  988 + } else {
  989 + let response = await this.getParticularMeetingEvent({
  990 + meetingEventId: activity._id,
  991 + });
  992 + this.displayEventsList = [];
  993 + this.displayEventsList.push(response.data.data);
  994 + }
846 995 this.viewEventDetails = true;
847 996 }
848 997 },
... ... @@ -1070,7 +1219,7 @@ export default {
1070 1219 this.activityList = activityList;
1071 1220 this.showLoader = false;
1072 1221  
1073   - /* set activityEvents array to highlight event dates in calender */
  1222 + /* set meetingEvents array to highlight event dates in calender */
1074 1223 for (var i = 0; i < this.activityList.length; i++) {
1075 1224 let obj = {};
1076 1225 obj.date = moment(this.activityList[i].dateOfEvent).format(
... ... @@ -1078,6 +1227,7 @@ export default {
1078 1227 );
1079 1228 obj.title = this.activityList[i].title;
1080 1229 obj._id = this.activityList[i]._id;
  1230 + obj.eventType = "meetingEvent";
1081 1231 this.activityEvents.push(obj);
1082 1232 }
1083 1233 })
... ... @@ -1085,6 +1235,20 @@ export default {
1085 1235 this.showLoader = false;
1086 1236 });
1087 1237 }
  1238 + if (this.role === "ADMIN") {
  1239 + await this.getSchoolEventsList();
  1240 + /* set schoolEvents array to highlight event dates in calender */
  1241 + for (var i = 0; i < this.schoolEvents.length; i++) {
  1242 + let obj = {};
  1243 + obj.date = moment(this.schoolEvents[i].dateOfEvent).format(
  1244 + "YYYY/MM/DD"
  1245 + );
  1246 + obj.title = this.schoolEvents[i].title;
  1247 + obj._id = this.schoolEvents[i]._id;
  1248 + obj.eventType = "schoolEvent";
  1249 + this.activityEvents.push(obj);
  1250 + }
  1251 + }
1088 1252 },
1089 1253 },
1090 1254  
... ... @@ -1155,6 +1319,9 @@ export default {
1155 1319  
1156 1320 <style scoped>
1157 1321 @import "fullcalendar/dist/fullcalendar.css";
  1322 +.wrap-text {
  1323 + -webkit-line-clamp: unset !important;
  1324 +}
1158 1325  
1159 1326 a {
1160 1327 color: white;
... ...