viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 914cee937f0bfbfc911b795e8cc3f5cd00767c52

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

enable fee type fields while make payment

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