viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 88b7fd92ad55faf2a2338fc958314d6bd83412c6

Authored by Amber Dev
1 parent 874e8a70ee
Exists in master and in 1 other branch ui-design

added male female data

Showing 1 changed file with 114 additions and 38 deletions   Show diff stats
src/pages/Dashboard/dashboard.vue
Diff comments   View file @88b7fd9
... ... @@ -298,9 +298,36 @@
298 298 <v-flex xs12 sm6>
299 299 <v-card class="card">
300 300 <v-container>
301   - <v-card-title class="justify-center subheading font-weight-bold">Notice</v-card-title>
  301 + <v-card-title class="justify-center title font-weight-bold">Notice</v-card-title>
  302 + <v-layout column>
  303 + <v-flex
  304 + v-for="(item,index) in noticeData"
  305 + :key="index"
  306 + style="cursor: pointer;"
  307 + >
  308 + <v-layout column>
  309 + <!--Date-->
  310 + <v-flex class="pb-2 pl-2 pr-2">
  311 + <v-chip
  312 + :color="colorsArray[index%colorsArray.length]"
  313 + text-color="white"
  314 + class="ma-0"
  315 + >{{ moment(item.created).format("DD MMMM, YYYY") }}</v-chip>
  316 + </v-flex>
  317 + <!-- title -->
  318 + <v-flex class="pa-2">
  319 + <div class="body-1 font-weight-bold px-2">{{item.title}}</div>
  320 + </v-flex>
302 321  
303   - <v-data-table
  322 + <!-- divider -->
  323 + <v-flex class="pa-2">
  324 + <v-divider></v-divider>
  325 + </v-flex>
  326 + </v-layout>
  327 + </v-flex>
  328 + </v-layout>
  329 +
  330 + <!-- <v-data-table
304 331 :items="noticeData"
305 332 class="elevation-0"
306 333 flat
... ... @@ -320,9 +347,9 @@
320 347 <span class="grey--text caption">{{ date(props.item.created) }}</span>
321 348 <br />
322 349 <span class="body-2">{{ props.item.title}}</span>
323   - </td>
324   - <!-- <td class="grey--text mt-2" >{{ props.item.description}}</td> -->
325   -
  350 + </td>-->
  351 + <!-- <td class="grey--text mt-2" >{{ props.item.description}}</td> -->
  352 + <!--
326 353 <td class="text-xs-center">
327 354 <span>
328 355 <v-tooltip top>
... ... @@ -338,46 +365,62 @@
338 365 </td>
339 366 </tr>
340 367 </template>
341   - </v-data-table>
  368 + </v-data-table>-->
342 369 </v-container>
343 370 </v-card>
344 371 </v-flex>
345 372  
346 373 <!-- SCHOOL EVENTS -->
347   -
348 374 <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>
  375 + <v-layout column>
  376 + <!-- school events -->
  377 + <v-flex>
  378 + <v-card class="card">
  379 + <v-container>
  380 + <v-card-title class="justify-center title font-weight-bold">School Events</v-card-title>
  381 + <div
  382 + v-for="(schoolEvent,index) in schoolEvents"
  383 + :key="schoolEvent.title"
  384 + class="mt-2"
  385 + style="cursor: pointer;"
  386 + @click="seeEventDetails(schoolEvent,'schoolEvent')"
  387 + >
  388 + <!-- color dot-->
  389 + <span
  390 + :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
  391 + style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
  392 + ></span>
  393 + <div style="display: inline-block;" class="ml-2">
  394 + <div>
  395 + <!-- date of event -->
  396 + <div
  397 + class="grey--text lighten-1 caption"
  398 + v-if="schoolEvent.dateOfEvent"
  399 + >{{moment(schoolEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
  400 + <!-- event title-->
  401 + <div class="body-1" v-if="schoolEvent.title">{{schoolEvent.title}}</div>
  402 + </div>
  403 + </div>
373 404 </div>
  405 + <div v-if="schoolEvents.length == 0">
  406 + <p class="text-center title grey lighten-4 error--text">No Data Found!</p>
  407 + </div>
  408 + </v-container>
  409 + </v-card>
  410 + </v-flex>
  411 + <!-- apex charts - Male Female data -->
  412 + <v-flex>
  413 + <v-card>
  414 + <div id="chart">
  415 + <apexcharts
  416 + type="donut"
  417 + :options="maleFemaleData"
  418 + :series="maleFemaleSeries"
  419 + />
374 420 </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>
  421 + </v-card>
  422 + </v-flex>
  423 + </v-layout>
381 424 </v-flex>
382 425 </v-layout>
383 426  
... ... @@ -793,15 +836,17 @@
793 836 import http from "@/Services/http.js";
794 837 import moment from "moment";
795 838 import AllApiCalls from "@/Services/AllApiCalls.js";
  839 +import VueApexCharts from "vue-apexcharts";
796 840 // import { FunctionalCalendar } from "vue-functional-calendar";
797 841  
798 842 export default {
799 843 components: {
800   - // FunctionalCalendar
  844 + apexcharts: VueApexCharts,
801 845 },
802 846 mixins: [AllApiCalls],
803 847 data() {
804 848 return {
  849 + today: new Date(),
805 850 // data: {
806 851 // clieckedToday: false
807 852 // },
... ... @@ -821,6 +866,24 @@ export default {
821 866 dialogSchoolEvents: [],
822 867 dialogMeetingEvents: [],
823 868  
  869 + // apexCharts
  870 + maleFemaleSeries: [20, 30],
  871 + maleFemaleData: {
  872 + labels: ["Male", "Female"],
  873 + legend: {
  874 + formatter: function (val, opts) {
  875 + return val + " - " + opts.w.globals.series[opts.seriesIndex];
  876 + },
  877 + position: 'bottom',
  878 + },
  879 + dataLabels: {
  880 + enabled: true,
  881 + formatter: function (val,opts) {
  882 + return opts.w.globals.series[opts.seriesIndex];
  883 + },
  884 + },
  885 + },
  886 +
824 887 // CALENDER
825 888 moment: moment,
826 889 activityEvents: [],
... ... @@ -1316,6 +1379,16 @@ export default {
1316 1379 }
1317 1380 }
1318 1381 },
  1382 + async getMaleFemaleData(){
  1383 + await http()
  1384 + .get("/getStudentsByGender")
  1385 + .then((response) => {
  1386 + console.log("gender response - ", response)
  1387 + })
  1388 + .catch((error) => {
  1389 + this.showLoader = false;
  1390 + });
  1391 + }
1319 1392 },
1320 1393  
1321 1394 mounted() {
... ... @@ -1329,12 +1402,15 @@ export default {
1329 1402 // this.token = this.$store.state.token;
1330 1403 await this.getFeesAndCollectionsData();
1331 1404 await this.getExpensesData();
  1405 + await this.getMaleFemaleData();
1332 1406 } else if (this.$store.state.schoolRole === "SUPERADMIN") {
1333 1407 // this.token = this.$store.state.schoolToken;
1334 1408 await this.getFeesAndCollectionsData();
1335 1409 await this.getExpensesData();
  1410 + await this.getMaleFemaleData();
1336 1411 } else if (this.$store.state.role === "TEACHER") {
1337 1412 // this.token = this.$store.state.token;
  1413 + await this.getMaleFemaleData();
1338 1414 } else if (this.$store.state.role === "ACCOUNTANT") {
1339 1415 // this.token = this.$store.state.token;
1340 1416 } else if (this.$store.state.role === "LIBRARIAN") {
... ...