viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 2f89adbd737c27f153416fb81d2f6e92be8fd15a

Authored by Shikha Mishra
1 parent 1b9dd5859e
Exists in master and in 1 other branch ui-design

improve ui design while parent login

Showing 1 changed file with 391 additions and 147 deletions   Show diff stats
src/pages/Dashboard/dashboard.vue
Diff comments   View file @2f89adb
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 lazy> 72 <v-dialog v-model="viewEventDetails" max-width="500" persistent lazy>
73 <v-card flat class="card-style elevation-0" height="600" dark> 73 <v-card flat class="card-style elevation-0" height="600" dark>
74 <v-layout> 74 <v-layout>
75 <v-flex xs12> 75 <v-flex xs12>
76 <v-icon 76 <v-icon
77 size="24" 77 size="24"
78 class="right" 78 class="right"
79 @click="active=0;displayEventsList=[];dialogSchoolEvents = [];dialogMeetingEvents=[];viewEventDetails = false" 79 @click="
80 >cancel</v-icon> 80 active = 0;
81 displayEventsList = [];
82 dialogSchoolEvents = [];
83 dialogMeetingEvents = [];
84 viewEventDetails = false;
85 "
86 >cancel</v-icon
87 >
81 </v-flex> 88 </v-flex>
82 </v-layout> 89 </v-layout>
83 <v-tabs v-model="active" color="#7f62f8" dark v-if="displayEventsList.length == 0"> 90 <v-tabs
91 v-model="active"
92 color="#7f62f8"
93 dark
94 v-if="displayEventsList.length == 0"
95 >
84 <v-tabs-slider color="yellow"></v-tabs-slider> 96 <v-tabs-slider color="yellow"></v-tabs-slider>
85 <v-tab v-for="(tab,index) in tabs" :key="index"> 97 <v-tab v-for="(tab, index) in tabs" :key="index">
86 <div class="subheading py-1">{{ tab.name }}</div> 98 <div class="subheading py-1">{{ tab.name }}</div>
87 </v-tab> 99 </v-tab>
88 <!-- <v-tab href="#schoolTab" v-if="dialogSchoolEvents.length > 0">School Events</v-tab> 100 <!-- <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>--> 101 <v-tab href="#meetingTab" v-if="dialogMeetingEvents.length > 0">Meeting Events</v-tab>-->
90 102
91 <!-- SCHOOL EVENTS--> 103 <!-- SCHOOL EVENTS-->
92 <v-tab-item> 104 <v-tab-item>
93 <v-card flat class="card-style pa-2" dark v-if="dialogSchoolEvents.length > 0"> 105 <v-card
106 flat
107 class="card-style pa-2"
108 dark
109 v-if="dialogSchoolEvents.length > 0"
110 >
94 <v-container fluid> 111 <v-container fluid>
95 <v-divider class="white"></v-divider> 112 <v-divider class="white"></v-divider>
96 <v-card 113 <v-card
97 v-for="(particularEvent,index) in dialogSchoolEvents" 114 v-for="(particularEvent, index) in dialogSchoolEvents"
98 :key="index" 115 :key="index"
99 class="mt-3 pa-2 card-style white--text elevation-0" 116 class="mt-3 pa-2 card-style white--text elevation-0"
100 > 117 >
101 <div> 118 <div>
102 <div class="headline">{{particularEvent.title}}</div> 119 <div class="headline">{{ particularEvent.title }}</div>
103 <div>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div> 120 <div>
104 <div v-if="particularEvent.link">Start Time : {{particularEvent.startTime}}</div> 121 Date Of Event :
105 <div v-if="particularEvent.link">Duration : {{particularEvent.duration}}</div> 122 {{
123 moment(particularEvent.dateOfEvent).format(
124 "DD MMMM, YYYY"
125 )
126 }}
127 </div>
128 <div v-if="particularEvent.link">
129 Start Time : {{ particularEvent.startTime }}
130 </div>
131 <div v-if="particularEvent.link">
132 Duration : {{ particularEvent.duration }}
133 </div>
106 <div v-if="particularEvent.link"> 134 <div v-if="particularEvent.link">
107 Link : 135 Link :
108 <a :href="particularEvent.link">{{particularEvent.link}}</a> 136 <a :href="particularEvent.link">{{
137 particularEvent.link
138 }}</a>
139 </div>
140 <div v-if="particularEvent.description">
141 Description : {{ particularEvent.description }}
109 </div> 142 </div>
110 <div
111 v-if="particularEvent.description"
112 >Description : {{particularEvent.description}}</div>
113 </div> 143 </div>
114 <v-divider class="white mt-3"></v-divider> 144 <v-divider class="white mt-3"></v-divider>
115 </v-card> 145 </v-card>
116 </v-container> 146 </v-container>
117 </v-card> 147 </v-card>
118 </v-tab-item> 148 </v-tab-item>
119 149
120 <!-- MEETING EVENTS --> 150 <!-- MEETING EVENTS -->
121 <v-tab-item> 151 <v-tab-item>
122 <v-card v-if="dialogMeetingEvents.length > 0" flat class="card-style pa-2" dark> 152 <v-card
153 v-if="dialogMeetingEvents.length > 0"
154 flat
155 class="card-style pa-2"
156 dark
157 >
123 <v-container fluid> 158 <v-container fluid>
124 <v-divider class="white"></v-divider> 159 <v-divider class="white"></v-divider>
125 <v-card 160 <v-card
126 v-for="(particularEvent,index) in dialogMeetingEvents" 161 v-for="(particularEvent, index) in dialogMeetingEvents"
127 :key="index" 162 :key="index"
128 class="mt-3 pa-2 card-style white--text elevation-0" 163 class="mt-3 pa-2 card-style white--text elevation-0"
129 > 164 >
130 <div> 165 <div>
131 <div class="headline">{{particularEvent.title}}</div> 166 <div class="headline">{{ particularEvent.title }}</div>
132 <div>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div> 167 <div>
133 <div v-if="particularEvent.link">Start Time : {{particularEvent.startTime}}</div> 168 Date Of Event :
134 <div v-if="particularEvent.link">Duration : {{particularEvent.duration}}</div> 169 {{
170 moment(particularEvent.dateOfEvent).format(
171 "DD MMMM, YYYY"
172 )
173 }}
174 </div>
175 <div v-if="particularEvent.link">
176 Start Time : {{ particularEvent.startTime }}
177 </div>
178 <div v-if="particularEvent.link">
179 Duration : {{ particularEvent.duration }}
180 </div>
135 <div v-if="particularEvent.link"> 181 <div v-if="particularEvent.link">
136 Link : 182 Link :
137 <a :href="particularEvent.link">{{particularEvent.link}}</a> 183 <a :href="particularEvent.link">{{
184 particularEvent.link
185 }}</a>
186 </div>
187 <div v-if="particularEvent.description">
188 Description : {{ particularEvent.description }}
138 </div> 189 </div>
139 <div
140 v-if="particularEvent.description"
141 >Description : {{particularEvent.description}}</div>
142 </div> 190 </div>
143 <v-divider class="white mt-3"></v-divider> 191 <v-divider class="white mt-3"></v-divider>
144 </v-card> 192 </v-card>
145 </v-container> 193 </v-container>
146 </v-card> 194 </v-card>
147 </v-tab-item> 195 </v-tab-item>
148 </v-tabs> 196 </v-tabs>
149 197
150 <!-- IF NO MULTIPLE EVENTS ON SAME DATE --> 198 <!-- IF NO MULTIPLE EVENTS ON SAME DATE -->
151 <v-card flat class="card-style pa-2 elevation-0" dark v-else> 199 <v-card flat class="card-style pa-2 elevation-0" dark v-else>
152 <v-container fluid> 200 <v-container fluid>
153 <v-divider class="white"></v-divider> 201 <v-divider class="white"></v-divider>
154 <v-card 202 <v-card
155 v-for="(particularEvent,index) in displayEventsList" 203 v-for="(particularEvent, index) in displayEventsList"
156 :key="index" 204 :key="index"
157 class="mt-3 pa-2 card-style white--text elevation-0" 205 class="mt-3 pa-2 card-style white--text elevation-0"
158 > 206 >
159 <div> 207 <div>
160 <div class="headline">{{particularEvent.title}}</div> 208 <div class="headline">{{ particularEvent.title }}</div>
161 <div>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div> 209 <div>
162 <div v-if="particularEvent.link">Start Time : {{particularEvent.startTime}}</div> 210 Date Of Event :
163 <div v-if="particularEvent.link">Duration : {{particularEvent.duration}}</div> 211 {{
212 moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")
213 }}
214 </div>
215 <div v-if="particularEvent.link">
216 Start Time : {{ particularEvent.startTime }}
217 </div>
218 <div v-if="particularEvent.link">
219 Duration : {{ particularEvent.duration }}
220 </div>
164 <div v-if="particularEvent.link"> 221 <div v-if="particularEvent.link">
165 Link : 222 Link :
166 <a :href="particularEvent.link">{{particularEvent.link}}</a> 223 <a :href="particularEvent.link">{{ particularEvent.link }}</a>
224 </div>
225 <div v-if="particularEvent.description">
226 Description : {{ particularEvent.description }}
167 </div> 227 </div>
168 <div
169 v-if="particularEvent.description"
170 >Description : {{particularEvent.description}}</div>
171 </div> 228 </div>
172 <v-divider class="white mt-3"></v-divider> 229 <v-divider class="white mt-3"></v-divider>
173 </v-card> 230 </v-card>
174 </v-container> 231 </v-container>
175 </v-card> 232 </v-card>
176 </v-card> 233 </v-card>
177 </v-dialog> 234 </v-dialog>
178 235
179 <v-layout wrap row> 236 <v-layout wrap row>
180 <v-flex xs12 sm12 md8> 237 <v-flex xs12 sm12 md8>
181 <v-container fluid grid-list-xl> 238 <v-container fluid grid-list-xl>
182 <!-- ***** Total Students ***** --> 239 <!-- ***** Total Students ***** -->
183 <v-layout wrap class v-if="$store.state.role != 'PARENT' "> 240 <v-layout wrap class v-if="$store.state.role != 'PARENT'">
184 <v-flex xs12 sm12 md3> 241 <v-flex xs12 sm12 md3>
185 <router-link :to="{ name:'Students' }"> 242 <router-link :to="{ name: 'Students' }">
186 <v-card class="card pink-bgcolor"> 243 <v-card class="card pink-bgcolor">
187 <v-card-title primary-title class="titleCard white--text py-3">Students</v-card-title> 244 <v-card-title primary-title class="titleCard white--text py-3"
188 <img src="/static/icon/student.png" class="ml-2" width="40" alt="icons" /> 245 >Students</v-card-title
189 <v-card-title class="headline py-1 white--text">{{ students.length }}</v-card-title> 246 >
247 <img
248 src="/static/icon/student.png"
249 class="ml-2"
250 width="40"
251 alt="icons"
252 />
253 <v-card-title class="headline py-1 white--text">{{
254 students.length
255 }}</v-card-title>
190 </v-card> 256 </v-card>
191 </router-link> 257 </router-link>
192 </v-flex> 258 </v-flex>
193 <!-- ***** Total Teachers***** --> 259 <!-- ***** Total Teachers***** -->
194 <v-flex xs12 sm12 md3> 260 <v-flex xs12 sm12 md3>
195 <router-link :to="{ name:'Teachers' }"> 261 <router-link :to="{ name: 'Teachers' }">
196 <v-card flat class="card elevation-2 firozi-bgcolor"> 262 <v-card flat class="card elevation-2 firozi-bgcolor">
197 <v-card-title primary-title class="titleCard white--text py-3">Teachers</v-card-title> 263 <v-card-title primary-title class="titleCard white--text py-3"
198 <img src="/static/icon/teacher.png" class="ml-2" width="40" alt="icons" /> 264 >Teachers</v-card-title
265 >
266 <img
267 src="/static/icon/teacher.png"
268 class="ml-2"
269 width="40"
270 alt="icons"
271 />
199 272
200 <v-card-title class="headline py-1 white--text">{{ teachers.length }}</v-card-title> 273 <v-card-title class="headline py-1 white--text">{{
274 teachers.length
275 }}</v-card-title>
201 </v-card> 276 </v-card>
202 </router-link> 277 </router-link>
203 </v-flex> 278 </v-flex>
204 <!-- ***** Total Parents ***** --> 279 <!-- ***** Total Parents ***** -->
205 <v-flex xs12 sm12 md3> 280 <v-flex xs12 sm12 md3>
206 <router-link :to="{ name:'Parents' }"> 281 <router-link :to="{ name: 'Parents' }">
207 <v-card flat class="card yellow darken-3"> 282 <v-card flat class="card yellow darken-3">
208 <v-card-title primary-title class="titleCard white--text py-3">Parents</v-card-title> 283 <v-card-title primary-title class="titleCard white--text py-3"
209 <img src="/static/icon/parents.png" class="ml-3" width="40px" alt="icons" /> 284 >Parents</v-card-title
210 <v-card-title class="headline py-1 white--text">{{ parents.length }}</v-card-title> 285 >
286 <img
287 src="/static/icon/parents.png"
288 class="ml-3"
289 width="40px"
290 alt="icons"
291 />
292 <v-card-title class="headline py-1 white--text">{{
293 parents.length
294 }}</v-card-title>
211 </v-card> 295 </v-card>
212 </router-link> 296 </router-link>
213 </v-flex> 297 </v-flex>
214 <!-- ***** Total Class***** --> 298 <!-- ***** Total Class***** -->
215 <v-flex xs12 sm12 md3> 299 <v-flex xs12 sm12 md3>
216 <router-link :to="{ name:'Class' }"> 300 <router-link :to="{ name: 'Class' }">
217 <v-card flat class="card darkBlue-bgcolor"> 301 <v-card flat class="card darkBlue-bgcolor">
218 <v-card-title primary-title class="titleCard white--text py-3">Class</v-card-title> 302 <v-card-title primary-title class="titleCard white--text py-3"
219 <img src="/static/icon/class.png" width="40" alt="icons" class="ml-2" /> 303 >Class</v-card-title
220 <v-card-title class="headline py-1 white--text">{{ classes.length }}</v-card-title> 304 >
305 <img
306 src="/static/icon/class.png"
307 width="40"
308 alt="icons"
309 class="ml-2"
310 />
311 <v-card-title class="headline py-1 white--text">{{
312 classes.length
313 }}</v-card-title>
221 </v-card> 314 </v-card>
222 </router-link> 315 </router-link>
223 </v-flex> 316 </v-flex>
224 </v-layout> 317 </v-layout>
225 318
226 <p 319 <p
227 v-if="studentsData.length === 0 && role == 'PARENT'" 320 v-if="studentsData.length === 0 && role == 'PARENT'"
228 class="text-center title grey lighten-4 error--text" 321 class="text-center title grey lighten-4 error--text"
229 >You have no student registered with school</p> 322 >
323 You have no student registered with school
324 </p>
230 <!-- ACCOUNT --> 325 <!-- ACCOUNT -->
231 <v-layout v-if="role == 'SUPERADMIN'|| role == 'ADMIN'"> 326 <v-layout v-if="role == 'SUPERADMIN' || role == 'ADMIN'">
232 <v-flex xs12> 327 <v-flex xs12>
233 <v-card class="card mt-2 account-Card"> 328 <v-card class="card mt-2 account-Card">
234 <h4> 329 <h4>
235 <b>Account</b> 330 <b>Account</b>
236 </h4> 331 </h4>
237 <v-layout wrap> 332 <v-layout wrap>
238 <v-flex xs12 sm12 md3> 333 <v-flex xs12 sm12 md3>
239 <v-list two-line> 334 <v-list two-line>
240 <template> 335 <template>
241 <v-list-tile> 336 <v-list-tile>
242 <v-list-tile-avatar> 337 <v-list-tile-avatar>
243 <v-icon class="account-circle darkBlue-color">panorama_fish_eye</v-icon> 338 <v-icon class="account-circle darkBlue-color"
339 >panorama_fish_eye</v-icon
340 >
244 </v-list-tile-avatar> 341 </v-list-tile-avatar>
245 <v-list-tile-content> 342 <v-list-tile-content>
246 <v-list-tile-title class="mt-2"> 343 <v-list-tile-title class="mt-2">
247 <p class="subheading font-color">Fees</p> 344 <p class="subheading font-color">Fees</p>
248 </v-list-tile-title> 345 </v-list-tile-title>
249 <v-list-tile-title>Rs. {{ feeData.totalFees }}</v-list-tile-title> 346 <v-list-tile-title
347 >Rs. {{ feeData.totalFees }}</v-list-tile-title
348 >
250 </v-list-tile-content> 349 </v-list-tile-content>
251 </v-list-tile> 350 </v-list-tile>
252 <v-list-tile> 351 <v-list-tile>
253 <v-list-tile-avatar> 352 <v-list-tile-avatar>
254 <v-icon class="account-circle yellowDark-color">panorama_fish_eye</v-icon> 353 <v-icon class="account-circle yellowDark-color"
354 >panorama_fish_eye</v-icon
355 >
255 </v-list-tile-avatar> 356 </v-list-tile-avatar>
256 <v-list-tile-content> 357 <v-list-tile-content>
257 <v-list-tile-title class="mt-2"> 358 <v-list-tile-title class="mt-2">
258 <p class="subheading font-color">Collection</p> 359 <p class="subheading font-color">Collection</p>
259 </v-list-tile-title> 360 </v-list-tile-title>
260 <v-list-tile-title>Rs. {{ feeData.totalCollection }}</v-list-tile-title> 361 <v-list-tile-title
362 >Rs.
363 {{ feeData.totalCollection }}</v-list-tile-title
364 >
261 </v-list-tile-content> 365 </v-list-tile-content>
262 </v-list-tile> 366 </v-list-tile>
263 <v-list-tile> 367 <v-list-tile>
264 <v-list-tile-avatar> 368 <v-list-tile-avatar>
265 <v-icon class="account-circle pink-color">panorama_fish_eye</v-icon> 369 <v-icon class="account-circle pink-color"
370 >panorama_fish_eye</v-icon
371 >
266 </v-list-tile-avatar> 372 </v-list-tile-avatar>
267 <v-list-tile-content> 373 <v-list-tile-content>
268 <v-list-tile-title class="mt-2"> 374 <v-list-tile-title class="mt-2">
269 <p class="subheading font-color">Expences</p> 375 <p class="subheading font-color">Expences</p>
270 </v-list-tile-title> 376 </v-list-tile-title>
271 <v-list-tile-title>Rs. {{ expenseData.sum }}</v-list-tile-title> 377 <v-list-tile-title
378 >Rs. {{ expenseData.sum }}</v-list-tile-title
379 >
272 </v-list-tile-content> 380 </v-list-tile-content>
273 </v-list-tile> 381 </v-list-tile>
274 </template> 382 </template>
275 </v-list> 383 </v-list>
276 </v-flex> 384 </v-flex>
277 <v-flex xs12 sm12 md9 lg9> 385 <v-flex xs12 sm12 md9 lg9>
278 <div id="chart"> 386 <div id="chart">
279 <div v-if="showChart"> 387 <div v-if="showChart">
280 <apexchart 388 <apexchart
281 type="bar" 389 type="bar"
282 height="250" 390 height="250"
283 style="max-width: 800px !important" 391 style="max-width: 800px !important"
284 :options="chartOptions" 392 :options="chartOptions"
285 :series="series" 393 :series="series"
286 ></apexchart> 394 ></apexchart>
287 </div> 395 </div>
288 </div> 396 </div>
289 </v-flex> 397 </v-flex>
290 </v-layout> 398 </v-layout>
291 </v-card> 399 </v-card>
292 </v-flex> 400 </v-flex>
293 </v-layout> 401 </v-layout>
294 402
295 <!-- FOR ADMIN,TEACHER ROLE --> 403 <!-- FOR ADMIN,TEACHER ROLE -->
296 <v-layout row wrap v-if="role == 'ADMIN'||role == 'TEACHER'"> 404 <v-layout row wrap v-if="role == 'ADMIN' || role == 'TEACHER'">
297 <!-- NOTICE --> 405 <!-- NOTICE -->
298 <v-flex xs12 sm6> 406 <v-flex xs12 sm6>
299 <v-card class="card"> 407 <v-card class="card">
300 <v-container> 408 <v-container>
301 <v-card-title class="justify-center title font-weight-bold">Notice Board</v-card-title> 409 <v-card-title class="justify-center title font-weight-bold"
410 >Notice Board</v-card-title
411 >
302 <v-layout column> 412 <v-layout column>
303 <v-flex 413 <v-flex
304 v-for="(item,index) in noticeData" 414 v-for="(item, index) in noticeData"
305 :key="index" 415 :key="index"
306 style="cursor: pointer;" 416 style="cursor: pointer"
307 > 417 >
308 <v-layout column> 418 <v-layout column>
309 <!--Date--> 419 <!--Date-->
310 <v-flex class="pb-2 pl-2 pr-2"> 420 <v-flex class="pb-2 pl-2 pr-2">
311 <v-chip 421 <v-chip
312 :color="colorsArray[index%colorsArray.length]" 422 :color="colorsArray[index % colorsArray.length]"
313 text-color="white" 423 text-color="white"
314 class="ma-0" 424 class="ma-0"
315 >{{ moment(item.created).format("DD MMMM, YYYY") }}</v-chip> 425 >{{
426 moment(item.created).format("DD MMMM, YYYY")
427 }}</v-chip
428 >
316 </v-flex> 429 </v-flex>
317 <!-- title --> 430 <!-- title -->
318 <v-flex class="pa-2"> 431 <v-flex class="pa-2">
319 <div class="body-1 font-weight-bold px-2" @click="profile">{{item.title}}</div> 432 <div
433 class="body-1 font-weight-bold px-2"
434 @click="profile"
435 >
436 {{ item.title }}
437 </div>
320 </v-flex> 438 </v-flex>
321 439
322 <!-- divider --> 440 <!-- divider -->
323 <v-flex class="pa-2"> 441 <v-flex class="pa-2">
324 <v-divider></v-divider> 442 <v-divider></v-divider>
325 </v-flex> 443 </v-flex>
326 </v-layout> 444 </v-layout>
327 </v-flex> 445 </v-flex>
328 </v-layout> 446 </v-layout>
329 447
330 <!-- <v-data-table 448 <!-- <v-data-table
331 :items="noticeData" 449 :items="noticeData"
332 class="elevation-0" 450 class="elevation-0"
333 flat 451 flat
334 hide-actions 452 hide-actions
335 hide-headers 453 hide-headers
336 style="border-spacing: 0 !important;" 454 style="border-spacing: 0 !important;"
337 > 455 >
338 <template 456 <template
339 slot="items" 457 slot="items"
340 slot-scope="props" 458 slot-scope="props"
341 v-if="props.index < 5" 459 v-if="props.index < 5"
342 style="border-spacing: 0 !important;" 460 style="border-spacing: 0 !important;"
343 > 461 >
344 <tr class="td-notice"> 462 <tr class="td-notice">
345 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td> 463 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
346 <td> 464 <td>
347 <span class="grey--text caption">{{ date(props.item.created) }}</span> 465 <span class="grey--text caption">{{ date(props.item.created) }}</span>
348 <br /> 466 <br />
349 <span class="body-2">{{ props.item.title}}</span> 467 <span class="body-2">{{ props.item.title}}</span>
350 </td>--> 468 </td>-->
351 <!-- <td class="grey--text mt-2" >{{ props.item.description}}</td> --> 469 <!-- <td class="grey--text mt-2" >{{ props.item.description}}</td> -->
352 <!-- 470 <!--
353 <td class="text-xs-center"> 471 <td class="text-xs-center">
354 <span> 472 <span>
355 <v-tooltip top> 473 <v-tooltip top>
356 <img 474 <img
357 slot="activator" 475 slot="activator"
358 style="cursor:pointer; width:25px; height:25px; " 476 style="cursor:pointer; width:25px; height:25px; "
359 @click="profile" 477 @click="profile"
360 src="/static/icon/view.png" 478 src="/static/icon/view.png"
361 /> 479 />
362 <span>View</span> 480 <span>View</span>
363 </v-tooltip> 481 </v-tooltip>
364 </span> 482 </span>
365 </td> 483 </td>
366 </tr> 484 </tr>
367 </template> 485 </template>
368 </v-data-table>--> 486 </v-data-table>-->
369 </v-container> 487 </v-container>
370 </v-card> 488 </v-card>
371 </v-flex> 489 </v-flex>
372 490
373 <!-- SCHOOL EVENTS --> 491 <!-- SCHOOL EVENTS -->
374 <v-flex xs12 sm6> 492 <v-flex xs12 sm6>
375 <v-layout column> 493 <v-layout column>
376 <!-- school events --> 494 <!-- school events -->
377 <v-flex> 495 <v-flex>
378 <v-card class="card"> 496 <v-card class="card">
379 <v-container> 497 <v-container>
380 <v-card-title class="justify-center title font-weight-bold">School Events</v-card-title> 498 <v-card-title
499 class="justify-center title font-weight-bold"
500 >School Events</v-card-title
501 >
381 <div 502 <div
382 v-for="(schoolEvent,index) in schoolEvents" 503 v-for="(schoolEvent, index) in schoolEvents"
383 :key="schoolEvent.title" 504 :key="schoolEvent.title"
384 class="mt-2" 505 class="mt-2"
385 style="cursor: pointer;" 506 style="cursor: pointer"
386 @click="seeEventDetails(schoolEvent,'schoolEvent')" 507 @click="seeEventDetails(schoolEvent, 'schoolEvent')"
387 > 508 >
388 <!-- color dot--> 509 <!-- color dot-->
389 <span 510 <span
390 :style="{ 'background-color': colorsArray[index%colorsArray.length] }" 511 :style="{
391 style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;" 512 'background-color':
513 colorsArray[index % colorsArray.length],
514 }"
515 style="
516 height: 12px;
517 width: 12px;
518 border-radius: 50%;
519 display: inline-block;
520 vertical-align: top;
521 "
392 ></span> 522 ></span>
393 <div style="display: inline-block;" class="ml-2"> 523 <div style="display: inline-block" class="ml-2">
394 <div> 524 <div>
395 <!-- date of event --> 525 <!-- date of event -->
396 <div 526 <div
397 class="grey--text lighten-1 caption" 527 class="grey--text lighten-1 caption"
398 v-if="schoolEvent.dateOfEvent" 528 v-if="schoolEvent.dateOfEvent"
399 >{{moment(schoolEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div> 529 >
530 {{
531 moment(schoolEvent.dateOfEvent).format(
532 "DD MMMM, YYYY"
533 )
534 }}
535 </div>
400 <!-- event title--> 536 <!-- event title-->
401 <div class="body-1" v-if="schoolEvent.title">{{schoolEvent.title}}</div> 537 <div class="body-1" v-if="schoolEvent.title">
538 {{ schoolEvent.title }}
539 </div>
402 </div> 540 </div>
403 </div> 541 </div>
404 </div> 542 </div>
405 <div v-if="schoolEvents.length == 0"> 543 <div v-if="schoolEvents.length == 0">
406 <p class="text-center title grey lighten-4 error--text">No Data Found!</p> 544 <p class="text-center title grey lighten-4 error--text">
545 No Data Found!
546 </p>
407 </div> 547 </div>
408 </v-container> 548 </v-container>
409 </v-card> 549 </v-card>
410 </v-flex> 550 </v-flex>
411 <!-- apex charts - Male Female data --> 551 <!-- apex charts - Male Female data -->
412 <v-flex> 552 <v-flex>
413 <v-card> 553 <v-card>
414 <v-card-title class="justify-center title font-weight-bold">Students</v-card-title> 554 <v-card-title class="justify-center title font-weight-bold"
555 >Students</v-card-title
556 >
415 <div id="chart"> 557 <div id="chart">
416 <apexcharts 558 <apexcharts
417 type="donut" 559 type="donut"
418 :options="maleFemaleData" 560 :options="maleFemaleData"
419 :series="maleFemaleSeries" 561 :series="maleFemaleSeries"
420 /> 562 />
421 </div> 563 </div>
422 </v-card> 564 </v-card>
423 </v-flex> 565 </v-flex>
424 </v-layout> 566 </v-layout>
425 </v-flex> 567 </v-flex>
426 </v-layout> 568 </v-layout>
427 569
428 <v-layout row wrap v-if="role == 'PARENT'"> 570 <v-layout row wrap v-if="role == 'PARENT'">
429 <!-- ROLE - PARENT , MY KIDS --> 571 <!-- ROLE - PARENT , MY KIDS -->
430 <v-flex xs12> 572 <v-flex xs12>
431 <v-card class="elevation-3 card"> 573 <v-card class="elevation-3 card">
432 <v-container> 574 <v-container>
433 <v-card-title class="title font-weight-bold justify-center">My Kids</v-card-title> 575 <v-card-title class="title font-weight-bold justify-center"
434 <v-data-iterator 576 >My Kids</v-card-title
435 :items="activeStudentsList" 577 >
436 :rows-per-page-items="rowsPerPageItems" 578 <v-data-iterator
437 :pagination.sync="pagination" 579 :items="activeStudentsList"
438 content-tag="v-layout" 580 :rows-per-page-items="rowsPerPageItems"
439 row 581 :pagination.sync="pagination"
440 wrap 582 content-tag="v-layout"
441 > 583 row
442 <template v-slot:item="props"> 584 wrap
443 <v-flex xs12 sm6> 585 >
444 <div style="height: 150px; width: 100% display: inline-block;"> 586 <template v-slot:item="props">
587 <v-flex xs12 sm6>
588 <div
589 style="height: 150px; width: 100% display: inline-block;"
590 >
591 <v-card>
445 <v-layout row wrap> 592 <v-layout row wrap>
446 <!-- IMAGE OF ACTIVE STUDENT --> 593 <!-- IMAGE OF ACTIVE STUDENT -->
447 <v-flex xs3 class="text-xs-center"> 594 <v-flex xs3 class="text-xs-center">
448 <v-avatar size="50px"> 595 <v-avatar size="50px">
449 <img 596 <img
450 :src="props.item.profilePicUrl" 597 :src="props.item.profilePicUrl"
451 v-if="props.item.profilePicUrl" 598 v-if="props.item.profilePicUrl"
452 /> 599 />
453 <img src="/static/icon/user.png" v-else /> 600 <img src="/static/icon/user.png" v-else />
454 </v-avatar> 601 </v-avatar>
455 <!-- <div style="height: 90px;"> 602 <!-- <div style="height: 90px;">
456 <img 603 <img
457 :src="props.item.profilePicUrl" 604 :src="props.item.profilePicUrl"
458 alt="profileImage" 605 alt="profileImage"
459 width="80" 606 width="80"
460 v-if="props.item.profilePicUrl" 607 v-if="props.item.profilePicUrl"
461 /> 608 />
462 <img width="80" src="/static/icon/user.png" v-else /> 609 <img width="80" src="/static/icon/user.png" v-else />
463 </div>--> 610 </div>-->
464 </v-flex> 611 </v-flex>
465 <v-flex xs9 class="text-xs-center"> 612 <v-flex xs9 class="text-xs-center">
466 <!--NAME --> 613 <!--NAME -->
467 <v-layout class="pa-0 ma-0"> 614 <v-layout class="pa-0 ma-0">
468 <v-flex xs3 class="body-1 pa-0 ma-0"> 615 <v-flex xs3 class="body-1 pa-0 ma-0">
469 <span class="left">Name:</span> 616 <span class="left">Name:</span>
470 </v-flex> 617 </v-flex>
471 <v-flex xs9 class="body-1 pa-0 ml-2"> 618 <v-flex xs9 class="body-1 pa-0 ml-2">
472 <span class="left">{{props.item.name}}</span> 619 <span class="left">{{
620 props.item.name
621 }}</span>
473 </v-flex> 622 </v-flex>
474 </v-layout> 623 </v-layout>
475 <!--ROLLNO --> 624 <!--ROLLNO -->
476 <v-layout class="pa-0 ma-0"> 625 <v-layout class="pa-0 ma-0">
477 <v-flex xs3 class="body-1 pa-0 ma-0"> 626 <v-flex xs3 class="body-1 pa-0 ma-0">
478 <span class="left">Roll No:</span> 627 <span class="left">Roll No:</span>
479 </v-flex> 628 </v-flex>
480 <v-flex xs9 class="body-1 pa-0 ml-2"> 629 <v-flex xs9 class="body-1 pa-0 ml-2">
481 <span class="left">{{props.item.rollNo}}</span> 630 <span class="left">{{
631 props.item.rollNo
632 }}</span>
482 </v-flex> 633 </v-flex>
483 </v-layout> 634 </v-layout>
484 <!--GENDER --> 635 <!--GENDER -->
485 <v-layout class="pa-0 ma-0"> 636 <v-layout class="pa-0 ma-0">
486 <v-flex xs3 class="body-1 pa-0 ma-0"> 637 <v-flex xs3 class="body-1 pa-0 ma-0">
487 <span class="left">Gender:</span> 638 <span class="left">Gender:</span>
488 </v-flex> 639 </v-flex>
489 <v-flex xs9 class="body-1 pa-0 ml-2"> 640 <v-flex xs9 class="body-1 pa-0 ml-2">
490 <span class="left">{{props.item.gender}}</span> 641 <span class="left">{{
642 props.item.gender
643 }}</span>
491 </v-flex> 644 </v-flex>
492 </v-layout> 645 </v-layout>
493 <!--EMAIL --> 646 <!--EMAIL -->
494 <v-layout class="pa-0 ma-0"> 647 <v-layout class="pa-0 ma-0">
495 <v-flex xs3 class="body-1 pa-0 ma-0"> 648 <v-flex xs3 class="body-1 pa-0 ma-0">
496 <span class="left">Email:</span> 649 <span class="left">Email:</span>
497 </v-flex> 650 </v-flex>
498 <v-flex xs9 class="body-1 pa-0 ml-2"> 651 <v-flex xs9 class="body-1 pa-0 ml-2">
499 <span class="left">{{props.item.email}}</span> 652 <span class="left">{{
653 props.item.email
654 }}</span>
500 </v-flex> 655 </v-flex>
501 </v-layout> 656 </v-layout>
502 </v-flex> 657 </v-flex>
503 </v-layout> 658 </v-layout>
504 </div> 659 </v-card>
505 </v-flex> 660 </div>
506 </template> 661 </v-flex>
507 </v-data-iterator> 662 </template>
663 </v-data-iterator>
508 </v-container> 664 </v-container>
509 </v-card> 665 </v-card>
510 </v-flex> 666 </v-flex>
511 667
512 <!-- ROLE - PARENT, MY COURSES --> 668 <!-- ROLE - PARENT, MY COURSES -->
513 <v-flex xs12> 669 <v-flex xs12>
514 <v-card class="elevation-3 card"> 670 <v-card class="elevation-3 card">
515 <v-container> 671 <v-container>
516 <v-card-title class="justify-center title font-weight-bold">My Courses</v-card-title> 672 <v-card-title class="justify-center title font-weight-bold"
673 >My Courses</v-card-title
674 >
517 <v-layout wrap> 675 <v-layout wrap>
518 <v-flex xs12 sm12> 676 <v-flex xs12 sm12>
519 <v-list two-line> 677 <v-list two-line>
520 <template> 678 <template>
521 <v-list-tile v-for="(course,i) in courseData" :key="i"> 679 <v-list-tile
680 v-for="(course, i) in courseData"
681 :key="i"
682 >
522 <v-list-tile-avatar> 683 <v-list-tile-avatar>
523 <!-- <v-icon 684 <!-- <v-icon
524 class="account-circle darkBlue-color" 685 class="account-circle darkBlue-color"
525 style="cursor: pointer;" 686 style="cursor: pointer;"
526 @click="routeToCourseDetails(course._id)" 687 @click="routeToCourseDetails(course._id)"
527 >panorama_fish_eye</v-icon>--> 688 >panorama_fish_eye</v-icon>-->
528 <span> 689 <span>
529 <v-tooltip top> 690 <v-tooltip top>
530 <img 691 <img
531 slot="activator" 692 slot="activator"
532 style="cursor:pointer; width:25px; height:25px; " 693 style="
694 cursor: pointer;
695 width: 25px;
696 height: 25px;
697 "
533 src="/static/icon/view.png" 698 src="/static/icon/view.png"
534 @click="routeToCourseDetails(course._id)" 699 @click="routeToCourseDetails(course._id)"
535 /> 700 />
536 <span>View</span> 701 <span>View</span>
537 </v-tooltip> 702 </v-tooltip>
538 </span> 703 </span>
539 </v-list-tile-avatar> 704 </v-list-tile-avatar>
540 <v-list-tile-content> 705 <v-list-tile-content>
541 <v-list-tile-title 706 <v-list-tile-title
542 style="cursor: pointer;" 707 style="cursor: pointer"
543 @click="routeToCourseDetails(course._id)" 708 @click="routeToCourseDetails(course._id)"
544 >{{ course.courseName }}</v-list-tile-title> 709 >{{ course.courseName }}</v-list-tile-title
710 >
545 </v-list-tile-content> 711 </v-list-tile-content>
546 </v-list-tile> 712 </v-list-tile>
547 </template> 713 </template>
548 </v-list> 714 </v-list>
549 </v-flex> 715 </v-flex>
550 </v-layout> 716 </v-layout>
551 </v-container> 717 </v-container>
552 </v-card> 718 </v-card>
553 <!-- <v-card class="elevation-0 account-Card"> 719 <!-- <v-card class="elevation-0 account-Card">
554 <v-container> 720 <v-container>
555 <v-card-title class="title font-weight-bold">My Courses</v-card-title> 721 <v-card-title class="title font-weight-bold">My Courses</v-card-title>
556 <v-layout wrap> 722 <v-layout wrap>
557 <v-flex xs3 v-for="(course,i) in courseData" :key="i"> 723 <v-flex xs3 v-for="(course,i) in courseData" :key="i">
558 <v-btn block outline color="#71d9ea" dark> 724 <v-btn block outline color="#71d9ea" dark>
559 <span 725 <span
560 class="subheading font-weight-bold" 726 class="subheading font-weight-bold"
561 @click="routeToCourseDetails(course._id)" 727 @click="routeToCourseDetails(course._id)"
562 >{{ course.courseName }}</span> 728 >{{ course.courseName }}</span>
563 </v-btn> 729 </v-btn>
564 730
565 </v-flex> 731 </v-flex>
566 </v-layout> 732 </v-layout>
567 </v-container> 733 </v-container>
568 </v-card>--> 734 </v-card>-->
569 </v-flex> 735 </v-flex>
570 </v-layout> 736 </v-layout>
571 737
572 <v-layout row wrap v-if="role == 'PARENT'"> 738 <v-layout row wrap v-if="role == 'PARENT'">
573 <!-- ROLE - PARENT , LATEST ANNOUNCEMENTS --> 739 <!-- ROLE - PARENT , LATEST ANNOUNCEMENTS -->
574 <v-flex xs12 sm6 md6> 740 <v-flex xs12 sm6 md6>
575 <!-- NOTICE --> 741 <!-- NOTICE -->
576 <v-card class="elevation-3 card"> 742 <v-card class="elevation-3 card">
577 <v-container> 743 <v-container>
578 <v-card-title 744 <v-card-title
579 class="justify-center subheading font-weight-bold" 745 class="justify-center subheading font-weight-bold"
580 >Latest Announcements</v-card-title> 746 >Latest Announcements</v-card-title
747 >
581 <v-layout column> 748 <v-layout column>
582 <v-flex 749 <v-flex
583 v-for="(item,index) in annoucementData" 750 v-for="(item, index) in annoucementData"
584 :key="index" 751 :key="index"
585 style="cursor: pointer;" 752 style="cursor: pointer"
586 > 753 >
587 <v-layout column> 754 <v-layout column>
588 <!--Date--> 755 <!--Date-->
589 <v-flex class="pb-2 pl-2 pr-2"> 756 <v-flex class="pb-2 pl-2 pr-2">
590 <v-chip 757 <v-chip
591 :color="colorsArray[index%colorsArray.length]" 758 :color="colorsArray[index % colorsArray.length]"
592 text-color="white" 759 text-color="white"
593 class="ma-0" 760 class="ma-0"
594 >{{ moment(item.created).format("DD MMMM, YYYY") }}</v-chip> 761 >{{
762 moment(item.created).format("DD MMMM, YYYY")
763 }}</v-chip
764 >
595 </v-flex> 765 </v-flex>
596 <!-- title --> 766 <!-- title -->
597 <v-flex class="pa-2"> 767 <v-flex class="pa-2">
598 <div 768 <div
599 class="body-1 font-weight-bold px-2" 769 class="body-1 font-weight-bold px-2"
600 @click="profile" 770 @click="profile"
601 >{{item.discussionType}}</div> 771 >
772 {{ item.discussionType }}
773 </div>
602 </v-flex> 774 </v-flex>
603 775
604 <!-- divider --> 776 <!-- divider -->
605 <v-flex class="pa-2"> 777 <v-flex class="pa-2">
606 <v-divider></v-divider> 778 <v-divider></v-divider>
607 </v-flex> 779 </v-flex>
608 </v-layout> 780 </v-layout>
609 </v-flex> 781 </v-flex>
610 </v-layout> 782 </v-layout>
611 </v-container> 783 </v-container>
612 </v-card> 784 </v-card>
613 </v-flex> 785 </v-flex>
614 786
615 <v-flex xs12 sm6> 787 <v-flex xs12 sm6>
616 <v-layout column> 788 <v-layout column>
617 <!-- ROLE - PARENT, SCHOOL EVENTS --> 789 <!-- ROLE - PARENT, SCHOOL EVENTS -->
618 <v-flex> 790 <v-flex>
619 <v-card class="elevation-3 card"> 791 <v-card class="elevation-3 card">
620 <v-container> 792 <v-container>
621 <v-card-title class="justify-center subheading font-weight-bold">School Events</v-card-title> 793 <v-card-title
794 class="justify-center subheading font-weight-bold"
795 >School Events</v-card-title
796 >
622 <div 797 <div
623 v-for="(schoolEvent,index) in schoolEvents" 798 v-for="(schoolEvent, index) in schoolEvents"
624 :key="schoolEvent.title" 799 :key="schoolEvent.title"
625 class="mt-2" 800 class="mt-2"
626 style="cursor: pointer;" 801 style="cursor: pointer"
627 @click="seeEventDetails(schoolEvent,'schoolEvent')" 802 @click="seeEventDetails(schoolEvent, 'schoolEvent')"
628 > 803 >
629 <!-- color dot--> 804 <!-- color dot-->
630 <span 805 <span
631 :style="{ 'background-color': colorsArray[index%colorsArray.length] }" 806 :style="{
632 style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;" 807 'background-color':
808 colorsArray[index % colorsArray.length],
809 }"
810 style="
811 height: 12px;
812 width: 12px;
813 border-radius: 50%;
814 display: inline-block;
815 vertical-align: top;
816 "
633 ></span> 817 ></span>
634 <div style="display: inline-block;" class="ml-2"> 818 <div style="display: inline-block" class="ml-2">
635 <div> 819 <div>
636 <!-- date of event --> 820 <!-- date of event -->
637 <div 821 <div
638 class="grey--text lighten-1 caption" 822 class="grey--text lighten-1 caption"
639 v-if="schoolEvent.dateOfEvent" 823 v-if="schoolEvent.dateOfEvent"
640 >{{moment(schoolEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div> 824 >
825 {{
826 moment(schoolEvent.dateOfEvent).format(
827 "DD MMMM, YYYY"
828 )
829 }}
830 </div>
641 <!-- event title--> 831 <!-- event title-->
642 <div class="body-1" v-if="schoolEvent.title">{{schoolEvent.title}}</div> 832 <div class="body-1" v-if="schoolEvent.title">
833 {{ schoolEvent.title }}
834 </div>
643 </div> 835 </div>
644 </div> 836 </div>
645 </div> 837 </div>
646 <div v-if="schoolEvents.length == 0"> 838 <div v-if="schoolEvents.length == 0">
647 <p class="text-center title grey lighten-4 error--text">No Data Found!</p> 839 <p class="text-center title grey lighten-4 error--text">
840 No Data Found!
841 </p>
648 </div> 842 </div>
649 </v-container> 843 </v-container>
650 </v-card> 844 </v-card>
651 </v-flex> 845 </v-flex>
652 </v-layout> 846 </v-layout>
653 </v-flex> 847 </v-flex>
654 </v-layout> 848 </v-layout>
655 </v-container> 849 </v-container>
656 </v-flex> 850 </v-flex>
657 <v-spacer></v-spacer> 851 <v-spacer></v-spacer>
658 <!-- SIDE BAR --> 852 <!-- SIDE BAR -->
659 <v-flex xs12 sm12 md4> 853 <v-flex xs12 sm12 md4>
660 <v-card height="100%" class="elevation-0 mt-3 profileDasboard"> 854 <v-card height="100%" class="elevation-0 mt-3 profileDasboard">
661 <v-card-text class="px-2"> 855 <v-card-text class="px-2">
662 <h4 class="text-xs-center py-3"> 856 <h4 class="text-xs-center py-3">
663 <b>Profile</b> 857 <b>Profile</b>
664 </h4> 858 </h4>
665 <v-flex xs12 class="py-3"> 859 <v-flex xs12 class="py-3">
666 <v-layout wrap> 860 <v-layout wrap>
667 <v-flex xs12 sm12 md4> 861 <v-flex xs12 sm12 md4>
668 <img 862 <img
669 src="/static/icon/user.png" 863 src="/static/icon/user.png"
670 v-if="!userData.profilePicUrl && !userData.schoolLogoUrl" 864 v-if="!userData.profilePicUrl && !userData.schoolLogoUrl"
671 width="80" 865 width="80"
672 /> 866 />
673 <img 867 <img
674 :src="userData.profilePicUrl" 868 :src="userData.profilePicUrl"
675 onerror="this.src='/static/icon/user.png';" 869 onerror="this.src='/static/icon/user.png';"
676 v-if="userData.profilePicUrl" 870 v-if="userData.profilePicUrl"
677 width="80" 871 width="80"
678 /> 872 />
679 <img 873 <img
680 :src="userData.schoolLogoUrl" 874 :src="userData.schoolLogoUrl"
681 onerror="this.src='/static/icon/user.png';" 875 onerror="this.src='/static/icon/user.png';"
682 v-if="userData.schoolLogoUrl" 876 v-if="userData.schoolLogoUrl"
683 width="80" 877 width="80"
684 /> 878 />
685 </v-flex> 879 </v-flex>
686 <v-flex xs12 sm12 md6> 880 <v-flex xs12 sm12 md6>
687 <p class="mb-0 body-1"> 881 <p class="mb-0 body-1">
688 <i>{{ userData.name }}</i> 882 <i>{{ userData.name }}</i>
689 </p> 883 </p>
690 <p class="mb-0 caption grey--text">{{ userData.email }}</p> 884 <p class="mb-0 caption grey--text">{{ userData.email }}</p>
691 <p class="mb-0 caption grey--text">{{ userData.mobile }}</p> 885 <p class="mb-0 caption grey--text">{{ userData.mobile }}</p>
692 <address class="caption grey--text mb-3">{{ userData.address }}</address> 886 <address class="caption grey--text mb-3">
887 {{ userData.address }}
888 </address>
693 </v-flex> 889 </v-flex>
694 </v-layout> 890 </v-layout>
695 </v-flex> 891 </v-flex>
696 <hr /> 892 <hr />
697 <div class="text-xs-center py-3 subheading font-weight-bold">Calender</div> 893 <div class="text-xs-center py-3 subheading font-weight-bold">
894 Calender
895 </div>
698 896
699 <vue-event-calendar :events="activityEvents" @day-changed="handleDayChanged($event)"></vue-event-calendar> 897 <vue-event-calendar
898 :events="activityEvents"
899 @day-changed="handleDayChanged($event)"
900 ></vue-event-calendar>
700 901
701 <!-- MEETING EVENTS --> 902 <!-- MEETING EVENTS -->
702 <!-- IF ROLE IS ADMIN --> 903 <!-- IF ROLE IS ADMIN -->
703 <v-card class="my-3 elevation-0"> 904 <v-card class="my-3 elevation-0">
704 <v-card-text v-if="$store.state.role === 'ADMIN' "> 905 <v-card-text v-if="$store.state.role === 'ADMIN'">
705 <!-- MEETING EVENTS --> 906 <!-- MEETING EVENTS -->
706 <v-card-title class="justify-center subheading font-weight-bold">Meeting Events</v-card-title> 907 <v-card-title class="justify-center subheading font-weight-bold"
908 >Meeting Events</v-card-title
909 >
707 <div 910 <div
708 v-for="(activity,index) in activityList" 911 v-for="(activity, index) in activityList"
709 :key="index" 912 :key="index"
710 class="mt-2" 913 class="mt-2"
711 style="cursor: pointer;" 914 style="cursor: pointer"
712 @click="seeEventDetails(activity)" 915 @click="seeEventDetails(activity)"
713 > 916 >
714 <span 917 <span
715 :style="{ 'background-color': colorsArray[index%colorsArray.length] }" 918 :style="{
716 style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;" 919 'background-color':
920 colorsArray[index % colorsArray.length],
921 }"
922 style="
923 height: 12px;
924 width: 12px;
925 border-radius: 50%;
926 display: inline-block;
927 vertical-align: top;
928 "
717 ></span> 929 ></span>
718 <div style="display: inline-block;" class="ml-2"> 930 <div style="display: inline-block" class="ml-2">
719 <div> 931 <div>
720 <div 932 <div
721 class="grey--text lighten-1 caption" 933 class="grey--text lighten-1 caption"
722 v-if="activity.dateOfEvent" 934 v-if="activity.dateOfEvent"
723 >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div> 935 >
724 <div class="body-1" v-if="activity.title">{{activity.title}}</div> 936 {{
937 moment(activity.dateOfEvent).format("DD MMMM, YYYY")
938 }}
939 </div>
940 <div class="body-1" v-if="activity.title">
941 {{ activity.title }}
942 </div>
725 </div> 943 </div>
726 </div> 944 </div>
727 </div> 945 </div>
728 <div v-if="activityList.length == 0"> 946 <div v-if="activityList.length == 0">
729 <p class="text-center title grey lighten-4 error--text">No Data Found!</p> 947 <p class="text-center title grey lighten-4 error--text">
948 No Data Found!
949 </p>
730 </div> 950 </div>
731 </v-card-text> 951 </v-card-text>
732 952
733 <!-- ROLE IS NOT ADMIN --> 953 <!-- ROLE IS NOT ADMIN -->
734 <v-card-text v-if="$store.state.role != 'ADMIN'"> 954 <v-card-text v-if="$store.state.role != 'ADMIN'">
735 <v-card-title class="justify-center subheading font-weight-bold">Meeting Events</v-card-title> 955 <v-card-title class="justify-center subheading font-weight-bold"
956 >Meeting Events</v-card-title
957 >
736 <div 958 <div
737 v-for="(activity,index) in activityList" 959 v-for="(activity, index) in activityList"
738 :key="index" 960 :key="index"
739 class="mt-2" 961 class="mt-2"
740 style="cursor: pointer;" 962 style="cursor: pointer"
741 @click="seeEventDetails(activity)" 963 @click="seeEventDetails(activity)"
742 > 964 >
743 <span 965 <span
744 :style="{ 'background-color': colorsArray[index%colorsArray.length] }" 966 :style="{
745 style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;" 967 'background-color':
968 colorsArray[index % colorsArray.length],
969 }"
970 style="
971 height: 12px;
972 width: 12px;
973 border-radius: 50%;
974 display: inline-block;
975 vertical-align: top;
976 "
746 ></span> 977 ></span>
747 <div style="display: inline-block;" class="ml-2"> 978 <div style="display: inline-block" class="ml-2">
748 <!-- MEETING EVENTS FOR PARENT --> 979 <!-- MEETING EVENTS FOR PARENT -->
749 <div v-if="$store.state.role === 'PARENT' "> 980 <div v-if="$store.state.role === 'PARENT'">
750 <div 981 <div
751 class="grey--text lighten-1 caption" 982 class="grey--text lighten-1 caption"
752 v-if="activity.meetingEvent" 983 v-if="activity.meetingEvent"
753 >{{moment(activity.meetingEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div> 984 >
754 <div 985 {{
755 class="body-2" 986 moment(activity.meetingEvent.dateOfEvent).format(
756 v-if="activity.meetingEvent" 987 "DD MMMM, YYYY"
757 >{{activity.meetingEvent.title}}</div> 988 )
989 }}
990 </div>
991 <div class="body-2" v-if="activity.meetingEvent">
992 {{ activity.meetingEvent.title }}
993 </div>
758 </div> 994 </div>
759 995
760 <!-- MEETING EVENTS FOR TEACHER --> 996 <!-- MEETING EVENTS FOR TEACHER -->
761 <div v-if="role === 'TEACHER'"> 997 <div v-if="role === 'TEACHER'">
762 <div 998 <div
763 class="grey--text lighten-1 caption" 999 class="grey--text lighten-1 caption"
764 v-if="activity.dateOfEvent" 1000 v-if="activity.dateOfEvent"
765 >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div> 1001 >
766 <div class="body-2" v-if="activity.title">{{activity.title}}</div> 1002 {{
1003 moment(activity.dateOfEvent).format("DD MMMM, YYYY")
1004 }}
1005 </div>
1006 <div class="body-2" v-if="activity.title">
1007 {{ activity.title }}
1008 </div>
767 </div> 1009 </div>
768 </div> 1010 </div>
769 <div v-if="activityList.length == 0"> 1011 <div v-if="activityList.length == 0">
770 <p class="text-center title grey lighten-4 error--text">No Data Found!</p> 1012 <p class="text-center title grey lighten-4 error--text">
1013 No Data Found!
1014 </p>
771 </div> 1015 </div>
772 </div> 1016 </div>
773 </v-card-text> 1017 </v-card-text>
774 </v-card> 1018 </v-card>
775 </v-card-text> 1019 </v-card-text>
776 </v-card> 1020 </v-card>
777 </v-flex> 1021 </v-flex>
778 </v-layout> 1022 </v-layout>
779 1023
780 <v-dialog v-model="dialog" max-width="500" persistent> 1024 <v-dialog v-model="dialog" max-width="500" persistent>
781 <v-card color="grey lighten-4" flat> 1025 <v-card color="grey lighten-4" flat>
782 <v-toolbar dark color="fixcolors"> 1026 <v-toolbar dark color="fixcolors">
783 <v-spacer></v-spacer> 1027 <v-spacer></v-spacer>
784 <v-btn icon @click="dialog= false"> 1028 <v-btn icon @click="dialog = false">
785 <v-icon>close</v-icon> 1029 <v-icon>close</v-icon>
786 </v-btn> 1030 </v-btn>
787 </v-toolbar> 1031 </v-toolbar>
788 <v-flex class="py-4"> 1032 <v-flex class="py-4">
789 <v-list-tile> 1033 <v-list-tile>
790 <v-list-tile-action> 1034 <v-list-tile-action>
791 <v-icon>edit</v-icon> 1035 <v-icon>edit</v-icon>
792 </v-list-tile-action> 1036 </v-list-tile-action>
793 <v-list-tile-content> 1037 <v-list-tile-content>
794 <v-list-tile-title>{{ selected.title }}</v-list-tile-title> 1038 <v-list-tile-title>{{ selected.title }}</v-list-tile-title>
795 </v-list-tile-content> 1039 </v-list-tile-content>
796 </v-list-tile> 1040 </v-list-tile>
797 <v-list-tile> 1041 <v-list-tile>
798 <v-list-tile-action> 1042 <v-list-tile-action>
799 <v-icon>access_time</v-icon> 1043 <v-icon>access_time</v-icon>
800 </v-list-tile-action> 1044 </v-list-tile-action>
801 <v-list-tile-content> 1045 <v-list-tile-content>
802 <v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title> 1046 <v-list-tile-title>{{ date(selected.start) }}</v-list-tile-title>
803 </v-list-tile-content> 1047 </v-list-tile-content>
804 </v-list-tile> 1048 </v-list-tile>
805 </v-flex> 1049 </v-flex>
806 </v-card> 1050 </v-card>
807 </v-dialog> 1051 </v-dialog>
808 </v-app> 1052 </v-app>
809 </template> 1053 </template>
810 1054
811 <script> 1055 <script>
812 import http from "@/Services/http.js"; 1056 import http from "@/Services/http.js";
813 import moment from "moment"; 1057 import moment from "moment";
814 import AllApiCalls from "@/Services/AllApiCalls.js"; 1058 import AllApiCalls from "@/Services/AllApiCalls.js";
815 import VueApexCharts from "vue-apexcharts"; 1059 import VueApexCharts from "vue-apexcharts";
816 // import { FunctionalCalendar } from "vue-functional-calendar"; 1060 // import { FunctionalCalendar } from "vue-functional-calendar";
817 1061
818 export default { 1062 export default {
819 components: { 1063 components: {
820 apexcharts: VueApexCharts, 1064 apexcharts: VueApexCharts,
821 }, 1065 },
822 mixins: [AllApiCalls], 1066 mixins: [AllApiCalls],
823 data() { 1067 data() {
824 return { 1068 return {
825 studentsData: [], 1069 studentsData: [],
826 // data: { 1070 // data: {
827 // clieckedToday: false 1071 // clieckedToday: false
828 // }, 1072 // },
829 // markedDates: ["16/4/2019", "18/4/2019", "20/4/2019", "21/4/2019"], 1073 // markedDates: ["16/4/2019", "18/4/2019", "20/4/2019", "21/4/2019"],
830 // calendarData: {}, 1074 // calendarData: {},
831 // calendar: {}, 1075 // calendar: {},
832 1076
833 // DIALOG BOX EVENT DETAILS 1077 // DIALOG BOX EVENT DETAILS
834 tabs: [ 1078 tabs: [
835 { name: "School Events", icon: "mdi-account" }, 1079 { name: "School Events", icon: "mdi-account" },
836 { name: "Meeting Events", icon: "mdi-account-outline" }, 1080 { name: "Meeting Events", icon: "mdi-account-outline" },
837 ], 1081 ],
838 viewEventDetails: false, 1082 viewEventDetails: false,
839 active: 0, 1083 active: 0,
840 particularEvent: [], 1084 particularEvent: [],
841 displayEventsList: [], 1085 displayEventsList: [],
842 dialogSchoolEvents: [], 1086 dialogSchoolEvents: [],
843 dialogMeetingEvents: [], 1087 dialogMeetingEvents: [],
844 1088
845 // apexCharts 1089 // apexCharts
846 maleFemaleSeries: [], 1090 maleFemaleSeries: [],
847 maleFemaleData: { 1091 maleFemaleData: {
848 labels: ["Male", "Female"], 1092 labels: ["Male", "Female"],
849 legend: { 1093 legend: {
850 formatter: function (val, opts) { 1094 formatter: function (val, opts) {
851 return val + " - " + opts.w.globals.series[opts.seriesIndex]; 1095 return val + " - " + opts.w.globals.series[opts.seriesIndex];
852 }, 1096 },
853 position: "bottom", 1097 position: "bottom",
854 }, 1098 },
855 dataLabels: { 1099 dataLabels: {
856 enabled: true, 1100 enabled: true,
857 formatter: function (val, opts) { 1101 formatter: function (val, opts) {
858 return opts.w.globals.series[opts.seriesIndex]; 1102 return opts.w.globals.series[opts.seriesIndex];
859 }, 1103 },
860 }, 1104 },
861 }, 1105 },
862 1106
863 // CALENDER 1107 // CALENDER
864 moment: moment, 1108 moment: moment,
865 activityEvents: [], 1109 activityEvents: [],
866 onlineUser: [ 1110 onlineUser: [
867 { 1111 {
868 user: "Student Demo", 1112 user: "Student Demo",
869 }, 1113 },
870 { 1114 {
871 user: "Teacher Demo", 1115 user: "Teacher Demo",
872 }, 1116 },
873 { 1117 {
874 user: "Priyansh Gupta", 1118 user: "Priyansh Gupta",
875 }, 1119 },
876 { 1120 {
877 user: "Gaurav Aggarwal", 1121 user: "Gaurav Aggarwal",
878 }, 1122 },
879 { 1123 {
880 user: "Approve Arorra", 1124 user: "Approve Arorra",
881 }, 1125 },
882 ], 1126 ],
883 showLoader: false, 1127 showLoader: false,
884 calendarData: {}, 1128 calendarData: {},
885 dialog: false, 1129 dialog: false,
886 dialogNotice: false, 1130 dialogNotice: false,
887 HolidaysList: [], 1131 HolidaysList: [],
888 EventsList: [], 1132 EventsList: [],
889 events: [], 1133 events: [],
890 config: { 1134 config: {
891 eventClick: (event) => { 1135 eventClick: (event) => {
892 this.selected = event; 1136 this.selected = event;
893 this.dialog = true; 1137 this.dialog = true;
894 }, 1138 },
895 }, 1139 },
896 selected: {}, 1140 selected: {},
897 barGraph: [], 1141 barGraph: [],
898 // notice: {}, 1142 // notice: {},
899 userData: {}, 1143 userData: {},
900 dated: new Date(2018, 0, 9), 1144 dated: new Date(2018, 0, 9),
901 userList: [], 1145 userList: [],
902 sectionList: [], 1146 sectionList: [],
903 students: "", 1147 students: "",
904 parents: "", 1148 parents: "",
905 teachers: "", 1149 teachers: "",
906 classes: "", 1150 classes: "",
907 noticeData: [], 1151 noticeData: [],
908 expenseData: [], 1152 expenseData: [],
909 feeData: [], 1153 feeData: [],
910 collectionData: [], 1154 collectionData: [],
911 courseData: [], 1155 courseData: [],
912 1156
913 annoucementData: [], 1157 annoucementData: [],
914 role: "", 1158 role: "",
915 attrs: [ 1159 attrs: [
916 { 1160 {
917 key: "today", 1161 key: "today",
918 highlight: true, 1162 highlight: true,
919 dates: new Date(), 1163 dates: new Date(),
920 }, 1164 },
921 ], 1165 ],
922 drawer: true, 1166 drawer: true,
923 items: [ 1167 items: [
924 { title: "Home", icon: "dashboard" }, 1168 { title: "Home", icon: "dashboard" },
925 { title: "About", icon: "question_answer" }, 1169 { title: "About", icon: "question_answer" },
926 ], 1170 ],
927 right: null, 1171 right: null,
928 1172
929 series: [ 1173 series: [
930 { 1174 {
931 name: "Total", 1175 name: "Total",
932 data: [], 1176 data: [],
933 }, 1177 },
934 ], 1178 ],
935 showChart: false, 1179 showChart: false,
936 chartOptions: { 1180 chartOptions: {
937 chart: { 1181 chart: {
938 type: "bar", 1182 type: "bar",
939 height: 150, 1183 height: 150,
940 stacked: true, 1184 stacked: true,
941 // animations: { 1185 // animations: {
942 // enabled: true, 1186 // enabled: true,
943 // easing: "easeinout", 1187 // easing: "easeinout",
944 // speed: 1200, 1188 // speed: 1200,
945 // animateGradually: { 1189 // animateGradually: {
946 // enabled: true, 1190 // enabled: true,
947 // delay: 450 1191 // delay: 450
948 // }, 1192 // },
949 // dynamicAnimation: { 1193 // dynamicAnimation: {
950 // enabled: true, 1194 // enabled: true,
951 // speed: 450 1195 // speed: 450
952 // } 1196 // }
953 // } 1197 // }
954 }, 1198 },
955 plotOptions: { 1199 plotOptions: {
956 bar: { 1200 bar: {
957 horizontal: false, 1201 horizontal: false,
958 columnWidth: "25%", 1202 columnWidth: "25%",
959 // endingShape: "rounded", 1203 // endingShape: "rounded",
960 distributed: true, 1204 distributed: true,
961 }, 1205 },
962 }, 1206 },
963 responsive: [ 1207 responsive: [
964 { 1208 {
965 breakpoint: 480, 1209 breakpoint: 480,
966 options: { 1210 options: {
967 legend: { 1211 legend: {
968 position: "bottom", 1212 position: "bottom",
969 offsetX: -10, 1213 offsetX: -10,
970 offsetY: 0, 1214 offsetY: 0,
971 }, 1215 },
972 }, 1216 },
973 }, 1217 },
974 ], 1218 ],
975 legend: { 1219 legend: {
976 show: false, 1220 show: false,
977 }, 1221 },
978 colors: ["#7852cc", "#f9a825", "#ff8a89"], 1222 colors: ["#7852cc", "#f9a825", "#ff8a89"],
979 dataLabels: { 1223 dataLabels: {
980 enabled: false, 1224 enabled: false,
981 }, 1225 },
982 stroke: { 1226 stroke: {
983 show: true, 1227 show: true,
984 width: 2, 1228 width: 2,
985 colors: ["transparent"], 1229 colors: ["transparent"],
986 }, 1230 },
987 xaxis: { 1231 xaxis: {
988 categories: ["Fee", "Collections", "Expences"], 1232 categories: ["Fee", "Collections", "Expences"],
989 }, 1233 },
990 yaxis: { 1234 yaxis: {
991 title: { 1235 title: {
992 text: "", 1236 text: "",
993 }, 1237 },
994 }, 1238 },
995 fill: { 1239 fill: {
996 opacity: 1, 1240 opacity: 1,
997 }, 1241 },
998 tooltip: { 1242 tooltip: {
999 y: { 1243 y: {
1000 formatter: function (val, opts) { 1244 formatter: function (val, opts) {
1001 return "" + val + " "; 1245 return "" + val + " ";
1002 }, 1246 },
1003 }, 1247 },
1004 }, 1248 },
1005 }, 1249 },
1006 1250
1007 /* ROLE PARENT - MY KIDS */ 1251 /* ROLE PARENT - MY KIDS */
1008 studentsData: [], 1252 studentsData: [],
1009 activeStudent: {}, 1253 activeStudent: {},
1010 activeStudentsList: [], 1254 activeStudentsList: [],
1011 rowsPerPageItems: [2], 1255 rowsPerPageItems: [2],
1012 pagination: { 1256 pagination: {
1013 rowsPerPage: 2, 1257 rowsPerPage: 2,
1014 }, 1258 },
1015 1259
1016 // LATEST ACTIVITY 1260 // LATEST ACTIVITY
1017 colorsArray: ["#ff8a89", "#71d9ea", "#7852cc", "#F9A825"], 1261 colorsArray: ["#ff8a89", "#71d9ea", "#7852cc", "#F9A825"],
1018 activityList: [], 1262 activityList: [],
1019 }; 1263 };
1020 }, 1264 },
1021 1265
1022 methods: { 1266 methods: {
1023 test(e) { 1267 test(e) {
1024 // console.log(" test - ", e); 1268 // console.log(" test - ", e);
1025 }, 1269 },
1026 1270
1027 /*WHEN CALENDER IS CLICKED - DISPLAYS EVENTS IN DIALOG BOX */ 1271 /*WHEN CALENDER IS CLICKED - DISPLAYS EVENTS IN DIALOG BOX */
1028 async handleDayChanged(e) { 1272 async handleDayChanged(e) {
1029 // console.log("event calender - ", e); 1273 // console.log("event calender - ", e);
1030 /*the list of events that will be used in dialog box to display events */ 1274 /*the list of events that will be used in dialog box to display events */
1031 1275
1032 this.dialogMeetingEvents = []; 1276 this.dialogMeetingEvents = [];
1033 this.dialogSchoolEvents = []; 1277 this.dialogSchoolEvents = [];
1034 1278
1035 for (var i = 0; i < e.events.length; i++) { 1279 for (var i = 0; i < e.events.length; i++) {
1036 if (e.events[i].eventType == "meetingEvent") { 1280 if (e.events[i].eventType == "meetingEvent") {
1037 let meetingEventResponse = await this.getParticularMeetingEvent({ 1281 let meetingEventResponse = await this.getParticularMeetingEvent({
1038 meetingEventId: e.events[i]._id, 1282 meetingEventId: e.events[i]._id,
1039 }); 1283 });
1040 this.dialogMeetingEvents.push(meetingEventResponse.data.data); 1284 this.dialogMeetingEvents.push(meetingEventResponse.data.data);
1041 } 1285 }
1042 if (e.events[i].eventType == "schoolEvent") { 1286 if (e.events[i].eventType == "schoolEvent") {
1043 let schoolEventResponse = await this.getParticularSchoolEvent({ 1287 let schoolEventResponse = await this.getParticularSchoolEvent({
1044 schoolEventId: e.events[i]._id, 1288 schoolEventId: e.events[i]._id,
1045 }); 1289 });
1046 this.dialogSchoolEvents.push(schoolEventResponse.data.data); 1290 this.dialogSchoolEvents.push(schoolEventResponse.data.data);
1047 } 1291 }
1048 } 1292 }
1049 /* Opens the dialog box */ 1293 /* Opens the dialog box */
1050 this.viewEventDetails = true; 1294 this.viewEventDetails = true;
1051 }, 1295 },
1052 1296
1053 /* see meeting events, school events individually (when calender is not clicked) */ 1297 /* see meeting events, school events individually (when calender is not clicked) */
1054 async seeEventDetails(activity, message) { 1298 async seeEventDetails(activity, message) {
1055 // if (this.$store.state.role === "TEACHER") { 1299 // if (this.$store.state.role === "TEACHER") {
1056 // let response = await this.getParticularMeetingEvent({ 1300 // let response = await this.getParticularMeetingEvent({
1057 // meetingEventId: activity._id, 1301 // meetingEventId: activity._id,
1058 // }); 1302 // });
1059 // this.displayEventsList = []; 1303 // this.displayEventsList = [];
1060 // this.displayEventsList.push(response.data.data); 1304 // this.displayEventsList.push(response.data.data);
1061 // this.viewEventDetails = true; 1305 // this.viewEventDetails = true;
1062 // } 1306 // }
1063 if (this.$store.state.role === "PARENT") { 1307 if (this.$store.state.role === "PARENT") {
1064 if (message == "schoolEvent") { 1308 if (message == "schoolEvent") {
1065 let response = await this.getParticularSchoolEvent({ 1309 let response = await this.getParticularSchoolEvent({
1066 schoolEventId: activity._id, 1310 schoolEventId: activity._id,
1067 }); 1311 });
1068 this.displayEventsList = []; 1312 this.displayEventsList = [];
1069 this.displayEventsList.push(response.data.data); 1313 this.displayEventsList.push(response.data.data);
1070 } else { 1314 } else {
1071 let response = await this.getParticularMeetingEvent({ 1315 let response = await this.getParticularMeetingEvent({
1072 meetingEventId: activity.meetingEvent._id, 1316 meetingEventId: activity.meetingEvent._id,
1073 }); 1317 });
1074 this.displayEventsList = []; 1318 this.displayEventsList = [];
1075 this.displayEventsList.push(response.data.data); 1319 this.displayEventsList.push(response.data.data);
1076 } 1320 }
1077 this.viewEventDetails = true; 1321 this.viewEventDetails = true;
1078 } 1322 }
1079 if ( 1323 if (
1080 this.$store.state.role === "ADMIN" || 1324 this.$store.state.role === "ADMIN" ||
1081 this.$store.state.role === "TEACHER" 1325 this.$store.state.role === "TEACHER"
1082 ) { 1326 ) {
1083 if (message == "schoolEvent") { 1327 if (message == "schoolEvent") {
1084 let response = await this.getParticularSchoolEvent({ 1328 let response = await this.getParticularSchoolEvent({
1085 schoolEventId: activity._id, 1329 schoolEventId: activity._id,
1086 }); 1330 });
1087 this.displayEventsList = []; 1331 this.displayEventsList = [];
1088 this.displayEventsList.push(response.data.data); 1332 this.displayEventsList.push(response.data.data);
1089 } else { 1333 } else {
1090 let response = await this.getParticularMeetingEvent({ 1334 let response = await this.getParticularMeetingEvent({
1091 meetingEventId: activity._id, 1335 meetingEventId: activity._id,
1092 }); 1336 });
1093 this.displayEventsList = []; 1337 this.displayEventsList = [];
1094 this.displayEventsList.push(response.data.data); 1338 this.displayEventsList.push(response.data.data);
1095 } 1339 }
1096 this.viewEventDetails = true; 1340 this.viewEventDetails = true;
1097 } 1341 }
1098 }, 1342 },
1099 async routeToCourseDetails(courseId) { 1343 async routeToCourseDetails(courseId) {
1100 /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/ 1344 /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/
1101 let response = await this.getParticularCourseDetail(courseId); 1345 let response = await this.getParticularCourseDetail(courseId);
1102 1346
1103 /* If the response is null then dont route */ 1347 /* If the response is null then dont route */
1104 if (response.data.data.length > 0) { 1348 if (response.data.data.length > 0) {
1105 this.$router.push({ 1349 this.$router.push({
1106 name: "Course Details", 1350 name: "Course Details",
1107 query: { courseId: courseId }, 1351 query: { courseId: courseId },
1108 }); 1352 });
1109 } else { 1353 } else {
1110 this.seeSnackbar("No Data Available", "warning"); 1354 this.seeSnackbar("No Data Available", "warning");
1111 } 1355 }
1112 }, 1356 },
1113 1357
1114 closeNotice() { 1358 closeNotice() {
1115 this.dialogNotice = false; 1359 this.dialogNotice = false;
1116 }, 1360 },
1117 profile() { 1361 profile() {
1118 // this.editedIndex = this.desserts.indexOf(item); 1362 // this.editedIndex = this.desserts.indexOf(item);
1119 // this.notice = Object.assign({}, item); 1363 // this.notice = Object.assign({}, item);
1120 // this.dialogNotice = true; 1364 // this.dialogNotice = true;
1121 this.$router.push("/noticeBoard"); 1365 this.$router.push("/noticeBoard");
1122 }, 1366 },
1123 date: function (date) { 1367 date: function (date) {
1124 return moment(date).format("MMMM DD, YYYY HH:mm"); 1368 return moment(date).format("MMMM DD, YYYY HH:mm");
1125 }, 1369 },
1126 activityDate(date) { 1370 activityDate(date) {
1127 return moment(date).format("MMMM DD, YYYY"); 1371 return moment(date).format("MMMM DD, YYYY");
1128 }, 1372 },
1129 refreshEvents() { 1373 refreshEvents() {
1130 this.$refs.calendar.$emit("refetch-events"); 1374 this.$refs.calendar.$emit("refetch-events");
1131 }, 1375 },
1132 removeEvent() { 1376 removeEvent() {
1133 this.$refs.calendar.$emit("remove-event", this.selected); 1377 this.$refs.calendar.$emit("remove-event", this.selected);
1134 this.selected = {}; 1378 this.selected = {};
1135 }, 1379 },
1136 eventSelected(event) { 1380 eventSelected(event) {
1137 this.selected = event; 1381 this.selected = event;
1138 }, 1382 },
1139 // eventDropStart: function(event) { 1383 // eventDropStart: function(event) {
1140 // event.editable = false; 1384 // event.editable = false;
1141 // }, 1385 // },
1142 eventCreated(...test) { 1386 eventCreated(...test) {
1143 // console.log(test); 1387 // console.log(test);
1144 }, 1388 },
1145 getStudents() { 1389 getStudents() {
1146 http() 1390 http()
1147 .get("/getStudentsList") 1391 .get("/getStudentsList")
1148 .then((response) => { 1392 .then((response) => {
1149 this.students = response.data.data; 1393 this.students = response.data.data;
1150 this.showLoader = false; 1394 this.showLoader = false;
1151 }) 1395 })
1152 .catch((error) => { 1396 .catch((error) => {
1153 // console.log("err====>", err); 1397 // console.log("err====>", err);
1154 this.showLoader = false; 1398 this.showLoader = false;
1155 if (error.response.status === 401) { 1399 if (error.response.status === 401) {
1156 this.$router.replace({ path: "/" }); 1400 this.$router.replace({ path: "/" });
1157 this.$store.dispatch("setToken", null); 1401 this.$store.dispatch("setToken", null);
1158 this.$store.dispatch("Id", null); 1402 this.$store.dispatch("Id", null);
1159 } 1403 }
1160 }); 1404 });
1161 }, 1405 },
1162 getParents() { 1406 getParents() {
1163 http() 1407 http()
1164 .get("/getParentsList") 1408 .get("/getParentsList")
1165 .then((response) => { 1409 .then((response) => {
1166 this.parents = response.data.data; 1410 this.parents = response.data.data;
1167 this.showLoader = false; 1411 this.showLoader = false;
1168 }) 1412 })
1169 .catch((error) => { 1413 .catch((error) => {
1170 // console.log("err====>", err); 1414 // console.log("err====>", err);
1171 this.showLoader = false; 1415 this.showLoader = false;
1172 }); 1416 });
1173 }, 1417 },
1174 getTeachers() { 1418 getTeachers() {
1175 http() 1419 http()
1176 .get("/getTeachersList") 1420 .get("/getTeachersList")
1177 .then((response) => { 1421 .then((response) => {
1178 this.teachers = response.data.data; 1422 this.teachers = response.data.data;
1179 this.showLoader = false; 1423 this.showLoader = false;
1180 }) 1424 })
1181 .catch((error) => { 1425 .catch((error) => {
1182 // console.log("err====>", err); 1426 // console.log("err====>", err);
1183 this.showLoader = false; 1427 this.showLoader = false;
1184 }); 1428 });
1185 }, 1429 },
1186 getClasses() { 1430 getClasses() {
1187 http() 1431 http()
1188 .get("/getClassesList") 1432 .get("/getClassesList")
1189 .then((response) => { 1433 .then((response) => {
1190 this.classes = response.data.data; 1434 this.classes = response.data.data;
1191 this.showLoader = false; 1435 this.showLoader = false;
1192 }) 1436 })
1193 .catch((error) => { 1437 .catch((error) => {
1194 this.showLoader = false; 1438 this.showLoader = false;
1195 }); 1439 });
1196 }, 1440 },
1197 getNoticeData() { 1441 getNoticeData() {
1198 this.showLoader = true; 1442 this.showLoader = true;
1199 http() 1443 http()
1200 .get("/getEventsList") 1444 .get("/getEventsList")
1201 .then((response) => { 1445 .then((response) => {
1202 this.noticeData = response.data.data; 1446 this.noticeData = response.data.data;
1203 this.showLoader = false; 1447 this.showLoader = false;
1204 }) 1448 })
1205 .catch((error) => { 1449 .catch((error) => {
1206 this.showLoader = false; 1450 this.showLoader = false;
1207 }); 1451 });
1208 }, 1452 },
1209 getUserData() { 1453 getUserData() {
1210 // this.showLoader = true; 1454 // this.showLoader = true;
1211 if (this.$store.state.role === "PARENT") { 1455 if (this.$store.state.role === "PARENT") {
1212 http() 1456 http()
1213 .get("/getParticularUserDetail", { 1457 .get("/getParticularUserDetail", {
1214 params: { 1458 params: {
1215 studentId: localStorage.getItem("parentStudentId"), 1459 studentId: localStorage.getItem("parentStudentId"),
1216 }, 1460 },
1217 }) 1461 })
1218 .then((response) => { 1462 .then((response) => {
1219 this.userData = response.data.data; 1463 this.userData = response.data.data;
1220 this.showLoader = false; 1464 this.showLoader = false;
1221 }) 1465 })
1222 .catch((error) => { 1466 .catch((error) => {
1223 this.showLoader = false; 1467 this.showLoader = false;
1224 }); 1468 });
1225 } else { 1469 } else {
1226 http() 1470 http()
1227 .get("/getParticularUserDetail") 1471 .get("/getParticularUserDetail")
1228 .then((response) => { 1472 .then((response) => {
1229 this.userData = response.data.data; 1473 this.userData = response.data.data;
1230 this.showLoader = false; 1474 this.showLoader = false;
1231 }) 1475 })
1232 .catch((error) => { 1476 .catch((error) => {
1233 this.showLoader = false; 1477 this.showLoader = false;
1234 }); 1478 });
1235 } 1479 }
1236 }, 1480 },
1237 1481
1238 getFeesAndCollectionsData() { 1482 getFeesAndCollectionsData() {
1239 http() 1483 http()
1240 .get("/getTotalFeesAndCollections") 1484 .get("/getTotalFeesAndCollections")
1241 .then((response) => { 1485 .then((response) => {
1242 this.feeData = response.data.data; 1486 this.feeData = response.data.data;
1243 // this.collectionData = response.data.data; 1487 // this.collectionData = response.data.data;
1244 this.series[0].data[0] = this.feeData.totalFees; 1488 this.series[0].data[0] = this.feeData.totalFees;
1245 this.series[0].data[1] = this.feeData.totalCollection; 1489 this.series[0].data[1] = this.feeData.totalCollection;
1246 this.showLoader = false; 1490 this.showLoader = false;
1247 }) 1491 })
1248 .catch((error) => { 1492 .catch((error) => {
1249 this.showLoader = false; 1493 this.showLoader = false;
1250 }); 1494 });
1251 }, 1495 },
1252 getExpensesData() { 1496 getExpensesData() {
1253 http() 1497 http()
1254 .get("/getTotalExpenses") 1498 .get("/getTotalExpenses")
1255 .then((response) => { 1499 .then((response) => {
1256 this.expenseData = response.data.data; 1500 this.expenseData = response.data.data;
1257 // var array = response.data.data.sum; 1501 // var array = response.data.data.sum;
1258 this.series[0].data[2] = this.expenseData.sum; 1502 this.series[0].data[2] = this.expenseData.sum;
1259 this.showChart = true; 1503 this.showChart = true;
1260 // this.series = [ 1504 // this.series = [
1261 // { 1505 // {
1262 // name: "Total", 1506 // name: "Total",
1263 // data: array 1507 // data: array
1264 // } 1508 // }
1265 // ]; 1509 // ];
1266 this.showLoader = false; 1510 this.showLoader = false;
1267 }) 1511 })
1268 .catch((error) => { 1512 .catch((error) => {
1269 this.showLoader = false; 1513 this.showLoader = false;
1270 }); 1514 });
1271 }, 1515 },
1272 // async getparentStudents() { 1516 // async getparentStudents() {
1273 // this.showLoader = true; 1517 // this.showLoader = true;
1274 // await http() 1518 // await http()
1275 // .get("/parentStudentsList") 1519 // .get("/parentStudentsList")
1276 // .then((response) => { 1520 // .then((response) => {
1277 1521
1278 // /* set values in local storage */ 1522 // /* set values in local storage */
1279 // this.studentsData = response.data.data.students; 1523 // this.studentsData = response.data.data.students;
1280 // this.showLoader = false; 1524 // this.showLoader = false;
1281 // }) 1525 // })
1282 // .catch((err) => { 1526 // .catch((err) => {
1283 // console.log("err====>", err); 1527 // console.log("err====>", err);
1284 // this.showLoader = false; 1528 // this.showLoader = false;
1285 // }); 1529 // });
1286 // await this.getCourses(parentStudentsId, classId); 1530 // await this.getCourses(parentStudentsId, classId);
1287 // await this.getAnnoucementes(classId); 1531 // await this.getAnnoucementes(classId);
1288 // }, 1532 // },
1289 async getCourses(parentStudentsId, classId) { 1533 async getCourses(parentStudentsId, classId) {
1290 /* getStudentCourses - to get courseData - defined in GetApis.js*/ 1534 /* getStudentCourses - to get courseData - defined in GetApis.js*/
1291 await this.getStudentCourses({ 1535 await this.getStudentCourses({
1292 classId: localStorage.getItem("parentClassId"), 1536 classId: localStorage.getItem("parentClassId"),
1293 studentId: localStorage.getItem("parentStudentId"), 1537 studentId: localStorage.getItem("parentStudentId"),
1294 }); 1538 });
1295 }, 1539 },
1296 getAnnoucementes(classId) { 1540 getAnnoucementes(classId) {
1297 this.showLoader = true; 1541 this.showLoader = true;
1298 http() 1542 http()
1299 .get("/getAnnoucementesList", { 1543 .get("/getAnnoucementesList", {
1300 params: { 1544 params: {
1301 classId: localStorage.getItem("parentClassId"), 1545 classId: localStorage.getItem("parentClassId"),
1302 }, 1546 },
1303 }) 1547 })
1304 .then((response) => { 1548 .then((response) => {
1305 this.annoucementData = response.data.data; 1549 this.annoucementData = response.data.data;
1306 console.log("avnn - ", this.annoucementData); 1550 console.log("avnn - ", this.annoucementData);
1307 this.showLoader = false; 1551 this.showLoader = false;
1308 }) 1552 })
1309 .catch((err) => { 1553 .catch((err) => {
1310 // console.log("err====>", err); 1554 // console.log("err====>", err);
1311 this.showLoader = false; 1555 this.showLoader = false;
1312 this.snackbar = true; 1556 this.snackbar = true;
1313 this.color = "error"; 1557 this.color = "error";
1314 this.text = error.response.data.message; 1558 this.text = error.response.data.message;
1315 }); 1559 });
1316 }, 1560 },
1317 1561
1318 /* MEETING EVENTS, SCHOOL EVENTS */ 1562 /* MEETING EVENTS, SCHOOL EVENTS */
1319 async getMeetingEventes() { 1563 async getMeetingEventes() {
1320 if (this.role == "TEACHER" || this.role === "ADMIN") { 1564 if (this.role == "TEACHER" || this.role === "ADMIN") {
1321 this.showLoader = true; 1565 this.showLoader = true;
1322 await http() 1566 await http()
1323 .get("/getMeetingEventesList") 1567 .get("/getMeetingEventesList")
1324 .then((response) => { 1568 .then((response) => {
1325 var activityList = response.data.data; 1569 var activityList = response.data.data;
1326 this.activityList = activityList; 1570 this.activityList = activityList;
1327 this.showLoader = false; 1571 this.showLoader = false;
1328 1572
1329 /* set meetingEvents in activityEvents array to highlight event dates in calender */ 1573 /* set meetingEvents in activityEvents array to highlight event dates in calender */
1330 for (var i = 0; i < this.activityList.length; i++) { 1574 for (var i = 0; i < this.activityList.length; i++) {
1331 let obj = {}; 1575 let obj = {};
1332 obj.date = moment(this.activityList[i].dateOfEvent).format( 1576 obj.date = moment(this.activityList[i].dateOfEvent).format(
1333 "YYYY/MM/DD" 1577 "YYYY/MM/DD"
1334 ); 1578 );
1335 obj.title = this.activityList[i].title; 1579 obj.title = this.activityList[i].title;
1336 obj._id = this.activityList[i]._id; 1580 obj._id = this.activityList[i]._id;
1337 obj.eventType = "meetingEvent"; 1581 obj.eventType = "meetingEvent";
1338 /* activityEvents is an array used to display events in calender on particular dates */ 1582 /* activityEvents is an array used to display events in calender on particular dates */
1339 this.activityEvents.push(obj); 1583 this.activityEvents.push(obj);
1340 } 1584 }
1341 }) 1585 })
1342 .catch((error) => { 1586 .catch((error) => {
1343 this.showLoader = false; 1587 this.showLoader = false;
1344 }); 1588 });
1345 } 1589 }
1346 /* If role is ADMIN,TEACHER, PARENT then school events need to be displayed too */ 1590 /* If role is ADMIN,TEACHER, PARENT then school events need to be displayed too */
1347 if ( 1591 if (
1348 this.role === "ADMIN" || 1592 this.role === "ADMIN" ||
1349 this.role === "TEACHER" || 1593 this.role === "TEACHER" ||
1350 this.role === "PARENT" 1594 this.role === "PARENT"
1351 ) { 1595 ) {
1352 /* this will get data in a "schoolEvents" data property */ 1596 /* this will get data in a "schoolEvents" data property */
1353 await this.getSchoolEventsList(); 1597 await this.getSchoolEventsList();
1354 /* set schoolEvents in activityEvents array to highlight event dates in calender */ 1598 /* set schoolEvents in activityEvents array to highlight event dates in calender */
1355 for (var i = 0; i < this.schoolEvents.length; i++) { 1599 for (var i = 0; i < this.schoolEvents.length; i++) {
1356 let obj = {}; 1600 let obj = {};
1357 obj.date = moment(this.schoolEvents[i].dateOfEvent).format( 1601 obj.date = moment(this.schoolEvents[i].dateOfEvent).format(
1358 "YYYY/MM/DD" 1602 "YYYY/MM/DD"
1359 ); 1603 );
1360 obj.title = this.schoolEvents[i].title; 1604 obj.title = this.schoolEvents[i].title;
1361 obj._id = this.schoolEvents[i]._id; 1605 obj._id = this.schoolEvents[i]._id;
1362 obj.eventType = "schoolEvent"; 1606 obj.eventType = "schoolEvent";
1363 /* activityEvents is an array used to display events in calender on particular dates */ 1607 /* activityEvents is an array used to display events in calender on particular dates */
1364 this.activityEvents.push(obj); 1608 this.activityEvents.push(obj);
1365 } 1609 }
1366 } 1610 }
1367 }, 1611 },
1368 async getMaleFemaleData() { 1612 async getMaleFemaleData() {
1369 await http() 1613 await http()
1370 .get("/getStudentsByGender") 1614 .get("/getStudentsByGender")
1371 .then((response) => { 1615 .then((response) => {
1372 console.log("gender response - ", response); 1616 console.log("gender response - ", response);
1373 for (var i = 0; i < response.data.data.length; i++) { 1617 for (var i = 0; i < response.data.data.length; i++) {
1374 if (response.data.data[i]._id == "male") { 1618 if (response.data.data[i]._id == "male") {
1375 this.maleFemaleSeries.push(response.data.data[i].total); 1619 this.maleFemaleSeries.push(response.data.data[i].total);
1376 } 1620 }
1377 if (response.data.data[i]._id == "female") { 1621 if (response.data.data[i]._id == "female") {
1378 this.maleFemaleSeries.push(response.data.data[i].total); 1622 this.maleFemaleSeries.push(response.data.data[i].total);
1379 } 1623 }
1380 } 1624 }
1381 }) 1625 })
1382 .catch((error) => { 1626 .catch((error) => {
1383 this.showLoader = false; 1627 this.showLoader = false;
1384 }); 1628 });
1385 }, 1629 },
1386 }, 1630 },
1387 1631
1388 mounted() { 1632 mounted() {
1389 // = this.$store.state.schoolToken; 1633 // = this.$store.state.schoolToken;
1390 // console.log("this.$store.state.role", this.token); 1634 // console.log("this.$store.state.role", this.token);
1391 // this.getUsersList(); 1635 // this.getUsersList();
1392 }, 1636 },
1393 1637
1394 async created() { 1638 async created() {
1395 if (this.$store.state.role === "ADMIN") { 1639 if (this.$store.state.role === "ADMIN") {
1396 // this.token = this.$store.state.token; 1640 // this.token = this.$store.state.token;
1397 await this.getFeesAndCollectionsData(); 1641 await this.getFeesAndCollectionsData();
1398 await this.getExpensesData(); 1642 await this.getExpensesData();
1399 await this.getMaleFemaleData(); 1643 await this.getMaleFemaleData();
1400 } else if (this.$store.state.schoolRole === "SUPERADMIN") { 1644 } else if (this.$store.state.schoolRole === "SUPERADMIN") {
1401 // this.token = this.$store.state.schoolToken; 1645 // this.token = this.$store.state.schoolToken;
1402 await this.getFeesAndCollectionsData(); 1646 await this.getFeesAndCollectionsData();
1403 await this.getExpensesData(); 1647 await this.getExpensesData();
1404 await this.getMaleFemaleData(); 1648 await this.getMaleFemaleData();
1405 } else if (this.$store.state.role === "TEACHER") { 1649 } else if (this.$store.state.role === "TEACHER") {
1406 // this.token = this.$store.state.token; 1650 // this.token = this.$store.state.token;
1407 await this.getMaleFemaleData(); 1651 await this.getMaleFemaleData();
1408 } else if (this.$store.state.role === "ACCOUNTANT") { 1652 } else if (this.$store.state.role === "ACCOUNTANT") {
1409 // this.token = this.$store.state.token; 1653 // this.token = this.$store.state.token;
1410 } else if (this.$store.state.role === "LIBRARIAN") { 1654 } else if (this.$store.state.role === "LIBRARIAN") {
1411 // this.token = this.$store.state.token; 1655 // this.token = this.$store.state.token;
1412 } else if (this.$store.state.role === "PARENT") { 1656 } else if (this.$store.state.role === "PARENT") {
1413 await this.getCourses(); 1657 await this.getCourses();
1414 await this.getAnnoucementes(); 1658 await this.getAnnoucementes();
1415 this.studentsData = this.$store.getters.GET_STUDENTS_DATA; 1659 this.studentsData = this.$store.getters.GET_STUDENTS_DATA;
1416 this.activeStudent = this.$store.getters.GET_ACTIVE_STUDENT; 1660 this.activeStudent = this.$store.getters.GET_ACTIVE_STUDENT;
1417 /* MAKE A LIST OF STUDENTS WITH STATUS TRUE, FOR DISPLAYING STUDENTS DATA AT TOP */ 1661 /* MAKE A LIST OF STUDENTS WITH STATUS TRUE, FOR DISPLAYING STUDENTS DATA AT TOP */
1418 for (var i = 0; i < this.studentsData.length; i++) { 1662 for (var i = 0; i < this.studentsData.length; i++) {
1419 if (this.studentsData[i].status == true) { 1663 if (this.studentsData[i].status == true) {
1420 this.activeStudentsList.push(this.studentsData[i]); 1664 this.activeStudentsList.push(this.studentsData[i]);
1421 } 1665 }
1422 } 1666 }
1423 console.log("student list - ", this.activeStudentsList); 1667 console.log("student list - ", this.activeStudentsList);
1424 console.log("active - ", this.activeStudent); 1668 console.log("active - ", this.activeStudent);
1425 } 1669 }
1426 this.role = this.$store.state.role; 1670 this.role = this.$store.state.role;
1427 1671
1428 await this.getStudents(); 1672 await this.getStudents();
1429 await this.getTeachers(); 1673 await this.getTeachers();
1430 await this.getParents(); 1674 await this.getParents();
1431 await this.getClasses(); 1675 await this.getClasses();
1432 await this.getNoticeData(); 1676 await this.getNoticeData();
1433 await this.getUserData(); 1677 await this.getUserData();
1434 1678
1435 /* get Latest events list for student login*/ 1679 /* get Latest events list for student login*/
1436 if (this.$store.state.role == "PARENT") { 1680 if (this.$store.state.role == "PARENT") {
1437 let response = await this.studentMeetingEvents({ 1681 let response = await this.studentMeetingEvents({
1438 studentId: localStorage.getItem("parentStudentId"), 1682 studentId: localStorage.getItem("parentStudentId"),
1439 }); 1683 });
1440 this.activityList = response.data.data; 1684 this.activityList = response.data.data;
1441 1685
1442 /* set activityEvents array to highlight event dates in calender */ 1686 /* set activityEvents array to highlight event dates in calender */
1443 for (var i = 0; i < this.activityList.length; i++) { 1687 for (var i = 0; i < this.activityList.length; i++) {
1444 let obj = {}; 1688 let obj = {};
1445 obj.date = moment(this.activityList[i].meetingEvent.dateOfEvent).format( 1689 obj.date = moment(this.activityList[i].meetingEvent.dateOfEvent).format(
1446 "YYYY/MM/DD" 1690 "YYYY/MM/DD"
1447 ); 1691 );
1448 obj.title = this.activityList[i].meetingEvent.title; 1692 obj.title = this.activityList[i].meetingEvent.title;
1449 obj._id = this.activityList[i].meetingEvent._id; 1693 obj._id = this.activityList[i].meetingEvent._id;
1450 obj.eventType = "meetingEvent"; 1694 obj.eventType = "meetingEvent";
1451 this.activityEvents.push(obj); 1695 this.activityEvents.push(obj);
1452 } 1696 }
1453 } 1697 }
1454 1698
1455 /* get Latest events list for teacher login*/ 1699 /* get Latest events list for teacher login*/
1456 if ( 1700 if (
1457 this.role == "TEACHER" || 1701 this.role == "TEACHER" ||
1458 this.role == "ADMIN" || 1702 this.role == "ADMIN" ||
1459 this.role == "PARENT" 1703 this.role == "PARENT"
1460 ) { 1704 ) {
1461 await this.getMeetingEventes(); 1705 await this.getMeetingEventes();
1462 } 1706 }
1463 }, 1707 },
1464 }; 1708 };
1465 </script> 1709 </script>
1466 1710
1467 <style scoped> 1711 <style scoped>