From 6ae46ca27be1784f6f297854797817ff173a2631 Mon Sep 17 00:00:00 2001
From: Neeraj Sharma <neeraj.sharma@viithiisys.com>
Date: Tue, 5 Nov 2019 16:30:07 +0530
Subject: [PATCH] implement upload cv file of student attendence

---
 package-lock.json                               |  33 +++++++
 package.json                                    |   1 +
 src/main.js                                     |   3 +
 src/pages/Account/invoice.vue                   |   3 +-
 src/pages/Attendence/studentAttendence.vue      |  20 ++++-
 src/pages/Attendence/viewStudentsAttendence.vue | 113 +++++++++++++++++++++++-
 6 files changed, 168 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 84c7ed8..4e01c64 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5216,6 +5216,11 @@
         }
       }
     },
+    "file-saver": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.2.tgz",
+      "integrity": "sha512-Wz3c3XQ5xroCxd1G8b7yL0Ehkf0TC9oYC6buPFkNnU9EnaPlifeAFCyCh+iewXTyFRcg0a6j3J7FmJsIhlhBdw=="
+    },
     "file-uri-to-path": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
@@ -10188,6 +10193,11 @@
       "integrity": "sha512-lQe48YPsMJAig+yngZ87Lus+NF+3mtu7DVOBu6b/gHO1YpKwIj5AWjZ/TOS7i46HD/UixzWb1zeWDZfGZ3iYcg==",
       "dev": true
     },
+    "papaparse": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/papaparse/-/papaparse-5.1.0.tgz",
+      "integrity": "sha512-3jEYMiCc8qN7V5ffi2BTS2mRauKxCu5AIED6DxbjnHhIm7OY7fzKYkndfPlHWaaKUDCTml5XTU6V+hiuxGlZuw=="
+    },
     "parallel-transform": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/parallel-transform/-/parallel-transform-1.1.0.tgz",
@@ -15510,6 +15520,29 @@
         "vue-template-es2015-compiler": "^1.5.3"
       }
     },
+    "vue-json-csv": {
+      "version": "1.2.9",
+      "resolved": "https://registry.npmjs.org/vue-json-csv/-/vue-json-csv-1.2.9.tgz",
+      "integrity": "sha512-Z+aBIPmev3xOrJvNB8XyetxDMagIUe272pIs6zKKYUGLQemPQO9q4WpZt3YYItOgo4czQj0Jgm38V4w0etPWWQ==",
+      "requires": {
+        "file-saver": "^2.0.2",
+        "lodash": "^4.17.15",
+        "papaparse": "^5.0.2",
+        "vue": "^2.6.10"
+      },
+      "dependencies": {
+        "lodash": {
+          "version": "4.17.15",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
+          "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
+        },
+        "vue": {
+          "version": "2.6.10",
+          "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.10.tgz",
+          "integrity": "sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ=="
+        }
+      }
+    },
     "vue-loader": {
       "version": "13.7.1",
       "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-13.7.1.tgz",
diff --git a/package.json b/package.json
index 3faaf86..ec43d4b 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "vee-validate": "^2.0.9",
     "vue": "^2.5.16",
     "vue-full-calendar": "^2.7.0",
+    "vue-json-csv": "^1.2.9",
     "vue-material-year-calendar": "^1.2.4",
     "vue-password": "^1.2.0",
     "vue-perfect-scrollbar": "^0.1.0",
diff --git a/src/main.js b/src/main.js
index 6274f4c..dfcd14a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -11,6 +11,9 @@ import colors from 'vuetify/es5/util/colors';
 import Truncate from 'lodash.truncate';
 import store from '@/store/store'
 import FullCalendar from 'vue-full-calendar';
+import JsonCSV from 'vue-json-csv'
+
+Vue.component('downloadCsv', JsonCSV)
 
 Vue.config.productionTip = false;
 Vue.use(FullCalendar);
diff --git a/src/pages/Account/invoice.vue b/src/pages/Account/invoice.vue
index 86db787..0622907 100644
--- a/src/pages/Account/invoice.vue
+++ b/src/pages/Account/invoice.vue
@@ -453,7 +453,7 @@ export default {
     inchargeRules: [v => !!v || "Student Name is required"],
     dateRules: [v => !!v || " Date is required"],
     paymentStatusRules: [v => !!v || "Payment Status is required"],
-    paymentMethodsRules :  [v => !!v || "payment Method is required"],
+    paymentMethodsRules: [v => !!v || "payment Method is required"],
     headers: [
       {
         text: "No",
@@ -630,6 +630,7 @@ export default {
       this.$refs.form.reset();
     },
     getInvoiceList() {
+      this.showLoader = true;
       http()
         .get("/getInvoicesList", {
           headers: { Authorization: "Bearer " + this.token }
diff --git a/src/pages/Attendence/studentAttendence.vue b/src/pages/Attendence/studentAttendence.vue
index 980e68e..90d1984 100644
--- a/src/pages/Attendence/studentAttendence.vue
+++ b/src/pages/Attendence/studentAttendence.vue
@@ -12,10 +12,15 @@
     <!-- ****** EXISTING STUDENTS TABLE ****** -->
 
     <v-card flat>
-     <h4 class="text-xs-center pt-4 ml-2  hidden-lg-only hidden-xl-only hidden-md-only">Student Attendence</h4>
+      <h4
+        class="text-xs-center pt-4 ml-2 hidden-lg-only hidden-xl-only hidden-md-only"
+      >Student Attendence</h4>
       <v-card-actions>
         <v-layout>
-          <h3 class="right mt-2 ml-2  hidden-sm-only hidden-xs-only">Student Attendence</h3>
+          <h3 class="right mt-2 ml-2 hidden-sm-only hidden-xs-only">Student Attendence</h3>
+          <!-- <download-csv :data="json_data">
+            <v-btn>Download Data</v-btn>
+          </download-csv>-->
         </v-layout>
         <v-spacer></v-spacer>
         <v-flex xs12 sm2>
@@ -125,6 +130,7 @@ export default {
       { text: "Email", value: "email", sortable: false, align: "center" },
       { text: "Action", value: "", sortable: false, align: "center" }
     ],
+    // json_data: [],
     studentsList: [],
     parentId: "",
     token: "",
@@ -135,6 +141,7 @@ export default {
   }),
   methods: {
     getSections(_id) {
+      this.showLoader = true;
       var token = this.$store.state.token;
       http()
         .get(
@@ -145,11 +152,18 @@ export default {
           }
         )
         .then(response => {
+          this.showLoader = false;
           this.studentsList = response.data.data;
           console.log("getSectionsList=====>", response.data.data);
         })
         .catch(err => {
           // console.log("err====>", err);
+          this.showLoader = false;
+          if (error.response.status === 401) {
+            this.$router.replace({ path: "/" });
+            this.$store.dispatch("setToken", null);
+            this.$store.dispatch("Id", null);
+          }
         });
     },
     getAllClass() {
@@ -162,7 +176,7 @@ export default {
         })
         .catch(err => {
           // console.log("err====>", err);
-          this.$router.replace({ path: "/" });
+          // this.$router.replace({ path: "/" });
         });
     }
   },
diff --git a/src/pages/Attendence/viewStudentsAttendence.vue b/src/pages/Attendence/viewStudentsAttendence.vue
index 6be965e..30a67ad 100644
--- a/src/pages/Attendence/viewStudentsAttendence.vue
+++ b/src/pages/Attendence/viewStudentsAttendence.vue
@@ -1,5 +1,76 @@
 <template>
   <v-container fluid grid-list-md>
+    <v-layout row>
+      <v-dialog v-model="dialogExport" max-width="500px">
+        <v-btn slot="activator" color="grey" class="right" dark>
+          Export
+          <v-icon dark right size="20">save_alt</v-icon>
+        </v-btn>
+        <v-card>
+          <h3 class="text-xs-center py-2 grey lighten-1 white--text">Export</h3>
+          <v-card-text>
+            <v-container grid-list-md>
+              <v-layout wrap>
+                <v-flex xs12>
+                  <!-- <v-text-field label="Email" required></v-text-field> -->
+                  <v-menu
+                    ref="menuStartDate"
+                    :close-on-content-click="false"
+                    v-model="menuStartDate"
+                    :nudge-right="40"
+                    :return-value.sync="startDate"
+                    lazy
+                    transition="scale-transition"
+                    offset-y
+                    full-width
+                    min-width="290px"
+                  >
+                    <v-text-field
+                      slot="activator"
+                      v-model="startDate"
+                      label="Select Start Date"
+                      prepend-icon="event"
+                      readonly
+                    ></v-text-field>
+                    <v-date-picker v-model="startDate" @input="$refs.menuStartDate.save(startDate)"></v-date-picker>
+                  </v-menu>
+                </v-flex>
+                <v-flex xs12>
+                  <v-menu
+                    ref="menuEndDate"
+                    :close-on-content-click="false"
+                    v-model="menuEndDate"
+                    :nudge-right="40"
+                    :return-value.sync="endDate"
+                    lazy
+                    transition="scale-transition"
+                    offset-y
+                    full-width
+                    min-width="290px"
+                  >
+                    <v-text-field
+                      slot="activator"
+                      v-model="endDate"
+                      label="Select End Date"
+                      prepend-icon="event"
+                      readonly
+                    ></v-text-field>
+                    <v-date-picker v-model="endDate" @input="$refs.menuEndDate.save(endDate)"></v-date-picker>
+                  </v-menu>
+                </v-flex>
+              </v-layout>
+            </v-container>
+          </v-card-text>
+          <v-card-actions>
+            <v-spacer></v-spacer>
+            <v-btn color="blue darken-1" flat @click.native="dialogExport = false">Close</v-btn>
+            <download-csv :data="json_data">
+              <v-btn color="blue darken-1" flat @click.native="exportData">Export</v-btn>
+            </download-csv>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+    </v-layout>
     <v-layout wrap>
       <v-flex xs12 sm4>
         <v-card flat>
@@ -85,6 +156,9 @@
         </v-card>
       </v-flex>
     </v-layout>
+    <div class="loader" v-if="showLoader">
+      <v-progress-circular indeterminate color="white"></v-progress-circular>
+    </div>
   </v-container>
 </template>
 
@@ -98,6 +172,13 @@ export default {
   data() {
     return {
       studentsList: [],
+      json_data: [],
+      dialogExport: false,
+      startDate: "",
+      endDate: "",
+      menuEndDate: false,
+      menuStartDate: false,
+      showLoader: false,
       token: "",
       year: new Date().getFullYear(),
       activeDates: [],
@@ -115,6 +196,7 @@ export default {
       return moment(date).format("MMMM DD, YYYY");
     },
     getStudentAttendence() {
+      this.showLoader = true;
       http()
         .get(
           "/studentAttendance",
@@ -124,6 +206,7 @@ export default {
           }
         )
         .then(response => {
+          this.showLoader = false;
           let array = [];
           for (let i = 0; i < response.data.data.length; i++) {
             if (response.data.data[i].students[0].isPresent == true) {
@@ -142,7 +225,12 @@ export default {
         })
         .catch(err => {
           console.log("err====>", err);
-          // this.$router.replace({ path: '/' });
+          this.showLoader = false;
+          if (error.response.status === 401) {
+            this.$router.replace({ path: "/" });
+            this.$store.dispatch("setToken", null);
+            this.$store.dispatch("Id", null);
+          }
         });
     },
     getStudentData() {
@@ -161,6 +249,29 @@ export default {
           console.log("err====>", err);
           // this.$router.replace({ path: '/' });
         });
+    },
+    exportData() {
+      http()
+        .get(
+          "/studentAttendanceByMonth",
+          {
+            params: {
+              studentId: this.$route.params.id,
+              startDate: this.startDate,
+              endDate: this.endDate
+            }
+          },
+          {
+            headers: { Authorization: "Bearer " + this.token }
+          }
+        )
+        .then(response => {
+          this.json_data = response.data.data;
+        })
+        .catch(err => {
+          console.log("err====>", err);
+          // this.$router.replace({ path: '/' });
+        });
     }
   }
 };
-- 
2.0.0