viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 3e79b2f9fa89ee8e02bc29c53cf1d71217afb635

Authored by Neeraj Sharma
1 parent 88868752be
Exists in master and in 3 other branches amber-development, development, ui-design

implement functionality <v-layout>

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