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
1 import GetApis from "@/Services/GetApis.js"; 1 import GetApis from "@/Services/GetApis.js";
2 import PutApis from "@/Services/PutApis.js"; 2 import PutApis from "@/Services/PutApis.js";
3 3
4 export default { 4 export default {
5 mixins: [GetApis, PutApis], 5 mixins: [GetApis, PutApis],
6 data() { 6 data() {
7 return { 7 return {
8 // UploadPdf.vue 8 // UploadPdf.vue
9 emptyPdf: '', 9 emptyPdf: '',
10 // UploadFiles.vue 10 // UploadFiles.vue
11 trigger: '', 11 trigger: '',
12 pptFile: "", 12 pptFile: "",
13 pptFileName: "", 13 pptFileName: "",
14 pdfFile: "", 14 pdfFile: "",
15 pdfFileName: "", 15 pdfFileName: "",
16 courseData: [], 16 courseData: [],
17 teachersList: [], 17 teachersList: [],
18 schoolEvents: [],
19 particularEvent: {},
18 20
19 } 21 }
20 }, 22 },
21 methods: { 23 methods: {
22 /************************** METHODS USED FOR COMMON FILES *********************/ 24 /************************** METHODS USED FOR COMMON FILES *********************/
23 /* METHODS USED FOR UploadPdf.vue */ 25 /* METHODS USED FOR UploadPdf.vue */
24 pdfFileSelected(e, message) { 26 pdfFileSelected(e, message) {
25 27
26 this.pdfFile = e.fileInBase64; 28 this.pdfFile = e.fileInBase64;
27 this.pdfFileName = e.selectedFileName; 29 this.pdfFileName = e.selectedFileName;
28 this.emptyPdf = e.emptyPdf; 30 this.emptyPdf = e.emptyPdf;
29 31
30 }, 32 },
31 33
32 /* METHODS USED FOR UploadFiles.vue */ 34 /* METHODS USED FOR UploadFiles.vue */
33 fileSelected(e, message) { 35 fileSelected(e, message) {
34 if (message == "uploadPPT") { 36 if (message == "uploadPPT") {
35 this.pptFile = e.fileInBase64; 37 this.pptFile = e.fileInBase64;
36 this.pptFileName = e.selectedFileName; 38 this.pptFileName = e.selectedFileName;
37 this.trigger = e.trigger; 39 this.trigger = e.trigger;
38 } 40 }
39 if (message == "uploadPDF") { 41 if (message == "uploadPDF") {
40 this.pdfFile = e.fileInBase64; 42 this.pdfFile = e.fileInBase64;
41 this.pdfFileName = e.selectedFileName; 43 this.pdfFileName = e.selectedFileName;
42 this.emptyPdf = e.trigger; 44 this.emptyPdf = e.trigger;
43 } 45 }
44 }, 46 },
45 47
46 48
47 }, 49 },
48 } 50 }
src/Services/GetApis.js
Diff comments   View file @d802ef8
1 import ApiCalls from "@/Services/ApiCalls.js"; 1 import ApiCalls from "@/Services/ApiCalls.js";
2 export default { 2 export default {
3 mixins: [ApiCalls], 3 mixins: [ApiCalls],
4 data() { 4 data() {
5 return { 5 return {
6 courseData: [], 6 // courseData: [],
7 7
8 // dashboard.vue data properties 8 // dashboard.vue data properties
9 particularEvent: {}, 9
10 10
11 11
12 } 12 }
13 }, 13 },
14 methods: { 14 methods: {
15 /* getParticularCourseDetail */ 15 /* getParticularCourseDetail */
16 async getParticularCourseDetail(courseId) { 16 async getParticularCourseDetail(courseId) {
17 17
18 try { 18 try {
19 let response = await this.getMethod("/getParticularCourseDetail", { 19 let response = await this.getMethod("/getParticularCourseDetail", {
20 courseId: courseId 20 courseId: courseId
21 }) 21 })
22 return response 22 return response
23 } catch (error) { 23 } catch (error) {
24 console.log("error in getParticularCourseDetail - ", error.message) 24 console.log("error in getParticularCourseDetail - ", error.message)
25 } 25 }
26 }, 26 },
27 27
28 /* getStudentCourses - to get courseData */ 28 /* getStudentCourses - to get courseData */
29 async getStudentCourses(params) { 29 async getStudentCourses(params) {
30 try { 30 try {
31 let response = await this.getMethod("/getStudentCourses", { 31 let response = await this.getMethod("/getStudentCourses", {
32 classId: params.classId, 32 classId: params.classId,
33 studentId: params.studentId 33 studentId: params.studentId
34 }) 34 })
35 this.courseData = response.data.data; 35 this.courseData = response.data.data;
36 } catch (error) { 36 } catch (error) {
37 console.log("error in getStudentCourses - ", error.message) 37 console.log("error in getStudentCourses - ", error.message)
38 } 38 }
39 }, 39 },
40 40
41 /* getCourseDiscussionesList - used in courseDiscussionForum.vue */ 41 /* getCourseDiscussionesList - used in courseDiscussionForum.vue */
42 async getCourseDiscussionesList(params) { 42 async getCourseDiscussionesList(params) {
43 try { 43 try {
44 let response = await this.getMethod("/getCourseDiscussionesList", { 44 let response = await this.getMethod("/getCourseDiscussionesList", {
45 courseId: params.courseId, 45 courseId: params.courseId,
46 classId: params.classId, 46 classId: params.classId,
47 }) 47 })
48 this.courseDiscussionItems = response.data.data 48 this.courseDiscussionItems = response.data.data
49 // return response 49 // return response
50 console.log("response of getCourseDiscussionesList - ", response) 50 console.log("response of getCourseDiscussionesList - ", response)
51 } catch (error) { 51 } catch (error) {
52 console.log("error in getCourseDiscussionesList - ", error.message) 52 console.log("error in getCourseDiscussionesList - ", error.message)
53 } 53 }
54 }, 54 },
55 55
56 56
57 57
58 58
59 59
60 60
61 61
62 /***************************************************************************************************************************** */ 62 /***************************************************************************************************************************** */
63 63
64 // APIS USED IN dashboard.vue 64 // APIS USED IN dashboard.vue
65 /* studentMeetingEvents required in dashboard to display list of latest events */ 65 /* studentMeetingEvents required in dashboard to display list of latest events */
66 async studentMeetingEvents(params) { 66 async studentMeetingEvents(params) {
67 try { 67 try {
68 let response = await this.getMethod("/studentMeetingEvents", { 68 let response = await this.getMethod("/studentMeetingEvents", {
69 studentId: params.studentId 69 studentId: params.studentId
70 }) 70 })
71 console.log("response of studentMeetingEvents - ", response); 71 console.log("response of studentMeetingEvents - ", response);
72 return response 72 return response
73 } catch (error) { 73 } catch (error) {
74 console.log("error in studentMeetingEvents - ", error.message) 74 console.log("error in studentMeetingEvents - ", error.message)
75 } 75 }
76 76
77 }, 77 },
78 78
79 async getParticularMeetingEvent(params) { 79 async getParticularMeetingEvent(params) {
80 try { 80 try {
81 let response = await this.getMethod("/getParticularMeetingEvent", { 81 let response = await this.getMethod("/getParticularMeetingEvent", {
82 meetingEventId: params.meetingEventId 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 } catch (error) { 98 } catch (error) {
86 console.log("Error in getParticularMeetingEvent - ", error.message) 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 /* APIS USED IN LiveOnlineClass.vue */ 118 /* APIS USED IN LiveOnlineClass.vue */
93 async getLiveClassesesList(params) { 119 async getLiveClassesesList(params) {
94 try { 120 try {
95 let response = await this.getMethod("/getLiveClassesesList", { 121 let response = await this.getMethod("/getLiveClassesesList", {
96 classId: params.classId, 122 classId: params.classId,
97 courseId: params.courseId, 123 courseId: params.courseId,
98 chapterId: params.chapterId, 124 chapterId: params.chapterId,
99 }) 125 })
100 return response 126 return response
101 } catch (error) { 127 } catch (error) {
102 console.log(" error in getLiveClassesesList - ", error.message) 128 console.log(" error in getLiveClassesesList - ", error.message)
103 } 129 }
104 }, 130 },
105 131
106 132
107 133
108 /*************************************************************************************************************************** */ 134 /*************************************************************************************************************************** */
109 135
110 136
111 /* APIS USED IN announcement.vue */ 137 /* APIS USED IN announcement.vue */
112 async getAnnoucementesList(params) { 138 async getAnnoucementesList(params) {
113 try { 139 try {
114 let response = await this.getMethod("/getAnnoucementesList", { 140 let response = await this.getMethod("/getAnnoucementesList", {
115 courseId: params.courseId 141 courseId: params.courseId
116 }) 142 })
117 return response; 143 return response;
118 } catch (error) { 144 } catch (error) {
119 console.log("Error in getAnnoucementesList - ", error.message) 145 console.log("Error in getAnnoucementesList - ", error.message)
120 } 146 }
121 }, 147 },
122 148
123 /***********************************************************************************************/ 149 /***********************************************************************************************/
124 150
125 /* APIS USED IN AssignTeachers.vue */ 151 /* APIS USED IN AssignTeachers.vue */
126 async getCourseesList(params) { 152 async getCourseesList(params) {
127 try { 153 try {
128 let response = await this.getMethod("/getCourseesList", { 154 let response = await this.getMethod("/getCourseesList", {
129 classId: params.classId 155 classId: params.classId
130 }) 156 })
131 this.courseData = response.data.data; 157 this.courseData = response.data.data;
132 return response; 158 return response;
133 } catch (error) { 159 } catch (error) {
134 console.log("Error in getAnnoucementesList - ", error.message) 160 console.log("Error in getAnnoucementesList - ", error.message)
135 } 161 }
136 }, 162 },
137 async getTeachersList(params) { 163 async getTeachersList(params) {
138 try { 164 try {
139 let response = await this.getMethod("/getTeachersList") 165 let response = await this.getMethod("/getTeachersList")
140 this.teachersList = response.data.data; 166 this.teachersList = response.data.data;
141 console.log("teachers list - ", this.teachersList) 167 console.log("teachers list - ", this.teachersList)
142 return response; 168 return response;
143 } catch (error) { 169 } catch (error) {
144 console.log("Error in getAnnoucementesList - ", error.message) 170 console.log("Error in getAnnoucementesList - ", error.message)
145 } 171 }
146 } 172 }
147 173
148 174
149 }, 175 },
150 } 176 }
src/pages/Dashboard/dashboard.vue
Diff comments   View file @d802ef8
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <!-- ****** VIEW PROFIL NOTICE BOARD ****** --> 3 <!-- ****** VIEW PROFIL NOTICE BOARD ****** -->
4 <!-- <v-dialog v-model="dialogNotice" max-width="940px" scrollable> 4 <!-- <v-dialog v-model="dialogNotice" max-width="940px" scrollable>
5 <v-card> 5 <v-card>
6 <v-toolbar color="grey lighten-2" flat> 6 <v-toolbar color="grey lighten-2" flat>
7 <v-spacer></v-spacer> 7 <v-spacer></v-spacer>
8 <v-toolbar-title> 8 <v-toolbar-title>
9 <h3>Notice Board</h3> 9 <h3>Notice Board</h3>
10 </v-toolbar-title> 10 </v-toolbar-title>
11 <v-spacer></v-spacer> 11 <v-spacer></v-spacer>
12 <v-icon @click="closeNotice">close</v-icon> 12 <v-icon @click="closeNotice">close</v-icon>
13 </v-toolbar> 13 </v-toolbar>
14 <v-card-text> 14 <v-card-text>
15 <v-layout> 15 <v-layout>
16 <v-flex align-center justify-center layout text-xs-center class="mt-2"> 16 <v-flex align-center justify-center layout text-xs-center class="mt-2">
17 <img src="/static/icon/user.png" width="70px" v-if="!notice.eventImageUrl" /> 17 <img src="/static/icon/user.png" width="70px" v-if="!notice.eventImageUrl" />
18 <img :src="notice.eventImageUrl" width="280px" v-else-if="notice.eventImageUrl" /> 18 <img :src="notice.eventImageUrl" width="280px" v-else-if="notice.eventImageUrl" />
19 </v-flex> 19 </v-flex>
20 </v-layout> 20 </v-layout>
21 <v-container grid-list-md> 21 <v-container grid-list-md>
22 <v-layout wrap> 22 <v-layout wrap>
23 <v-flex> 23 <v-flex>
24 <v-layout> 24 <v-layout>
25 <v-flex xs5 sm6> 25 <v-flex xs5 sm6>
26 <h5 class="right my-1"> 26 <h5 class="right my-1">
27 <b>Title:</b> 27 <b>Title:</b>
28 </h5> 28 </h5>
29 </v-flex> 29 </v-flex>
30 <v-flex sm6 xs8> 30 <v-flex sm6 xs8>
31 <h5 class="my-1">{{ notice.title }}</h5> 31 <h5 class="my-1">{{ notice.title }}</h5>
32 </v-flex> 32 </v-flex>
33 </v-layout> 33 </v-layout>
34 <v-layout> 34 <v-layout>
35 <v-flex xs5 sm6> 35 <v-flex xs5 sm6>
36 <h5 class="right my-1"> 36 <h5 class="right my-1">
37 <b>Description:</b> 37 <b>Description:</b>
38 </h5> 38 </h5>
39 </v-flex> 39 </v-flex>
40 <v-flex sm6 xs8> 40 <v-flex sm6 xs8>
41 <h5 class="my-1">{{ notice.description }}</h5> 41 <h5 class="my-1">{{ notice.description }}</h5>
42 </v-flex> 42 </v-flex>
43 </v-layout> 43 </v-layout>
44 </v-flex> 44 </v-flex>
45 </v-layout> 45 </v-layout>
46 </v-container> 46 </v-container>
47 </v-card-text> 47 </v-card-text>
48 </v-card> 48 </v-card>
49 </v-dialog>--> 49 </v-dialog>-->
50 <!-- <v-container fluid grid-list-xl> --> 50 <!-- <v-container fluid grid-list-xl> -->
51 51
52 <!-- LOADER --> 52 <!-- LOADER -->
53 <div class="loader" v-if="showLoader"> 53 <div class="loader" v-if="showLoader">
54 <v-progress-circular indeterminate color="white"></v-progress-circular> 54 <v-progress-circular indeterminate color="white"></v-progress-circular>
55 </div> 55 </div>
56 56
57 <!-- SNACKBAR --> 57 <!-- SNACKBAR -->
58 <v-snackbar 58 <v-snackbar
59 :timeout="timeout" 59 :timeout="timeout"
60 :top="y === 'top'" 60 :top="y === 'top'"
61 :right="x === 'right'" 61 :right="x === 'right'"
62 :vertical="mode === 'vertical'" 62 :vertical="mode === 'vertical'"
63 v-model="snackbar" 63 v-model="snackbar"
64 :color="snackbarColor" 64 :color="snackbarColor"
65 > 65 >
66 {{ text }} 66 {{ text }}
67 <v-spacer></v-spacer> 67 <v-spacer></v-spacer>
68 <v-btn flat text @click="snackbar = false">X</v-btn> 68 <v-btn flat text @click="snackbar = false">X</v-btn>
69 </v-snackbar> 69 </v-snackbar>
70 70
71 <!-- DIALOG BOX EVENT DETAILS --> 71 <!-- DIALOG BOX EVENT DETAILS -->
72 <v-dialog v-model="viewEventDetails" max-width="500" persistent> 72 <v-dialog v-model="viewEventDetails" max-width="500" persistent lazy>
73 <v-card flat class="card-style pa-2" dark> 73 <v-card flat class="card-style elevation-0" height="600" dark>
74 <!-- TITLE -->
75 <v-layout> 74 <v-layout>
76 <v-layout> 75 <v-flex xs12>
77 <v-flex xs12> 76 <v-icon
78 <label class="title text-xs-center">{{particularEvent.title}}</label> 77 size="24"
79 <v-icon size="24" class="right" @click="viewEventDetails = false">cancel</v-icon> 78 class="right"
80 </v-flex> 79 @click="active=0;displayEventsList=[];dialogSchoolEvents = [];dialogMeetingEvents=[];viewEventDetails = false"
81 </v-layout> 80 >cancel</v-icon>
81 </v-flex>
82 </v-layout> 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> 91 <!-- SCHOOL EVENTS-->
85 <v-list dark class="card-style"> 92 <v-tab-item>
86 <v-list-tile> 93 <v-card flat class="card-style pa-2" dark v-if="dialogSchoolEvents.length > 0">
87 <v-list-tile-content> 94 <v-container fluid>
88 <v-list-tile-title>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</v-list-tile-title> 95 <v-divider class="white"></v-divider>
89 </v-list-tile-content> 96 <v-card
90 </v-list-tile> 97 v-for="(particularEvent,index) in dialogSchoolEvents"
91 <v-list-tile> 98 :key="index"
92 <v-list-tile-content> 99 class="mt-3 pa-2 card-style white--text elevation-0"
93 <v-list-tile-title>Start Time : {{particularEvent.startTime}}</v-list-tile-title> 100 >
94 </v-list-tile-content> 101 <div>
95 </v-list-tile> 102 <div class="headline">{{particularEvent.title}}</div>
96 <v-list-tile> 103 <div>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
97 <v-list-tile-content> 104 <div v-if="particularEvent.link">Start Time : {{particularEvent.startTime}}</div>
98 <v-list-tile-title>Duration : {{particularEvent.duration}}</v-list-tile-title> 105 <div v-if="particularEvent.link">Duration : {{particularEvent.duration}}</div>
99 </v-list-tile-content> 106 <div v-if="particularEvent.link">
100 </v-list-tile> 107 Link :
101 <v-list-tile> 108 <a :href="particularEvent.link">{{particularEvent.link}}</a>
102 <v-list-tile-content> 109 </div>
103 <v-list-tile-title> 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 Link : 165 Link :
105 <a :href="particularEvent.link">{{particularEvent.link}}</a> 166 <a :href="particularEvent.link">{{particularEvent.link}}</a>
106 </v-list-tile-title> 167 </div>
107 </v-list-tile-content> 168 <div
108 </v-list-tile> 169 v-if="particularEvent.description"
109 </v-list> 170 >Description : {{particularEvent.description}}</div>
110 </v-card-text> 171 </div>
172 <v-divider class="white mt-3"></v-divider>
173 </v-card>
174 </v-container>
175 </v-card>
111 </v-card> 176 </v-card>
112 </v-dialog> 177 </v-dialog>
113 178
114 <v-layout wrap row> 179 <v-layout wrap row>
115 <v-flex xs12 sm12 md9> 180 <v-flex xs12 sm12 md8>
116 <v-container fluid grid-list-xl> 181 <v-container fluid grid-list-xl>
117 <!-- ***** Total Students ***** --> 182 <!-- ***** Total Students ***** -->
118 <v-layout wrap class v-if="$store.state.role != 'PARENT' "> 183 <v-layout wrap class v-if="$store.state.role != 'PARENT' ">
119 <v-flex xs12 sm12 md3> 184 <v-flex xs12 sm12 md3>
120 <router-link :to="{ name:'Students' }"> 185 <router-link :to="{ name:'Students' }">
121 <v-card class="card pink-bgcolor"> 186 <v-card class="card pink-bgcolor">
122 <v-card-title primary-title class="titleCard white--text py-3">Students</v-card-title> 187 <v-card-title primary-title class="titleCard white--text py-3">Students</v-card-title>
123 <img src="/static/icon/student.png" class="ml-2" width="40" alt="icons" /> 188 <img src="/static/icon/student.png" class="ml-2" width="40" alt="icons" />
124 <v-card-title class="headline py-1 white--text">{{ students.length }}</v-card-title> 189 <v-card-title class="headline py-1 white--text">{{ students.length }}</v-card-title>
125 </v-card> 190 </v-card>
126 </router-link> 191 </router-link>
127 </v-flex> 192 </v-flex>
128 <!-- ***** Total Teachers***** --> 193 <!-- ***** Total Teachers***** -->
129 <v-flex xs12 sm12 md3> 194 <v-flex xs12 sm12 md3>
130 <router-link :to="{ name:'Teachers' }"> 195 <router-link :to="{ name:'Teachers' }">
131 <v-card flat class="card elevation-2 firozi-bgcolor"> 196 <v-card flat class="card elevation-2 firozi-bgcolor">
132 <v-card-title primary-title class="titleCard white--text py-3">Teachers</v-card-title> 197 <v-card-title primary-title class="titleCard white--text py-3">Teachers</v-card-title>
133 <img src="/static/icon/teacher.png" class="ml-2" width="40" alt="icons" /> 198 <img src="/static/icon/teacher.png" class="ml-2" width="40" alt="icons" />
134 199
135 <v-card-title class="headline py-1 white--text">{{ teachers.length }}</v-card-title> 200 <v-card-title class="headline py-1 white--text">{{ teachers.length }}</v-card-title>
136 </v-card> 201 </v-card>
137 </router-link> 202 </router-link>
138 </v-flex> 203 </v-flex>
139 <!-- ***** Total Parents ***** --> 204 <!-- ***** Total Parents ***** -->
140 <v-flex xs12 sm12 md3> 205 <v-flex xs12 sm12 md3>
141 <router-link :to="{ name:'Parents' }"> 206 <router-link :to="{ name:'Parents' }">
142 <v-card flat class="card yellow darken-3"> 207 <v-card flat class="card yellow darken-3">
143 <v-card-title primary-title class="titleCard white--text py-3">Parents</v-card-title> 208 <v-card-title primary-title class="titleCard white--text py-3">Parents</v-card-title>
144 <img src="/static/icon/parents.png" class="ml-3" width="40px" alt="icons" /> 209 <img src="/static/icon/parents.png" class="ml-3" width="40px" alt="icons" />
145 <v-card-title class="headline py-1 white--text">{{ parents.length }}</v-card-title> 210 <v-card-title class="headline py-1 white--text">{{ parents.length }}</v-card-title>
146 </v-card> 211 </v-card>
147 </router-link> 212 </router-link>
148 </v-flex> 213 </v-flex>
149 <!-- ***** Total Class***** --> 214 <!-- ***** Total Class***** -->
150 <v-flex xs12 sm12 md3> 215 <v-flex xs12 sm12 md3>
151 <router-link :to="{ name:'Class' }"> 216 <router-link :to="{ name:'Class' }">
152 <v-card flat class="card darkBlue-bgcolor"> 217 <v-card flat class="card darkBlue-bgcolor">
153 <v-card-title primary-title class="titleCard white--text py-3">Class</v-card-title> 218 <v-card-title primary-title class="titleCard white--text py-3">Class</v-card-title>
154 <img src="/static/icon/class.png" width="40" alt="icons" class="ml-2" /> 219 <img src="/static/icon/class.png" width="40" alt="icons" class="ml-2" />
155 <v-card-title class="headline py-1 white--text">{{ classes.length }}</v-card-title> 220 <v-card-title class="headline py-1 white--text">{{ classes.length }}</v-card-title>
156 </v-card> 221 </v-card>
157 </router-link> 222 </router-link>
158 </v-flex> 223 </v-flex>
159 </v-layout> 224 </v-layout>
160 225
161 <p 226 <p
162 v-if="studentsData.length === 0 && role == 'PARENT'" 227 v-if="studentsData.length === 0 && role == 'PARENT'"
163 class="text-center title grey lighten-4 error--text" 228 class="text-center title grey lighten-4 error--text"
164 >You have no student registered with school</p> 229 >You have no student registered with school</p>
165 <!-- ACCOUNT --> 230 <!-- ACCOUNT -->
166 <v-layout v-if="role == 'SUPERADMIN'|| role == 'ADMIN'"> 231 <v-layout v-if="role == 'SUPERADMIN'|| role == 'ADMIN'">
167 <v-flex xs12> 232 <v-flex xs12>
168 <v-card class="card mt-2 account-Card"> 233 <v-card class="card mt-2 account-Card">
169 <h4> 234 <h4>
170 <b>Account</b> 235 <b>Account</b>
171 </h4> 236 </h4>
172 <v-layout wrap> 237 <v-layout wrap>
173 <v-flex xs12 sm12 md3> 238 <v-flex xs12 sm12 md3>
174 <v-list two-line> 239 <v-list two-line>
175 <template> 240 <template>
176 <v-list-tile> 241 <v-list-tile>
177 <v-list-tile-avatar> 242 <v-list-tile-avatar>
178 <v-icon class="account-circle darkBlue-color">panorama_fish_eye</v-icon> 243 <v-icon class="account-circle darkBlue-color">panorama_fish_eye</v-icon>
179 </v-list-tile-avatar> 244 </v-list-tile-avatar>
180 <v-list-tile-content> 245 <v-list-tile-content>
181 <v-list-tile-title class="mt-2"> 246 <v-list-tile-title class="mt-2">
182 <p class="subheading font-color">Fees</p> 247 <p class="subheading font-color">Fees</p>
183 </v-list-tile-title> 248 </v-list-tile-title>
184 <v-list-tile-title>Rs. {{ feeData.totalFees }}</v-list-tile-title> 249 <v-list-tile-title>Rs. {{ feeData.totalFees }}</v-list-tile-title>
185 </v-list-tile-content> 250 </v-list-tile-content>
186 </v-list-tile> 251 </v-list-tile>
187 <v-list-tile> 252 <v-list-tile>
188 <v-list-tile-avatar> 253 <v-list-tile-avatar>
189 <v-icon class="account-circle yellowDark-color">panorama_fish_eye</v-icon> 254 <v-icon class="account-circle yellowDark-color">panorama_fish_eye</v-icon>
190 </v-list-tile-avatar> 255 </v-list-tile-avatar>
191 <v-list-tile-content> 256 <v-list-tile-content>
192 <v-list-tile-title class="mt-2"> 257 <v-list-tile-title class="mt-2">
193 <p class="subheading font-color">Collection</p> 258 <p class="subheading font-color">Collection</p>
194 </v-list-tile-title> 259 </v-list-tile-title>
195 <v-list-tile-title>Rs. {{ feeData.totalCollection }}</v-list-tile-title> 260 <v-list-tile-title>Rs. {{ feeData.totalCollection }}</v-list-tile-title>
196 </v-list-tile-content> 261 </v-list-tile-content>
197 </v-list-tile> 262 </v-list-tile>
198 <v-list-tile> 263 <v-list-tile>
199 <v-list-tile-avatar> 264 <v-list-tile-avatar>
200 <v-icon class="account-circle pink-color">panorama_fish_eye</v-icon> 265 <v-icon class="account-circle pink-color">panorama_fish_eye</v-icon>
201 </v-list-tile-avatar> 266 </v-list-tile-avatar>
202 <v-list-tile-content> 267 <v-list-tile-content>
203 <v-list-tile-title class="mt-2"> 268 <v-list-tile-title class="mt-2">
204 <p class="subheading font-color">Expences</p> 269 <p class="subheading font-color">Expences</p>
205 </v-list-tile-title> 270 </v-list-tile-title>
206 <v-list-tile-title>Rs. {{ expenseData.sum }}</v-list-tile-title> 271 <v-list-tile-title>Rs. {{ expenseData.sum }}</v-list-tile-title>
207 </v-list-tile-content> 272 </v-list-tile-content>
208 </v-list-tile> 273 </v-list-tile>
209 </template> 274 </template>
210 </v-list> 275 </v-list>
211 </v-flex> 276 </v-flex>
212 <v-flex xs12 sm12 md9 lg9> 277 <v-flex xs12 sm12 md9 lg9>
213 <div id="chart"> 278 <div id="chart">
214 <div v-if="showChart"> 279 <div v-if="showChart">
215 <apexchart 280 <apexchart
216 type="bar" 281 type="bar"
217 height="250" 282 height="250"
218 style="max-width: 800px !important" 283 style="max-width: 800px !important"
219 :options="chartOptions" 284 :options="chartOptions"
220 :series="series" 285 :series="series"
221 ></apexchart> 286 ></apexchart>
222 </div> 287 </div>
223 </div> 288 </div>
224 </v-flex> 289 </v-flex>
225 </v-layout> 290 </v-layout>
226 </v-card> 291 </v-card>
227 </v-flex> 292 </v-flex>
228 </v-layout> 293 </v-layout>
229 294
230 <!-- FOR ADMIN ROLE --> 295 <!-- FOR ADMIN ROLE -->
231 <v-card class="mt-2 card" v-if="role == 'ADMIN'"> 296 <v-layout row wrap>
232 <!-- <full-calendar 297 <!-- NOTICE -->
233 ref="calendar" 298 <v-flex xs12 sm6>
234 defaultView="month" 299 <v-card class="card" v-if="role == 'ADMIN'">
235 droppable="false" 300 <v-container>
236 :events="events" 301 <v-card-title class="justify-center subheading font-weight-bold">Notice</v-card-title>
237 :config="config"
238 ></full-calendar>-->
239 <h4 class="pa-3">
240 <b>Notice</b>
241 </h4>
242 302
243 <v-data-table 303 <v-data-table
244 :items="noticeData" 304 :items="noticeData"
245 class="elevation-0" 305 class="elevation-0"
246 flat 306 flat
247 hide-actions 307 hide-actions
248 hide-headers 308 hide-headers
249 style="border-spacing: 0 !important;" 309 style="border-spacing: 0 !important;"
250 > 310 >
251 <template 311 <template
252 slot="items" 312 slot="items"
253 slot-scope="props" 313 slot-scope="props"
254 v-if="props.index < 5" 314 v-if="props.index < 5"
255 style="border-spacing: 0 !important;" 315 style="border-spacing: 0 !important;"
256 > 316 >
257 <tr class="td-notice"> 317 <tr class="td-notice">
258 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td> 318 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
259 <td> 319 <td>
260 <span class="grey--text caption">{{ date(props.item.created) }}</span> 320 <span class="grey--text caption">{{ date(props.item.created) }}</span>
261 <br /> 321 <br />
262 <span class="body-2">{{ props.item.title}}</span> 322 <span class="body-2">{{ props.item.title}}</span>
263 </td> 323 </td>
264 <td class="grey--text mt-2">{{ props.item.description}}</td> 324 <!-- <td class="grey--text mt-2" >{{ props.item.description}}</td> -->
265 325
266 <td class="text-xs-center"> 326 <td class="text-xs-center">
267 <span> 327 <span>
268 <v-tooltip top> 328 <v-tooltip top>
269 <img 329 <img
270 slot="activator" 330 slot="activator"
271 style="cursor:pointer; width:25px; height:25px; " 331 style="cursor:pointer; width:25px; height:25px; "
272 @click="profile" 332 @click="profile"
273 src="/static/icon/view.png" 333 src="/static/icon/view.png"
274 /> 334 />
275 <span>View</span> 335 <span>View</span>
276 </v-tooltip> 336 </v-tooltip>
277 </span> 337 </span>
278 </td> 338 </td>
279 </tr> 339 </tr>
280 </template> 340 </template>
281 </v-data-table> 341 </v-data-table>
282 </v-card> 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 <!-- FOR TEACHER ROLE --> 386 <!-- FOR TEACHER ROLE -->
285 <v-card class="mt-2 card" v-if="role == 'TEACHER'"> 387 <v-card class="mt-2 card" v-if="role == 'TEACHER'">
286 <v-layout> 388 <v-layout>
287 <v-flex xs6 sm6 md6> 389 <v-flex xs6 sm6 md6>
288 <h4 class="pa-3"> 390 <h4 class="pa-3">
289 <b>Notice</b> 391 <b>Notice</b>
290 </h4> 392 </h4>
291 <v-data-table 393 <v-data-table
292 :items="noticeData" 394 :items="noticeData"
293 class="elevation-0" 395 class="elevation-0"
294 flat 396 flat
295 hide-actions 397 hide-actions
296 hide-headers 398 hide-headers
297 style="border-spacing: 0 !important;" 399 style="border-spacing: 0 !important;"
298 > 400 >
299 <template 401 <template
300 slot="items" 402 slot="items"
301 slot-scope="props" 403 slot-scope="props"
302 v-if="props.index < 5" 404 v-if="props.index < 5"
303 style="border-spacing: 0 !important;" 405 style="border-spacing: 0 !important;"
304 > 406 >
305 <tr class="td-notice"> 407 <tr class="td-notice">
306 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td> 408 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
307 <td> 409 <td>
308 <span class="grey--text caption">{{ date(props.item.created) }}</span> 410 <span class="grey--text caption">{{ date(props.item.created) }}</span>
309 <br /> 411 <br />
310 <span class="body-2">{{ props.item.title}}</span> 412 <span class="body-2">{{ props.item.title}}</span>
311 </td> 413 </td>
312 <td class="grey--text mt-2">{{ props.item.description}}</td> 414 <td class="grey--text mt-2">{{ props.item.description}}</td>
313 415
314 <td class="text-xs-center"> 416 <td class="text-xs-center">
315 <span> 417 <span>
316 <v-tooltip top> 418 <v-tooltip top>
317 <img 419 <img
318 slot="activator" 420 slot="activator"
319 style="cursor:pointer; width:25px; height:25px; " 421 style="cursor:pointer; width:25px; height:25px; "
320 @click="profile" 422 @click="profile"
321 src="/static/icon/view.png" 423 src="/static/icon/view.png"
322 /> 424 />
323 <span>View</span> 425 <span>View</span>
324 </v-tooltip> 426 </v-tooltip>
325 </span> 427 </span>
326 </td> 428 </td>
327 </tr> 429 </tr>
328 </template> 430 </template>
329 </v-data-table> 431 </v-data-table>
330 </v-flex> 432 </v-flex>
331 433
332 <v-flex xs6 sm6 md6> 434 <v-flex xs6 sm6 md6>
333 <v-card-text> 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 <div 437 <div
336 v-for="(activity,index) in activityList" 438 v-for="(activity,index) in activityList"
337 :key="index" 439 :key="index"
338 class="mt-2" 440 class="mt-2"
339 style="cursor: pointer;" 441 style="cursor: pointer;"
340 @click="seeEventDetails(activity)" 442 @click="seeEventDetails(activity)"
341 > 443 >
342 <span 444 <span
343 :style="{ 'background-color': colorsArray[index%colorsArray.length] }" 445 :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
344 style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;" 446 style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
345 ></span> 447 ></span>
346 <div style="display: inline-block;" class="ml-2"> 448 <div style="display: inline-block;" class="ml-2">
347 <div> 449 <div>
348 <div 450 <div
349 class="grey--text lighten-1 caption" 451 class="grey--text lighten-1 caption"
350 v-if="activity.dateOfEvent" 452 v-if="activity.dateOfEvent"
351 >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div> 453 >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div>
352 <div class="body-2" v-if="activity.title">{{activity.title}}</div> 454 <div class="body-2" v-if="activity.title">{{activity.title}}</div>
353 </div> 455 </div>
354 </div> 456 </div>
355 </div> 457 </div>
356 <div v-if="activityList.length == 0"> 458 <div v-if="activityList.length == 0">
357 <p class="text-center title grey lighten-4 error--text">No Data Found!</p> 459 <p class="text-center title grey lighten-4 error--text">No Data Found!</p>
358 </div> 460 </div>
359 </v-card-text> 461 </v-card-text>
360 </v-flex> 462 </v-flex>
361 </v-layout> 463 </v-layout>
362 </v-card> 464 </v-card>
363 465
364 <!-- COURSES --> 466 <!-- COURSES -->
365 <v-layout v-if="role == 'PARENT'"> 467 <v-layout v-if="role == 'PARENT'">
366 <v-flex xs12> 468 <v-flex xs12>
367 <v-card class="card mt-2 account-Card"> 469 <v-card class="card mt-2 account-Card">
368 <h4> 470 <h4>
369 <b>My Courses</b> 471 <b>My Courses</b>
370 </h4> 472 </h4>
371 <v-layout wrap> 473 <v-layout wrap>
372 <v-flex xs12 sm12> 474 <v-flex xs12 sm12>
373 <v-list two-line> 475 <v-list two-line>
374 <template> 476 <template>
375 <v-list-tile v-for="(course,i) in courseData" :key="i"> 477 <v-list-tile v-for="(course,i) in courseData" :key="i">
376 <v-list-tile-avatar> 478 <v-list-tile-avatar>
377 <!-- <v-icon 479 <!-- <v-icon
378 class="account-circle darkBlue-color" 480 class="account-circle darkBlue-color"
379 style="cursor: pointer;" 481 style="cursor: pointer;"
380 @click="routeToCourseDetails(course._id)" 482 @click="routeToCourseDetails(course._id)"
381 >panorama_fish_eye</v-icon>--> 483 >panorama_fish_eye</v-icon>-->
382 <span> 484 <span>
383 <v-tooltip top> 485 <v-tooltip top>
384 <img 486 <img
385 slot="activator" 487 slot="activator"
386 style="cursor:pointer; width:25px; height:25px; " 488 style="cursor:pointer; width:25px; height:25px; "
387 src="/static/icon/view.png" 489 src="/static/icon/view.png"
388 @click="routeToCourseDetails(course._id)" 490 @click="routeToCourseDetails(course._id)"
389 /> 491 />
390 <span>View</span> 492 <span>View</span>
391 </v-tooltip> 493 </v-tooltip>
392 </span> 494 </span>
393 </v-list-tile-avatar> 495 </v-list-tile-avatar>
394 <v-list-tile-content> 496 <v-list-tile-content>
395 <v-list-tile-title 497 <v-list-tile-title
396 style="cursor: pointer;" 498 style="cursor: pointer;"
397 @click="routeToCourseDetails(course._id)" 499 @click="routeToCourseDetails(course._id)"
398 >{{ course.courseName }}</v-list-tile-title> 500 >{{ course.courseName }}</v-list-tile-title>
399 </v-list-tile-content> 501 </v-list-tile-content>
400 </v-list-tile> 502 </v-list-tile>
401 </template> 503 </template>
402 </v-list> 504 </v-list>
403 </v-flex> 505 </v-flex>
404 </v-layout> 506 </v-layout>
405 </v-card> 507 </v-card>
406 </v-flex> 508 </v-flex>
407 </v-layout> 509 </v-layout>
408 <v-layout v-if="role == 'PARENT'"> 510 <v-layout v-if="role == 'PARENT'">
409 <v-flex xs6> 511 <v-flex xs6>
410 <v-card class="mt-2 card"> 512 <v-card class="mt-2 card">
411 <h4 class="pa-3"> 513 <h4 class="pa-3">
412 <b>Latest Annoucements</b> 514 <b>Latest Annoucements</b>
413 </h4> 515 </h4>
414 516
415 <v-data-table 517 <v-data-table
416 :items="annoucementData" 518 :items="annoucementData"
417 class="elevation-0" 519 class="elevation-0"
418 flat 520 flat
419 hide-actions 521 hide-actions
420 hide-headers 522 hide-headers
421 style="border-spacing: 0 !important;" 523 style="border-spacing: 0 !important;"
422 > 524 >
423 <template 525 <template
424 slot="items" 526 slot="items"
425 slot-scope="props" 527 slot-scope="props"
426 v-if="props.index < 5" 528 v-if="props.index < 5"
427 style="border-spacing: 0 !important;" 529 style="border-spacing: 0 !important;"
428 > 530 >
429 <tr class="td-notice"> 531 <tr class="td-notice">
430 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td> 532 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
431 <td> 533 <td>
432 <span class="grey--text caption">{{ date(props.item.created) }}</span> 534 <span class="grey--text caption">{{ date(props.item.created) }}</span>
433 <br /> 535 <br />
434 <span class="body-2">{{ props.item.discussionType}}</span> 536 <span class="body-2">{{ props.item.discussionType}}</span>
435 </td> 537 </td>
436 <td class="text-xs-center"> 538 <td class="text-xs-center">
437 <span> 539 <span>
438 <v-tooltip top> 540 <v-tooltip top>
439 <img 541 <img
440 slot="activator" 542 slot="activator"
441 style="cursor:pointer; width:25px; height:25px; " 543 style="cursor:pointer; width:25px; height:25px; "
442 src="/static/icon/view.png" 544 src="/static/icon/view.png"
443 /> 545 />
444 <span>View</span> 546 <span>View</span>
445 </v-tooltip> 547 </v-tooltip>
446 </span> 548 </span>
447 </td> 549 </td>
448 </tr> 550 </tr>
449 </template> 551 </template>
450 </v-data-table> 552 </v-data-table>
451 </v-card> 553 </v-card>
452 </v-flex> 554 </v-flex>
453 <v-flex xs6> 555 <v-flex xs6>
454 <v-card class="mt-2 card"> 556 <v-card class="mt-2 card">
455 <h4 class="pa-3"> 557 <h4 class="pa-3">
456 <b>Online User</b> 558 <b>Online User</b>
457 </h4> 559 </h4>
458 560
459 <v-data-table 561 <v-data-table
460 :items="onlineUser" 562 :items="onlineUser"
461 class="elevation-0" 563 class="elevation-0"
462 flat 564 flat
463 hide-actions 565 hide-actions
464 hide-headers 566 hide-headers
465 style="border-spacing: 0 !important;" 567 style="border-spacing: 0 !important;"
466 > 568 >
467 <template 569 <template
468 slot="items" 570 slot="items"
469 slot-scope="props" 571 slot-scope="props"
470 v-if="props.index < 5" 572 v-if="props.index < 5"
471 style="border-spacing: 0 !important;" 573 style="border-spacing: 0 !important;"
472 > 574 >
473 <tr class="td-notice"> 575 <tr class="td-notice">
474 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td> 576 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
475 <td> 577 <td>
476 <span class="body-2">{{ props.item.user }}</span> 578 <span class="body-2">{{ props.item.user }}</span>
477 </td> 579 </td>
478 <td class="text-xs-center"> 580 <td class="text-xs-center">
479 <span> 581 <span>
480 <v-tooltip top> 582 <v-tooltip top>
481 <img 583 <img
482 slot="activator" 584 slot="activator"
483 style="cursor:pointer; width:25px; height:25px; " 585 style="cursor:pointer; width:25px; height:25px; "
484 src="/static/icon/view.png" 586 src="/static/icon/view.png"
485 /> 587 />
486 <span>View</span> 588 <span>View</span>
487 </v-tooltip> 589 </v-tooltip>
488 </span> 590 </span>
489 </td> 591 </td>
490 </tr> 592 </tr>
491 </template> 593 </template>
492 </v-data-table> 594 </v-data-table>
493 </v-card> 595 </v-card>
494 </v-flex> 596 </v-flex>
495 </v-layout> 597 </v-layout>
496 </v-container> 598 </v-container>
497 </v-flex> 599 </v-flex>
498 <v-spacer></v-spacer> 600 <v-spacer></v-spacer>
499 <!-- SIDE BAR --> 601 <!-- SIDE BAR -->
500 <v-flex xs12 sm12 md3> 602 <v-flex xs12 sm12 md4>
501 <v-card height="100%" class="elevation-0 mt-3 profileDasboard"> 603 <v-card height="100%" class="elevation-0 mt-3 profileDasboard">
502 <v-card-text class="px-2"> 604 <v-card-text class="px-2">
503 <h4 class="text-xs-center py-3"> 605 <h4 class="text-xs-center py-3">
504 <b>Profile</b> 606 <b>Profile</b>
505 </h4> 607 </h4>
506 <v-flex xs12 class="py-3"> 608 <v-flex xs12 class="py-3">
507 <v-layout wrap> 609 <v-layout wrap>
508 <v-flex xs12 sm12 md4> 610 <v-flex xs12 sm12 md4>
509 <img 611 <img
510 src="/static/icon/user.png" 612 src="/static/icon/user.png"
511 v-if="!userData.profilePicUrl && !userData.schoolLogoUrl" 613 v-if="!userData.profilePicUrl && !userData.schoolLogoUrl"
512 width="80" 614 width="80"
513 /> 615 />
514 <img 616 <img
515 :src="userData.profilePicUrl" 617 :src="userData.profilePicUrl"
516 onerror="this.src='/static/icon/user.png';" 618 onerror="this.src='/static/icon/user.png';"
517 v-if="userData.profilePicUrl" 619 v-if="userData.profilePicUrl"
518 width="80" 620 width="80"
519 /> 621 />
520 <img 622 <img
521 :src="userData.schoolLogoUrl" 623 :src="userData.schoolLogoUrl"
522 onerror="this.src='/static/icon/user.png';" 624 onerror="this.src='/static/icon/user.png';"
523 v-if="userData.schoolLogoUrl" 625 v-if="userData.schoolLogoUrl"
524 width="80" 626 width="80"
525 /> 627 />
526 </v-flex> 628 </v-flex>
527 <v-flex xs12 sm12 md6> 629 <v-flex xs12 sm12 md6>
528 <p class="mb-0 body-1"> 630 <p class="mb-0 body-1">
529 <i>{{ userData.name }}</i> 631 <i>{{ userData.name }}</i>
530 </p> 632 </p>
531 <p class="mb-0 caption grey--text">{{ userData.email }}</p> 633 <p class="mb-0 caption grey--text">{{ userData.email }}</p>
532 <p class="mb-0 caption grey--text">{{ userData.mobile }}</p> 634 <p class="mb-0 caption grey--text">{{ userData.mobile }}</p>
533 <address class="caption grey--text mb-3">{{ userData.address }}</address> 635 <address class="caption grey--text mb-3">{{ userData.address }}</address>
534 </v-flex> 636 </v-flex>
535 </v-layout> 637 </v-layout>
536 </v-flex> 638 </v-flex>
537 <hr /> 639 <hr />
538 <div class="text-xs-center py-3 subheading font-weight-bold">Calender</div> 640 <div class="text-xs-center py-3 subheading font-weight-bold">Calender</div>
539 641
540 <vue-event-calendar :events="activityEvents" @day-changed="handleDayChanged($event)"></vue-event-calendar> 642 <vue-event-calendar :events="activityEvents" @day-changed="handleDayChanged($event)"></vue-event-calendar>
541 643
542 <!-- LATEST EVENTS --> 644 <!-- LATEST EVENTS -->
645 <!-- IF ROLE IS ADMIN -->
543 <v-card class="my-3 elevation-0" v-if="role != 'TEACHER'"> 646 <v-card class="my-3 elevation-0" v-if="role != 'TEACHER'">
544 <v-card-text v-if="$store.state.role === 'ADMIN' "> 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 <div 650 <div
547 v-for="(activity,index) in activityList" 651 v-for="(activity,index) in activityList"
548 :key="index" 652 :key="index"
549 class="mt-2" 653 class="mt-2"
550 style="cursor: pointer;" 654 style="cursor: pointer;"
551 @click="seeEventDetails(activity)" 655 @click="seeEventDetails(activity)"
552 > 656 >
553 <span 657 <span
554 :style="{ 'background-color': colorsArray[index%colorsArray.length] }" 658 :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
555 style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;" 659 style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
556 ></span> 660 ></span>
557 <div style="display: inline-block;" class="ml-2"> 661 <div style="display: inline-block;" class="ml-2">
558 <div> 662 <div>
559 <div 663 <div
560 class="grey--text lighten-1 caption" 664 class="grey--text lighten-1 caption"
561 v-if="activity.dateOfEvent" 665 v-if="activity.dateOfEvent"
562 >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div> 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 </div> 668 </div>
565 </div> 669 </div>
566 </div> 670 </div>
567 <div v-if="activityList.length == 0"> 671 <div v-if="activityList.length == 0">
568 <p class="text-center title grey lighten-4 error--text">No Data Found!</p> 672 <p class="text-center title grey lighten-4 error--text">No Data Found!</p>
569 </div> 673 </div>
570 </v-card-text> 674 </v-card-text>
675
676 <!-- ROLE IS NOT ADMIN -->
571 <v-card-text v-if="$store.state.role != 'ADMIN'"> 677 <v-card-text v-if="$store.state.role != 'ADMIN'">
572 <v-card-title class="justify-center subheading font-weight-bold">Latest Events</v-card-title> 678 <v-card-title class="justify-center subheading font-weight-bold">Latest Events</v-card-title>
573 <div 679 <div
574 v-for="(activity,index) in activityList" 680 v-for="(activity,index) in activityList"
575 :key="index" 681 :key="index"
576 class="mt-2" 682 class="mt-2"
577 style="cursor: pointer;" 683 style="cursor: pointer;"
578 @click="seeEventDetails(activity)" 684 @click="seeEventDetails(activity)"
579 > 685 >
580 <span 686 <span
581 :style="{ 'background-color': colorsArray[index%colorsArray.length] }" 687 :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
582 style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;" 688 style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
583 ></span> 689 ></span>
584 <div style="display: inline-block;" class="ml-2"> 690 <div style="display: inline-block;" class="ml-2">
585 <!-- LATEST EVENTS FOR PARENT --> 691 <!-- LATEST EVENTS FOR PARENT -->
586 <div v-if="$store.state.role === 'PARENT' "> 692 <div v-if="$store.state.role === 'PARENT' ">
587 <div 693 <div
588 class="grey--text lighten-1 caption" 694 class="grey--text lighten-1 caption"
589 v-if="activity.meetingEvent" 695 v-if="activity.meetingEvent"
590 >{{moment(activity.meetingEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div> 696 >{{moment(activity.meetingEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
591 <div 697 <div
592 class="body-2" 698 class="body-2"
593 v-if="activity.meetingEvent" 699 v-if="activity.meetingEvent"
594 >{{activity.meetingEvent.title}}</div> 700 >{{activity.meetingEvent.title}}</div>
595 </div> 701 </div>
596 702
597 <!-- LATEST EVENTS FOR TEACHER --> 703 <!-- LATEST EVENTS FOR TEACHER -->
598 <div v-if="role === 'TEACHER'"> 704 <div v-if="role === 'TEACHER'">
599 <div 705 <div
600 class="grey--text lighten-1 caption" 706 class="grey--text lighten-1 caption"
601 v-if="activity.dateOfEvent" 707 v-if="activity.dateOfEvent"
602 >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div> 708 >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div>
603 <div class="body-2" v-if="activity.title">{{activity.title}}</div> 709 <div class="body-2" v-if="activity.title">{{activity.title}}</div>
604 </div> 710 </div>
605 </div> 711 </div>
606 <div v-if="activityList.length == 0"> 712 <div v-if="activityList.length == 0">
607 <p class="text-center title grey lighten-4 error--text">No Data Found!</p> 713 <p class="text-center title grey lighten-4 error--text">No Data Found!</p>
608 </div> 714 </div>
609 </div> 715 </div>
610 </v-card-text> 716 </v-card-text>
611 </v-card> 717 </v-card>
612 </v-card-text> 718 </v-card-text>
613 </v-card> 719 </v-card>
614 </v-flex> 720 </v-flex>
615 </v-layout> 721 </v-layout>
616 722
617 <v-dialog v-model="dialog" max-width="500" persistent> 723 <v-dialog v-model="dialog" max-width="500" persistent>
618 <v-card color="grey lighten-4" flat> 724 <v-card color="grey lighten-4" flat>
619 <v-toolbar dark color="fixcolors"> 725 <v-toolbar dark color="fixcolors">
620 <v-spacer></v-spacer> 726 <v-spacer></v-spacer>
621 <v-btn icon @click="dialog= false"> 727 <v-btn icon @click="dialog= false">
622 <v-icon>close</v-icon> 728 <v-icon>close</v-icon>
623 </v-btn> 729 </v-btn>
624 </v-toolbar> 730 </v-toolbar>
625 <v-flex class="py-4"> 731 <v-flex class="py-4">
626 <v-list-tile> 732 <v-list-tile>
627 <v-list-tile-action> 733 <v-list-tile-action>
628 <v-icon>edit</v-icon> 734 <v-icon>edit</v-icon>
629 </v-list-tile-action> 735 </v-list-tile-action>
630 <v-list-tile-content> 736 <v-list-tile-content>
631 <v-list-tile-title>{{ selected.title }}</v-list-tile-title> 737 <v-list-tile-title>{{ selected.title }}</v-list-tile-title>
632 </v-list-tile-content> 738 </v-list-tile-content>
633 </v-list-tile> 739 </v-list-tile>
634 <v-list-tile> 740 <v-list-tile>
635 <v-list-tile-action> 741 <v-list-tile-action>
636 <v-icon>access_time</v-icon> 742 <v-icon>access_time</v-icon>
637 </v-list-tile-action> 743 </v-list-tile-action>
638 <v-list-tile-content> 744 <v-list-tile-content>
639 <v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title> 745 <v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title>
640 </v-list-tile-content> 746 </v-list-tile-content>
641 </v-list-tile> 747 </v-list-tile>
642 </v-flex> 748 </v-flex>
643 </v-card> 749 </v-card>
644 </v-dialog> 750 </v-dialog>
645 </v-app> 751 </v-app>
646 </template> 752 </template>
647 753
648 <script> 754 <script>
649 import http from "@/Services/http.js"; 755 import http from "@/Services/http.js";
650 import moment from "moment"; 756 import moment from "moment";
651 import AllApiCalls from "@/Services/AllApiCalls.js"; 757 import AllApiCalls from "@/Services/AllApiCalls.js";
652 // import { FunctionalCalendar } from "vue-functional-calendar"; 758 // import { FunctionalCalendar } from "vue-functional-calendar";
653 759
654 export default { 760 export default {
655 components: { 761 components: {
656 // FunctionalCalendar 762 // FunctionalCalendar
657 }, 763 },
658 mixins: [AllApiCalls], 764 mixins: [AllApiCalls],
659 data() { 765 data() {
660 return { 766 return {
661 // data: { 767 // data: {
662 // clieckedToday: false 768 // clieckedToday: false
663 // }, 769 // },
664 // markedDates: ["16/4/2019", "18/4/2019", "20/4/2019", "21/4/2019"], 770 // markedDates: ["16/4/2019", "18/4/2019", "20/4/2019", "21/4/2019"],
665 // calendarData: {}, 771 // calendarData: {},
666 // calendar: {}, 772 // calendar: {},
667 773
668 // DIALOG BOX EVENT DETAILS 774 // DIALOG BOX EVENT DETAILS
775 tabs: [
776 { name: "School Events", icon: "mdi-account" },
777 { name: "Meeting Events", icon: "mdi-account-outline" },
778 ],
669 viewEventDetails: false, 779 viewEventDetails: false,
780 active: 0,
781 particularEvent: [],
782 displayEventsList: [],
783 dialogSchoolEvents: [],
784 dialogMeetingEvents: [],
670 785
671 // CALENDER 786 // CALENDER
672 moment: moment, 787 moment: moment,
673 activityEvents: [], 788 activityEvents: [],
674 onlineUser: [ 789 onlineUser: [
675 { 790 {
676 user: "Student Demo", 791 user: "Student Demo",
677 }, 792 },
678 { 793 {
679 user: "Teacher Demo", 794 user: "Teacher Demo",
680 }, 795 },
681 { 796 {
682 user: "Priyansh Gupta", 797 user: "Priyansh Gupta",
683 }, 798 },
684 { 799 {
685 user: "Gaurav Aggarwal", 800 user: "Gaurav Aggarwal",
686 }, 801 },
687 { 802 {
688 user: "Approve Arorra", 803 user: "Approve Arorra",
689 }, 804 },
690 ], 805 ],
691 showLoader: false, 806 showLoader: false,
692 calendarData: {}, 807 calendarData: {},
693 dialog: false, 808 dialog: false,
694 dialogNotice: false, 809 dialogNotice: false,
695 HolidaysList: [], 810 HolidaysList: [],
696 EventsList: [], 811 EventsList: [],
697 events: [], 812 events: [],
698 config: { 813 config: {
699 eventClick: (event) => { 814 eventClick: (event) => {
700 this.selected = event; 815 this.selected = event;
701 this.dialog = true; 816 this.dialog = true;
702 }, 817 },
703 }, 818 },
704 selected: {}, 819 selected: {},
705 barGraph: [], 820 barGraph: [],
706 // notice: {}, 821 // notice: {},
707 userData: {}, 822 userData: {},
708 dated: new Date(2018, 0, 9), 823 dated: new Date(2018, 0, 9),
709 userList: [], 824 userList: [],
710 sectionList: [], 825 sectionList: [],
711 students: "", 826 students: "",
712 parents: "", 827 parents: "",
713 teachers: "", 828 teachers: "",
714 classes: "", 829 classes: "",
715 noticeData: [], 830 noticeData: [],
716 expenseData: [], 831 expenseData: [],
717 feeData: [], 832 feeData: [],
718 collectionData: [], 833 collectionData: [],
719 courseData: [], 834 courseData: [],
720 studentsData: [], 835 studentsData: [],
721 annoucementData: [], 836 annoucementData: [],
722 role: "", 837 role: "",
723 attrs: [ 838 attrs: [
724 { 839 {
725 key: "today", 840 key: "today",
726 highlight: true, 841 highlight: true,
727 dates: new Date(), 842 dates: new Date(),
728 }, 843 },
729 ], 844 ],
730 drawer: true, 845 drawer: true,
731 items: [ 846 items: [
732 { title: "Home", icon: "dashboard" }, 847 { title: "Home", icon: "dashboard" },
733 { title: "About", icon: "question_answer" }, 848 { title: "About", icon: "question_answer" },
734 ], 849 ],
735 right: null, 850 right: null,
736 851
737 series: [ 852 series: [
738 { 853 {
739 name: "Total", 854 name: "Total",
740 data: [], 855 data: [],
741 }, 856 },
742 ], 857 ],
743 showChart: false, 858 showChart: false,
744 chartOptions: { 859 chartOptions: {
745 chart: { 860 chart: {
746 type: "bar", 861 type: "bar",
747 height: 150, 862 height: 150,
748 stacked: true, 863 stacked: true,
749 // animations: { 864 // animations: {
750 // enabled: true, 865 // enabled: true,
751 // easing: "easeinout", 866 // easing: "easeinout",
752 // speed: 1200, 867 // speed: 1200,
753 // animateGradually: { 868 // animateGradually: {
754 // enabled: true, 869 // enabled: true,
755 // delay: 450 870 // delay: 450
756 // }, 871 // },
757 // dynamicAnimation: { 872 // dynamicAnimation: {
758 // enabled: true, 873 // enabled: true,
759 // speed: 450 874 // speed: 450
760 // } 875 // }
761 // } 876 // }
762 }, 877 },
763 plotOptions: { 878 plotOptions: {
764 bar: { 879 bar: {
765 horizontal: false, 880 horizontal: false,
766 columnWidth: "25%", 881 columnWidth: "25%",
767 // endingShape: "rounded", 882 // endingShape: "rounded",
768 distributed: true, 883 distributed: true,
769 }, 884 },
770 }, 885 },
771 responsive: [ 886 responsive: [
772 { 887 {
773 breakpoint: 480, 888 breakpoint: 480,
774 options: { 889 options: {
775 legend: { 890 legend: {
776 position: "bottom", 891 position: "bottom",
777 offsetX: -10, 892 offsetX: -10,
778 offsetY: 0, 893 offsetY: 0,
779 }, 894 },
780 }, 895 },
781 }, 896 },
782 ], 897 ],
783 legend: { 898 legend: {
784 show: false, 899 show: false,
785 }, 900 },
786 colors: ["#7852cc", "#f9a825", "#ff8a89"], 901 colors: ["#7852cc", "#f9a825", "#ff8a89"],
787 dataLabels: { 902 dataLabels: {
788 enabled: false, 903 enabled: false,
789 }, 904 },
790 stroke: { 905 stroke: {
791 show: true, 906 show: true,
792 width: 2, 907 width: 2,
793 colors: ["transparent"], 908 colors: ["transparent"],
794 }, 909 },
795 xaxis: { 910 xaxis: {
796 categories: ["Fee", "Collections", "Expences"], 911 categories: ["Fee", "Collections", "Expences"],
797 }, 912 },
798 yaxis: { 913 yaxis: {
799 title: { 914 title: {
800 text: "", 915 text: "",
801 }, 916 },
802 }, 917 },
803 fill: { 918 fill: {
804 opacity: 1, 919 opacity: 1,
805 }, 920 },
806 tooltip: { 921 tooltip: {
807 y: { 922 y: {
808 formatter: function (val, opts) { 923 formatter: function (val, opts) {
809 return "" + val + " "; 924 return "" + val + " ";
810 }, 925 },
811 }, 926 },
812 }, 927 },
813 }, 928 },
814 929
815 // LATEST ACTIVITY 930 // LATEST ACTIVITY
816 colorsArray: ["#ff8a89", "#71d9ea", "#7852cc", "#F9A825"], 931 colorsArray: ["#ff8a89", "#71d9ea", "#7852cc", "#F9A825"],
817 activityList: [], 932 activityList: [],
818 }; 933 };
819 }, 934 },
820 935
821 methods: { 936 methods: {
822 test(e) { 937 test(e) {
823 console.log(" test - ", e); 938 console.log(" test - ", e);
824 }, 939 },
825 async handleDayChanged(e) { 940 async handleDayChanged(e) {
826 await this.getParticularMeetingEvent({ 941 console.log("event calender - ", e);
827 meetingEventId: e.events[0]._id, 942 /*the list of events that will be used in dialog box to display events */
828 }); 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 this.viewEventDetails = true; 962 this.viewEventDetails = true;
830 }, 963 },
831 async seeEventDetails(activity) { 964 async seeEventDetails(activity, message) {
832 if (this.$store.state.role === "TEACHER") { 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 this.viewEventDetails = true; 971 this.viewEventDetails = true;
835 } 972 }
836 if (this.$store.state.role === "PARENT") { 973 if (this.$store.state.role === "PARENT") {
837 await this.getParticularMeetingEvent({ 974 let response = await this.getParticularMeetingEvent({
838 meetingEventId: activity.meetingEvent._id, 975 meetingEventId: activity.meetingEvent._id,
839 }); 976 });
977 this.displayEventsList = [];
978 this.displayEventsList.push(response.data.data);
840 this.viewEventDetails = true; 979 this.viewEventDetails = true;
841 } 980 }
842 if (this.$store.state.role === "ADMIN") { 981 if (this.$store.state.role === "ADMIN") {
843 await this.getParticularMeetingEvent({ 982 if (message == "schoolEvent") {
844 meetingEventId: activity._id, 983 let response = await this.getParticularSchoolEvent({
845 }); 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 this.viewEventDetails = true; 995 this.viewEventDetails = true;
847 } 996 }
848 }, 997 },
849 async routeToCourseDetails(courseId) { 998 async routeToCourseDetails(courseId) {
850 /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/ 999 /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/
851 let response = await this.getParticularCourseDetail(courseId); 1000 let response = await this.getParticularCourseDetail(courseId);
852 1001
853 /* If the response is null then dont route */ 1002 /* If the response is null then dont route */
854 if (response.data.data.length > 0) { 1003 if (response.data.data.length > 0) {
855 this.$router.push({ 1004 this.$router.push({
856 name: "Course Details", 1005 name: "Course Details",
857 query: { courseId: courseId }, 1006 query: { courseId: courseId },
858 }); 1007 });
859 } else { 1008 } else {
860 this.seeSnackbar("No Data Available", "warning"); 1009 this.seeSnackbar("No Data Available", "warning");
861 } 1010 }
862 }, 1011 },
863 1012
864 closeNotice() { 1013 closeNotice() {
865 this.dialogNotice = false; 1014 this.dialogNotice = false;
866 }, 1015 },
867 profile() { 1016 profile() {
868 // this.editedIndex = this.desserts.indexOf(item); 1017 // this.editedIndex = this.desserts.indexOf(item);
869 // this.notice = Object.assign({}, item); 1018 // this.notice = Object.assign({}, item);
870 // this.dialogNotice = true; 1019 // this.dialogNotice = true;
871 this.$router.push("/noticeBoard"); 1020 this.$router.push("/noticeBoard");
872 }, 1021 },
873 date: function (date) { 1022 date: function (date) {
874 return moment(date).format("MMMM DD, YYYY HH:mm"); 1023 return moment(date).format("MMMM DD, YYYY HH:mm");
875 }, 1024 },
876 activityDate(date) { 1025 activityDate(date) {
877 return moment(date).format("MMMM DD, YYYY"); 1026 return moment(date).format("MMMM DD, YYYY");
878 }, 1027 },
879 refreshEvents() { 1028 refreshEvents() {
880 this.$refs.calendar.$emit("refetch-events"); 1029 this.$refs.calendar.$emit("refetch-events");
881 }, 1030 },
882 removeEvent() { 1031 removeEvent() {
883 this.$refs.calendar.$emit("remove-event", this.selected); 1032 this.$refs.calendar.$emit("remove-event", this.selected);
884 this.selected = {}; 1033 this.selected = {};
885 }, 1034 },
886 eventSelected(event) { 1035 eventSelected(event) {
887 this.selected = event; 1036 this.selected = event;
888 }, 1037 },
889 // eventDropStart: function(event) { 1038 // eventDropStart: function(event) {
890 // event.editable = false; 1039 // event.editable = false;
891 // }, 1040 // },
892 eventCreated(...test) { 1041 eventCreated(...test) {
893 console.log(test); 1042 console.log(test);
894 }, 1043 },
895 getStudents() { 1044 getStudents() {
896 http() 1045 http()
897 .get("/getStudentsList") 1046 .get("/getStudentsList")
898 .then((response) => { 1047 .then((response) => {
899 this.students = response.data.data; 1048 this.students = response.data.data;
900 this.showLoader = false; 1049 this.showLoader = false;
901 }) 1050 })
902 .catch((error) => { 1051 .catch((error) => {
903 // console.log("err====>", err); 1052 // console.log("err====>", err);
904 this.showLoader = false; 1053 this.showLoader = false;
905 if (error.response.status === 401) { 1054 if (error.response.status === 401) {
906 this.$router.replace({ path: "/" }); 1055 this.$router.replace({ path: "/" });
907 this.$store.dispatch("setToken", null); 1056 this.$store.dispatch("setToken", null);
908 this.$store.dispatch("Id", null); 1057 this.$store.dispatch("Id", null);
909 } 1058 }
910 }); 1059 });
911 }, 1060 },
912 getParents() { 1061 getParents() {
913 http() 1062 http()
914 .get("/getParentsList") 1063 .get("/getParentsList")
915 .then((response) => { 1064 .then((response) => {
916 this.parents = response.data.data; 1065 this.parents = response.data.data;
917 this.showLoader = false; 1066 this.showLoader = false;
918 }) 1067 })
919 .catch((error) => { 1068 .catch((error) => {
920 // console.log("err====>", err); 1069 // console.log("err====>", err);
921 this.showLoader = false; 1070 this.showLoader = false;
922 }); 1071 });
923 }, 1072 },
924 getTeachers() { 1073 getTeachers() {
925 http() 1074 http()
926 .get("/getTeachersList") 1075 .get("/getTeachersList")
927 .then((response) => { 1076 .then((response) => {
928 this.teachers = response.data.data; 1077 this.teachers = response.data.data;
929 this.showLoader = false; 1078 this.showLoader = false;
930 }) 1079 })
931 .catch((error) => { 1080 .catch((error) => {
932 // console.log("err====>", err); 1081 // console.log("err====>", err);
933 this.showLoader = false; 1082 this.showLoader = false;
934 }); 1083 });
935 }, 1084 },
936 getClasses() { 1085 getClasses() {
937 http() 1086 http()
938 .get("/getClassesList") 1087 .get("/getClassesList")
939 .then((response) => { 1088 .then((response) => {
940 this.classes = response.data.data; 1089 this.classes = response.data.data;
941 this.showLoader = false; 1090 this.showLoader = false;
942 }) 1091 })
943 .catch((error) => { 1092 .catch((error) => {
944 this.showLoader = false; 1093 this.showLoader = false;
945 }); 1094 });
946 }, 1095 },
947 getNoticeData() { 1096 getNoticeData() {
948 this.showLoader = true; 1097 this.showLoader = true;
949 http() 1098 http()
950 .get("/getEventsList") 1099 .get("/getEventsList")
951 .then((response) => { 1100 .then((response) => {
952 this.noticeData = response.data.data; 1101 this.noticeData = response.data.data;
953 this.showLoader = false; 1102 this.showLoader = false;
954 }) 1103 })
955 .catch((error) => { 1104 .catch((error) => {
956 this.showLoader = false; 1105 this.showLoader = false;
957 }); 1106 });
958 }, 1107 },
959 getUserData() { 1108 getUserData() {
960 // this.showLoader = true; 1109 // this.showLoader = true;
961 if (this.$store.state.role === "PARENT") { 1110 if (this.$store.state.role === "PARENT") {
962 http() 1111 http()
963 .get("/getParticularUserDetail", { 1112 .get("/getParticularUserDetail", {
964 params: { 1113 params: {
965 studentId: localStorage.getItem("parentStudentId"), 1114 studentId: localStorage.getItem("parentStudentId"),
966 }, 1115 },
967 }) 1116 })
968 .then((response) => { 1117 .then((response) => {
969 this.userData = response.data.data; 1118 this.userData = response.data.data;
970 this.showLoader = false; 1119 this.showLoader = false;
971 }) 1120 })
972 .catch((error) => { 1121 .catch((error) => {
973 this.showLoader = false; 1122 this.showLoader = false;
974 }); 1123 });
975 } else { 1124 } else {
976 http() 1125 http()
977 .get("/getParticularUserDetail") 1126 .get("/getParticularUserDetail")
978 .then((response) => { 1127 .then((response) => {
979 this.userData = response.data.data; 1128 this.userData = response.data.data;
980 this.showLoader = false; 1129 this.showLoader = false;
981 }) 1130 })
982 .catch((error) => { 1131 .catch((error) => {
983 this.showLoader = false; 1132 this.showLoader = false;
984 }); 1133 });
985 } 1134 }
986 }, 1135 },
987 1136
988 getFeesAndCollectionsData() { 1137 getFeesAndCollectionsData() {
989 http() 1138 http()
990 .get("/getTotalFeesAndCollections") 1139 .get("/getTotalFeesAndCollections")
991 .then((response) => { 1140 .then((response) => {
992 this.feeData = response.data.data; 1141 this.feeData = response.data.data;
993 // this.collectionData = response.data.data; 1142 // this.collectionData = response.data.data;
994 this.series[0].data[0] = this.feeData.totalFees; 1143 this.series[0].data[0] = this.feeData.totalFees;
995 this.series[0].data[1] = this.feeData.totalCollection; 1144 this.series[0].data[1] = this.feeData.totalCollection;
996 this.showLoader = false; 1145 this.showLoader = false;
997 }) 1146 })
998 .catch((error) => { 1147 .catch((error) => {
999 this.showLoader = false; 1148 this.showLoader = false;
1000 }); 1149 });
1001 }, 1150 },
1002 getExpensesData() { 1151 getExpensesData() {
1003 http() 1152 http()
1004 .get("/getTotalExpenses") 1153 .get("/getTotalExpenses")
1005 .then((response) => { 1154 .then((response) => {
1006 this.expenseData = response.data.data; 1155 this.expenseData = response.data.data;
1007 // var array = response.data.data.sum; 1156 // var array = response.data.data.sum;
1008 this.series[0].data[2] = this.expenseData.sum; 1157 this.series[0].data[2] = this.expenseData.sum;
1009 this.showChart = true; 1158 this.showChart = true;
1010 // this.series = [ 1159 // this.series = [
1011 // { 1160 // {
1012 // name: "Total", 1161 // name: "Total",
1013 // data: array 1162 // data: array
1014 // } 1163 // }
1015 // ]; 1164 // ];
1016 this.showLoader = false; 1165 this.showLoader = false;
1017 }) 1166 })
1018 .catch((error) => { 1167 .catch((error) => {
1019 this.showLoader = false; 1168 this.showLoader = false;
1020 }); 1169 });
1021 }, 1170 },
1022 // async getparentStudents() { 1171 // async getparentStudents() {
1023 // this.showLoader = true; 1172 // this.showLoader = true;
1024 // await http() 1173 // await http()
1025 // .get("/parentStudentsList") 1174 // .get("/parentStudentsList")
1026 // .then((response) => { 1175 // .then((response) => {
1027 1176
1028 // /* set values in local storage */ 1177 // /* set values in local storage */
1029 // this.studentsData = response.data.data.students; 1178 // this.studentsData = response.data.data.students;
1030 // this.showLoader = false; 1179 // this.showLoader = false;
1031 // }) 1180 // })
1032 // .catch((err) => { 1181 // .catch((err) => {
1033 // console.log("err====>", err); 1182 // console.log("err====>", err);
1034 // this.showLoader = false; 1183 // this.showLoader = false;
1035 // }); 1184 // });
1036 // await this.getCourses(parentStudentsId, classId); 1185 // await this.getCourses(parentStudentsId, classId);
1037 // await this.getAnnoucementes(classId); 1186 // await this.getAnnoucementes(classId);
1038 // }, 1187 // },
1039 async getCourses(parentStudentsId, classId) { 1188 async getCourses(parentStudentsId, classId) {
1040 /* getStudentCourses - to get courseData - defined in GetApis.js*/ 1189 /* getStudentCourses - to get courseData - defined in GetApis.js*/
1041 await this.getStudentCourses({ 1190 await this.getStudentCourses({
1042 classId: localStorage.getItem("parentClassId"), 1191 classId: localStorage.getItem("parentClassId"),
1043 studentId: localStorage.getItem("parentStudentId"), 1192 studentId: localStorage.getItem("parentStudentId"),
1044 }); 1193 });
1045 }, 1194 },
1046 getAnnoucementes(classId) { 1195 getAnnoucementes(classId) {
1047 this.showLoader = true; 1196 this.showLoader = true;
1048 http() 1197 http()
1049 .get("/getAnnoucementesList", { 1198 .get("/getAnnoucementesList", {
1050 params: { 1199 params: {
1051 classId: localStorage.getItem("parentClassId"), 1200 classId: localStorage.getItem("parentClassId"),
1052 }, 1201 },
1053 }) 1202 })
1054 .then((response) => { 1203 .then((response) => {
1055 this.annoucementData = response.data.data; 1204 this.annoucementData = response.data.data;
1056 this.showLoader = false; 1205 this.showLoader = false;
1057 }) 1206 })
1058 .catch((err) => { 1207 .catch((err) => {
1059 console.log("err====>", err); 1208 console.log("err====>", err);
1060 this.showLoader = false; 1209 this.showLoader = false;
1061 }); 1210 });
1062 }, 1211 },
1063 async getMeetingEventes() { 1212 async getMeetingEventes() {
1064 if (this.role == "TEACHER" || this.role === "ADMIN") { 1213 if (this.role == "TEACHER" || this.role === "ADMIN") {
1065 this.showLoader = true; 1214 this.showLoader = true;
1066 await http() 1215 await http()
1067 .get("/getMeetingEventesList") 1216 .get("/getMeetingEventesList")
1068 .then((response) => { 1217 .then((response) => {
1069 var activityList = response.data.data; 1218 var activityList = response.data.data;
1070 this.activityList = activityList; 1219 this.activityList = activityList;
1071 this.showLoader = false; 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 for (var i = 0; i < this.activityList.length; i++) { 1223 for (var i = 0; i < this.activityList.length; i++) {
1075 let obj = {}; 1224 let obj = {};
1076 obj.date = moment(this.activityList[i].dateOfEvent).format( 1225 obj.date = moment(this.activityList[i].dateOfEvent).format(
1077 "YYYY/MM/DD" 1226 "YYYY/MM/DD"
1078 ); 1227 );
1079 obj.title = this.activityList[i].title; 1228 obj.title = this.activityList[i].title;
1080 obj._id = this.activityList[i]._id; 1229 obj._id = this.activityList[i]._id;
1230 obj.eventType = "meetingEvent";
1081 this.activityEvents.push(obj); 1231 this.activityEvents.push(obj);
1082 } 1232 }
1083 }) 1233 })
1084 .catch((error) => { 1234 .catch((error) => {
1085 this.showLoader = false; 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
1091 mounted() { 1255 mounted() {
1092 // = this.$store.state.schoolToken; 1256 // = this.$store.state.schoolToken;
1093 // console.log("this.$store.state.role", this.token); 1257 // console.log("this.$store.state.role", this.token);
1094 // this.getUsersList(); 1258 // this.getUsersList();
1095 }, 1259 },
1096 1260
1097 async created() { 1261 async created() {
1098 if (this.$store.state.role === "ADMIN") { 1262 if (this.$store.state.role === "ADMIN") {
1099 // this.token = this.$store.state.token; 1263 // this.token = this.$store.state.token;
1100 await this.getFeesAndCollectionsData(); 1264 await this.getFeesAndCollectionsData();
1101 await this.getExpensesData(); 1265 await this.getExpensesData();
1102 } else if (this.$store.state.schoolRole === "SUPERADMIN") { 1266 } else if (this.$store.state.schoolRole === "SUPERADMIN") {
1103 // this.token = this.$store.state.schoolToken; 1267 // this.token = this.$store.state.schoolToken;
1104 await this.getFeesAndCollectionsData(); 1268 await this.getFeesAndCollectionsData();
1105 await this.getExpensesData(); 1269 await this.getExpensesData();
1106 } else if (this.$store.state.role === "TEACHER") { 1270 } else if (this.$store.state.role === "TEACHER") {
1107 // this.token = this.$store.state.token; 1271 // this.token = this.$store.state.token;
1108 } else if (this.$store.state.role === "ACCOUNTANT") { 1272 } else if (this.$store.state.role === "ACCOUNTANT") {
1109 // this.token = this.$store.state.token; 1273 // this.token = this.$store.state.token;
1110 } else if (this.$store.state.role === "LIBRARIAN") { 1274 } else if (this.$store.state.role === "LIBRARIAN") {
1111 // this.token = this.$store.state.token; 1275 // this.token = this.$store.state.token;
1112 } else if (this.$store.state.role === "PARENT") { 1276 } else if (this.$store.state.role === "PARENT") {
1113 // this.token = this.$store.state.token; 1277 // this.token = this.$store.state.token;
1114 // await this.getparentStudents(); 1278 // await this.getparentStudents();
1115 this.studentsData = this.$store.getters.GET_STUDENTS_DATA; 1279 this.studentsData = this.$store.getters.GET_STUDENTS_DATA;
1116 console.log("students data - ", this.studentsData); 1280 console.log("students data - ", this.studentsData);
1117 await this.getCourses(); 1281 await this.getCourses();
1118 await this.getAnnoucementes(); 1282 await this.getAnnoucementes();
1119 } 1283 }
1120 this.role = this.$store.state.role; 1284 this.role = this.$store.state.role;
1121 1285
1122 await this.getStudents(); 1286 await this.getStudents();
1123 await this.getTeachers(); 1287 await this.getTeachers();
1124 await this.getParents(); 1288 await this.getParents();
1125 await this.getClasses(); 1289 await this.getClasses();
1126 await this.getNoticeData(); 1290 await this.getNoticeData();
1127 await this.getUserData(); 1291 await this.getUserData();
1128 1292
1129 /* get Latest events list for student login*/ 1293 /* get Latest events list for student login*/
1130 if (this.$store.state.role == "PARENT") { 1294 if (this.$store.state.role == "PARENT") {
1131 let response = await this.studentMeetingEvents({ 1295 let response = await this.studentMeetingEvents({
1132 studentId: localStorage.getItem("parentStudentId"), 1296 studentId: localStorage.getItem("parentStudentId"),
1133 }); 1297 });
1134 this.activityList = response.data.data; 1298 this.activityList = response.data.data;
1135 1299
1136 /* set activityEvents array to highlight event dates in calender */ 1300 /* set activityEvents array to highlight event dates in calender */
1137 for (var i = 0; i < this.activityList.length; i++) { 1301 for (var i = 0; i < this.activityList.length; i++) {
1138 let obj = {}; 1302 let obj = {};
1139 obj.date = moment(this.activityList[i].meetingEvent.dateOfEvent).format( 1303 obj.date = moment(this.activityList[i].meetingEvent.dateOfEvent).format(
1140 "YYYY/MM/DD" 1304 "YYYY/MM/DD"
1141 ); 1305 );
1142 obj.title = this.activityList[i].meetingEvent.title; 1306 obj.title = this.activityList[i].meetingEvent.title;
1143 obj._id = this.activityList[i].meetingEvent._id; 1307 obj._id = this.activityList[i].meetingEvent._id;
1144 this.activityEvents.push(obj); 1308 this.activityEvents.push(obj);
1145 } 1309 }
1146 } 1310 }
1147 1311
1148 /* get Latest events list for teacher login*/ 1312 /* get Latest events list for teacher login*/
1149 if (this.role == "TEACHER" || this.role == "ADMIN") { 1313 if (this.role == "TEACHER" || this.role == "ADMIN") {
1150 await this.getMeetingEventes(); 1314 await this.getMeetingEventes();
1151 } 1315 }
1152 }, 1316 },
1153 }; 1317 };
1154 </script> 1318 </script>
1155 1319
1156 <style scoped> 1320 <style scoped>
1157 @import "fullcalendar/dist/fullcalendar.css"; 1321 @import "fullcalendar/dist/fullcalendar.css";
1322 .wrap-text {
1323 -webkit-line-clamp: unset !important;