viithiisys / School-Management-dashboard

Compare View

switch
from
...
to
 
Commits (6)
Showing 4 changed files   Show diff stats
src/pages/Authentication/Login.vue
Diff comments   View file @2f89adb
... ... @@ -194,6 +194,7 @@ export default {
194 194 /* if zero element of false students list is > 0 then make first student as defalut selected */
195 195 if (indexStatusFalse[0] > 0) {
196 196 this.selectedStudent = response.data.data.students[0]._id;
  197 + this.$store.dispatch("SET_ACTIVE_STUDENT",response.data.data.students[0])
197 198 }
198 199 // console.log("indexStatusFalse - ", indexStatusFalse);
199 200 /* if false student is the first one in the list then see if the next is also false */
... ... @@ -226,6 +227,7 @@ export default {
226 227 } else {
227 228 this.selectedStudent =
228 229 response.data.data.students[counter]._id;
  230 + this.$store.dispatch("SET_ACTIVE_STUDENT",response.data.data.students[counter])
229 231 var studentName = response.data.data.students[counter].name;
230 232 localStorage.setItem("studentName", studentName);
231 233 localStorage.setItem(
... ...
src/pages/Dashboard/dashboard.vue
Diff comments   View file @2f89adb
... ... @@ -76,13 +76,25 @@
76 76 <v-icon
77 77 size="24"
78 78 class="right"
79   - @click="active=0;displayEventsList=[];dialogSchoolEvents = [];dialogMeetingEvents=[];viewEventDetails = false"
80   - >cancel</v-icon>
  79 + @click="
  80 + active = 0;
  81 + displayEventsList = [];
  82 + dialogSchoolEvents = [];
  83 + dialogMeetingEvents = [];
  84 + viewEventDetails = false;
  85 + "
  86 + >cancel</v-icon
  87 + >
81 88 </v-flex>
82 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 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 98 <div class="subheading py-1">{{ tab.name }}</div>
87 99 </v-tab>
88 100 <!-- <v-tab href="#schoolTab" v-if="dialogSchoolEvents.length > 0">School Events</v-tab>
... ... @@ -90,26 +102,44 @@
90 102  
91 103 <!-- SCHOOL EVENTS-->
92 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 111 <v-container fluid>
95 112 <v-divider class="white"></v-divider>
96 113 <v-card
97   - v-for="(particularEvent,index) in dialogSchoolEvents"
  114 + v-for="(particularEvent, index) in dialogSchoolEvents"
98 115 :key="index"
99 116 class="mt-3 pa-2 card-style white--text elevation-0"
100 117 >
101 118 <div>
102   - <div class="headline">{{particularEvent.title}}</div>
103   - <div>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
104   - <div v-if="particularEvent.link">Start Time : {{particularEvent.startTime}}</div>
105   - <div v-if="particularEvent.link">Duration : {{particularEvent.duration}}</div>
  119 + <div class="headline">{{ particularEvent.title }}</div>
  120 + <div>
  121 + Date Of Event :
  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 134 <div v-if="particularEvent.link">
107 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 142 </div>
110   - <div
111   - v-if="particularEvent.description"
112   - >Description : {{particularEvent.description}}</div>
113 143 </div>
114 144 <v-divider class="white mt-3"></v-divider>
115 145 </v-card>
... ... @@ -119,26 +149,44 @@
119 149  
120 150 <!-- MEETING EVENTS -->
121 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 158 <v-container fluid>
124 159 <v-divider class="white"></v-divider>
125 160 <v-card
126   - v-for="(particularEvent,index) in dialogMeetingEvents"
  161 + v-for="(particularEvent, index) in dialogMeetingEvents"
127 162 :key="index"
128 163 class="mt-3 pa-2 card-style white--text elevation-0"
129 164 >
130 165 <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>
  166 + <div class="headline">{{ particularEvent.title }}</div>
  167 + <div>
  168 + Date Of Event :
  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 181 <div v-if="particularEvent.link">
136 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 189 </div>
139   - <div
140   - v-if="particularEvent.description"
141   - >Description : {{particularEvent.description}}</div>
142 190 </div>
143 191 <v-divider class="white mt-3"></v-divider>
144 192 </v-card>
... ... @@ -152,22 +200,31 @@
152 200 <v-container fluid>
153 201 <v-divider class="white"></v-divider>
154 202 <v-card
155   - v-for="(particularEvent,index) in displayEventsList"
  203 + v-for="(particularEvent, index) in displayEventsList"
156 204 :key="index"
157 205 class="mt-3 pa-2 card-style white--text elevation-0"
158 206 >
159 207 <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>
  208 + <div class="headline">{{ particularEvent.title }}</div>
  209 + <div>
  210 + Date Of Event :
  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 221 <div v-if="particularEvent.link">
165 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 227 </div>
168   - <div
169   - v-if="particularEvent.description"
170   - >Description : {{particularEvent.description}}</div>
171 228 </div>
172 229 <v-divider class="white mt-3"></v-divider>
173 230 </v-card>
... ... @@ -180,44 +237,80 @@
180 237 <v-flex xs12 sm12 md8>
181 238 <v-container fluid grid-list-xl>
182 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 241 <v-flex xs12 sm12 md3>
185   - <router-link :to="{ name:'Students' }">
  242 + <router-link :to="{ name: 'Students' }">
186 243 <v-card class="card pink-bgcolor">
187   - <v-card-title primary-title class="titleCard white--text py-3">Students</v-card-title>
188   - <img src="/static/icon/student.png" class="ml-2" width="40" alt="icons" />
189   - <v-card-title class="headline py-1 white--text">{{ students.length }}</v-card-title>
  244 + <v-card-title primary-title class="titleCard white--text py-3"
  245 + >Students</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 256 </v-card>
191 257 </router-link>
192 258 </v-flex>
193 259 <!-- ***** Total Teachers***** -->
194 260 <v-flex xs12 sm12 md3>
195   - <router-link :to="{ name:'Teachers' }">
  261 + <router-link :to="{ name: 'Teachers' }">
196 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>
198   - <img src="/static/icon/teacher.png" class="ml-2" width="40" alt="icons" />
  263 + <v-card-title primary-title class="titleCard white--text py-3"
  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 276 </v-card>
202 277 </router-link>
203 278 </v-flex>
204 279 <!-- ***** Total Parents ***** -->
205 280 <v-flex xs12 sm12 md3>
206   - <router-link :to="{ name:'Parents' }">
  281 + <router-link :to="{ name: 'Parents' }">
207 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>
209   - <img src="/static/icon/parents.png" class="ml-3" width="40px" alt="icons" />
210   - <v-card-title class="headline py-1 white--text">{{ parents.length }}</v-card-title>
  283 + <v-card-title primary-title class="titleCard white--text py-3"
  284 + >Parents</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 295 </v-card>
212 296 </router-link>
213 297 </v-flex>
214 298 <!-- ***** Total Class***** -->
215 299 <v-flex xs12 sm12 md3>
216   - <router-link :to="{ name:'Class' }">
  300 + <router-link :to="{ name: 'Class' }">
217 301 <v-card flat class="card darkBlue-bgcolor">
218   - <v-card-title primary-title class="titleCard white--text py-3">Class</v-card-title>
219   - <img src="/static/icon/class.png" width="40" alt="icons" class="ml-2" />
220   - <v-card-title class="headline py-1 white--text">{{ classes.length }}</v-card-title>
  302 + <v-card-title primary-title class="titleCard white--text py-3"
  303 + >Class</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 314 </v-card>
222 315 </router-link>
223 316 </v-flex>
... ... @@ -226,9 +319,11 @@
226 319 <p
227 320 v-if="studentsData.length === 0 && role == 'PARENT'"
228 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 325 <!-- ACCOUNT -->
231   - <v-layout v-if="role == 'SUPERADMIN'|| role == 'ADMIN'">
  326 + <v-layout v-if="role == 'SUPERADMIN' || role == 'ADMIN'">
232 327 <v-flex xs12>
233 328 <v-card class="card mt-2 account-Card">
234 329 <h4>
... ... @@ -240,35 +335,48 @@
240 335 <template>
241 336 <v-list-tile>
242 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 341 </v-list-tile-avatar>
245 342 <v-list-tile-content>
246 343 <v-list-tile-title class="mt-2">
247 344 <p class="subheading font-color">Fees</p>
248 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 349 </v-list-tile-content>
251 350 </v-list-tile>
252 351 <v-list-tile>
253 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 356 </v-list-tile-avatar>
256 357 <v-list-tile-content>
257 358 <v-list-tile-title class="mt-2">
258 359 <p class="subheading font-color">Collection</p>
259 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 365 </v-list-tile-content>
262 366 </v-list-tile>
263 367 <v-list-tile>
264 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 372 </v-list-tile-avatar>
267 373 <v-list-tile-content>
268 374 <v-list-tile-title class="mt-2">
269 375 <p class="subheading font-color">Expences</p>
270 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 380 </v-list-tile-content>
273 381 </v-list-tile>
274 382 </template>
... ... @@ -293,14 +401,51 @@
293 401 </v-layout>
294 402  
295 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 405 <!-- NOTICE -->
298 406 <v-flex xs12 sm6>
299 407 <v-card class="card">
300 408 <v-container>
301   - <v-card-title class="justify-center subheading font-weight-bold">Notice</v-card-title>
  409 + <v-card-title class="justify-center title font-weight-bold"
  410 + >Notice Board</v-card-title
  411 + >
  412 + <v-layout column>
  413 + <v-flex
  414 + v-for="(item, index) in noticeData"
  415 + :key="index"
  416 + style="cursor: pointer"
  417 + >
  418 + <v-layout column>
  419 + <!--Date-->
  420 + <v-flex class="pb-2 pl-2 pr-2">
  421 + <v-chip
  422 + :color="colorsArray[index % colorsArray.length]"
  423 + text-color="white"
  424 + class="ma-0"
  425 + >{{
  426 + moment(item.created).format("DD MMMM, YYYY")
  427 + }}</v-chip
  428 + >
  429 + </v-flex>
  430 + <!-- title -->
  431 + <v-flex class="pa-2">
  432 + <div
  433 + class="body-1 font-weight-bold px-2"
  434 + @click="profile"
  435 + >
  436 + {{ item.title }}
  437 + </div>
  438 + </v-flex>
302 439  
303   - <v-data-table
  440 + <!-- divider -->
  441 + <v-flex class="pa-2">
  442 + <v-divider></v-divider>
  443 + </v-flex>
  444 + </v-layout>
  445 + </v-flex>
  446 + </v-layout>
  447 +
  448 + <!-- <v-data-table
304 449 :items="noticeData"
305 450 class="elevation-0"
306 451 flat
... ... @@ -320,9 +465,9 @@
320 465 <span class="grey--text caption">{{ date(props.item.created) }}</span>
321 466 <br />
322 467 <span class="body-2">{{ props.item.title}}</span>
323   - </td>
324   - <!-- <td class="grey--text mt-2" >{{ props.item.description}}</td> -->
325   -
  468 + </td>-->
  469 + <!-- <td class="grey--text mt-2" >{{ props.item.description}}</td> -->
  470 + <!--
326 471 <td class="text-xs-center">
327 472 <span>
328 473 <v-tooltip top>
... ... @@ -338,140 +483,203 @@
338 483 </td>
339 484 </tr>
340 485 </template>
341   - </v-data-table>
  486 + </v-data-table>-->
342 487 </v-container>
343 488 </v-card>
344 489 </v-flex>
345 490  
346 491 <!-- SCHOOL EVENTS -->
347   -
348 492 <v-flex xs12 sm6>
349   - <v-card class="card">
350   - <v-container>
351   - <v-card-title class="justify-center subheading font-weight-bold">School Events</v-card-title>
352   - <div
353   - v-for="(schoolEvent,index) in schoolEvents"
354   - :key="schoolEvent.title"
355   - class="mt-2"
356   - style="cursor: pointer;"
357   - @click="seeEventDetails(schoolEvent,'schoolEvent')"
358   - >
359   - <!-- color dot-->
360   - <span
361   - :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
362   - style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
363   - ></span>
364   - <div style="display: inline-block;" class="ml-2">
365   - <div>
366   - <!-- date of event -->
367   - <div
368   - class="grey--text lighten-1 caption"
369   - v-if="schoolEvent.dateOfEvent"
370   - >{{moment(schoolEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
371   - <!-- event title-->
372   - <div class="body-1" v-if="schoolEvent.title">{{schoolEvent.title}}</div>
  493 + <v-layout column>
  494 + <!-- school events -->
  495 + <v-flex>
  496 + <v-card class="card">
  497 + <v-container>
  498 + <v-card-title
  499 + class="justify-center title font-weight-bold"
  500 + >School Events</v-card-title
  501 + >
  502 + <div
  503 + v-for="(schoolEvent, index) in schoolEvents"
  504 + :key="schoolEvent.title"
  505 + class="mt-2"
  506 + style="cursor: pointer"
  507 + @click="seeEventDetails(schoolEvent, 'schoolEvent')"
  508 + >
  509 + <!-- color dot-->
  510 + <span
  511 + :style="{
  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 + "
  522 + ></span>
  523 + <div style="display: inline-block" class="ml-2">
  524 + <div>
  525 + <!-- date of event -->
  526 + <div
  527 + class="grey--text lighten-1 caption"
  528 + v-if="schoolEvent.dateOfEvent"
  529 + >
  530 + {{
  531 + moment(schoolEvent.dateOfEvent).format(
  532 + "DD MMMM, YYYY"
  533 + )
  534 + }}
  535 + </div>
  536 + <!-- event title-->
  537 + <div class="body-1" v-if="schoolEvent.title">
  538 + {{ schoolEvent.title }}
  539 + </div>
  540 + </div>
  541 + </div>
373 542 </div>
  543 + <div v-if="schoolEvents.length == 0">
  544 + <p class="text-center title grey lighten-4 error--text">
  545 + No Data Found!
  546 + </p>
  547 + </div>
  548 + </v-container>
  549 + </v-card>
  550 + </v-flex>
  551 + <!-- apex charts - Male Female data -->
  552 + <v-flex>
  553 + <v-card>
  554 + <v-card-title class="justify-center title font-weight-bold"
  555 + >Students</v-card-title
  556 + >
  557 + <div id="chart">
  558 + <apexcharts
  559 + type="donut"
  560 + :options="maleFemaleData"
  561 + :series="maleFemaleSeries"
  562 + />
374 563 </div>
375   - </div>
376   - <div v-if="schoolEvents.length == 0">
377   - <p class="text-center title grey lighten-4 error--text">No Data Found!</p>
378   - </div>
379   - </v-container>
380   - </v-card>
  564 + </v-card>
  565 + </v-flex>
  566 + </v-layout>
381 567 </v-flex>
382 568 </v-layout>
383 569  
384   - <!-- FOR TEACHER ROLE -->
385   - <!-- <v-card class="mt-2 card" v-if="role == 'TEACHER'">
386   - <v-layout>
387   - <v-flex xs6 sm6 md6>
388   - <h4 class="pa-3">
389   - <b>Notice</b>
390   - </h4>
391   - <v-data-table
392   - :items="noticeData"
393   - class="elevation-0"
394   - flat
395   - hide-actions
396   - hide-headers
397   - style="border-spacing: 0 !important;"
398   - >
399   - <template
400   - slot="items"
401   - slot-scope="props"
402   - v-if="props.index < 5"
403   - style="border-spacing: 0 !important;"
  570 + <v-layout row wrap v-if="role == 'PARENT'">
  571 + <!-- ROLE - PARENT , MY KIDS -->
  572 + <v-flex xs12>
  573 + <v-card class="elevation-3 card">
  574 + <v-container>
  575 + <v-card-title class="title font-weight-bold justify-center"
  576 + >My Kids</v-card-title
404 577 >
405   - <tr class="td-notice">
406   - <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
407   - <td>
408   - <span class="grey--text caption">{{ date(props.item.created) }}</span>
409   - <br />
410   - <span class="body-2">{{ props.item.title}}</span>
411   - </td>
412   - <td class="grey--text mt-2">{{ props.item.description}}</td>
413   -
414   - <td class="text-xs-center">
415   - <span>
416   - <v-tooltip top>
417   - <img
418   - slot="activator"
419   - style="cursor:pointer; width:25px; height:25px; "
420   - @click="profile"
421   - src="/static/icon/view.png"
422   - />
423   - <span>View</span>
424   - </v-tooltip>
425   - </span>
426   - </td>
427   - </tr>
428   - </template>
429   - </v-data-table>
430   - </v-flex>
431   -
432   - <v-flex xs6 sm6 md6>
433   - <v-card-text>
434   - <v-card-title class="justify-center subheading font-weight-bold">Meeting Events</v-card-title>
435   - <div
436   - v-for="(activity,index) in activityList"
437   - :key="index"
438   - class="mt-2"
439   - style="cursor: pointer;"
440   - @click="seeEventDetails(activity)"
  578 + <v-data-iterator
  579 + :items="activeStudentsList"
  580 + :rows-per-page-items="rowsPerPageItems"
  581 + :pagination.sync="pagination"
  582 + content-tag="v-layout"
  583 + row
  584 + wrap
441 585 >
442   - <span
443   - :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
444   - style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
445   - ></span>
446   - <div style="display: inline-block;" class="ml-2">
447   - <div>
  586 + <template v-slot:item="props">
  587 + <v-flex xs12 sm6>
448 588 <div
449   - class="grey--text lighten-1 caption"
450   - v-if="activity.dateOfEvent"
451   - >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div>
452   - <div class="body-2" v-if="activity.title">{{activity.title}}</div>
453   - </div>
454   - </div>
455   - </div>
456   - <div v-if="activityList.length == 0">
457   - <p class="text-center title grey lighten-4 error--text">No Data Found!</p>
458   - </div>
459   - </v-card-text>
460   - </v-flex>
461   - </v-layout>
462   - </v-card>-->
  589 + style="height: 150px; width: 100% display: inline-block;"
  590 + >
  591 + <v-card>
  592 + <v-layout row wrap>
  593 + <!-- IMAGE OF ACTIVE STUDENT -->
  594 + <v-flex xs3 class="text-xs-center">
  595 + <v-avatar size="50px">
  596 + <img
  597 + :src="props.item.profilePicUrl"
  598 + v-if="props.item.profilePicUrl"
  599 + />
  600 + <img src="/static/icon/user.png" v-else />
  601 + </v-avatar>
  602 + <!-- <div style="height: 90px;">
  603 + <img
  604 + :src="props.item.profilePicUrl"
  605 + alt="profileImage"
  606 + width="80"
  607 + v-if="props.item.profilePicUrl"
  608 + />
  609 + <img width="80" src="/static/icon/user.png" v-else />
  610 + </div>-->
  611 + </v-flex>
  612 + <v-flex xs9 class="text-xs-center">
  613 + <!--NAME -->
  614 + <v-layout class="pa-0 ma-0">
  615 + <v-flex xs3 class="body-1 pa-0 ma-0">
  616 + <span class="left">Name:</span>
  617 + </v-flex>
  618 + <v-flex xs9 class="body-1 pa-0 ml-2">
  619 + <span class="left">{{
  620 + props.item.name
  621 + }}</span>
  622 + </v-flex>
  623 + </v-layout>
  624 + <!--ROLLNO -->
  625 + <v-layout class="pa-0 ma-0">
  626 + <v-flex xs3 class="body-1 pa-0 ma-0">
  627 + <span class="left">Roll No:</span>
  628 + </v-flex>
  629 + <v-flex xs9 class="body-1 pa-0 ml-2">
  630 + <span class="left">{{
  631 + props.item.rollNo
  632 + }}</span>
  633 + </v-flex>
  634 + </v-layout>
  635 + <!--GENDER -->
  636 + <v-layout class="pa-0 ma-0">
  637 + <v-flex xs3 class="body-1 pa-0 ma-0">
  638 + <span class="left">Gender:</span>
  639 + </v-flex>
  640 + <v-flex xs9 class="body-1 pa-0 ml-2">
  641 + <span class="left">{{
  642 + props.item.gender
  643 + }}</span>
  644 + </v-flex>
  645 + </v-layout>
  646 + <!--EMAIL -->
  647 + <v-layout class="pa-0 ma-0">
  648 + <v-flex xs3 class="body-1 pa-0 ma-0">
  649 + <span class="left">Email:</span>
  650 + </v-flex>
  651 + <v-flex xs9 class="body-1 pa-0 ml-2">
  652 + <span class="left">{{
  653 + props.item.email
  654 + }}</span>
  655 + </v-flex>
  656 + </v-layout>
  657 + </v-flex>
  658 + </v-layout>
  659 + </v-card>
  660 + </div>
  661 + </v-flex>
  662 + </template>
  663 + </v-data-iterator>
  664 + </v-container>
  665 + </v-card>
  666 + </v-flex>
463 667  
464   - <!-- ROLE == PARENT, MY COURSES -->
465   - <v-layout v-if="role == 'PARENT'">
  668 + <!-- ROLE - PARENT, MY COURSES -->
466 669 <v-flex xs12>
467   - <v-card class="elevation-0 account-Card">
  670 + <v-card class="elevation-3 card">
468 671 <v-container>
469   - <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 + >
470 675 <v-layout wrap>
471 676 <v-flex xs12 sm12>
472 677 <v-list two-line>
473 678 <template>
474   - <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 + >
475 683 <v-list-tile-avatar>
476 684 <!-- <v-icon
477 685 class="account-circle darkBlue-color"
... ... @@ -482,7 +690,11 @@
482 690 <v-tooltip top>
483 691 <img
484 692 slot="activator"
485   - style="cursor:pointer; width:25px; height:25px; "
  693 + style="
  694 + cursor: pointer;
  695 + width: 25px;
  696 + height: 25px;
  697 + "
486 698 src="/static/icon/view.png"
487 699 @click="routeToCourseDetails(course._id)"
488 700 />
... ... @@ -492,9 +704,10 @@
492 704 </v-list-tile-avatar>
493 705 <v-list-tile-content>
494 706 <v-list-tile-title
495   - style="cursor: pointer;"
  707 + style="cursor: pointer"
496 708 @click="routeToCourseDetails(course._id)"
497   - >{{ course.courseName }}</v-list-tile-title>
  709 + >{{ course.courseName }}</v-list-tile-title
  710 + >
498 711 </v-list-tile-content>
499 712 </v-list-tile>
500 713 </template>
... ... @@ -503,135 +716,135 @@
503 716 </v-layout>
504 717 </v-container>
505 718 </v-card>
  719 + <!-- <v-card class="elevation-0 account-Card">
  720 + <v-container>
  721 + <v-card-title class="title font-weight-bold">My Courses</v-card-title>
  722 + <v-layout wrap>
  723 + <v-flex xs3 v-for="(course,i) in courseData" :key="i">
  724 + <v-btn block outline color="#71d9ea" dark>
  725 + <span
  726 + class="subheading font-weight-bold"
  727 + @click="routeToCourseDetails(course._id)"
  728 + >{{ course.courseName }}</span>
  729 + </v-btn>
  730 +
  731 + </v-flex>
  732 + </v-layout>
  733 + </v-container>
  734 + </v-card>-->
506 735 </v-flex>
507 736 </v-layout>
508 737  
509 738 <v-layout row wrap v-if="role == 'PARENT'">
510   - <!-- LATEST ANNOUNCEMENTSS , IF ROLE == PARENT -->
511   - <v-flex xs6>
512   - <v-card class="card">
  739 + <!-- ROLE - PARENT , LATEST ANNOUNCEMENTS -->
  740 + <v-flex xs12 sm6 md6>
  741 + <!-- NOTICE -->
  742 + <v-card class="elevation-3 card">
513 743 <v-container>
514 744 <v-card-title
515 745 class="justify-center subheading font-weight-bold"
516   - >Latest Announcements</v-card-title>
517   -
518   - <v-data-table
519   - :items="annoucementData"
520   - class="elevation-0"
521   - flat
522   - hide-actions
523   - hide-headers
524   - style="border-spacing: 0 !important;"
  746 + >Latest Announcements</v-card-title
525 747 >
526   - <template
527   - slot="items"
528   - slot-scope="props"
529   - v-if="props.index < 5"
530   - style="border-spacing: 0 !important;"
  748 + <v-layout column>
  749 + <v-flex
  750 + v-for="(item, index) in annoucementData"
  751 + :key="index"
  752 + style="cursor: pointer"
531 753 >
532   - <tr class="td-notice">
533   - <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
534   - <td>
535   - <span class="grey--text caption">{{ date(props.item.created) }}</span>
536   - <br />
537   - <span class="body-2">{{ props.item.discussionType}}</span>
538   - </td>
539   - <td class="text-xs-center">
540   - <span>
541   - <v-tooltip top>
542   - <img
543   - slot="activator"
544   - style="cursor:pointer; width:25px; height:25px; "
545   - src="/static/icon/view.png"
546   - />
547   - <span>View</span>
548   - </v-tooltip>
549   - </span>
550   - </td>
551   - </tr>
552   - </template>
553   - </v-data-table>
  754 + <v-layout column>
  755 + <!--Date-->
  756 + <v-flex class="pb-2 pl-2 pr-2">
  757 + <v-chip
  758 + :color="colorsArray[index % colorsArray.length]"
  759 + text-color="white"
  760 + class="ma-0"
  761 + >{{
  762 + moment(item.created).format("DD MMMM, YYYY")
  763 + }}</v-chip
  764 + >
  765 + </v-flex>
  766 + <!-- title -->
  767 + <v-flex class="pa-2">
  768 + <div
  769 + class="body-1 font-weight-bold px-2"
  770 + @click="profile"
  771 + >
  772 + {{ item.discussionType }}
  773 + </div>
  774 + </v-flex>
  775 +
  776 + <!-- divider -->
  777 + <v-flex class="pa-2">
  778 + <v-divider></v-divider>
  779 + </v-flex>
  780 + </v-layout>
  781 + </v-flex>
  782 + </v-layout>
554 783 </v-container>
555 784 </v-card>
556 785 </v-flex>
557   - <!-- IF ROLE == PARENT, SCHOOL EVENTS -->
558   - <v-flex xs6>
559   - <v-card class="card">
560   - <v-container>
561   - <v-card-title class="justify-center subheading font-weight-bold">School Events</v-card-title>
562   - <div
563   - v-for="(schoolEvent,index) in schoolEvents"
564   - :key="schoolEvent.title"
565   - class="mt-2"
566   - style="cursor: pointer;"
567   - @click="seeEventDetails(schoolEvent,'schoolEvent')"
568   - >
569   - <!-- color dot-->
570   - <span
571   - :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
572   - style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
573   - ></span>
574   - <div style="display: inline-block;" class="ml-2">
575   - <div>
576   - <!-- date of event -->
577   - <div
578   - class="grey--text lighten-1 caption"
579   - v-if="schoolEvent.dateOfEvent"
580   - >{{moment(schoolEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
581   - <!-- event title-->
582   - <div class="body-1" v-if="schoolEvent.title">{{schoolEvent.title}}</div>
  786 +
  787 + <v-flex xs12 sm6>
  788 + <v-layout column>
  789 + <!-- ROLE - PARENT, SCHOOL EVENTS -->
  790 + <v-flex>
  791 + <v-card class="elevation-3 card">
  792 + <v-container>
  793 + <v-card-title
  794 + class="justify-center subheading font-weight-bold"
  795 + >School Events</v-card-title
  796 + >
  797 + <div
  798 + v-for="(schoolEvent, index) in schoolEvents"
  799 + :key="schoolEvent.title"
  800 + class="mt-2"
  801 + style="cursor: pointer"
  802 + @click="seeEventDetails(schoolEvent, 'schoolEvent')"
  803 + >
  804 + <!-- color dot-->
  805 + <span
  806 + :style="{
  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 + "
  817 + ></span>
  818 + <div style="display: inline-block" class="ml-2">
  819 + <div>
  820 + <!-- date of event -->
  821 + <div
  822 + class="grey--text lighten-1 caption"
  823 + v-if="schoolEvent.dateOfEvent"
  824 + >
  825 + {{
  826 + moment(schoolEvent.dateOfEvent).format(
  827 + "DD MMMM, YYYY"
  828 + )
  829 + }}
  830 + </div>
  831 + <!-- event title-->
  832 + <div class="body-1" v-if="schoolEvent.title">
  833 + {{ schoolEvent.title }}
  834 + </div>
  835 + </div>
  836 + </div>
583 837 </div>
584   - </div>
585   - </div>
586   - <div v-if="schoolEvents.length == 0">
587   - <p class="text-center title grey lighten-4 error--text">No Data Found!</p>
588   - </div>
589   - </v-container>
590   - </v-card>
  838 + <div v-if="schoolEvents.length == 0">
  839 + <p class="text-center title grey lighten-4 error--text">
  840 + No Data Found!
  841 + </p>
  842 + </div>
  843 + </v-container>
  844 + </v-card>
  845 + </v-flex>
  846 + </v-layout>
591 847 </v-flex>
592   - <!-- ONLINE USER , IF ROLE == PARENT -->
593   - <!-- <v-flex xs6>
594   - <v-card class="card">
595   - <v-container>
596   - <v-card-title class="justify-center subheading font-weight-bold">Online user</v-card-title>
597   -
598   - <v-data-table
599   - :items="onlineUser"
600   - class="elevation-0"
601   - flat
602   - hide-actions
603   - hide-headers
604   - style="border-spacing: 0 !important;"
605   - >
606   - <template
607   - slot="items"
608   - slot-scope="props"
609   - v-if="props.index < 5"
610   - style="border-spacing: 0 !important;"
611   - >
612   - <tr class="td-notice">
613   - <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
614   - <td>
615   - <span class="body-2">{{ props.item.user }}</span>
616   - </td>
617   - <td class="text-xs-center">
618   - <span>
619   - <v-tooltip top>
620   - <img
621   - slot="activator"
622   - style="cursor:pointer; width:25px; height:25px; "
623   - src="/static/icon/view.png"
624   - />
625   - <span>View</span>
626   - </v-tooltip>
627   - </span>
628   - </td>
629   - </tr>
630   - </template>
631   - </v-data-table>
632   - </v-container>
633   - </v-card>
634   - </v-flex>-->
635 848 </v-layout>
636 849 </v-container>
637 850 </v-flex>
... ... @@ -670,72 +883,114 @@
670 883 </p>
671 884 <p class="mb-0 caption grey--text">{{ userData.email }}</p>
672 885 <p class="mb-0 caption grey--text">{{ userData.mobile }}</p>
673   - <address class="caption grey--text mb-3">{{ userData.address }}</address>
  886 + <address class="caption grey--text mb-3">
  887 + {{ userData.address }}
  888 + </address>
674 889 </v-flex>
675 890 </v-layout>
676 891 </v-flex>
677 892 <hr />
678   - <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>
679 896  
680   - <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>
681 901  
682 902 <!-- MEETING EVENTS -->
683 903 <!-- IF ROLE IS ADMIN -->
684 904 <v-card class="my-3 elevation-0">
685   - <v-card-text v-if="$store.state.role === 'ADMIN' ">
  905 + <v-card-text v-if="$store.state.role === 'ADMIN'">
686 906 <!-- MEETING EVENTS -->
687   - <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 + >
688 910 <div
689   - v-for="(activity,index) in activityList"
  911 + v-for="(activity, index) in activityList"
690 912 :key="index"
691 913 class="mt-2"
692   - style="cursor: pointer;"
  914 + style="cursor: pointer"
693 915 @click="seeEventDetails(activity)"
694 916 >
695 917 <span
696   - :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
697   - style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
  918 + :style="{
  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 + "
698 929 ></span>
699   - <div style="display: inline-block;" class="ml-2">
  930 + <div style="display: inline-block" class="ml-2">
700 931 <div>
701 932 <div
702 933 class="grey--text lighten-1 caption"
703 934 v-if="activity.dateOfEvent"
704   - >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div>
705   - <div class="body-1" v-if="activity.title">{{activity.title}}</div>
  935 + >
  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>
706 943 </div>
707 944 </div>
708 945 </div>
709 946 <div v-if="activityList.length == 0">
710   - <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>
711 950 </div>
712 951 </v-card-text>
713 952  
714 953 <!-- ROLE IS NOT ADMIN -->
715 954 <v-card-text v-if="$store.state.role != 'ADMIN'">
716   - <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 + >
717 958 <div
718   - v-for="(activity,index) in activityList"
  959 + v-for="(activity, index) in activityList"
719 960 :key="index"
720 961 class="mt-2"
721   - style="cursor: pointer;"
  962 + style="cursor: pointer"
722 963 @click="seeEventDetails(activity)"
723 964 >
724 965 <span
725   - :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
726   - style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
  966 + :style="{
  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 + "
727 977 ></span>
728   - <div style="display: inline-block;" class="ml-2">
  978 + <div style="display: inline-block" class="ml-2">
729 979 <!-- MEETING EVENTS FOR PARENT -->
730   - <div v-if="$store.state.role === 'PARENT' ">
  980 + <div v-if="$store.state.role === 'PARENT'">
731 981 <div
732 982 class="grey--text lighten-1 caption"
733 983 v-if="activity.meetingEvent"
734   - >{{moment(activity.meetingEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
735   - <div
736   - class="body-2"
737   - v-if="activity.meetingEvent"
738   - >{{activity.meetingEvent.title}}</div>
  984 + >
  985 + {{
  986 + moment(activity.meetingEvent.dateOfEvent).format(
  987 + "DD MMMM, YYYY"
  988 + )
  989 + }}
  990 + </div>
  991 + <div class="body-2" v-if="activity.meetingEvent">
  992 + {{ activity.meetingEvent.title }}
  993 + </div>
739 994 </div>
740 995  
741 996 <!-- MEETING EVENTS FOR TEACHER -->
... ... @@ -743,12 +998,20 @@
743 998 <div
744 999 class="grey--text lighten-1 caption"
745 1000 v-if="activity.dateOfEvent"
746   - >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div>
747   - <div class="body-2" v-if="activity.title">{{activity.title}}</div>
  1001 + >
  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>
748 1009 </div>
749 1010 </div>
750 1011 <div v-if="activityList.length == 0">
751   - <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>
752 1015 </div>
753 1016 </div>
754 1017 </v-card-text>
... ... @@ -762,7 +1025,7 @@
762 1025 <v-card color="grey lighten-4" flat>
763 1026 <v-toolbar dark color="fixcolors">
764 1027 <v-spacer></v-spacer>
765   - <v-btn icon @click="dialog= false">
  1028 + <v-btn icon @click="dialog = false">
766 1029 <v-icon>close</v-icon>
767 1030 </v-btn>
768 1031 </v-toolbar>
... ... @@ -780,7 +1043,7 @@
780 1043 <v-icon>access_time</v-icon>
781 1044 </v-list-tile-action>
782 1045 <v-list-tile-content>
783   - <v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title>
  1046 + <v-list-tile-title>{{ date(selected.start) }}</v-list-tile-title>
784 1047 </v-list-tile-content>
785 1048 </v-list-tile>
786 1049 </v-flex>
... ... @@ -793,15 +1056,17 @@
793 1056 import http from "@/Services/http.js";
794 1057 import moment from "moment";
795 1058 import AllApiCalls from "@/Services/AllApiCalls.js";
  1059 +import VueApexCharts from "vue-apexcharts";
796 1060 // import { FunctionalCalendar } from "vue-functional-calendar";
797 1061  
798 1062 export default {
799 1063 components: {
800   - // FunctionalCalendar
  1064 + apexcharts: VueApexCharts,
801 1065 },
802 1066 mixins: [AllApiCalls],
803 1067 data() {
804 1068 return {
  1069 + studentsData: [],
805 1070 // data: {
806 1071 // clieckedToday: false
807 1072 // },
... ... @@ -821,6 +1086,24 @@ export default {
821 1086 dialogSchoolEvents: [],
822 1087 dialogMeetingEvents: [],
823 1088  
  1089 + // apexCharts
  1090 + maleFemaleSeries: [],
  1091 + maleFemaleData: {
  1092 + labels: ["Male", "Female"],
  1093 + legend: {
  1094 + formatter: function (val, opts) {
  1095 + return val + " - " + opts.w.globals.series[opts.seriesIndex];
  1096 + },
  1097 + position: "bottom",
  1098 + },
  1099 + dataLabels: {
  1100 + enabled: true,
  1101 + formatter: function (val, opts) {
  1102 + return opts.w.globals.series[opts.seriesIndex];
  1103 + },
  1104 + },
  1105 + },
  1106 +
824 1107 // CALENDER
825 1108 moment: moment,
826 1109 activityEvents: [],
... ... @@ -870,7 +1153,7 @@ export default {
870 1153 feeData: [],
871 1154 collectionData: [],
872 1155 courseData: [],
873   - studentsData: [],
  1156 +
874 1157 annoucementData: [],
875 1158 role: "",
876 1159 attrs: [
... ... @@ -965,6 +1248,15 @@ export default {
965 1248 },
966 1249 },
967 1250  
  1251 + /* ROLE PARENT - MY KIDS */
  1252 + studentsData: [],
  1253 + activeStudent: {},
  1254 + activeStudentsList: [],
  1255 + rowsPerPageItems: [2],
  1256 + pagination: {
  1257 + rowsPerPage: 2,
  1258 + },
  1259 +
968 1260 // LATEST ACTIVITY
969 1261 colorsArray: ["#ff8a89", "#71d9ea", "#7852cc", "#F9A825"],
970 1262 activityList: [],
... ... @@ -1255,6 +1547,7 @@ export default {
1255 1547 })
1256 1548 .then((response) => {
1257 1549 this.annoucementData = response.data.data;
  1550 + console.log("avnn - ", this.annoucementData);
1258 1551 this.showLoader = false;
1259 1552 })
1260 1553 .catch((err) => {
... ... @@ -1316,6 +1609,24 @@ export default {
1316 1609 }
1317 1610 }
1318 1611 },
  1612 + async getMaleFemaleData() {
  1613 + await http()
  1614 + .get("/getStudentsByGender")
  1615 + .then((response) => {
  1616 + console.log("gender response - ", response);
  1617 + for (var i = 0; i < response.data.data.length; i++) {
  1618 + if (response.data.data[i]._id == "male") {
  1619 + this.maleFemaleSeries.push(response.data.data[i].total);
  1620 + }
  1621 + if (response.data.data[i]._id == "female") {
  1622 + this.maleFemaleSeries.push(response.data.data[i].total);
  1623 + }
  1624 + }
  1625 + })
  1626 + .catch((error) => {
  1627 + this.showLoader = false;
  1628 + });
  1629 + },
1319 1630 },
1320 1631  
1321 1632 mounted() {
... ... @@ -1329,23 +1640,32 @@ export default {
1329 1640 // this.token = this.$store.state.token;
1330 1641 await this.getFeesAndCollectionsData();
1331 1642 await this.getExpensesData();
  1643 + await this.getMaleFemaleData();
1332 1644 } else if (this.$store.state.schoolRole === "SUPERADMIN") {
1333 1645 // this.token = this.$store.state.schoolToken;
1334 1646 await this.getFeesAndCollectionsData();
1335 1647 await this.getExpensesData();
  1648 + await this.getMaleFemaleData();
1336 1649 } else if (this.$store.state.role === "TEACHER") {
1337 1650 // this.token = this.$store.state.token;
  1651 + await this.getMaleFemaleData();
1338 1652 } else if (this.$store.state.role === "ACCOUNTANT") {
1339 1653 // this.token = this.$store.state.token;
1340 1654 } else if (this.$store.state.role === "LIBRARIAN") {
1341 1655 // this.token = this.$store.state.token;
1342 1656 } else if (this.$store.state.role === "PARENT") {
1343   - // this.token = this.$store.state.token;
1344   - // await this.getparentStudents();
1345   - this.studentsData = this.$store.getters.GET_STUDENTS_DATA;
1346   - // console.log("students data - ", this.studentsData);
1347 1657 await this.getCourses();
1348 1658 await this.getAnnoucementes();
  1659 + this.studentsData = this.$store.getters.GET_STUDENTS_DATA;
  1660 + this.activeStudent = this.$store.getters.GET_ACTIVE_STUDENT;
  1661 + /* MAKE A LIST OF STUDENTS WITH STATUS TRUE, FOR DISPLAYING STUDENTS DATA AT TOP */
  1662 + for (var i = 0; i < this.studentsData.length; i++) {
  1663 + if (this.studentsData[i].status == true) {
  1664 + this.activeStudentsList.push(this.studentsData[i]);
  1665 + }
  1666 + }
  1667 + console.log("student list - ", this.activeStudentsList);
  1668 + console.log("active - ", this.activeStudent);
1349 1669 }
1350 1670 this.role = this.$store.state.role;
1351 1671  
... ...
src/pages/changeStudents/changeStudents.vue
Diff comments   View file @2f89adb
... ... @@ -77,6 +77,12 @@ export default {
77 77 methods: {
78 78 change() {
79 79 localStorage.setItem("parentStudentId", this.changeStudent);
  80 + /* Look for active student object */
  81 + for(var i = 0; i < this.studentsData.length; i++){
  82 + if(this.studentsData[i]._id == this.changeStudent){
  83 + this.$store.dispatch("SET_ACTIVE_STUDENT",this.studentsData[i])
  84 + }
  85 + }
80 86 this.$router.replace({ path: "/" });
81 87 },
82 88 getparentStudents() {
... ...
src/store/store.js
Diff comments   View file @2f89adb
... ... @@ -19,11 +19,16 @@ export default new Vuex.Store({
19 19 schoolToken: null,
20 20 schoolRole: null,
21 21 studentsData: [],
  22 + activeStudent: {},
  23 +
22 24 },
23 25 getters: {
24 26 GET_STUDENTS_DATA: state => {
25 27 return state.studentsData
26 28 },
  29 + GET_ACTIVE_STUDENT: state => {
  30 + return state.activeStudent
  31 + },
27 32 GET_TOKEN: state => {
28 33 return state.token
29 34 },
... ... @@ -69,6 +74,9 @@ export default new Vuex.Store({
69 74 SET_STUDENTS_DATA(state, data) {
70 75 state.studentsData = data
71 76 },
  77 + SET_ACTIVE_STUDENT(state, data) {
  78 + state.activeStudent = data
  79 + },
72 80 // SchoolId(state, schoolId) {
73 81 // state.schoolId = schoolId
74 82 // }
... ... @@ -100,6 +108,11 @@ export default new Vuex.Store({
100 108 }, data) {
101 109 commit('SET_STUDENTS_DATA', data)
102 110 },
  111 + SET_ACTIVE_STUDENT({
  112 + commit
  113 + }, data) {
  114 + commit('SET_ACTIVE_STUDENT', data)
  115 + },
103 116 Id({
104 117 commit
105 118 }, id) {
... ...