viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit c5110e90059a312619b18aeb2b6e611b5fccc0ec

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

fixed responsive pernt pdf design view invoice and payment invoice click on view pdf

Showing 3 changed files with 548 additions and 264 deletions   Show diff stats
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 3
4 <head> 4 <head>
5 <meta charset="utf-8"> 5 <meta charset="utf-8">
6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0">
7 <!-- <link href="https://fonts.googleapis.com/css?family=Nunito,700%7CMaterial+Icons" rel="stylesheet"> --> 7 <!-- <link href="https://fonts.googleapis.com/css?family=Nunito,700%7CMaterial+Icons" rel="stylesheet"> -->
8 <!-- <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500i,800|Material+Icons&display=swap" rel="stylesheet"> --> 8 <!-- <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500i,800|Material+Icons&display=swap" rel="stylesheet"> -->
9 <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,700,800|Material+Icons&display=swap" rel="stylesheet"> 9 <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,700,800|Material+Icons&display=swap" rel="stylesheet">
10 <title>School Management</title> 10 <title>School Management</title>
11 <link rel="shortcut icon" href="/static/logo.png" type="image/x-icon"> 11 <link rel="shortcut icon" href="/static/logo.png" type="image/x-icon">
12 <meta name="description" content="School Management"> 12 <meta name="description" content="School Management">
13 <link href="./static/css/custom.css" rel="stylesheet" /> 13 <link href="./static/css/custom.css" rel="stylesheet" />
14 <style> 14 <!-- <style>
15 [v-cloak] { 15 [v-cloak] {
16 display: none; 16 display: none;
17 } 17 }
18 </style> 18 </style> -->
19 </head> 19 </head>
20 20
21 <body> 21 <body>
22 <div id="app"> 22 <div id="app">
23 </div> 23 </div>
24 <!-- built files will be auto injected --> 24 <!-- built files will be auto injected -->
25 <!-- Global site tag (gtag.js) - Google Analytics --> 25 <!-- Global site tag (gtag.js) - Google Analytics -->
26 <!-- <script async src="https://www.googletagmanager.com/gtag/js?id=UA-3881136-11"></script> --> 26 <!-- <script async src="https://www.googletagmanager.com/gtag/js?id=UA-3881136-11"></script> -->
27 <!-- <script> 27 <!-- <script>
28 window.dataLayer = window.dataLayer || []; 28 window.dataLayer = window.dataLayer || [];
29 29
30 function gtag() { 30 function gtag() {
31 dataLayer.push(arguments); 31 dataLayer.push(arguments);
32 } 32 }
33 gtag('js', new Date()); 33 gtag('js', new Date());
34 gtag('config', 'UA-3881136-11'); 34 gtag('config', 'UA-3881136-11');
35 </script> --> 35 </script> -->
36 </body> 36 </body>
37 37
38 </html> 38 </html>
src/pages/Account/viewInvoice.vue
Diff comments   View file @c5110e9
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <!-- ****** Edit INVOICE ****** --> 3 <!-- ****** Edit INVOICE ****** -->
4 <v-container fluid grid-list-md> 4 <v-container fluid grid-list-md>
5 <v-layout> 5 <v-layout>
6 <v-flex xs12 sm8 md10> 6 <v-flex xs12 sm8 md10>
7 <v-btn class="open-dialog-button mt-3" round dark @click="printInvoice()"> 7 <v-btn class="open-dialog-button mt-3" round dark @click="printInvoice()">
8 Print 8 Print
9 <v-icon size="18" right dark>print</v-icon> 9 <v-icon size="18" right dark>print</v-icon>
10 </v-btn> 10 </v-btn>
11 </v-flex> 11 </v-flex>
12 </v-layout> 12 </v-layout>
13 <v-flex xs12 sm12 id="printMe"> 13 <v-flex xs12 sm12 id="printMe">
14 <v-layout wrap> 14 <v-layout wrap>
15 <!-- ****** TABLE DATA MARK ****** --> 15 <!-- ****** TABLE DATA MARK ****** -->
16 <v-flex xs12 sm12 md12> 16 <v-flex xs12 sm12 md12>
17 <v-card> 17 <v-card
18 <v-layout wrap> 18 style="
19 <v-flex 12> 19 background-color: #fff;
20 <br /> 20 border-color: #fff;
21 <v-layout> 21 color: rgba(0,0,0,0.87);
22 <v-flex xs12 sm12 md12 class="text-xs-center"> 22 border: 1px solid rgb(226, 231, 235);
23 <!-- <img :src="userData.schoolLogoUrl" width="140" alt="logo" /> 23 -webkit-box-shadow: 0 1px 1px 0 rgba(60,64,67,0.08), 0 1px 3px 1px rgba(60,64,67,0.16);
24 <p class="title">{{ userData.name }}</p> 24 box-shadow: 0 1px 1px 0 rgba(60,64,67,0.08), 0 1px 3px 1px rgba(60,64,67,0.16);"
25 <p>{{ userData.address }}</p>--> 25 >
26 <v-avatar> 26 <!-- <v-layout wrap> -->
27 <img :src="userData.schoolLogoUrl" v-if="userData.schoolLogoUrl" /> 27 <v-flex xs12 style="padding:16px 0px;">
28 <img 28 <v-layout wrap>
29 src="/static/schoolIcons/INTRACK_White.png" 29 <v-flex xs12 sm3 md4 style="text-align:center">
30 v-else-if="!userData.schoolLogoUrl" 30 <v-avatar>
31 /> 31 <img :src="userData.schoolLogoUrl" v-if="userData.schoolLogoUrl" />
32 </v-avatar> 32 <img
33 <p class="title">{{ userData.name }}</p> 33 src="/static/schoolIcons/INTRACK_White.png"
34 <p>{{ userData.address }}</p> 34 v-else-if="!userData.schoolLogoUrl"
35 </v-flex> 35 />
36 36 </v-avatar>
37 <v-flex xs12 sm12 md12 class="text-xs-center"> 37 <p
38 <v-layout> 38 style="font-size: 20px !important;
39 <v-flex xs4 sm2> 39 font-weight: 500;
40 <h5 class="right my-1"> 40 line-height: 1 !important;
41 <b>Name:</b> 41 letter-spacing: 0.02em !important;
42 </h5> 42 margin:8px 0px;"
43 </v-flex> 43 >{{ userData.name }}</p>
44 <v-flex sm11 xs8> 44 <p>{{ userData.address }}</p>
45 <h5 class="my-1">{{ invoiceParticularData.studentId.name }}</h5> 45 </v-flex>
46 </v-flex> 46 <v-flex xs12 sm5 md4 class="text-xs-center">
47 </v-layout> 47 <v-layout>
48 <v-layout> 48 <v-flex xs4 sm3>
49 <v-flex xs4 sm2> 49 <h5 style="float:right;margin: 4px 0px;">
50 <h5 class="right my-1"> 50 <b>Name:</b>
51 <b>Class:</b> 51 </h5>
52 </h5> 52 </v-flex>
53 </v-flex> 53 <v-flex sm9 xs8>
54 <v-flex sm11 xs8> 54 <h5
55 <h5 class="my-1">{{ invoiceParticularData.classId.classNum }}</h5> 55 style="margin: 4px 0px;float: left;"
56 </v-flex> 56 >{{ invoiceParticularData.studentId.name }}</h5>
57 </v-layout> 57 </v-flex>
58 <!-- <v-flex xs12 sm6> --> 58 </v-layout>
59 <v-layout> 59 <v-layout>
60 <v-flex xs4 sm2> 60 <v-flex xs4 sm3>
61 <h5 class="right my-1"> 61 <h5 style="float:right;margin: 4px 0px;">
62 <b>Roll No:</b> 62 <b>Class:</b>
63 </h5> 63 </h5>
64 </v-flex> 64 </v-flex>
65 <v-flex sm6 xs8> 65 <v-flex sm9 xs8>
66 <h5 class="my-1">{{ invoiceParticularData.studentId.rollNo }}</h5> 66 <h5
67 </v-flex> 67 style="margin: 4px 0px;float: left;"
68 </v-layout> 68 >{{ invoiceParticularData.classId.classNum }}</h5>
69 <v-layout> 69 </v-flex>
70 <v-flex xs4 sm2> 70 </v-layout>
71 <h5 class="right my-1"> 71 <v-layout>
72 <b>email:</b> 72 <v-flex xs4 sm3>
73 </h5> 73 <h5 style="float:right;;margin: 4px 0px;">
74 </v-flex> 74 <b>Roll:</b>
75 <v-flex sm6 xs8> 75 </h5>
76 <h5 class="my-1 linkCover">{{ invoiceParticularData.studentId.email }}</h5> 76 </v-flex>
77 </v-flex> 77 <v-flex sm9 xs8>
78 </v-layout> 78 <h5
79 </v-flex> 79 style="margin: 4px 0px;float: left;"
80 <v-flex xs12 sm12 md12 class="text-xs-center"> 80 >{{ invoiceParticularData.studentId.rollNo }}</h5>
81 <v-layout> 81 </v-flex>
82 <v-flex xs4 sm2> 82 </v-layout>
83 <h5 class="right my-1"> 83 <v-layout>
84 <b>invoice:</b> 84 <v-flex xs4 sm3>
85 </h5> 85 <h5 style="float:right;margin: 4px 0px;">
86 </v-flex> 86 <b>email:</b>
87 <v-flex sm11 xs8> 87 </h5>
88 <h5 class="my-1">#{{ invoiceParticularData.invoiceNumber }}</h5> 88 </v-flex>
89 </v-flex> 89 <v-flex sm9 xs8>
90 </v-layout> 90 <h5
91 <v-layout> 91 class="linkCover"
92 <v-flex xs4 sm2> 92 style="margin: 4px 0px;float: left;"
93 <h5 class="right my-1"> 93 >{{ invoiceParticularData.studentId.email }}</h5>
94 <b>Status :</b> 94 </v-flex>
95 </h5> 95 </v-layout>
96 </v-flex> 96 </v-flex>
97 <v-flex sm6 xs8> 97 <v-flex xs12 sm4 md4 class="text-xs-center">
98 <h5 class="my-1">{{ invoiceParticularData.paymentStatus }}</h5> 98 <v-layout>
99 </v-flex> 99 <v-flex xs4 sm3>
100 </v-layout> 100 <h5 style="float:right;margin: 4px 0px;">
101 </v-flex> 101 <b>invoice:</b>
102 </v-layout> 102 </h5>
103 </v-flex> 103 </v-flex>
104 </v-layout> 104 <v-flex sm9 xs8>
105 <table class="feeTypeTable tableRsponsive"> 105 <h5
106 <tr class="info white--text"> 106 style="margin: 4px 0px;float: left;"
107 <th>#</th> 107 >#{{ invoiceParticularData.invoiceNumber }}</h5>
108 <th>Fee Type</th> 108 </v-flex>
109 <th>Amount</th> 109 </v-layout>
110 <th>Discount</th> 110 <v-layout>
111 <th>Subtotal</th> 111 <v-flex xs4 sm3>
112 <h5 style="float:right;margin: 4px 0px;">
113 <b>Status:</b>
114 </h5>
115 </v-flex>
116 <v-flex sm9 xs8>
117 <h5
118 style="margin: 4px 0px;float: left;"
119 >{{ invoiceParticularData.paymentStatus }}</h5>
120 </v-flex>
121 </v-layout>
122 </v-flex>
123 </v-layout>
124 </v-flex>
125 <!-- </v-layout> -->
126 <table
127 class="tableRsponsive"
128 style="
129 table-layout: auto !important;
130 width: 100% !important;
131 border-collapse: collapse;
132 border: 1px solid #e2e7eb;"
133 >
134 <tr
135 class="white--text"
136 style="
137 background: #827bfa !important;
138 border-color: #827bfa !important;"
139 >
140 <th
141 style="
142 border: 1px solid #e2e7eb;
143 padding: 10px;
144 text-align: center;"
145 >#</th>
146 <th
147 style="
148 border: 1px solid #e2e7eb;
149 padding: 10px;
150 text-align: center;"
151 >Fee Type</th>
152 <th
153 style="
154 border: 1px solid #e2e7eb;
155 padding: 10px;
156 text-align: center;"
157 >Amount</th>
158 <th
159 style="
160 border: 1px solid #e2e7eb;
161 padding: 10px;
162 text-align: center;"
163 >Discount</th>
164 <th
165 style="
166 border: 1px solid #e2e7eb;
167 padding: 10px;
168 text-align: center;"
169 >Subtotal</th>
112 </tr> 170 </tr>
113 <tr 171 <tr
114 v-for="(feeType, index) in feeTypeData" 172 v-for="(feeType, index) in feeTypeData"
115 :key="index" 173 :key="index"
116 v-on:keyup="getAmmountDetails(feeType)" 174 v-on:keyup="getAmmountDetails(feeType)"
117 > 175 >
118 <td style="width:40px">{{ index + 1 }}</td> 176 <td
119 <td style="width:120px">{{ feeType.feeTypeName }}</td> 177 style="width:40px;
120 <td style="width:120px">{{ feeType.amount }}</td> 178 border: 1px solid #e2e7eb;
121 <td style="width:120px">{{ feeType.amount-feeType.subTotal }}</td> 179 padding: 10px;
122 <td style="width:120px">{{ feeType.subTotal }}</td> 180 text-align: center;"
181 >{{ index + 1 }}</td>
182 <td
183 style="
184 width:120px;
185 border: 1px solid #e2e7eb;
186 padding: 10px;
187 text-align: center;"
188 >{{ feeType.feeTypeName }}</td>
189 <td
190 style="width:120px;
191 border: 1px solid #e2e7eb;
192 padding: 10px;
193 text-align: center;"
194 >{{ feeType.amount }}</td>
195 <td
196 style="width:120px;
197 border: 1px solid #e2e7eb;
198 padding: 10px;
199 text-align: center;"
200 >{{ feeType.amount-feeType.subTotal }}</td>
201 <td
202 style="width:120px;
203 border: 1px solid #e2e7eb;
204 padding: 10px;
205 text-align: center;"
206 >{{ feeType.subTotal }}</td>
123 </tr> 207 </tr>
124 <tfoot> 208 <tfoot>
125 <tr> 209 <tr>
126 <td colspan="4"> 210 <td
127 <span class="right subheding">Total Amount (RS) :</span> 211 colspan="4"
212 style="
213 border: 1px solid #e2e7eb;
214 padding: 10px;
215 text-align: center;"
216 >
217 <span style="float:right">Total Amount (RS) :</span>
128 </td> 218 </td>
129 <td>{{ feeType.subTotal }}</td> 219 <td
220 style="
221 border: 1px solid #e2e7eb;
222 padding: 10px;
223 text-align: center;"
224 >{{ feeType.subTotal }}</td>
130 </tr> 225 </tr>
131 <tr> 226 <tr>
132 <td colspan="4"> 227 <td
133 <span class="right subheding">Paid (RS) :</span> 228 colspan="4"
229 style="
230 border: 1px solid #e2e7eb;
231 padding: 10px;
232 text-align: center;"
233 >
234 <span style="float:right">Paid (RS) :</span>
134 </td> 235 </td>
135 <td>{{ feeType.totalPaidAmount ? feeType.totalPaidAmount : 0 }}</td> 236 <td
237 style="
238 border: 1px solid #e2e7eb;
239 padding: 10px;
240 text-align: center;"
241 >{{ feeType.totalPaidAmount ? feeType.totalPaidAmount : 0 }}</td>
136 </tr> 242 </tr>
137 <tr> 243 <tr>
138 <td colspan="4"> 244 <td
139 <span class="right subheding">Discount :</span> 245 colspan="4"
246 style="
247 border: 1px solid #e2e7eb;
248 padding: 10px;
249 text-align: center;"
250 >
251 <span style="float:right">Discount :</span>
140 </td> 252 </td>
141 <td>{{ feeType.discount}}</td> 253 <td
254 style="
255 border: 1px solid #e2e7eb;
256 padding: 10px;
257 text-align: center;"
258 >{{ feeType.discount}}</td>
142 </tr> 259 </tr>
143 <tr> 260 <tr>
144 <td colspan="4"> 261 <td
145 <span class="right subheding">Balance (RS) :</span> 262 colspan="4"
263 style="
264 border: 1px solid #e2e7eb;
265 padding: 10px;
266 text-align: center;"
267 >
268 <span style="float:right">Balance (RS) :</span>
146 </td> 269 </td>
147 <td>{{ feeType.totalPaidAmount ? feeType.subTotal - feeType.totalPaidAmount : feeType.subTotal }}</td> 270 <td
271 style="
272 border: 1px solid #e2e7eb;
273 padding: 10px;
274 text-align: center;"
275 >{{ feeType.totalPaidAmount ? feeType.subTotal - feeType.totalPaidAmount : feeType.subTotal }}</td>
148 </tr> 276 </tr>
149 </tfoot> 277 </tfoot>
150 </table> 278 </table>
279 <v-layout>
280 <v-flex xs12>
281 <v-card
282 style="width:22%;
283 position:relative;
284 float:right !important;
285 margin:10px 0px;
286 -webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important;
287 box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important;"
288 >
289 <div
290 style="
291 min-height: 20px;
292 padding: 9px;
293 margin-bottom: 20px;
294 background-color: #f0f3f5;
295 border: 1px solid #E2E7EB;
296 border-radius: 3px;"
297 >
298 <p
299 style="
300 margin: 0 0 10px;
301 font-size: 12px;"
302 >
303 Create By : Admin
304 <br />
305 Date : {{ dates(invoiceParticularData.created) }}
306 </p>
307 </div>
308 </v-card>
309 </v-flex>
310 </v-layout>
151 </v-card> 311 </v-card>
152 </v-flex> 312 </v-flex>
153 </v-layout> 313 </v-layout>
154 </v-flex> 314 </v-flex>
155 </v-container> 315 </v-container>
156 <div class="loader" v-if="showLoader"> 316 <div class="loader" v-if="showLoader">
157 <v-progress-circular indeterminate color="white"></v-progress-circular> 317 <v-progress-circular indeterminate color="white"></v-progress-circular>
158 </div> 318 </div>
159 </v-app> 319 </v-app>
160 </template> 320 </template>
161 321
162 <script> 322 <script>
163 import http from "@/Services/http.js"; 323 import http from "@/Services/http.js";
164 import moment from "moment"; 324 import moment from "moment";
165 325
166 export default { 326 export default {
167 data: () => ({ 327 data: () => ({
168 showLoader: false, 328 showLoader: false,
169 feeTypes: [], 329 feeTypes: [],
170 filterData: [], 330 filterData: [],
171 invoiceData: {}, 331 invoiceData: {},
172 feeType: { 332 feeType: {
173 amount: "", 333 amount: "",
174 discount: "", 334 discount: "",
175 totalPaidAmount: "", 335 totalPaidAmount: "",
176 subTotal: "", 336 subTotal: "",
177 feeTypeName: "" 337 feeTypeName: ""
178 }, 338 },
179 feeTypeData: [], 339 feeTypeData: [],
180 token: "", 340 token: "",
181 invoiceParticularData: { 341 invoiceParticularData: {
182 studentId: { 342 studentId: {
183 name: "" 343 name: ""
184 }, 344 },
185 classId: { 345 classId: {
186 classNum: "" 346 classNum: ""
187 } 347 }
188 }, 348 },
189 userData: { 349 userData: {
190 name: "" 350 name: ""
191 } 351 }
192 }), 352 }),
193 353
194 methods: { 354 methods: {
355 dates: function(date) {
356 return moment(date).format("MMMM DD, YYYY");
357 },
195 getInvoiceList() { 358 getInvoiceList() {
196 http() 359 http()
197 .get("/getParticularInvoice", { 360 .get("/getParticularInvoice", {
198 params: { 361 params: {
199 invoiceId: this.$route.params.viewInvoiceId, 362 invoiceId: this.$route.params.viewInvoiceId,
200 schoolId: this.$store.state.schoolId 363 schoolId: this.$store.state.schoolId
201 }, 364 },
202 headers: { Authorization: "Bearer " + this.token } 365 headers: { Authorization: "Bearer " + this.token }
203 }) 366 })
204 .then(response => { 367 .then(response => {
205 this.invoiceParticularData = response.data.data; 368 this.invoiceParticularData = response.data.data;
206 this.invoiceData = this.invoiceParticularData; 369 this.invoiceData = this.invoiceParticularData;
207 this.invoiceData.date = this.invoiceParticularData.date.slice(0, 10); 370 this.invoiceData.date = this.invoiceParticularData.date.slice(0, 10);
208 this.feeTypeData = this.invoiceParticularData.feeType; 371 this.feeTypeData = this.invoiceParticularData.feeType;
209 (this.feeType.amount = response.data.data.totalAmount), 372 (this.feeType.amount = response.data.data.totalAmount),
210 (this.feeType.discount = response.data.data.totalDiscount), 373 (this.feeType.discount = response.data.data.totalDiscount),
211 (this.feeType.subTotal = response.data.data.totalSubTotal), 374 (this.feeType.subTotal = response.data.data.totalSubTotal),
212 (this.feeType.totalPaidAmount = response.data.data.totalPaidAmount); 375 (this.feeType.totalPaidAmount = response.data.data.totalPaidAmount);
213 this.showLoader = false; 376 this.showLoader = false;
214 }) 377 })
215 .catch(error => { 378 .catch(error => {
216 this.showLoader = false; 379 this.showLoader = false;
217 if (error.response.status === 401) { 380 if (error.response.status === 401) {
218 this.$router.replace({ path: "/" }); 381 this.$router.replace({ path: "/" });
219 this.$store.dispatch("setToken", null); 382 this.$store.dispatch("setToken", null);
220 this.$store.dispatch("Id", null); 383 this.$store.dispatch("Id", null);
221 this.$store.dispatch("Role", null); 384 this.$store.dispatch("Role", null);
222 } 385 }
223 }); 386 });
224 }, 387 },
225 getfeeType() { 388 getfeeType() {
226 http() 389 http()
227 .get("/getFeesList", { 390 .get("/getFeesList", {
228 params: { schoolId: this.$store.state.schoolId }, 391 params: { schoolId: this.$store.state.schoolId },
229 headers: { Authorization: "Bearer " + this.token } 392 headers: { Authorization: "Bearer " + this.token }
230 }) 393 })
231 .then(response => { 394 .then(response => {
232 this.feeTypes = response.data.data; 395 this.feeTypes = response.data.data;
233 }) 396 })
234 .catch(err => { 397 .catch(err => {
235 // console.log("err====>", err); 398 // console.log("err====>", err);
236 }); 399 });
237 }, 400 },
238 getAmmountDetails(feeTyp) { 401 getAmmountDetails(feeTyp) {
239 let feeType = { 402 let feeType = {
240 subTotal: "", 403 subTotal: "",
241 subParticularTotal: "", 404 subParticularTotal: "",
242 paidAmount: "" 405 paidAmount: ""
243 }; 406 };
244 // *********** SUBTOTAL *********** 407 // *********** SUBTOTAL ***********
245 feeType.subTotal = 408 feeType.subTotal =
246 Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal); 409 Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal);
247 this.feeType.subTotal = feeType.subTotal.toFixed(2); 410 this.feeType.subTotal = feeType.subTotal.toFixed(2);
248 // *********** PAID-AMOUNT *********** 411 // *********** PAID-AMOUNT ***********
249 feeType.paidAmount = 412 feeType.paidAmount =
250 Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount); 413 Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);
251 this.feeType.paidAmount = feeType.paidAmount.toFixed(2); 414 this.feeType.paidAmount = feeType.paidAmount.toFixed(2);
252 }, 415 },
253 printInvoice() { 416 printInvoice() {
254 // Pass the element id here 417 // Pass the element id here
255 this.$htmlToPaper("printMe"); 418 this.$htmlToPaper("printMe");
256 }, 419 },
257 getUserData() { 420 getUserData() {
258 http() 421 http()
259 .get("/getParticularUserDetail") 422 .get("/getParticularUserDetail")
260 .then(response => { 423 .then(response => {
261 this.userData = response.data.data; 424 this.userData = response.data.data;
262 }) 425 })
263 .catch(error => { 426 .catch(error => {
264 // if (error.response.status === 401) { 427 if (error.response.status === 401) {
265 // this.$router.replace({ path: "/" }); 428 this.$router.replace({ path: "/" });
266 // this.$store.dispatch("setToken", null); 429 this.$store.dispatch("setToken", null);
267 // this.$store.dispatch("Id", null); 430 this.$store.dispatch("Id", null);
268 // } 431 }
269 }); 432 });
270 } 433 }
271 }, 434 },
272 mounted() { 435 mounted() {
273 this.token = this.$store.state.token; 436 this.token = this.$store.state.token;
274 this.getInvoiceList(); 437 this.getInvoiceList();
275 this.getfeeType(); 438 this.getfeeType();
276 this.getUserData(); 439 this.getUserData();
277 }, 440 },
278 created() { 441 created() {
279 this.$root.$on("app:search", search => { 442 this.$root.$on("app:search", search => {
280 this.search = search; 443 this.search = search;
281 }); 444 });
282 }, 445 },
283 beforeDestroy() { 446 beforeDestroy() {
284 // dont forget to remove the listener 447 // dont forget to remove the listener
285 this.$root.$off("app:search"); 448 this.$root.$off("app:search");
286 } 449 }
287 }; 450 };
288 </script> 451 </script>
289 452
290 453
291 <style scoped> 454 <style>
292 .active { 455 /* table {
293 background-color: gray;
294 color: white !important;
295 }
296 .activebtn {
297 color: black !important;
298 }
299 table {
300 border-collapse: collapse; 456 border-collapse: collapse;
301 border: 1px solid #e2e7eb; 457 border: 1px solid #e2e7eb;
302 } 458 } */
303 .open-dialog-button { 459 .open-dialog-button {
304 background: #827bfa !important; 460 background: #827bfa !important;
305 border-color: #827bfa !important; 461 border-color: #827bfa !important;
306 text-transform: none !important; 462 text-transform: none !important;
307 } 463 }
308 464 .center {
309 th, 465 text-align: center !important;
466 }
467 /* th,
310 td { 468 td {
311 border: 1px solid #e2e7eb; 469 border: 1px solid #e2e7eb;
312 padding: 10px; 470 padding: 10px;
313 text-align: center; 471 text-align: center;
314 } 472 } */
315 table.feeTypeTable { 473 table.feeTypeTable {
316 table-layout: auto !important; 474 table-layout: auto !important;
317 width: 100% !important; 475 width: 100% !important;
318 } 476 }
319 @media screen and (max-width: 380px) { 477 @media screen and (max-width: 380px) {
src/pages/Account/viewPaymentInvoice.vue
Diff comments   View file @c5110e9
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <!-- ****** Edit INVOICE ****** --> 3 <!-- ****** Edit INVOICE ****** -->
4 <v-container fluid grid-list-md> 4 <v-container fluid grid-list-md>
5 <v-layout> 5 <v-layout>
6 <v-flex xs12 sm8 md10> 6 <v-flex xs12 sm8 md10>
7 <v-btn class="open-dialog-button mt-3" round dark @click="printInvoice()"> 7 <v-btn class="open-dialog-button mt-3" round dark @click="printInvoice()">
8 Print 8 Print
9 <v-icon size="18" right dark>print</v-icon> 9 <v-icon size="18" right dark>print</v-icon>
10 </v-btn> 10 </v-btn>
11 </v-flex> 11 </v-flex>
12 </v-layout> 12 </v-layout>
13 <v-flex xs12 sm12 id="printMe"> 13 <v-flex xs12 sm12 id="printMe">
14 <v-layout wrap> 14 <v-layout wrap>
15 <!-- ****** TABLE DATA MARK ****** --> 15 <!-- ****** TABLE DATA MARK ****** -->
16 <v-flex xs12 sm12 md12> 16 <v-flex xs12 sm12 md12>
17 <v-card> 17 <v-card
18 <v-layout wrap> 18 style="
19 <v-flex 12> 19 background-color: #fff;
20 <br /> 20 border-color: #fff;
21 <v-layout> 21 color: rgba(0,0,0,0.87);
22 <v-flex xs12 sm12 md12 class="text-xs-center"> 22 border: 1px solid rgb(226, 231, 235);
23 <v-avatar> 23 -webkit-box-shadow: 0 1px 1px 0 rgba(60,64,67,0.08), 0 1px 3px 1px rgba(60,64,67,0.16);
24 <img :src="userData.schoolLogoUrl" v-if="userData.schoolLogoUrl" /> 24 box-shadow: 0 1px 1px 0 rgba(60,64,67,0.08), 0 1px 3px 1px rgba(60,64,67,0.16);"
25 <img 25 >
26 src="/static/schoolIcons/INTRACK_White.png" 26 <!-- <v-layout wrap> -->
27 v-else-if="!userData.schoolLogoUrl" 27 <v-flex xs12 style="padding:16px 0px;">
28 /> 28 <v-layout wrap>
29 </v-avatar> 29 <v-flex xs12 sm3 md4 style="text-align:center">
30 <p class="title">{{ userData.name }}</p> 30 <v-avatar>
31 <p>{{ userData.address }}</p> 31 <img :src="userData.schoolLogoUrl" v-if="userData.schoolLogoUrl" />
32 </v-flex> 32 <img
33 33 src="/static/schoolIcons/INTRACK_White.png"
34 <v-flex xs12 sm12 md12 class="text-xs-center"> 34 v-else-if="!userData.schoolLogoUrl"
35 <v-layout> 35 />
36 <v-flex xs4 sm2> 36 </v-avatar>
37 <h5 class="right my-1"> 37 <p
38 <b>Name:</b> 38 style="font-size: 20px !important;
39 </h5> 39 font-weight: 500;
40 </v-flex> 40 line-height: 1 !important;
41 <v-flex sm11 xs8> 41 letter-spacing: 0.02em !important;
42 <h5 class="my-1">{{ invoiceParticularData.studentId.name }}</h5> 42 margin:8px 0px;"
43 </v-flex> 43 >{{ userData.name }}</p>
44 </v-layout> 44 <p>{{ userData.address }}</p>
45 <v-layout> 45 </v-flex>
46 <v-flex xs4 sm2> 46 <v-flex xs12 sm5 md4 class="text-xs-center">
47 <h5 class="right my-1"> 47 <v-layout>
48 <b>Class:</b> 48 <v-flex xs4 sm3>
49 </h5> 49 <h5 style="float:right;margin: 4px 0px;">
50 </v-flex> 50 <b>Name:</b>
51 <v-flex sm11 xs8> 51 </h5>
52 <h5 class="my-1">{{ invoiceParticularData.classId.classNum }}</h5> 52 </v-flex>
53 </v-flex> 53 <v-flex sm9 xs8>
54 </v-layout> 54 <h5
55 <!-- <v-flex xs12 sm6> --> 55 style="margin: 4px 0px;float: left;"
56 <v-layout> 56 >{{ invoiceParticularData.studentId.name }}</h5>
57 <v-flex xs4 sm2> 57 </v-flex>
58 <h5 class="right my-1"> 58 </v-layout>
59 <b>Roll No:</b> 59 <v-layout>
60 </h5> 60 <v-flex xs4 sm3>
61 </v-flex> 61 <h5 style="float:right;margin: 4px 0px;">
62 <v-flex sm6 xs8> 62 <b>Class:</b>
63 <h5 class="my-1">{{ invoiceParticularData.studentId.rollNo }}</h5> 63 </h5>
64 </v-flex> 64 </v-flex>
65 </v-layout> 65 <v-flex sm9 xs8>
66 <v-layout> 66 <h5
67 <v-flex xs4 sm2> 67 style="margin: 4px 0px;float: left;"
68 <h5 class="right my-1"> 68 >{{ invoiceParticularData.classId.classNum }}</h5>
69 <b>email:</b> 69 </v-flex>
70 </h5> 70 </v-layout>
71 </v-flex> 71 <v-layout>
72 <v-flex sm6 xs8> 72 <v-flex xs4 sm3>
73 <h5 class="my-1 linkCover">{{ invoiceParticularData.studentId.email }}</h5> 73 <h5 style="float:right;;margin: 4px 0px;">
74 </v-flex> 74 <b>Roll:</b>
75 </v-layout> 75 </h5>
76 </v-flex> 76 </v-flex>
77 <v-flex xs12 sm12 md12 class="text-xs-center"> 77 <v-flex sm9 xs8>
78 <v-layout> 78 <h5
79 <v-flex xs4 sm2> 79 style="margin: 4px 0px;float: left;"
80 <h5 class="right my-1"> 80 >{{ invoiceParticularData.studentId.rollNo }}</h5>
81 <b>invoice:</b> 81 </v-flex>
82 </h5> 82 </v-layout>
83 </v-flex> 83 <v-layout>
84 <v-flex sm11 xs8> 84 <v-flex xs4 sm3>
85 <h5 class="my-1">#{{ invoiceParticularData.invoiceNumber }}</h5> 85 <h5 style="float:right;margin: 4px 0px;">
86 </v-flex> 86 <b>email:</b>
87 </v-layout> 87 </h5>
88 <v-layout> 88 </v-flex>
89 <v-flex xs4 sm2> 89 <v-flex sm9 xs8>
90 <h5 class="right my-1"> 90 <h5
91 <b>Payment Method :</b> 91 class="linkCover"
92 </h5> 92 style="margin: 4px 0px;float: left;"
93 </v-flex> 93 >{{ invoiceParticularData.studentId.email }}</h5>
94 <v-flex sm6 xs8> 94 </v-flex>
95 <h5 class="my-1">{{ invoiceParticularData.paymentMethod }}</h5> 95 </v-layout>
96 </v-flex> 96 </v-flex>
97 </v-layout> 97 <v-flex xs12 sm4 md4 class="text-xs-center">
98 </v-flex> 98 <v-layout>
99 </v-layout> 99 <v-flex xs4 sm3>
100 </v-flex> 100 <h5 style="float:right;margin: 4px 0px;">
101 </v-layout> 101 <b>invoice:</b>
102 <table class="feeTypeTable tableRsponsive"> 102 </h5>
103 <tr class="info white--text"> 103 </v-flex>
104 <th>#</th> 104 <v-flex sm9 xs8>
105 <th>Fee Type</th> 105 <h5
106 <th>Amount</th> 106 style="margin: 4px 0px;float: left;"
107 <th>Discount</th> 107 >#{{ invoiceParticularData.invoiceNumber }}</h5>
108 <th>Subtotal</th> 108 </v-flex>
109 </v-layout>
110 <v-layout>
111 <v-flex xs4 sm3>
112 <h5 style="float:right;margin: 4px 0px;">
113 <b>Status:</b>
114 </h5>
115 </v-flex>
116 <v-flex sm9 xs8>
117 <h5
118 style="margin: 4px 0px;float: left;"
119 >{{ invoiceParticularData.paymentStatus }}</h5>
120 </v-flex>
121 </v-layout>
122 </v-flex>
123 </v-layout>
124 </v-flex>
125 <!-- </v-layout> -->
126 <table
127 class="tableRsponsive"
128 style="
129 table-layout: auto !important;
130 width: 100% !important;
131 border-collapse: collapse;
132 border: 1px solid #e2e7eb;"
133 >
134 <tr
135 class="white--text"
136 style="
137 background: #827bfa !important;
138 border-color: #827bfa !important;"
139 >
140 <th
141 style="
142 border: 1px solid #e2e7eb;
143 padding: 10px;
144 text-align: center;"
145 >#</th>
146 <th
147 style="
148 border: 1px solid #e2e7eb;
149 padding: 10px;
150 text-align: center;"
151 >Fee Type</th>
152 <th
153 style="
154 border: 1px solid #e2e7eb;
155 padding: 10px;
156 text-align: center;"
157 >Amount</th>
158 <th
159 style="
160 border: 1px solid #e2e7eb;
161 padding: 10px;
162 text-align: center;"
163 >Discount</th>
164 <th
165 style="
166 border: 1px solid #e2e7eb;
167 padding: 10px;
168 text-align: center;"
169 >Subtotal</th>
109 </tr> 170 </tr>
110 <tr 171 <tr
111 v-for="(feeType, index) in feeTypeData" 172 v-for="(feeType, index) in feeTypeData"
112 :key="index" 173 :key="index"
113 v-on:keyup="getAmmountDetails(feeType)" 174 v-on:keyup="getAmmountDetails(feeType)"
114 > 175 >
115 <td style="width:40px">{{ index + 1 }}</td> 176 <td
116 <td style="width:120px">{{ feeType.feeTypeName }}</td> 177 style="width:40px;
117 <td style="width:120px">{{ feeType.amount }}</td> 178 border: 1px solid #e2e7eb;
118 <td style="width:120px">{{ feeType.amount-feeType.subTotal }}</td> 179 padding: 10px;
119 <td style="width:120px">{{ feeType.subTotal }}</td> 180 text-align: center;"
181 >{{ index + 1 }}</td>
182 <td
183 style="
184 width:120px;
185 border: 1px solid #e2e7eb;
186 padding: 10px;
187 text-align: center;"
188 >{{ feeType.feeTypeName }}</td>
189 <td
190 style="width:120px;
191 border: 1px solid #e2e7eb;
192 padding: 10px;
193 text-align: center;"
194 >{{ feeType.amount }}</td>
195 <td
196 style="width:120px;
197 border: 1px solid #e2e7eb;
198 padding: 10px;
199 text-align: center;"
200 >{{ feeType.amount-feeType.subTotal }}</td>
201 <td
202 style="width:120px;
203 border: 1px solid #e2e7eb;
204 padding: 10px;
205 text-align: center;"
206 >{{ feeType.subTotal }}</td>
120 </tr> 207 </tr>
121 <tfoot> 208 <tfoot>
122 <tr> 209 <tr>
123 <td colspan="2"> 210 <td
124 <span class="right subheding">Total Amount (RS) :</span> 211 colspan="2"
125 </td> 212 style="
126 <td>{{ feeType.amount }}</td> 213 border: 1px solid #e2e7eb;
127 <td>{{ feeType.amount-feeType.subTotal }}</td> 214 padding: 10px;
128 <td>{{ feeType.subTotal }}</td> 215 text-align: center;"
129 </tr> 216 >
130 <!-- <tr> 217 <span style="float:right">Total Amount (RS) :</span>
131 <td colspan="4">
132 <span class="right subheding">Paid (RS) :</span>
133 </td> 218 </td>
134 <td>{{ feeType.totalPaidAmount ? feeType.totalPaidAmount : 0 }}</td> 219 <td
220 style="
221 border: 1px solid #e2e7eb;
222 padding: 10px;
223 text-align: center;"
224 >{{ feeType.amount }}</td>
225 <td
226 style="
227 border: 1px solid #e2e7eb;
228 padding: 10px;
229 text-align: center;"
230 >{{ feeType.amount-feeType.subTotal }}</td>
231 <td
232 style="
233 border: 1px solid #e2e7eb;
234 padding: 10px;
235 text-align: center;"
236 >{{ feeType.subTotal }}</td>
135 </tr> 237 </tr>
136 <tr>
137 <td colspan="4">
138 <span class="right subheding">Balance (RS) :</span>
139 </td>
140 <td>{{ feeType.totalPaidAmount ? feeType.subTotal - feeType.totalPaidAmount : feeType.subTotal }}</td>
141 </tr> -->
142 </tfoot> 238 </tfoot>
143 </table> 239 </table>
240 <v-layout>
241 <v-flex xs12>
242 <v-card
243 style="width:22%;
244 position:relative;
245 float:right !important;
246 margin:10px 0px;
247 -webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important;
248 box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important;"
249 >
250 <div
251 style="
252 min-height: 20px;
253 padding: 9px;
254 margin-bottom: 20px;
255 background-color: #f0f3f5;
256 border: 1px solid #E2E7EB;
257 border-radius: 3px;"
258 >
259 <p
260 style="
261 margin: 0 0 10px;
262 font-size: 12px;"
263 >
264 Create By : Admin
265 <br />
266 Date : {{ dates(invoiceParticularData.created) }}
267 </p>
268 </div>
269 </v-card>
270 </v-flex>
271 </v-layout>
144 </v-card> 272 </v-card>
145 </v-flex> 273 </v-flex>
146 </v-layout> 274 </v-layout>
147 </v-flex> 275 </v-flex>
148 </v-container> 276 </v-container>
149 <div class="loader" v-if="showLoader"> 277 <div class="loader" v-if="showLoader">
150 <v-progress-circular indeterminate color="white"></v-progress-circular> 278 <v-progress-circular indeterminate color="white"></v-progress-circular>
151 </div> 279 </div>
152 </v-app> 280 </v-app>
153 </template> 281 </template>
154 282
155 <script> 283 <script>
156 import http from "@/Services/http.js"; 284 import http from "@/Services/http.js";
157 import moment from "moment"; 285 import moment from "moment";
158 286
159 export default { 287 export default {
160 data: () => ({ 288 data: () => ({
161 showLoader: false, 289 showLoader: false,
162 feeTypes: [], 290 feeTypes: [],
163 filterData: [], 291 filterData: [],
164 invoiceData: {}, 292 invoiceData: {},
165 feeType: { 293 feeType: {
166 amount: "", 294 amount: "",
167 discount: "", 295 discount: "",
168 totalPaidAmount: "", 296 totalPaidAmount: "",
169 subTotal: "", 297 subTotal: "",
170 feeTypeName: "" 298 feeTypeName: ""
171 }, 299 },
172 feeTypeData: [], 300 feeTypeData: [],
173 token: "", 301 token: "",
174 invoiceParticularData: { 302 invoiceParticularData: {
175 studentId: { 303 studentId: {
176 name: "" 304 name: ""
177 }, 305 },
178 classId: { 306 classId: {
179 classNum: "" 307 classNum: ""
180 } 308 }
181 }, 309 },
182 userData: { 310 userData: {
183 name: "" 311 name: ""
184 } 312 }
185 }), 313 }),
186 314
187 methods: { 315 methods: {
316 dates: function(date) {
317 return moment(date).format("MMMM DD, YYYY");
318 },
188 getInvoiceList() { 319 getInvoiceList() {
189 http() 320 http()
190 .get("/getParticularInvoice", { 321 .get("/getParticularInvoice", {
191 params: { 322 params: {
192 invoiceId: this.$route.params.viewPaymentInvoiceId, 323 invoiceId: this.$route.params.viewPaymentInvoiceId,
193 schoolId: this.$store.state.schoolId 324 schoolId: this.$store.state.schoolId
194 }, 325 },
195 headers: { Authorization: "Bearer " + this.token } 326 headers: { Authorization: "Bearer " + this.token }
196 }) 327 })
197 .then(response => { 328 .then(response => {
198 this.invoiceParticularData = response.data.data; 329 this.invoiceParticularData = response.data.data;
199 this.invoiceData = this.invoiceParticularData; 330 this.invoiceData = this.invoiceParticularData;
200 this.invoiceData.date = this.invoiceParticularData.date.slice(0, 10); 331 this.invoiceData.date = this.invoiceParticularData.date.slice(0, 10);
201 this.feeTypeData = this.invoiceParticularData.feeType; 332 this.feeTypeData = this.invoiceParticularData.feeType;
202 (this.feeType.amount = response.data.data.totalAmount), 333 (this.feeType.amount = response.data.data.totalAmount),
203 (this.feeType.discount = response.data.data.totalDiscount), 334 (this.feeType.discount = response.data.data.totalDiscount),
204 (this.feeType.subTotal = response.data.data.totalSubTotal), 335 (this.feeType.subTotal = response.data.data.totalSubTotal),
205 (this.feeType.totalPaidAmount = response.data.data.totalPaidAmount); 336 (this.feeType.totalPaidAmount = response.data.data.totalPaidAmount);
206 this.showLoader = false; 337 this.showLoader = false;
207 }) 338 })
208 .catch(error => { 339 .catch(error => {
209 this.showLoader = false; 340 this.showLoader = false;
210 if (error.response.status === 401) { 341 if (error.response.status === 401) {
211 this.$router.replace({ path: "/" }); 342 this.$router.replace({ path: "/" });
212 this.$store.dispatch("setToken", null); 343 this.$store.dispatch("setToken", null);
213 this.$store.dispatch("Id", null); 344 this.$store.dispatch("Id", null);
214 this.$store.dispatch("Role", null); 345 this.$store.dispatch("Role", null);
215 } 346 }
216 }); 347 });
217 }, 348 },
218 getfeeType() { 349 getfeeType() {
219 http() 350 http()
220 .get("/getFeesList", { 351 .get("/getFeesList", {
221 params: { schoolId: this.$store.state.schoolId }, 352 params: { schoolId: this.$store.state.schoolId },
222 headers: { Authorization: "Bearer " + this.token } 353 headers: { Authorization: "Bearer " + this.token }
223 }) 354 })
224 .then(response => { 355 .then(response => {
225 this.feeTypes = response.data.data; 356 this.feeTypes = response.data.data;
226 }) 357 })
227 .catch(err => { 358 .catch(err => {
228 // console.log("err====>", err); 359 // console.log("err====>", err);
229 }); 360 });
230 }, 361 },
231 getAmmountDetails(feeTyp) { 362 getAmmountDetails(feeTyp) {
232 let feeType = { 363 let feeType = {
233 subTotal: "", 364 subTotal: "",
234 subParticularTotal: "", 365 subParticularTotal: "",
235 paidAmount: "" 366 paidAmount: ""
236 }; 367 };
237 // *********** SUBTOTAL *********** 368 // *********** SUBTOTAL ***********
238 feeType.subTotal = 369 feeType.subTotal =
239 Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal); 370 Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal);
240 this.feeType.subTotal = feeType.subTotal.toFixed(2); 371 this.feeType.subTotal = feeType.subTotal.toFixed(2);
241 // *********** PAID-AMOUNT *********** 372 // *********** PAID-AMOUNT ***********
242 feeType.paidAmount = 373 feeType.paidAmount =
243 Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount); 374 Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);
244 this.feeType.paidAmount = feeType.paidAmount.toFixed(2); 375 this.feeType.paidAmount = feeType.paidAmount.toFixed(2);
245 }, 376 },
246 printInvoice() { 377 printInvoice() {
247 // Pass the element id here 378 // Pass the element id here
248 this.$htmlToPaper("printMe"); 379 this.$htmlToPaper("printMe");
249 }, 380 },
250 getUserData() { 381 getUserData() {
251 http() 382 http()
252 .get("/getParticularUserDetail") 383 .get("/getParticularUserDetail")
253 .then(response => { 384 .then(response => {
254 this.userData = response.data.data; 385 this.userData = response.data.data;
255 }) 386 })
256 .catch(error => { 387 .catch(error => {
257 // if (error.response.status === 401) { 388 if (error.response.status === 401) {
258 // this.$router.replace({ path: "/" }); 389 this.$router.replace({ path: "/" });
259 // this.$store.dispatch("setToken", null); 390 this.$store.dispatch("setToken", null);
260 // this.$store.dispatch("Id", null); 391 this.$store.dispatch("Id", null);
261 // } 392 }
262 }); 393 });
263 } 394 }
264 }, 395 },
265 mounted() { 396 mounted() {
266 this.token = this.$store.state.token; 397 this.token = this.$store.state.token;
267 this.getInvoiceList(); 398 this.getInvoiceList();
268 this.getfeeType(); 399 this.getfeeType();
269 this.getUserData(); 400 this.getUserData();
270 }, 401 },
271 created() { 402 created() {
272 this.$root.$on("app:search", search => { 403 this.$root.$on("app:search", search => {
273 this.search = search; 404 this.search = search;
274 }); 405 });
275 }, 406 },
276 beforeDestroy() { 407 beforeDestroy() {
277 // dont forget to remove the listener 408 // dont forget to remove the listener
278 this.$root.$off("app:search"); 409 this.$root.$off("app:search");
279 } 410 }
280 }; 411 };
281 </script> 412 </script>
282 413
283 414
284 <style scoped> 415 <style>
285 .active { 416 /* table {
286 background-color: gray;
287 color: white !important;
288 }
289 .activebtn {
290 color: black !important;
291 }
292 table {
293 border-collapse: collapse; 417 border-collapse: collapse;
294 border: 1px solid #e2e7eb; 418 border: 1px solid #e2e7eb;
295 } 419 } */
296 .open-dialog-button { 420 .open-dialog-button {
297 background: #827bfa !important; 421 background: #827bfa !important;
298 border-color: #827bfa !important; 422 border-color: #827bfa !important;
299 text-transform: none !important; 423 text-transform: none !important;
300 } 424 }
301 425 .center {
302 th, 426 text-align: center !important;
427 }
428 /* th,
303 td { 429 td {
304 border: 1px solid #e2e7eb; 430 border: 1px solid #e2e7eb;