viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit c62132b757cbc007b14dbdc910d0553e2b496a5c

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

invoice,progress-card report improvement

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