viithiisys / School-Management-dashboard

Browse Code »

Commit c765369af9d3fba09ecb5fd93969e107305a9b1d

Authored by Neeraj Sharma 2020-05-11 14:18:10 -0400

1 parent a4fce59de4

Exists in master and in 3 other branches

solve bugs

Showing 4 changed files with 259 additions and 344 deletions Show diff stats

src/pages/Account/editInvoice.vue

Diff comments View file @c765369

 <template>
   <v-app id="pages-dasboard">
     <!-- ****** Edit multiple INVOICE ****** -->
     <v-snackbar
       :timeout="timeout"
       :top="y === 'top'"
       :right="x === 'right'"
       :vertical="mode === 'vertical'"
       v-model="snackbar"
       color="success"
     >{{ text }}</v-snackbar>
     <v-flex xs12 sm12>
       <v-container fluid grid-list-md>
         <v-layout wrap>
           <v-flex xs12 sm12 md5 class="mt-4">
             <v-card flat>
               <v-toolbar dark class="card-styles" flat>
                 <v-spacer></v-spacer>
                 <v-toolbar-title>
                   <h3>Invoice</h3>
                 </v-toolbar-title>
                 <v-spacer></v-spacer>
               </v-toolbar>
               <v-form ref="form" v-model="valid" lazy-validation class="py-4">
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
                     <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
                   </v-flex>
                   <v-flex xs6 class="ml-3">
                     <v-select
                       :items="addclass"
                       label="Select Class"
                       v-model="editData.classId"
                       item-text="classNum"
                       item-value="_id"
-                      @change="getAllStudents()"
+                      @change="getAllStudents(editData.classId)"
                     ></v-select>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right hidden-xs-only hidden-sm-only">Select Student:</label>
                     <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Student:</label>
                   </v-flex>
                   <v-flex xs6 class="ml-3">
                     <v-select
                       :items="studentList"
-                      label="Select Incharge"
                       v-model="editData.studentId"
+                      :label="editData.studentId.name"
                       item-text="name"
                       item-value="_id"
+                      @change="getStudentId(editData.studentId)"
                     ></v-select>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right">Date:</label>
                   </v-flex>
                   <v-flex xs6 class="ml-3">
                     <v-menu
                       ref="menu1"
                       :close-on-content-click="false"
                       v-model="menu1"
                       :nudge-right="40"
                       lazy
                       :return-value.sync="editData.date"
                       transition="scale-transition"
                       offset-y
                       full-width
                       min-width="290px"
                     >
                       <v-text-field
                         slot="activator"
                         v-model="editData.date"
                         placeholder="Select date"
                       ></v-text-field>
                       <v-date-picker
                         v-model="editData.date"
                         @input="$refs.menu1.save(editData.date)"
                       ></v-date-picker>
                     </v-menu>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right hidden-xs-only hidden-sm-only">Payment Status:</label>
                     <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Payment:</label>
                   </v-flex>
                   <v-flex xs6 class="ml-3">
                     <v-select
                       :items="paymentStatus"
                       v-model="editData.paymentStatus"
                       item-text="name"
                       item-value="value"
                       label="Select Payment Status"
                       @change="getPayMethodList"
                     ></v-select>
                   </v-flex>
                 </v-layout>
                 <v-layout v-show="showPayMethods">
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right">Payment Method:</label>
                   </v-flex>
                   <v-flex xs6 class="ml-3">
                     <v-select
                       :items="paymentMethods"
                       v-model="editData.paymentMethod"
                       label="Select Payment Method"
                     ></v-select>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs12 sm11>
                     <v-card-actions>
                       <v-spacer></v-spacer>
                       <v-btn
                         @click="update(editData)"
                         round
                         dark
                         :loading="loading"
                         class="add-button"
                       >Update</v-btn>
                     </v-card-actions>
                   </v-flex>
                 </v-layout>
               </v-form>
             </v-card>
           </v-flex>
           <v-flex xs12 sm12 md7 class="mt-4">
             <v-card>
               <v-toolbar dark class="card-styles" flat>
                 <v-spacer></v-spacer>
                 <v-toolbar-title>
                   <h3>Fee Type List</h3>
                 </v-toolbar-title>
                 <v-spacer></v-spacer>
               </v-toolbar>
               <v-layout wrap>
                 <v-flex xs12>
                   <v-layout wrap>
                     <v-flex xs12 sm2 class="mt-3">
                       <label class="right title hidden-sm-only hidden-xs-only">Fee Type:</label>
                       <label
                         class="left pl-2 title hidden-xl-only hidden-lg-only hidden-md-only"
                       >Fee Type:</label>
                     </v-flex>
                     <v-flex xs12 sm4>
                       <v-select
                         :items="feeTypes"
                         v-model="feeType.feeTypeName"
                         item-text="feeType"
                         item-value="feeType"
                         label="Select Fee Type"
                         class="px-2"
                       ></v-select>
                     </v-flex>
                     <v-flex xs12 sm6>
                       <v-btn
                         dark
                         class="right mt-3 hidden-sm-only hidden-xs-only"
                         color="open-dialog-button"
                         @click="selectFeeType"
                       >ADD</v-btn>
                       <v-btn
                         dark
                         class="mt-3 hidden-xl-only hidden-lg-only hidden-md-only"
                         color="open-dialog-button"
                         @click="selectFeeType"
                       >ADD</v-btn>
                     </v-flex>
                   </v-layout>
                 </v-flex>
               </v-layout>
               <table class="feeTypeTable tableRsponsive">
                 <tr class="info white--text">
                   <th>#</th>
                   <th>Fee Type</th>
                   <th>Amount</th>
                   <th>Discount(%)</th>
                   <th>Subtotal</th>
                   <th>Paid Amount</th>
                   <th>Action</th>
                 </tr>
                 <tr
                   v-for="(feeType, index) in editData.feeType"
                   :key="index"
                   v-on:keyup="getAmmountDetails(feeType,editData.feeType)"
                 >
                   <td style="width:40px">{{ index + 1 }}</td>
                   <td style="width:120px">{{ feeType.feeTypeName }}</td>
                   <td>
                     <v-text-field
                       placeholder="fill your Amount"
                       v-model="feeType.amount"
                       type="number"
                     ></v-text-field>
                   </td>
                   <td>
                     <v-text-field
                       placeholder="fill your Discount"
                       v-model="feeType.discount"
                       type="number"
                     ></v-text-field>
                   </td>
                   <td>{{ feeType.subTotal }}</td>
                   <td v-if="editData.paymentStatus === 'NOT_PAID'">
                     <v-text-field
                       placeholder="fill your Paid Amount"
                       v-model="feeType.paidAmount"
                       type="number"
                       :disabled="disabled"
                     ></v-text-field>
                   </td>
                   <td v-if="editData.paymentStatus != 'NOT_PAID'">
                     <v-text-field
                       placeholder="fill your Paid Amount"
                       v-model="feeType.paidAmount"
                       type="number"
                     ></v-text-field>
                   </td>
                   <td>
                     <v-icon
                       color="error"
                       @click="deleteSelectFee(feeType,editData.feeType,index)"
                     >delete</v-icon>
                   </td>
                 </tr>
                 <tfoot v-if="feeType.amount != 0.00">
                   <tr>
                     <td colspan="2">Total:</td>
                     <td>{{ feeType.amount }}</td>
                     <td>{{ feeType.discount }}</td>
                     <td>{{ feeType.subTotal }}</td>
                     <td>{{ feeType.paidAmount }}</td>
                   </tr>
                 </tfoot>
                 <tfoot v-else-if="feeType.amount == 0.00">
                   <tr>
                     <td colspan="2">Total:</td>
                     <td>{{ editData.totalAmount }}</td>
                     <td>{{ editData.totalDiscount }}</td>
                     <td>{{ editData.totalSubTotal }}</td>
                     <td>{{ editData.totalPaidAmount }}</td>
                   </tr>
                 </tfoot>
               </table>
             </v-card>
           </v-flex>
         </v-layout>
       </v-container>
     </v-flex>
     <div class="loader" v-if="showLoader">
       <v-progress-circular indeterminate color="white"></v-progress-circular>
     </div>
   </v-app>
 </template>
 <script>
 import http from "@/Services/http.js";
 import moment from "moment";
 export default {
   props: ["editData"],
   data: () => ({
     snackbar: false,
     showPayMethods: false,
     y: "top",
     x: "right",
     mode: "",
     timeout: 3000,
     text: "",
     showLoader: false,
     loading: false,
     date: null,
     search: "",
     // dialog: false,
     // dialog1: false,
     valid: true,
     validEdit: true,
     // isActive: true,
     // newActive: false,
     showFeeType: false,
     disabled: true,
     details: [],
     feeTypes: [],
     menu1: false,
     // invoiceData: {},
     paymentMethods: ["Cash", "Cheque"],
     feeType: {
       amount: "0.00",
       discount: "0.00",
       paidAmount: "0.00",
       subTotal: "0.00",
       feeTypeName: ""
     },
     feeTypeData: [],
     pagination: {
       rowsPerPage: 15
     },
     token: "",
     editedItem: {},
     invoiceParticularData: {},
     addclass: [],
     studentList: [],
     paymentStatus: [
       {
         name: "Not Paid",
         value: "NOT_PAID"
       },
       {
         name: "Partially Paid",
         value: "PARTIALLY_PAID"
       },
       {
         name: "Fully Paid",
         value: "FULLY_PAID"
       }
-    ]
+    ],
+    editDataObj: {}
   }),
   // watch: {
   //   menu1(val) {
   //     val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
   //   }
   // },
   methods: {
     save(date) {
       this.$refs.menu1.save(date);
     },
     dates: function(date) {
       return moment(date).format("MMMM DD, YYYY");
     },
     update(editData) {
-      // console.log("editData-----------", editData);
+      console.log("editData-----------", editData);
+      if (editData.classId._id) {
+        this.editDataObj.classNum = editData.classId._id;
+      }
+      if (editData.studentId._id) {
+        this.editDataObj.studentId = editData.studentId._id;
+      }
       let feeTypeId = "";
       for (let i = 0; i < this.feeTypes.length; i++) {
         if (this.feeTypes[i].feeType === this.feeType.feeTypeName) {
           feeTypeId = this.feeTypes[i]._id;
         }
       }
-      // console.log(editData);
       let editInvoiceData = {
         invoiceId: editData._id,
-        classId: editData.classNum,
+        classId: this.editDataObj.classNum,
-        studentId: editData.sectionId,
+        studentId: this.editDataObj.studentId,
         date: editData.date,
         paymentStatus: editData.paymentStatus,
         paymentMethod: editData.paymentMethod,
         feeType: editData.feeType,
         totalAmount: this.feeType.amount,
         totalDiscount: this.feeType.discount,
         totalSubTotal: this.feeType.subTotal,
         totalPaidAmount: this.feeType.paidAmount
       };
-      if (editInvoiceData.paymentStatus == "NOT_PAID") {
+      // console.log(editInvoiceData, editInvoiceData);
-        delete editInvoiceData.totalPaidAmount;
-      }
       if (feeTypeId == "") {
         delete editInvoiceData.feeType[0].feeTypeId;
       }
-      if (editInvoiceData.paymentStatus == "NOT_PAID") {
+      if (this.feeType.paidAmount != "0.00") {
-        delete editInvoiceData.paymentMethod;
+        if (this.feeType.subTotal == this.feeType.paidAmount) {
-      }
+          editInvoiceData.paymentStatus = "FULLY_PAID";
-      if (this.feeType.subTotal == this.feeType.paidAmount) {
+          console.log("FULLY_PAID");
-        editInvoiceData.paymentStatus = "FULLY_PAID";
-        // console.log("FULLY_PAID");
-      }
-      if (editInvoiceData.totalPaidAmount) {
-        if (this.feeType.subTotal != this.feeType.paidAmount) {
-          editInvoiceData.paymentStatus = "PARTIALLY_PAID";
-          // console.log("PARTIALLY_PAID");
         }
+        if (editInvoiceData.totalPaidAmount) {
+          if (this.feeType.subTotal != this.feeType.paidAmount) {
+            editInvoiceData.paymentStatus = "PARTIALLY_PAID";
+            console.log("PARTIALLY_PAID");
+          }
+        }
+      } else if (this.feeType.paidAmount === "0.00") {
+        editInvoiceData.paymentStatus = "NOT_PAID";
       }
+      console.log("editInvoiceData", editInvoiceData);
       http()
         .put("/updateInvoice", editInvoiceData)
         .then(response => {
           // this.getInvoiceList();
           this.snackbar = true;
-          this.text = "New Invoice added successfully";
+          this.text = "Edit Invoice successfully";
           this.loading = false;
+          color: "red";
           this.$emit("update-editInvoice");
         })
         .catch(error => {
           console.log(error);
-          if ((this.snackbar = true)) {
+          this.snackbar = true;
-            this.text = error.response.data.message;
+          this.text = error.response.data.message;
-          }
+          color: "red";
           this.loading = false;
         });
     },
     clear() {
       this.$refs.form.reset();
     },
     selectFeeType() {
-      // console.log("clckkkkkkkkkkkkkkkkkk", this.feeType.feeTypeName);
       this.showFeeType = true;
       this.editData.feeType.push({ feeTypeName: this.feeType.feeTypeName });
     },
     deleteSelectFee: function(feeTyp, feeTypeList, index) {
       this.editData.feeType.splice(index, 1);
       this.getAmmountDetails(feeTyp, feeTypeList);
       if (this.feeTypeData.length == 0) {
         this.feeType = {
           amount: "0.00",
           discount: "0.00",
           paidAmount: "0.00",
           subTotal: "0.00",
           feeTypeList: ""
         };
       }
     },
     getAllClasses() {
       http()
         .get("/getClassesList", {
           headers: { Authorization: "Bearer " + this.token }
         })
         .then(response => {
           this.addclass = response.data.data;
-          this.getAllStudents();
         })
         .catch(error => {
           // 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);
             this.$store.dispatch("Role", null);
           }
         });
     },
-    getAllStudents() {
+    getAllStudents(classId) {
+      // console.log("classId", classId);
+      this.editDataObj.classNum = classId;
+      this.editDataObj.studentId = "";
+      this.studentList = [];
+      this.showLoader = true;
       http()
         .get("/getStudentsList", {
-          params: { classId: this.editData.classNum },
+          params: { classId: classId },
           headers: { Authorization: "Bearer " + this.token }
         })
         .then(response => {
-          this.studentList = response.data.data;
+          for (let i = 0; i < response.data.data.length; i++) {
+            this.studentList.push({
+              name: response.data.data[i].name,
+              _id: response.data.data[i]._id
+            });
+          }
+          this.showLoader = false;
         })
         .catch(err => {
           // console.log("err====>", err);
+          this.showLoader = false;
         });
     },
+    getStudentId(studentId) {
+      // console.log("studentId", studentId);
+      this.editDataObj.studentId = studentId;
+    },
     getfeeType() {
       http()
         .get("/getFeesList", {
           headers: { Authorization: "Bearer " + this.token }
         })
         .then(response => {
           this.feeTypes = response.data.data;
         })
         .catch(err => {
           // console.log("err====>", err);
         });
     },
     getAmmountDetails(feeTyp, feeTypeList) {
       this.feeTypeData = feeTypeList;
       let feeType = {
         amount: "",
         discount: "",
         subTotal: "",
         subParticularTotal: "",
         paidAmount: ""
       };
       for (let i = 0; i < this.feeTypeData.length; i++) {
         // *********** AMOUNT ***********
-        feeType.amount =
+        if (this.feeTypeData[i].amount) {
-          Number(feeType.amount) + Number(this.feeTypeData[i].amount);
+          feeType.amount =
-        console.log("feeType.amount ", feeType.amount);
+            Number(feeType.amount) + Number(this.feeTypeData[i].amount);
-        this.feeType.amount = feeType.amount;
+          this.feeType.amount = feeType.amount;
-        this.feeType.subTotal = feeType.amount;
+          this.feeType.subTotal = feeType.amount;
-        this.feeTypeData[i].subTotal = this.feeTypeData[i].amount;
+          this.feeTypeData[i].subTotal = this.feeTypeData[i].amount;
+        } else if (this.feeTypeData[0].amount == "") {
+          this.feeType.amount = "0.00";
+          this.feeTypeData[i].subTotal = "0.00";
+          this.feeType.subTotal = "0.00";
+        } else if (this.feeTypeData[i].amount == "") {
+          this.feeType.amount =
+            Number(feeType.amount) + Number(this.feeTypeData[i].amount);
+          this.feeTypeData[i].subTotal =
+            Number(feeType.amount) + Number(this.feeTypeData[i].amount);
+          this.feeType.subTotal =
+            Number(feeType.amount) + Number(this.feeTypeData[i].amount);
+        }
         // *********** DISCOUNT ***********
         if (this.feeTypeData[i].discount) {
           feeType.discount =
             Number(feeType.discount) + Number(this.feeTypeData[i].discount);
-          console.log("feeType.discount", feeType.discount);
           this.feeType.discount = feeType.discount;
           feeType.subParticularTotal =
             this.feeTypeData[i].amount -
             (this.feeTypeData[i].amount * this.feeTypeData[i].discount) / 100;
-          console.log("feeType.subTotal", feeType.subTotal);
           this.feeTypeData[i].subTotal = feeType.subParticularTotal.toFixed(2);
+        } else if (this.feeTypeData[0].discount == "") {
+          this.feeType.discount = "0.00";
+        } else if (this.feeTypeData[i].discount == "") {
+          this.feeType.discount =
+            Number(feeType.discount) + Number(this.feeTypeData[i].discount);
         }
         // *********** SUBTOTAL ***********
-        feeType.subTotal =
+        if (this.feeTypeData[i].subTotal) {
-          Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal);
+          feeType.subTotal =
-        this.feeType.subTotal = feeType.subTotal.toFixed(2);
+            Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal);
+          this.feeType.subTotal = feeType.subTotal.toFixed(2);
+        }
         // *********** PAID-AMOUNT ***********
-        feeType.paidAmount =
+        if (this.feeTypeData[i].paidAmount) {
-          Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);
+          feeType.paidAmount =
-        this.feeType.paidAmount = feeType.paidAmount.toFixed(2);
+            Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);
+          this.feeType.paidAmount = feeType.paidAmount.toFixed(2);
+        } else if (this.feeTypeData[0].paidAmount == "") {
+          this.feeType.paidAmount = "0.00";
+        } else if (this.feeTypeData[i].paidAmount == "") {
+          this.feeType.paidAmount = feeType.paidAmount =
+            Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);
+        }
         // if paid Amount fill large of subtotal value so this condition are fixed filled subtotal value.
         if (feeType.paidAmount > feeType.subTotal) {
           this.feeTypeData[i].paidAmount = this.feeTypeData[i].subTotal;
           this.feeType.paidAmount = feeType.subTotal;
         }
       }
     },
     getPayMethodList() {
       if (this.editData.paymentStatus == "PARTIALLY_PAID") {
         this.showPayMethods = true;
       } else if (this.editData.paymentStatus == "FULLY_PAID") {
         this.showPayMethods = true;
+      } else if (this.editData.paymentStatus == "NOT_PAID") {
+        for (let i = 0; i < this.feeTypeData.length; i++) {
+          this.feeTypeData[i].paidAmount = "0.00";
+          this.feeType.paidAmount = "0.00";
+        }
       } else {
         this.showPayMethods = false;
       }
     }
   },
   mounted() {
     this.token = this.$store.state.token;
     this.getAllClasses();
     this.getfeeType();
   },
   created() {
     this.$root.$on("app:search", search => {
       this.search = search;
     });
   },
   beforeDestroy() {
     // dont forget to remove the listener
     this.$root.$off("app:search");
   }
 };
 </script>
 <style scoped>
 .active {
   background-color: gray;
   color: white !important;
 }
 .activebtn {
   color: black !important;
 }
 table {
   border-collapse: collapse;
   border: 1px solid #e2e7eb;
 }
 th,
 td {
   border: 1px solid #e2e7eb;

src/pages/Account/invoice.vue

Diff comments View file @c765369

1	<template>	1	<template>
2	<v-container fluid class="body-color">	2	<v-container fluid class="body-color">
3	<!-- **** Edit INVOICE **** -->	3	<!-- **** Edit INVOICE **** -->
4	<v-dialog v-model="editInvoiceDialog">	4	<v-dialog v-model="editInvoiceDialog">
5	<v-card flat class="text-xs-center white--text">	5	<v-card flat class="text-xs-center white--text">
6	<v-layout>	6	<v-layout>
7	<v-flex xs12 class="card-styles pa-2">	7	<v-flex xs12 class="card-styles pa-2">
8	<label class="title text-xs-center">Edit Invoice</label>	8	<label class="title text-xs-center">Edit Invoice</label>
9	<v-icon size="24" class="right white--text" @click="editInvoiceDialog = false">cancel</v-icon>	9	<v-icon size="24" class="right white--text" @click="editInvoiceDialog = false">cancel</v-icon>
10	</v-flex>	10	</v-flex>
11	</v-layout>	11	</v-layout>
12	<editInvoice :editData="editData" @update-editInvoice="updateDoneInvoice" />	12	<editInvoice :editData="editData" @update-editInvoice="updateDoneInvoice" />
13	</v-card>	13	</v-card>
14	</v-dialog>	14	</v-dialog>
15		15
16	<!-- ****PAYMENT INVOICE DIALOG -->	16	<!-- ****PAYMENT INVOICE DIALOG -->
17	<v-dialog v-model="paymentInvoiceDialog">	17	<v-dialog v-model="paymentInvoiceDialog">
18	<v-card flat class="text-xs-center white--text">	18	<v-card flat class="text-xs-center white--text">
19	<v-layout>	19	<v-layout>
20	<v-flex xs12 class="card-styles pa-2">	20	<v-flex xs12 class="card-styles pa-2">
21	<label class="title text-xs-center">Payment Template</label>	21	<label class="title text-xs-center">Payment Template</label>
22	<v-icon size="24" class="right white--text" @click="paymentInvoiceDialog = false">cancel</v-icon>	22	<v-icon size="24" class="right white--text" @click="paymentInvoiceDialog = false">cancel</v-icon>
23	</v-flex>	23	</v-flex>
24	</v-layout>	24	</v-layout>
25	<!-- <v-flex xs12 sm12>
26	<v-container fluid grid-list-md>
27	<v-layout wrap>
28	<v-flex xs12 sm12 md4>
29	<v-card flat>
30	<v-toolbar dark class="card-styles" flat>
31	<v-spacer></v-spacer>
32	<h3>Profile</h3>
33	<v-spacer></v-spacer>
34	</v-toolbar>
35	<v-card-text>
36	<v-container>
37	<v-layout wrap>
38	<v-flex xs12>
39	<v-layout>
40	<v-flex
41	xs12
42	class="text-xs-center text-sm-center text-md-center text-lg-center"
43	>
44	<v-avatar size="80px">
45	<img src="/static/icon/user.png" v-if="!editPayment.profilePicUrl" />
46	<img
47	:src="editPayment.profilePicUrl"
48	v-else-if="editPayment.profilePicUrl"
49	/>
50	</v-avatar>
51	</v-flex>
52	</v-layout>
53	<v-layout>
54	<v-flex xs12 sm12>
55	<h3 class="text-xs-center">
56	<b>{{ editPayment.studentId.name }}</b>
57	</h3>
58	<p class="text-xs-center grey--text">Student</p>
59	</v-flex>
60	</v-layout>
61	<v-layout style="border: 1px solid lightgrey;">
62	<v-flex xs6 sm6 class="pa-0">
63	<h4 class="right">
64	<b>Roll No :</b>
65	</h4>
66	</v-flex>
67	<v-flex sm6 xs6 class="pa-0">
68	<h4>{{ editPayment.studentId.rollNo }}</h4>
69	</v-flex>
70	</v-layout>
71	<v-layout style="border: 1px solid lightgrey;">
72	<v-flex xs6 sm6 class="pa-0">
73	<h4 class="right">
74	<b>Class :</b>
75	</h4>
76	</v-flex>
77	<v-flex sm6 xs6 class="pa-0">
78	<h4>{{ editPayment.classId.classNum }}</h4>
79	</v-flex>
80	</v-layout>
81	</v-flex>
82	</v-layout>
83	</v-container>
84	</v-card-text>
85	</v-card>
86	<v-flex>
87	<v-card>
88	<v-flex xs12 sm12 md12 style="padding-top: 1%;">
89	<v-card flat>
90	<v-toolbar dark class="card-styles" flat>
91	<v-spacer></v-spacer>
92	<h3>Invoice</h3>
93	<v-spacer></v-spacer>
94	</v-toolbar>
95	</v-card>
96	<v-layout>
97	<v-flex xs12>
98	<v-layout>
99	<v-flex xs4 class="pt-4 subheading">
100	<label class="right">Payment Method:</label>
101	</v-flex>
102	<v-flex xs6 class="ml-3">
103	<v-select
104	:items="paymentMethods"
105	v-model="editPayment.paymentMethod"
106	label="Select Payment Method"
107	required
108	></v-select>
109	</v-flex>
110	</v-layout>
111	<v-card-actions>
112	<v-spacer class="hidden-xs-only"></v-spacer>
113	<v-btn
114	color="open-dialog-button"
115	dark
116	class="right mt-3"
117	@click="add"
118	>Add Payment</v-btn>
119	</v-card-actions>
120	</v-flex>
121	</v-layout>
122	</v-flex>
123	</v-card>
124	</v-flex>
125	</v-flex>
126	<v-flex xs12 sm12 md8>
127	<v-card>
128	<v-toolbar dark class="card-styles" flat>
129	<v-spacer></v-spacer>
130	<h3>Fee Type List</h3>
131	<v-spacer></v-spacer>
132	</v-toolbar>
133	<table class="feeTypeTable tableRsponsive">
134	<tr class="info white--text">
135	<th>#</th>
136	<th>Fee Type</th>
137	<th>Amount</th>
138	<th>Discount(%)</th>
139	<th>Subtotal</th>
140	<th>Paid Amount</th>
141	<th>Action</th>
142	</tr>
143	<tr
144	v-for="(feeType,index) in paymentFeeTypeData"
145	:key="index"
146	v-on:keyup="getAmmountDetails(feeType)"
147	>
148	<td style="width:40px" class="tdFeeType">{{index + 1}}</td>
149	<td style="width:120px" class="tdFeeType" disabled>{{ feeType.feeTypeName }}</td>
150	<td class="tdFeeType" style="width:120px" disabled>{{feeType.amount}}</td>
151	<td class="tdFeeType">
152	<v-text-field
153	placeholder="fill your Discount"
154	v-model="feeType.discount"
155	type="number"
156	></v-text-field>
157	</td>
158	<td class="tdFeeType" disabled>{{ feeType.subTotal }}</td>
159	<td class="tdFeeType" v-if="invoiceData.paymentStatus === 'NOT_PAID'">
160	<v-text-field
161	placeholder="fill your Paid Amount"
162	v-model="feeType.paidAmount"
163	type="number"
164	></v-text-field>
165	</td>
166	<td class="tdFeeType" v-if="invoiceData.paymentStatus == ''">
167	<v-text-field
168	placeholder="fill your Paid Amount"
169	v-model="feeType.paidAmount"
170	type="number"
171	></v-text-field>
172	</td>
173	<td
174	class="tdFeeType"
175	v-if="invoiceData.paymentStatus != 'NOT_PAID' && invoiceData.paymentStatus != ''"
176	>
177	<v-text-field
178	placeholder="fill your Paid Amount"
179	v-model="feeType.paidAmount"
180	type="number"
181	></v-text-field>
182	</td>
183	<td class="tdFeeType">
184	<v-icon color="error" @click="deleteSelectFee(index)">delete</v-icon>
185	</td>
186	</tr>
187	<tfoot>
188	<tr>
189	<td colspan="2" class="tdFeeType">Total:</td>
190	<td class="tdFeeType">{{ feeType.amount }}</td>
191	<td class="tdFeeType">{{ feeType.discount }}</td>
192	<td class="tdFeeType">{{ feeType.subTotal }}</td>
193	<td class="tdFeeType">{{ feeType.paidAmount }}</td>
194	<td class="tdFeeType">
195	<v-icon color="error" @click="deleteSelectFee(index)">delete</v-icon>
196	</td>
197	</tr>
198	</tfoot>
199	</table>
200	</v-card>
201	</v-flex>
202	</v-layout>
203	</v-container>
204	</v-flex>-->
205	<paymentTemplate :editPayment="editPayment" @update-Payment="updatePayment" />	25	<paymentTemplate :editPayment="editPayment" @update-Payment="updatePayment" />
206	</v-card>	26	</v-card>
207	</v-dialog>	27	</v-dialog>
208		28
209	<!-- **** PROFILE VIEW SECTION DATA **** -->	29	<!-- **** PROFILE VIEW SECTION DATA **** -->
		30
210	<v-dialog v-model="dialog1" max-width="800px">	31	<v-dialog v-model="dialog1" max-width="800px">
211	<v-card flat class="text-xs-center white--text">	32	<v-card flat class="text-xs-center white--text">
212	<v-layout>	33	<v-layout>
213	<v-flex xs12 class="card-style pa-2">	34	<v-flex xs12 class="card-style pa-2">
214	<label class="title text-xs-center">View Payments</label>	35	<label class="title text-xs-center">View Payments</label>
215	<v-icon size="24" class="right" color="white" @click="dialog1 = false">cancel</v-icon>	36	<v-icon size="24" class="right" color="white" @click="dialog1 = false">cancel</v-icon>
216	</v-flex>	37	</v-flex>
217	</v-layout>	38	</v-layout>
218	<!-- <p>{{editedItem}}</p> -->
219	<table class="feeTypeTable tableRsponsive">	39	<table class="feeTypeTable tableRsponsive">
220	<tr style="color: black">	40	<tr style="color: black">
221	<th>#</th>	41	<th>#</th>
222	<th>Date</th>	42	<th>Date</th>
223	<th>Paid By</th>	43	<th>Paid By</th>
224	<th>Payment Amount</th>	44	<th>Payment Amount</th>
225	<th>Weaver</th>	45	<th>Weaver</th>
226	<th>Action</th>	46	<th>Action</th>
227	</tr>	47	</tr>
228	<tr v-if="editedItem.paymentStatus !== 'NOT_PAID'">	48	<tr v-if="editedItem.paymentStatus !== 'NOT_PAID'">
229	<td style="width:40px ; color:black" class="tdFeeType">1</td>	49	<td style="width:40px ; color:black" class="tdFeeType">1</td>
230	<td style="width:120px; color:black" class="tdFeeType">{{dates( editedItem.date) }}</td>	50	<td style="width:120px; color:black" class="tdFeeType">{{dates( editedItem.date) }}</td>
231	<td style="width:120px; color:black" class="tdFeeType">{{ editedItem.paymentMethod }}</td>	51	<td style="width:120px; color:black" class="tdFeeType">{{ editedItem.paymentMethod }}</td>
232	<td style="width:120px; color:black" class="tdFeeType">{{ editedItem.totalPaidAmount }}</td>	52	<td style="width:120px; color:black" class="tdFeeType">{{ editedItem.totalPaidAmount }}</td>
233	<td style="width:120px; color:black" class="tdFeeType">{{ editedItem.totalDiscount}}</td>	53	<td style="width:120px; color:black" class="tdFeeType">{{ editedItem.totalDiscount}}</td>
234	<td class="text-xs-center td td-row">	54	<td class="text-xs-center td td-row">
235	<router-link	55	<router-link
236	:to="{ name:'View Payment Invoice',params: { viewPaymentInvoiceId:editedItem._id } }"	56	:to="{ name:'View Payment Invoice',params: { viewPaymentInvoiceId:editedItem._id } }"
237	>	57	>
238	<v-tooltip top>	58	<v-tooltip top>
239	<img	59	<img
240	slot="activator"	60	slot="activator"
241	style="cursor:pointer; width:25px; height:25px; "	61	style="cursor:pointer; width:25px; height:25px; "
242	class="mr-3"	62	class="mr-3"
243	src="/static/icon/view.png"	63	src="/static/icon/view.png"
244	/>	64	/>
245	<span>View</span>	65	<span>View</span>
246	</v-tooltip>	66	</v-tooltip>
247	</router-link>	67	</router-link>
248	<v-tooltip top>	68	<v-tooltip top>
249	<img	69	<img
250	slot="activator"	70	slot="activator"
251	style="cursor:pointer;width:20px; height:20px; "	71	style="cursor:pointer;width:20px; height:20px; "
252	class="mr-3"	72	class="mr-3"
253	@click="deletePayment(editedItem)"	73	@click="deletePayment(editedItem)"
254	src="/static/icon/delete.png"	74	src="/static/icon/delete.png"
255	/>	75	/>
256	<span>Delete</span>	76	<span>Delete</span>
257	</v-tooltip>	77	</v-tooltip>
258	</td>	78	</td>
259	</tr>	79	</tr>
260	</table>	80	</table>
261	</v-card>	81	</v-card>
262	</v-dialog>	82	</v-dialog>
263		83
264	<!-- **** Invoice Table **** -->	84	<!-- **** Invoice Table **** -->
265	<v-toolbar color="transparent" flat>	85	<v-toolbar color="transparent" flat>
266	<v-btn	86	<v-btn
267	fab	87	fab
268	dark	88	dark
269	class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"	89	class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
270	small	90	small
271	@click="addInvoiceDialog = true"	91	@click="addInvoiceDialog = true"
272	>	92	>
273	<v-icon dark>add</v-icon>	93	<v-icon dark>add</v-icon>
274	</v-btn>	94	</v-btn>
275	<v-btn	95	<v-btn
276	round	96	round
277	class="open-dialog-button hidden-sm-only hidden-xs-only"	97	class="open-dialog-button hidden-sm-only hidden-xs-only"
278	dark	98	dark
279	@click="addInvoiceDialog = true"	99	@click="addInvoiceDialog = true"
280	>	100	>
281	<v-icon class="white--text pr-1" size="20">add</v-icon>Add Invoice	101	<v-icon class="white--text pr-1" size="20">add</v-icon>Add Invoice
282	</v-btn>	102	</v-btn>
283	<v-spacer></v-spacer>	103	<v-spacer></v-spacer>
284	<v-card-title class="body-1" v-show="show">	104	<v-card-title class="body-1" v-show="show">
285	<v-btn icon large flat @click="displaySearch">	105	<v-btn icon large flat @click="displaySearch">
286	<v-avatar size="27">	106	<v-avatar size="27">
287	<img src="/static/icon/search.png" alt="icon" />	107	<img src="/static/icon/search.png" alt="icon" />
288	</v-avatar>	108	</v-avatar>
289	</v-btn>	109	</v-btn>
290	</v-card-title>	110	</v-card-title>
291	<v-flex xs8 sm8 md3 lg2 v-show="showSearch">	111	<v-flex xs8 sm8 md3 lg2 v-show="showSearch">
292	<v-layout>	112	<v-layout>
293	<v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>	113	<v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>
294	<v-icon @click="closeSearch" color="error">close</v-icon>	114	<v-icon @click="closeSearch" color="error">close</v-icon>
295	</v-layout>	115	</v-layout>
296	</v-flex>	116	</v-flex>
297	</v-toolbar>	117	</v-toolbar>
298	<v-data-table	118	<v-data-table
299	:headers="headers"	119	:headers="headers"
300	:items="invoiceList"	120	:items="invoiceList"
301	:pagination.sync="pagination"	121	:pagination.sync="pagination"
302	:search="search"	122	:search="search"
303	>	123	>
304	<template slot="items" slot-scope="props">	124	<template slot="items" slot-scope="props">
305	<tr class="tr">	125	<tr class="tr">
306	<td class="td td-row">{{ props.index + 1 }}</td>	126	<td class="td td-row">{{ props.index + 1 }}</td>
307	<td class="text-xs-center td td-row">{{ props.item.studentId.name }}</td>	127	<td class="text-xs-center td td-row">{{ props.item.studentId.name }}</td>
308	<td class="text-xs-center td td-row">{{ props.item.classId.classNum }}</td>	128	<td class="text-xs-center td td-row">{{ props.item.classId.classNum }}</td>
309	<td class="text-xs-center td td-row">{{ props.item.totalAmount }}</td>	129	<td class="text-xs-center td td-row">{{ props.item.totalAmount }}</td>
310	<td class="text-xs-center td td-row">{{ props.item.totalDiscount}}</td>	130	<td class="text-xs-center td td-row">{{ props.item.totalDiscount}}</td>
311	<td	131	<td
312	class="text-xs-center td td-row"	132	class="text-xs-center td td-row"
313	>{{ props.item.totalPaidAmount ? props.item.totalPaidAmount : 0}}</td>	133	>{{ props.item.totalPaidAmount ? props.item.totalPaidAmount : 0}}</td>
314	<td	134	<td
315	class="text-xs-center td td-row"	135	class="text-xs-center td td-row"
316	>{{ props.item.totalPaidAmount ? props.item.totalSubTotal - props.item.totalPaidAmount : props.item.totalSubTotal }}</td>	136	>{{ props.item.totalPaidAmount ? props.item.totalSubTotal - props.item.totalPaidAmount : props.item.totalSubTotal }}</td>
317	<td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'NOT_PAID'">	137	<td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'NOT_PAID'">
318	<span	138	<span
319	class="red lighten-1 py-1 px-2 white--text paymentStatus"	139	class="red lighten-1 py-1 px-2 white--text paymentStatus"
320	>{{ props.item.paymentStatus }}</span>	140	>{{ props.item.paymentStatus }}</span>
321	</td>	141	</td>
322	<td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'FULLY_PAID'">	142	<td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'FULLY_PAID'">
323	<span	143	<span
324	class="green lighten-1 py-1 px-2 white--text paymentStatus"	144	class="green lighten-1 py-1 px-2 white--text paymentStatus"
325	>{{ props.item.paymentStatus }}</span>	145	>{{ props.item.paymentStatus }}</span>
326	</td>	146	</td>
327	<td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'PARTIALLY_PAID'">	147	<td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'PARTIALLY_PAID'">
328	<span	148	<span
329	class="yellow darken-3 py-1 px-2 white--text paymentStatus"	149	class="yellow darken-3 py-1 px-2 white--text paymentStatus"
330	>{{ props.item.paymentStatus }}</span>	150	>{{ props.item.paymentStatus }}</span>
331	</td>	151	</td>
332	<td class="text-xs-center td td-row">{{ dates(props.item.date) }}</td>	152	<td class="text-xs-center td td-row">{{ dates(props.item.date) }}</td>
333	<td class="text-xs-center td td-row">	153	<td class="text-xs-center td td-row">
334	<router-link :to="{ name:'View Invoice',params: { viewInvoiceId:props.item._id } }">	154	<router-link :to="{ name:'View Invoice',params: { viewInvoiceId:props.item._id } }">
335	<v-tooltip top>	155	<v-tooltip top>
336	<img	156	<img
337	slot="activator"	157	slot="activator"
338	style="cursor:pointer; width:25px; height:25px; "	158	style="cursor:pointer; width:25px; height:25px; "
339	class="mr-3"	159	class="mr-3"
340	src="/static/icon/view.png"	160	src="/static/icon/view.png"
341	/>	161	/>
342	<span>View</span>	162	<span>View</span>
343	</v-tooltip>	163	</v-tooltip>
344	</router-link>	164	</router-link>
345	<span v-if="props.item.paymentStatus === 'NOT_PAID'">	165	<span v-if="props.item.paymentStatus === 'NOT_PAID'">
346	<!-- <router-link :to="{ name: 'Edit Invoice',params: { invoiceid: editData._id } }">	166	<!-- <router-link :to="{ name: 'Edit Invoice',params: { invoiceid: editData._id } }">
347	<v-tooltip top>	167	<v-tooltip top>
348	<img	168	<img
349	slot="activator"	169	slot="activator"
350	style="cursor:pointer; width:20px; height:18px; "	170	style="cursor:pointer; width:20px; height:18px; "
351	class="mr-3"	171	class="mr-3"
352	@click="editItem(props.item)"	172	@click="editItem(props.item)"
353	src="/static/icon/edit.png"	173	src="/static/icon/edit.png"
354	/>	174	/>
355	<span>Edit</span>	175	<span>Edit</span>
356	</v-tooltip>	176	</v-tooltip>
357	</router-link>-->	177	</router-link>-->
358	<v-tooltip top>	178	<v-tooltip top>
359	<img	179	<img
360	slot="activator"	180	slot="activator"
361	style="cursor:pointer; width:20px; height:18px; "	181	style="cursor:pointer; width:20px; height:18px; "
362	class="mr-3"	182	class="mr-3"
363	@click="editItem(props.item)"	183	@click="editItem(props.item)"
364	src="/static/icon/edit.png"	184	src="/static/icon/edit.png"
365	/>	185	/>
366	<span>Edit</span>	186	<span>Edit</span>
367	</v-tooltip>	187	</v-tooltip>
368	<v-tooltip top>	188	<v-tooltip top>
369	<img	189	<img
370	slot="activator"	190	slot="activator"
371	style="cursor:pointer;width:20px; height:20px; "	191	style="cursor:pointer;width:20px; height:20px; "
372	class="mr-3"	192	class="mr-3"
373	@click="deleteItem(props.item)"	193	@click="deleteItem(props.item)"
374	src="/static/icon/delete.png"	194	src="/static/icon/delete.png"
375	/>	195	/>
376	<span>Delete</span>	196	<span>Delete</span>
377	</v-tooltip>	197	</v-tooltip>
378	<v-tooltip top>	198	<v-tooltip top>
379	<img	199	<img
380	slot="activator"	200	slot="activator"
381	style="cursor:pointer; width:20px; height:18px; "	201	style="cursor:pointer; width:20px; height:18px; "
382	class="mr-3"	202	class="mr-3"
383	@click="paymentItem(props.item)"	203	@click="paymentItem(props.item)"
384	src="/static/schoolIcons/Account.png"	204	src="/static/schoolIcons/Account.png"
385	/>	205	/>
386	<span>Payment</span>	206	<span>Payment</span>
387	</v-tooltip>	207	</v-tooltip>
388	</span>	208	</span>
389	<span v-if="props.item.paymentStatus === 'PARTIALLY_PAID'">	209	<span v-if="props.item.paymentStatus === 'PARTIALLY_PAID'">
390	<v-tooltip top>	210	<v-tooltip top>
391	<img	211	<img
392	slot="activator"	212	slot="activator"
393	style="cursor:pointer; width:20px; height:18px; "	213	style="cursor:pointer; width:20px; height:18px; "
394	class="mr-3"	214	class="mr-3"
395	@click="paymentItem(props.item)"	215	@click="paymentItem(props.item)"
396	src="/static/schoolIcons/Account.png"	216	src="/static/schoolIcons/Account.png"
397	/>	217	/>
398	<span>Payment</span>	218	<span>Payment</span>
399	</v-tooltip>	219	</v-tooltip>
400	</span>	220	</span>
401	<v-tooltip top>	221	<v-tooltip top>
402	<img	222	<img
403	slot="activator"	223	slot="activator"
404	style="cursor:pointer; width:19px; height:19px;"	224	style="cursor:pointer; width:19px; height:19px;"
405	class="mr-3"	225	class="mr-3"
406	@click="profile(props.item)"	226	@click="profile(props.item)"
407	src="/static/icon/eye1.png"	227	src="/static/icon/eye1.png"
408	/>	228	/>
409	<span>View Payment</span>	229	<span>View Payment</span>
410	</v-tooltip>	230	</v-tooltip>
411	</td>	231	</td>
412	</tr>	232	</tr>
413	</template>	233	</template>
414	<v-alert	234	<v-alert
415	slot="no-results"	235	slot="no-results"
416	:value="true"	236	:value="true"
417	color="error"	237	color="error"
418	icon="warning"	238	icon="warning"
419	>Your search for "{{ search }}" found no results.</v-alert>	239	>Your search for "{{ search }}" found no results.</v-alert>
420	</v-data-table>	240	</v-data-table>
421		241
422	<!-- **** ADD INVOICE **** -->	242	<!-- **** ADD INVOICE **** -->
423	<v-snackbar	243	<v-snackbar
424	:timeout="timeout"	244	:timeout="timeout"
425	:top="y === 'top'"	245	:top="y === 'top'"
426	:right="x === 'right'"	246	:right="x === 'right'"
427	:vertical="mode === 'vertical'"	247	:vertical="mode === 'vertical'"
428	v-model="snackbar"	248	v-model="snackbar"
429	:color="color"	249	:color="color"
430	>{{ text }}</v-snackbar>	250	>{{ text }}</v-snackbar>
431	<v-dialog v-model="addInvoiceDialog">	251	<v-dialog v-model="addInvoiceDialog">
432	<v-card flat class="text-xs-center white--text">	252	<v-card flat class="text-xs-center white--text">
433	<v-layout>	253	<v-layout>
434	<v-flex xs12 class="card-styles pa-2">	254	<v-flex xs12 class="card-styles pa-2">
435	<label class="title text-xs-center">Add Invoice</label>	255	<label class="title text-xs-center">Add Invoice</label>
436	<v-icon size="24" class="right white--text" @click="addInvoiceDialog = false">cancel</v-icon>	256	<v-icon size="24" class="right white--text" @click="addInvoiceDialog = false">cancel</v-icon>
437	</v-flex>	257	</v-flex>
438	</v-layout>	258	</v-layout>
439	<v-flex xs12 sm12>	259	<v-flex xs12 sm12>
440	<v-container fluid grid-list-md>	260	<v-container fluid grid-list-md>
441	<v-layout wrap>	261	<v-layout wrap>
442	<v-flex xs12 sm12 md5>	262	<v-flex xs12 sm12 md5>
443	<v-card flat>	263	<v-card flat>
444	<v-toolbar dark class="card-styles" flat>	264	<v-toolbar dark class="card-styles" flat>
445	<v-spacer></v-spacer>	265	<v-spacer></v-spacer>
446	<h3>Invoice</h3>	266	<h3>Invoice</h3>
447	<v-spacer></v-spacer>	267	<v-spacer></v-spacer>
448	</v-toolbar>	268	</v-toolbar>
449	<v-form ref="form" v-model="valid" lazy-validation class="py-4">	269	<v-form ref="form" v-model="valid" lazy-validation class="py-4">
450	<v-layout>	270	<v-layout>
451	<v-flex xs4 class="pt-4 subheading">	271	<v-flex xs4 class="pt-4 subheading">
452	<label class="right hidden-xs-only hidden-sm-only">Select Class:</label>	272	<label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
453	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>	273	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
454	</v-flex>	274	</v-flex>
455	<v-flex xs6 class="ml-3">	275	<v-flex xs6 class="ml-3">
456	<v-select	276	<v-select
457	:items="addclass"	277	:items="addclass"
458	label="Select Class"	278	label="Select Class"
459	v-model="invoiceData.classNum"	279	v-model="invoiceData.classNum"
460	item-text="classNum"	280	item-text="classNum"
461	item-value="_id"	281	item-value="_id"
462	@change="getAllStudents()"	282	@change="getAllStudents()"
463	:rules="classRules"	283	:rules="classRules"
464	required	284	required
465	></v-select>	285	></v-select>
466	</v-flex>	286	</v-flex>
467	</v-layout>	287	</v-layout>
468	<v-layout>	288	<v-layout>
469	<v-flex xs4 class="pt-4 subheading">	289	<v-flex xs4 class="pt-4 subheading">
470	<label class="right hidden-xs-only hidden-sm-only">Select Student:</label>	290	<label class="right hidden-xs-only hidden-sm-only">Select Student:</label>
471	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Student:</label>	291	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Student:</label>
472	</v-flex>	292	</v-flex>
473	<v-flex xs6 class="ml-3">	293	<v-flex xs6 class="ml-3">
474	<v-select	294	<v-select
475	:items="studentList"	295	:items="studentList"
476	label="Select Student"	296	label="Select Student"
477	v-model="invoiceData.studentId"	297	v-model="invoiceData.studentId"
478	item-text="name"	298	item-text="name"
479	item-value="_id"	299	item-value="_id"
480	:rules="inchargeRules"	300	:rules="inchargeRules"
481	@change="selectAllStudent()"	301	@change="selectAllStudent()"
482	required	302	required
483	></v-select>	303	></v-select>
484	</v-flex>	304	</v-flex>
485	</v-layout>	305	</v-layout>
486	<v-layout>	306	<v-layout>
487	<v-flex xs4 class="pt-4 subheading">	307	<v-flex xs4 class="pt-4 subheading">
488	<label class="right">Date:</label>	308	<label class="right">Date:</label>
489	</v-flex>	309	</v-flex>
490	<v-flex xs6 class="ml-3">	310	<v-flex xs6 class="ml-3">
491	<v-menu	311	<v-menu
492	ref="menu1"	312	ref="menu1"
493	:close-on-content-click="false"	313	:close-on-content-click="false"
494	v-model="menu1"	314	v-model="menu1"
495	:nudge-right="40"	315	:nudge-right="40"
496	lazy	316	lazy
497	:return-value.sync="invoiceData.date"	317	:return-value.sync="invoiceData.date"
498	transition="scale-transition"	318	transition="scale-transition"
499	offset-y	319	offset-y
500	full-width	320	full-width
501	min-width="290px"	321	min-width="290px"
502	>	322	>
503	<v-text-field	323	<v-text-field
504	slot="activator"	324	slot="activator"
505	:rules="dateRules"	325	:rules="dateRules"
506	v-model="invoiceData.date"	326	v-model="invoiceData.date"
507	placeholder="Select date"	327	placeholder="Select date"
508	></v-text-field>	328	></v-text-field>
509	<v-date-picker	329	<v-date-picker
510	v-model="invoiceData.date"	330	v-model="invoiceData.date"
511	@input="$refs.menu1.save(invoiceData.date)"	331	@input="$refs.menu1.save(invoiceData.date)"
512	></v-date-picker>	332	></v-date-picker>
513	</v-menu>	333	</v-menu>
514	</v-flex>	334	</v-flex>
515	</v-layout>	335	</v-layout>
516	<v-layout>	336	<v-layout>
517	<v-flex xs4 class="pt-4 subheading">	337	<v-flex xs4 class="pt-4 subheading">
518	<label class="right hidden-xs-only hidden-sm-only">Payment Status:</label>	338	<label class="right hidden-xs-only hidden-sm-only">Payment Status:</label>
519	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Payment:</label>	339	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Payment:</label>
520	</v-flex>	340	</v-flex>
521	<v-flex xs6 class="ml-3">	341	<v-flex xs6 class="ml-3">
522	<v-select	342	<v-select
523	:items="paymentStatus"	343	:items="paymentStatus"
524	v-model="invoiceData.paymentStatus"	344	v-model="invoiceData.paymentStatus"
525	item-text="name"	345	item-text="name"
526	item-value="value"	346	item-value="value"
527	label="Select Payment Status"	347	label="Select Payment Status"
528	@change="getPayMethodList"	348	@change="getPayMethodList"
529	:rules="paymentStatusRules"	349	:rules="paymentStatusRules"
530	required	350	required
531	></v-select>	351	></v-select>
532	</v-flex>	352	</v-flex>
533	</v-layout>	353	</v-layout>
534	<v-layout v-show="showPayMethods">	354	<v-layout v-show="showPayMethods">
535	<v-flex xs4 class="pt-4 subheading">	355	<v-flex xs4 class="pt-4 subheading">
536	<label class="right">Payment Method:</label>	356	<label class="right">Payment Method:</label>
537	</v-flex>	357	</v-flex>
538	<v-flex xs6 class="ml-3">	358	<v-flex xs6 class="ml-3">
539	<v-select	359	<v-select
540	:items="paymentMethods"	360	:items="paymentMethods"
541	v-model="invoiceData.paymentMethod"	361	v-model="invoiceData.paymentMethod"
542	label="Select Payment Method"	362	label="Select Payment Method"
543	required	363	required
544	></v-select>	364	></v-select>
545	</v-flex>	365	</v-flex>
546	</v-layout>	366	</v-layout>
547	<v-layout>	367	<v-layout>
548	<v-flex xs12 sm11>	368	<v-flex xs12 sm11>
549	<v-card-actions>	369	<v-card-actions>
550	<v-spacer></v-spacer>	370	<v-spacer></v-spacer>
551	<v-btn @click="clear" round dark class="clear-button">clear</v-btn>	371	<v-btn @click="clear" round dark class="clear-button">clear</v-btn>
552	<v-btn	372	<v-btn
553	@click="submit"	373	@click="submit"
554	round	374	round
555	dark	375	dark
556	:loading="loading"	376	:loading="loading"
557	class="add-button"	377	class="add-button"
558	>Add</v-btn>	378	>Add</v-btn>
559	</v-card-actions>	379	</v-card-actions>
560	</v-flex>	380	</v-flex>
561	</v-layout>	381	</v-layout>
562	</v-form>	382	</v-form>
563	</v-card>	383	</v-card>
564	</v-flex>	384	</v-flex>
565	<v-flex xs12 sm12 md7>	385	<v-flex xs12 sm12 md7>
566	<v-card>	386	<v-card>
567	<v-toolbar dark class="card-styles" flat>	387	<v-toolbar dark class="card-styles" flat>
568	<v-spacer></v-spacer>	388	<v-spacer></v-spacer>
569	<h3>Fee Type List</h3>	389	<h3>Fee Type List</h3>
570	<v-spacer></v-spacer>	390	<v-spacer></v-spacer>
571	</v-toolbar>	391	</v-toolbar>
572	<v-layout>	392	<v-layout>
573	<v-flex xs4 sm2 class="mt-4 hidden-xs-only hidden-sm-only">	393	<v-flex xs4 sm2 class="mt-4 hidden-xs-only hidden-sm-only">
574	<label class="right title">Fee Type:</label>	394	<label class="right title">Fee Type:</label>
575	</v-flex>	395	</v-flex>
576	<v-flex xs8 sm4>	396	<v-flex xs8 sm4>
577	<v-select	397	<v-select
578	:items="feeTypes"	398	:items="feeTypes"
579	v-model="feeType.feeTypeName"	399	v-model="feeType.feeTypeName"
580	item-text="feeType"	400	item-text="feeType"
581	item-value="feeType"	401	item-value="feeType"
582	label="Select Fee Type"	402	label="Select Fee Type"
583	required	403	required
584	></v-select>	404	></v-select>
585	</v-flex>	405	</v-flex>
586	<v-flex xs4 sm6>	406	<v-flex xs4 sm6>
587	<v-btn	407	<v-btn
588	color="open-dialog-button"	408	color="open-dialog-button"
589	round	409	round
590	dark	410	dark
591	class="right mt-3"	411	class="right mt-3"
592	@click="selectFeeType"	412	@click="selectFeeType"
593	>ADD</v-btn>	413	>ADD</v-btn>
594	</v-flex>	414	</v-flex>
595	</v-layout>	415	</v-layout>
596	<table class="feeTypeTable tableRsponsive">	416	<table class="feeTypeTable tableRsponsive">
597	<tr class="info white--text">	417	<tr class="info white--text">
598	<th>#</th>	418	<th>#</th>
599	<th>Fee Type</th>	419	<th>Fee Type</th>
600	<th>Amount</th>	420	<th>Amount</th>
601	<th>Discount(%)</th>	421	<th>Discount(%)</th>
602	<th>Subtotal</th>	422	<th>Subtotal</th>
603	<th>Paid Amount</th>	423	<th>Paid Amount</th>
604	<th>Action</th>	424	<th>Action</th>
605	</tr>	425	</tr>
606	<tr	426	<tr
607	v-show="showFeeType"	427	v-show="showFeeType"
608	v-for="(feeType, index) in feeTypeData"	428	v-for="(feeType, index) in feeTypeData"
609	:key="index"	429	:key="index"
610	v-on:keyup="getAmmountDetails(feeType)"	430	v-on:keyup="getAmmountDetails(feeType)"
611	>	431	>
612	<td style="width:40px" class="tdFeeType">{{ index + 1 }}</td>	432	<td style="width:40px" class="tdFeeType">{{ index + 1 }}</td>
613	<td	433	<td
614	style="width:120px"	434	style="width:120px"
615	class="tdFeeType"	435	class="tdFeeType"
616	:rules="feeTypeNameRules"	436	:rules="feeTypeNameRules"
617	>{{ feeType.feeTypeName }}</td>	437	>{{ feeType.feeTypeName }}</td>
618	<td class="tdFeeType">	438	<td class="tdFeeType">
619	<v-text-field	439	<v-text-field
620	placeholder="fill your Amount"	440	placeholder="fill your Amount"
621	v-model="feeType.amount"	441	v-model="feeType.amount"
622	type="number"	442	type="number"
623	:rules="amountRules"	443	:rules="amountRules"
624	required	444	required
625	></v-text-field>	445	></v-text-field>
626	</td>	446	</td>
627	<td class="tdFeeType">	447	<td class="tdFeeType">
628	<v-text-field	448	<v-text-field
629	placeholder="fill your Discount"	449	placeholder="fill your Discount"
630	v-model="feeType.discount"	450	v-model="feeType.discount"
631	type="number"	451	type="number"
632	:rules="discountRules"	452	:rules="discountRules"
633	required	453	required
634	></v-text-field>	454	></v-text-field>
635	</td>	455	</td>
636	<td class="tdFeeType" :rules="subtotalRules">{{ feeType.subTotal }}</td>	456	<td class="tdFeeType" :rules="subtotalRules">{{ feeType.subTotal }}</td>
637	<td class="tdFeeType" v-if="invoiceData.paymentStatus === 'NOT_PAID'">	457	<td class="tdFeeType" v-if="invoiceData.paymentStatus === 'NOT_PAID'">
638	<v-text-field	458	<v-text-field
639	placeholder="fill your Paid Amount"	459	placeholder="fill your Paid Amount"
640	v-model="feeType.paidAmount"	460	v-model="feeType.paidAmount"
641	type="number"	461	type="number"
642	:disabled="disabled"	462	:disabled="disabled"
643	></v-text-field>	463	></v-text-field>
644	</td>	464	</td>
645	<td class="tdFeeType" v-if="invoiceData.paymentStatus == ''">	465	<td class="tdFeeType" v-if="invoiceData.paymentStatus == ''">
646	<v-text-field	466	<v-text-field
647	placeholder="fill your Paid Amount"	467	placeholder="fill your Paid Amount"
648	v-model="feeType.paidAmount"	468	v-model="feeType.paidAmount"
649	type="number"	469	type="number"
650	:disabled="disabled"	470	:disabled="disabled"
651	></v-text-field>	471	></v-text-field>
652	</td>	472	</td>
653	<td	473	<td
654	class="tdFeeType"	474	class="tdFeeType"
655	v-if="invoiceData.paymentStatus != 'NOT_PAID' && invoiceData.paymentStatus != ''"	475	v-if="invoiceData.paymentStatus != 'NOT_PAID' && invoiceData.paymentStatus != ''"
656	>	476	>
657	<v-text-field	477	<v-text-field
658	placeholder="fill your Paid Amount"	478	placeholder="fill your Paid Amount"
659	v-model="feeType.paidAmount"	479	v-model="feeType.paidAmount"
660	type="number"	480	type="number"
661	></v-text-field>	481	></v-text-field>
662	</td>	482	</td>
663	<td class="tdFeeType">	483	<td class="tdFeeType">
664	<v-icon color="error" @click="deleteSelectFee(index)">delete</v-icon>	484	<v-icon color="error" @click="deleteSelectFee(index)">delete</v-icon>
665	</td>	485	</td>
666	</tr>	486	</tr>
667	<tfoot>	487	<tfoot>
668	<tr>	488	<tr>
669	<td colspan="2" class="tdFeeType">Total:</td>	489	<td colspan="2" class="tdFeeType">Total:</td>
670	<td class="tdFeeType">{{ feeType.amount }}</td>	490	<td class="tdFeeType">{{ feeType.amount }}</td>
671	<td class="tdFeeType">{{ feeType.discount }}</td>	491	<td class="tdFeeType">{{ feeType.discount }}</td>
672	<td class="tdFeeType">{{ feeType.subTotal }}</td>	492	<td class="tdFeeType">{{ feeType.subTotal }}</td>
673	<td class="tdFeeType">{{ feeType.paidAmount }}</td>	493	<td class="tdFeeType">{{ feeType.paidAmount }}</td>
674	<td class="tdFeeType">	494	<td class="tdFeeType">
675	<v-icon color="error" @click="deleteSelectFee(index)">delete</v-icon>	495	<v-icon color="error" @click="deleteSelectFee(index)">delete</v-icon>
676	</td>	496	</td>
677	</tr>	497	</tr>
678	</tfoot>	498	</tfoot>
679	</table>	499	</table>
680	</v-card>	500	</v-card>
681	</v-flex>	501	</v-flex>
682	</v-layout>	502	</v-layout>
683	</v-container>	503	</v-container>
684	</v-flex>	504	</v-flex>
685	</v-card>	505	</v-card>
686	</v-dialog>	506	</v-dialog>
687	<div class="loader" v-if="showLoader">	507	<div class="loader" v-if="showLoader">
688	<v-progress-circular indeterminate color="white"></v-progress-circular>	508	<v-progress-circular indeterminate color="white"></v-progress-circular>
689	</div>	509	</div>
690	</v-container>	510	</v-container>
691	</template>	511	</template>
692		512
693	<script>	513	<script>
694	import http from "@/Services/http.js";	514	import http from "@/Services/http.js";
695	import editInvoice from "./editInvoice";	515	import editInvoice from "./editInvoice";
696	import paymentTemplate from "./paymentTemplate.vue";	516	import paymentTemplate from "./paymentTemplate.vue";
697	import moment from "moment";	517	import moment from "moment";
698		518
699	export default {	519	export default {
700	components: {	520	components: {
701	editInvoice: editInvoice,	521	editInvoice: editInvoice,
702	paymentTemplate: paymentTemplate	522	paymentTemplate: paymentTemplate
703	},	523	},
704	data: () => ({	524	data: () => ({
705	snackbar: false,	525	snackbar: false,
706	showPayMethods: false,	526	showPayMethods: false,
707	y: "top",	527	y: "top",
708	x: "right",	528	x: "right",
709	mode: "",	529	mode: "",
710	timeout: 5000,	530	timeout: 5000,
711	text: "",	531	text: "",
712	color: "",	532	color: "",
713	show: true,	533	show: true,
714	showSearch: false,	534	showSearch: false,
715	showLoader: false,	535	showLoader: false,
716	loading: false,	536	loading: false,
717	date: null,	537	date: null,
718	search: "",	538	search: "",
719	dialog: false,	539	dialog: false,
720	dialog1: false,	540	dialog1: false,
721	valid: true,	541	valid: true,
722	validEdit: true,	542	validEdit: true,
723	isActive: true,	543	isActive: true,
724	newActive: false,	544	newActive: false,
725	showFeeType: true,	545	showFeeType: true,
726	addInvoiceDialog: false,	546	addInvoiceDialog: false,
727	editInvoiceDialog: false,	547	editInvoiceDialog: false,
728	paymentInvoiceDialog: false,	548	paymentInvoiceDialog: false,
729	disabled: true,	549	disabled: true,
730	details: [],	550	details: [],
731	feeTypes: [],	551	feeTypes: [],
732	invoiceData: [],	552	invoiceData: [],
733	editData: [],	553	editData: [],
734	invoiceList: [],	554	invoiceList: [],
735	editPayment: {	555	editPayment: {
736	studentId: {	556	studentId: {
737	name: "",	557	name: "",
738	rollNo: ""	558	rollNo: ""
739	},	559	},
740	classId: {	560	classId: {
741	classNum: ""	561	classNum: ""
742	}	562	}
743	},	563	},
744	menu1: false,	564	menu1: false,
745	paymentMethods: ["Cash", "Cheque"],	565	paymentMethods: ["Cash", "Cheque"],
746	feeType: {	566	feeType: {
747	amount: "0.00",	567	amount: "0.00",
748	discount: "0.00",	568	discount: "0.00",
749	subTotal: "0.00",	569	subTotal: "0.00",
750	paidAmount: "0.00",	570	paidAmount: "0.00",
751	feeTypeName: ""	571	feeTypeName: ""
752	},	572	},
753		573
754	feeTypeData: [],	574	feeTypeData: [],
755	editFeeTypeData: [],	575	editFeeTypeData: [],
756	paymentFeeTypeData: [],	576	paymentFeeTypeData: [],
757	pagination: {	577	pagination: {
758	rowsPerPage: 10	578	rowsPerPage: 10
759	},	579	},
760	classRules: [v => !!v \|\| " Class Name is required"],	580	classRules: [v => !!v \|\| " Class Name is required"],
761	inchargeRules: [v => !!v \|\| "Student Name is required"],	581	inchargeRules: [v => !!v \|\| "Student Name is required"],
762	dateRules: [v => !!v \|\| " Date is required"],	582	dateRules: [v => !!v \|\| " Date is required"],
763	paymentStatusRules: [v => !!v \|\| "Payment Status is required"],	583	paymentStatusRules: [v => !!v \|\| "Payment Status is required"],
764	paymentMethodsRules: [v => !!v \|\| "payment Method is required"],	584	paymentMethodsRules: [v => !!v \|\| "payment Method is required"],
765	feeTypeRules: [v => !!v \|\| "Fee Type is required"],	585	feeTypeRules: [v => !!v \|\| "Fee Type is required"],
766	feeTypeNameRules: [v => !!v \|\| "Fee Type Name is required"],	586	feeTypeNameRules: [v => !!v \|\| "Fee Type Name is required"],
767	amountRules: [v => !!v \|\| "Amount is required"],	587	amountRules: [v => !!v \|\| "Amount is required"],
768	discountRules: [v => !!v \|\| "Discount is required"],	588	discountRules: [v => !!v \|\| "Discount is required"],
769	subtotalRules: [v => !!v \|\| "Subtotal is required"],	589	subtotalRules: [v => !!v \|\| "Subtotal is required"],
770	paymentRules: [v => !!v \|\| "Payment is required"],	590	paymentRules: [v => !!v \|\| "Payment is required"],
771	paidAmountRules: [v => !!v \|\| "Paid Amount is required"],	591	paidAmountRules: [v => !!v \|\| "Paid Amount is required"],
772	headers: [	592	headers: [
773	{	593	{
774	text: "No",	594	text: "No",
775	align: "",	595	align: "",
776	sortable: false,	596	sortable: false,
777	value: "No"	597	value: "No"
778	},	598	},
779	{	599	{
780	text: "Student",	600	text: "Student",
781	value: "name",	601	value: "name",
782	sortable: false,	602	sortable: false,
783	align: "center"	603	align: "center"
784	},	604	},
785	{ text: "Class", value: "class", sortable: false, align: "center" },	605	{ text: "Class", value: "class", sortable: false, align: "center" },
786	{ text: "Total", value: "subtotal", sortable: false, align: "center" },	606	{ text: "Total", value: "subtotal", sortable: false, align: "center" },
787	{	607	{
788	text: "Discount(%)",	608	text: "Discount(%)",
789	value: "discount",	609	value: "discount",
790	sortable: false,	610	sortable: false,
791	align: "center"	611	align: "center"
792	},	612	},
793	{	613	{
794	text: "Paid Amount",	614	text: "Paid Amount",
795	value: "paidAmount",	615	value: "paidAmount",
796	sortable: false,	616	sortable: false,
797	align: "center"	617	align: "center"
798	},	618	},
799	{	619	{
800	text: "Balance",	620	text: "Balance",
801	value: "Balance",	621	value: "Balance",
802	sortable: false,	622	sortable: false,
803	align: "center"	623	align: "center"
804	},	624	},
805	{	625	{
806	text: "Status",	626	text: "Status",
807	value: "paymentStatus",	627	value: "paymentStatus",
808	sortable: false,	628	sortable: false,
809	align: "center"	629	align: "center"
810	},	630	},
811	{	631	{
812	text: "Date",	632	text: "Date",
813	value: "date",	633	value: "date",
814	sortable: false,	634	sortable: false,
815	align: "center"	635	align: "center"
816	},	636	},
817	{ text: "Action", value: "", sortable: false, align: "center" }	637	{ text: "Action", value: "", sortable: false, align: "center" }
818	],	638	],
819		639
820	studentId: {	640	studentId: {
821	name: ""	641	name: ""
822	},	642	},
823	token: "",	643	token: "",
824	editedItem: {},	644	editedItem: {},
825	invoiceData: {	645	invoiceData: {
826	paymentStatus: "",	646	paymentStatus: "",
827	students: []	647	students: []
828	},	648	},
829	addclass: [],	649	addclass: [],
830	studentList: [],	650	studentList: [],
831	paymentStatus: [	651	paymentStatus: [
832	{	652	{
833	name: "Not Paid",	653	name: "Not Paid",
834	value: "NOT_PAID"	654	value: "NOT_PAID"
835	},	655	},
836	{	656	{
837	name: "Partially Paid",	657	name: "Partially Paid",
838	value: "PARTIALLY_PAID"	658	value: "PARTIALLY_PAID"
839	},	659	},
840	{	660	{
841	name: "Fully Paid",	661	name: "Fully Paid",
842	value: "FULLY_PAID"	662	value: "FULLY_PAID"
843	}	663	}
844	]	664	]
845	}),	665	}),
846	methods: {	666	methods: {
847	save(date) {	667	save(date) {
848	this.$refs.menu1.save(date);	668	this.$refs.menu1.save(date);
849	},	669	},
850	dates: function(date) {	670	dates: function(date) {
851	return moment(date).format("MMMM DD, YYYY");	671	return moment(date).format("MMMM DD, YYYY");
852	},	672	},
853	profile(item) {	673	profile(item) {
854	// console.log("item", item);	674	// console.log("item", item);
855	this.editedIndex = this.invoiceList.indexOf(item);	675	this.editedIndex = this.invoiceList.indexOf(item);
856	this.editedItem = Object.assign({}, item);	676	this.editedItem = Object.assign({}, item);
857	console.log("editedItem", this.editedItem);	677	console.log("editedItem", this.editedItem);
858	this.dialog1 = true;	678	this.dialog1 = true;
859	},	679	},
860	editItem(item) {	680	editItem(item) {
861	this.editedIndex = this.invoiceList.indexOf(item);	681	this.editedIndex = this.invoiceList.indexOf(item);
862	this.editData = Object.assign({}, item);	682	this.editData = Object.assign({}, item);
863	this.editData.date = this.editData.date.slice(0, 10);	683	this.editData.date = this.editData.date.slice(0, 10);
864	// console.log("invoiceData", this.editData);	684	// console.log("invoiceData", this.editData);
865	this.editFeeTypeData = this.editData.feeType;	685	this.editFeeTypeData = this.editData.feeType;
866	this.editInvoiceDialog = true;	686	this.editInvoiceDialog = true;
867	},	687	},
868	paymentItem(item) {	688	paymentItem(item) {
869	// console.log("item", item);	689	// console.log("item", item);
870	this.editedIndex = this.invoiceList.indexOf(item);	690	this.editedIndex = this.invoiceList.indexOf(item);
871	this.editPayment = Object.assign({}, item);	691	this.editPayment = Object.assign({}, item);
872	this.editPayment.date = this.editPayment.date.slice(0, 10);	692	this.editPayment.date = this.editPayment.date.slice(0, 10);
		693	if (this.editPayment.paymentStatus == "NOT_PAID") {
		694	for (let i = 0; i < this.editPayment.feeType.length; i++) {
		695	this.editPayment.feeType[i].paidAmount = "0.00";
		696	}
		697	}
		698	// console.log("this.editPayment", this.editPayment);
873	this.paymentFeeTypeData = this.editPayment.feeType;	699	this.paymentFeeTypeData = this.editPayment.feeType;
874	this.paymentInvoiceDialog = true;	700	this.paymentInvoiceDialog = true;
875	},	701	},
876	deleteItem(item) {	702	deleteItem(item) {
877	let deleteInvoice = {	703	let deleteInvoice = {
878	invoiceId: item._id	704	invoiceId: item._id
879	};	705	};
880	http()	706	http()
881	.delete(	707	.delete(
882	"/deleteInvoice",	708	"/deleteInvoice",
883	confirm("Are you sure you want to delete this?") && {	709	confirm("Are you sure you want to delete this?") && {
884	params: deleteInvoice	710	params: deleteInvoice
885	}	711	}
886	)	712	)
887	.then(response => {	713	.then(response => {
888	this.snackbar = true;	714	this.snackbar = true;
889	this.text = "Successfully delete Existing Invoice";	715	this.text = "Successfully delete Existing Invoice";
890	this.color = "green";	716	this.color = "green";
891	this.dialog1 = false;	717	this.dialog1 = false;
892	this.getInvoiceList();	718	this.getInvoiceList();
893	})	719	})
894	.catch(error => {	720	.catch(error => {
895	// console.log(error);	721	// console.log(error);
896	});	722	});
897	},	723	},
898	deletePayment(editedItem) {	724	deletePayment(editedItem) {
899	let deleteInvoice = {	725	let deleteInvoice = {
900	invoiceId: editedItem._id	726	invoiceId: editedItem._id
901	};	727	};
902	http()	728	http()
903	.put(	729	.put(
904	"/removePayment",	730	"/removePayment",
905	deleteInvoice,	731	deleteInvoice,
906	confirm("Are you sure you want to delete this?") && {	732	confirm("Are you sure you want to delete this?") && {
907	headers: {	733	headers: {
908	Authorization: "Bearer " + this.token	734	Authorization: "Bearer " + this.token
909	}	735	}
910	}	736	}
911	)	737	)
912	.then(response => {	738	.then(response => {
913	this.snackbar = true;	739	this.snackbar = true;
914	this.text = "Successfully delete Existing Invoice";	740	this.text = "Successfully delete Existing Invoice";
915	this.color = "green";	741	this.color = "green";
916	this.dialog1 = false;	742	this.dialog1 = false;
917	this.getInvoiceList();	743	this.getInvoiceList();
918	})	744	})
919	.catch(error => {	745	.catch(error => {
920	// console.log(error);	746	// console.log(error);
921	});	747	});
922	},	748	},
923	close() {	749	close() {
924	this.dialog = false;	750	this.dialog = false;
925	},	751	},
926	// totalAmount() {	752	// totalAmount() {
927	// // console.log("this.feeType.paidAmount ", this.feeType.paidAmount);	753	// // console.log("this.feeType.paidAmount ", this.feeType.paidAmount);
928	// // console.log(	754	// // console.log(
929	// // "this.feeType.subTotalAAAAAAAAAAAAAAA ",	755	// // "this.feeType.subTotalAAAAAAAAAAAAAAA ",
930	// // this.feeType.subTotal	756	// // this.feeType.subTotal
931	// // );	757	// // );
932		758
933	// if (this.feeType.paidAmount < this.feeType.subTotal) {	759	// if (this.feeType.paidAmount < this.feeType.subTotal) {
934	// console.log("this.feeType.subTotalBBBBBBBBBBB ", this.feeType.subTotal);	760	// console.log("this.feeType.subTotalBBBBBBBBBBB ", this.feeType.subTotal);
935		761
936	// this.feeType.paidAmount = this.feeType.subTotal;	762	// this.feeType.paidAmount = this.feeType.subTotal;
937	// console.log(	763	// console.log(
938	// "this.feeType.paidAmount BBBBBBBBBBB",	764	// "this.feeType.paidAmount BBBBBBBBBBB",
939	// this.feeType.paidAmount	765	// this.feeType.paidAmount
940	// );	766	// );
941	// }	767	// }
942	// },	768	// },
943	submit() {	769	submit() {
944	let feeTypeId = "";	770	let feeTypeId = "";
945	for (let i = 0; i < this.feeTypes.length; i++) {	771	for (let i = 0; i < this.feeTypes.length; i++) {
946	if (this.feeTypes[i].feeType === this.feeType.feeTypeName) {	772	if (this.feeTypes[i].feeType === this.feeType.feeTypeName) {
947	feeTypeId = this.feeTypes[i]._id;	773	feeTypeId = this.feeTypes[i]._id;
948	}	774	}
949	}	775	}
950	if (this.$refs.form.validate()) {	776	if (this.$refs.form.validate()) {
951	let invoiceData = {	777	let invoiceData = {
952	classId: this.invoiceData.classNum,	778	classId: this.invoiceData.classNum,
953	students: this.invoiceData.students,	779	students: this.invoiceData.students,
954	date: this.invoiceData.date,	780	date: this.invoiceData.date,
955	paymentStatus: this.invoiceData.paymentStatus,	781	paymentStatus: this.invoiceData.paymentStatus,
956	paymentMethod: this.invoiceData.paymentMethod,	782	paymentMethod: this.invoiceData.paymentMethod,
957	feeType: this.feeTypeData,	783	feeType: this.feeTypeData,
958	totalAmount: this.feeType.amount,	784	totalAmount: this.feeType.amount.toString(),
959	totalDiscount: this.feeType.discount,	785	totalDiscount: this.feeType.discount.toString(),
960	totalSubTotal: this.feeType.subTotal,	786	totalSubTotal: this.feeType.subTotal,
961	totalPaidAmount: this.feeType.paidAmount	787	totalPaidAmount: this.feeType.paidAmount
962	};	788	};
963	console.log("invoiceData", invoiceData);	789	// console.log("invoiceData", invoiceData);
964	if (invoiceData.paymentStatus == "NOT_PAID") {	790	if (this.feeType.paidAmount != "0.00") {
965	delete invoiceData.totalPaidAmount;	791	if (this.feeType.subTotal == this.feeType.paidAmount) {
966	}	792	invoiceData.paymentStatus = "FULLY_PAID";
967	if (this.feeType.subTotal == this.feeType.paidAmount) {	793	console.log("FULLY_PAID");
968	invoiceData.paymentStatus = "FULLY_PAID";	794	}
969	// console.log("FULLY_PAID");	795	if (invoiceData.totalPaidAmount) {
970	}	796	if (this.feeType.subTotal != this.feeType.paidAmount) {
971	if (invoiceData.totalPaidAmount) {	797	invoiceData.paymentStatus = "PARTIALLY_PAID";
972	if (this.feeType.subTotal != this.feeType.paidAmount) {	798	console.log("PARTIALLY_PAID");
973	invoiceData.paymentStatus = "PARTIALLY_PAID";	799	}
974	// console.log("PARTIALLY_PAID");
975	}	800	}
		801	} else if (this.feeType.paidAmount === "0.00") {
		802	invoiceData.paymentStatus = "NOT_PAID";
976	}	803	}
977	http()	804	http()
978	.post("/createInvoice", invoiceData)	805	.post("/createInvoice", invoiceData)
979	.then(response => {	806	.then(response => {
980	this.getInvoiceList();	807	this.getInvoiceList();
981	this.snackbar = true;	808	this.snackbar = true;
982	this.text = "New Invoice added successfully";	809	this.text = "New Invoice added successfully";
983	this.color = "green";	810	this.color = "green";
984	this.clear();	811	this.clear();
985	this.feeTypeData = [];	812	this.feeTypeData = [];
986	if (this.feeTypeData.length == 0) {	813	if (this.feeTypeData.length == 0) {
987	this.feeType = {	814	this.feeType = {
988	amount: "0.00",	815	amount: "0.00",
989	discount: "0.00",	816	discount: "0.00",
990	paidAmount: "0.00",	817	paidAmount: "0.00",
991	subTotal: "0.00",	818	subTotal: "0.00",
992	feeTypeList: ""	819	feeTypeList: ""
993	};	820	};
994	}	821	}
995	this.loading = false;	822	this.loading = false;
996	this.addInvoiceDialog = false;	823	this.addInvoiceDialog = false;
997	})	824	})
998	.catch(error => {	825	.catch(error => {
999	this.snackbar = true;	826	this.snackbar = true;
1000	this.text = error.response.data.errors[0].messages[0];	827	this.text = error.response.data.errors[0].messages[0];
1001	this.color = "error";	828	this.color = "error";
1002	this.loading = false;	829	this.loading = false;
1003	});	830	});
1004	}	831	}
1005	},	832	},
1006	// add() {
1007	// var updatePayment = {
1008	// invoiceId: this.editPayment._id,
1009	// // totalPaidAmount: this.editPayment.paidAmount
1010	// classId: this.editPayment.classNum,
1011	// students: this.editPayment.students,
1012	// date: this.editPayment.date,
1013	// paymentStatus: this.editPayment.paymentStatus,
1014	// paymentMethod: this.editPayment.paymentMethod,
1015	// feeType: this.feeTypeData,
1016	// totalAmount: this.feeType.amount,
1017	// totalDiscount: this.feeType.discount,
1018	// totalSubTotal: this.feeType.subTotal,
1019	// totalPaidAmount: this.feeType.paidAmount
1020	// };
1021	// http()
1022	// .put("/updateInvoice", updatePayment, {
1023	// headers: {
1024	// Authorization: "Bearer " + this.token
1025	// }
1026	// })
1027	// .then(response => {
1028	// this.getInvoiceList();
1029	// this.snackbar = true;
1030	// this.text = response.data.message;
1031	// this.color = "green";
1032	// this.paymentInvoiceDialog = false;
1033	// })
1034	// .catch(error => {
1035	// console.log("error", error);
1036	// this.snackbar = true;
1037	// this.color = "red";
1038	// });
1039	// },
1040	clear() {	833	clear() {
1041	this.$refs.form.reset();	834	this.$refs.form.reset();
1042	},	835	},
1043	getInvoiceList() {	836	getInvoiceList() {
1044	this.showLoader = true;	837	this.showLoader = true;
1045	http()	838	http()
1046	.get("/getInvoicesList", {	839	.get("/getInvoicesList", {
1047	params: { schoolId: this.$store.state.schoolId },	840	params: { schoolId: this.$store.state.schoolId },
1048	headers: { Authorization: "Bearer " + this.token }	841	headers: { Authorization: "Bearer " + this.token }
1049	})	842	})
1050	.then(response => {	843	.then(response => {
1051	this.invoiceList = response.data.data;	844	this.invoiceList = response.data.data;
1052	this.showLoader = false;	845	this.showLoader = false;
1053	})	846	})
1054	.catch(error => {	847	.catch(error => {
1055	// console.log("err====>", err);	848	// console.log("err====>", err);
1056	this.showLoader = false;	849	this.showLoader = false;
1057	if (error.response.status === 401) {	850	if (error.response.status === 401) {
1058	this.$router.replace({ path: "/" });	851	this.$router.replace({ path: "/" });
1059	this.$store.dispatch("setToken", null);	852	this.$store.dispatch("setToken", null);
1060	this.$store.dispatch("Id", null);	853	this.$store.dispatch("Id", null);
1061	}	854	}
1062	});	855	});
1063	},	856	},
1064	selectFeeType() {	857	selectFeeType() {
1065	this.showFeeType = true;	858	this.showFeeType = true;
1066	this.feeTypeData.push({ feeTypeName: this.feeType.feeTypeName });	859	this.feeTypeData.push({ feeTypeName: this.feeType.feeTypeName });
1067	},	860	},
1068	deleteSelectFee: function(index) {	861	deleteSelectFee: function(index) {
		862	console.log("---index----", index);
1069	this.feeTypeData.splice(index, 1);	863	this.feeTypeData.splice(index, 1);
1070	for (let i = 0; i < this.feeTypeData.length; i++) {	864	for (let i = 0; i < this.feeTypeData.length; i++) {
1071	this.feeType = this.feeTypeData[i];	865	console.log("this.feeTypeData[i]", this.feeTypeData[i]);
		866	if (this.feeTypeData[i].paidAmount) {
		867	this.feeType = {
		868	amount: this.feeTypeData[i].amount,
		869	discount: this.feeTypeData[i].discount,
		870	subTotal: this.feeTypeData[i].subTotal,
		871	paidAmount: this.feeTypeData[i].paidAmount
		872	};
		873	} else {
		874	this.feeType = {
		875	amount: this.feeTypeData[i].amount,
		876	discount: this.feeTypeData[i].discount,
		877	subTotal: this.feeTypeData[i].subTotal,
		878	paidAmount: "0.00"
		879	};
		880	}
1072	}	881	}
1073	if (this.feeTypeData.length == 0) {	882	if (this.feeTypeData.length == 0) {
1074	this.feeType = {	883	this.feeType = {
1075	amount: "0.00",	884	amount: "0.00",
1076	discount: "0.00",	885	discount: "0.00",
1077	paidAmount: "0.00",	886	paidAmount: "0.00",
1078	subTotal: "0.00",	887	subTotal: "0.00",
1079	feeTypeName: ""	888	feeTypeName: ""
1080	};	889	};
1081	}	890	}
1082	},	891	},
1083	getAllClasses() {	892	getAllClasses() {
1084	http()	893	http()
1085	.get("/getClassesList", {	894	.get("/getClassesList", {
1086	params: { schoolId: this.$store.state.schoolId },	895	params: { schoolId: this.$store.state.schoolId },
1087	headers: { Authorization: "Bearer " + this.token }	896	headers: { Authorization: "Bearer " + this.token }
1088	})	897	})
1089	.then(response => {	898	.then(response => {
1090	this.addclass = response.data.data;	899	this.addclass = response.data.data;
1091	})	900	})
1092	.catch(err => {	901	.catch(err => {
1093	// console.log("err====>", err);	902	// console.log("err====>", err);
1094	// this.$router.replace({ path: "/" });	903	// this.$router.replace({ path: "/" });
1095	});	904	});
1096	},	905	},
1097	getAllStudents() {	906	getAllStudents() {
1098	this.showLoader = true;	907	this.showLoader = true;
1099	http()	908	http()
1100	.get("/getStudentsList", {	909	.get("/getStudentsList", {
1101	params: {	910	params: {
1102	classId: this.invoiceData.classNum,	911	classId: this.invoiceData.classNum,
1103	schoolId: this.$store.state.schoolId	912	schoolId: this.$store.state.schoolId
1104	},	913	},
1105	headers: { Authorization: "Bearer " + this.token }	914	headers: { Authorization: "Bearer " + this.token }
1106	})	915	})
1107	.then(response => {	916	.then(response => {
1108	response.data.data.unshift({	917	response.data.data.unshift({
1109	name: "Select All",	918	name: "Select All",
1110	_id: "Select All"	919	_id: "Select All"
1111	});	920	});
1112	this.studentList = response.data.data;	921	this.studentList = response.data.data;
1113	this.showLoader = false;	922	this.showLoader = false;
1114	})	923	})
1115	.catch(err => {	924	.catch(err => {
1116	this.showLoader = false;	925	this.showLoader = false;
1117	// console.log("err====>", err);	926	// console.log("err====>", err);
1118	// this.$router.replace({ path: "/" });	927	// this.$router.replace({ path: "/" });
1119	});	928	});
1120	},	929	},
1121	getfeeType() {	930	getfeeType() {
1122	http()	931	http()
1123	.get("/getFeesList", {	932	.get("/getFeesList", {
1124	params: {	933	params: {
1125	schoolId: this.$store.state.schoolId	934	schoolId: this.$store.state.schoolId
1126	},	935	},
1127	headers: { Authorization: "Bearer " + this.token }	936	headers: { Authorization: "Bearer " + this.token }
1128	})	937	})
1129	.then(response => {	938	.then(response => {
1130	this.feeTypes = response.data.data;	939	this.feeTypes = response.data.data;
1131	})	940	})
1132	.catch(err => {	941	.catch(err => {
1133	// console.log("err====>", err);	942	// console.log("err====>", err);
1134	// this.$router.replace({ path: "/" });	943	// this.$router.replace({ path: "/" });
1135	});	944	});
1136	},	945	},
1137		946
1138	getAmmountDetails(feeTyp) {	947	getAmmountDetails(feeTyp) {
1139	let feeType = {	948	let feeType = {
1140	amount: "0.00",	949	amount: "0.00",
1141	discount: "0.00",	950	discount: "0.00",
1142	subTotal: "0.00",	951	subTotal: "0.00",
1143	subParticularTotal: "0.00",	952	subParticularTotal: "0.00",
1144	paidAmount: ""	953	paidAmount: ""
1145	};	954	};
1146	for (let i = 0; i < this.feeTypeData.length; i++) {	955	for (let i = 0; i < this.feeTypeData.length; i++) {
1147	// ********* AMOUNT *********	956	// ********* AMOUNT *********
1148		957	if (this.feeTypeData[i].amount) {
1149	feeType.amount =	958	feeType.amount =
1150	Number(feeType.amount) + Number(this.feeTypeData[i].amount);	959	Number(feeType.amount) + Number(this.feeTypeData[i].amount);
1151	// console.log("feeType.amount ", feeType.amount);	960	this.feeType.amount = feeType.amount;
1152	this.feeType.amount = feeType.amount;	961	this.feeType.subTotal = feeType.amount;
1153	this.feeType.subTotal = feeType.amount;	962	this.feeTypeData[i].subTotal = this.feeTypeData[i].amount;
1154	this.feeTypeData[i].subTotal = this.feeTypeData[i].amount;	963	} else if (this.feeTypeData[0].amount == "") {
1155		964	this.feeType.amount = "0.00";
		965	this.feeTypeData[i].subTotal = "0.00";
		966	this.feeType.subTotal = "0.00";
		967	} else if (this.feeTypeData[i].amount == "") {
		968	this.feeType.amount =
		969	Number(feeType.amount) + Number(this.feeTypeData[i].amount);
		970	this.feeTypeData[i].subTotal =
		971	Number(feeType.amount) + Number(this.feeTypeData[i].amount);
		972	this.feeType.subTotal =
		973	Number(feeType.amount) + Number(this.feeTypeData[i].amount);
		974	}
1156	// ********* DISCOUNT *********	975	// ********* DISCOUNT *********
1157
1158	if (this.feeTypeData[i].discount) {	976	if (this.feeTypeData[i].discount) {
1159	feeType.discount =	977	feeType.discount =
1160	Number(feeType.discount) + Number(this.feeTypeData[i].discount);	978	Number(feeType.discount) + Number(this.feeTypeData[i].discount);
1161	this.feeType.discount = feeType.discount;	979	this.feeType.discount = feeType.discount;
1162	feeType.subParticularTotal =	980	feeType.subParticularTotal =
1163	this.feeTypeData[i].amount -	981	this.feeTypeData[i].amount -
1164	(this.feeTypeData[i].amount * this.feeTypeData[i].discount) / 100;	982	(this.feeTypeData[i].amount * this.feeTypeData[i].discount) / 100;
1165	this.feeTypeData[i].subTotal = feeType.subParticularTotal.toFixed(2);	983	this.feeTypeData[i].subTotal = feeType.subParticularTotal.toFixed(2);
		984	} else if (this.feeTypeData[0].discount == "") {
		985	this.feeType.discount = "0.00";
		986	} else if (this.feeTypeData[i].discount == "") {
		987	this.feeType.discount =
		988	Number(feeType.discount) + Number(this.feeTypeData[i].discount);
1166	}	989	}
1167		990
1168	// ********* SUBTOTAL *********	991	// ********* SUBTOTAL *********
1169		992	if (this.feeTypeData[i].subTotal) {
1170	feeType.subTotal =	993	feeType.subTotal =
1171	Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal);	994	Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal);
1172	this.feeType.subTotal = feeType.subTotal.toFixed(2);	995	this.feeType.subTotal = feeType.subTotal.toFixed(2);
		996	}
1173		997
1174	// ********* PAID-AMOUNT *********	998	// ********* PAID-AMOUNT *********
1175	if (this.feeTypeData[i].paidAmount) {	999	if (this.feeTypeData[i].paidAmount) {
1176	feeType.paidAmount =	1000	feeType.paidAmount =
1177	Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);	1001	Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);
1178	this.feeType.paidAmount = feeType.paidAmount.toFixed(2);	1002	this.feeType.paidAmount = feeType.paidAmount.toFixed(2);
		1003	} else if (this.feeTypeData[0].paidAmount == "") {
		1004	this.feeType.paidAmount = "0.00";
		1005	} else if (this.feeTypeData[i].paidAmount == "") {
		1006	this.feeType.paidAmount = feeType.paidAmount =
		1007	Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);
1179	}	1008	}
		1009
1180	// if paid Amount fill large of subtotal value so this condition are fixed filled subtotal value.	1010	// if paid Amount fill large of subtotal value so this condition are fixed filled subtotal value.
1181	if (feeType.paidAmount > feeType.subTotal) {	1011	if (feeType.paidAmount > feeType.subTotal) {
1182	this.feeTypeData[i].paidAmount = this.feeTypeData[i].subTotal;	1012	this.feeTypeData[i].paidAmount = this.feeTypeData[i].subTotal;
1183	this.feeType.paidAmount = feeType.subTotal;	1013	this.feeType.paidAmount = feeType.subTotal;
1184	}	1014	}
1185	}	1015	}
1186	},	1016	},
1187	getPayMethodList() {	1017	getPayMethodList() {
1188	if (this.invoiceData.paymentStatus == "PARTIALLY_PAID") {	1018	if (this.invoiceData.paymentStatus == "PARTIALLY_PAID") {
1189	this.showPayMethods = true;	1019	this.showPayMethods = true;
1190	} else if (this.invoiceData.paymentStatus == "FULLY_PAID") {	1020	} else if (this.invoiceData.paymentStatus == "FULLY_PAID") {
1191	this.showPayMethods = true;	1021	this.showPayMethods = true;
1192	} else {	1022	} else if (this.invoiceData.paymentStatus == "NOT_PAID") {
1193	this.showPayMethods = false;	1023	for (let i = 0; i < this.feeTypeData.length; i++) {
1194	}	1024	this.feeTypeData[i].paidAmount = "0.00";
1195	},	1025	this.feeType.paidAmount = "0.00";
1196	getPaymentMethod() {	1026	}
1197	if (this.editData.paymentStatus == "PARTIALLY_PAID") {
1198	this.showPayMethods = true;
1199	} else if (this.editData.paymentStatus == "FULLY_PAID") {
1200	this.showPayMethods = true;
1201	} else {	1027	} else {
1202	this.showPayMethods = false;	1028	this.showPayMethods = false;
1203	}	1029	}
1204	},	1030	},
1205	selectAllStudent() {	1031	selectAllStudent() {
1206	// console.log("this.studentId", this.invoiceData.studentId);
1207	this.invoiceData.students = [];	1032	this.invoiceData.students = [];
1208	if (this.invoiceData.studentId === "Select All") {	1033	if (this.invoiceData.studentId === "Select All") {
1209	for (let i = 1; i < this.studentList.length; i++) {	1034	for (let i = 1; i < this.studentList.length; i++) {
1210	this.invoiceData.students.push(this.studentList[i]._id);	1035	this.invoiceData.students.push(this.studentList[i]._id);
1211	console.log("data", this.invoiceData.students);	1036	console.log("data", this.invoiceData.students);
1212	// data.push(this.studentList[i]._id);	1037	// data.push(this.studentList[i]._id);
1213	// console.log("data", data);	1038	// console.log("data", data);
1214	}	1039	}
1215	} else {	1040	} else {
1216	this.invoiceData.students.push(this.invoiceData.studentId);	1041	this.invoiceData.students.push(this.invoiceData.studentId);
1217	}	1042	}
1218	},	1043	},
1219	displaySearch() {	1044	displaySearch() {

src/pages/Account/paymentTemplate.vue

Diff comments View file @c765369

 <template>
   <v-app id="pages-dasboard">
     <!-- ****** Edit multiple INVOICE ****** -->
     <v-snackbar
       :timeout="timeout"
       :top="y === 'top'"
       :right="x === 'right'"
       :vertical="mode === 'vertical'"
       v-model="snackbar"
       color="success"
     >{{ text }}</v-snackbar>
     <v-flex xs12 sm12>
       <v-container fluid grid-list-md>
         <v-layout wrap>
           <v-flex xs12 sm12 md4>
             <v-card flat class="mb-4">
               <v-toolbar dark class="card-styles" flat>
                 <v-spacer></v-spacer>
                 <h3>Profile</h3>
                 <v-spacer></v-spacer>
               </v-toolbar>
               <!-- Profile User-->
               <v-card-text>
                 <v-container>
                   <v-layout wrap>
                     <v-flex xs12>
                       <v-layout>
                         <v-flex
                           xs12
                           class="text-xs-center text-sm-center text-md-center text-lg-center"
                         >
                           <v-avatar size="80px">
                             <img src="/static/icon/user.png" v-if="!editPayment.profilePicUrl" />
                             <img
                               :src="editPayment.profilePicUrl"
                               v-else-if="editPayment.profilePicUrl"
                             />
                           </v-avatar>
                         </v-flex>
                       </v-layout>
                       <v-layout>
                         <v-flex xs12 sm12>
                           <h3 class="text-xs-center">
                             <b>{{ editPayment.studentId.name }}</b>
                           </h3>
                           <p class="text-xs-center grey--text">Student</p>
                         </v-flex>
                       </v-layout>
                       <v-layout style="border: 1px solid lightgrey;">
                         <v-flex xs6 sm6 class="pa-0">
                           <h4 class="right">
                             <b>Roll No :</b>
                           </h4>
                         </v-flex>
                         <v-flex sm6 xs6 class="pa-0">
                           <h4>{{ editPayment.studentId.rollNo }}</h4>
                         </v-flex>
                       </v-layout>
                       <v-layout style="border: 1px solid lightgrey;">
                         <v-flex xs6 sm6 class="pa-0">
                           <h4 class="right">
                             <b>Class :</b>
                           </h4>
                         </v-flex>
                         <v-flex sm6 xs6 class="pa-0">
                           <h4>{{ editPayment.classId.classNum }}</h4>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                   </v-layout>
                 </v-container>
               </v-card-text>
             </v-card>
             <!-- Account Fee Type List User-->
             <v-card flat>
               <v-toolbar dark class="card-styles" flat>
                 <v-spacer></v-spacer>
                 <v-toolbar-title>
                   <h3>Invoice</h3>
                 </v-toolbar-title>
                 <v-spacer></v-spacer>
               </v-toolbar>
               <v-form ref="form" v-model="valid" lazy-validation class="py-4">
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right">Payment Method:</label>
                   </v-flex>
                   <v-flex xs7 class="ml-3">
                     <v-select
                       :items="paymentMethods"
                       v-model="editPayment.paymentMethod"
                       label="Select Payment Method"
                     ></v-select>
                   </v-flex>
                 </v-layout>
                 <v-card-actions>
                   <v-spacer class="hidden-xs-only"></v-spacer>
                   <v-btn
                     color="open-dialog-button"
                     dark
                     class="right mt-3"
                     @click="update(editPayment)"
                   >Add Payment</v-btn>
                 </v-card-actions>
               </v-form>
             </v-card>
           </v-flex>
           <v-flex xs12 sm12 md8>
             <v-card>
               <v-toolbar dark class="card-styles" flat>
                 <v-spacer></v-spacer>
                 <v-toolbar-title>
                   <h3>Fee Type List</h3>
                 </v-toolbar-title>
                 <v-spacer></v-spacer>
               </v-toolbar>
               <table class="feeTypeTable tableRsponsive">
                 <tr class="info white--text">
                   <th>#</th>
                   <th>Fee Type</th>
                   <th>Amount</th>
                   <th>Discount(%)</th>
                   <th>Subtotal</th>
                   <th>Paid Amount</th>
                   <th>Action</th>
                 </tr>
                 <tr
                   v-for="(feeType, index) in editPayment.feeType"
                   :key="index"
                   v-on:keyup="getAmmountDetails(feeType,editPayment.feeType)"
                 >
                   <td style="width:40px">{{ index + 1 }}</td>
                   <td style="width:120px">{{ feeType.feeTypeName }}</td>
                   <td>
                     <v-text-field
                       placeholder="fill your Amount"
                       v-model="feeType.amount"
                       type="number"
                     ></v-text-field>
                   </td>
                   <td>
                     <v-text-field
                       placeholder="fill your Discount"
                       v-model="feeType.discount"
                       type="number"
                     ></v-text-field>
                   </td>
                   <td>{{ feeType.subTotal }}</td>
                   <td>
                     <v-text-field
                       placeholder="fill your Paid Amount"
                       v-model="feeType.paidAmount"
                       type="number"
                     ></v-text-field>
                   </td>
-                  <td>
+                  <td v-if="!editPayment.feeType">
                     <v-icon
                       color="error"
                       @click="deleteSelectFee(feeType,editPayment.feeType,index)"
                     >delete</v-icon>
                   </td>
                 </tr>
                 <tfoot v-if="feeType.amount != 0.00">
                   <tr>
                     <td colspan="2">Total:</td>
                     <td>{{ feeType.amount }}</td>
                     <td>{{ feeType.discount }}</td>
                     <td>{{ feeType.subTotal }}</td>
                     <td>{{ feeType.paidAmount }}</td>
                   </tr>
                 </tfoot>
                 <tfoot v-else-if="feeType.amount == 0.00">
                   <tr>
                     <td colspan="2">Total:</td>
                     <td>{{ editPayment.totalAmount }}</td>
                     <td>{{ editPayment.totalDiscount }}</td>
                     <td>{{ editPayment.totalSubTotal }}</td>
                     <td>{{ editPayment.totalPaidAmount }}</td>
                   </tr>
                 </tfoot>
               </table>
             </v-card>
           </v-flex>
         </v-layout>
       </v-container>
     </v-flex>
     <div class="loader" v-if="showLoader">
       <v-progress-circular indeterminate color="white"></v-progress-circular>
     </div>
   </v-app>
 </template>
 <script>
 import http from "@/Services/http.js";
 import moment from "moment";
 export default {
   props: ["editPayment"],
   data: () => ({
     snackbar: false,
     // showPayMethods: false,
     y: "top",
     x: "right",
     mode: "",
     timeout: 3000,
     text: "",
     showLoader: false,
     loading: false,
     date: null,
     search: "",
     // dialog: false,
     // dialog1: false,
     valid: true,
     validEdit: true,
     // isActive: true,
     // newActive: false,
     showFeeType: false,
     disabled: true,
     details: [],
     feeTypes: [],
     menu1: false,
     // invoiceData: {},
     paymentMethods: ["Cash", "Cheque"],
     feeType: {
       amount: "0.00",
       discount: "0.00",
       paidAmount: "0.00",
       subTotal: "0.00",
       feeTypeName: ""
     },
     feeTypeData: [],
     pagination: {
       rowsPerPage: 15
     },
     token: "",
     editedItem: {},
     invoiceParticularData: {},
     addclass: [],
     studentList: [],
     paymentStatus: [
       {
         name: "Not Paid",
         value: "NOT_PAID"
       },
       {
         name: "Partially Paid",
         value: "PARTIALLY_PAID"
       },
       {
         name: "Fully Paid",
         value: "FULLY_PAID"
       }
     ]
   }),
   // watch: {
   //   menu1(val) {
   //     val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
   //   }
   // },
   methods: {
     save(date) {
       this.$refs.menu1.save(date);
     },
     dates: function(date) {
       return moment(date).format("MMMM DD, YYYY");
     },
     update(editPayment) {
       // console.log("editPayment-----------", editPayment);
       let feeTypeId = "";
       for (let i = 0; i < this.feeTypes.length; i++) {
         if (this.feeTypes[i].feeType === this.feeType.feeTypeName) {
           feeTypeId = this.feeTypes[i]._id;
         }
       }
       // console.log(editPayment);
       let editInvoiceData = {
         invoiceId: editPayment._id,
         classId: editPayment.classNum,
         studentId: editPayment.sectionId,
         date: editPayment.date,
         paymentStatus: editPayment.paymentStatus,
         paymentMethod: editPayment.paymentMethod,
         feeType: editPayment.feeType,
         totalAmount: this.feeType.amount,
         totalDiscount: this.feeType.discount,
         totalSubTotal: this.feeType.subTotal,
         totalPaidAmount: this.feeType.paidAmount
       };
-      if (editInvoiceData.paymentStatus == "NOT_PAID") {
-        delete editInvoiceData.totalPaidAmount;
-      }
       if (feeTypeId == "") {
         delete editInvoiceData.feeType[0].feeTypeId;
       }
       if (editInvoiceData.paymentStatus == "NOT_PAID") {
         delete editInvoiceData.paymentMethod;
       }
-      if (editInvoiceData.paymentStatus == "NOT_PAID") {
+      if (editInvoiceData.totalPaidAmount == "0") {
-        delete invoiceData.totalPaidAmount;
+        if (editInvoiceData.paymentStatus == "NOT_PAID") {
-      }
+          delete editInvoiceData.totalPaidAmount;
-      if (this.feeType.subTotal == this.feeType.paidAmount) {
+        }
-        editInvoiceData.paymentStatus = "FULLY_PAID";
-        // console.log("FULLY_PAID");
       }
-      if (editInvoiceData.totalPaidAmount) {
+      console.log("editInvoiceData", editInvoiceData);
+      console.log(
+        "editInvoiceData.totalPaidAmount",
+        editInvoiceData.totalPaidAmount
+      );
+      if (editInvoiceData.totalPaidAmount != "0.00") {
+        if (this.feeType.subTotal == this.feeType.paidAmount) {
+          editInvoiceData.paymentStatus = "FULLY_PAID";
+        }
         if (this.feeType.subTotal != this.feeType.paidAmount) {
           editInvoiceData.paymentStatus = "PARTIALLY_PAID";
           // console.log("PARTIALLY_PAID");
         }
       }
       http()
         .put("/updateInvoice", editInvoiceData)
         .then(response => {
           // this.getInvoiceList();
           this.snackbar = true;
           this.text = "Payment added successfully";
           this.loading = false;
           this.$emit("update-Payment");
         })
         .catch(error => {
           console.log(error);
           this.snackbar = true;
           this.text = error.response.data.message;
           this.loading = false;
         });
     },
     clear() {
       this.$refs.form.reset();
     },
     // selectFeeType() {
     //   // console.log("clckkkkkkkkkkkkkkkkkk", this.feeType.feeTypeName);
     //   this.showFeeType = true;
     //   this.editPayment.feeType.push({ feeTypeName: this.feeType.feeTypeName });
     // },
     deleteSelectFee: function(feeTyp, feeTypeList, index) {
       this.editPayment.feeType.splice(index, 1);
       this.getAmmountDetails(feeTyp, feeTypeList);
       if (this.feeTypeData.length == 0) {
         this.feeType = {
           amount: "0.00",
           discount: "0.00",
           paidAmount: "0.00",
           subTotal: "0.00",
           feeTypeList: ""
         };
       }
     },
     getAllClasses() {
       http()
         .get("/getClassesList", {
           headers: { Authorization: "Bearer " + this.token }
         })
         .then(response => {
           this.addclass = response.data.data;
           this.getAllStudents();
         })
         .catch(error => {
           // 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);
             this.$store.dispatch("Role", null);
           }
         });
     },
     getAllStudents() {
       http()
         .get("/getStudentsList", {
           params: { classId: this.editPayment.classNum },
           headers: { Authorization: "Bearer " + this.token }
         })
         .then(response => {
           this.studentList = response.data.data;
         })
         .catch(err => {
           // console.log("err====>", err);
         });
     },
     getfeeType() {
       http()
         .get("/getFeesList", {
           headers: { Authorization: "Bearer " + this.token }
         })
         .then(response => {
           this.feeTypes = response.data.data;
         })
         .catch(err => {
           // console.log("err====>", err);
         });
     },
     getAmmountDetails(feeTyp, feeTypeList) {
       this.feeTypeData = feeTypeList;
       let feeType = {
         amount: "",
         discount: "",
         subTotal: "",
         subParticularTotal: "",
         paidAmount: ""
       };
       for (let i = 0; i < this.feeTypeData.length; i++) {
         // *********** AMOUNT ***********
-        feeType.amount =
+        if (this.feeTypeData[i].amount) {
-          Number(feeType.amount) + Number(this.feeTypeData[i].amount);
+          feeType.amount =
-        console.log("feeType.amount ", feeType.amount);
+            Number(feeType.amount) + Number(this.feeTypeData[i].amount);
-        this.feeType.amount = feeType.amount;
+          this.feeType.amount = feeType.amount;
-        this.feeType.subTotal = feeType.amount;
+          this.feeType.subTotal = feeType.amount;
-        this.feeTypeData[i].subTotal = this.feeTypeData[i].amount;
+          this.feeTypeData[i].subTotal = this.feeTypeData[i].amount;
+        } else if (this.feeTypeData[0].amount == "") {
+          this.feeType.amount = "0.00";
+          this.feeTypeData[i].subTotal = "0.00";
+          this.feeType.subTotal = "0.00";
+        } else if (this.feeTypeData[i].amount == "") {
+          this.feeType.amount =
+            Number(feeType.amount) + Number(this.feeTypeData[i].amount);
+          this.feeTypeData[i].subTotal =
+            Number(feeType.amount) + Number(this.feeTypeData[i].amount);
+          this.feeType.subTotal =
+            Number(feeType.amount) + Number(this.feeTypeData[i].amount);
+        }
         // *********** DISCOUNT ***********
         if (this.feeTypeData[i].discount) {
           feeType.discount =
             Number(feeType.discount) + Number(this.feeTypeData[i].discount);
-          console.log("feeType.discount", feeType.discount);
           this.feeType.discount = feeType.discount;
           feeType.subParticularTotal =
             this.feeTypeData[i].amount -
             (this.feeTypeData[i].amount * this.feeTypeData[i].discount) / 100;
-          console.log("feeType.subTotal", feeType.subTotal);
           this.feeTypeData[i].subTotal = feeType.subParticularTotal.toFixed(2);
+        } else if (this.feeTypeData[0].discount == "") {
+          this.feeType.discount = "0.00";
+        } else if (this.feeTypeData[i].discount == "") {
+          this.feeType.discount =
+            Number(feeType.discount) + Number(this.feeTypeData[i].discount);
         }
         // *********** SUBTOTAL ***********
-        feeType.subTotal =
+        if (this.feeTypeData[i].subTotal) {
-          Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal);
+          feeType.subTotal =
-        this.feeType.subTotal = feeType.subTotal.toFixed(2);
+            Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal);
+          this.feeType.subTotal = feeType.subTotal.toFixed(2);
+        }
         // *********** PAID-AMOUNT ***********
-        feeType.paidAmount =
+        if (this.feeTypeData[i].paidAmount) {
-          Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);
+          feeType.paidAmount =
-        this.feeType.paidAmount = feeType.paidAmount.toFixed(2);
+            Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);
+          this.feeType.paidAmount = feeType.paidAmount.toFixed(2);
+        } else if (this.feeTypeData[0].paidAmount == "") {
+          this.feeType.paidAmount = "0.00";
+        } else if (this.feeTypeData[i].paidAmount == "") {
+          this.feeType.paidAmount = feeType.paidAmount =
+            Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);
+        }
         // if paid Amount fill large of subtotal value so this condition are fixed filled subtotal value.
         if (feeType.paidAmount > feeType.subTotal) {
           this.feeTypeData[i].paidAmount = this.feeTypeData[i].subTotal;
           this.feeType.paidAmount = feeType.subTotal;
         }
       }
     }
     // getPayMethodList() {
     //   if (this.editPayment.paymentStatus == "PARTIALLY_PAID") {
     //     this.showPayMethods = true;
     //   } else if (this.editPayment.paymentStatus == "FULLY_PAID") {
     //     this.showPayMethods = true;
     //   } else {
     //     this.showPayMethods = false;
     //   }
     // }
   },
   mounted() {
     this.token = this.$store.state.token;
     this.getAllClasses();
     this.getfeeType();
   },
   created() {
     this.$root.$on("app:search", search => {
       this.search = search;
     });
   },
   beforeDestroy() {
     // dont forget to remove the listener
     this.$root.$off("app:search");
   }
 };
 </script>
 <style scoped>
 .active {
   background-color: gray;
   color: white !important;
 }
 .activebtn {
   color: black !important;
 }
 table {
   border-collapse: collapse;
   border: 1px solid #e2e7eb;
 }
 th,
 td {
   border: 1px solid #e2e7eb;
   padding: 10px;
   text-align: center;
 }
 table.feeTypeTable {
   table-layout: auto !important;
   width: 100% !important;
 }
 @media screen and (max-width: 380px) {

src/pages/Report/progressCardReport.vue

Diff comments View file @c765369

 <template>
   <v-container fluid class="body-color">
     <!-- ******  Progress Card Report Table****** -->
     <v-card flat class="elevation-0 transparent">
       <v-form ref="form" v-model="valid" lazy-validation>
         <v-flex xs12 sm12 lg12>
           <v-layout wrap>
             <v-flex xs12 sm12 lg3>
               <v-layout>
                 <v-flex xs3 sm6 lg2 class="subheading mt-4">
                   <label class="right">Class:</label>
                 </v-flex>
                 <v-flex xs9 sm6 lg8 class="ml-2">
                   <v-select
                     v-model="getReport.classId"
                     label="Select your class"
                     type="text"
                     :items="classList"
                     item-text="classNum"
                     item-value="_id"
                     :rules="classRules"
                     @change="getSections(getReport.classId)"
                     required
                   ></v-select>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12 sm12 lg3>
               <v-layout>
                 <v-flex xs3 sm6 lg2 class="subheading mt-4">
                   <label class="right">Section:</label>
                 </v-flex>
                 <v-flex xs9 sm6 lg8 class="ml-2">
                   <v-select
                     :items="addSection"
                     label="Select your Section"
                     v-model="getReport.sectionId"
                     item-text="name"
                     item-value="_id"
                     name="Select Section"
                     @change="getStudents"
                     :rules="sectionRules"
                     required
                   ></v-select>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12 sm12 lg3>
               <v-layout>
                 <v-flex xs3 sm6 lg2 class="subheading mt-4">
                   <label class="right">Student:</label>
                 </v-flex>
                 <v-flex xs9 sm6 lg8 class="ml-2">
                   <v-select
                     :items="getStudentsList"
                     label="Select your student"
                     v-model="getReport.studentId"
                     item-text="name"
                     item-value="_id"
                     :rules="studentRules"
-                    @change="selectAllStudent()"
                     required
                   ></v-select>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12 sm12 lg3 class="hidden-xs-only hidden-sm-only">
               <v-btn
                 @click="getMarkReportList"
                 round
                 dark
                 :loading="loading"
                 class="open-dialog-button mt-3"
               >Get Report</v-btn>
             </v-flex>
           </v-layout>
         </v-flex>
       </v-form>
     </v-card>
     <v-layout v-show="showReport">
       <v-flex xs12>
         <v-card class="transparent elevation-0">
           <!-- <v-layout>
             <v-flex xs12>
               <v-btn class="open-dialog-button right" round dark @click="printProgressReport()">
                 Print
                 <v-icon right dark>print</v-icon>
               </v-btn>
             </v-flex>
           </v-layout>-->
           <v-container grid-list-md v-show="showReport" class="report">
             <v-flex xs12 sm12 id="printMe">
+              <!-- {{filterData}} -->
               <v-layout wrap>
                 <!-- ****** TABLE DATA MARK  ****** -->
                 <v-flex xs12 sm12 md12>
                   <!-- <v-card
                     v-for="(value, id, index) in filterData"
                     :key="index"
                     :items="newData"
                     flat
                     style="border: 1px solid lightgrey;margin-bottom:14px;padding:20px"
                   >-->
                   <v-layout>
                     <v-flex xs12>
                       <v-btn class="open-dialog-button" round dark @click="printProgressReport()">
                         Print
                         <v-icon right dark>print</v-icon>
                       </v-btn>
                     </v-flex>
                   </v-layout>
                   <v-card flat style="border: 1px solid lightgrey;margin-bottom:14px;padding:20px">
                     <v-layout>
                       <v-flex xs12 sm12 md12>
                         <!-- {{userData}} -->
                         <div>
                           <div class="school-logo">
                             <!-- <img :src="userData.schoolLogoUrl" width="140" alt="logo" /> -->
                             <v-avatar>
                               <img :src="userData.schoolLogoUrl" v-if="userData.schoolLogoUrl" />
                               <img
                                 src="/static/schoolIcons/INTRACK_White.png"
                                 v-else-if="!userData.schoolLogoUrl"
                               />
                             </v-avatar>
                           </div>
                           <div class="school-name">
                             <h2>{{ userData.name }}</h2>
                           </div>
                         </div>
                         <hr
                           style="border:1px solid #ddd;
                           overflow: hidden;
                           vertical-align: middle;
                           margin-bottom: 4px;"
                         />
                         <div class="school-info">
                           <v-layout>
                             <v-flex xs5 class="pl-3">
                               <p style="font-size:20px;">{{ userData.name }}</p>
                               <p
                                 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
                               >{{ userData.address }}</p>
                               <p
                                 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
                               >{{ userData.mobile }}</p>
                               <p
                                 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
                               >{{ userData.email }}</p>
                             </v-flex>
                             <v-flex xs5>
                               <div v-if="cardData !=''">
                                 <p style="font-size:20px;">{{ cardData[0].studentId.name }}</p>
                                 <p
                                   style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
                                 >
                                   Class :
                                   <b>{{ cardData[0].classId.classNum }}</b>
                                 </p>
                                 <p
                                   style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
                                 >
                                   Section :
                                   <b>{{ cardData[0].sectionId.name }}</b>
                                 </p>
                                 <p
                                   style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
                                 >
                                   Roll NO :
                                   <b>{{ cardData[0].studentId.rollNo }}</b>
                                 </p>
                               </div>
                             </v-flex>
                             <v-flex xs2 v-if="cardData !=''">
                               <v-avatar size="100" style="padding-top:20px">
                                 <img
                                   src="/static/icon/user.png"
                                   v-if="!cardData[0].studentId.profilePicUrl"
                                 />
                                 <img
                                   :src="cardData[0].studentId.profilePicUrl"
                                   v-else-if="cardData[0].studentId.profilePicUrl"
                                 />
                               </v-avatar>
                             </v-flex>
                           </v-layout>
                         </div>
                       </v-flex>
                     </v-layout>
                     <v-card class="student-table" xs6 sm6 md6>
                       <table
                         v-for="(value, id, index) in filterData"
                         :key="index"
                         class="mb-5 tableRsponsive feeTypeTable subheading"
                         style="border: 1px solid black;
                         border-collapse: collapse;!important
                         table-layout: auto !important;
                         width: 100% !important;
                         overflow: hidden;"
                       >
                         <thead style="border: 1px solid transparent !important">
                           <tr style="border: 1px solid transparent !important">
                             <td
                               colspan="4"
                               style="text-align: inherit !important;
                               border-right: inherit;
                               border-top: inherit;
                               padding:14px;"
                             >{{value[0].examId.examName}}</td>
                           </tr>
                           <!-- <v-card-title class="subheading" colspan="4">{{value[0].examId.examName}}</v-card-title> -->
                           <tr style="border: 1px solid lightgrey !important;padding:4px;">
                             <td
                               rowspan="2"
                               style="border: 1px solid lightgrey !important;padding: 10px;"
                             >Subject</td>
                             <!-- <template v-for="studentData in  value"> -->
                             <!-- <td
                                 colspan="4"
                                 style="border: 1px solid lightgrey !important;padding: 10px;"
                               >{{value[0].examId.examName}}</td>
                               <td
                                 colspan="2"
                                 style="border: 1px solid lightgrey !important;padding: 10px;"
                               ></td>
                               <td
                                 colspan="2"
                                 style="border: 1px solid lightgrey !important;padding: 10px;"
                             >Total</td>-->
                             <!-- <td
                                 colspan="2"
                                 style="border: 1px solid lightgrey !important;padding: 10px;"
                             >Grade</td>-->
                             <!-- <td
                                 colspan="2"
                                 style="border: 1px solid lightgrey !important;padding: 10px;"
                             >Points</td>-->
                             <!-- <td
                                 colspan="2"
                                 v-for="studentMark in studentData.studentsMarks"
                                 style="border: 1px solid lightgrey !important;padding: 10px;"
                             >{{studentMark.markDistributionId.distributionType}}</td>-->
                             <!-- <td
                                 style="border: 1px solid lightgrey !important;padding: 10px;"
                             >Total Marks</td>-->
                             <!-- </template> -->
                             <!-- </tr> -->
                             <!-- <tr
                             v-for="(subject, ind) in value"
                             v-if="ind == 0"
                             style="border: 1px solid lightgrey !important;"
                             >-->
                             <!-- <template v-for="(exam, i) in subject.studentsMarks"> -->
                             <template v-for="studentData in  value">
                               <td
                                 colspan="2"
                                 v-for="studentMark in studentData.studentsMarks"
                                 style="border: 1px solid lightgrey !important;padding: 10px;"
                               >{{studentMark.markDistributionId.distributionType}}</td>
                               <td
                                 style="border: 1px solid lightgrey !important;padding: 10px;"
                               >Total Marks</td>
                               <!-- <td
                                 style="border: 1px solid lightgrey !important;padding: 10px;"
                               >Marks</td>
                               <td
                                 style="border: 1px solid lightgrey !important;padding: 10px;"
                               >Highest Marks</td>-->
                             </template>
                           </tr>
                           <tr
                             v-for="(subject, ind) in value"
                             v-if="ind == 0"
                             style="border: 1px solid lightgrey !important;"
                           >
                             <template v-for="(exam, i) in subject.studentsMarks">
                               <td
                                 style="border: 1px solid lightgrey !important;padding: 10px;"
                               >Marks</td>
                               <td
                                 style="border: 1px solid lightgrey !important;padding: 10px;"
                               >Highest Marks</td>
                             </template>
                           </tr>
                         </thead>
                         <tbody style="border: 1px solid lightgrey !important;">
                           <tr
                             v-for="subject in value"
                             style="border: 1px solid lightgrey !important;"
                           >
                             <td
                               style="border: 1px solid lightgrey !important;padding: 10px;"
                             >{{subject.subjectName}}</td>
                             <template v-for="(exam, i) in subject.studentsMarks">
                               <td
                                 style="border: 1px solid lightgrey !important;padding: 10px;"
                               >{{exam.marksScored}}</td>
                               <td
                                 style="border: 1px solid lightgrey !important;padding: 10px;"
                               >{{exam.markDistributionId.markValue}}</td>
                             </template>
                             <td
                               style="border: 1px solid lightgrey !important;padding: 10px;"
                             >{{subject.totalMarks}}</td>
                           </tr>
                         </tbody>
                         <!-- <tfoot>
                           <tr v-for="subject in value"
                             style="border: 1px solid lightgrey !important;">
                             <td colspan="5">
                               <span class="right subheding">Total Marks :</span>
                             </td>
                             <td
                                 style="border: 1px solid lightgrey !important;padding: 10px;"
                             >{{subject.totalMarks}}</td>
                           </tr>
                           <tr>
                             <td colspan="5">
                               <span class="right subheding">Average Mark :</span>
                             </td>
                             <td
                                 style="border: 1px solid lightgrey !important;padding: 10px;"
                             >{{subject.averageMark}}</td>
                           </tr>
                           <tr>
                             <td colspan="5">
                               <span class="right subheding">GPA :</span>
                             </td>
                             <td
                                 style="border: 1px solid lightgrey !important;padding: 10px;"
                             >{{subject.gpa}}</td>
                           </tr>
                         </tfoot>-->
                         <!-- <v-card> -->
                         <tr style="border: 1px solid lightgrey !important;">
                           <td colspan="5">
                             <span class="subheding">Total Marks</span>
                           </td>
                           <td
                             colspan="7"
                             style="border: 1px solid lightgrey !important;padding: 10px;"
                           >
                             <b>{{ totalMarks }}</b>
                           </td>
                         </tr>
                         <tr>
                           <td colspan="5">
-                            <span class="right subheding">Average Mark</span>
+                            <span class="subheding">Average Mark</span>
                           </td>
                           <td
                             colspan="7"
                             style="border: 1px solid lightgrey !important;padding: 10px;"
                           ></td>
                         </tr>
                         <tr>
                           <td colspan="5">
-                            <span class="right subheding">GPA</span>
+                            <span class="subheding">GPA</span>
                           </td>
                           <td
                             colspan="7"
                             style="border: 1px solid lightgrey !important;padding: 10px;"
                           ></td>
                         </tr>
                         <!-- </v-card> -->
                         <!-- <tbody style="border: 1px solid lightgrey !important;">
                         <tr
                           v-for="subject in value"
                           style="border: 1px solid lightgrey !important;"
                         >
                         <td style="border: 1px solid lightgrey !important;padding: 10px;"></td>-->
                         <!-- <td
                             style="border: 1px solid lightgrey !important;padding: 10px;"
                         >{{subject.subjectName}}</td>-->
                         <!-- <template v-for="(exam, i) in subject.studentsMarks">
                             <td
                               style="border: 1px solid lightgrey !important;padding: 10px;"
                             >{{exam.marksScored}}</td>
                             <td
                               style="border: 1px solid lightgrey !important;padding: 10px;"
                             >{{exam.markDistributionId.markValue}}</td>
                           </template>
                           <td
                             style="border: 1px solid lightgrey !important;padding: 10px;"
                           >{{subject.totalMarks}}</td>
                         </tr>
                         </tbody>-->
                       </table>
                     </v-card>
                   </v-card>
                 </v-flex>
               </v-layout>
             </v-flex>
           </v-container>
         </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>
 <script>
 import http from "@/Services/http.js";
 import moment from "moment";
 import _ from "underscore";
 export default {
   data: () => ({
     showLoader: false,
     cardData: [],
     token: "",
     markDistributions: [],
     markParticularDistributionData: [],
     loading: false,
     valid: true,
     loading: false,
     showReport: false,
     addSection: [],
     filterData: [],
     getStudentsList: [],
     classRules: [v => !!v || "Class is required"],
     sectionRules: [v => !!v || "Class is required"],
     studentRules: [v => !!v || "Student is required"],
     getReport: {},
     classList: [],
     output: null,
     userData: {},
     newData: [],
     gradeAPlus: "A+",
     gradeA: "A",
     gradeBPlus: "B+",
     gradeB: "B",
     gradeCPlus: "C+",
     gradeC: "C",
     totalMarks: ""
   }),
   mounted() {
     this.token = this.$store.state.token;
     this.getClass();
     this.getUserData();
   },
   methods: {
     clear() {
       this.$refs.form.reset();
     },
     getClass() {
       this.showLoader = true;
       http()
         .get("/getClassesList", {
           headers: { Authorization: "Bearer " + this.token }
         })
         .then(response => {
           this.classList = response.data.data;
           this.showLoader = false;
         })
         .catch(error => {
           this.showLoader = false;
           // console.log("err====>", err);
         });
     },
     getSections(_id) {
       this.showLoader = true;
       http()
         .get(
           "/getSectionsList",
           { params: { classId: _id } },
           {
             headers: { Authorization: "Bearer " + this.token }
           }
         )
         .then(response => {
           this.addSection = response.data.data;
           this.showLoader = false;
         })
         .catch(err => {
           this.showLoader = false;
           // console.log("err====>", err);
         });
     },
     getStudents() {
       this.showLoader = true;
       http()
         .get("/getStudentWithClass", {
           params: {
             classId: this.getReport.classId,
             sectionId: this.getReport.sectionId
           }
         })
         .then(response => {
           response.data.data.unshift({
             name: "Select All",
             _id: "Select All"
           });
           this.getStudentsList = response.data.data;
           this.showLoader = false;
           // console.log("getSectionsList=====>", response.data.data);
         })
         .catch(error => {
           console.log("err====>", error);
           this.showLoader = false;
         });
     },
-    selectAllStudent() {
-      // console.log("this.studentId", this.getReport.studentId);
-      // this.invoiceData.students = [];
-      if (this.getReport.studentId === "Select All") {
-        for (let i = 1; i < this.getStudentsList.length; i++) {
-          // this.invoiceData.students.push(this.getStudentsList[i]._id);
-          console.log("data", this.getStudentsList[i]._id);
-          // data.push(this.studentList[i]._id);
-          // console.log("data", data);
-        }
-      } else {
-        this.invoiceData.students.push(this.invoiceData.studentId);
-      }
-    },
     getMarkReportList() {
       // this.showLoader = true;
       this.showReport = true;
       // http()
       //   .get("/getParticularMark", {
       //     params: { studentId: this.getReport.studentId },
       //     headers: { Authorization: "Bearer " + this.token }
       //   })
       //   .then(response => {
       //     this.showLoader = false;
       //     this.cardData = response.data.data;
       //     let newData = response.data.data;
       //     for (var i = 0; i < newData.length; i++) {
       //       newData[i].examination = newData[i].examId._id;
       //     }
       //     this.filterData = _.groupBy(newData, ["examination"]);
       //     for (let data in this.filterData) {
       //       for (let item in this.filterData[data]) {
       //         var totalMarks = 0;
       //         for (
       //           let i = 0;
       //           i < this.filterData[data][item].studentsMarks.length;
       //           i++
       //         ) {
       //           totalMarks += this.filterData[data][item].studentsMarks[i]
       //             .marksScored;
       //         }
       //         this.filterData[data][item].totalMarks = totalMarks;
       //         var total = 0;
       //         total += this.filterData[data][item].totalMarks  ;
       //         console.log("total", total);
       //       }
       //     }
       //   })
+      // console.log(
+      //   "getReport.classId",
+      //   this.getReport.classId,
+      //   "getReport.sectionId",
+      //   this.getReport.sectionId,
+      //   "getReport.studentId",
+      //   this.getReport.studentId
+      // );
+      var getSelectMarks = {};
+      if (this.getReport.studentId == "Select All") {
+        getSelectMarks = {
+          classId: this.getReport.classId,
+          sectionId: this.getReport.sectionId
+        };
+      } else if(this.getReport.studentId != "Select All") {
+        getSelectMarks = {
+          classId: this.getReport.classId,
+          sectionId: this.getReport.sectionId,
+          studentId: this.getReport.studentId
+        };
+      }
       http()
         .get("/getParticularMark", {
-          params: { studentId: this.getReport.studentId },
+          params: getSelectMarks,
           headers: { Authorization: "Bearer " + this.token }
         })
         .then(response => {
           this.cardData = response.data.data;
           let newData = response.data.data;
           // console.log("newData", newData);
           for (var i = 0; i < newData.length; i++) {
             newData[i].examination = newData[i].examId._id;
           }
           this.filterData = _.groupBy(newData, ["examination"]);
           // console.log("this.filterData", this.filterData);
           for (let data in this.filterData) {
             for (let item in this.filterData[data]) {
               var totalMarks = 0;
               for (
                 let i = 0;
                 i < this.filterData[data][item].studentsMarks.length;
                 i++
               ) {
-                // console.log("this.filterData[data][item].studentsMarks[i]",this.filterData[data][item].studentsMarks[i]
-                //   .marksScored)
                 totalMarks += this.filterData[data][item].studentsMarks[i]
                   .marksScored;
               }
               this.filterData[data][item].totalMarks = totalMarks;
               console.log("totalMarks", totalMarks);
               this.totalMarks = totalMarks;
-              // console.log("this.filterData[data][item].grade", this.filterData[data][item].grade);
               if (totalMarks > 90) {
                 this.filterData[data][item].grade = this.gradeAPlus;
               } else if (totalMarks > 80 && totalMarks < 90) {
                 this.filterData[data][item].grade = this.gradeA;
               } else if (totalMarks > 70 && totalMarks < 80) {
                 this.filterData[data][item].grade = this.gradeBPlus;
               } else if (totalMarks > 60 && totalMarks < 70) {
                 this.filterData[data][item].grade = this.gradeB;
               } else if (totalMarks > 50 && totalMarks < 60) {
                 this.filterData[data][item].grade = this.gradeCPlus;
               } else if (totalMarks > 40 && totalMarks < 50) {
                 this.filterData[data][item].grade = this.gradeC;
               }
             }
           }
           this.showLoader = false;
         })
         .catch(error => {
           // console.log("err====>", err);
           this.showLoader = false;
           this.snackbar = true;
           // this.text = error.response.data.message;
           // if (error.response.status === 401) {
           //   this.$router.replace({ path: "/" });
           //   this.$store.dispatch("setToken", null);
           //   this.$store.dispatch("Id", null);
           // }
         });
     },
     printProgressReport() {
       // Pass the element id here
       this.$htmlToPaper("printMe");
     },
     getUserData() {
       http()
         .get("/getParticularUserDetail")
         .then(response => {
           this.userData = response.data.data;
         })
         .catch(error => {
           // if (error.response.status === 401) {
           //   this.$router.replace({ path: "/" });
           //   this.$store.dispatch("setToken", null);
           //   this.$store.dispatch("Id", null);
           // }
         });
     }
   }
 };
 </script>
 <style scoped>
 table {
   border-collapse: collapse;
   border: 1px solid #e2e7eb;
 }
 th,
 td {
   border: 1px solid #e2e7eb;
   padding: 10px;
   text-align: center;
 }
 table.feeTypeTable {
   table-layout: auto !important;
   width: 100% !important;
 }
 .bg-sky {
   background-color: #98b2cc !important;
 }
 .bg-sky-light {
   background-color: #89a0b8;
 }
 .bg-purple {
   background-color: #9583ac;
 }
 .bg-skyDark {
   background-color: #956785;
 }
 /* .report {
   overflow: hidden;
   max-width: 794px;
   margin: 0px auto;
   margin-bottom: 10px;
   padding: 30px;
 } */
 .line {
   border-bottom: 1px solid #ddd;
   overflow: hidden;
   padding-bottom: 10px;
   vertical-align: middle;
   margin-bottom: 4px;
 }
 .school-logo {
   float: left;
 }
 .school-name {
   box-sizing: border-box;
 }
 .school-info {
   width: 100%;
   overflow: hidden;
 }
 .school-address {