viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 3e79b2f9fa89ee8e02bc29c53cf1d71217afb635

Authored by Neeraj Sharma
1 parent 88868752be
Exists in master and in 3 other branches amber-development, development, ui-design

implement functionality <v-layout>

Showing 3 changed files with 792 additions and 115 deletions   Show diff stats
src/pages/Account/invoice.vue
Diff comments   View file @3e79b2f
... ... @@ -22,7 +22,7 @@
22 22 <v-icon size="24" class="right white--text" @click="paymentInvoiceDialog = false">cancel</v-icon>
23 23 </v-flex>
24 24 </v-layout>
25   - <v-flex xs12 sm12>
  25 + <!-- <v-flex xs12 sm12>
26 26 <v-container fluid grid-list-md>
27 27 <v-layout wrap>
28 28 <v-flex xs12 sm12 md4>
... ... @@ -201,7 +201,8 @@
201 201 </v-flex>
202 202 </v-layout>
203 203 </v-container>
204   - </v-flex>
  204 + </v-flex>-->
  205 + <paymentTemplate :editPayment="editPayment" />
205 206 </v-card>
206 207 </v-dialog>
207 208  
... ... @@ -692,11 +693,13 @@
692 693 <script>
693 694 import http from "@/Services/http.js";
694 695 import editInvoice from "./editInvoice";
  696 +import paymentTemplate from "./paymentTemplate.vue";
695 697 import moment from "moment";
696 698  
697 699 export default {
698 700 components: {
699   - editInvoice: editInvoice
  701 + editInvoice: editInvoice,
  702 + paymentTemplate: paymentTemplate
700 703 },
701 704 data: () => ({
702 705 snackbar: false,
... ... @@ -866,6 +869,7 @@ export default {
866 869 // console.log("item", item);
867 870 this.editedIndex = this.invoiceList.indexOf(item);
868 871 this.editPayment = Object.assign({}, item);
  872 + this.editPayment.date = this.editPayment.date.slice(0, 10);
869 873 this.paymentFeeTypeData = this.editPayment.feeType;
870 874 this.paymentInvoiceDialog = true;
871 875 },
... ... @@ -989,40 +993,40 @@ export default {
989 993 });
990 994 }
991 995 },
992   - add() {
993   - var updatePayment = {
994   - invoiceId: this.editPayment._id,
995   - // totalPaidAmount: this.editPayment.paidAmount
996   - classId: this.editPayment.classNum,
997   - students: this.editPayment.students,
998   - date: this.editPayment.date,
999   - paymentStatus: this.editPayment.paymentStatus,
1000   - paymentMethod: this.editPayment.paymentMethod,
1001   - feeType: this.feeTypeData,
1002   - totalAmount: this.feeType.amount,
1003   - totalDiscount: this.feeType.discount,
1004   - totalSubTotal: this.feeType.subTotal,
1005   - totalPaidAmount: this.feeType.paidAmount
1006   - };
1007   - http()
1008   - .put("/updateInvoice", updatePayment, {
1009   - headers: {
1010   - Authorization: "Bearer " + this.token
1011   - }
1012   - })
1013   - .then(response => {
1014   - this.getInvoiceList();
1015   - this.snackbar = true;
1016   - this.text = response.data.message;
1017   - this.color = "green";
1018   - this.paymentInvoiceDialog = false;
1019   - })
1020   - .catch(error => {
1021   - console.log("error", error);
1022   - this.snackbar = true;
1023   - this.color = "red";
1024   - });
1025   - },
  996 + // add() {
  997 + // var updatePayment = {
  998 + // invoiceId: this.editPayment._id,
  999 + // // totalPaidAmount: this.editPayment.paidAmount
  1000 + // classId: this.editPayment.classNum,
  1001 + // students: this.editPayment.students,
  1002 + // date: this.editPayment.date,
  1003 + // paymentStatus: this.editPayment.paymentStatus,
  1004 + // paymentMethod: this.editPayment.paymentMethod,
  1005 + // feeType: this.feeTypeData,
  1006 + // totalAmount: this.feeType.amount,
  1007 + // totalDiscount: this.feeType.discount,
  1008 + // totalSubTotal: this.feeType.subTotal,
  1009 + // totalPaidAmount: this.feeType.paidAmount
  1010 + // };
  1011 + // http()
  1012 + // .put("/updateInvoice", updatePayment, {
  1013 + // headers: {
  1014 + // Authorization: "Bearer " + this.token
  1015 + // }
  1016 + // })
  1017 + // .then(response => {
  1018 + // this.getInvoiceList();
  1019 + // this.snackbar = true;
  1020 + // this.text = response.data.message;
  1021 + // this.color = "green";
  1022 + // this.paymentInvoiceDialog = false;
  1023 + // })
  1024 + // .catch(error => {
  1025 + // console.log("error", error);
  1026 + // this.snackbar = true;
  1027 + // this.color = "red";
  1028 + // });
  1029 + // },
1026 1030 clear() {
1027 1031 this.$refs.form.reset();
1028 1032 },
... ... @@ -1121,7 +1125,8 @@ export default {
1121 1125 });
1122 1126 },
1123 1127  
1124   - getAmmountDetails(feeTyp) {
  1128 + getAmmountDetails(feeTyp, paymentFeeTypeData) {
  1129 + this.feeTypeData = paymentFeeTypeData;
1125 1130 let feeType = {
1126 1131 amount: "",
1127 1132 discount: "",
... ...
src/pages/Account/paymentTemplate.vue
Diff comments   View file @3e79b2f
... ... @@ -0,0 +1,602 @@
  1 +<template>
  2 + <v-app id="pages-dasboard">
  3 + <!-- ****** Edit multiple INVOICE ****** -->
  4 +
  5 + <v-snackbar
  6 + :timeout="timeout"
  7 + :top="y === 'top'"
  8 + :right="x === 'right'"
  9 + :vertical="mode === 'vertical'"
  10 + v-model="snackbar"
  11 + color="success"
  12 + >{{ text }}</v-snackbar>
  13 + <v-flex xs12 sm12>
  14 + <v-container fluid grid-list-md>
  15 + <v-layout wrap>
  16 + <v-flex xs12 sm12 md4>
  17 + <v-card flat class="mb-4">
  18 + <v-toolbar dark class="card-styles" flat>
  19 + <v-spacer></v-spacer>
  20 + <h3>Profile</h3>
  21 + <v-spacer></v-spacer>
  22 + </v-toolbar>
  23 + <v-card-text>
  24 + <v-container>
  25 + <v-layout wrap>
  26 + <v-flex xs12>
  27 + <v-layout>
  28 + <v-flex
  29 + xs12
  30 + class="text-xs-center text-sm-center text-md-center text-lg-center"
  31 + >
  32 + <v-avatar size="80px">
  33 + <img src="/static/icon/user.png" v-if="!editPayment.profilePicUrl" />
  34 + <img
  35 + :src="editPayment.profilePicUrl"
  36 + v-else-if="editPayment.profilePicUrl"
  37 + />
  38 + </v-avatar>
  39 + </v-flex>
  40 + </v-layout>
  41 + <v-layout>
  42 + <v-flex xs12 sm12>
  43 + <h3 class="text-xs-center">
  44 + <b>{{ editPayment.studentId.name }}</b>
  45 + </h3>
  46 + <p class="text-xs-center grey--text">Student</p>
  47 + </v-flex>
  48 + </v-layout>
  49 + <v-layout style="border: 1px solid lightgrey;">
  50 + <v-flex xs6 sm6 class="pa-0">
  51 + <h4 class="right">
  52 + <b>Roll No :</b>
  53 + </h4>
  54 + </v-flex>
  55 + <v-flex sm6 xs6 class="pa-0">
  56 + <h4>{{ editPayment.studentId.rollNo }}</h4>
  57 + </v-flex>
  58 + </v-layout>
  59 + <v-layout style="border: 1px solid lightgrey;">
  60 + <v-flex xs6 sm6 class="pa-0">
  61 + <h4 class="right">
  62 + <b>Class :</b>
  63 + </h4>
  64 + </v-flex>
  65 + <v-flex sm6 xs6 class="pa-0">
  66 + <h4>{{ editPayment.classId.classNum }}</h4>
  67 + </v-flex>
  68 + </v-layout>
  69 + </v-flex>
  70 + </v-layout>
  71 + </v-container>
  72 + </v-card-text>
  73 + </v-card>
  74 + <v-card flat>
  75 + <v-toolbar dark class="card-styles" flat>
  76 + <v-spacer></v-spacer>
  77 + <v-toolbar-title>
  78 + <h3>Invoice</h3>
  79 + </v-toolbar-title>
  80 + <v-spacer></v-spacer>
  81 + </v-toolbar>
  82 + <v-form ref="form" v-model="valid" lazy-validation class="py-4">
  83 + <!-- <v-layout>
  84 + <v-flex xs4 class="pt-4 subheading">
  85 + <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
  86 + <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
  87 + </v-flex>
  88 + <v-flex xs6 class="ml-3">
  89 + <v-select
  90 + :items="addclass"
  91 + label="Select Class"
  92 + v-model="editPayment.classId"
  93 + item-text="classNum"
  94 + item-value="_id"
  95 + @change="getAllStudents()"
  96 + ></v-select>
  97 + </v-flex>
  98 + </v-layout>
  99 + <v-layout>
  100 + <v-flex xs4 class="pt-4 subheading">
  101 + <label class="right hidden-xs-only hidden-sm-only">Select Student:</label>
  102 + <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Student:</label>
  103 + </v-flex>
  104 + <v-flex xs6 class="ml-3">
  105 + <v-select
  106 + :items="studentList"
  107 + label="Select Incharge"
  108 + v-model="editPayment.studentId"
  109 + item-text="name"
  110 + item-value="_id"
  111 + ></v-select>
  112 + </v-flex>
  113 + </v-layout>
  114 + <v-layout>
  115 + <v-flex xs4 class="pt-4 subheading">
  116 + <label class="right">Date:</label>
  117 + </v-flex>
  118 + <v-flex xs6 class="ml-3">
  119 + <v-menu
  120 + ref="menu1"
  121 + :close-on-content-click="false"
  122 + v-model="menu1"
  123 + :nudge-right="40"
  124 + lazy
  125 + :return-value.sync="editPayment.date"
  126 + transition="scale-transition"
  127 + offset-y
  128 + full-width
  129 + min-width="290px"
  130 + >
  131 + <v-text-field
  132 + slot="activator"
  133 + v-model="editPayment.date"
  134 + placeholder="Select date"
  135 + ></v-text-field>
  136 + <v-date-picker
  137 + v-model="editPayment.date"
  138 + @input="$refs.menu1.save(editPayment.date)"
  139 + ></v-date-picker>
  140 + </v-menu>
  141 + </v-flex>
  142 + </v-layout>
  143 + <v-layout>
  144 + <v-flex xs4 class="pt-4 subheading">
  145 + <label class="right hidden-xs-only hidden-sm-only">Payment Status:</label>
  146 + <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Payment:</label>
  147 + </v-flex>
  148 + <v-flex xs6 class="ml-3">
  149 + <v-select
  150 + :items="paymentStatus"
  151 + v-model="editPayment.paymentStatus"
  152 + item-text="name"
  153 + item-value="value"
  154 + label="Select Payment Status"
  155 + @change="getPayMethodList"
  156 + ></v-select>
  157 + </v-flex>
  158 + </v-layout>-->
  159 + <v-layout>
  160 + <v-flex xs4 class="pt-4 subheading">
  161 + <label class="right">Payment Method:</label>
  162 + </v-flex>
  163 + <v-flex xs7 class="ml-3">
  164 + <v-select
  165 + :items="paymentMethods"
  166 + v-model="editPayment.paymentMethod"
  167 + label="Select Payment Method"
  168 + ></v-select>
  169 + </v-flex>
  170 + </v-layout>
  171 + <v-card-actions>
  172 + <v-spacer class="hidden-xs-only"></v-spacer>
  173 + <v-btn
  174 + color="open-dialog-button"
  175 + dark
  176 + class="right mt-3"
  177 + @click="update(editPayment)"
  178 + >Add Payment</v-btn>
  179 + </v-card-actions>
  180 + </v-form>
  181 + </v-card>
  182 + </v-flex>
  183 + <v-flex xs12 sm12 md8>
  184 + <v-card>
  185 + <v-toolbar dark class="card-styles" flat>
  186 + <v-spacer></v-spacer>
  187 + <v-toolbar-title>
  188 + <h3>Fee Type List</h3>
  189 + </v-toolbar-title>
  190 + <v-spacer></v-spacer>
  191 + </v-toolbar>
  192 + <!-- <v-layout wrap>
  193 + <v-flex xs12>
  194 + <v-layout wrap>
  195 + <v-flex xs12 sm2 class="mt-3">
  196 + <label class="right title hidden-sm-only hidden-xs-only">Fee Type:</label>
  197 + <label
  198 + class="left pl-2 title hidden-xl-only hidden-lg-only hidden-md-only"
  199 + >Fee Type:</label>
  200 + </v-flex>
  201 + <v-flex xs12 sm4>
  202 + <v-select
  203 + :items="feeTypes"
  204 + v-model="feeType.feeTypeName"
  205 + item-text="feeType"
  206 + item-value="feeType"
  207 + label="Select Fee Type"
  208 + class="px-2"
  209 + ></v-select>
  210 + </v-flex>
  211 + <v-flex xs12 sm6>
  212 + <v-btn
  213 + dark
  214 + class="right mt-3 hidden-sm-only hidden-xs-only"
  215 + color="open-dialog-button"
  216 + @click="selectFeeType"
  217 + >ADD</v-btn>
  218 + <v-btn
  219 + dark
  220 + class="mt-3 hidden-xl-only hidden-lg-only hidden-md-only"
  221 + color="open-dialog-button"
  222 + @click="selectFeeType"
  223 + >ADD</v-btn>
  224 + </v-flex>
  225 + </v-layout>
  226 + </v-flex>
  227 + </v-layout>-->
  228 + <table class="feeTypeTable tableRsponsive">
  229 + <tr class="info white--text">
  230 + <th>#</th>
  231 + <th>Fee Type</th>
  232 + <th>Amount</th>
  233 + <th>Discount(%)</th>
  234 + <th>Subtotal</th>
  235 + <th>Paid Amount</th>
  236 + <th>Action</th>
  237 + </tr>
  238 + <tr
  239 + v-for="(feeType, index) in editPayment.feeType"
  240 + :key="index"
  241 + v-on:keyup="getAmmountDetails(feeType,editPayment.feeType)"
  242 + >
  243 + <td style="width:40px">{{ index + 1 }}</td>
  244 + <td style="width:120px">{{ feeType.feeTypeName }}</td>
  245 + <td>
  246 + <v-text-field
  247 + placeholder="fill your Amount"
  248 + v-model="feeType.amount"
  249 + type="number"
  250 + ></v-text-field>
  251 + </td>
  252 + <td>
  253 + <v-text-field
  254 + placeholder="fill your Discount"
  255 + v-model="feeType.discount"
  256 + type="number"
  257 + ></v-text-field>
  258 + </td>
  259 + <td>{{ feeType.subTotal }}</td>
  260 + <td v-if="editPayment.paymentStatus === 'NOT_PAID'">
  261 + <v-text-field
  262 + placeholder="fill your Paid Amount"
  263 + v-model="feeType.paidAmount"
  264 + type="number"
  265 + :disabled="disabled"
  266 + ></v-text-field>
  267 + </td>
  268 + <td v-if="editPayment.paymentStatus != 'NOT_PAID'">
  269 + <v-text-field
  270 + placeholder="fill your Paid Amount"
  271 + v-model="feeType.paidAmount"
  272 + type="number"
  273 + ></v-text-field>
  274 + </td>
  275 + <td>
  276 + <v-icon
  277 + color="error"
  278 + @click="deleteSelectFee(feeType,editPayment.feeType,index)"
  279 + >delete</v-icon>
  280 + </td>
  281 + </tr>
  282 + <tfoot v-if="feeType.amount != 0.00">
  283 + <tr>
  284 + <td colspan="2">Total:</td>
  285 + <td>{{ feeType.amount }}</td>
  286 + <td>{{ feeType.discount }}</td>
  287 + <td>{{ feeType.subTotal }}</td>
  288 + <td>{{ feeType.paidAmount }}</td>
  289 + </tr>
  290 + </tfoot>
  291 + <tfoot v-else-if="feeType.amount == 0.00">
  292 + <tr>
  293 + <td colspan="2">Total:</td>
  294 + <td>{{ editPayment.totalAmount }}</td>
  295 + <td>{{ editPayment.totalDiscount }}</td>
  296 + <td>{{ editPayment.totalSubTotal }}</td>
  297 + <td>{{ editPayment.totalPaidAmount }}</td>
  298 + </tr>
  299 + </tfoot>
  300 + </table>
  301 + </v-card>
  302 + </v-flex>
  303 + </v-layout>
  304 + </v-container>
  305 + </v-flex>
  306 + <div class="loader" v-if="showLoader">
  307 + <v-progress-circular indeterminate color="white"></v-progress-circular>
  308 + </div>
  309 + </v-app>
  310 +</template>
  311 +
  312 +<script>
  313 +import http from "@/Services/http.js";
  314 +import moment from "moment";
  315 +
  316 +export default {
  317 + props: ["editPayment"],
  318 + data: () => ({
  319 + snackbar: false,
  320 + // showPayMethods: false,
  321 + y: "top",
  322 + x: "right",
  323 + mode: "",
  324 + timeout: 3000,
  325 + text: "",
  326 + showLoader: false,
  327 + loading: false,
  328 + date: null,
  329 + search: "",
  330 + // dialog: false,
  331 + // dialog1: false,
  332 + valid: true,
  333 + validEdit: true,
  334 + // isActive: true,
  335 + // newActive: false,
  336 + showFeeType: false,
  337 + disabled: true,
  338 + details: [],
  339 + feeTypes: [],
  340 + menu1: false,
  341 + // invoiceData: {},
  342 + paymentMethods: ["Cash", "Cheque"],
  343 + feeType: {
  344 + amount: "0.00",
  345 + discount: "0.00",
  346 + paidAmount: "0.00",
  347 + subTotal: "0.00",
  348 + feeTypeName: ""
  349 + },
  350 + feeTypeData: [],
  351 + pagination: {
  352 + rowsPerPage: 15
  353 + },
  354 + token: "",
  355 + editedItem: {},
  356 + invoiceParticularData: {},
  357 + addclass: [],
  358 + studentList: [],
  359 + paymentStatus: [
  360 + {
  361 + name: "Not Paid",
  362 + value: "NOT_PAID"
  363 + },
  364 + {
  365 + name: "Partially Paid",
  366 + value: "PARTIALLY_PAID"
  367 + },
  368 + {
  369 + name: "Fully Paid",
  370 + value: "FULLY_PAID"
  371 + }
  372 + ]
  373 + }),
  374 + // watch: {
  375 + // menu1(val) {
  376 + // val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
  377 + // }
  378 + // },
  379 + methods: {
  380 + save(date) {
  381 + this.$refs.menu1.save(date);
  382 + },
  383 + dates: function(date) {
  384 + return moment(date).format("MMMM DD, YYYY");
  385 + },
  386 + update(editPayment) {
  387 + // console.log("editPayment-----------", editPayment);
  388 + let feeTypeId = "";
  389 + for (let i = 0; i < this.feeTypes.length; i++) {
  390 + if (this.feeTypes[i].feeType === this.feeType.feeTypeName) {
  391 + feeTypeId = this.feeTypes[i]._id;
  392 + }
  393 + }
  394 + // console.log(editPayment);
  395 + let editInvoiceData = {
  396 + invoiceId: editPayment._id,
  397 + classId: editPayment.classNum,
  398 + studentId: editPayment.sectionId,
  399 + date: editPayment.date,
  400 + paymentStatus: editPayment.paymentStatus,
  401 + paymentMethod: editPayment.paymentMethod,
  402 + feeType: editPayment.feeType,
  403 + totalAmount: this.feeType.amount,
  404 + totalDiscount: this.feeType.discount,
  405 + totalSubTotal: this.feeType.subTotal,
  406 + totalPaidAmount: this.feeType.paidAmount
  407 + };
  408 + if (editInvoiceData.paymentStatus == "NOT_PAID") {
  409 + delete editInvoiceData.totalPaidAmount;
  410 + }
  411 + if (feeTypeId == "") {
  412 + delete editInvoiceData.feeType[0].feeTypeId;
  413 + }
  414 + if (editInvoiceData.paymentStatus == "NOT_PAID") {
  415 + delete editInvoiceData.paymentMethod;
  416 + }
  417 + http()
  418 + .put("/updateInvoice", editInvoiceData)
  419 + .then(response => {
  420 + // this.getInvoiceList();
  421 + this.snackbar = true;
  422 + this.text = "New Invoice added successfully";
  423 + this.loading = false;
  424 + // this.$emit("update-editInvoice");
  425 + })
  426 + .catch(error => {
  427 + console.log(error);
  428 + this.snackbar = true;
  429 + this.text = error.response.data.message;
  430 + this.loading = false;
  431 + });
  432 + },
  433 + clear() {
  434 + this.$refs.form.reset();
  435 + },
  436 + // selectFeeType() {
  437 + // // console.log("clckkkkkkkkkkkkkkkkkk", this.feeType.feeTypeName);
  438 + // this.showFeeType = true;
  439 + // this.editPayment.feeType.push({ feeTypeName: this.feeType.feeTypeName });
  440 + // },
  441 + deleteSelectFee: function(feeTyp, feeTypeList, index) {
  442 + this.editPayment.feeType.splice(index, 1);
  443 + this.getAmmountDetails(feeTyp, feeTypeList);
  444 + if (this.feeTypeData.length == 0) {
  445 + this.feeType = {
  446 + amount: "0.00",
  447 + discount: "0.00",
  448 + paidAmount: "0.00",
  449 + subTotal: "0.00",
  450 + feeTypeList: ""
  451 + };
  452 + }
  453 + },
  454 + getAllClasses() {
  455 + http()
  456 + .get("/getClassesList", {
  457 + headers: { Authorization: "Bearer " + this.token }
  458 + })
  459 + .then(response => {
  460 + this.addclass = response.data.data;
  461 + this.getAllStudents();
  462 + })
  463 + .catch(error => {
  464 + // console.log("err====>", err);
  465 + this.showLoader = false;
  466 + if (error.response.status === 401) {
  467 + this.$router.replace({ path: "/" });
  468 + this.$store.dispatch("setToken", null);
  469 + this.$store.dispatch("Id", null);
  470 + this.$store.dispatch("Role", null);
  471 + }
  472 + });
  473 + },
  474 + getAllStudents() {
  475 + http()
  476 + .get("/getStudentsList", {
  477 + params: { classId: this.editPayment.classNum },
  478 + headers: { Authorization: "Bearer " + this.token }
  479 + })
  480 + .then(response => {
  481 + this.studentList = response.data.data;
  482 + })
  483 + .catch(err => {
  484 + // console.log("err====>", err);
  485 + });
  486 + },
  487 + getfeeType() {
  488 + http()
  489 + .get("/getFeesList", {
  490 + headers: { Authorization: "Bearer " + this.token }
  491 + })
  492 + .then(response => {
  493 + this.feeTypes = response.data.data;
  494 + })
  495 + .catch(err => {
  496 + // console.log("err====>", err);
  497 + });
  498 + },
  499 + getAmmountDetails(feeTyp, feeTypeList) {
  500 + this.feeTypeData = feeTypeList;
  501 + let feeType = {
  502 + amount: "",
  503 + discount: "",
  504 + subTotal: "",
  505 + subParticularTotal: "",
  506 + paidAmount: ""
  507 + };
  508 + for (let i = 0; i < this.feeTypeData.length; i++) {
  509 + // *********** AMOUNT ***********
  510 + feeType.amount =
  511 + Number(feeType.amount) + Number(this.feeTypeData[i].amount);
  512 + console.log("feeType.amount ", feeType.amount);
  513 + this.feeType.amount = feeType.amount;
  514 + this.feeType.subTotal = feeType.amount;
  515 + this.feeTypeData[i].subTotal = this.feeTypeData[i].amount;
  516 + // *********** DISCOUNT ***********
  517 + if (this.feeTypeData[i].discount) {
  518 + feeType.discount =
  519 + Number(feeType.discount) + Number(this.feeTypeData[i].discount);
  520 + console.log("feeType.discount", feeType.discount);
  521 + this.feeType.discount = feeType.discount;
  522 + feeType.subParticularTotal =
  523 + this.feeTypeData[i].amount -
  524 + (this.feeTypeData[i].amount * this.feeTypeData[i].discount) / 100;
  525 + console.log("feeType.subTotal", feeType.subTotal);
  526 + this.feeTypeData[i].subTotal = feeType.subParticularTotal.toFixed(2);
  527 + }
  528 + // *********** SUBTOTAL ***********
  529 + feeType.subTotal =
  530 + Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal);
  531 + this.feeType.subTotal = feeType.subTotal.toFixed(2);
  532 + // *********** PAID-AMOUNT ***********
  533 + feeType.paidAmount =
  534 + Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);
  535 + this.feeType.paidAmount = feeType.paidAmount.toFixed(2);
  536 +
  537 + // if paid Amount fill large of subtotal value so this condition are fixed filled subtotal value.
  538 + if (feeType.paidAmount > feeType.subTotal) {
  539 + this.feeTypeData[i].paidAmount = this.feeTypeData[i].subTotal;
  540 + this.feeType.paidAmount = feeType.subTotal;
  541 + }
  542 + }
  543 + }
  544 + // getPayMethodList() {
  545 + // if (this.editPayment.paymentStatus == "PARTIALLY_PAID") {
  546 + // this.showPayMethods = true;
  547 + // } else if (this.editPayment.paymentStatus == "FULLY_PAID") {
  548 + // this.showPayMethods = true;
  549 + // } else {
  550 + // this.showPayMethods = false;
  551 + // }
  552 + // }
  553 + },
  554 + mounted() {
  555 + this.token = this.$store.state.token;
  556 + this.getAllClasses();
  557 + this.getfeeType();
  558 + },
  559 + created() {
  560 + this.$root.$on("app:search", search => {
  561 + this.search = search;
  562 + });
  563 + },
  564 + beforeDestroy() {
  565 + // dont forget to remove the listener
  566 + this.$root.$off("app:search");
  567 + }
  568 +};
  569 +</script>
  570 +
  571 +
  572 +<style scoped>
  573 +.active {
  574 + background-color: gray;
  575 + color: white !important;
  576 +}
  577 +.activebtn {
  578 + color: black !important;
  579 +}
  580 +table {
  581 + border-collapse: collapse;
  582 + border: 1px solid #e2e7eb;
  583 +}
  584 +
  585 +th,
  586 +td {
  587 + border: 1px solid #e2e7eb;
  588 + padding: 10px;
  589 + text-align: center;
  590 +}
  591 +table.feeTypeTable {
  592 + table-layout: auto !important;
  593 + width: 100% !important;
  594 +}
  595 +@media screen and (max-width: 380px) {
  596 + .tableRsponsive {
  597 + display: block;
  598 + position: relative;
  599 + overflow: scroll;
  600 + }
  601 +}
  602 +</style>
0 603 \ No newline at end of file
... ...
src/pages/Report/progressCardReport.vue
Diff comments   View file @3e79b2f
... ... @@ -63,13 +63,13 @@
63 63 </v-flex>
64 64 </v-layout>
65 65 </v-flex>
66   - <v-flex xs12 sm12 lg3 class="hidden-xs-only hidden-sm-only pl-5">
  66 + <v-flex xs12 sm12 lg3 class="hidden-xs-only hidden-sm-only">
67 67 <v-btn
68 68 @click="getMarkReportList"
69 69 round
70 70 dark
71 71 :loading="loading"
72   - class="open-dialog-button mt-3 ml-5"
  72 + class="open-dialog-button mt-3"
73 73 >Get Report</v-btn>
74 74 </v-flex>
75 75 </v-layout>
... ... @@ -79,14 +79,14 @@
79 79 <v-layout v-show="showReport">
80 80 <v-flex xs12>
81 81 <v-card class="transparent elevation-0">
82   - <v-layout>
  82 + <!-- <v-layout>
83 83 <v-flex xs12>
84 84 <v-btn class="open-dialog-button right" round dark @click="printProgressReport()">
85 85 Print
86 86 <v-icon right dark>print</v-icon>
87 87 </v-btn>
88 88 </v-flex>
89   - </v-layout>
  89 + </v-layout> -->
90 90 <v-container grid-list-md v-show="showReport" class="report">
91 91 <v-flex xs12 sm12 id="printMe">
92 92 <v-layout wrap>
... ... @@ -99,10 +99,24 @@
99 99 flat
100 100 style="border: 1px solid lightgrey;margin-bottom:14px;padding:20px"
101 101 >-->
  102 + <v-layout>
  103 + <v-flex xs12>
  104 + <v-btn
  105 + class="open-dialog-button"
  106 + round
  107 + dark
  108 + @click="printProgressReport()"
  109 + >
  110 + Print
  111 + <v-icon right dark>print</v-icon>
  112 + </v-btn>
  113 + </v-flex>
  114 + </v-layout>
102 115 <v-card flat style="border: 1px solid lightgrey;margin-bottom:14px;padding:20px">
103 116 <v-layout>
104   - <v-flex xs12 sm12 md12 class="text-xs-center">
105   - <div class="line">
  117 + <v-flex xs12 sm12 md12>
  118 + <!-- {{userData}} -->
  119 + <div>
106 120 <div class="school-logo">
107 121 <!-- <img :src="userData.schoolLogoUrl" width="140" alt="logo" /> -->
108 122 <v-avatar>
... ... @@ -117,37 +131,62 @@
117 131 <h2>{{ userData.name }}</h2>
118 132 </div>
119 133 </div>
  134 + <hr
  135 + style="border:1px solid #ddd;
  136 + overflow: hidden;
  137 + vertical-align: middle;
  138 + margin-bottom: 4px;"
  139 + />
120 140 <div class="school-info">
121   - <v-flex class="school-address">
122   - <p class="title">{{ userData.name }}</p>
123   - <p>{{ userData.address }}</p>
124   - </v-flex>
125   - <v-flex xs12 sm12 md12 class="text-xs-center student-data">
126   - <!-- <v-avatar style="padding-top: 8%">
127   - <img
128   - src="/static/icon/user.png"
129   - v-if="!cardData[0].studentId.profilePicUrl"
130   - />
131   - <img
132   - :src="cardData[0].studentId.profilePicUrl"
133   - v-else-if="cardData[0].studentId.profilePicUrl"
134   - />
135   - </v-avatar>
136   - <div class="student-info">
  141 + <v-layout>
  142 + <v-flex xs5 class="pl-3">
  143 + <p style="font-size:20px;">{{ userData.name }}</p>
137 144 <p
138   - style="font-size:20px;margin:0px;margin-bottom:4px;"
139   - >{{ cardData[0].studentId.name }}</p>
  145 + style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
  146 + >{{ userData.address }}</p>
140 147 <p
141   - style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
142   - >Class : {{ cardData[0].classId.classNum }}</p>
  148 + style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
  149 + >{{ userData.mobile }}</p>
143 150 <p
144   - style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
145   - >Section : {{ cardData[0].sectionId.name }}</p>
146   - <p
147   - style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
148   - >Roll NO : {{ cardData[0].studentId.rollNo }}</p>
149   - </div>-->
150   - </v-flex>
  151 + style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
  152 + >{{ userData.email }}</p>
  153 + </v-flex>
  154 + <v-flex xs5>
  155 + <div v-if="cardData !=''">
  156 + <p style="font-size:20px;">{{ cardData[0].studentId.name }}</p>
  157 + <p
  158 + style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
  159 + >
  160 + Class :
  161 + <b>{{ cardData[0].classId.classNum }}</b>
  162 + </p>
  163 + <p
  164 + style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
  165 + >
  166 + Section :
  167 + <b>{{ cardData[0].sectionId.name }}</b>
  168 + </p>
  169 + <p
  170 + style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
  171 + >
  172 + Roll NO :
  173 + <b>{{ cardData[0].studentId.rollNo }}</b>
  174 + </p>
  175 + </div>
  176 + </v-flex>
  177 + <v-flex xs2 v-if="cardData !=''">
  178 + <v-avatar size="100" style="padding-top:20px">
  179 + <img
  180 + src="/static/icon/user.png"
  181 + v-if="!cardData[0].studentId.profilePicUrl"
  182 + />
  183 + <img
  184 + :src="cardData[0].studentId.profilePicUrl"
  185 + v-else-if="cardData[0].studentId.profilePicUrl"
  186 + />
  187 + </v-avatar>
  188 + </v-flex>
  189 + </v-layout>
151 190 </div>
152 191 </v-flex>
153 192 </v-layout>
... ... @@ -162,48 +201,58 @@
162 201 width: 100% !important;
163 202 overflow: hidden;"
164 203 >
165   - <thead style="border: 1px solid lightgrey !important;">
  204 + <thead style="border: 1px solid transparent !important">
  205 + <tr style="border: 1px solid transparent !important">
  206 + <td
  207 + colspan="4"
  208 + style="text-align: inherit !important;
  209 + border-right: inherit;
  210 + border-top: inherit;
  211 + padding:14px;"
  212 + >{{value[0].examId.examName}}</td>
  213 + </tr>
  214 + <!-- <v-card-title class="subheading" colspan="4">{{value[0].examId.examName}}</v-card-title> -->
166 215 <tr style="border: 1px solid lightgrey !important;padding:4px;">
167 216 <td
168 217 rowspan="2"
169 218 style="border: 1px solid lightgrey !important;padding: 10px;"
170 219 >Subject</td>
171   - <template v-for="studentData in value">
172   - <td
  220 + <!-- <template v-for="studentData in value"> -->
  221 + <!-- <td
173 222 colspan="4"
174 223 style="border: 1px solid lightgrey !important;padding: 10px;"
175 224 >{{value[0].examId.examName}}</td>
176   - <!-- <td
  225 + <td
177 226 colspan="2"
178 227 style="border: 1px solid lightgrey !important;padding: 10px;"
179   - ></td>-->
  228 + ></td>
180 229 <td
181 230 colspan="2"
182 231 style="border: 1px solid lightgrey !important;padding: 10px;"
183   - >Total</td>
184   - <!-- <td
  232 + >Total</td>-->
  233 + <!-- <td
185 234 colspan="2"
186 235 style="border: 1px solid lightgrey !important;padding: 10px;"
187   - >Grade</td>-->
188   - <!-- <td
  236 + >Grade</td>-->
  237 + <!-- <td
189 238 colspan="2"
190 239 style="border: 1px solid lightgrey !important;padding: 10px;"
191   - >Points</td>-->
192   - <!-- <td
  240 + >Points</td>-->
  241 + <!-- <td
193 242 colspan="2"
194 243 v-for="studentMark in studentData.studentsMarks"
195 244 style="border: 1px solid lightgrey !important;padding: 10px;"
196   - >{{studentMark.markDistributionId.distributionType}}</td>-->
197   - <!-- <td
  245 + >{{studentMark.markDistributionId.distributionType}}</td>-->
  246 + <!-- <td
198 247 style="border: 1px solid lightgrey !important;padding: 10px;"
199   - >Total Marks</td>-->
200   - </template>
201   - </tr>
202   - <tr
  248 + >Total Marks</td>-->
  249 + <!-- </template> -->
  250 + <!-- </tr> -->
  251 + <!-- <tr
203 252 v-for="(subject, ind) in value"
204 253 v-if="ind == 0"
205 254 style="border: 1px solid lightgrey !important;"
206   - >
  255 + >-->
207 256 <!-- <template v-for="(exam, i) in subject.studentsMarks"> -->
208 257 <template v-for="studentData in value">
209 258 <td
... ... @@ -211,6 +260,9 @@
211 260 v-for="studentMark in studentData.studentsMarks"
212 261 style="border: 1px solid lightgrey !important;padding: 10px;"
213 262 >{{studentMark.markDistributionId.distributionType}}</td>
  263 + <td
  264 + style="border: 1px solid lightgrey !important;padding: 10px;"
  265 + >Total Marks</td>
214 266 <!-- <td
215 267 style="border: 1px solid lightgrey !important;padding: 10px;"
216 268 >Marks</td>
... ... @@ -219,6 +271,20 @@
219 271 >Highest Marks</td>-->
220 272 </template>
221 273 </tr>
  274 + <tr
  275 + v-for="(subject, ind) in value"
  276 + v-if="ind == 0"
  277 + style="border: 1px solid lightgrey !important;"
  278 + >
  279 + <template v-for="(exam, i) in subject.studentsMarks">
  280 + <td
  281 + style="border: 1px solid lightgrey !important;padding: 10px;"
  282 + >Marks</td>
  283 + <td
  284 + style="border: 1px solid lightgrey !important;padding: 10px;"
  285 + >Highest Marks</td>
  286 + </template>
  287 + </tr>
222 288 </thead>
223 289 <tbody style="border: 1px solid lightgrey !important;">
224 290 <tr
... ... @@ -268,47 +334,47 @@
268 334 >{{subject.gpa}}</td>
269 335 </tr>
270 336 </tfoot>-->
271   - </table>
272   - <v-card>
273   - <tr
274   -
275   - style="border: 1px solid lightgrey !important;"
276   - >
  337 + <!-- <v-card> -->
  338 + <tr style="border: 1px solid lightgrey !important;">
277 339 <td colspan="5">
278   - <span class="right subheding">Total Marks :</span>
  340 + <span class="subheding">Total Marks</span>
279 341 </td>
280 342 <td
  343 + colspan="7"
281 344 style="border: 1px solid lightgrey !important;padding: 10px;"
282   - >{{cardData.totalMarks}}</td>
  345 + >
  346 + <b>{{ totalMarks }}</b>
  347 + </td>
283 348 </tr>
284 349 <tr>
285 350 <td colspan="5">
286   - <span class="right subheding">Average Mark :</span>
  351 + <span class="right subheding">Average Mark</span>
287 352 </td>
288   - <!-- <td
289   - style="border: 1px solid lightgrey !important;padding: 10px;"
290   - >{{subject.averageMark}}</td>-->
  353 + <td
  354 + colspan="7"
  355 + style="border: 1px solid lightgrey !important;padding: 10px;"
  356 + ></td>
291 357 </tr>
292 358 <tr>
293 359 <td colspan="5">
294   - <span class="right subheding">GPA :</span>
  360 + <span class="right subheding">GPA</span>
295 361 </td>
296   - <!-- <td
297   - style="border: 1px solid lightgrey !important;padding: 10px;"
298   - >{{subject.gpa}}</td>-->
  362 + <td
  363 + colspan="7"
  364 + style="border: 1px solid lightgrey !important;padding: 10px;"
  365 + ></td>
299 366 </tr>
300   - </v-card>
301   - </v-card>
302   - <!-- <tbody style="border: 1px solid lightgrey !important;">
  367 + <!-- </v-card> -->
  368 + <!-- <tbody style="border: 1px solid lightgrey !important;">
303 369 <tr
304 370 v-for="subject in value"
305 371 style="border: 1px solid lightgrey !important;"
306 372 >
307   - <td style="border: 1px solid lightgrey !important;padding: 10px;"></td>-->
308   - <!-- <td
  373 + <td style="border: 1px solid lightgrey !important;padding: 10px;"></td>-->
  374 + <!-- <td
309 375 style="border: 1px solid lightgrey !important;padding: 10px;"
310   - >{{subject.subjectName}}</td>-->
311   - <!-- <template v-for="(exam, i) in subject.studentsMarks">
  376 + >{{subject.subjectName}}</td>-->
  377 + <!-- <template v-for="(exam, i) in subject.studentsMarks">
312 378 <td
313 379 style="border: 1px solid lightgrey !important;padding: 10px;"
314 380 >{{exam.marksScored}}</td>
... ... @@ -320,8 +386,9 @@
320 386 style="border: 1px solid lightgrey !important;padding: 10px;"
321 387 >{{subject.totalMarks}}</td>
322 388 </tr>
323   - </tbody>-->
324   - <!-- </table> -->
  389 + </tbody>-->
  390 + </table>
  391 + </v-card>
325 392 </v-card>
326 393 </v-flex>
327 394 </v-layout>
... ... @@ -368,7 +435,8 @@ export default {
368 435 gradeBPlus: "B+",
369 436 gradeB: "B",
370 437 gradeCPlus: "C+",
371   - gradeC: "C"
  438 + gradeC: "C",
  439 + totalMarks: ""
372 440 }),
373 441 mounted() {
374 442 this.token = this.$store.state.token;
... ... @@ -495,6 +563,8 @@ export default {
495 563 .marksScored;
496 564 }
497 565 this.filterData[data][item].totalMarks = totalMarks;
  566 + console.log("totalMarks", totalMarks);
  567 + this.totalMarks = totalMarks;
498 568 // console.log("this.filterData[data][item].grade", this.filterData[data][item].grade);
499 569 if (totalMarks > 90) {
500 570 this.filterData[data][item].grade = this.gradeAPlus;
... ...