viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 6df6faccda647d360e37ced6672fa3fc72cb514c

Authored by Rishav Singla
1 parent 914cee937f
Exists in master and in 3 other branches amber-development, development, ui-design

design changes

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