viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 81d876b5d6f46695162c5e164d2b8cefb447ac23

Authored by Shikha Mishra
1 parent 0e46192a00
Exists in master and in 3 other branches amber-development, development, ui-design

salary invoice detailss

Showing 4 changed files with 1259 additions and 230 deletions   Show diff stats
src/pages/Account/invoice.vue
Diff comments   View file @81d876b
1 1 <template>
2 2 <v-container fluid class="body-color">
3   - <!-- ****** PROFILE VIEW SECTION DATA ****** -->
4   - <!-- <v-dialog v-model="dialog1" max-width="600px">
5   - <v-card>
6   - <v-flex align-center justify-center layout text-xs-center>
7   - <v-avatar size="50px" style="position:absolute; top:20px;">
8   - <img src="/static/icon/user.png" />
9   - </v-avatar>
  3 + <!-- ****** Edit INVOICE ****** -->
  4 + <v-dialog v-model="editInvoiceDialog">
  5 + <v-card flat class="text-xs-center white--text">
  6 + <v-layout>
  7 + <v-flex xs12 class="card-styles pa-2">
  8 + <label class="title text-xs-center">Edit Invoice</label>
  9 + <v-icon size="24" class="right white--text" @click="editInvoiceDialog = false">cancel</v-icon>
  10 + </v-flex>
  11 + </v-layout>
  12 + <v-flex xs12 sm12>
  13 + <v-container fluid grid-list-md>
  14 + <v-layout wrap>
  15 + <v-flex xs12 sm12 md5>
  16 + <v-card flat>
  17 + <v-toolbar dark class="card-styles" flat>
  18 + <v-spacer></v-spacer>
  19 + <h3>Invoice</h3>
  20 + <v-spacer></v-spacer>
  21 + </v-toolbar>
  22 + <v-form ref="form" v-model="valid" lazy-validation class="py-4">
  23 + <v-layout>
  24 + <v-flex xs4 class="pt-4 subheading">
  25 + <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
  26 + <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
  27 + </v-flex>
  28 + <v-flex xs6 class="ml-3">
  29 + <v-select
  30 + :items="addclass"
  31 + label="Select Class"
  32 + v-model="invoiceData.classId"
  33 + item-text="classNum"
  34 + item-value="_id"
  35 + :rules="classRules"
  36 + @change="getAllStudents()"
  37 + required
  38 + ></v-select>
  39 + </v-flex>
  40 + </v-layout>
  41 + <v-layout>
  42 + <v-flex xs4 class="pt-4 subheading">
  43 + <label class="right hidden-xs-only hidden-sm-only">Select Student:</label>
  44 + <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Student:</label>
  45 + </v-flex>
  46 + <v-flex xs6 class="ml-3">
  47 + <v-select
  48 + :items="studentList"
  49 + label="Select Student"
  50 + v-model="invoiceData.studentId"
  51 + item-text="name"
  52 + item-value="_id"
  53 + :rules="inchargeRules"
  54 + @change="selectAllStudent()"
  55 + required
  56 + ></v-select>
  57 + </v-flex>
  58 + </v-layout>
  59 + <v-layout>
  60 + <v-flex xs4 class="pt-4 subheading">
  61 + <label class="right">Date:</label>
  62 + </v-flex>
  63 + <v-flex xs6 class="ml-3">
  64 + <v-menu
  65 + ref="menu1"
  66 + :close-on-content-click="false"
  67 + v-model="menu1"
  68 + :nudge-right="40"
  69 + lazy
  70 + :return-value.sync="invoiceData.date"
  71 + transition="scale-transition"
  72 + offset-y
  73 + full-width
  74 + min-width="290px"
  75 + >
  76 + <v-text-field
  77 + slot="activator"
  78 + :rules="dateRules"
  79 + v-model="invoiceData.date"
  80 + placeholder="Select date"
  81 + ></v-text-field>
  82 + <v-date-picker
  83 + v-model="invoiceData.date"
  84 + @input="$refs.menu1.save(invoiceData.date)"
  85 + ></v-date-picker>
  86 + </v-menu>
  87 + </v-flex>
  88 + </v-layout>
  89 + <v-layout>
  90 + <v-flex xs4 class="pt-4 subheading">
  91 + <label class="right hidden-xs-only hidden-sm-only">Payment Status:</label>
  92 + <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Payment:</label>
  93 + </v-flex>
  94 + <v-flex xs6 class="ml-3">
  95 + <v-select
  96 + :items="paymentStatus"
  97 + v-model="invoiceData.paymentStatus"
  98 + item-text="name"
  99 + item-value="value"
  100 + label="Select Payment Status"
  101 + @change="getPayMethodList"
  102 + :rules="paymentStatusRules"
  103 + required
  104 + ></v-select>
  105 + </v-flex>
  106 + </v-layout>
  107 + <v-layout v-show="showPayMethods">
  108 + <v-flex xs4 class="pt-4 subheading">
  109 + <label class="right">Payment Method:</label>
  110 + </v-flex>
  111 + <v-flex xs6 class="ml-3">
  112 + <v-select
  113 + :items="paymentMethods"
  114 + v-model="invoiceData.paymentMethod"
  115 + label="Select Payment Method"
  116 + required
  117 + ></v-select>
  118 + </v-flex>
  119 + </v-layout>
  120 + <v-layout>
  121 + <v-flex xs12 sm11>
  122 + <v-card-actions>
  123 + <v-spacer></v-spacer>
  124 + <v-btn
  125 + @click="update"
  126 + round
  127 + dark
  128 + :loading="loading"
  129 + class="add-button"
  130 + >Update</v-btn>
  131 + </v-card-actions>
  132 + </v-flex>
  133 + </v-layout>
  134 + </v-form>
  135 + </v-card>
  136 + </v-flex>
  137 + <v-flex xs12 sm12 md7>
  138 + <v-card>
  139 + <v-toolbar dark class="card-styles" flat>
  140 + <v-spacer></v-spacer>
  141 + <h3>Fee Type List</h3>
  142 + <v-spacer></v-spacer>
  143 + </v-toolbar>
  144 + <v-layout>
  145 + <v-flex xs4 sm2 class="mt-4 hidden-xs-only hidden-sm-only">
  146 + <label class="right title">Fee Type:</label>
  147 + </v-flex>
  148 + <v-flex xs8 sm4>
  149 + <v-select
  150 + :items="feeTypes"
  151 + :rules="feeTypeRules"
  152 + v-model="invoiceData.feeTypeName"
  153 + item-text="feeType"
  154 + item-value="feeType"
  155 + label="Select Fee Type"
  156 + ></v-select>
  157 + </v-flex>
  158 + <v-flex xs4 sm6>
  159 + <v-btn
  160 + color="open-dialog-button"
  161 + round
  162 + dark
  163 + class="right mt-3"
  164 + @click="selectFeeType"
  165 + >ADD</v-btn>
  166 + </v-flex>
  167 + </v-layout>
  168 + <table class="feeTypeTable tableRsponsive">
  169 + <tr class="info white--text">
  170 + <th>#</th>
  171 + <th>Fee Type</th>
  172 + <th>Amount</th>
  173 + <th>Discount(%)</th>
  174 + <th>Subtotal</th>
  175 + <th>Paid Amount</th>
  176 + <th>Action</th>
  177 + </tr>
  178 + <tr
  179 + v-show="showFeeType"
  180 + v-for="(invoiceData, index) in feeTypeData"
  181 + :key="index"
  182 + v-on:keyup="getAmmountDetails(feeType)"
  183 + >
  184 + <td style="width:40px" class="tdFeeType">{{ index + 1 }}</td>
  185 + <td style="width:120px" class="tdFeeType">
  186 + <v-text-field
  187 + :rules="feeTypeNameRules"
  188 + placeholder="fill your Fee Type"
  189 + v-model="invoiceData.feeTypeName"
  190 + ></v-text-field>
  191 + </td>
  192 + <td>
  193 + <v-text-field
  194 + :rules="amountRules"
  195 + placeholder="fill your Amount"
  196 + v-model="invoiceData.amount"
  197 + type="number"
  198 + ></v-text-field>
  199 + </td>
  200 + <td class="tdFeeType">
  201 + <v-text-field
  202 + :rules="discountRules"
  203 + placeholder="fill your Discount"
  204 + v-model="invoiceData.discount"
  205 + type="number"
  206 + ></v-text-field>
  207 + </td>
  208 + <td class="tdFeeType">{{ invoiceData.subTotal }}</td>
  209 + <td class="tdFeeType" v-if="invoiceData.paymentStatus === 'NOT_PAID'">
  210 + <v-text-field
  211 + placeholder="fill your Paid Amount"
  212 + v-model="invoiceData.paidAmount"
  213 + type="number"
  214 + :rules="paymentRules"
  215 + :disabled="disabled"
  216 + ></v-text-field>
  217 + </td>
  218 + <td class="tdFeeType" v-if="invoiceData.paymentStatus == ''">
  219 + <v-text-field
  220 + placeholder="fill your Paid Amount"
  221 + v-model="invoiceData.paidAmount"
  222 + type="number"
  223 + :rules="paymentRules"
  224 + :disabled="disabled"
  225 + ></v-text-field>
  226 + </td>
  227 + <td
  228 + class="tdFeeType"
  229 + v-if="invoiceData.paymentStatus != 'NOT_PAID' && invoiceData.paymentStatus != ''"
  230 + >
  231 + <v-text-field
  232 + placeholder="fill your Paid Amount"
  233 + v-model="invoiceData.paidAmount"
  234 + :rules="paymentRules"
  235 + type="number"
  236 + ></v-text-field>
  237 + </td>
  238 + <td class="tdFeeType">
  239 + <v-icon color="error" @click="deleteSelectFee(index)">delete</v-icon>
  240 + </td>
  241 + </tr>
  242 + <tfoot>
  243 + <tr>
  244 + <td colspan="2" class="tdFeeType">Total:</td>
  245 + <td class="tdFeeType" :rules="amountRules">{{ invoiceData.amount }}</td>
  246 + <td class="tdFeeType" :rules="discountRules">{{ invoiceData.discount }}</td>
  247 + <td class="tdFeeType" :rules="subtotalRules">{{ invoiceData.subTotal }}</td>
  248 + <td class="tdFeeType" :rules="paidAmountRules">{{ invoiceData.paidAmount }}</td>
  249 + <td class="tdFeeType">
  250 + <v-icon color="error" @click="deleteSelectFee(index)">delete</v-icon>
  251 + </td>
  252 + </tr>
  253 + </tfoot>
  254 + </table>
  255 + </v-card>
  256 + </v-flex>
  257 + </v-layout>
  258 + </v-container>
10 259 </v-flex>
11   - <v-card-text>
12   - <v-container grid-list-md>
  260 + </v-card>
  261 + </v-dialog>
  262 +
  263 + <!-- ****PAYMENT INVOICE DIALOG -->
  264 + <v-dialog v-model="paymentInvoiceDialog">
  265 + <v-card flat class="text-xs-center white--text">
  266 + <v-layout>
  267 + <v-flex xs12 class="card-styles pa-2">
  268 + <label class="title text-xs-center">Payment Template</label>
  269 + <v-icon size="24" class="right white--text" @click="paymentInvoiceDialog = false">cancel</v-icon>
  270 + </v-flex>
  271 + </v-layout>
  272 + <v-flex xs12 sm12>
  273 + <v-container fluid grid-list-md>
13 274 <v-layout wrap>
14   - <v-flex>
15   - <br />
16   - <br />
17   - <v-layout>
18   - <v-flex xs5 sm6>
19   - <h5 class="right my-1">
20   - <b>Class Name:</b>
21   - </h5>
22   - </v-flex>
23   - <v-flex sm6 xs8>
24   - </v-flex>
25   - </v-layout>
26   - <v-layout>
27   - <v-flex xs5 sm6>
28   - <h5 class="right my-1">
29   - <b>Name:</b>
30   - </h5>
31   - </v-flex>
32   - <v-flex sm6 xs8>
33   - <h5 class="my-1">{{ editedItem.name }}</h5>
34   - </v-flex>
35   - </v-layout>
36   - <v-layout>
37   - <v-flex xs5 sm6>
38   - <h5 class="right my-1">
39   - <b>Class Incharge:</b>
40   - </h5>
41   - </v-flex>
42   - <v-flex sm6 xs8>
43   - <h5 class="my-1">{{ editedItem.name }}</h5>
44   - </v-flex>
45   - </v-layout>
46   - <v-layout>
47   - <v-flex xs5 sm6>
48   - <h5 class="right my-1">
49   - <b>Session:</b>
50   - </h5>
51   - </v-flex>
52   - <v-flex sm6 xs8>
53   - <h5 class="my-1">{{ editedItem.paymentStatus }}</h5>
54   - </v-flex>
55   - </v-layout>
  275 + <v-flex xs12 sm12 md5>
  276 + <v-card flat>
  277 + <v-toolbar dark class="card-styles" flat>
  278 + <v-spacer></v-spacer>
  279 + <h3>Profile</h3>
  280 + <v-spacer></v-spacer>
  281 + </v-toolbar>
  282 + <v-card-text>
  283 + <v-container>
  284 + <v-layout wrap>
  285 + <v-flex xs12>
  286 + <v-layout>
  287 + <v-flex
  288 + xs12
  289 + class="text-xs-center text-sm-center text-md-center text-lg-center"
  290 + >
  291 + <v-avatar size="80px">
  292 + <img src="/static/icon/user.png" v-if="!invoiceList.profilePicUrl" />
  293 + <img
  294 + :src="invoiceList.profilePicUrl"
  295 + v-else-if="invoiceList.profilePicUrl"
  296 + />
  297 + </v-avatar>
  298 + </v-flex>
  299 + </v-layout>
  300 + <v-layout>
  301 + <v-flex xs12 sm12>
  302 + <h3 class="text-xs-center">
  303 + <!-- <b>{{ invoiceList.studentId.name }}</b> -->
  304 + </h3>
  305 + <p class="text-xs-center grey--text">Student</p>
  306 + </v-flex>
  307 + </v-layout>
  308 + <v-layout style="border: 1px solid lightgrey;">
  309 + <v-flex xs6 sm6 class="pa-0">
  310 + <h4 class="right">
  311 + <b>Roll No :</b>
  312 + </h4>
  313 + </v-flex>
  314 + <v-flex sm6 xs6 class="pa-0">
  315 + <!-- <h4>{{ invoiceList.studentId.rollNo }}</h4> -->
  316 + </v-flex>
  317 + </v-layout>
  318 + <v-layout style="border: 1px solid lightgrey;">
  319 + <v-flex xs6 sm6 class="pa-0">
  320 + <h4 class="right">
  321 + <b>Class :</b>
  322 + </h4>
  323 + </v-flex>
  324 + <v-flex sm6 xs6 class="pa-0">
  325 + <!-- <h4>{{ invoiceList.classId.classNum }}</h4> -->
  326 + </v-flex>
  327 + </v-layout>
  328 + <!-- <v-layout style="border: 1px solid lightgrey;">
  329 + <v-flex xs6 sm6 class="pa-0">
  330 + <h4 class="right">
  331 + <b>Section :</b>
  332 + </h4>
  333 + </v-flex>
  334 + <v-flex sm6 xs6 class="pa-0">
  335 + <h4>{{ invoiceList.sectionId.name }}</h4>
  336 + </v-flex>
  337 + </v-layout>-->
  338 + </v-flex>
  339 + </v-layout>
  340 + </v-container>
  341 + </v-card-text>
  342 + </v-card>
  343 + <v-flex>
  344 + <v-card>
  345 + <v-flex xs12 sm12 md12 style="padding-top: 1%;">
  346 + <v-card flat>
  347 + <v-toolbar dark class="card-styles" flat>
  348 + <v-spacer></v-spacer>
  349 + <h3>Invoice</h3>
  350 + <v-spacer></v-spacer>
  351 + </v-toolbar>
  352 + </v-card>
  353 + <v-layout>
  354 + <v-flex xs12>
  355 + <v-layout>
  356 + <v-flex xs4 class="pt-4 subheading">
  357 + <label class="right">Payment Method:</label>
  358 + </v-flex>
  359 + <v-flex xs6 class="ml-3">
  360 + <v-select
  361 + :items="paymentMethods"
  362 + v-model="invoiceList.paymentMethod"
  363 + label="Select Payment Method"
  364 + required
  365 + ></v-select>
  366 + </v-flex>
  367 + </v-layout>
  368 + <v-card-actions>
  369 + <v-spacer class="hidden-xs-only"></v-spacer>
  370 + <v-btn
  371 + color="open-dialog-button"
  372 + dark
  373 + class="right mt-3"
  374 + @click="save"
  375 + >Add Payment</v-btn>
  376 + </v-card-actions>
  377 + </v-flex>
  378 + </v-layout>
  379 + </v-flex>
  380 + </v-card>
  381 + </v-flex>
  382 + </v-flex>
  383 + <v-flex xs12 sm12 md7>
  384 + <v-card>
  385 + <v-toolbar dark class="card-styles" flat>
  386 + <v-spacer></v-spacer>
  387 + <h3>Fee Type List</h3>
  388 + <v-spacer></v-spacer>
  389 + </v-toolbar>
  390 + <table class="feeTypeTable tableRsponsive">
  391 + <tr class="info white--text">
  392 + <th>#</th>
  393 + <th>Fee Type</th>
  394 + <th>Amount</th>
  395 + <th>Discount(%)</th>
  396 + <th>Subtotal</th>
  397 + <th>Paid Amount</th>
  398 + <th>Action</th>
  399 + </tr>
  400 + <tr
  401 + v-show="showFeeType"
  402 + v-for="(feeType, index) in feeTypeData"
  403 + :key="index"
  404 + v-on:keyup="getAmmountDetails(feeType)"
  405 + >
  406 + <td style="width:40px" class="tdFeeType">{{ index + 1 }}</td>
  407 + <td style="width:120px" class="tdFeeType">{{ feeType.feeTypeName }}</td>
  408 + <td class="tdFeeType">
  409 + <v-text-field
  410 + placeholder="fill your Amount"
  411 + v-model="feeType.amount"
  412 + type="number"
  413 + ></v-text-field>
  414 + </td>
  415 + <td class="tdFeeType">
  416 + <v-text-field
  417 + placeholder="fill your Discount"
  418 + v-model="feeType.discount"
  419 + type="number"
  420 + ></v-text-field>
  421 + </td>
  422 + <td class="tdFeeType">{{ feeType.subTotal }}</td>
  423 + <td class="tdFeeType" v-if="invoiceData.paymentStatus === 'NOT_PAID'">
  424 + <v-text-field
  425 + placeholder="fill your Paid Amount"
  426 + v-model="feeType.paidAmount"
  427 + type="number"
  428 + :disabled="disabled"
  429 + ></v-text-field>
  430 + </td>
  431 + <td class="tdFeeType" v-if="invoiceData.paymentStatus == ''">
  432 + <v-text-field
  433 + placeholder="fill your Paid Amount"
  434 + v-model="feeType.paidAmount"
  435 + type="number"
  436 + :disabled="disabled"
  437 + ></v-text-field>
  438 + </td>
  439 + <td
  440 + class="tdFeeType"
  441 + v-if="invoiceData.paymentStatus != 'NOT_PAID' && invoiceData.paymentStatus != ''"
  442 + >
  443 + <v-text-field
  444 + placeholder="fill your Paid Amount"
  445 + v-model="feeType.paidAmount"
  446 + type="number"
  447 + ></v-text-field>
  448 + </td>
  449 + <td class="tdFeeType">
  450 + <v-icon color="error" @click="deleteSelectFee(index)">delete</v-icon>
  451 + </td>
  452 + </tr>
  453 + <tfoot>
  454 + <tr>
  455 + <td colspan="2" class="tdFeeType">Total:</td>
  456 + <td class="tdFeeType">{{ feeType.amount }}</td>
  457 + <td class="tdFeeType">{{ feeType.discount }}</td>
  458 + <td class="tdFeeType">{{ feeType.subTotal }}</td>
  459 + <td class="tdFeeType">{{ feeType.paidAmount }}</td>
  460 + <td class="tdFeeType">
  461 + <v-icon color="error" @click="deleteSelectFee(index)">delete</v-icon>
  462 + </td>
  463 + </tr>
  464 + </tfoot>
  465 + </table>
  466 + </v-card>
56 467 </v-flex>
57 468 </v-layout>
58 469 </v-container>
59   - </v-card-text>
  470 + </v-flex>
  471 + </v-card>
  472 + </v-dialog>
  473 +
  474 + <!-- ****** PROFILE VIEW SECTION DATA ****** -->
  475 + <v-dialog v-model="dialog1" max-width="800px">
  476 + <v-card flat class="text-xs-center white--text">
  477 + <v-layout>
  478 + <v-flex xs12 class="card-style pa-2">
  479 + <label class="title text-xs-center">View Payments</label>
  480 + <v-icon size="24" class="right" color="white" @click="dialog1 = false">cancel</v-icon>
  481 + </v-flex>
  482 + </v-layout>
  483 + <v-data-table
  484 + :headers="headersProfile"
  485 + :items="invoiceList"
  486 + :pagination.sync="pagination"
  487 + :search="search"
  488 + >
  489 + <template slot="items" slot-scope="props">
  490 + <tr class="tr">
  491 + <td class="td td-row">{{ props.index + 1 }}</td>
  492 + <td class="text-xs-center td td-row">{{ dates(props.item.date) }}</td>
  493 + <td class="text-xs-center td td-row">{{ props.item.paymentMethod }}</td>
  494 + <td class="text-xs-center td td-row">{{ props.item.totalAmount }}</td>
  495 + <td class="text-xs-center td td-row">{{ feeType.discount}}</td>
  496 +
  497 + <td class="text-xs-center td td-row">
  498 + <router-link
  499 + :to="{ name:'View Payment Invoice',params: { viewPaymentInvoiceId:props.item._id } }"
  500 + >
  501 + <v-tooltip top>
  502 + <img
  503 + slot="activator"
  504 + style="cursor:pointer; width:25px; height:25px; "
  505 + class="mr-3"
  506 + src="/static/icon/view.png"
  507 + />
  508 + <span>View</span>
  509 + </v-tooltip>
  510 + </router-link>
  511 + <v-tooltip top>
  512 + <img
  513 + slot="activator"
  514 + style="cursor:pointer;width:20px; height:20px; "
  515 + class="mr-3"
  516 + @click="deleteItem(props.item)"
  517 + src="/static/icon/delete.png"
  518 + />
  519 + <span>Delete</span>
  520 + </v-tooltip>
  521 + </td>
  522 + </tr>
  523 + </template>
  524 + <v-alert
  525 + slot="no-results"
  526 + :value="true"
  527 + color="error"
  528 + icon="warning"
  529 + >Your search for "{{ search }}" found no results.</v-alert>
  530 + </v-data-table>
  531 + <!-- <table class="feeTypeTable tableRsponsive">
  532 + <tr style="color: black">
  533 + <th>#</th>
  534 + <th>Date</th>
  535 + <th>Paid By</th>
  536 + <th>Payment Amount</th>
  537 + <th>Weaver</th>
  538 + <th>Action</th>
  539 + </tr>
  540 + <tr>
  541 + <td style="width:40px" class="tdFeeType">{{ index + 1 }}</td>
  542 + <td style="width:120px" class="tdFeeType">{{dates( editedItem.date) }}</td>
  543 + <td style="width:120px" class="tdFeeType">{{ editedItem.paymentMethod }}</td>
  544 + <td style="width:120px" class="tdFeeType">{{ editedItem.totalAmount }}</td>
  545 + <td style="width:120px" class="tdFeeType">{{ editedItem.discount}}</td>
  546 + <td class="text-xs-center td td-row">
  547 + <router-link
  548 + :to="{ name:'View Payment Invoice',params: { viewPaymentInvoiceId:editedItem._id } }"
  549 + >
  550 + <v-tooltip top>
  551 + <img
  552 + slot="activator"
  553 + style="cursor:pointer; width:25px; height:25px; "
  554 + class="mr-3"
  555 + src="/static/icon/view.png"
  556 + />
  557 + <span>View</span>
  558 + </v-tooltip>
  559 + </router-link>
  560 + <v-tooltip top>
  561 + <img
  562 + slot="activator"
  563 + style="cursor:pointer;width:20px; height:20px; "
  564 + class="mr-3"
  565 + @click="deleteItem(props.item)"
  566 + src="/static/icon/delete.png"
  567 + />
  568 + <span>Delete</span>
  569 + </v-tooltip>
  570 + </td>
  571 + </tr>
  572 + </table>-->
60 573 </v-card>
61   - </v-dialog>-->
  574 + </v-dialog>
62 575 <!-- ****** Invoice Table ****** -->
63 576  
64 577 <v-toolbar color="transparent" flat>
... ... @@ -103,7 +616,7 @@
103 616 <template slot="items" slot-scope="props">
104 617 <tr class="tr">
105 618 <td class="td td-row">{{ props.index + 1 }}</td>
106   - <!-- <td class="text-xs-center td td-row">{{ props.item.studentId.name }}</td> -->
  619 + <td class="text-xs-center td td-row">{{ props.item.studentId.name }}</td>
107 620 <td class="text-xs-center td td-row">{{ props.item.classId.classNum }}</td>
108 621 <td class="text-xs-center td td-row">{{ props.item.totalAmount }}</td>
109 622 <td
... ... @@ -114,7 +627,7 @@
114 627 >{{ props.item.totalPaidAmount ? props.item.totalPaidAmount : 0}}</td>
115 628 <td
116 629 class="text-xs-center td td-row"
117   - >{{ props.item.totalPaidAmount ? props.item.totalSubTotal - props.item.totalPaidAmount : props.item.totalSubTotal }}</td>
  630 + >{{ props.item.totalPaidAmount ? props.item.totalSubTotal - props.item.totalPaidAmount : props.item.totalSubTotal }}</td>
118 631 <td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'NOT_PAID'">
119 632 <span
120 633 class="red lighten-1 py-1 px-2 white--text paymentStatus"
... ... @@ -144,17 +657,16 @@
144 657 </v-tooltip>
145 658 </router-link>
146 659 <span v-if="props.item.paymentStatus === 'NOT_PAID'">
147   - <router-link :to="{ name:'EditInvoice',params: { invoiceid:props.item._id }}" exact>
148   - <v-tooltip top>
149   - <img
150   - slot="activator"
151   - style="cursor:pointer; width:20px; height:18px; "
152   - class="mr-3"
153   - src="/static/icon/edit.png"
154   - />
155   - <span>Edit</span>
156   - </v-tooltip>
157   - </router-link>
  660 + <v-tooltip top>
  661 + <img
  662 + slot="activator"
  663 + style="cursor:pointer; width:20px; height:18px; "
  664 + class="mr-3"
  665 + @click="editItem(props.item)"
  666 + src="/static/icon/edit.png"
  667 + />
  668 + <span>Edit</span>
  669 + </v-tooltip>
158 670 <v-tooltip top>
159 671 <img
160 672 slot="activator"
... ... @@ -165,7 +677,39 @@
165 677 />
166 678 <span>Delete</span>
167 679 </v-tooltip>
  680 + <v-tooltip top>
  681 + <img
  682 + slot="activator"
  683 + style="cursor:pointer; width:20px; height:18px; "
  684 + class="mr-3"
  685 + @click="paymentItem(props.item)"
  686 + src="/static/schoolIcons/Account.png"
  687 + />
  688 + <span>Payment</span>
  689 + </v-tooltip>
168 690 </span>
  691 + <span v-if="props.item.paymentStatus === 'PARTIALLY_PAID'">
  692 + <v-tooltip top>
  693 + <img
  694 + slot="activator"
  695 + style="cursor:pointer; width:20px; height:18px; "
  696 + class="mr-3"
  697 + @click="paymentItem(props.item)"
  698 + src="/static/schoolIcons/Account.png"
  699 + />
  700 + <span>Payment</span>
  701 + </v-tooltip>
  702 + </span>
  703 + <v-tooltip top>
  704 + <img
  705 + slot="activator"
  706 + style="cursor:pointer; width:19px; height:19px;"
  707 + class="mr-3"
  708 + @click="profile(props.item)"
  709 + src="/static/icon/eye1.png"
  710 + />
  711 + <span>View Payment</span>
  712 + </v-tooltip>
169 713 </td>
170 714 </tr>
171 715 </template>
... ... @@ -177,11 +721,19 @@
177 721 >Your search for "{{ search }}" found no results.</v-alert>
178 722 </v-data-table>
179 723 <!-- ****** ADD INVOICE ****** -->
180   - <v-dialog v-model="addInvoiceDialog" max-width>
  724 + <v-snackbar
  725 + :timeout="timeout"
  726 + :top="y === 'top'"
  727 + :right="x === 'right'"
  728 + :vertical="mode === 'vertical'"
  729 + v-model="snackbar"
  730 + :color="color"
  731 + >{{ text }}</v-snackbar>
  732 + <v-dialog v-model="addInvoiceDialog">
181 733 <v-card flat class="text-xs-center white--text">
182 734 <v-layout>
183   - <v-flex xs12 class="card-styles pa-2">
184   - <label class="title text-xs-center ">Add Invoice</label>
  735 + <v-flex xs12 class="card-styles pa-2">
  736 + <label class="title text-xs-center">Add Invoice</label>
185 737 <v-icon size="24" class="right white--text" @click="addInvoiceDialog = false">cancel</v-icon>
186 738 </v-flex>
187 739 </v-layout>
... ... @@ -192,7 +744,7 @@
192 744 <v-card flat>
193 745 <v-toolbar dark class="card-styles" flat>
194 746 <v-spacer></v-spacer>
195   - <h3>Invoice</h3>
  747 + <h3>Invoice</h3>
196 748 <v-spacer></v-spacer>
197 749 </v-toolbar>
198 750 <v-form ref="form" v-model="valid" lazy-validation class="py-4">
... ... @@ -298,7 +850,13 @@
298 850 <v-card-actions>
299 851 <v-spacer></v-spacer>
300 852 <v-btn @click="clear" round dark class="clear-button">clear</v-btn>
301   - <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
  853 + <v-btn
  854 + @click="submit"
  855 + round
  856 + dark
  857 + :loading="loading"
  858 + class="add-button"
  859 + >Add</v-btn>
302 860 </v-card-actions>
303 861 </v-flex>
304 862 </v-layout>
... ... @@ -307,14 +865,14 @@
307 865 </v-flex>
308 866 <v-flex xs12 sm12 md7>
309 867 <v-card>
310   - <v-toolbar dark class="card-styles " flat>
  868 + <v-toolbar dark class="card-styles" flat>
311 869 <v-spacer></v-spacer>
312   - <h3>Fee Type List</h3>
  870 + <h3>Fee Type List</h3>
313 871 <v-spacer></v-spacer>
314 872 </v-toolbar>
315 873 <v-layout>
316 874 <v-flex xs4 sm2 class="mt-4 hidden-xs-only hidden-sm-only">
317   - <label class="right title ">Fee Type:</label>
  875 + <label class="right title">Fee Type:</label>
318 876 </v-flex>
319 877 <v-flex xs8 sm4>
320 878 <v-select
... ... @@ -323,10 +881,18 @@
323 881 item-text="feeType"
324 882 item-value="feeType"
325 883 label="Select Fee Type"
  884 + :rules="feeTypeRules"
  885 + required
326 886 ></v-select>
327 887 </v-flex>
328 888 <v-flex xs4 sm6>
329   - <v-btn color="open-dialog-button" round dark class="right mt-3" @click="selectFeeType">ADD</v-btn>
  889 + <v-btn
  890 + color="open-dialog-button"
  891 + round
  892 + dark
  893 + class="right mt-3"
  894 + @click="selectFeeType"
  895 + >ADD</v-btn>
330 896 </v-flex>
331 897 </v-layout>
332 898 <table class="feeTypeTable tableRsponsive">
... ... @@ -346,12 +912,18 @@
346 912 v-on:keyup="getAmmountDetails(feeType)"
347 913 >
348 914 <td style="width:40px" class="tdFeeType">{{ index + 1 }}</td>
349   - <td style="width:120px" class="tdFeeType">{{ feeType.feeTypeName }}</td>
  915 + <td
  916 + style="width:120px"
  917 + class="tdFeeType"
  918 + :rules="feeTypeNameRules"
  919 + >{{ feeType.feeTypeName }}</td>
350 920 <td class="tdFeeType">
351 921 <v-text-field
352 922 placeholder="fill your Amount"
353 923 v-model="feeType.amount"
354 924 type="number"
  925 + :rules="amountRules"
  926 + required
355 927 ></v-text-field>
356 928 </td>
357 929 <td class="tdFeeType">
... ... @@ -359,23 +931,29 @@
359 931 placeholder="fill your Discount"
360 932 v-model="feeType.discount"
361 933 type="number"
  934 + :rules="discountRules"
  935 + required
362 936 ></v-text-field>
363 937 </td>
364   - <td class="tdFeeType">{{ feeType.subTotal }}</td>
365   - <!-- <td class="tdFeeType" v-if="invoiceData.paymentStatus === 'NOT_PAID'">
  938 + <td class="tdFeeType" :rules="subtotalRules">{{ feeType.subTotal }}</td>
  939 + <td class="tdFeeType" v-if="invoiceData.paymentStatus === 'NOT_PAID'">
366 940 <v-text-field
367 941 placeholder="fill your Paid Amount"
368 942 v-model="feeType.paidAmount"
369 943 type="number"
370 944 :disabled="disabled"
  945 + :rules="paymentRules"
  946 + required
371 947 ></v-text-field>
372   - </td> -->
  948 + </td>
373 949 <td class="tdFeeType" v-if="invoiceData.paymentStatus == ''">
374 950 <v-text-field
375 951 placeholder="fill your Paid Amount"
376 952 v-model="feeType.paidAmount"
377 953 type="number"
378 954 :disabled="disabled"
  955 + :rules="paymentRules"
  956 + required
379 957 ></v-text-field>
380 958 </td>
381 959 <td
... ... @@ -386,6 +964,8 @@
386 964 placeholder="fill your Paid Amount"
387 965 v-model="feeType.paidAmount"
388 966 type="number"
  967 + :rules="paymentRules"
  968 + required
389 969 ></v-text-field>
390 970 </td>
391 971 <td class="tdFeeType">
... ... @@ -395,10 +975,13 @@
395 975 <tfoot>
396 976 <tr>
397 977 <td colspan="2" class="tdFeeType">Total:</td>
398   - <td class="tdFeeType">{{ feeType.amount }}</td>
399   - <td class="tdFeeType">{{ feeType.discount }}</td>
400   - <td class="tdFeeType">{{ feeType.subTotal }}</td>
401   - <td class="tdFeeType">{{ feeType.paidAmount }}</td>
  978 + <td class="tdFeeType" :rules="amountRules">{{ feeType.amount }}</td>
  979 + <td class="tdFeeType" :rules="discountRules">{{ feeType.discount }}</td>
  980 + <td class="tdFeeType" :rules="subtotalRules">{{ feeType.subTotal }}</td>
  981 + <td class="tdFeeType" :rules="paidAmountRules">{{ feeType.paidAmount }}</td>
  982 + <td class="tdFeeType">
  983 + <v-icon color="error" @click="deleteSelectFee(index)">delete</v-icon>
  984 + </td>
402 985 </tr>
403 986 </tfoot>
404 987 </table>
... ... @@ -443,9 +1026,23 @@ export default {
443 1026 newActive: false,
444 1027 showFeeType: false,
445 1028 addInvoiceDialog: false,
  1029 + editInvoiceDialog: false,
  1030 + paymentInvoiceDialog: false,
446 1031 disabled: true,
447 1032 details: [],
448 1033 feeTypes: [],
  1034 + invoiceData: [],
  1035 + invoiceList: [
  1036 + {
  1037 + studentId: {
  1038 + name: "",
  1039 + rollNo: "",
  1040 + },
  1041 + classId: {
  1042 + classNum: ""
  1043 + }
  1044 + }
  1045 + ],
449 1046 menu1: false,
450 1047 paymentMethods: ["Cash", "Cheque"],
451 1048 feeType: {
... ... @@ -455,6 +1052,13 @@ export default {
455 1052 subTotal: "0.00",
456 1053 feeTypeName: ""
457 1054 },
  1055 + invoiceData: {
  1056 + amount: "0.00",
  1057 + discount: "0.00",
  1058 + paidAmount: 0.0,
  1059 + subTotal: "0.00",
  1060 + feeTypeName: ""
  1061 + },
458 1062 feeTypeData: [],
459 1063 pagination: {
460 1064 rowsPerPage: 10
... ... @@ -464,6 +1068,13 @@ export default {
464 1068 dateRules: [v => !!v || " Date is required"],
465 1069 paymentStatusRules: [v => !!v || "Payment Status is required"],
466 1070 paymentMethodsRules: [v => !!v || "payment Method is required"],
  1071 + feeTypeRules: [v => !!v || "Fee Type is required"],
  1072 + feeTypeNameRules: [v => !!v || "Fee Type Name is required"],
  1073 + amountRules: [v => !!v || "Amount is required"],
  1074 + discountRules: [v => !!v || "Discount is required"],
  1075 + subtotalRules: [v => !!v || "Subtotal is required"],
  1076 + paymentRules: [v => !!v || "Payment is required"],
  1077 + paidAmountRules: [v => !!v || "Paid Amount is required"],
467 1078 headers: [
468 1079 {
469 1080 text: "No",
... ... @@ -471,12 +1082,12 @@ export default {
471 1082 sortable: false,
472 1083 value: "No"
473 1084 },
474   - // {
475   - // text: "Student",
476   - // value: "student",
477   - // sortable: false,
478   - // align: "center"
479   - // },
  1085 + {
  1086 + text: "Student",
  1087 + value: "name",
  1088 + sortable: false,
  1089 + align: "center"
  1090 + },
480 1091 { text: "Class", value: "class", sortable: false, align: "center" },
481 1092 { text: "Total", value: "subtotal", sortable: false, align: "center" },
482 1093 { text: "Discount", value: "discount", sortable: false, align: "center" },
... ... @@ -506,7 +1117,43 @@ export default {
506 1117 },
507 1118 { text: "Action", value: "", sortable: false, align: "center" }
508 1119 ],
509   - invoiceList: [],
  1120 + headersProfile: [
  1121 + {
  1122 + text: "No",
  1123 + align: "",
  1124 + sortable: false,
  1125 + value: "No"
  1126 + },
  1127 + {
  1128 + text: "Date",
  1129 + value: "date",
  1130 + sortable: false,
  1131 + align: "center"
  1132 + },
  1133 + {
  1134 + text: "Paid By",
  1135 + value: "paymentMethod",
  1136 + sortable: false,
  1137 + align: "center"
  1138 + },
  1139 + {
  1140 + text: "Payment Amount",
  1141 + value: "paidAmount",
  1142 + sortable: false,
  1143 + align: "center"
  1144 + },
  1145 + { text: "Weaver", value: "discount", sortable: false, align: "center" },
  1146 + // {
  1147 + // text: "Fine",
  1148 + // value: "fine",
  1149 + // sortable: false,
  1150 + // align: "center"
  1151 + // },
  1152 + { text: "Action", value: "", sortable: false, align: "center" }
  1153 + ],
  1154 + studentId: {
  1155 + name: ""
  1156 + },
510 1157 token: "",
511 1158 editedItem: {},
512 1159 invoiceData: {
... ... @@ -537,11 +1184,21 @@ export default {
537 1184 dates: function(date) {
538 1185 return moment(date).format("MMMM DD, YYYY");
539 1186 },
540   - // profile(item) {
541   - // this.editedIndex = this.InvoiceList.indexOf(item);
542   - // this.editedItem = Object.assign({}, item);
543   - // this.dialog1 = true;
544   - // },
  1187 + profile(item) {
  1188 + this.editedIndex = this.invoiceList.indexOf(item);
  1189 + this.editedItem = Object.assign({}, item);
  1190 + this.dialog1 = true;
  1191 + },
  1192 + editItem(item) {
  1193 + this.editedIndex = this.invoiceList.indexOf(item);
  1194 + this.invoiceData = Object.assign({}, item);
  1195 + this.editInvoiceDialog = true;
  1196 + },
  1197 + paymentItem(item) {
  1198 + this.editedIndex = this.invoiceList.indexOf(item);
  1199 + this.invoiceList = Object.assign({}, item);
  1200 + this.paymentInvoiceDialog = true;
  1201 + },
545 1202 deleteItem(item) {
546 1203 let deleteInvoice = {
547 1204 invoiceId: item._id
... ... @@ -557,6 +1214,7 @@ export default {
557 1214 this.snackbar = true;
558 1215 this.text = "Successfully delete Existing Invoice";
559 1216 this.color = "green";
  1217 + this.dialog1 = false;
560 1218 this.getInvoiceList();
561 1219 })
562 1220 .catch(error => {
... ... @@ -591,51 +1249,75 @@ export default {
591 1249 }
592 1250 }
593 1251 // if (this.$refs.form.validate()) {
594   - let invoiceData = {
595   - classId: this.invoiceData.classNum,
596   - students: this.invoiceData.students,
597   - date: this.invoiceData.date,
598   - paymentStatus: this.invoiceData.paymentStatus,
599   - paymentMethod: this.invoiceData.paymentMethod,
600   - feeType: this.feeTypeData,
601   - totalAmount: this.feeType.amount,
602   - totalDiscount: this.feeType.discount,
603   - totalSubTotal: this.feeType.subTotal,
604   - totalPaidAmount: this.feeType.paidAmount
605   - };
606   - console.log("invoiceData",invoiceData)
607   - // if (invoiceData.paymentStatus == "NOT_PAID") {
608   - // delete invoiceData.totalPaidAmount;
609   - // }
610   - http()
611   - .post("/createInvoice", invoiceData)
612   - .then(response => {
613   - this.getInvoiceList();
614   - this.snackbar = true;
615   - this.text = "New Invoice added successfully";
616   - this.color = "green";
617   - this.clear();
618   - this.feeTypeData = [];
619   - if (this.feeTypeData.length == 0) {
620   - this.feeType = {
621   - amount: "0.00",
622   - discount: "0.00",
623   - paidAmount: "0.00",
624   - subTotal: "0.00",
625   - feeTypeList: ""
626   - };
627   - }
628   - this.loading = false;
629   - this.addInvoiceDialog = false;
630   - })
631   - .catch(error => {
632   - this.snackbar = true;
633   - this.text = error.response.data.errors[0].messages[0];
634   - this.color = "error";
635   - this.loading = false;
636   - });
  1252 + let invoiceData = {
  1253 + classId: this.invoiceData.classNum,
  1254 + students: this.invoiceData.students,
  1255 + date: this.invoiceData.date,
  1256 + paymentStatus: this.invoiceData.paymentStatus,
  1257 + paymentMethod: this.invoiceData.paymentMethod,
  1258 + feeType: this.feeTypeData,
  1259 + totalAmount: this.feeType.amount,
  1260 + totalDiscount: this.feeType.discount,
  1261 + totalSubTotal: this.feeType.subTotal,
  1262 + totalPaidAmount: this.feeType.paidAmount
  1263 + };
  1264 + console.log("invoiceData", invoiceData);
  1265 + if (invoiceData.paymentStatus == "NOT_PAID") {
  1266 + delete invoiceData.totalPaidAmount;
  1267 + }
  1268 + http()
  1269 + .post("/createInvoice", invoiceData)
  1270 + .then(response => {
  1271 + this.getInvoiceList();
  1272 + this.snackbar = true;
  1273 + this.text = "New Invoice added successfully";
  1274 + this.color = "green";
  1275 + this.clear();
  1276 + this.feeTypeData = [];
  1277 + if (this.feeTypeData.length == 0) {
  1278 + this.feeType = {
  1279 + amount: "0.00",
  1280 + discount: "0.00",
  1281 + paidAmount: "0.00",
  1282 + subTotal: "0.00",
  1283 + feeTypeList: ""
  1284 + };
  1285 + }
  1286 + this.loading = false;
  1287 + this.addInvoiceDialog = false;
  1288 + })
  1289 + .catch(error => {
  1290 + this.snackbar = true;
  1291 + this.text = error.response.data.errors[0].messages[0];
  1292 + this.color = "error";
  1293 + this.loading = false;
  1294 + });
637 1295 // }
638 1296 },
  1297 + update() {
  1298 + var updatePayment = {
  1299 + invoiceId: this.invoiceData._id,
  1300 + totalPaidAmount: this.invoiceData.paidAmount
  1301 + };
  1302 + http()
  1303 + .put("/updateInvoice", updatePayment, {
  1304 + headers: {
  1305 + Authorization: "Bearer " + this.token
  1306 + }
  1307 + })
  1308 + .then(response => {
  1309 + this.getInvoiceList();
  1310 + this.snackbar = true;
  1311 + this.text = response.data.message;
  1312 + this.color = "green";
  1313 + this.editInvoiceDialog = false;
  1314 + })
  1315 + .catch(error => {
  1316 + console.log("error", error);
  1317 + this.snackbar = true;
  1318 + this.color = "red";
  1319 + });
  1320 + },
639 1321 clear() {
640 1322 this.$refs.form.reset();
641 1323 },
... ... @@ -733,6 +1415,14 @@ export default {
733 1415 // this.$router.replace({ path: "/" });
734 1416 });
735 1417 },
  1418 + getPaymentDetails(feeTyp) {
  1419 + let feeType = {
  1420 + date: "",
  1421 + paymentMethod: "",
  1422 + totalAmount: "",
  1423 + discount: ""
  1424 + };
  1425 + },
736 1426 getAmmountDetails(feeTyp) {
737 1427 let feeType = {
738 1428 amount: "",
... ... @@ -793,7 +1483,7 @@ export default {
793 1483 }
794 1484 },
795 1485 selectAllStudent() {
796   - console.log("this.studentId", this.invoiceData.studentId);
  1486 + // console.log("this.studentId", this.invoiceData.studentId);
797 1487 this.invoiceData.students = [];
798 1488 if (this.invoiceData.studentId === "Select All") {
799 1489 for (let i = 1; i < this.studentList.length; i++) {
... ... @@ -820,6 +1510,7 @@ export default {
820 1510 this.getInvoiceList();
821 1511 this.getAllClasses();
822 1512 this.getfeeType();
  1513 + this.getAllStudents();
823 1514 }
824 1515 };
825 1516 </script>
... ...
src/pages/Account/viewInvoice.vue
Diff comments   View file @81d876b
... ... @@ -15,82 +15,93 @@
15 15 <!-- ****** TABLE DATA MARK ****** -->
16 16 <v-flex xs12 sm12 md12>
17 17 <v-card>
18   - <v-layout wrap>
19   - <v-flex 12>
20   - <br />
21   - <v-layout>
22   - <v-flex xs12 sm12 md12 class="text-xs-center">
23   - <img :src="userData.schoolLogoUrl" width="140" alt="logo" />
  18 + <v-layout wrap>
  19 + <v-flex 12>
  20 + <br />
  21 + <v-layout>
  22 + <v-flex xs12 sm12 md12 class="text-xs-center">
  23 + <!-- <img :src="userData.schoolLogoUrl" width="140" alt="logo" />
24 24 <p class="title">{{ userData.name }}</p>
25   - <p>{{ userData.address }}</p>
26   - </v-flex>
  25 + <p>{{ userData.address }}</p>-->
  26 + <v-avatar>
  27 + <img :src="userData.schoolLogoUrl" v-if="userData.schoolLogoUrl" />
  28 + <img
  29 + src="/static/schoolIcons/INTRACK_White.png"
  30 + v-else-if="!userData.schoolLogoUrl"
  31 + />
  32 + </v-avatar>
  33 + <p class="title">{{ userData.name }}</p>
  34 + <p>{{ userData.address }}</p>
  35 + </v-flex>
27 36  
28   - <v-flex xs12 sm12 md12 class="text-xs-center">
29   - <v-layout>
30   - <v-flex xs4 sm2>
31   - <h5 class="right my-1">
32   - <b>invoice:</b>
33   - </h5>
34   - </v-flex>
35   - <v-flex sm11 xs8>
36   - <h5 class="my-1">#{{ invoiceParticularData.invoiceNumber }}</h5>
37   - </v-flex>
38   - </v-layout>
39   - <v-layout>
40   - <v-flex xs4 sm2>
41   - <h5 class="right my-1">
42   - <b>Name:</b>
43   - </h5>
44   - </v-flex>
45   - <v-flex sm11 xs8>
46   - <h5 class="my-1">{{ invoiceParticularData.studentId.name }}</h5>
47   - </v-flex>
48   - </v-layout>
49   - <v-layout>
50   - <v-flex xs4 sm2>
51   - <h5 class="right my-1">
52   - <b>Class:</b>
53   - </h5>
54   - </v-flex>
55   - <v-flex sm11 xs8>
56   - <h5 class="my-1">{{ invoiceParticularData.classId.classNum }}</h5>
57   - </v-flex>
58   - </v-layout>
59   - <!-- <v-flex xs12 sm6> -->
60   - <v-layout>
61   - <v-flex xs4 sm2>
62   - <h5 class="right my-1">
63   - <b>Roll No:</b>
64   - </h5>
65   - </v-flex>
66   - <v-flex sm6 xs8>
67   - <h5 class="my-1">{{ invoiceParticularData.studentId.rollNo }}</h5>
68   - </v-flex>
69   - </v-layout>
70   - <v-layout>
71   - <v-flex xs4 sm2>
72   - <h5 class="right my-1">
73   - <b>email:</b>
74   - </h5>
75   - </v-flex>
76   - <v-flex sm6 xs8>
77   - <h5 class="my-1 linkCover">{{ invoiceParticularData.studentId.email }}</h5>
78   - </v-flex>
79   - </v-layout>
80   - <v-layout>
81   - <v-flex xs4 sm2>
82   - <h5 class="right my-1">
83   - <b>Status :</b>
84   - </h5>
85   - </v-flex>
86   - <v-flex sm6 xs8>
87   - <h5 class="my-1">{{ invoiceParticularData.paymentStatus }}</h5>
88   - </v-flex>
89   - </v-layout>
90   - </v-flex>
91   - </v-layout>
92   - </v-flex>
93   - </v-layout>
  37 + <v-flex xs12 sm12 md12 class="text-xs-center">
  38 + <v-layout>
  39 + <v-flex xs4 sm2>
  40 + <h5 class="right my-1">
  41 + <b>Name:</b>
  42 + </h5>
  43 + </v-flex>
  44 + <v-flex sm11 xs8>
  45 + <h5 class="my-1">{{ invoiceParticularData.studentId.name }}</h5>
  46 + </v-flex>
  47 + </v-layout>
  48 + <v-layout>
  49 + <v-flex xs4 sm2>
  50 + <h5 class="right my-1">
  51 + <b>Class:</b>
  52 + </h5>
  53 + </v-flex>
  54 + <v-flex sm11 xs8>
  55 + <h5 class="my-1">{{ invoiceParticularData.classId.classNum }}</h5>
  56 + </v-flex>
  57 + </v-layout>
  58 + <!-- <v-flex xs12 sm6> -->
  59 + <v-layout>
  60 + <v-flex xs4 sm2>
  61 + <h5 class="right my-1">
  62 + <b>Roll No:</b>
  63 + </h5>
  64 + </v-flex>
  65 + <v-flex sm6 xs8>
  66 + <h5 class="my-1">{{ invoiceParticularData.studentId.rollNo }}</h5>
  67 + </v-flex>
  68 + </v-layout>
  69 + <v-layout>
  70 + <v-flex xs4 sm2>
  71 + <h5 class="right my-1">
  72 + <b>email:</b>
  73 + </h5>
  74 + </v-flex>
  75 + <v-flex sm6 xs8>
  76 + <h5 class="my-1 linkCover">{{ invoiceParticularData.studentId.email }}</h5>
  77 + </v-flex>
  78 + </v-layout>
  79 + </v-flex>
  80 + <v-flex xs12 sm12 md12 class="text-xs-center">
  81 + <v-layout>
  82 + <v-flex xs4 sm2>
  83 + <h5 class="right my-1">
  84 + <b>invoice:</b>
  85 + </h5>
  86 + </v-flex>
  87 + <v-flex sm11 xs8>
  88 + <h5 class="my-1">#{{ invoiceParticularData.invoiceNumber }}</h5>
  89 + </v-flex>
  90 + </v-layout>
  91 + <v-layout>
  92 + <v-flex xs4 sm2>
  93 + <h5 class="right my-1">
  94 + <b>Status :</b>
  95 + </h5>
  96 + </v-flex>
  97 + <v-flex sm6 xs8>
  98 + <h5 class="my-1">{{ invoiceParticularData.paymentStatus }}</h5>
  99 + </v-flex>
  100 + </v-layout>
  101 + </v-flex>
  102 + </v-layout>
  103 + </v-flex>
  104 + </v-layout>
94 105 <table class="feeTypeTable tableRsponsive">
95 106 <tr class="info white--text">
96 107 <th>#</th>
... ... @@ -110,7 +121,7 @@
110 121 <td style="width:120px">{{ feeType.amount-feeType.subTotal }}</td>
111 122 <td style="width:120px">{{ feeType.subTotal }}</td>
112 123 </tr>
113   - <!-- <tfoot>
  124 + <tfoot>
114 125 <tr>
115 126 <td colspan="4">
116 127 <span class="right subheding">Total Amount (RS) :</span>
... ... @@ -125,11 +136,17 @@
125 136 </tr>
126 137 <tr>
127 138 <td colspan="4">
  139 + <span class="right subheding">Discount (RS) :</span>
  140 + </td>
  141 + <td>{{ feeType.amount - feeType.subTotal }}</td>
  142 + </tr>
  143 + <tr>
  144 + <td colspan="4">
128 145 <span class="right subheding">Balance (RS) :</span>
129 146 </td>
130 147 <td>{{ feeType.totalPaidAmount ? feeType.subTotal - feeType.totalPaidAmount : feeType.subTotal }}</td>
131 148 </tr>
132   - </tfoot>-->
  149 + </tfoot>
133 150 </table>
134 151 </v-card>
135 152 </v-flex>
... ... @@ -167,11 +184,11 @@ export default {
167 184 },
168 185 classId: {
169 186 classNum: ""
170   - },
  187 + }
171 188 },
172 189 userData: {
173 190 name: ""
174   - },
  191 + }
175 192 }),
176 193  
177 194 methods: {
... ... @@ -257,7 +274,6 @@ export default {
257 274 this.getInvoiceList();
258 275 this.getfeeType();
259 276 this.getUserData();
260   -
261 277 },
262 278 created() {
263 279 this.$root.$on("app:search", search => {
... ...
src/pages/Account/viewPaymentInvoice.vue
Diff comments   View file @81d876b
... ... @@ -0,0 +1,322 @@
  1 +<template>
  2 + <v-app id="pages-dasboard">
  3 + <!-- ****** Edit INVOICE ****** -->
  4 + <v-container fluid grid-list-md>
  5 + <v-layout>
  6 + <v-flex xs12 sm8 md10>
  7 + <v-btn class="open-dialog-button mt-3" round dark @click="printInvoice()">
  8 + Print
  9 + <v-icon size="18" right dark>print</v-icon>
  10 + </v-btn>
  11 + </v-flex>
  12 + </v-layout>
  13 + <v-flex xs12 sm12 id="printMe">
  14 + <v-layout wrap>
  15 + <!-- ****** TABLE DATA MARK ****** -->
  16 + <v-flex xs12 sm12 md12>
  17 + <v-card>
  18 + <v-layout wrap>
  19 + <v-flex 12>
  20 + <br />
  21 + <v-layout>
  22 + <v-flex xs12 sm12 md12 class="text-xs-center">
  23 + <!-- <img :src="userData.schoolLogoUrl" width="140" alt="logo" />
  24 + <p class="title">{{ userData.name }}</p>
  25 + <p>{{ userData.address }}</p>-->
  26 + <v-avatar>
  27 + <img :src="userData.schoolLogoUrl" v-if="userData.schoolLogoUrl" />
  28 + <img
  29 + src="/static/schoolIcons/INTRACK_White.png"
  30 + v-else-if="!userData.schoolLogoUrl"
  31 + />
  32 + </v-avatar>
  33 + <p class="title">{{ userData.name }}</p>
  34 + <p>{{ userData.address }}</p>
  35 + </v-flex>
  36 +
  37 + <v-flex xs12 sm12 md12 class="text-xs-center">
  38 + <v-layout>
  39 + <v-flex xs4 sm2>
  40 + <h5 class="right my-1">
  41 + <b>Name:</b>
  42 + </h5>
  43 + </v-flex>
  44 + <v-flex sm11 xs8>
  45 + <h5 class="my-1">{{ invoiceParticularData.studentId.name }}</h5>
  46 + </v-flex>
  47 + </v-layout>
  48 + <v-layout>
  49 + <v-flex xs4 sm2>
  50 + <h5 class="right my-1">
  51 + <b>Class:</b>
  52 + </h5>
  53 + </v-flex>
  54 + <v-flex sm11 xs8>
  55 + <h5 class="my-1">{{ invoiceParticularData.classId.classNum }}</h5>
  56 + </v-flex>
  57 + </v-layout>
  58 + <!-- <v-flex xs12 sm6> -->
  59 + <v-layout>
  60 + <v-flex xs4 sm2>
  61 + <h5 class="right my-1">
  62 + <b>Roll No:</b>
  63 + </h5>
  64 + </v-flex>
  65 + <v-flex sm6 xs8>
  66 + <h5 class="my-1">{{ invoiceParticularData.studentId.rollNo }}</h5>
  67 + </v-flex>
  68 + </v-layout>
  69 + <v-layout>
  70 + <v-flex xs4 sm2>
  71 + <h5 class="right my-1">
  72 + <b>email:</b>
  73 + </h5>
  74 + </v-flex>
  75 + <v-flex sm6 xs8>
  76 + <h5 class="my-1 linkCover">{{ invoiceParticularData.studentId.email }}</h5>
  77 + </v-flex>
  78 + </v-layout>
  79 + </v-flex>
  80 + <v-flex xs12 sm12 md12 class="text-xs-center">
  81 + <v-layout>
  82 + <v-flex xs4 sm2>
  83 + <h5 class="right my-1">
  84 + <b>invoice:</b>
  85 + </h5>
  86 + </v-flex>
  87 + <v-flex sm11 xs8>
  88 + <h5 class="my-1">#{{ invoiceParticularData.invoiceNumber }}</h5>
  89 + </v-flex>
  90 + </v-layout>
  91 + <v-layout>
  92 + <v-flex xs4 sm2>
  93 + <h5 class="right my-1">
  94 + <b>Payment Method :</b>
  95 + </h5>
  96 + </v-flex>
  97 + <v-flex sm6 xs8>
  98 + <h5 class="my-1">{{ invoiceParticularData.paymentMethod }}</h5>
  99 + </v-flex>
  100 + </v-layout>
  101 + </v-flex>
  102 + </v-layout>
  103 + </v-flex>
  104 + </v-layout>
  105 + <table class="feeTypeTable tableRsponsive">
  106 + <tr class="info white--text">
  107 + <th>#</th>
  108 + <th>Fee Type</th>
  109 + <th>Amount</th>
  110 + <th>Discount</th>
  111 + <th>Subtotal</th>
  112 + </tr>
  113 + <tr
  114 + v-for="(feeType, index) in feeTypeData"
  115 + :key="index"
  116 + v-on:keyup="getAmmountDetails(feeType)"
  117 + >
  118 + <td style="width:40px">{{ index + 1 }}</td>
  119 + <td style="width:120px">{{ feeType.feeTypeName }}</td>
  120 + <td style="width:120px">{{ feeType.amount }}</td>
  121 + <td style="width:120px">{{ feeType.amount-feeType.subTotal }}</td>
  122 + <td style="width:120px">{{ feeType.subTotal }}</td>
  123 + </tr>
  124 + <tfoot>
  125 + <tr>
  126 + <td colspan="2">
  127 + <span class="right subheding">Total Amount (RS) :</span>
  128 + </td>
  129 + <td>{{ feeType.amount }}</td>
  130 + <td>{{ feeType.amount-feeType.subTotal }}</td>
  131 + <td>{{ feeType.subTotal }}</td>
  132 + </tr>
  133 + <!-- <tr>
  134 + <td colspan="4">
  135 + <span class="right subheding">Paid (RS) :</span>
  136 + </td>
  137 + <td>{{ feeType.totalPaidAmount ? feeType.totalPaidAmount : 0 }}</td>
  138 + </tr>
  139 + <tr>
  140 + <td colspan="4">
  141 + <span class="right subheding">Balance (RS) :</span>
  142 + </td>
  143 + <td>{{ feeType.totalPaidAmount ? feeType.subTotal - feeType.totalPaidAmount : feeType.subTotal }}</td>
  144 + </tr> -->
  145 + </tfoot>
  146 + </table>
  147 + </v-card>
  148 + </v-flex>
  149 + </v-layout>
  150 + </v-flex>
  151 + </v-container>
  152 + <div class="loader" v-if="showLoader">
  153 + <v-progress-circular indeterminate color="white"></v-progress-circular>
  154 + </div>
  155 + </v-app>
  156 +</template>
  157 +
  158 +<script>
  159 +import http from "@/Services/http.js";
  160 +import moment from "moment";
  161 +
  162 +export default {
  163 + data: () => ({
  164 + showLoader: false,
  165 + feeTypes: [],
  166 + filterData: [],
  167 + invoiceData: {},
  168 + feeType: {
  169 + amount: "",
  170 + discount: "",
  171 + totalPaidAmount: "",
  172 + subTotal: "",
  173 + feeTypeName: ""
  174 + },
  175 + feeTypeData: [],
  176 + token: "",
  177 + invoiceParticularData: {
  178 + studentId: {
  179 + name: ""
  180 + },
  181 + classId: {
  182 + classNum: ""
  183 + }
  184 + },
  185 + userData: {
  186 + name: ""
  187 + }
  188 + }),
  189 +
  190 + methods: {
  191 + getInvoiceList() {
  192 + http()
  193 + .get("/getParticularInvoice", {
  194 + params: {
  195 + invoiceId: this.$route.params.viewPaymentInvoiceId,
  196 + schoolId: this.$store.state.schoolId
  197 + },
  198 + headers: { Authorization: "Bearer " + this.token }
  199 + })
  200 + .then(response => {
  201 + this.invoiceParticularData = response.data.data;
  202 + this.invoiceData = this.invoiceParticularData;
  203 + this.invoiceData.date = this.invoiceParticularData.date.slice(0, 10);
  204 + this.feeTypeData = this.invoiceParticularData.feeType;
  205 + (this.feeType.amount = response.data.data.totalAmount),
  206 + (this.feeType.discount = response.data.data.totalDiscount),
  207 + (this.feeType.subTotal = response.data.data.totalSubTotal),
  208 + (this.feeType.totalPaidAmount = response.data.data.totalPaidAmount);
  209 + this.showLoader = false;
  210 + })
  211 + .catch(error => {
  212 + this.showLoader = false;
  213 + if (error.response.status === 401) {
  214 + this.$router.replace({ path: "/" });
  215 + this.$store.dispatch("setToken", null);
  216 + this.$store.dispatch("Id", null);
  217 + this.$store.dispatch("Role", null);
  218 + }
  219 + });
  220 + },
  221 + getfeeType() {
  222 + http()
  223 + .get("/getFeesList", {
  224 + params: { schoolId: this.$store.state.schoolId },
  225 + headers: { Authorization: "Bearer " + this.token }
  226 + })
  227 + .then(response => {
  228 + this.feeTypes = response.data.data;
  229 + })
  230 + .catch(err => {
  231 + // console.log("err====>", err);
  232 + });
  233 + },
  234 + getAmmountDetails(feeTyp) {
  235 + let feeType = {
  236 + subTotal: "",
  237 + subParticularTotal: "",
  238 + paidAmount: ""
  239 + };
  240 + // *********** SUBTOTAL ***********
  241 + feeType.subTotal =
  242 + Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal);
  243 + this.feeType.subTotal = feeType.subTotal.toFixed(2);
  244 + // *********** PAID-AMOUNT ***********
  245 + feeType.paidAmount =
  246 + Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);
  247 + this.feeType.paidAmount = feeType.paidAmount.toFixed(2);
  248 + },
  249 + printInvoice() {
  250 + // Pass the element id here
  251 + this.$htmlToPaper("printMe");
  252 + },
  253 + getUserData() {
  254 + http()
  255 + .get("/getParticularUserDetail")
  256 + .then(response => {
  257 + this.userData = response.data.data;
  258 + })
  259 + .catch(error => {
  260 + // if (error.response.status === 401) {
  261 + // this.$router.replace({ path: "/" });
  262 + // this.$store.dispatch("setToken", null);
  263 + // this.$store.dispatch("Id", null);
  264 + // }
  265 + });
  266 + }
  267 + },
  268 + mounted() {
  269 + this.token = this.$store.state.token;
  270 + this.getInvoiceList();
  271 + this.getfeeType();
  272 + this.getUserData();
  273 + },
  274 + created() {
  275 + this.$root.$on("app:search", search => {
  276 + this.search = search;
  277 + });
  278 + },
  279 + beforeDestroy() {
  280 + // dont forget to remove the listener
  281 + this.$root.$off("app:search");
  282 + }
  283 +};
  284 +</script>
  285 +
  286 +
  287 +<style scoped>
  288 +.active {
  289 + background-color: gray;
  290 + color: white !important;
  291 +}
  292 +.activebtn {
  293 + color: black !important;
  294 +}
  295 +table {
  296 + border-collapse: collapse;
  297 + border: 1px solid #e2e7eb;
  298 +}
  299 +.open-dialog-button {
  300 + background: #827bfa !important;
  301 + border-color: #827bfa !important;
  302 + text-transform: none !important;
  303 +}
  304 +
  305 +th,
  306 +td {
  307 + border: 1px solid #e2e7eb;
  308 + padding: 10px;
  309 + text-align: center;
  310 +}
  311 +table.feeTypeTable {
  312 + table-layout: auto !important;
  313 + width: 100% !important;
  314 +}
  315 +@media screen and (max-width: 380px) {
  316 + .tableRsponsive {
  317 + display: block;
  318 + position: relative;
  319 + overflow: scroll;
  320 + }
  321 +}
  322 +</style>
0 323 \ No newline at end of file
... ...
src/router/paths.js
Diff comments   View file @81d876b
... ... @@ -517,18 +517,18 @@ export default [{
517 517 `@/pages/Account/viewInvoice.vue`
518 518 )
519 519 },
520   - // {
521   - // path: '/viewPaymentInvoice/:viewPaymentInvoiceId',
522   - // meta: {},
523   - // name: 'View Payment Invoice',
524   - // props: (route) => ({ type: route.query.type }),
525   - // component: () =>
526   - // import (
527   - // /* webpackChunkName: "routes" */
528   - // /* webpackMode: "lazy-once" */
529   - // `@/pages/Account/viewPaymentInvoice.vue`
530   - // )
531   - // },
  520 + {
  521 + path: '/viewPaymentInvoice/:viewPaymentInvoiceId',
  522 + meta: {},
  523 + name: 'View Payment Invoice',
  524 + props: (route) => ({ type: route.query.type }),
  525 + component: () =>
  526 + import (
  527 + /* webpackChunkName: "routes" */
  528 + /* webpackMode: "lazy-once" */
  529 + `@/pages/Account/viewPaymentInvoice.vue`
  530 + )
  531 + },
532 532 {
533 533 path: '/globalPayment',
534 534 meta: {},
... ...