viithiisys / School-Management-dashboard

Browse Code »

Commit 728b5d417ab010325fb8c94d66148ce14309bb8a

Authored by Neeraj Sharma 2020-05-12 08:41:09 -0400

1 parent ff9003e131

Exists in master and in 3 other branches

solve bugs in add invoice

Showing 2 changed files with 18 additions and 13 deletions Show diff stats

src/pages/Account/invoice.vue

Diff comments View file @728b5d4

 <template>
   <v-container fluid class="body-color">
     <!-- ****** Edit INVOICE ****** -->
     <v-dialog v-model="editInvoiceDialog">
       <v-card flat class="text-xs-center white--text">
         <v-layout>
           <v-flex xs12 class="card-styles pa-2">
             <label class="title text-xs-center">Edit Invoice</label>
             <v-icon size="24" class="right white--text" @click="editInvoiceDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <editInvoice :editData="editData" @update-editInvoice="updateDoneInvoice" />
       </v-card>
     </v-dialog>
     <!-- ****PAYMENT INVOICE DIALOG -->
     <v-dialog v-model="paymentInvoiceDialog">
       <v-card flat class="text-xs-center white--text">
         <v-layout>
           <v-flex xs12 class="card-styles pa-2">
             <label class="title text-xs-center">Payment Template</label>
             <v-icon size="24" class="right white--text" @click="paymentInvoiceDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <paymentTemplate :editPayment="editPayment" @update-Payment="updatePayment" />
       </v-card>
     </v-dialog>
     <!-- ****** PROFILE VIEW SECTION DATA ******  -->
     <v-dialog v-model="dialog1" max-width="800px">
       <v-card flat class="text-xs-center white--text">
         <v-layout>
           <v-flex xs12 class="card-style pa-2">
             <label class="title text-xs-center">View Payments</label>
             <v-icon size="24" class="right" color="white" @click="dialog1 = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <table class="feeTypeTable tableRsponsive">
           <tr style="color: black">
             <th>#</th>
             <th>Date</th>
             <th>Paid By</th>
             <th>Payment Amount</th>
             <th>Weaver</th>
             <th>Action</th>
           </tr>
           <tr v-if="editedItem.paymentStatus !== 'NOT_PAID'">
             <td style="width:40px ; color:black" class="tdFeeType">1</td>
             <td style="width:120px; color:black" class="tdFeeType">{{dates( editedItem.date) }}</td>
             <td style="width:120px; color:black" class="tdFeeType">{{ editedItem.paymentMethod }}</td>
             <td style="width:120px; color:black" class="tdFeeType">{{ editedItem.totalPaidAmount }}</td>
             <td style="width:120px; color:black" class="tdFeeType">{{ editedItem.totalDiscount}}</td>
             <td class="text-xs-center td td-row">
               <router-link
                 :to="{ name:'View Payment Invoice',params: { viewPaymentInvoiceId:editedItem._id } }"
               >
                 <v-tooltip top>
                   <img
                     slot="activator"
                     style="cursor:pointer; width:25px; height:25px; "
                     class="mr-3"
                     src="/static/icon/view.png"
                   />
                   <span>View</span>
                 </v-tooltip>
               </router-link>
               <v-tooltip top>
                 <img
                   slot="activator"
                   style="cursor:pointer;width:20px; height:20px; "
                   class="mr-3"
                   @click="deletePayment(editedItem)"
                   src="/static/icon/delete.png"
                 />
                 <span>Delete</span>
               </v-tooltip>
             </td>
           </tr>
         </table>
       </v-card>
     </v-dialog>
     <!-- ****** Invoice Table ****** -->
     <v-toolbar color="transparent" flat>
       <v-btn
         fab
         dark
         class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
         small
         @click="addInvoiceDialog = true"
       >
         <v-icon dark>add</v-icon>
       </v-btn>
       <v-btn
         round
         class="open-dialog-button hidden-sm-only hidden-xs-only"
         dark
         @click="addInvoiceDialog = true"
       >
         <v-icon class="white--text pr-1" size="20">add</v-icon>Add Invoice
       </v-btn>
       <v-spacer></v-spacer>
       <v-card-title class="body-1" v-show="show">
         <v-btn icon large flat @click="displaySearch">
           <v-avatar size="27">
             <img src="/static/icon/search.png" alt="icon" />
           </v-avatar>
         </v-btn>
       </v-card-title>
       <v-flex xs8 sm8 md3 lg2 v-show="showSearch">
         <v-layout>
           <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>
           <v-icon @click="closeSearch" color="error">close</v-icon>
         </v-layout>
       </v-flex>
     </v-toolbar>
     <v-data-table
       :headers="headers"
       :items="invoiceList"
       :pagination.sync="pagination"
       :search="search"
     >
       <template slot="items" slot-scope="props">
         <tr class="tr">
           <td class="td td-row">{{ props.index + 1 }}</td>
           <td class="text-xs-center td td-row">{{ props.item.studentId.name }}</td>
           <td class="text-xs-center td td-row">{{ props.item.classId.classNum }}</td>
           <td class="text-xs-center td td-row">{{ props.item.totalAmount }}</td>
           <td class="text-xs-center td td-row">{{ props.item.totalDiscount}}</td>
           <td
             class="text-xs-center td td-row"
           >{{ props.item.totalPaidAmount ? props.item.totalPaidAmount : 0}}</td>
           <td
             class="text-xs-center td td-row"
           >{{ props.item.totalPaidAmount ? props.item.totalSubTotal - props.item.totalPaidAmount : props.item.totalSubTotal }}</td>
           <td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'NOT_PAID'">
             <span
               class="red lighten-1 py-1 px-2 white--text paymentStatus"
             >{{ props.item.paymentStatus }}</span>
           </td>
           <td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'FULLY_PAID'">
             <span
               class="green lighten-1 py-1 px-2 white--text paymentStatus"
             >{{ props.item.paymentStatus }}</span>
           </td>
           <td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'PARTIALLY_PAID'">
             <span
               class="yellow darken-3 py-1 px-2 white--text paymentStatus"
             >{{ props.item.paymentStatus }}</span>
           </td>
           <td class="text-xs-center td td-row">{{ dates(props.item.date) }}</td>
           <td class="text-xs-center td td-row">
             <router-link :to="{ name:'View Invoice',params: { viewInvoiceId:props.item._id } }">
               <v-tooltip top>
                 <img
                   slot="activator"
                   style="cursor:pointer; width:25px; height:25px; "
                   class="mr-3"
                   src="/static/icon/view.png"
                 />
                 <span>View</span>
               </v-tooltip>
             </router-link>
             <span v-if="props.item.paymentStatus === 'NOT_PAID'">
               <!-- <router-link :to="{ name: 'Edit Invoice',params: { invoiceid: editData._id } }">
                 <v-tooltip top>
                   <img
                     slot="activator"
                     style="cursor:pointer; width:20px; height:18px; "
                     class="mr-3"
                     @click="editItem(props.item)"
                     src="/static/icon/edit.png"
                   />
                   <span>Edit</span>
                 </v-tooltip>
               </router-link>-->
               <v-tooltip top>
                 <img
                   slot="activator"
                   style="cursor:pointer; width:20px; height:18px; "
                   class="mr-3"
                   @click="editItem(props.item)"
                   src="/static/icon/edit.png"
                 />
                 <span>Edit</span>
               </v-tooltip>
               <v-tooltip top>
                 <img
                   slot="activator"
                   style="cursor:pointer;width:20px; height:20px; "
                   class="mr-3"
                   @click="deleteItem(props.item)"
                   src="/static/icon/delete.png"
                 />
                 <span>Delete</span>
               </v-tooltip>
               <v-tooltip top>
                 <img
                   slot="activator"
                   style="cursor:pointer; width:20px; height:18px; "
                   class="mr-3"
                   @click="paymentItem(props.item)"
                   src="/static/schoolIcons/Account.png"
                 />
                 <span>Payment</span>
               </v-tooltip>
             </span>
             <span v-if="props.item.paymentStatus === 'PARTIALLY_PAID'">
               <v-tooltip top>
                 <img
                   slot="activator"
                   style="cursor:pointer; width:20px; height:18px; "
                   class="mr-3"
                   @click="paymentItem(props.item)"
                   src="/static/schoolIcons/Account.png"
                 />
                 <span>Payment</span>
               </v-tooltip>
             </span>
             <v-tooltip top>
               <img
                 slot="activator"
                 style="cursor:pointer; width:19px; height:19px;"
                 class="mr-3"
                 @click="profile(props.item)"
                 src="/static/icon/eye1.png"
               />
               <span>View Payment</span>
             </v-tooltip>
           </td>
         </tr>
       </template>
       <v-alert
         slot="no-results"
         :value="true"
         color="error"
         icon="warning"
       >Your search for "{{ search }}" found no results.</v-alert>
     </v-data-table>
     <!-- ****** ADD INVOICE ****** -->
     <v-snackbar
       :timeout="timeout"
       :top="y === 'top'"
       :right="x === 'right'"
       :vertical="mode === 'vertical'"
       v-model="snackbar"
       :color="color"
     >{{ text }}</v-snackbar>
     <v-dialog v-model="addInvoiceDialog">
       <v-card flat class="text-xs-center white--text">
         <v-layout>
           <v-flex xs12 class="card-styles pa-2">
             <label class="title text-xs-center">Add Invoice</label>
             <v-icon size="24" class="right white--text" @click="addInvoiceDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-flex xs12 sm12>
           <v-container fluid grid-list-md>
             <v-layout wrap>
               <v-flex xs12 sm12 md5>
                 <v-card flat>
                   <v-toolbar dark class="card-styles" flat>
                     <v-spacer></v-spacer>
                     <h3>Invoice</h3>
                     <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="invoiceData.classNum"
                           item-text="classNum"
                           item-value="_id"
                           @change="getAllStudents()"
                           :rules="classRules"
                           required
                         ></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 Student"
                           v-model="invoiceData.studentId"
                           item-text="name"
                           item-value="_id"
                           :rules="inchargeRules"
                           @change="selectAllStudent()"
                           required
                         ></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="invoiceData.date"
                           transition="scale-transition"
                           offset-y
                           full-width
                           min-width="290px"
                         >
                           <v-text-field
                             slot="activator"
                             :rules="dateRules"
                             v-model="invoiceData.date"
                             placeholder="Select date"
                           ></v-text-field>
                           <v-date-picker
                             v-model="invoiceData.date"
                             @input="$refs.menu1.save(invoiceData.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="invoiceData.paymentStatus"
                           item-text="name"
                           item-value="value"
                           label="Select Payment Status"
                           @change="getPayMethodList"
                           :rules="paymentStatusRules"
                           required
                         ></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="invoiceData.paymentMethod"
+                          :rules="paymentMethodRules"
                           label="Select Payment Method"
                           required
                         ></v-select>
                       </v-flex>
                     </v-layout>
                     <v-layout>
                       <v-flex xs12 sm11>
                         <v-card-actions>
                           <v-spacer></v-spacer>
                           <v-btn @click="clear" round dark class="clear-button">clear</v-btn>
                           <v-btn
                             @click="submit"
                             round
                             dark
                             :loading="loading"
                             class="add-button"
                           >Add</v-btn>
                         </v-card-actions>
                       </v-flex>
                     </v-layout>
                   </v-form>
                 </v-card>
               </v-flex>
               <v-flex xs12 sm12 md7>
                 <v-card>
                   <v-toolbar dark class="card-styles" flat>
                     <v-spacer></v-spacer>
                     <h3>Fee Type List</h3>
                     <v-spacer></v-spacer>
                   </v-toolbar>
                   <v-layout>
                     <v-flex xs4 sm2 class="mt-4 hidden-xs-only hidden-sm-only">
                       <label class="right title">Fee Type:</label>
                     </v-flex>
                     <v-flex xs8 sm4>
                       <v-select
                         :items="feeTypes"
                         v-model="feeType.feeTypeName"
                         item-text="feeType"
                         item-value="feeType"
                         label="Select Fee Type"
                         required
                       ></v-select>
                     </v-flex>
                     <v-flex xs4 sm6>
                       <v-btn
                         color="open-dialog-button"
                         round
                         dark
                         class="right mt-3"
                         @click="selectFeeType"
                       >ADD</v-btn>
                     </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-show="showFeeType"
                       v-for="(feeType, index) in feeTypeData"
                       :key="index"
                       v-on:keyup="getAmmountDetails(feeType)"
                     >
                       <td style="width:40px" class="tdFeeType">{{ index + 1 }}</td>
                       <td
                         style="width:120px"
                         class="tdFeeType"
                         :rules="feeTypeNameRules"
                       >{{ feeType.feeTypeName }}</td>
                       <td class="tdFeeType">
                         <v-text-field
                           placeholder="fill your Amount"
                           v-model="feeType.amount"
                           type="number"
                           :rules="amountRules"
                           required
                         ></v-text-field>
                       </td>
                       <td class="tdFeeType">
                         <v-text-field
                           placeholder="fill your Discount"
                           v-model="feeType.discount"
                           type="number"
                           :rules="discountRules"
                           required
                         ></v-text-field>
                       </td>
                       <td class="tdFeeType" :rules="subtotalRules">{{ feeType.subTotal }}</td>
                       <td class="tdFeeType" v-if="invoiceData.paymentStatus === 'NOT_PAID'">
                         <v-text-field
                           placeholder="fill your Paid Amount"
                           v-model="feeType.paidAmount"
                           type="number"
                           :disabled="disabled"
                         ></v-text-field>
                       </td>
                       <td class="tdFeeType" v-if="invoiceData.paymentStatus == ''">
                         <v-text-field
                           placeholder="fill your Paid Amount"
                           v-model="feeType.paidAmount"
                           type="number"
                           :disabled="disabled"
                         ></v-text-field>
                       </td>
                       <td
                         class="tdFeeType"
                         v-if="invoiceData.paymentStatus != 'NOT_PAID' && invoiceData.paymentStatus != ''"
                       >
                         <v-text-field
                           placeholder="fill your Paid Amount"
                           v-model="feeType.paidAmount"
                           type="number"
                         ></v-text-field>
                       </td>
                       <td class="tdFeeType">
                         <v-icon color="error" @click="deleteSelectFee(index)">delete</v-icon>
                       </td>
                     </tr>
                     <tfoot>
                       <tr>
                         <td colspan="2" class="tdFeeType">Total:</td>
                         <td class="tdFeeType">{{ feeType.amount }}</td>
                         <td class="tdFeeType">{{ feeType.discount }}</td>
                         <td class="tdFeeType">{{ feeType.subTotal }}</td>
                         <td class="tdFeeType">{{ feeType.paidAmount }}</td>
                         <td class="tdFeeType">
                           <v-icon color="error" @click="deleteSelectFee(index)">delete</v-icon>
                         </td>
                       </tr>
                     </tfoot>
                   </table>
                 </v-card>
               </v-flex>
             </v-layout>
           </v-container>
         </v-flex>
       </v-card>
     </v-dialog>
     <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 editInvoice from "./editInvoice";
 import paymentTemplate from "./paymentTemplate.vue";
 import moment from "moment";
 export default {
   components: {
     editInvoice: editInvoice,
     paymentTemplate: paymentTemplate
   },
   data: () => ({
     snackbar: false,
     showPayMethods: false,
     y: "top",
     x: "right",
     mode: "",
     timeout: 5000,
     text: "",
     color: "",
     show: true,
     showSearch: false,
     showLoader: false,
     loading: false,
     date: null,
     search: "",
     dialog: false,
     dialog1: false,
     valid: true,
     validEdit: true,
     isActive: true,
     newActive: false,
     showFeeType: true,
     addInvoiceDialog: false,
     editInvoiceDialog: false,
     paymentInvoiceDialog: false,
     disabled: true,
     details: [],
     feeTypes: [],
     invoiceData: [],
     editData: [],
     invoiceList: [],
     editPayment: {
       studentId: {
         name: "",
         rollNo: ""
       },
       classId: {
         classNum: ""
       }
     },
     menu1: false,
     paymentMethods: ["Cash", "Cheque"],
     feeType: {
       amount: "0.00",
       discount: "0.00",
       subTotal: "0.00",
       paidAmount: "0.00",
       feeTypeName: ""
     },
     feeTypeData: [],
     editFeeTypeData: [],
     paymentFeeTypeData: [],
     pagination: {
       rowsPerPage: 10
     },
     classRules: [v => !!v || " Class Name is required"],
     inchargeRules: [v => !!v || "Student Name is required"],
     dateRules: [v => !!v || " Date is required"],
     paymentStatusRules: [v => !!v || "Payment Status is required"],
     paymentMethodsRules: [v => !!v || "payment Method is required"],
     feeTypeRules: [v => !!v || "Fee Type  is required"],
     feeTypeNameRules: [v => !!v || "Fee Type Name is required"],
     amountRules: [v => !!v || "Amount is required"],
     discountRules: [v => !!v || "Discount is required"],
     subtotalRules: [v => !!v || "Subtotal is required"],
     paymentRules: [v => !!v || "Payment is required"],
     paidAmountRules: [v => !!v || "Paid Amount is required"],
+    paymentMethodRules: [],
     headers: [
       {
         text: "No",
         align: "",
         sortable: false,
         value: "No"
       },
       {
         text: "Student",
         value: "name",
         sortable: false,
         align: "center"
       },
       { text: "Class", value: "class", sortable: false, align: "center" },
       { text: "Total", value: "subtotal", sortable: false, align: "center" },
       {
         text: "Discount(%)",
         value: "discount",
         sortable: false,
         align: "center"
       },
       {
         text: "Paid Amount",
         value: "paidAmount",
         sortable: false,
         align: "center"
       },
       {
         text: "Balance",
         value: "Balance",
         sortable: false,
         align: "center"
       },
       {
         text: "Status",
         value: "paymentStatus",
         sortable: false,
         align: "center"
       },
       {
         text: "Date",
         value: "date",
         sortable: false,
         align: "center"
       },
       { text: "Action", value: "", sortable: false, align: "center" }
     ],
     studentId: {
       name: ""
     },
     token: "",
     editedItem: {},
     invoiceData: {
       paymentStatus: "",
       students: []
     },
     addclass: [],
     studentList: [],
     paymentStatus: [
       {
         name: "Not Paid",
         value: "NOT_PAID"
       },
       {
         name: "Partially Paid",
         value: "PARTIALLY_PAID"
       },
       {
         name: "Fully Paid",
         value: "FULLY_PAID"
       }
     ]
   }),
   methods: {
     save(date) {
       this.$refs.menu1.save(date);
     },
     dates: function(date) {
       return moment(date).format("MMMM DD, YYYY");
     },
     profile(item) {
       // console.log("item", item);
       this.editedIndex = this.invoiceList.indexOf(item);
       this.editedItem = Object.assign({}, item);
       console.log("editedItem", this.editedItem);
       this.dialog1 = true;
     },
     editItem(item) {
       this.editedIndex = this.invoiceList.indexOf(item);
       this.editData = Object.assign({}, item);
       this.editData.date = this.editData.date.slice(0, 10);
       // console.log("invoiceData", this.editData);
       this.editFeeTypeData = this.editData.feeType;
       this.editInvoiceDialog = true;
     },
     paymentItem(item) {
       // console.log("item", item);
       this.editedIndex = this.invoiceList.indexOf(item);
       this.editPayment = Object.assign({}, item);
       this.editPayment.date = this.editPayment.date.slice(0, 10);
       if (this.editPayment.paymentStatus == "NOT_PAID") {
         for (let i = 0; i < this.editPayment.feeType.length; i++) {
           this.editPayment.feeType[i].paidAmount = "0.00";
         }
       }
       // console.log("this.editPayment", this.editPayment);
       this.paymentFeeTypeData = this.editPayment.feeType;
       this.paymentInvoiceDialog = true;
     },
     deleteItem(item) {
       let deleteInvoice = {
         invoiceId: item._id
       };
       http()
         .delete(
           "/deleteInvoice",
           confirm("Are you sure you want to delete this?") && {
             params: deleteInvoice
           }
         )
         .then(response => {
           this.snackbar = true;
           this.text = "Successfully delete Existing Invoice";
           this.color = "green";
           this.dialog1 = false;
           this.getInvoiceList();
         })
         .catch(error => {
           // console.log(error);
         });
     },
     deletePayment(editedItem) {
       let deleteInvoice = {
         invoiceId: editedItem._id
       };
       http()
         .put(
           "/removePayment",
           deleteInvoice,
           confirm("Are you sure you want to delete this?") && {
             headers: {
               Authorization: "Bearer " + this.token
             }
           }
         )
         .then(response => {
           this.snackbar = true;
           this.text = "Successfully delete Existing Invoice";
           this.color = "green";
           this.dialog1 = false;
           this.getInvoiceList();
         })
         .catch(error => {
           // console.log(error);
         });
     },
     close() {
       this.dialog = false;
     },
     // totalAmount() {
     //   // console.log("this.feeType.paidAmount ", this.feeType.paidAmount);
     //   // console.log(
     //   //   "this.feeType.subTotalAAAAAAAAAAAAAAA ",
     //   //   this.feeType.subTotal
     //   // );
     //   if (this.feeType.paidAmount < this.feeType.subTotal) {
     //     console.log("this.feeType.subTotalBBBBBBBBBBB ", this.feeType.subTotal);
     //     this.feeType.paidAmount = this.feeType.subTotal;
     //     console.log(
     //       "this.feeType.paidAmount BBBBBBBBBBB",
     //       this.feeType.paidAmount
     //     );
     //   }
     // },
     submit() {
       let feeTypeId = "";
       for (let i = 0; i < this.feeTypes.length; i++) {
         if (this.feeTypes[i].feeType === this.feeType.feeTypeName) {
           feeTypeId = this.feeTypes[i]._id;
         }
       }
       if (this.$refs.form.validate()) {
         let invoiceData = {
           classId: this.invoiceData.classNum,
           students: this.invoiceData.students,
           date: this.invoiceData.date,
           paymentStatus: this.invoiceData.paymentStatus,
           paymentMethod: this.invoiceData.paymentMethod,
           feeType: this.feeTypeData,
           totalAmount: this.feeType.amount.toString(),
           totalDiscount: this.feeType.discount.toString(),
           totalSubTotal: this.feeType.subTotal,
           totalPaidAmount: this.feeType.paidAmount
         };
         // console.log("invoiceData", invoiceData);
         if (this.feeType.paidAmount != "0.00") {
           if (this.feeType.subTotal == this.feeType.paidAmount) {
             invoiceData.paymentStatus = "FULLY_PAID";
             console.log("FULLY_PAID");
           }
           if (invoiceData.totalPaidAmount) {
             if (this.feeType.subTotal != this.feeType.paidAmount) {
               invoiceData.paymentStatus = "PARTIALLY_PAID";
               console.log("PARTIALLY_PAID");
             }
           }
         } else if (this.feeType.paidAmount === "0.00") {
           invoiceData.paymentStatus = "NOT_PAID";
         }
         http()
           .post("/createInvoice", invoiceData)
           .then(response => {
             this.getInvoiceList();
             this.snackbar = true;
             this.text = "New Invoice added successfully";
             this.color = "green";
             this.clear();
             this.feeTypeData = [];
             if (this.feeTypeData.length == 0) {
               this.feeType = {
                 amount: "0.00",
                 discount: "0.00",
                 paidAmount: "0.00",
                 subTotal: "0.00",
                 feeTypeList: ""
               };
             }
             this.loading = false;
             this.addInvoiceDialog = false;
           })
           .catch(error => {
             this.snackbar = true;
             this.text = error.response.data.errors[0].messages[0];
             this.color = "error";
             this.loading = false;
           });
       }
     },
     clear() {
       this.$refs.form.reset();
     },
     getInvoiceList() {
       this.showLoader = true;
       http()
         .get("/getInvoicesList", {
           params: { schoolId: this.$store.state.schoolId },
           headers: { Authorization: "Bearer " + this.token }
         })
         .then(response => {
           this.invoiceList = response.data.data;
           this.showLoader = false;
         })
         .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);
           }
         });
     },
     selectFeeType() {
       this.showFeeType = true;
       this.feeTypeData.push({ feeTypeName: this.feeType.feeTypeName });
     },
     deleteSelectFee: function(index) {
       console.log("---index----", index);
       this.feeTypeData.splice(index, 1);
       for (let i = 0; i < this.feeTypeData.length; i++) {
         console.log("this.feeTypeData[i]", this.feeTypeData[i]);
         if (this.feeTypeData[i].paidAmount) {
           this.feeType = {
             amount: this.feeTypeData[i].amount,
             discount: this.feeTypeData[i].discount,
             subTotal: this.feeTypeData[i].subTotal,
             paidAmount: this.feeTypeData[i].paidAmount
           };
         } else {
           this.feeType = {
             amount: this.feeTypeData[i].amount,
             discount: this.feeTypeData[i].discount,
             subTotal: this.feeTypeData[i].subTotal,
             paidAmount: "0.00"
           };
         }
       }
       if (this.feeTypeData.length == 0) {
         this.feeType = {
           amount: "0.00",
           discount: "0.00",
           paidAmount: "0.00",
           subTotal: "0.00",
           feeTypeName: ""
         };
       }
     },
     getAllClasses() {
       http()
         .get("/getClassesList", {
           params: { schoolId: this.$store.state.schoolId },
           headers: { Authorization: "Bearer " + this.token }
         })
         .then(response => {
           this.addclass = response.data.data;
         })
         .catch(err => {
           // console.log("err====>", err);
           // this.$router.replace({ path: "/" });
         });
     },
     getAllStudents() {
       this.showLoader = true;
       http()
         .get("/getStudentsList", {
           params: {
             classId: this.invoiceData.classNum,
             schoolId: this.$store.state.schoolId
           },
           headers: { Authorization: "Bearer " + this.token }
         })
         .then(response => {
           response.data.data.unshift({
             name: "Select All",
             _id: "Select All"
           });
           this.studentList = response.data.data;
           this.showLoader = false;
         })
         .catch(err => {
           this.showLoader = false;
           // console.log("err====>", err);
           // this.$router.replace({ path: "/" });
         });
     },
     getfeeType() {
       http()
         .get("/getFeesList", {
           params: {
             schoolId: this.$store.state.schoolId
           },
           headers: { Authorization: "Bearer " + this.token }
         })
         .then(response => {
           this.feeTypes = response.data.data;
         })
         .catch(err => {
           // console.log("err====>", err);
           // this.$router.replace({ path: "/" });
         });
     },
     getAmmountDetails(feeTyp) {
       let feeType = {
         amount: "0.00",
         discount: "0.00",
         subTotal: "0.00",
         subParticularTotal: "0.00",
         paidAmount: ""
       };
       for (let i = 0; i < this.feeTypeData.length; i++) {
         // *********** AMOUNT ***********
         if (this.feeTypeData[i].amount) {
           feeType.amount =
             Number(feeType.amount) + Number(this.feeTypeData[i].amount);
           this.feeType.amount = feeType.amount;
           this.feeType.subTotal = feeType.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);
           this.feeType.discount = feeType.discount;
           feeType.subParticularTotal =
             this.feeTypeData[i].amount -
             (this.feeTypeData[i].amount * this.feeTypeData[i].discount) / 100;
           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 ***********
         if (this.feeTypeData[i].subTotal) {
           feeType.subTotal =
             Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal);
           this.feeType.subTotal = feeType.subTotal.toFixed(2);
         }
         // *********** PAID-AMOUNT ***********
         if (this.feeTypeData[i].paidAmount) {
           feeType.paidAmount =
             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.invoiceData.paymentStatus == "PARTIALLY_PAID") {
         this.showPayMethods = true;
+        this.paymentMethodRules = [v => !!v || "Payment Method is required"];
       } else if (this.invoiceData.paymentStatus == "FULLY_PAID") {
         this.showPayMethods = true;
+        this.paymentMethodRules = [v => !!v || "Payment Method is required"];
       } else if (this.invoiceData.paymentStatus == "NOT_PAID") {
         for (let i = 0; i < this.feeTypeData.length; i++) {
           this.feeTypeData[i].paidAmount = "0.00";
           this.feeType.paidAmount = "0.00";
         }
+        this.paymentMethodRules = "";
+        this.showPayMethods = false;
       } else {
         this.showPayMethods = false;
       }
     },
     selectAllStudent() {
       this.invoiceData.students = [];
       if (this.invoiceData.studentId === "Select All") {
         for (let i = 1; i < this.studentList.length; i++) {
           this.invoiceData.students.push(this.studentList[i]._id);
           console.log("data", this.invoiceData.students);
           // data.push(this.studentList[i]._id);
           // console.log("data", data);
         }
       } else {
         this.invoiceData.students.push(this.invoiceData.studentId);
       }
     },
     displaySearch() {
       this.show = false;
       this.showSearch = true;
     },
     closeSearch() {
       this.showSearch = false;
       this.show = true;
       this.search = "";
     },
     updateDoneInvoice() {
       this.editInvoiceDialog = false;
       this.getInvoiceList();
     },
     updatePayment() {
       this.paymentInvoiceDialog = false;
       this.getInvoiceList();
       this.snackbar = true;
       this.text = "Payment added successfully";
       this.color = "green";
     }
   },
   mounted() {
     this.token = this.$store.state.token;
     this.getInvoiceList();
     this.getAllClasses();
     this.getfeeType();
     this.getAllStudents();
   }
 };
 </script>
 <style scoped>
 table {
   border-collapse: collapse;
   border: 1px solid #e2e7eb;
 }
 th,
 .tdFeeType {
   border: 1px solid #e2e7eb;
   padding: 10px;
   text-align: center;
 }
 table.feeTypeTable {
   table-layout: auto !important;
   width: 100% !important;
 }
 </style>

src/pages/Report/progressCardReport.vue

Diff comments View file @728b5d4

 <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"
                     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-container grid-list-md v-show="showReport" class="report">
             <v-flex xs12 sm12 id="printMe">
               <v-layout wrap>
                 <!-- ****** TABLE DATA MARK  ****** -->
                 <v-flex xs12 sm12 md12>
                   <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-flex xs12 v-for="(value, id, index) in filterData" :key="index" flat>
                     <!-- Index Loop Start -->
                     <v-card
                       v-for="(studentMark,i) in value"
                       :key="i"
                       class="pa-3 ma-3"
                       style="border: 1px solid lightgrey;margin-bottom:14px;padding:20px"
                     >
                       <!-- Profile School -->
                       <v-layout>
                         <v-flex xs12 sm12 md12>
                           <div>
                             <div class="school-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>
                               <!-- Profile Student Report Card-->
                               <v-flex xs5>
                                 <div v-if="cardData !=''">
                                   <p style="font-size:20px;">{{ studentMark.studentId.name }}</p>
                                   <p
                                     style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
                                   >
                                     Class :
                                     <b>{{ studentMark.classId.classNum }}</b>
                                   </p>
                                   <p
                                     style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
                                   >
                                     Section :
                                     <b>{{ studentMark.sectionId.name }}</b>
                                   </p>
                                   <p
                                     style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
                                   >
                                     Roll NO :
                                     <b>{{ studentMark.studentId.rollNo }}</b>
                                   </p>
                                 </div>
                               </v-flex>
                               <v-flex xs2>
                                 <v-avatar size="100" style="padding-top:20px">
                                   <img
                                     src="/static/icon/user.png"
                                     v-if="!studentMark.studentId.profilePicUrl"
                                   />
                                   <img
                                     :src="studentMark.studentId.profilePicUrl"
                                     v-else-if="studentMark.studentId.profilePicUrl"
                                   />
                                 </v-avatar>
                               </v-flex>
                             </v-layout>
                           </div>
                         </v-flex>
                       </v-layout>
-                      <!-- {{studentMark.examId.examName}} -->
                       <!-- Start Table Report Marks -->
                       <v-card class="student-table">
                         <table
                           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;"
                               >{{studentMark.examId.examName}}</td>
                             </tr>
                             <tr style="border: 1px solid lightgrey !important;padding:4px;">
                               <td
                                 rowspan="2"
                                 style="border: 1px solid lightgrey !important;padding: 10px;"
                               >Subject</td>
                               <template>
                                 <td
                                   v-for="(studentMarkData,i) in studentMark.studentsMarks"
                                   :key="i"
                                   colspan="2"
                                   style="border: 1px solid lightgrey !important;padding: 10px;"
                                 >{{studentMarkData.markDistributionId.distributionType}}</td>
                                 <td
                                   style="border: 1px solid lightgrey !important;padding: 10px;"
                                 >Total Marks</td>
                               </template>
                             </tr>
                             <tr style="border: 1px solid lightgrey !important;">
                               <template v-for="(exam, ind) in studentMark.studentsMarks">
                                 <td
                                   :key="ind"
                                   style="border: 1px solid lightgrey !important;padding: 10px;"
                                 >Marks</td>
                                 <td
                                   :key="ind"
                                   style="border: 1px solid lightgrey !important;padding: 10px;"
                                 >Highest Marks</td>
                               </template>
                             </tr>
                           </thead>
                           <tbody style="border: 1px solid lightgrey !important;">
                             <tr>
                               <td
                                 style="border: 1px solid lightgrey !important;padding: 10px;"
                               >{{studentMark.subjectName}}</td>
                               <template v-for="(exam, index) in  studentMark.studentsMarks">
                                 <td
                                   :key="index"
                                   style="border: 1px solid lightgrey !important;padding: 10px;"
                                 >{{exam.marksScored}}</td>
                                 <td
                                   :key="index"
                                   style="border: 1px solid lightgrey !important;padding: 10px;"
                                 >{{exam.markDistributionId.markValue}}</td>
                               </template>
                               <td
                                 style="border: 1px solid lightgrey !important;padding: 10px;"
                               >{{studentMark.totalMarks}}</td>
                             </tr>
                           </tbody>
                           <tfoot>
                             <tr style="border: 1px solid lightgrey !important;">
-                              <td colspan="5">
+                              <td
-                                <span class="subheding">Total Marks</span>
+                                colspan="5"
-                              </td>
+                                style="text-align:center"
+                                class="subheding"
+                              >Total Marks</td>
                               <td
                                 colspan="7"
                                 style="border: 1px solid lightgrey !important;padding: 10px;"
                               >{{ studentMark.totalMarks }}</td>
                             </tr>
                             <tr>
-                              <td colspan="5">
+                              <td colspan="5" style="text-align:center" class="subheding">Grade</td>
-                                <span class="subheding">Grade</span>
-                              </td>
                               <td
                                 colspan="7"
                                 style="border: 1px solid lightgrey !important;padding: 10px;"
                               >{{ studentMark.grade }}</td>
                             </tr>
                             <tr>
-                              <td colspan="5">
+                              <td
-                                <span class="subheding">Average Mark</span>
+                                colspan="5"
-                              </td>
+                                style="text-align:center"
+                                class="subheding"
+                              >Average Mark</td>
                               <td
                                 colspan="7"
                                 style="border: 1px solid lightgrey !important;padding: 10px;"
                               ></td>
                             </tr>
                             <tr>
-                              <td colspan="5">
+                              <td colspan="5" style="text-align:center" class="subheding">GPA</td>
-                                <span class="subheding">GPA</span>
-                              </td>
                               <td
                                 colspan="7"
                                 style="border: 1px solid lightgrey !important;padding: 10px;"
                               ></td>
                             </tr>
                           </tfoot>
                         </table>
                       </v-card>
                     </v-card>
                   </v-flex>
                 </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;
         });
     },
     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: 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++
               ) {
                 totalMarks += this.filterData[data][item].studentsMarks[i]
                   .marksScored;
               }
               this.filterData[data][item].totalMarks = totalMarks;
               console.log("totalMarks", totalMarks);
               this.totalMarks = totalMarks;
               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 {
   float: left;
   width: 40%;
 }
 .student-data {
   float: right;
   width: 40%;
 }
 .student-info {
   float: left;
 }
 @media screen and (max-width: 380px) {
   .tableRsponsive {
     /* display: block; */
     position: relative;