Blame view

src/pages/Account/invoice.vue 57.1 KB
687e0b929   Neeraj Sharma   add user,attenden...
1
  <template>
68d742034   Neeraj Sharma   implement new des...
2
    <v-container fluid class="body-color">
81d876b5d   Shikha Mishra   salary invoice de...
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
      <!-- ****** 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>
          <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.classId"
                            item-text="classNum"
                            item-value="_id"
                            :rules="classRules"
                            @change="getAllStudents()"
                            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"
                            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="update"
                              round
                              dark
                              :loading="loading"
                              class="add-button"
                            >Update</v-btn>
                          </v-card-actions>
                        </v-flex>
                      </v-layout>
                    </v-form>
                  </v-card>
                </v-flex>
                <v-flex xs12 sm12 md7>
                  <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"
                          :rules="feeTypeRules"
                          v-model="invoiceData.feeTypeName"
                          item-text="feeType"
                          item-value="feeType"
                          label="Select Fee Type"
                        ></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="(invoiceData, 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">
                          <v-text-field
                            :rules="feeTypeNameRules"
                            placeholder="fill your Fee Type"
                            v-model="invoiceData.feeTypeName"
                          ></v-text-field>
                        </td>
                        <td>
                          <v-text-field
                            :rules="amountRules"
                            placeholder="fill your Amount"
                            v-model="invoiceData.amount"
                            type="number"
                          ></v-text-field>
                        </td>
                        <td class="tdFeeType">
                          <v-text-field
                            :rules="discountRules"
                            placeholder="fill your Discount"
                            v-model="invoiceData.discount"
                            type="number"
                          ></v-text-field>
                        </td>
                        <td class="tdFeeType">{{ invoiceData.subTotal }}</td>
                        <td class="tdFeeType" v-if="invoiceData.paymentStatus === 'NOT_PAID'">
                          <v-text-field
                            placeholder="fill your Paid Amount"
                            v-model="invoiceData.paidAmount"
                            type="number"
                            :rules="paymentRules"
                            :disabled="disabled"
                          ></v-text-field>
                        </td>
                        <td class="tdFeeType" v-if="invoiceData.paymentStatus == ''">
                          <v-text-field
                            placeholder="fill your Paid Amount"
                            v-model="invoiceData.paidAmount"
                            type="number"
                            :rules="paymentRules"
                            :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="invoiceData.paidAmount"
                            :rules="paymentRules"
                            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" :rules="amountRules">{{ invoiceData.amount }}</td>
                          <td class="tdFeeType" :rules="discountRules">{{ invoiceData.discount }}</td>
                          <td class="tdFeeType" :rules="subtotalRules">{{ invoiceData.subTotal }}</td>
                          <td class="tdFeeType" :rules="paidAmountRules">{{ invoiceData.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>
68d742034   Neeraj Sharma   implement new des...
259
          </v-flex>
81d876b5d   Shikha Mishra   salary invoice de...
260
261
262
263
264
265
266
267
268
269
270
271
272
273
        </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>
          <v-flex xs12 sm12>
            <v-container fluid grid-list-md>
68d742034   Neeraj Sharma   implement new des...
274
              <v-layout wrap>
81d876b5d   Shikha Mishra   salary invoice de...
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
                <v-flex xs12 sm12 md5>
                  <v-card flat>
                    <v-toolbar dark class="card-styles" flat>
                      <v-spacer></v-spacer>
                      <h3>Profile</h3>
                      <v-spacer></v-spacer>
                    </v-toolbar>
                    <v-card-text>
                      <v-container>
                        <v-layout wrap>
                          <v-flex xs12>
                            <v-layout>
                              <v-flex
                                xs12
                                class="text-xs-center text-sm-center text-md-center text-lg-center"
                              >
                                <v-avatar size="80px">
                                  <img src="/static/icon/user.png" v-if="!invoiceList.profilePicUrl" />
                                  <img
                                    :src="invoiceList.profilePicUrl"
                                    v-else-if="invoiceList.profilePicUrl"
                                  />
                                </v-avatar>
                              </v-flex>
                            </v-layout>
                            <v-layout>
                              <v-flex xs12 sm12>
                                <h3 class="text-xs-center">
                                  <!-- <b>{{ invoiceList.studentId.name }}</b> -->
                                </h3>
                                <p class="text-xs-center grey--text">Student</p>
                              </v-flex>
                            </v-layout>
                            <v-layout style="border: 1px solid lightgrey;">
                              <v-flex xs6 sm6 class="pa-0">
                                <h4 class="right">
                                  <b>Roll No :</b>
                                </h4>
                              </v-flex>
                              <v-flex sm6 xs6 class="pa-0">
                                <!-- <h4>{{ invoiceList.studentId.rollNo }}</h4> -->
                              </v-flex>
                            </v-layout>
                            <v-layout style="border: 1px solid lightgrey;">
                              <v-flex xs6 sm6 class="pa-0">
                                <h4 class="right">
                                  <b>Class :</b>
                                </h4>
                              </v-flex>
                              <v-flex sm6 xs6 class="pa-0">
                                <!-- <h4>{{ invoiceList.classId.classNum }}</h4> -->
                              </v-flex>
                            </v-layout>
                            <!-- <v-layout style="border: 1px solid lightgrey;">
                              <v-flex xs6 sm6 class="pa-0">
                                <h4 class="right">
                                  <b>Section :</b>
                                </h4>
                              </v-flex>
                              <v-flex sm6 xs6 class="pa-0">
                                <h4>{{ invoiceList.sectionId.name }}</h4>
                              </v-flex>
                            </v-layout>-->
                          </v-flex>
                        </v-layout>
                      </v-container>
                    </v-card-text>
                  </v-card>
                  <v-flex>
                    <v-card>
                      <v-flex xs12 sm12 md12 style="padding-top: 1%;">
                        <v-card flat>
                          <v-toolbar dark class="card-styles" flat>
                            <v-spacer></v-spacer>
                            <h3>Invoice</h3>
                            <v-spacer></v-spacer>
                          </v-toolbar>
                        </v-card>
                        <v-layout>
                          <v-flex xs12>
                            <v-layout>
                              <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="invoiceList.paymentMethod"
                                  label="Select Payment Method"
                                  required
                                ></v-select>
                              </v-flex>
                            </v-layout>
                            <v-card-actions>
                              <v-spacer class="hidden-xs-only"></v-spacer>
                              <v-btn
                                color="open-dialog-button"
                                dark
                                class="right mt-3"
                                @click="save"
                              >Add Payment</v-btn>
                            </v-card-actions>
                          </v-flex>
                        </v-layout>
                      </v-flex>
                    </v-card>
                  </v-flex>
                </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>
                    <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">{{ feeType.feeTypeName }}</td>
                        <td class="tdFeeType">
                          <v-text-field
                            placeholder="fill your Amount"
                            v-model="feeType.amount"
                            type="number"
                          ></v-text-field>
                        </td>
                        <td class="tdFeeType">
                          <v-text-field
                            placeholder="fill your Discount"
                            v-model="feeType.discount"
                            type="number"
                          ></v-text-field>
                        </td>
                        <td class="tdFeeType">{{ 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>
68d742034   Neeraj Sharma   implement new des...
467
468
469
                </v-flex>
              </v-layout>
            </v-container>
81d876b5d   Shikha Mishra   salary invoice de...
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
          </v-flex>
        </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>
          <v-data-table
            :headers="headersProfile"
            :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">{{ dates(props.item.date) }}</td>
                <td class="text-xs-center td td-row">{{ props.item.paymentMethod }}</td>
                <td class="text-xs-center td td-row">{{ props.item.totalAmount }}</td>
                <td class="text-xs-center td td-row">{{ feeType.discount}}</td>
  
                <td class="text-xs-center td td-row">
                  <router-link
                    :to="{ name:'View Payment Invoice',params: { viewPaymentInvoiceId: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>
                  <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>
                </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>
          <!-- <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>
              <td style="width:40px" class="tdFeeType">{{ index + 1 }}</td>
              <td style="width:120px" class="tdFeeType">{{dates( editedItem.date) }}</td>
              <td style="width:120px" class="tdFeeType">{{ editedItem.paymentMethod }}</td>
              <td style="width:120px" class="tdFeeType">{{ editedItem.totalAmount }}</td>
              <td style="width:120px" class="tdFeeType">{{ editedItem.discount}}</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="deleteItem(props.item)"
                    src="/static/icon/delete.png"
                  />
                  <span>Delete</span>
                </v-tooltip>
              </td>
            </tr>
          </table>-->
68d742034   Neeraj Sharma   implement new des...
573
        </v-card>
81d876b5d   Shikha Mishra   salary invoice de...
574
      </v-dialog>
68d742034   Neeraj Sharma   implement new des...
575
      <!-- ****** Invoice Table ****** -->
687e0b929   Neeraj Sharma   add user,attenden...
576

68d742034   Neeraj Sharma   implement new des...
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
      <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">
aa310d61a   Shikha Mishra   added functionali...
599
              <img src="/static/icon/search.png" alt="icon" />
68d742034   Neeraj Sharma   implement new des...
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
            </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>
81d876b5d   Shikha Mishra   salary invoice de...
619
            <td class="text-xs-center td td-row">{{ props.item.studentId.name }}</td>
68d742034   Neeraj Sharma   implement new des...
620
621
622
623
624
625
626
627
628
629
            <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.totalAmount - props.item.totalSubTotal }}</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"
81d876b5d   Shikha Mishra   salary invoice de...
630
            >{{ props.item.totalPaidAmount ? props.item.totalSubTotal - props.item.totalPaidAmount : props.item.totalSubTotal }}</td>
68d742034   Neeraj Sharma   implement new des...
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
            <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">
aa310d61a   Shikha Mishra   added functionali...
648
              <router-link :to="{ name:'View Invoice',params: { viewInvoiceId:props.item._id } }">
68d742034   Neeraj Sharma   implement new des...
649
650
651
652
653
                <v-tooltip top>
                  <img
                    slot="activator"
                    style="cursor:pointer; width:25px; height:25px; "
                    class="mr-3"
aa310d61a   Shikha Mishra   added functionali...
654
                    src="/static/icon/view.png"
68d742034   Neeraj Sharma   implement new des...
655
656
657
658
659
                  />
                  <span>View</span>
                </v-tooltip>
              </router-link>
              <span v-if="props.item.paymentStatus === 'NOT_PAID'">
81d876b5d   Shikha Mishra   salary invoice de...
660
661
662
663
664
665
666
667
668
669
                <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>
68d742034   Neeraj Sharma   implement new des...
670
671
672
673
674
675
                <v-tooltip top>
                  <img
                    slot="activator"
                    style="cursor:pointer;width:20px; height:20px; "
                    class="mr-3"
                    @click="deleteItem(props.item)"
aa310d61a   Shikha Mishra   added functionali...
676
                    src="/static/icon/delete.png"
68d742034   Neeraj Sharma   implement new des...
677
678
679
                  />
                  <span>Delete</span>
                </v-tooltip>
81d876b5d   Shikha Mishra   salary invoice de...
680
681
682
683
684
685
686
687
688
689
                <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>
68d742034   Neeraj Sharma   implement new des...
690
              </span>
81d876b5d   Shikha Mishra   salary invoice de...
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
              <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>
68d742034   Neeraj Sharma   implement new des...
713
714
715
716
717
718
719
720
721
722
723
            </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 ****** -->
81d876b5d   Shikha Mishra   salary invoice de...
724
725
726
727
728
729
730
731
732
      <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">
68d742034   Neeraj Sharma   implement new des...
733
734
        <v-card flat class="text-xs-center white--text">
          <v-layout>
81d876b5d   Shikha Mishra   salary invoice de...
735
736
            <v-flex xs12 class="card-styles pa-2">
              <label class="title text-xs-center">Add Invoice</label>
68d742034   Neeraj Sharma   implement new des...
737
738
739
740
741
742
743
744
745
746
              <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>
81d876b5d   Shikha Mishra   salary invoice de...
747
                      <h3>Invoice</h3>
68d742034   Neeraj Sharma   implement new des...
748
749
750
                      <v-spacer></v-spacer>
                    </v-toolbar>
                    <v-form ref="form" v-model="valid" lazy-validation class="py-4">
687e0b929   Neeraj Sharma   add user,attenden...
751
                      <v-layout>
68d742034   Neeraj Sharma   implement new des...
752
753
754
                        <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>
687e0b929   Neeraj Sharma   add user,attenden...
755
                        </v-flex>
68d742034   Neeraj Sharma   implement new des...
756
757
758
759
760
761
762
763
764
765
766
                        <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>
687e0b929   Neeraj Sharma   add user,attenden...
767
768
769
                        </v-flex>
                      </v-layout>
                      <v-layout>
68d742034   Neeraj Sharma   implement new des...
770
771
772
                        <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>
687e0b929   Neeraj Sharma   add user,attenden...
773
                        </v-flex>
68d742034   Neeraj Sharma   implement new des...
774
775
776
777
778
779
780
781
782
783
784
                        <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>
687e0b929   Neeraj Sharma   add user,attenden...
785
786
787
                        </v-flex>
                      </v-layout>
                      <v-layout>
68d742034   Neeraj Sharma   implement new des...
788
789
                        <v-flex xs4 class="pt-4 subheading">
                          <label class="right">Date:</label>
687e0b929   Neeraj Sharma   add user,attenden...
790
                        </v-flex>
68d742034   Neeraj Sharma   implement new des...
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
                        <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>
687e0b929   Neeraj Sharma   add user,attenden...
815
816
817
                        </v-flex>
                      </v-layout>
                      <v-layout>
68d742034   Neeraj Sharma   implement new des...
818
819
820
                        <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>
687e0b929   Neeraj Sharma   add user,attenden...
821
                        </v-flex>
68d742034   Neeraj Sharma   implement new des...
822
823
824
825
826
827
828
829
830
831
832
                        <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>
687e0b929   Neeraj Sharma   add user,attenden...
833
834
                        </v-flex>
                      </v-layout>
68d742034   Neeraj Sharma   implement new des...
835
836
837
                      <v-layout v-show="showPayMethods">
                        <v-flex xs4 class="pt-4 subheading">
                          <label class="right">Payment Method:</label>
687e0b929   Neeraj Sharma   add user,attenden...
838
                        </v-flex>
68d742034   Neeraj Sharma   implement new des...
839
                        <v-flex xs6 class="ml-3">
687e0b929   Neeraj Sharma   add user,attenden...
840
                          <v-select
68d742034   Neeraj Sharma   implement new des...
841
842
843
844
                            :items="paymentMethods"
                            v-model="invoiceData.paymentMethod"
                            label="Select Payment Method"
                            required
687e0b929   Neeraj Sharma   add user,attenden...
845
846
                          ></v-select>
                        </v-flex>
68d742034   Neeraj Sharma   implement new des...
847
848
849
850
851
852
                      </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>
81d876b5d   Shikha Mishra   salary invoice de...
853
854
855
856
857
858
859
                            <v-btn
                              @click="submit"
                              round
                              dark
                              :loading="loading"
                              class="add-button"
                            >Add</v-btn>
68d742034   Neeraj Sharma   implement new des...
860
                          </v-card-actions>
687e0b929   Neeraj Sharma   add user,attenden...
861
862
                        </v-flex>
                      </v-layout>
68d742034   Neeraj Sharma   implement new des...
863
864
865
866
867
                    </v-form>
                  </v-card>
                </v-flex>
                <v-flex xs12 sm12 md7>
                  <v-card>
81d876b5d   Shikha Mishra   salary invoice de...
868
                    <v-toolbar dark class="card-styles" flat>
68d742034   Neeraj Sharma   implement new des...
869
                      <v-spacer></v-spacer>
81d876b5d   Shikha Mishra   salary invoice de...
870
                      <h3>Fee Type List</h3>
68d742034   Neeraj Sharma   implement new des...
871
872
873
874
                      <v-spacer></v-spacer>
                    </v-toolbar>
                    <v-layout>
                      <v-flex xs4 sm2 class="mt-4 hidden-xs-only hidden-sm-only">
81d876b5d   Shikha Mishra   salary invoice de...
875
                        <label class="right title">Fee Type:</label>
68d742034   Neeraj Sharma   implement new des...
876
877
878
879
880
881
882
883
                      </v-flex>
                      <v-flex xs8 sm4>
                        <v-select
                          :items="feeTypes"
                          v-model="feeType.feeTypeName"
                          item-text="feeType"
                          item-value="feeType"
                          label="Select Fee Type"
81d876b5d   Shikha Mishra   salary invoice de...
884
885
                          :rules="feeTypeRules"
                          required
68d742034   Neeraj Sharma   implement new des...
886
887
888
                        ></v-select>
                      </v-flex>
                      <v-flex xs4 sm6>
81d876b5d   Shikha Mishra   salary invoice de...
889
890
891
892
893
894
895
                        <v-btn
                          color="open-dialog-button"
                          round
                          dark
                          class="right mt-3"
                          @click="selectFeeType"
                        >ADD</v-btn>
68d742034   Neeraj Sharma   implement new des...
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
                      </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>
81d876b5d   Shikha Mishra   salary invoice de...
915
916
917
918
919
                        <td
                          style="width:120px"
                          class="tdFeeType"
                          :rules="feeTypeNameRules"
                        >{{ feeType.feeTypeName }}</td>
68d742034   Neeraj Sharma   implement new des...
920
921
922
923
924
                        <td class="tdFeeType">
                          <v-text-field
                            placeholder="fill your Amount"
                            v-model="feeType.amount"
                            type="number"
81d876b5d   Shikha Mishra   salary invoice de...
925
926
                            :rules="amountRules"
                            required
68d742034   Neeraj Sharma   implement new des...
927
928
929
930
931
932
933
                          ></v-text-field>
                        </td>
                        <td class="tdFeeType">
                          <v-text-field
                            placeholder="fill your Discount"
                            v-model="feeType.discount"
                            type="number"
81d876b5d   Shikha Mishra   salary invoice de...
934
935
                            :rules="discountRules"
                            required
68d742034   Neeraj Sharma   implement new des...
936
937
                          ></v-text-field>
                        </td>
81d876b5d   Shikha Mishra   salary invoice de...
938
939
                        <td class="tdFeeType" :rules="subtotalRules">{{ feeType.subTotal }}</td>
                        <td class="tdFeeType" v-if="invoiceData.paymentStatus === 'NOT_PAID'">
68d742034   Neeraj Sharma   implement new des...
940
941
942
943
944
                          <v-text-field
                            placeholder="fill your Paid Amount"
                            v-model="feeType.paidAmount"
                            type="number"
                            :disabled="disabled"
81d876b5d   Shikha Mishra   salary invoice de...
945
946
                            :rules="paymentRules"
                            required
68d742034   Neeraj Sharma   implement new des...
947
                          ></v-text-field>
81d876b5d   Shikha Mishra   salary invoice de...
948
                        </td>
68d742034   Neeraj Sharma   implement new des...
949
950
951
952
953
954
                        <td class="tdFeeType" v-if="invoiceData.paymentStatus == ''">
                          <v-text-field
                            placeholder="fill your Paid Amount"
                            v-model="feeType.paidAmount"
                            type="number"
                            :disabled="disabled"
81d876b5d   Shikha Mishra   salary invoice de...
955
956
                            :rules="paymentRules"
                            required
68d742034   Neeraj Sharma   implement new des...
957
958
959
960
961
                          ></v-text-field>
                        </td>
                        <td
                          class="tdFeeType"
                          v-if="invoiceData.paymentStatus != 'NOT_PAID' && invoiceData.paymentStatus != ''"
687e0b929   Neeraj Sharma   add user,attenden...
962
                        >
68d742034   Neeraj Sharma   implement new des...
963
964
965
966
                          <v-text-field
                            placeholder="fill your Paid Amount"
                            v-model="feeType.paidAmount"
                            type="number"
81d876b5d   Shikha Mishra   salary invoice de...
967
968
                            :rules="paymentRules"
                            required
68d742034   Neeraj Sharma   implement new des...
969
970
971
972
973
974
975
976
977
                          ></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>
81d876b5d   Shikha Mishra   salary invoice de...
978
979
980
981
982
983
984
                          <td class="tdFeeType" :rules="amountRules">{{ feeType.amount }}</td>
                          <td class="tdFeeType" :rules="discountRules">{{ feeType.discount }}</td>
                          <td class="tdFeeType" :rules="subtotalRules">{{ feeType.subTotal }}</td>
                          <td class="tdFeeType" :rules="paidAmountRules">{{ feeType.paidAmount }}</td>
                          <td class="tdFeeType">
                            <v-icon color="error" @click="deleteSelectFee(index)">delete</v-icon>
                          </td>
687e0b929   Neeraj Sharma   add user,attenden...
985
                        </tr>
68d742034   Neeraj Sharma   implement new des...
986
987
988
989
990
991
992
993
994
                      </tfoot>
                    </table>
                  </v-card>
                </v-flex>
              </v-layout>
            </v-container>
          </v-flex>
        </v-card>
      </v-dialog>
687e0b929   Neeraj Sharma   add user,attenden...
995
996
997
      <div class="loader" v-if="showLoader">
        <v-progress-circular indeterminate color="white"></v-progress-circular>
      </div>
68d742034   Neeraj Sharma   implement new des...
998
    </v-container>
687e0b929   Neeraj Sharma   add user,attenden...
999
1000
1001
1002
  </template>
  
  <script>
  import http from "@/Services/http.js";
687e0b929   Neeraj Sharma   add user,attenden...
1003
1004
1005
1006
1007
1008
1009
1010
1011
  import moment from "moment";
  
  export default {
    data: () => ({
      snackbar: false,
      showPayMethods: false,
      y: "top",
      x: "right",
      mode: "",
d9bb52b5b   Neeraj Sharma   implement trello ...
1012
      timeout: 5000,
687e0b929   Neeraj Sharma   add user,attenden...
1013
      text: "",
d9bb52b5b   Neeraj Sharma   implement trello ...
1014
      color: "",
68d742034   Neeraj Sharma   implement new des...
1015
1016
      show: true,
      showSearch: false,
687e0b929   Neeraj Sharma   add user,attenden...
1017
1018
1019
1020
1021
1022
1023
1024
1025
1026
1027
      showLoader: false,
      loading: false,
      date: null,
      search: "",
      dialog: false,
      dialog1: false,
      valid: true,
      validEdit: true,
      isActive: true,
      newActive: false,
      showFeeType: false,
68d742034   Neeraj Sharma   implement new des...
1028
      addInvoiceDialog: false,
81d876b5d   Shikha Mishra   salary invoice de...
1029
1030
      editInvoiceDialog: false,
      paymentInvoiceDialog: false,
687e0b929   Neeraj Sharma   add user,attenden...
1031
1032
1033
      disabled: true,
      details: [],
      feeTypes: [],
81d876b5d   Shikha Mishra   salary invoice de...
1034
1035
1036
1037
1038
1039
1040
1041
1042
1043
1044
1045
      invoiceData: [],
      invoiceList: [
        {
          studentId: {
            name: "",
            rollNo: "",
          },
          classId: {
            classNum: ""
          }
        }
      ],
687e0b929   Neeraj Sharma   add user,attenden...
1046
1047
1048
1049
1050
1051
1052
1053
1054
      menu1: false,
      paymentMethods: ["Cash", "Cheque"],
      feeType: {
        amount: "0.00",
        discount: "0.00",
        paidAmount: 0.0,
        subTotal: "0.00",
        feeTypeName: ""
      },
81d876b5d   Shikha Mishra   salary invoice de...
1055
1056
1057
1058
1059
1060
1061
      invoiceData: {
        amount: "0.00",
        discount: "0.00",
        paidAmount: 0.0,
        subTotal: "0.00",
        feeTypeName: ""
      },
687e0b929   Neeraj Sharma   add user,attenden...
1062
1063
      feeTypeData: [],
      pagination: {
68d742034   Neeraj Sharma   implement new des...
1064
        rowsPerPage: 10
687e0b929   Neeraj Sharma   add user,attenden...
1065
1066
1067
1068
1069
      },
      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"],
6ae46ca27   Neeraj Sharma   implement upload ...
1070
      paymentMethodsRules: [v => !!v || "payment Method is required"],
81d876b5d   Shikha Mishra   salary invoice de...
1071
1072
1073
1074
1075
1076
1077
      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"],
687e0b929   Neeraj Sharma   add user,attenden...
1078
1079
1080
      headers: [
        {
          text: "No",
68d742034   Neeraj Sharma   implement new des...
1081
          align: "",
687e0b929   Neeraj Sharma   add user,attenden...
1082
1083
1084
          sortable: false,
          value: "No"
        },
81d876b5d   Shikha Mishra   salary invoice de...
1085
1086
1087
1088
1089
1090
        {
          text: "Student",
          value: "name",
          sortable: false,
          align: "center"
        },
687e0b929   Neeraj Sharma   add user,attenden...
1091
1092
1093
1094
1095
1096
1097
1098
1099
1100
1101
1102
1103
1104
1105
1106
1107
1108
1109
1110
1111
1112
1113
1114
1115
1116
1117
1118
1119
        { 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" }
      ],
81d876b5d   Shikha Mishra   salary invoice de...
1120
1121
1122
1123
1124
1125
1126
1127
1128
1129
1130
1131
1132
1133
1134
1135
1136
1137
1138
1139
1140
1141
1142
1143
1144
1145
1146
1147
1148
1149
1150
1151
1152
1153
1154
1155
1156
      headersProfile: [
        {
          text: "No",
          align: "",
          sortable: false,
          value: "No"
        },
        {
          text: "Date",
          value: "date",
          sortable: false,
          align: "center"
        },
        {
          text: "Paid By",
          value: "paymentMethod",
          sortable: false,
          align: "center"
        },
        {
          text: "Payment Amount",
          value: "paidAmount",
          sortable: false,
          align: "center"
        },
        { text: "Weaver", value: "discount", sortable: false, align: "center" },
        // {
        //   text: "Fine",
        //   value: "fine",
        //   sortable: false,
        //   align: "center"
        // },
        { text: "Action", value: "", sortable: false, align: "center" }
      ],
      studentId: {
        name: ""
      },
687e0b929   Neeraj Sharma   add user,attenden...
1157
1158
1159
      token: "",
      editedItem: {},
      invoiceData: {
d45ffc6fa   Neeraj Sharma   solve bugs and ad...
1160
1161
        paymentStatus: "",
        students: []
687e0b929   Neeraj Sharma   add user,attenden...
1162
1163
1164
1165
1166
1167
1168
1169
1170
1171
1172
1173
1174
1175
1176
1177
1178
1179
1180
1181
1182
1183
1184
1185
1186
      },
      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");
      },
81d876b5d   Shikha Mishra   salary invoice de...
1187
1188
1189
1190
1191
1192
1193
1194
1195
1196
1197
1198
1199
1200
1201
      profile(item) {
        this.editedIndex = this.invoiceList.indexOf(item);
        this.editedItem = Object.assign({}, item);
        this.dialog1 = true;
      },
      editItem(item) {
        this.editedIndex = this.invoiceList.indexOf(item);
        this.invoiceData = Object.assign({}, item);
        this.editInvoiceDialog = true;
      },
      paymentItem(item) {
        this.editedIndex = this.invoiceList.indexOf(item);
        this.invoiceList = Object.assign({}, item);
        this.paymentInvoiceDialog = true;
      },
687e0b929   Neeraj Sharma   add user,attenden...
1202
1203
1204
1205
1206
1207
1208
1209
1210
1211
1212
1213
      deleteItem(item) {
        let deleteInvoice = {
          invoiceId: item._id
        };
        http()
          .delete(
            "/deleteInvoice",
            confirm("Are you sure you want to delete this?") && {
              params: deleteInvoice
            }
          )
          .then(response => {
d9bb52b5b   Neeraj Sharma   implement trello ...
1214
1215
1216
            this.snackbar = true;
            this.text = "Successfully delete Existing Invoice";
            this.color = "green";
81d876b5d   Shikha Mishra   salary invoice de...
1217
            this.dialog1 = false;
687e0b929   Neeraj Sharma   add user,attenden...
1218
1219
1220
1221
1222
1223
            this.getInvoiceList();
          })
          .catch(error => {
            // console.log(error);
          });
      },
687e0b929   Neeraj Sharma   add user,attenden...
1224
1225
      close() {
        this.dialog = false;
687e0b929   Neeraj Sharma   add user,attenden...
1226
      },
d9bb52b5b   Neeraj Sharma   implement trello ...
1227
1228
1229
1230
1231
1232
1233
1234
1235
1236
1237
1238
1239
1240
1241
1242
1243
      // 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
      //     );
      //   }
      // },
687e0b929   Neeraj Sharma   add user,attenden...
1244
1245
1246
1247
1248
1249
1250
      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;
          }
        }
25205ccca   Shikha Mishra   show school logo ...
1251
        // if (this.$refs.form.validate()) {
81d876b5d   Shikha Mishra   salary invoice de...
1252
1253
1254
1255
1256
1257
1258
1259
1260
1261
1262
1263
1264
1265
1266
1267
1268
1269
1270
1271
1272
1273
1274
1275
1276
1277
1278
1279
1280
1281
1282
1283
1284
1285
1286
1287
1288
1289
1290
1291
1292
1293
1294
        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,
          totalDiscount: this.feeType.discount,
          totalSubTotal: this.feeType.subTotal,
          totalPaidAmount: this.feeType.paidAmount
        };
        console.log("invoiceData", invoiceData);
        if (invoiceData.paymentStatus == "NOT_PAID") {
          delete invoiceData.totalPaidAmount;
        }
        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;
          });
25205ccca   Shikha Mishra   show school logo ...
1295
        // }
687e0b929   Neeraj Sharma   add user,attenden...
1296
      },
81d876b5d   Shikha Mishra   salary invoice de...
1297
1298
1299
1300
1301
1302
1303
1304
1305
1306
1307
1308
1309
1310
1311
1312
1313
1314
1315
1316
1317
1318
1319
1320
      update() {
        var updatePayment = {
          invoiceId: this.invoiceData._id,
          totalPaidAmount: this.invoiceData.paidAmount
        };
        http()
          .put("/updateInvoice", updatePayment, {
            headers: {
              Authorization: "Bearer " + this.token
            }
          })
          .then(response => {
            this.getInvoiceList();
            this.snackbar = true;
            this.text = response.data.message;
            this.color = "green";
            this.editInvoiceDialog = false;
          })
          .catch(error => {
            console.log("error", error);
            this.snackbar = true;
            this.color = "red";
          });
      },
687e0b929   Neeraj Sharma   add user,attenden...
1321
1322
1323
1324
      clear() {
        this.$refs.form.reset();
      },
      getInvoiceList() {
6ae46ca27   Neeraj Sharma   implement upload ...
1325
        this.showLoader = true;
687e0b929   Neeraj Sharma   add user,attenden...
1326
1327
        http()
          .get("/getInvoicesList", {
99cd79184   Neeraj Sharma   implement all tas...
1328
            params: { schoolId: this.$store.state.schoolId },
687e0b929   Neeraj Sharma   add user,attenden...
1329
1330
1331
1332
1333
1334
            headers: { Authorization: "Bearer " + this.token }
          })
          .then(response => {
            this.invoiceList = response.data.data;
            this.showLoader = false;
          })
ab54b5656   Neeraj Sharma   implement library...
1335
          .catch(error => {
687e0b929   Neeraj Sharma   add user,attenden...
1336
1337
1338
1339
1340
1341
1342
1343
1344
1345
1346
1347
            // 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 });
687e0b929   Neeraj Sharma   add user,attenden...
1348
1349
1350
      },
      deleteSelectFee: function(index) {
        this.feeTypeData.splice(index, 1);
687e0b929   Neeraj Sharma   add user,attenden...
1351
1352
1353
1354
1355
1356
1357
1358
1359
1360
1361
1362
1363
1364
1365
1366
        for (let i = 0; i < this.feeTypeData.length; i++) {
          this.feeType = this.feeTypeData[i];
        }
        if (this.feeTypeData.length == 0) {
          this.feeType = {
            amount: "0.00",
            discount: "0.00",
            paidAmount: "0.00",
            subTotal: "0.00",
            feeTypeName: ""
          };
        }
      },
      getAllClasses() {
        http()
          .get("/getClassesList", {
99cd79184   Neeraj Sharma   implement all tas...
1367
            params: { schoolId: this.$store.state.schoolId },
687e0b929   Neeraj Sharma   add user,attenden...
1368
1369
1370
1371
1372
1373
1374
1375
1376
1377
1378
            headers: { Authorization: "Bearer " + this.token }
          })
          .then(response => {
            this.addclass = response.data.data;
          })
          .catch(err => {
            // console.log("err====>", err);
            // this.$router.replace({ path: "/" });
          });
      },
      getAllStudents() {
d9bb52b5b   Neeraj Sharma   implement trello ...
1379
        this.showLoader = true;
687e0b929   Neeraj Sharma   add user,attenden...
1380
1381
        http()
          .get("/getStudentsList", {
99cd79184   Neeraj Sharma   implement all tas...
1382
1383
1384
1385
            params: {
              classId: this.invoiceData.classNum,
              schoolId: this.$store.state.schoolId
            },
687e0b929   Neeraj Sharma   add user,attenden...
1386
1387
1388
            headers: { Authorization: "Bearer " + this.token }
          })
          .then(response => {
d45ffc6fa   Neeraj Sharma   solve bugs and ad...
1389
1390
1391
1392
            response.data.data.unshift({
              name: "Select All",
              _id: "Select All"
            });
687e0b929   Neeraj Sharma   add user,attenden...
1393
            this.studentList = response.data.data;
d9bb52b5b   Neeraj Sharma   implement trello ...
1394
            this.showLoader = false;
687e0b929   Neeraj Sharma   add user,attenden...
1395
1396
          })
          .catch(err => {
d9bb52b5b   Neeraj Sharma   implement trello ...
1397
            this.showLoader = false;
687e0b929   Neeraj Sharma   add user,attenden...
1398
1399
1400
1401
1402
1403
1404
            // console.log("err====>", err);
            // this.$router.replace({ path: "/" });
          });
      },
      getfeeType() {
        http()
          .get("/getFeesList", {
99cd79184   Neeraj Sharma   implement all tas...
1405
1406
1407
            params: {
              schoolId: this.$store.state.schoolId
            },
687e0b929   Neeraj Sharma   add user,attenden...
1408
1409
1410
1411
1412
1413
1414
1415
1416
1417
            headers: { Authorization: "Bearer " + this.token }
          })
          .then(response => {
            this.feeTypes = response.data.data;
          })
          .catch(err => {
            // console.log("err====>", err);
            // this.$router.replace({ path: "/" });
          });
      },
81d876b5d   Shikha Mishra   salary invoice de...
1418
1419
1420
1421
1422
1423
1424
1425
      getPaymentDetails(feeTyp) {
        let feeType = {
          date: "",
          paymentMethod: "",
          totalAmount: "",
          discount: ""
        };
      },
687e0b929   Neeraj Sharma   add user,attenden...
1426
1427
1428
1429
1430
1431
1432
1433
1434
1435
1436
1437
1438
      getAmmountDetails(feeTyp) {
        let feeType = {
          amount: "",
          discount: "",
          subTotal: "",
          subParticularTotal: "",
          paidAmount: ""
        };
        for (let i = 0; i < this.feeTypeData.length; i++) {
          // *********** AMOUNT ***********
  
          feeType.amount =
            Number(feeType.amount) + Number(this.feeTypeData[i].amount);
ab54b5656   Neeraj Sharma   implement library...
1439
          // console.log("feeType.amount ", feeType.amount);
687e0b929   Neeraj Sharma   add user,attenden...
1440
1441
1442
1443
1444
1445
1446
1447
1448
          this.feeType.amount = feeType.amount;
          this.feeType.subTotal = feeType.amount;
          this.feeTypeData[i].subTotal = this.feeTypeData[i].amount;
  
          // *********** DISCOUNT ***********
  
          if (this.feeTypeData[i].discount) {
            feeType.discount =
              Number(feeType.discount) + Number(this.feeTypeData[i].discount);
ab54b5656   Neeraj Sharma   implement library...
1449
            // console.log("feeType.discount", feeType.discount);
687e0b929   Neeraj Sharma   add user,attenden...
1450
1451
1452
1453
            this.feeType.discount = feeType.discount;
            feeType.subParticularTotal =
              this.feeTypeData[i].amount -
              (this.feeTypeData[i].amount * this.feeTypeData[i].discount) / 100;
687e0b929   Neeraj Sharma   add user,attenden...
1454
1455
1456
1457
1458
1459
1460
1461
1462
1463
1464
1465
1466
1467
            this.feeTypeData[i].subTotal = feeType.subParticularTotal.toFixed(2);
          }
  
          // *********** SUBTOTAL ***********
  
          feeType.subTotal =
            Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal);
          this.feeType.subTotal = feeType.subTotal.toFixed(2);
  
          // *********** PAID-AMOUNT ***********
  
          feeType.paidAmount =
            Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);
          this.feeType.paidAmount = feeType.paidAmount.toFixed(2);
d9bb52b5b   Neeraj Sharma   implement trello ...
1468
1469
1470
1471
1472
1473
  
          // 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;
          }
687e0b929   Neeraj Sharma   add user,attenden...
1474
1475
1476
1477
1478
1479
1480
1481
1482
1483
        }
      },
      getPayMethodList() {
        if (this.invoiceData.paymentStatus == "PARTIALLY_PAID") {
          this.showPayMethods = true;
        } else if (this.invoiceData.paymentStatus == "FULLY_PAID") {
          this.showPayMethods = true;
        } else {
          this.showPayMethods = false;
        }
d45ffc6fa   Neeraj Sharma   solve bugs and ad...
1484
1485
      },
      selectAllStudent() {
81d876b5d   Shikha Mishra   salary invoice de...
1486
        // console.log("this.studentId", this.invoiceData.studentId);
d45ffc6fa   Neeraj Sharma   solve bugs and ad...
1487
1488
1489
1490
1491
1492
1493
1494
1495
1496
1497
        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);
        }
68d742034   Neeraj Sharma   implement new des...
1498
1499
1500
1501
1502
1503
1504
1505
      },
      displaySearch() {
        (this.show = false), (this.showSearch = true);
      },
      closeSearch() {
        this.showSearch = false;
        this.show = true;
        this.search = "";
687e0b929   Neeraj Sharma   add user,attenden...
1506
1507
1508
1509
1510
1511
1512
      }
    },
    mounted() {
      this.token = this.$store.state.token;
      this.getInvoiceList();
      this.getAllClasses();
      this.getfeeType();
81d876b5d   Shikha Mishra   salary invoice de...
1513
      this.getAllStudents();
687e0b929   Neeraj Sharma   add user,attenden...
1514
1515
1516
1517
1518
1519
    }
  };
  </script>
  
  
  <style scoped>
687e0b929   Neeraj Sharma   add user,attenden...
1520
1521
1522
1523
1524
1525
  table {
    border-collapse: collapse;
    border: 1px solid #e2e7eb;
  }
  
  th,
68d742034   Neeraj Sharma   implement new des...
1526
  .tdFeeType {
687e0b929   Neeraj Sharma   add user,attenden...
1527
1528
1529
1530
1531
1532
1533
1534
1535
    border: 1px solid #e2e7eb;
    padding: 10px;
    text-align: center;
  }
  table.feeTypeTable {
    table-layout: auto !important;
    width: 100% !important;
  }
  </style>