viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 5f3a7efc0b41c713c9a24e294601eb68993f896c

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

remove required validation from paid amount field

Showing 1 changed file with 3 additions and 3 deletions   Show diff stats
src/pages/Account/invoice.vue
Diff comments   View file @5f3a7ef
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** PROFILE VIEW SECTION DATA ****** --> 3 <!-- ****** PROFILE VIEW SECTION DATA ****** -->
4 <!-- <v-dialog v-model="dialog1" max-width="600px"> 4 <!-- <v-dialog v-model="dialog1" max-width="600px">
5 <v-card> 5 <v-card>
6 <v-flex align-center justify-center layout text-xs-center> 6 <v-flex align-center justify-center layout text-xs-center>
7 <v-avatar size="50px" style="position:absolute; top:20px;"> 7 <v-avatar size="50px" style="position:absolute; top:20px;">
8 <img src="/static/icon/user.png" /> 8 <img src="/static/icon/user.png" />
9 </v-avatar> 9 </v-avatar>
10 </v-flex> 10 </v-flex>
11 <v-card-text> 11 <v-card-text>
12 <v-container grid-list-md> 12 <v-container grid-list-md>
13 <v-layout wrap> 13 <v-layout wrap>
14 <v-flex> 14 <v-flex>
15 <br /> 15 <br />
16 <br /> 16 <br />
17 <v-layout> 17 <v-layout>
18 <v-flex xs5 sm6> 18 <v-flex xs5 sm6>
19 <h5 class="right my-1"> 19 <h5 class="right my-1">
20 <b>Class Name:</b> 20 <b>Class Name:</b>
21 </h5> 21 </h5>
22 </v-flex> 22 </v-flex>
23 <v-flex sm6 xs8> 23 <v-flex sm6 xs8>
24 </v-flex> 24 </v-flex>
25 </v-layout> 25 </v-layout>
26 <v-layout> 26 <v-layout>
27 <v-flex xs5 sm6> 27 <v-flex xs5 sm6>
28 <h5 class="right my-1"> 28 <h5 class="right my-1">
29 <b>Name:</b> 29 <b>Name:</b>
30 </h5> 30 </h5>
31 </v-flex> 31 </v-flex>
32 <v-flex sm6 xs8> 32 <v-flex sm6 xs8>
33 <h5 class="my-1">{{ editedItem.name }}</h5> 33 <h5 class="my-1">{{ editedItem.name }}</h5>
34 </v-flex> 34 </v-flex>
35 </v-layout> 35 </v-layout>
36 <v-layout> 36 <v-layout>
37 <v-flex xs5 sm6> 37 <v-flex xs5 sm6>
38 <h5 class="right my-1"> 38 <h5 class="right my-1">
39 <b>Class Incharge:</b> 39 <b>Class Incharge:</b>
40 </h5> 40 </h5>
41 </v-flex> 41 </v-flex>
42 <v-flex sm6 xs8> 42 <v-flex sm6 xs8>
43 <h5 class="my-1">{{ editedItem.name }}</h5> 43 <h5 class="my-1">{{ editedItem.name }}</h5>
44 </v-flex> 44 </v-flex>
45 </v-layout> 45 </v-layout>
46 <v-layout> 46 <v-layout>
47 <v-flex xs5 sm6> 47 <v-flex xs5 sm6>
48 <h5 class="right my-1"> 48 <h5 class="right my-1">
49 <b>Session:</b> 49 <b>Session:</b>
50 </h5> 50 </h5>
51 </v-flex> 51 </v-flex>
52 <v-flex sm6 xs8> 52 <v-flex sm6 xs8>
53 <h5 class="my-1">{{ editedItem.paymentStatus }}</h5> 53 <h5 class="my-1">{{ editedItem.paymentStatus }}</h5>
54 </v-flex> 54 </v-flex>
55 </v-layout> 55 </v-layout>
56 </v-flex> 56 </v-flex>
57 </v-layout> 57 </v-layout>
58 </v-container> 58 </v-container>
59 </v-card-text> 59 </v-card-text>
60 </v-card> 60 </v-card>
61 </v-dialog>--> 61 </v-dialog>-->
62 <!-- ****** Invoice Table ****** --> 62 <!-- ****** Invoice Table ****** -->
63 63
64 <v-toolbar color="transparent" flat> 64 <v-toolbar color="transparent" flat>
65 <v-btn 65 <v-btn
66 fab 66 fab
67 dark 67 dark
68 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 68 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
69 small 69 small
70 @click="addInvoiceDialog = true" 70 @click="addInvoiceDialog = true"
71 > 71 >
72 <v-icon dark>add</v-icon> 72 <v-icon dark>add</v-icon>
73 </v-btn> 73 </v-btn>
74 <v-btn 74 <v-btn
75 round 75 round
76 class="open-dialog-button hidden-sm-only hidden-xs-only" 76 class="open-dialog-button hidden-sm-only hidden-xs-only"
77 dark 77 dark
78 @click="addInvoiceDialog = true" 78 @click="addInvoiceDialog = true"
79 > 79 >
80 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Invoice 80 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Invoice
81 </v-btn> 81 </v-btn>
82 <v-spacer></v-spacer> 82 <v-spacer></v-spacer>
83 <v-card-title class="body-1" v-show="show"> 83 <v-card-title class="body-1" v-show="show">
84 <v-btn icon large flat @click="displaySearch"> 84 <v-btn icon large flat @click="displaySearch">
85 <v-avatar size="27"> 85 <v-avatar size="27">
86 <img src="/static/icon/search.png" alt="icon" /> 86 <img src="/static/icon/search.png" alt="icon" />
87 </v-avatar> 87 </v-avatar>
88 </v-btn> 88 </v-btn>
89 </v-card-title> 89 </v-card-title>
90 <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> 90 <v-flex xs8 sm8 md3 lg2 v-show="showSearch">
91 <v-layout> 91 <v-layout>
92 <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> 92 <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>
93 <v-icon @click="closeSearch" color="error">close</v-icon> 93 <v-icon @click="closeSearch" color="error">close</v-icon>
94 </v-layout> 94 </v-layout>
95 </v-flex> 95 </v-flex>
96 </v-toolbar> 96 </v-toolbar>
97 <v-data-table 97 <v-data-table
98 :headers="headers" 98 :headers="headers"
99 :items="invoiceList" 99 :items="invoiceList"
100 :pagination.sync="pagination" 100 :pagination.sync="pagination"
101 :search="search" 101 :search="search"
102 > 102 >
103 <template slot="items" slot-scope="props"> 103 <template slot="items" slot-scope="props">
104 <tr class="tr"> 104 <tr class="tr">
105 <td class="td td-row">{{ props.index + 1 }}</td> 105 <td class="td td-row">{{ props.index + 1 }}</td>
106 <td class="text-xs-center td td-row">{{ props.item.studentId.name }}</td> 106 <td class="text-xs-center td td-row">{{ props.item.studentId.name }}</td>
107 <td class="text-xs-center td td-row">{{ props.item.classId.classNum }}</td> 107 <td class="text-xs-center td td-row">{{ props.item.classId.classNum }}</td>
108 <td class="text-xs-center td td-row">{{ props.item.totalAmount }}</td> 108 <td class="text-xs-center td td-row">{{ props.item.totalAmount }}</td>
109 <td 109 <td
110 class="text-xs-center td td-row" 110 class="text-xs-center td td-row"
111 >{{ props.item.totalAmount - props.item.totalSubTotal }}</td> 111 >{{ props.item.totalAmount - props.item.totalSubTotal }}</td>
112 <td 112 <td
113 class="text-xs-center td td-row" 113 class="text-xs-center td td-row"
114 >{{ props.item.totalPaidAmount ? props.item.totalPaidAmount : 0}}</td> 114 >{{ props.item.totalPaidAmount ? props.item.totalPaidAmount : 0}}</td>
115 <td 115 <td
116 class="text-xs-center td td-row" 116 class="text-xs-center td td-row"
117 >{{ props.item.totalPaidAmount ? props.item.totalSubTotal - props.item.totalPaidAmount : props.item.totalSubTotal }}</td> 117 >{{ props.item.totalPaidAmount ? props.item.totalSubTotal - props.item.totalPaidAmount : props.item.totalSubTotal }}</td>
118 <td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'NOT_PAID'"> 118 <td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'NOT_PAID'">
119 <span 119 <span
120 class="red lighten-1 py-1 px-2 white--text paymentStatus" 120 class="red lighten-1 py-1 px-2 white--text paymentStatus"
121 >{{ props.item.paymentStatus }}</span> 121 >{{ props.item.paymentStatus }}</span>
122 </td> 122 </td>
123 <td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'FULLY_PAID'"> 123 <td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'FULLY_PAID'">
124 <span 124 <span
125 class="green lighten-1 py-1 px-2 white--text paymentStatus" 125 class="green lighten-1 py-1 px-2 white--text paymentStatus"
126 >{{ props.item.paymentStatus }}</span> 126 >{{ props.item.paymentStatus }}</span>
127 </td> 127 </td>
128 <td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'PARTIALLY_PAID'"> 128 <td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'PARTIALLY_PAID'">
129 <span 129 <span
130 class="yellow darken-3 py-1 px-2 white--text paymentStatus" 130 class="yellow darken-3 py-1 px-2 white--text paymentStatus"
131 >{{ props.item.paymentStatus }}</span> 131 >{{ props.item.paymentStatus }}</span>
132 </td> 132 </td>
133 <td class="text-xs-center td td-row">{{ dates(props.item.date) }}</td> 133 <td class="text-xs-center td td-row">{{ dates(props.item.date) }}</td>
134 <td class="text-xs-center td td-row"> 134 <td class="text-xs-center td td-row">
135 <router-link :to="{ name:'View Invoice',params: { viewInvoiceId:props.item._id } }"> 135 <router-link :to="{ name:'View Invoice',params: { viewInvoiceId:props.item._id } }">
136 <v-tooltip top> 136 <v-tooltip top>
137 <img 137 <img
138 slot="activator" 138 slot="activator"
139 style="cursor:pointer; width:25px; height:25px; " 139 style="cursor:pointer; width:25px; height:25px; "
140 class="mr-3" 140 class="mr-3"
141 src="/static/icon/view.png" 141 src="/static/icon/view.png"
142 /> 142 />
143 <span>View</span> 143 <span>View</span>
144 </v-tooltip> 144 </v-tooltip>
145 </router-link> 145 </router-link>
146 <span v-if="props.item.paymentStatus === 'NOT_PAID'"> 146 <span v-if="props.item.paymentStatus === 'NOT_PAID'">
147 <router-link :to="{ name:'EditInvoice',params: { invoiceid:props.item._id }}" exact> 147 <router-link :to="{ name:'EditInvoice',params: { invoiceid:props.item._id }}" exact>
148 <v-tooltip top> 148 <v-tooltip top>
149 <img 149 <img
150 slot="activator" 150 slot="activator"
151 style="cursor:pointer; width:20px; height:18px; " 151 style="cursor:pointer; width:20px; height:18px; "
152 class="mr-3" 152 class="mr-3"
153 src="/static/icon/edit.png" 153 src="/static/icon/edit.png"
154 /> 154 />
155 <span>Edit</span> 155 <span>Edit</span>
156 </v-tooltip> 156 </v-tooltip>
157 </router-link> 157 </router-link>
158 <v-tooltip top> 158 <v-tooltip top>
159 <img 159 <img
160 slot="activator" 160 slot="activator"
161 style="cursor:pointer;width:20px; height:20px; " 161 style="cursor:pointer;width:20px; height:20px; "
162 class="mr-3" 162 class="mr-3"
163 @click="deleteItem(props.item)" 163 @click="deleteItem(props.item)"
164 src="/static/icon/delete.png" 164 src="/static/icon/delete.png"
165 /> 165 />
166 <span>Delete</span> 166 <span>Delete</span>
167 </v-tooltip> 167 </v-tooltip>
168 </span> 168 </span>
169 </td> 169 </td>
170 </tr> 170 </tr>
171 </template> 171 </template>
172 <v-alert 172 <v-alert
173 slot="no-results" 173 slot="no-results"
174 :value="true" 174 :value="true"
175 color="error" 175 color="error"
176 icon="warning" 176 icon="warning"
177 >Your search for "{{ search }}" found no results.</v-alert> 177 >Your search for "{{ search }}" found no results.</v-alert>
178 </v-data-table> 178 </v-data-table>
179 <!-- ****** ADD INVOICE ****** --> 179 <!-- ****** ADD INVOICE ****** -->
180 <v-dialog v-model="addInvoiceDialog" max-width> 180 <v-dialog v-model="addInvoiceDialog" max-width>
181 <v-card flat class="text-xs-center white--text"> 181 <v-card flat class="text-xs-center white--text">
182 <v-layout> 182 <v-layout>
183 <v-flex xs12 class="card-styles pa-2"> 183 <v-flex xs12 class="card-styles pa-2">
184 <label class="title text-xs-center ">Add Invoice</label> 184 <label class="title text-xs-center ">Add Invoice</label>
185 <v-icon size="24" class="right white--text" @click="addInvoiceDialog = false">cancel</v-icon> 185 <v-icon size="24" class="right white--text" @click="addInvoiceDialog = false">cancel</v-icon>
186 </v-flex> 186 </v-flex>
187 </v-layout> 187 </v-layout>
188 <v-flex xs12 sm12> 188 <v-flex xs12 sm12>
189 <v-container fluid grid-list-md> 189 <v-container fluid grid-list-md>
190 <v-layout wrap> 190 <v-layout wrap>
191 <v-flex xs12 sm12 md5> 191 <v-flex xs12 sm12 md5>
192 <v-card flat> 192 <v-card flat>
193 <v-toolbar dark class="card-styles" flat> 193 <v-toolbar dark class="card-styles" flat>
194 <v-spacer></v-spacer> 194 <v-spacer></v-spacer>
195 <h3>Invoice</h3> 195 <h3>Invoice</h3>
196 <v-spacer></v-spacer> 196 <v-spacer></v-spacer>
197 </v-toolbar> 197 </v-toolbar>
198 <v-form ref="form" v-model="valid" lazy-validation class="py-4"> 198 <v-form ref="form" v-model="valid" lazy-validation class="py-4">
199 <v-layout> 199 <v-layout>
200 <v-flex xs4 class="pt-4 subheading"> 200 <v-flex xs4 class="pt-4 subheading">
201 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> 201 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
202 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> 202 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
203 </v-flex> 203 </v-flex>
204 <v-flex xs6 class="ml-3"> 204 <v-flex xs6 class="ml-3">
205 <v-select 205 <v-select
206 :items="addclass" 206 :items="addclass"
207 label="Select Class" 207 label="Select Class"
208 v-model="invoiceData.classNum" 208 v-model="invoiceData.classNum"
209 item-text="classNum" 209 item-text="classNum"
210 item-value="_id" 210 item-value="_id"
211 @change="getAllStudents()" 211 @change="getAllStudents()"
212 :rules="classRules" 212 :rules="classRules"
213 required 213 required
214 ></v-select> 214 ></v-select>
215 </v-flex> 215 </v-flex>
216 </v-layout> 216 </v-layout>
217 <v-layout> 217 <v-layout>
218 <v-flex xs4 class="pt-4 subheading"> 218 <v-flex xs4 class="pt-4 subheading">
219 <label class="right hidden-xs-only hidden-sm-only">Select Student:</label> 219 <label class="right hidden-xs-only hidden-sm-only">Select Student:</label>
220 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Student:</label> 220 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Student:</label>
221 </v-flex> 221 </v-flex>
222 <v-flex xs6 class="ml-3"> 222 <v-flex xs6 class="ml-3">
223 <v-select 223 <v-select
224 :items="studentList" 224 :items="studentList"
225 label="Select Student" 225 label="Select Student"
226 v-model="invoiceData.studentId" 226 v-model="invoiceData.studentId"
227 item-text="name" 227 item-text="name"
228 item-value="_id" 228 item-value="_id"
229 :rules="inchargeRules" 229 :rules="inchargeRules"
230 @change="selectAllStudent()" 230 @change="selectAllStudent()"
231 required 231 required
232 ></v-select> 232 ></v-select>
233 </v-flex> 233 </v-flex>
234 </v-layout> 234 </v-layout>
235 <v-layout> 235 <v-layout>
236 <v-flex xs4 class="pt-4 subheading"> 236 <v-flex xs4 class="pt-4 subheading">
237 <label class="right">Date:</label> 237 <label class="right">Date:</label>
238 </v-flex> 238 </v-flex>
239 <v-flex xs6 class="ml-3"> 239 <v-flex xs6 class="ml-3">
240 <v-menu 240 <v-menu
241 ref="menu1" 241 ref="menu1"
242 :close-on-content-click="false" 242 :close-on-content-click="false"
243 v-model="menu1" 243 v-model="menu1"
244 :nudge-right="40" 244 :nudge-right="40"
245 lazy 245 lazy
246 :return-value.sync="invoiceData.date" 246 :return-value.sync="invoiceData.date"
247 transition="scale-transition" 247 transition="scale-transition"
248 offset-y 248 offset-y
249 full-width 249 full-width
250 min-width="290px" 250 min-width="290px"
251 > 251 >
252 <v-text-field 252 <v-text-field
253 slot="activator" 253 slot="activator"
254 :rules="dateRules" 254 :rules="dateRules"
255 v-model="invoiceData.date" 255 v-model="invoiceData.date"
256 placeholder="Select date" 256 placeholder="Select date"
257 ></v-text-field> 257 ></v-text-field>
258 <v-date-picker 258 <v-date-picker
259 v-model="invoiceData.date" 259 v-model="invoiceData.date"
260 @input="$refs.menu1.save(invoiceData.date)" 260 @input="$refs.menu1.save(invoiceData.date)"
261 ></v-date-picker> 261 ></v-date-picker>
262 </v-menu> 262 </v-menu>
263 </v-flex> 263 </v-flex>
264 </v-layout> 264 </v-layout>
265 <v-layout> 265 <v-layout>
266 <v-flex xs4 class="pt-4 subheading"> 266 <v-flex xs4 class="pt-4 subheading">
267 <label class="right hidden-xs-only hidden-sm-only">Payment Status:</label> 267 <label class="right hidden-xs-only hidden-sm-only">Payment Status:</label>
268 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Payment:</label> 268 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Payment:</label>
269 </v-flex> 269 </v-flex>
270 <v-flex xs6 class="ml-3"> 270 <v-flex xs6 class="ml-3">
271 <v-select 271 <v-select
272 :items="paymentStatus" 272 :items="paymentStatus"
273 v-model="invoiceData.paymentStatus" 273 v-model="invoiceData.paymentStatus"
274 item-text="name" 274 item-text="name"
275 item-value="value" 275 item-value="value"
276 label="Select Payment Status" 276 label="Select Payment Status"
277 @change="getPayMethodList" 277 @change="getPayMethodList"
278 :rules="paymentStatusRules" 278 :rules="paymentStatusRules"
279 required 279 required
280 ></v-select> 280 ></v-select>
281 </v-flex> 281 </v-flex>
282 </v-layout> 282 </v-layout>
283 <v-layout v-show="showPayMethods"> 283 <v-layout v-show="showPayMethods">
284 <v-flex xs4 class="pt-4 subheading"> 284 <v-flex xs4 class="pt-4 subheading">
285 <label class="right">Payment Method:</label> 285 <label class="right">Payment Method:</label>
286 </v-flex> 286 </v-flex>
287 <v-flex xs6 class="ml-3"> 287 <v-flex xs6 class="ml-3">
288 <v-select 288 <v-select
289 :items="paymentMethods" 289 :items="paymentMethods"
290 v-model="invoiceData.paymentMethod" 290 v-model="invoiceData.paymentMethod"
291 label="Select Payment Method" 291 label="Select Payment Method"
292 required 292 required
293 ></v-select> 293 ></v-select>
294 </v-flex> 294 </v-flex>
295 </v-layout> 295 </v-layout>
296 <v-layout> 296 <v-layout>
297 <v-flex xs12 sm11> 297 <v-flex xs12 sm11>
298 <v-card-actions> 298 <v-card-actions>
299 <v-spacer></v-spacer> 299 <v-spacer></v-spacer>
300 <v-btn @click="clear" round dark class="clear-button">clear</v-btn> 300 <v-btn @click="clear" round dark class="clear-button">clear</v-btn>
301 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> 301 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
302 </v-card-actions> 302 </v-card-actions>
303 </v-flex> 303 </v-flex>
304 </v-layout> 304 </v-layout>
305 </v-form> 305 </v-form>
306 </v-card> 306 </v-card>
307 </v-flex> 307 </v-flex>
308 <v-flex xs12 sm12 md7> 308 <v-flex xs12 sm12 md7>
309 <v-card> 309 <v-card>
310 <v-toolbar dark class="card-styles " flat> 310 <v-toolbar dark class="card-styles " flat>
311 <v-spacer></v-spacer> 311 <v-spacer></v-spacer>
312 <h3>Fee Type List</h3> 312 <h3>Fee Type List</h3>
313 <v-spacer></v-spacer> 313 <v-spacer></v-spacer>
314 </v-toolbar> 314 </v-toolbar>
315 <v-layout> 315 <v-layout>
316 <v-flex xs4 sm2 class="mt-4 hidden-xs-only hidden-sm-only"> 316 <v-flex xs4 sm2 class="mt-4 hidden-xs-only hidden-sm-only">
317 <label class="right title ">Fee Type:</label> 317 <label class="right title ">Fee Type:</label>
318 </v-flex> 318 </v-flex>
319 <v-flex xs8 sm4> 319 <v-flex xs8 sm4>
320 <v-select 320 <v-select
321 :items="feeTypes" 321 :items="feeTypes"
322 v-model="feeType.feeTypeName" 322 v-model="feeType.feeTypeName"
323 item-text="feeType" 323 item-text="feeType"
324 item-value="feeType" 324 item-value="feeType"
325 label="Select Fee Type" 325 label="Select Fee Type"
326 ></v-select> 326 ></v-select>
327 </v-flex> 327 </v-flex>
328 <v-flex xs4 sm6> 328 <v-flex xs4 sm6>
329 <v-btn color="open-dialog-button" round dark class="right mt-3" @click="selectFeeType">ADD</v-btn> 329 <v-btn color="open-dialog-button" round dark class="right mt-3" @click="selectFeeType">ADD</v-btn>
330 </v-flex> 330 </v-flex>
331 </v-layout> 331 </v-layout>
332 <table class="feeTypeTable tableRsponsive"> 332 <table class="feeTypeTable tableRsponsive">
333 <tr class="info white--text"> 333 <tr class="info white--text">
334 <th>#</th> 334 <th>#</th>
335 <th>Fee Type</th> 335 <th>Fee Type</th>
336 <th>Amount</th> 336 <th>Amount</th>
337 <th>Discount(%)</th> 337 <th>Discount(%)</th>
338 <th>Subtotal</th> 338 <th>Subtotal</th>
339 <th>Paid Amount</th> 339 <th>Paid Amount</th>
340 <th>Action</th> 340 <th>Action</th>
341 </tr> 341 </tr>
342 <tr 342 <tr
343 v-show="showFeeType" 343 v-show="showFeeType"
344 v-for="(feeType, index) in feeTypeData" 344 v-for="(feeType, index) in feeTypeData"
345 :key="index" 345 :key="index"
346 v-on:keyup="getAmmountDetails(feeType)" 346 v-on:keyup="getAmmountDetails(feeType)"
347 > 347 >
348 <td style="width:40px" class="tdFeeType">{{ index + 1 }}</td> 348 <td style="width:40px" class="tdFeeType">{{ index + 1 }}</td>
349 <td style="width:120px" class="tdFeeType">{{ feeType.feeTypeName }}</td> 349 <td style="width:120px" class="tdFeeType">{{ feeType.feeTypeName }}</td>
350 <td class="tdFeeType"> 350 <td class="tdFeeType">
351 <v-text-field 351 <v-text-field
352 placeholder="fill your Amount" 352 placeholder="fill your Amount"
353 v-model="feeType.amount" 353 v-model="feeType.amount"
354 type="number" 354 type="number"
355 ></v-text-field> 355 ></v-text-field>
356 </td> 356 </td>
357 <td class="tdFeeType"> 357 <td class="tdFeeType">
358 <v-text-field 358 <v-text-field
359 placeholder="fill your Discount" 359 placeholder="fill your Discount"
360 v-model="feeType.discount" 360 v-model="feeType.discount"
361 type="number" 361 type="number"
362 ></v-text-field> 362 ></v-text-field>
363 </td> 363 </td>
364 <td class="tdFeeType">{{ feeType.subTotal }}</td> 364 <td class="tdFeeType">{{ feeType.subTotal }}</td>
365 <td class="tdFeeType" v-if="invoiceData.paymentStatus === 'NOT_PAID'"> 365 <!-- <td class="tdFeeType" v-if="invoiceData.paymentStatus === 'NOT_PAID'">
366 <v-text-field 366 <v-text-field
367 placeholder="fill your Paid Amount" 367 placeholder="fill your Paid Amount"
368 v-model="feeType.paidAmount" 368 v-model="feeType.paidAmount"
369 type="number" 369 type="number"
370 :disabled="disabled" 370 :disabled="disabled"
371 ></v-text-field> 371 ></v-text-field>
372 </td> 372 </td> -->
373 <td class="tdFeeType" v-if="invoiceData.paymentStatus == ''"> 373 <td class="tdFeeType" v-if="invoiceData.paymentStatus == ''">
374 <v-text-field 374 <v-text-field
375 placeholder="fill your Paid Amount" 375 placeholder="fill your Paid Amount"
376 v-model="feeType.paidAmount" 376 v-model="feeType.paidAmount"
377 type="number" 377 type="number"
378 :disabled="disabled" 378 :disabled="disabled"
379 ></v-text-field> 379 ></v-text-field>
380 </td> 380 </td>
381 <td 381 <td
382 class="tdFeeType" 382 class="tdFeeType"
383 v-if="invoiceData.paymentStatus != 'NOT_PAID' && invoiceData.paymentStatus != ''" 383 v-if="invoiceData.paymentStatus != 'NOT_PAID' && invoiceData.paymentStatus != ''"
384 > 384 >
385 <v-text-field 385 <v-text-field
386 placeholder="fill your Paid Amount" 386 placeholder="fill your Paid Amount"
387 v-model="feeType.paidAmount" 387 v-model="feeType.paidAmount"
388 type="number" 388 type="number"
389 ></v-text-field> 389 ></v-text-field>
390 </td> 390 </td>
391 <td class="tdFeeType"> 391 <td class="tdFeeType">
392 <v-icon color="error" @click="deleteSelectFee(index)">delete</v-icon> 392 <v-icon color="error" @click="deleteSelectFee(index)">delete</v-icon>
393 </td> 393 </td>
394 </tr> 394 </tr>
395 <tfoot> 395 <tfoot>
396 <tr> 396 <tr>
397 <td colspan="2" class="tdFeeType">Total:</td> 397 <td colspan="2" class="tdFeeType">Total:</td>
398 <td class="tdFeeType">{{ feeType.amount }}</td> 398 <td class="tdFeeType">{{ feeType.amount }}</td>
399 <td class="tdFeeType">{{ feeType.discount }}</td> 399 <td class="tdFeeType">{{ feeType.discount }}</td>
400 <td class="tdFeeType">{{ feeType.subTotal }}</td> 400 <td class="tdFeeType">{{ feeType.subTotal }}</td>
401 <td class="tdFeeType">{{ feeType.paidAmount }}</td> 401 <td class="tdFeeType">{{ feeType.paidAmount }}</td>
402 </tr> 402 </tr>
403 </tfoot> 403 </tfoot>
404 </table> 404 </table>
405 </v-card> 405 </v-card>
406 </v-flex> 406 </v-flex>
407 </v-layout> 407 </v-layout>
408 </v-container> 408 </v-container>
409 </v-flex> 409 </v-flex>
410 </v-card> 410 </v-card>
411 </v-dialog> 411 </v-dialog>
412 <div class="loader" v-if="showLoader"> 412 <div class="loader" v-if="showLoader">
413 <v-progress-circular indeterminate color="white"></v-progress-circular> 413 <v-progress-circular indeterminate color="white"></v-progress-circular>
414 </div> 414 </div>
415 </v-container> 415 </v-container>
416 </template> 416 </template>
417 417
418 <script> 418 <script>
419 import http from "@/Services/http.js"; 419 import http from "@/Services/http.js";
420 import moment from "moment"; 420 import moment from "moment";
421 421
422 export default { 422 export default {
423 data: () => ({ 423 data: () => ({
424 snackbar: false, 424 snackbar: false,
425 showPayMethods: false, 425 showPayMethods: false,
426 y: "top", 426 y: "top",
427 x: "right", 427 x: "right",
428 mode: "", 428 mode: "",
429 timeout: 5000, 429 timeout: 5000,
430 text: "", 430 text: "",
431 color: "", 431 color: "",
432 show: true, 432 show: true,
433 showSearch: false, 433 showSearch: false,
434 showLoader: false, 434 showLoader: false,
435 loading: false, 435 loading: false,
436 date: null, 436 date: null,
437 search: "", 437 search: "",
438 dialog: false, 438 dialog: false,
439 dialog1: false, 439 dialog1: false,
440 valid: true, 440 valid: true,
441 validEdit: true, 441 validEdit: true,
442 isActive: true, 442 isActive: true,
443 newActive: false, 443 newActive: false,
444 showFeeType: false, 444 showFeeType: false,
445 addInvoiceDialog: false, 445 addInvoiceDialog: false,
446 disabled: true, 446 disabled: true,
447 details: [], 447 details: [],
448 feeTypes: [], 448 feeTypes: [],
449 menu1: false, 449 menu1: false,
450 paymentMethods: ["Cash", "Cheque"], 450 paymentMethods: ["Cash", "Cheque"],
451 feeType: { 451 feeType: {
452 amount: "0.00", 452 amount: "0.00",
453 discount: "0.00", 453 discount: "0.00",
454 paidAmount: 0.0, 454 paidAmount: 0.0,
455 subTotal: "0.00", 455 subTotal: "0.00",
456 feeTypeName: "" 456 feeTypeName: ""
457 }, 457 },
458 feeTypeData: [], 458 feeTypeData: [],
459 pagination: { 459 pagination: {
460 rowsPerPage: 10 460 rowsPerPage: 10
461 }, 461 },
462 classRules: [v => !!v || " Class Name is required"], 462 classRules: [v => !!v || " Class Name is required"],
463 inchargeRules: [v => !!v || "Student Name is required"], 463 inchargeRules: [v => !!v || "Student Name is required"],
464 dateRules: [v => !!v || " Date is required"], 464 dateRules: [v => !!v || " Date is required"],
465 paymentStatusRules: [v => !!v || "Payment Status is required"], 465 paymentStatusRules: [v => !!v || "Payment Status is required"],
466 paymentMethodsRules: [v => !!v || "payment Method is required"], 466 paymentMethodsRules: [v => !!v || "payment Method is required"],
467 headers: [ 467 headers: [
468 { 468 {
469 text: "No", 469 text: "No",
470 align: "", 470 align: "",
471 sortable: false, 471 sortable: false,
472 value: "No" 472 value: "No"
473 }, 473 },
474 { 474 {
475 text: "Student", 475 text: "Student",
476 value: "student", 476 value: "student",
477 sortable: false, 477 sortable: false,
478 align: "center" 478 align: "center"
479 }, 479 },
480 { text: "Class", value: "class", sortable: false, align: "center" }, 480 { text: "Class", value: "class", sortable: false, align: "center" },
481 { text: "Total", value: "subtotal", sortable: false, align: "center" }, 481 { text: "Total", value: "subtotal", sortable: false, align: "center" },
482 { text: "Discount", value: "discount", sortable: false, align: "center" }, 482 { text: "Discount", value: "discount", sortable: false, align: "center" },
483 { 483 {
484 text: "Paid Amount", 484 text: "Paid Amount",
485 value: "paidAmount", 485 value: "paidAmount",
486 sortable: false, 486 sortable: false,
487 align: "center" 487 align: "center"
488 }, 488 },
489 { 489 {
490 text: "Balance", 490 text: "Balance",
491 value: "Balance", 491 value: "Balance",
492 sortable: false, 492 sortable: false,
493 align: "center" 493 align: "center"
494 }, 494 },
495 { 495 {
496 text: "Status", 496 text: "Status",
497 value: "paymentStatus", 497 value: "paymentStatus",
498 sortable: false, 498 sortable: false,
499 align: "center" 499 align: "center"
500 }, 500 },
501 { 501 {
502 text: "Date", 502 text: "Date",
503 value: "date", 503 value: "date",
504 sortable: false, 504 sortable: false,
505 align: "center" 505 align: "center"
506 }, 506 },
507 { text: "Action", value: "", sortable: false, align: "center" } 507 { text: "Action", value: "", sortable: false, align: "center" }
508 ], 508 ],
509 invoiceList: [], 509 invoiceList: [],
510 token: "", 510 token: "",
511 editedItem: {}, 511 editedItem: {},
512 invoiceData: { 512 invoiceData: {
513 paymentStatus: "", 513 paymentStatus: "",
514 students: [] 514 students: []
515 }, 515 },
516 addclass: [], 516 addclass: [],
517 studentList: [], 517 studentList: [],
518 paymentStatus: [ 518 paymentStatus: [
519 { 519 {
520 name: "Not Paid", 520 name: "Not Paid",
521 value: "NOT_PAID" 521 value: "NOT_PAID"
522 }, 522 },
523 { 523 {
524 name: "Partially Paid", 524 name: "Partially Paid",
525 value: "PARTIALLY_PAID" 525 value: "PARTIALLY_PAID"
526 }, 526 },
527 { 527 {
528 name: "Fully Paid", 528 name: "Fully Paid",
529 value: "FULLY_PAID" 529 value: "FULLY_PAID"
530 } 530 }
531 ] 531 ]
532 }), 532 }),
533 methods: { 533 methods: {
534 save(date) { 534 save(date) {
535 this.$refs.menu1.save(date); 535 this.$refs.menu1.save(date);
536 }, 536 },
537 dates: function(date) { 537 dates: function(date) {
538 return moment(date).format("MMMM DD, YYYY"); 538 return moment(date).format("MMMM DD, YYYY");
539 }, 539 },
540 // profile(item) { 540 // profile(item) {
541 // this.editedIndex = this.InvoiceList.indexOf(item); 541 // this.editedIndex = this.InvoiceList.indexOf(item);
542 // this.editedItem = Object.assign({}, item); 542 // this.editedItem = Object.assign({}, item);
543 // this.dialog1 = true; 543 // this.dialog1 = true;
544 // }, 544 // },
545 deleteItem(item) { 545 deleteItem(item) {
546 let deleteInvoice = { 546 let deleteInvoice = {
547 invoiceId: item._id 547 invoiceId: item._id
548 }; 548 };
549 http() 549 http()
550 .delete( 550 .delete(
551 "/deleteInvoice", 551 "/deleteInvoice",
552 confirm("Are you sure you want to delete this?") && { 552 confirm("Are you sure you want to delete this?") && {
553 params: deleteInvoice 553 params: deleteInvoice
554 } 554 }
555 ) 555 )
556 .then(response => { 556 .then(response => {
557 this.snackbar = true; 557 this.snackbar = true;
558 this.text = "Successfully delete Existing Invoice"; 558 this.text = "Successfully delete Existing Invoice";
559 this.color = "green"; 559 this.color = "green";
560 this.getInvoiceList(); 560 this.getInvoiceList();
561 }) 561 })
562 .catch(error => { 562 .catch(error => {
563 // console.log(error); 563 // console.log(error);
564 }); 564 });
565 }, 565 },
566 close() { 566 close() {
567 this.dialog = false; 567 this.dialog = false;
568 }, 568 },
569 // totalAmount() { 569 // totalAmount() {
570 // // console.log("this.feeType.paidAmount ", this.feeType.paidAmount); 570 // // console.log("this.feeType.paidAmount ", this.feeType.paidAmount);
571 // // console.log( 571 // // console.log(
572 // // "this.feeType.subTotalAAAAAAAAAAAAAAA ", 572 // // "this.feeType.subTotalAAAAAAAAAAAAAAA ",
573 // // this.feeType.subTotal 573 // // this.feeType.subTotal
574 // // ); 574 // // );
575 575
576 // if (this.feeType.paidAmount < this.feeType.subTotal) { 576 // if (this.feeType.paidAmount < this.feeType.subTotal) {
577 // console.log("this.feeType.subTotalBBBBBBBBBBB ", this.feeType.subTotal); 577 // console.log("this.feeType.subTotalBBBBBBBBBBB ", this.feeType.subTotal);
578 578
579 // this.feeType.paidAmount = this.feeType.subTotal; 579 // this.feeType.paidAmount = this.feeType.subTotal;
580 // console.log( 580 // console.log(
581 // "this.feeType.paidAmount BBBBBBBBBBB", 581 // "this.feeType.paidAmount BBBBBBBBBBB",
582 // this.feeType.paidAmount 582 // this.feeType.paidAmount
583 // ); 583 // );
584 // } 584 // }
585 // }, 585 // },
586 submit() { 586 submit() {
587 let feeTypeId = ""; 587 let feeTypeId = "";
588 for (let i = 0; i < this.feeTypes.length; i++) { 588 for (let i = 0; i < this.feeTypes.length; i++) {
589 if (this.feeTypes[i].feeType === this.feeType.feeTypeName) { 589 if (this.feeTypes[i].feeType === this.feeType.feeTypeName) {
590 feeTypeId = this.feeTypes[i]._id; 590 feeTypeId = this.feeTypes[i]._id;
591 } 591 }
592 } 592 }
593 if (this.$refs.form.validate()) { 593 if (this.$refs.form.validate()) {
594 let invoiceData = { 594 let invoiceData = {
595 classId: this.invoiceData.classNum, 595 classId: this.invoiceData.classNum,
596 students: this.invoiceData.students, 596 students: this.invoiceData.students,
597 date: this.invoiceData.date, 597 date: this.invoiceData.date,
598 paymentStatus: this.invoiceData.paymentStatus, 598 paymentStatus: this.invoiceData.paymentStatus,
599 paymentMethod: this.invoiceData.paymentMethod, 599 paymentMethod: this.invoiceData.paymentMethod,
600 feeType: this.feeTypeData, 600 feeType: this.feeTypeData,
601 totalAmount: this.feeType.amount, 601 totalAmount: this.feeType.amount,
602 totalDiscount: this.feeType.discount, 602 totalDiscount: this.feeType.discount,
603 totalSubTotal: this.feeType.subTotal, 603 totalSubTotal: this.feeType.subTotal,
604 totalPaidAmount: this.feeType.paidAmount 604 // totalPaidAmount: this.feeType.paidAmount
605 }; 605 };
606 if (invoiceData.paymentStatus == "NOT_PAID") { 606 if (invoiceData.paymentStatus == "NOT_PAID") {
607 delete invoiceData.totalPaidAmount; 607 delete invoiceData.totalPaidAmount;
608 } 608 }
609 http() 609 http()
610 .post("/createInvoice", invoiceData) 610 .post("/createInvoice", invoiceData)
611 .then(response => { 611 .then(response => {
612 this.getInvoiceList(); 612 this.getInvoiceList();
613 this.snackbar = true; 613 this.snackbar = true;
614 this.text = "New Invoice added successfully"; 614 this.text = "New Invoice added successfully";
615 this.color = "green"; 615 this.color = "green";
616 this.clear(); 616 this.clear();
617 this.feeTypeData = []; 617 this.feeTypeData = [];
618 if (this.feeTypeData.length == 0) { 618 if (this.feeTypeData.length == 0) {
619 this.feeType = { 619 this.feeType = {
620 amount: "0.00", 620 amount: "0.00",
621 discount: "0.00", 621 discount: "0.00",
622 paidAmount: "0.00", 622 paidAmount: "0.00",
623 subTotal: "0.00", 623 subTotal: "0.00",
624 feeTypeList: "" 624 feeTypeList: ""
625 }; 625 };
626 } 626 }
627 this.loading = false; 627 this.loading = false;
628 this.addInvoiceDialog = false; 628 this.addInvoiceDialog = false;
629 }) 629 })
630 .catch(error => { 630 .catch(error => {
631 this.snackbar = true; 631 this.snackbar = true;
632 this.text = error.response.data.errors[0].messages[0]; 632 this.text = error.response.data.errors[0].messages[0];
633 this.color = "error"; 633 this.color = "error";
634 this.loading = false; 634 this.loading = false;
635 }); 635 });
636 } 636 }
637 }, 637 },
638 clear() { 638 clear() {
639 this.$refs.form.reset(); 639 this.$refs.form.reset();
640 }, 640 },
641 getInvoiceList() { 641 getInvoiceList() {
642 this.showLoader = true; 642 this.showLoader = true;
643 http() 643 http()
644 .get("/getInvoicesList", { 644 .get("/getInvoicesList", {
645 params: { schoolId: this.$store.state.schoolId }, 645 params: { schoolId: this.$store.state.schoolId },
646 headers: { Authorization: "Bearer " + this.token } 646 headers: { Authorization: "Bearer " + this.token }
647 }) 647 })
648 .then(response => { 648 .then(response => {
649 this.invoiceList = response.data.data; 649 this.invoiceList = response.data.data;
650 this.showLoader = false; 650 this.showLoader = false;
651 }) 651 })
652 .catch(error => { 652 .catch(error => {
653 // console.log("err====>", err); 653 // console.log("err====>", err);
654 this.showLoader = false; 654 this.showLoader = false;
655 if (error.response.status === 401) { 655 if (error.response.status === 401) {
656 this.$router.replace({ path: "/" }); 656 this.$router.replace({ path: "/" });
657 this.$store.dispatch("setToken", null); 657 this.$store.dispatch("setToken", null);
658 this.$store.dispatch("Id", null); 658 this.$store.dispatch("Id", null);
659 } 659 }
660 }); 660 });
661 }, 661 },
662 selectFeeType() { 662 selectFeeType() {
663 this.showFeeType = true; 663 this.showFeeType = true;
664 this.feeTypeData.push({ feeTypeName: this.feeType.feeTypeName }); 664 this.feeTypeData.push({ feeTypeName: this.feeType.feeTypeName });
665 }, 665 },
666 deleteSelectFee: function(index) { 666 deleteSelectFee: function(index) {
667 this.feeTypeData.splice(index, 1); 667 this.feeTypeData.splice(index, 1);
668 for (let i = 0; i < this.feeTypeData.length; i++) { 668 for (let i = 0; i < this.feeTypeData.length; i++) {
669 this.feeType = this.feeTypeData[i]; 669 this.feeType = this.feeTypeData[i];
670 } 670 }
671 if (this.feeTypeData.length == 0) { 671 if (this.feeTypeData.length == 0) {
672 this.feeType = { 672 this.feeType = {
673 amount: "0.00", 673 amount: "0.00",
674 discount: "0.00", 674 discount: "0.00",
675 paidAmount: "0.00", 675 paidAmount: "0.00",
676 subTotal: "0.00", 676 subTotal: "0.00",
677 feeTypeName: "" 677 feeTypeName: ""
678 }; 678 };
679 } 679 }
680 }, 680 },
681 getAllClasses() { 681 getAllClasses() {
682 http() 682 http()
683 .get("/getClassesList", { 683 .get("/getClassesList", {
684 params: { schoolId: this.$store.state.schoolId }, 684 params: { schoolId: this.$store.state.schoolId },
685 headers: { Authorization: "Bearer " + this.token } 685 headers: { Authorization: "Bearer " + this.token }
686 }) 686 })
687 .then(response => { 687 .then(response => {
688 this.addclass = response.data.data; 688 this.addclass = response.data.data;
689 }) 689 })
690 .catch(err => { 690 .catch(err => {
691 // console.log("err====>", err); 691 // console.log("err====>", err);
692 // this.$router.replace({ path: "/" }); 692 // this.$router.replace({ path: "/" });
693 }); 693 });
694 }, 694 },
695 getAllStudents() { 695 getAllStudents() {
696 this.showLoader = true; 696 this.showLoader = true;
697 http() 697 http()
698 .get("/getStudentsList", { 698 .get("/getStudentsList", {
699 params: { 699 params: {
700 classId: this.invoiceData.classNum, 700 classId: this.invoiceData.classNum,
701 schoolId: this.$store.state.schoolId 701 schoolId: this.$store.state.schoolId
702 }, 702 },
703 headers: { Authorization: "Bearer " + this.token } 703 headers: { Authorization: "Bearer " + this.token }
704 }) 704 })
705 .then(response => { 705 .then(response => {
706 response.data.data.unshift({ 706 response.data.data.unshift({
707 name: "Select All", 707 name: "Select All",
708 _id: "Select All" 708 _id: "Select All"
709 }); 709 });
710 this.studentList = response.data.data; 710 this.studentList = response.data.data;
711 this.showLoader = false; 711 this.showLoader = false;
712 }) 712 })
713 .catch(err => { 713 .catch(err => {
714 this.showLoader = false; 714 this.showLoader = false;
715 // console.log("err====>", err); 715 // console.log("err====>", err);
716 // this.$router.replace({ path: "/" }); 716 // this.$router.replace({ path: "/" });
717 }); 717 });
718 }, 718 },
719 getfeeType() { 719 getfeeType() {
720 http() 720 http()
721 .get("/getFeesList", { 721 .get("/getFeesList", {
722 params: { 722 params: {
723 schoolId: this.$store.state.schoolId 723 schoolId: this.$store.state.schoolId
724 }, 724 },
725 headers: { Authorization: "Bearer " + this.token } 725 headers: { Authorization: "Bearer " + this.token }
726 }) 726 })
727 .then(response => { 727 .then(response => {
728 this.feeTypes = response.data.data; 728 this.feeTypes = response.data.data;
729 }) 729 })
730 .catch(err => { 730 .catch(err => {
731 // console.log("err====>", err); 731 // console.log("err====>", err);
732 // this.$router.replace({ path: "/" }); 732 // this.$router.replace({ path: "/" });
733 }); 733 });
734 }, 734 },
735 getAmmountDetails(feeTyp) { 735 getAmmountDetails(feeTyp) {
736 let feeType = { 736 let feeType = {
737 amount: "", 737 amount: "",
738 discount: "", 738 discount: "",
739 subTotal: "", 739 subTotal: "",
740 subParticularTotal: "", 740 subParticularTotal: "",
741 paidAmount: "" 741 paidAmount: ""
742 }; 742 };
743 for (let i = 0; i < this.feeTypeData.length; i++) { 743 for (let i = 0; i < this.feeTypeData.length; i++) {
744 // *********** AMOUNT *********** 744 // *********** AMOUNT ***********
745 745
746 feeType.amount = 746 feeType.amount =
747 Number(feeType.amount) + Number(this.feeTypeData[i].amount); 747 Number(feeType.amount) + Number(this.feeTypeData[i].amount);
748 // console.log("feeType.amount ", feeType.amount); 748 // console.log("feeType.amount ", feeType.amount);
749 this.feeType.amount = feeType.amount; 749 this.feeType.amount = feeType.amount;
750 this.feeType.subTotal = feeType.amount; 750 this.feeType.subTotal = feeType.amount;
751 this.feeTypeData[i].subTotal = this.feeTypeData[i].amount; 751 this.feeTypeData[i].subTotal = this.feeTypeData[i].amount;
752 752
753 // *********** DISCOUNT *********** 753 // *********** DISCOUNT ***********
754 754
755 if (this.feeTypeData[i].discount) { 755 if (this.feeTypeData[i].discount) {
756 feeType.discount = 756 feeType.discount =
757 Number(feeType.discount) + Number(this.feeTypeData[i].discount); 757 Number(feeType.discount) + Number(this.feeTypeData[i].discount);
758 // console.log("feeType.discount", feeType.discount); 758 // console.log("feeType.discount", feeType.discount);
759 this.feeType.discount = feeType.discount; 759 this.feeType.discount = feeType.discount;
760 feeType.subParticularTotal = 760 feeType.subParticularTotal =
761 this.feeTypeData[i].amount - 761 this.feeTypeData[i].amount -
762 (this.feeTypeData[i].amount * this.feeTypeData[i].discount) / 100; 762 (this.feeTypeData[i].amount * this.feeTypeData[i].discount) / 100;
763 this.feeTypeData[i].subTotal = feeType.subParticularTotal.toFixed(2); 763 this.feeTypeData[i].subTotal = feeType.subParticularTotal.toFixed(2);
764 } 764 }
765 765
766 // *********** SUBTOTAL *********** 766 // *********** SUBTOTAL ***********
767 767
768 feeType.subTotal = 768 feeType.subTotal =
769 Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal); 769 Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal);
770 this.feeType.subTotal = feeType.subTotal.toFixed(2); 770 this.feeType.subTotal = feeType.subTotal.toFixed(2);
771 771
772 // *********** PAID-AMOUNT *********** 772 // *********** PAID-AMOUNT ***********
773 773
774 feeType.paidAmount = 774 feeType.paidAmount =
775 Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount); 775 Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);
776 this.feeType.paidAmount = feeType.paidAmount.toFixed(2); 776 this.feeType.paidAmount = feeType.paidAmount.toFixed(2);
777 777
778 // if paid Amount fill large of subtotal value so this condition are fixed filled subtotal value. 778 // if paid Amount fill large of subtotal value so this condition are fixed filled subtotal value.
779 if (feeType.paidAmount > feeType.subTotal) { 779 if (feeType.paidAmount > feeType.subTotal) {
780 this.feeTypeData[i].paidAmount = this.feeTypeData[i].subTotal; 780 this.feeTypeData[i].paidAmount = this.feeTypeData[i].subTotal;
781 this.feeType.paidAmount = feeType.subTotal; 781 this.feeType.paidAmount = feeType.subTotal;
782 } 782 }
783 } 783 }
784 }, 784 },
785 getPayMethodList() { 785 getPayMethodList() {
786 if (this.invoiceData.paymentStatus == "PARTIALLY_PAID") { 786 if (this.invoiceData.paymentStatus == "PARTIALLY_PAID") {
787 this.showPayMethods = true; 787 this.showPayMethods = true;
788 } else if (this.invoiceData.paymentStatus == "FULLY_PAID") { 788 } else if (this.invoiceData.paymentStatus == "FULLY_PAID") {
789 this.showPayMethods = true; 789 this.showPayMethods = true;
790 } else { 790 } else {
791 this.showPayMethods = false; 791 this.showPayMethods = false;
792 } 792 }
793 }, 793 },
794 selectAllStudent() { 794 selectAllStudent() {
795 console.log("this.studentId", this.invoiceData.studentId); 795 console.log("this.studentId", this.invoiceData.studentId);
796 this.invoiceData.students = []; 796 this.invoiceData.students = [];
797 if (this.invoiceData.studentId === "Select All") { 797 if (this.invoiceData.studentId === "Select All") {
798 for (let i = 1; i < this.studentList.length; i++) { 798 for (let i = 1; i < this.studentList.length; i++) {
799 this.invoiceData.students.push(this.studentList[i]._id); 799 this.invoiceData.students.push(this.studentList[i]._id);
800 console.log("data", this.invoiceData.students); 800 console.log("data", this.invoiceData.students);
801 // data.push(this.studentList[i]._id); 801 // data.push(this.studentList[i]._id);
802 // console.log("data", data); 802 // console.log("data", data);
803 } 803 }
804 } else { 804 } else {
805 this.invoiceData.students.push(this.invoiceData.studentId); 805 this.invoiceData.students.push(this.invoiceData.studentId);
806 } 806 }
807 }, 807 },
808 displaySearch() { 808 displaySearch() {
809 (this.show = false), (this.showSearch = true); 809 (this.show = false), (this.showSearch = true);
810 }, 810 },
811 closeSearch() { 811 closeSearch() {
812 this.showSearch = false; 812 this.showSearch = false;
813 this.show = true; 813 this.show = true;
814 this.search = ""; 814 this.search = "";
815 } 815 }
816 }, 816 },
817 mounted() { 817 mounted() {
818 this.token = this.$store.state.token; 818 this.token = this.$store.state.token;
819 this.getInvoiceList(); 819 this.getInvoiceList();
820 this.getAllClasses(); 820 this.getAllClasses();
821 this.getfeeType(); 821 this.getfeeType();
822 } 822 }
823 }; 823 };
824 </script> 824 </script>
825 825
826 826
827 <style scoped> 827 <style scoped>
828 table { 828 table {
829 border-collapse: collapse; 829 border-collapse: collapse;
830 border: 1px solid #e2e7eb; 830 border: 1px solid #e2e7eb;
831 } 831 }
832 832
833 th, 833 th,
834 .tdFeeType { 834 .tdFeeType {
835 border: 1px solid #e2e7eb; 835 border: 1px solid #e2e7eb;
836 padding: 10px; 836 padding: 10px;
837 text-align: center; 837 text-align: center;
838 } 838 }
839 table.feeTypeTable { 839 table.feeTypeTable {
840 table-layout: auto !important; 840 table-layout: auto !important;
841 width: 100% !important; 841 width: 100% !important;
842 } 842 }
843 </style> 843 </style>