From 88b7fd92ad55faf2a2338fc958314d6bd83412c6 Mon Sep 17 00:00:00 2001
From: amber <amber.dev@viithiisys.com>
Date: Thu, 17 Sep 2020 14:12:20 +0530
Subject: [PATCH] added male female data

---
 src/pages/Dashboard/dashboard.vue | 152 ++++++++++++++++++++++++++++----------
 1 file changed, 114 insertions(+), 38 deletions(-)

diff --git a/src/pages/Dashboard/dashboard.vue b/src/pages/Dashboard/dashboard.vue
index c440b96..e7897e1 100644
--- a/src/pages/Dashboard/dashboard.vue
+++ b/src/pages/Dashboard/dashboard.vue
@@ -298,9 +298,36 @@
             <v-flex xs12 sm6>
               <v-card class="card">
                 <v-container>
-                  <v-card-title class="justify-center subheading font-weight-bold">Notice</v-card-title>
+                  <v-card-title class="justify-center title font-weight-bold">Notice</v-card-title>
+                  <v-layout column>
+                    <v-flex
+                      v-for="(item,index) in noticeData"
+                      :key="index"
+                      style="cursor: pointer;"
+                    >
+                      <v-layout column>
+                        <!--Date-->
+                        <v-flex class="pb-2 pl-2 pr-2">
+                          <v-chip
+                            :color="colorsArray[index%colorsArray.length]"
+                            text-color="white"
+                            class="ma-0"
+                          >{{ moment(item.created).format("DD MMMM, YYYY") }}</v-chip>
+                        </v-flex>
+                        <!-- title -->
+                        <v-flex class="pa-2">
+                          <div class="body-1 font-weight-bold px-2">{{item.title}}</div>
+                        </v-flex>
 
-                  <v-data-table
+                        <!-- divider -->
+                        <v-flex class="pa-2">
+                          <v-divider></v-divider>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                  </v-layout>
+
+                  <!-- <v-data-table
                     :items="noticeData"
                     class="elevation-0"
                     flat
@@ -320,9 +347,9 @@
                           <span class="grey--text caption">{{ date(props.item.created) }}</span>
                           <br />
                           <span class="body-2">{{ props.item.title}}</span>
-                        </td>
-                        <!-- <td class="grey--text mt-2" >{{ props.item.description}}</td> -->
-
+                  </td>-->
+                  <!-- <td class="grey--text mt-2" >{{ props.item.description}}</td> -->
+                  <!-- 
                         <td class="text-xs-center">
                           <span>
                             <v-tooltip top>
@@ -338,46 +365,62 @@
                         </td>
                       </tr>
                     </template>
-                  </v-data-table>
+                  </v-data-table>-->
                 </v-container>
               </v-card>
             </v-flex>
 
             <!-- SCHOOL EVENTS -->
-
             <v-flex xs12 sm6>
-              <v-card class="card">
-                <v-container>
-                  <v-card-title class="justify-center subheading font-weight-bold">School Events</v-card-title>
-                  <div
-                    v-for="(schoolEvent,index) in schoolEvents"
-                    :key="schoolEvent.title"
-                    class="mt-2"
-                    style="cursor: pointer;"
-                    @click="seeEventDetails(schoolEvent,'schoolEvent')"
-                  >
-                    <!-- color dot-->
-                    <span
-                      :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
-                      style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
-                    ></span>
-                    <div style="display: inline-block;" class="ml-2">
-                      <div>
-                        <!-- date of event -->
-                        <div
-                          class="grey--text lighten-1 caption"
-                          v-if="schoolEvent.dateOfEvent"
-                        >{{moment(schoolEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
-                        <!-- event title-->
-                        <div class="body-1" v-if="schoolEvent.title">{{schoolEvent.title}}</div>
+              <v-layout column>
+                <!-- school events -->
+                <v-flex>
+                  <v-card class="card">
+                    <v-container>
+                      <v-card-title class="justify-center title font-weight-bold">School Events</v-card-title>
+                      <div
+                        v-for="(schoolEvent,index) in schoolEvents"
+                        :key="schoolEvent.title"
+                        class="mt-2"
+                        style="cursor: pointer;"
+                        @click="seeEventDetails(schoolEvent,'schoolEvent')"
+                      >
+                        <!-- color dot-->
+                        <span
+                          :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
+                          style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
+                        ></span>
+                        <div style="display: inline-block;" class="ml-2">
+                          <div>
+                            <!-- date of event -->
+                            <div
+                              class="grey--text lighten-1 caption"
+                              v-if="schoolEvent.dateOfEvent"
+                            >{{moment(schoolEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
+                            <!-- event title-->
+                            <div class="body-1" v-if="schoolEvent.title">{{schoolEvent.title}}</div>
+                          </div>
+                        </div>
                       </div>
+                      <div v-if="schoolEvents.length == 0">
+                        <p class="text-center title grey lighten-4 error--text">No Data Found!</p>
+                      </div>
+                    </v-container>
+                  </v-card>
+                </v-flex>
+                <!-- apex charts - Male Female data -->
+                <v-flex>
+                  <v-card>
+                    <div id="chart">
+                      <apexcharts
+                        type="donut"
+                        :options="maleFemaleData"
+                        :series="maleFemaleSeries"
+                      />
                     </div>
-                  </div>
-                  <div v-if="schoolEvents.length == 0">
-                    <p class="text-center title grey lighten-4 error--text">No Data Found!</p>
-                  </div>
-                </v-container>
-              </v-card>
+                  </v-card>
+                </v-flex>
+              </v-layout>
             </v-flex>
           </v-layout>
 
@@ -793,15 +836,17 @@
 import http from "@/Services/http.js";
 import moment from "moment";
 import AllApiCalls from "@/Services/AllApiCalls.js";
+import VueApexCharts from "vue-apexcharts";
 // import { FunctionalCalendar } from "vue-functional-calendar";
 
 export default {
   components: {
-    // FunctionalCalendar
+    apexcharts: VueApexCharts,
   },
   mixins: [AllApiCalls],
   data() {
     return {
+      today: new Date(),
       // data: {
       //   clieckedToday: false
       // },
@@ -821,6 +866,24 @@ export default {
       dialogSchoolEvents: [],
       dialogMeetingEvents: [],
 
+      // apexCharts
+      maleFemaleSeries: [20, 30],
+      maleFemaleData: {
+        labels: ["Male", "Female"],
+        legend: {
+          formatter: function (val, opts) {
+            return val + " - " + opts.w.globals.series[opts.seriesIndex];
+          },
+          position: 'bottom',
+        },
+        dataLabels: {
+          enabled: true,
+          formatter: function (val,opts) {
+            return opts.w.globals.series[opts.seriesIndex];
+          },
+        },
+      },
+
       // CALENDER
       moment: moment,
       activityEvents: [],
@@ -1316,6 +1379,16 @@ export default {
         }
       }
     },
+    async getMaleFemaleData(){
+       await http()
+          .get("/getStudentsByGender")
+          .then((response) => {
+            console.log("gender response - ", response)
+          })
+          .catch((error) => {
+            this.showLoader = false;
+          });
+    }
   },
 
   mounted() {
@@ -1329,12 +1402,15 @@ export default {
       // this.token = this.$store.state.token;
       await this.getFeesAndCollectionsData();
       await this.getExpensesData();
+      await this.getMaleFemaleData();
     } else if (this.$store.state.schoolRole === "SUPERADMIN") {
       // this.token = this.$store.state.schoolToken;
       await this.getFeesAndCollectionsData();
       await this.getExpensesData();
+      await this.getMaleFemaleData();
     } else if (this.$store.state.role === "TEACHER") {
       // this.token = this.$store.state.token;
+      await this.getMaleFemaleData();
     } else if (this.$store.state.role === "ACCOUNTANT") {
       // this.token = this.$store.state.token;
     } else if (this.$store.state.role === "LIBRARIAN") {
-- 
2.0.0