viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 37cb391305db02a57876ff1ff2f4a7a4634a86eb

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

change the ui of idcard

Showing 5 changed files with 341 additions and 317 deletions   Show diff stats
src/pages/Account/invoice.vue
Diff comments   View file @37cb391
... ... @@ -103,7 +103,7 @@
103 103 <template slot="items" slot-scope="props">
104 104 <tr class="tr">
105 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 107 <td class="text-xs-center td td-row">{{ props.item.classId.classNum }}</td>
108 108 <td class="text-xs-center td td-row">{{ props.item.totalAmount }}</td>
109 109 <td
... ... @@ -471,12 +471,12 @@ export default {
471 471 sortable: false,
472 472 value: "No"
473 473 },
474   - {
475   - text: "Student",
476   - value: "student",
477   - sortable: false,
478   - align: "center"
479   - },
  474 + // {
  475 + // text: "Student",
  476 + // value: "student",
  477 + // sortable: false,
  478 + // align: "center"
  479 + // },
480 480 { text: "Class", value: "class", sortable: false, align: "center" },
481 481 { text: "Total", value: "subtotal", sortable: false, align: "center" },
482 482 { text: "Discount", value: "discount", sortable: false, align: "center" },
... ...
src/pages/Account/paymentHistory.vue
Diff comments   View file @37cb391
... ... @@ -26,7 +26,7 @@
26 26 <template slot="items" slot-scope="props">
27 27 <tr class="tr">
28 28 <td class="td td-row ">{{ props.index + 1 }}</td>
29   - <td class="td td-row text-xs-center">{{ props.item.studentId.name }}</td>
  29 + <!-- <td class="td td-row text-xs-center">{{ props.item.studentId.name }}</td> -->
30 30 <td class="td td-row text-xs-center">{{ props.item.classId.classNum }}</td>
31 31 <td class="td td-row text-xs-center">{{ props.item.feeType[0].feeTypeName }}</td>
32 32 <td class="td td-row text-xs-center">{{ props.item.paymentMethod }}</td>
... ... @@ -91,12 +91,12 @@ export default {
91 91 sortable: false,
92 92 value: "No"
93 93 },
94   - {
95   - text: "Student",
96   - value: "student",
97   - sortable: false,
98   - align: "center"
99   - },
  94 + // {
  95 + // text: "Student",
  96 + // value: "student",
  97 + // sortable: false,
  98 + // align: "center"
  99 + // },
100 100 { text: "Class", value: "class", sortable: false, align: "center" },
101 101 {
102 102 text: "Fee Type",
... ...
src/pages/Report/idCard.vue
Diff comments   View file @37cb391
... ... @@ -218,40 +218,43 @@
218 218 <v-layout class="col-sm-12">
219 219 <div class="idcardreport">
220 220 <div class="icard-front">
  221 + <img src="/static/icon/shape1.png" alt="shape" class="shape1"/>
  222 + <img src="/static/logo.png" alt="logo" class="logo"/>
221 223 <h2>{{ userData.name }}</h2>
222   - <img :src="getCard.profilePicUrl" v-if="getCard.profilePicUrl" />
223   - <img src="/static/icon/user.png" v-else-if="!getCard.profilePicUrl" />
  224 + <img :src="getCard.profilePicUrl" v-if="getCard.profilePicUrl" class="icard-img"/>
  225 + <img src="/static/icon/user.png" v-else-if="!getCard.profilePicUrl" class="icard-img"/>
224 226 <div class="Data" v-if="this.getReport.role === 4">
225   - <p>
226   - <span>
  227 + <h3 style="text-align: center;">
  228 + <!-- <span>
227 229 <b>Name</b>
228   - </span>
229   - : {{ getCard.studentData.name }}
230   - </p>
  230 + </span> -->
  231 + {{ getCard.studentData.name }}
  232 + </h3>
231 233 </div>
232 234 <div class="Data" v-if="this.getReport.role === 4">
233   - <p>
234   - <span>
  235 + <p style="text-align: center;">
  236 + <!-- <span>
235 237 <b>Class</b>
236   - </span>
237   - : {{ getCard.studentData.classId.classNum }}
  238 + </span> -->
  239 + {{ getCard.studentData.classId.classNum }}
238 240 </p>
239 241 </div>
240 242 <div class="Data" v-if="this.getReport.role === 4">
241   - <p>
242   - <span>
  243 + <p style="text-align: center;">
  244 + <!-- <span>
243 245 <b>Section</b>
244   - </span>
245   - : {{ getCard.studentData.sectionId.name }}
  246 + </span> -->
  247 + {{ getCard.studentData.sectionId.name }}
246 248 </p>
247 249 </div>
248 250 <div class="Data" v-if="this.getReport.role === 4">
249   - <p>
250   - <span>
  251 + <p style="text-align: center;">
  252 + <!-- <span>
251 253 <b>Roll No</b>
252   - </span>
253   - : {{ getCard.studentData.rollNo }}
  254 + </span> -->
  255 + {{ getCard.studentData.rollNo }}
254 256 </p>
  257 + <img src="static/icon/shape2.png" alt="shape2" class="shape2"/>
255 258 </div>
256 259 <!-- <div class="Data" v-if="this.getReport.role === 4">
257 260 <p>
... ... @@ -262,156 +265,160 @@
262 265 </p>
263 266 </div>-->
264 267 <div class="Data" v-if="this.getReport.role === 3">
265   - <p>
266   - <span>
  268 + <h3 style="text-align: center;">
  269 + <!-- <span>
267 270 <b>Name</b>
268   - </span>
269   - : {{ getCard.teachersData.name }}
270   - </p>
  271 + </span> -->
  272 + {{ getCard.teachersData.name }}
  273 + </h3>
271 274 </div>
272 275 <div class="Data" v-if="this.getReport.role === 3">
273   - <p>
274   - <span>
  276 + <p style="text-align: center;">
  277 + <!-- <span>
275 278 <b>Phone No</b>
276   - </span>
277   - : {{ getCard.teachersData.mobileNo }}
  279 + </span> -->
  280 + {{ getCard.teachersData.mobileNo }}
278 281 </p>
279 282 </div>
280 283 <div class="Data" v-if="this.getReport.role === 3">
281   - <p>
282   - <span>
  284 + <p style="text-align: center;">
  285 + <!-- <span>
283 286 <b>Joining Date</b>
284   - </span>
285   - : {{ getCard.teachersData.joinDate }}
  287 + </span> -->
  288 + {{ getCard.teachersData.joinDate }}
286 289 </p>
287 290 </div>
288 291 <div class="Data" v-if="this.getReport.role === 3">
289   - <p>
290   - <span>
  292 + <p style="text-align: center;">
  293 + <!-- <span>
291 294 <b>Email</b>
292   - </span>
293   - : {{ getCard.teachersData.email }}
  295 + </span> -->
  296 + {{ getCard.teachersData.email }}
294 297 </p>
  298 + <img src="static/icon/shape2.png" alt="shape2" class="shape2"/>
295 299 </div>
296 300 <div class="Data" v-if="this.getReport.role === 2">
297   - <p>
298   - <span>
  301 + <h3 style="text-align: center;">
  302 + <!-- <span>
299 303 <b>Name</b>
300   - </span>
301   - : {{ getCard.adminData.name }}
302   - </p>
  304 + </span> -->
  305 + {{ getCard.adminData.name }}
  306 + </h3>
303 307 </div>
304 308 <div class="Data" v-if="this.getReport.role === 2">
305   - <p>
306   - <span>
  309 + <p style="text-align: center;">
  310 + <!-- <span>
307 311 <b>Establishment Year</b>
308   - </span>
309   - : {{ getCard.adminData.establishmentYear }}
  312 + </span> -->
  313 + {{ getCard.adminData.establishmentYear }}
310 314 </p>
311 315 </div>
312 316 <div class="Data" v-if="this.getReport.role === 2">
313   - <p>
314   - <span>
  317 + <p style="text-align: center;">
  318 + <!-- <span>
315 319 <b>Joining Date</b>
316   - </span>
317   - : {{ getCard.adminData.joinDate }}
  320 + </span> -->
  321 + {{ getCard.adminData.joinDate }}
318 322 </p>
319 323 </div>
320 324 <div class="Data" v-if="this.getReport.role === 2">
321   - <p>
322   - <span>
  325 + <p style="text-align: center;">
  326 + <!-- <span>
323 327 <b>Phone No</b>
324   - </span>
325   - : {{ getCard.adminData.mobile }}
  328 + </span> -->
  329 + {{ getCard.adminData.mobile }}
326 330 </p>
327 331 </div>
328 332 <div class="Data" v-if="this.getReport.role === 2">
329   - <p>
330   - <span>
  333 + <p style="text-align: center;">
  334 + <!-- <span>
331 335 <b>Email</b>
332   - </span>
333   - : {{ getCard.adminData.email }}
  336 + </span> -->
  337 + {{ getCard.adminData.email }}
334 338 </p>
  339 + <img src="static/icon/shape2.png" alt="shape2" class="shape2"/>
335 340 </div>
336 341 <div class="Data" v-if="this.getReport.role === 6">
337   - <p>
338   - <span>
  342 + <h3 style="text-align: center;">
  343 + <!-- <span>
339 344 <b>Name</b>
340   - </span>
341   - : {{ getCard.usersData.name }}
342   - </p>
  345 + </span> -->
  346 + {{ getCard.usersData.name }}
  347 + </h3>
343 348 </div>
344 349 <div class="Data" v-if="this.getReport.role === 6">
345   - <p>
346   - <span>
  350 + <p style="text-align: center;">
  351 + <!-- <span>
347 352 <b>Email</b>
348   - </span>
349   - : {{ getCard.usersData.email }}
  353 + </span> -->
  354 + {{ getCard.usersData.email }}
350 355 </p>
351 356 </div>
352 357 <div class="Data" v-if="this.getReport.role === 6">
353   - <p>
354   - <span>
  358 + <p style="text-align: center;">
  359 + <!-- <span>
355 360 <b>Phone No</b>
356   - </span>
357   - : {{ getCard.usersData.phone }}
  361 + </span> -->
  362 + {{ getCard.usersData.phone }}
358 363 </p>
359 364 </div>
360 365 <div class="Data" v-if="this.getReport.role === 6">
361   - <p>
362   - <span>
  366 + <p style="text-align: center;">
  367 + <!-- <span>
363 368 <b>Gender</b>
364   - </span>
365   - : {{ getCard.usersData.gender }}
  369 + </span> -->
  370 + {{ getCard.usersData.gender }}
366 371 </p>
367 372 </div>
368 373 <div class="Data" v-if="this.getReport.role === 6">
369   - <p>
370   - <span>
  374 + <p style="text-align: center;">
  375 + <!-- <span>
371 376 <b>Joining Date</b>
372   - </span>
373   - : {{ getCard.usersData.joiningDate }}
  377 + </span> -->
  378 + {{ getCard.usersData.joiningDate }}
374 379 </p>
  380 + <img src="static/icon/shape2.png" alt="shape2" class="shape2"/>
375 381 </div>
376 382 <div class="Data" v-if="this.getReport.role === 7">
377   - <p>
378   - <span>
  383 + <h3 style="text-align: center;">
  384 + <!-- <span>
379 385 <b>Name</b>
380   - </span>
381   - : {{ getCard.usersData.name }}
382   - </p>
  386 + </span> -->
  387 + {{ getCard.usersData.name }}
  388 + </h3>
383 389 </div>
384 390 <div class="Data" v-if="this.getReport.role === 7">
385   - <p>
386   - <span>
  391 + <p style="text-align: center;">
  392 + <!-- <span>
387 393 <b>Email</b>
388   - </span>
389   - : {{ getCard.usersData.email }}
  394 + </span> -->
  395 + {{ getCard.usersData.email }}
390 396 </p>
391 397 </div>
392 398 <div class="Data" v-if="this.getReport.role === 7">
393   - <p>
394   - <span>
  399 + <p style="text-align: center;">
  400 + <!-- <span>
395 401 <b>Phone No</b>
396   - </span>
397   - : {{ getCard.usersData.phone }}
  402 + </span> -->
  403 + {{ getCard.usersData.phone }}
398 404 </p>
399 405 </div>
400 406 <div class="Data" v-if="this.getReport.role === 7">
401   - <p>
402   - <span>
  407 + <p style="text-align: center;">
  408 + <!-- <span>
403 409 <b>Gender</b>
404   - </span>
405   - : {{ getCard.usersData.gender }}
  410 + </span> -->
  411 + {{ getCard.usersData.gender }}
406 412 </p>
407 413 </div>
408 414 <div class="Data" v-if="this.getReport.role === 7">
409   - <p>
410   - <span>
  415 + <p style="text-align: center;">
  416 + <!-- <span>
411 417 <b>Joining Date</b>
412   - </span>
413   - : {{ getCard.usersData.joiningDate }}
  418 + </span> -->
  419 + {{ getCard.usersData.joiningDate }}
414 420 </p>
  421 + <img src="static/icon/shape2.png" alt="shape2" class="shape2"/>
415 422 </div>
416 423 </div>
417 424 </div>
... ... @@ -419,179 +426,135 @@
419 426 </v-container>
420 427 </v-card>
421 428 <v-flex xs12 id="printMe" v-show="hideprintIdCard">
422   - <v-layout style="print-data">
423   - <h2>{{ userData.name }}</h2>
424   - <img
425   - :src="getCards.profilePicUrl"
426   - v-if="getCards.profilePicUrl"
427   - style="margin-top: 31px;"
428   - />
429   - <img
430   - src="/static/icon/user.png"
431   - v-else-if="!getCards.profilePicUrl"
432   - style="margin-top: 31px;"
433   - />
434   - </v-layout>
435   - <table
436   - class="mb-5 tableRsponsive feeTypeTable"
437   - style="border: 1px solid lightgrey;
438   - border-collapse: collapse;!important
439   - table-layout: auto !important;
440   - width: 100% !important;"
441   - >
442   - <thead style="border: 1px solid lightgrey !important;">
443   - <tr
444   - style="border: 1px solid lightgrey !important;padding:4px;"
445   - v-if="this.getReport.role === 4"
446   - >
447   - <td style="border: 1px solid lightgrey !important;padding: 6px;">Name</td>
448   - <td style="border: 1px solid lightgrey !important;padding: 6px;">Class</td>
449   - <td style="border: 1px solid lightgrey !important;padding: 6px;">Section</td>
450   - <td style="border: 1px solid lightgrey !important;padding: 6px;">Roll No</td>
451   - <td style="border: 1px solid lightgrey !important;padding: 6px;">Blood Group</td>
452   - </tr>
453   - <tr
454   - style="border: 1px solid lightgrey !important;padding:4px;"
455   - v-if="this.getReport.role === 3"
  429 + <v-layout class="col-sm-12">
  430 + <div class="idcardreport">
  431 + <div class="print-data">
  432 + <img src="/static/icon/shape1.png" alt="shape" class="shape1"/>
  433 + <img src="/static/logo.png" alt="logo" class="logo" style="width: 70px; height: 70px; align: center;"/>
  434 + <h2>{{ userData.name }}</h2>
  435 + <img
  436 + :src="getCards.profilePicUrl"
  437 + v-if="getCards.profilePicUrl"
  438 + style="margin-top: 31px;"
  439 + />
  440 + <img
  441 + src="/static/icon/user.png"
  442 + v-else-if="!getCards.profilePicUrl"
  443 + style="margin-top: 31px;"
  444 + />
  445 + <table
  446 + class="mb-5 tableRsponsive feeTypeTable"
  447 + style="table-layout: auto !important;
  448 + width: 100% !important;"
456 449 >
457   - <td style="border: 1px solid lightgrey !important;padding: 6px;">Name</td>
458   - <td style="border: 1px solid lightgrey !important;padding: 6px;">Email</td>
459   - <td style="border: 1px solid lightgrey !important;padding: 6px;">Phone No</td>
460   - <td style="border: 1px solid lightgrey !important;padding: 6px;">Joining Date</td>
461   - </tr>
462   - <tr
463   - style="border: 1px solid lightgrey !important;padding:4px;"
464   - v-if="this.getReport.role === 2"
465   - >
466   - <td style="border: 1px solid lightgrey !important;padding: 6px;">Name</td>
467   - <td
468   - style="border: 1px solid lightgrey !important;padding: 6px;"
469   - >Establishment Year</td>
470   - <td style="border: 1px solid lightgrey !important;padding: 6px;">Joining Date</td>
471   - <td style="border: 1px solid lightgrey !important;padding: 6px;">Phone No</td>
472   - <td style="border: 1px solid lightgrey !important;padding: 6px;">Email</td>
473   - </tr>
474   - <tr
475   - style="border: 1px solid lightgrey !important;padding:4px;"
476   - v-if="this.getReport.role === 6"
477   - >
478   - <td style="border: 1px solid lightgrey !important;padding: 6px;">Name</td>
479   - <td style="border: 1px solid lightgrey !important;padding: 6px;">Email</td>
480   - <td style="border: 1px solid lightgrey !important;padding: 6px;">Phone No</td>
481   - <td style="border: 1px solid lightgrey !important;padding: 6px;">Gender</td>
482   - <td style="border: 1px solid lightgrey !important;padding: 6px;">Joining Date</td>
483   - </tr>
484   - <tr
485   - style="border: 1px solid lightgrey !important;padding:4px;"
486   - v-if="this.getReport.role === 7"
487   - >
488   - <td style="border: 1px solid lightgrey !important;padding: 6px;">Name</td>
489   - <td style="border: 1px solid lightgrey !important;padding: 6px;">Email</td>
490   - <td style="border: 1px solid lightgrey !important;padding: 6px;">Phone No</td>
491   - <td style="border: 1px solid lightgrey !important;padding: 6px;">Gender</td>
492   - <td style="border: 1px solid lightgrey !important;padding: 6px;">Joining Date</td>
493   - </tr>
494   - </thead>
495   - <tbody style="border: 1px solid lightgrey !important;">
496   - <tr
497   - style="border: 1px solid lightgrey !important;padding:4px;"
498   - v-if="this.getReport.role === 4"
499   - >
500   - <td
501   - style="border: 1px soild lightgrey !important;padding:6px;"
502   - >{{ getCard.studentData.name }}</td>
503   - <td
504   - style="border: 1px soild lightgrey !important;padding:6px;"
505   - >{{ getCard.studentData.classId.classNum }}</td>
506   - <td
507   - style="border: 1px soild lightgrey !important;padding:6px;"
508   - >{{ getCard.studentData.sectionId.name }}</td>
509   - <td
510   - style="border: 1px soild lightgrey !important;padding:6px;"
511   - >{{ getCard.studentData.rollNo }}</td>
512   - <td
513   - style="border: 1px soild lightgrey !important;padding:6px;"
514   - >{{ getCard.studentData.bloodGroup }}</td>
515   - </tr>
516   - <tr
517   - style="border: 1px solid lightgrey !important;padding:4px;"
518   - v-if="this.getReport.role === 3"
519   - >
520   - <td
521   - style="border: 1px soild lightgrey !important;padding:6px;"
522   - >{{ getCard.teachersData.name }}</td>
523   - <td
524   - style="border: 1px soild lightgrey !important;padding:6px;"
525   - >{{ getCard.teachersData.email }}</td>
526   - <td
527   - style="border: 1px soild lightgrey !important;padding:6px;"
528   - >{{ getCard.teachersData.mobileNo }}</td>
529   - <td
530   - style="border: 1px soild lightgrey !important;padding:6px;"
531   - >{{ getCard.teachersData.joinDate }}</td>
532   - </tr>
533   - <tr
534   - style="border: 1px solid lightgrey !important;padding:4px;"
535   - v-if="this.getReport.role === 2"
536   - >
537   - <td
538   - style="border: 1px soild lightgrey !important;padding:6px;"
539   - >{{ getCard.adminData.name }}</td>
540   - <td
541   - style="border: 1px soild lightgrey !important;padding:6px;"
542   - >{{ getCard.adminData.establishmentYear }}</td>
543   - <td
544   - style="border: 1px soild lightgrey !important;padding:6px;"
545   - >{{ getCard.adminData.joinDate }}</td>
546   - <td
547   - style="border: 1px soild lightgrey !important;padding:6px;"
548   - >{{ getCard.adminData.mobile }}</td>
549   - <td
550   - style="border: 1px soild lightgrey !important;padding:6px;"
551   - >{{ getCard.adminData.email }}</td>
552   - </tr>
553   - <tr
554   - style="border: 1px solid lightgrey !important;padding:4px;"
555   - v-if="this.getReport.role === 6"
556   - >
557   - <td
558   - style="border: 1px soild lightgrey !important;padding:6px;"
559   - >{{ getCard.usersData.name }}</td>
560   - <td
561   - style="border: 1px soild lightgrey !important;padding:6px;"
562   - >{{ getCard.usersData.email }}</td>
563   - <td
564   - style="border: 1px soild lightgrey !important;padding:6px;"
565   - >{{ getCard.usersData.phone }}</td>
566   - <td
567   - style="border: 1px soild lightgrey !important;padding:6px;"
568   - >{{ getCard.usersData.gender }}</td>
569   - <td
570   - style="border: 1px soild lightgrey !important;padding:6px;"
571   - >{{ getCard.usersData.joiningDate }}</td>
572   - </tr>
573   - <tr
574   - style="border: 1px solid lightgrey !important;padding:4px;"
575   - v-if="this.getReport.role === 7"
576   - >
577   - <td
578   - style="border: 1px soild lightgrey !important;padding:6px;"
579   - >{{ getCard.usersData.name }}</td>
580   - <td
581   - style="border: 1px soild lightgrey !important;padding:6px;"
582   - >{{ getCard.usersData.email }}</td>
583   - <td
584   - style="border: 1px soild lightgrey !important;padding:6px;"
585   - >{{ getCard.usersData.phone }}</td>
586   - <td
587   - style="border: 1px soild lightgrey !important;padding:6px;"
588   - >{{ getCard.usersData.gender }}</td>
589   - <td
590   - style="border: 1px soild lightgrey !important;padding:6px;"
591   - >{{ getCard.usersData.joiningDate }}</td>
592   - </tr>
593   - </tbody>
594   - </table>
  450 + <!-- <thead style="border: 1px solid lightgrey !important;">
  451 + <tr
  452 + style="border: 1px solid lightgrey !important;padding:4px;"
  453 + v-if="this.getReport.role === 4"
  454 + >
  455 + <td style="border: 1px solid lightgrey !important;padding: 6px;">Name</td>
  456 + <td style="border: 1px solid lightgrey !important;padding: 6px;">Class</td>
  457 + <td style="border: 1px solid lightgrey !important;padding: 6px;">Section</td>
  458 + <td style="border: 1px solid lightgrey !important;padding: 6px;">Roll No</td>
  459 + <td style="border: 1px solid lightgrey !important;padding: 6px;">Blood Group</td>
  460 + </tr>
  461 + <tr
  462 + style="border: 1px solid lightgrey !important;padding:4px;"
  463 + v-if="this.getReport.role === 3"
  464 + >
  465 + <td style="border: 1px solid lightgrey !important;padding: 6px;">Name</td>
  466 + <td style="border: 1px solid lightgrey !important;padding: 6px;">Email</td>
  467 + <td style="border: 1px solid lightgrey !important;padding: 6px;">Phone No</td>
  468 + <td style="border: 1px solid lightgrey !important;padding: 6px;">Joining Date</td>
  469 + </tr>
  470 + <tr
  471 + style="border: 1px solid lightgrey !important;padding:4px;"
  472 + v-if="this.getReport.role === 2"
  473 + >
  474 + <td style="border: 1px solid lightgrey !important;padding: 6px;">Name</td>
  475 + <td
  476 + style="border: 1px solid lightgrey !important;padding: 6px;"
  477 + >Establishment Year</td>
  478 + <td style="border: 1px solid lightgrey !important;padding: 6px;">Joining Date</td>
  479 + <td style="border: 1px solid lightgrey !important;padding: 6px;">Phone No</td>
  480 + <td style="border: 1px solid lightgrey !important;padding: 6px;">Email</td>
  481 + </tr>
  482 + <tr
  483 + style="border: 1px solid lightgrey !important;padding:4px;"
  484 + v-if="this.getReport.role === 6"
  485 + >
  486 + <td style="border: 1px solid lightgrey !important;padding: 6px;">Name</td>
  487 + <td style="border: 1px solid lightgrey !important;padding: 6px;">Email</td>
  488 + <td style="border: 1px solid lightgrey !important;padding: 6px;">Phone No</td>
  489 + <td style="border: 1px solid lightgrey !important;padding: 6px;">Gender</td>
  490 + <td style="border: 1px solid lightgrey !important;padding: 6px;">Joining Date</td>
  491 + </tr>
  492 + <tr
  493 + style="border: 1px solid lightgrey !important;padding:4px;"
  494 + v-if="this.getReport.role === 7"
  495 + >
  496 + <td style="border: 1px solid lightgrey !important;padding: 6px;">Name</td>
  497 + <td style="border: 1px solid lightgrey !important;padding: 6px;">Email</td>
  498 + <td style="border: 1px solid lightgrey !important;padding: 6px;">Phone No</td>
  499 + <td style="border: 1px solid lightgrey !important;padding: 6px;">Gender</td>
  500 + <td style="border: 1px solid lightgrey !important;padding: 6px;">Joining Date</td>
  501 + </tr>
  502 + </thead> -->
  503 + <tbody style="border: 1px solid lightgrey !important;">
  504 + <tr
  505 + v-if="this.getReport.role === 4"
  506 + >
  507 + <h3 style="text-align: center;">{{ getCard.studentData.name }}</h3>
  508 + <p style="text-align: center;">{{ getCard.studentData.classId.classNum }}</p>
  509 + <p style="text-align: center;">{{ getCard.studentData.sectionId.name }}</p>
  510 + <p style="text-align: center;">{{ getCard.studentData.rollNo }}</p>
  511 + <p style="text-align: center;">{{ getCard.studentData.bloodGroup }}</p>
  512 + <img src="static/icon/shape2.png" alt="shape2" class="shape2"/>
  513 + </tr>
  514 + <tr
  515 + v-if="this.getReport.role === 3"
  516 + >
  517 + <h3 style="text-align: center;">{{ getCard.teachersData.name }}</h3>
  518 + <p style="text-align: center;">{{ getCard.teachersData.email }}</p>
  519 + <p style="text-align: center;">{{ getCard.teachersData.mobileNo }}</p>
  520 + <p style="text-align: center;">{{ getCard.teachersData.joinDate }}</p>
  521 + <img src="static/icon/shape2.png" alt="shape2" class="shape2"/>
  522 + </tr>
  523 + <tr
  524 + v-if="this.getReport.role === 2"
  525 + >
  526 + <h3 style="text-align: center;">{{ getCard.adminData.name }}</h3>
  527 + <p style="text-align: center;">{{ getCard.adminData.establishmentYear }}</p>
  528 + <p style="text-align: center;">{{ getCard.adminData.joinDate }}</p>
  529 + <p style="text-align: center;">{{ getCard.adminData.mobile }}</p>
  530 + <p style="text-align: center;">{{ getCard.adminData.email }}</p>
  531 + <img src="static/icon/shape2.png" alt="shape2" class="shape2"/>
  532 + </tr>
  533 + <tr
  534 + v-if="this.getReport.role === 6"
  535 + >
  536 + <h3 style="text-align: center;">{{ getCard.usersData.name }}</h3>
  537 + <p style="text-align: center;">{{ getCard.usersData.email }}</p>
  538 + <p style="text-align: center;">{{ getCard.usersData.phone }}</p>
  539 + <p style="text-align: center;">{{ getCard.usersData.gender }}</p>
  540 + <p style="text-align: center;">{{ getCard.usersData.joiningDate }}</p>
  541 + <img src="static/icon/shape2.png" alt="shape2" class="shape2"/>
  542 + </tr>
  543 + <tr
  544 + v-if="this.getReport.role === 7"
  545 + >
  546 + <h3 style="text-align: center;">{{ getCard.usersData.name }}</h3>
  547 + <p style="text-align: center;">{{ getCard.usersData.email }}</p>
  548 + <p style="text-align: center;">{{ getCard.usersData.phone }}</p>
  549 + <p style="text-align: center;">{{ getCard.usersData.gender }}</p>
  550 + <p style="text-align: center;">{{ getCard.usersData.joiningDate }}</p>
  551 + <img src="static/icon/shape2.png" alt="shape2" class="shape2"/>
  552 + </tr>
  553 + </tbody>
  554 + </table>
  555 + </div>
  556 + </div>
  557 + </v-layout>
595 558 </v-flex>
596 559 </v-flex>
597 560 </v-layout>
... ... @@ -602,35 +565,47 @@
602 565 <v-card class="transparent elevation-0">
603 566 <v-layout>
604 567 <v-flex xs12>
605   - <!-- <v-btn class="open-dialog-button right" round dark @click="prindIDCardReport()">
  568 + <v-btn class="open-dialog-button right" round dark @click="prindIDCardReport()">
606 569 Print
607 570 <v-icon right dark>print</v-icon>
608   - </v-btn> -->
  571 + </v-btn>
609 572 </v-flex>
610 573 </v-layout>
611   - <table class="icard-data" id="printMe">
612   - <tbody>
613   - <tr>
614   - <td class="icard-back">
615   - <h3>This card is valid upto December 2019</h3>
616   - <h5>If you found, please return this card to:</h5>
617   - <p>{{userData.name}}</p>
618   - <div class="school-address">
619   - <p>{{ userData.address }}, {{ userData.pinCode }}</p>
  574 + <div class="icard-data" id="printMe">
  575 + <!-- <div class="idcardreport"> -->
  576 + <div class="icard-back">
  577 + <img src="/static/icon/shape1.png" alt="shape" class="shape1"/>
  578 + <img src="/static/logo.png" alt="logo" class="logo" />
  579 + <h2>{{userData.name}}</h2>
  580 + <div class="school-address">
  581 + <p>{{ userData.address }}, {{ userData.pinCode }}</p>
  582 + </div>
  583 + <!-- <div class="icard-bottom">
  584 + <div class="qrcode">
  585 + <img src="/static/icon/qr-code.png" alt="icon" />
620 586 </div>
621   - <div class="icard-bottom">
622   - <div class="qrcode">
623   - <img src="/static/icon/qr-code.png" alt="icon" />
624   - </div>
625   - <div class="session">
626   - <span>Session: 2019-2020</span>
627   - </div>
  587 + <div class="session">
  588 + <span>Session: 2019-2020</span>
628 589 </div>
629   - </td>
630   - </tr>
631   - </tbody>
632   - </table>
  590 + </div> -->
  591 + <img src="static/icon/shape2.png" alt="shape2" class="shape2"/>
  592 + </div>
  593 + <!-- </div> -->
  594 + </div>
633 595 </v-card>
  596 + <v-flex xs12 id="printMe" v-show="hidebackprintIdCard">
  597 + <v-layout class="col-sm-12">
  598 + <div class="back-icard">
  599 + <img src="/static/icon/shape1.png" alt="shape" class="shape1"/>
  600 + <img src="/static/logo.png" alt="logo" class="logo" style="width: 50px; height: 50px;"/>
  601 + <h2>{{ userData.name }}</h2>
  602 + <div class="address">
  603 + <p>{{ userData.address }}, {{ userData.pinCode }}</p>
  604 + </div>
  605 + <img src="static/icon/shape2.png" alt="shape2" class="shape2"/>
  606 + </div>
  607 + </v-layout>
  608 + </v-flex>
634 609 </v-flex>
635 610 </v-layout>
636 611 </div>
... ... @@ -657,6 +632,7 @@ export default {
657 632 showAccountant: false,
658 633 showLibrarian: false,
659 634 hideprintIdCard: false,
  635 + hidebackprintIdCard: false,
660 636  
661 637 getRoles: [],
662 638 classList: [],
... ... @@ -938,20 +914,58 @@ export default {
938 914 .icard-front {
939 915 margin: 3px;
940 916 float: left;
941   - border: 1px solid #000;
  917 + /* border: 1px solid #000; */
  918 + padding: 10px;
  919 + /* width: 55%; */
  920 + text-align: center;
  921 + height: 95%;
  922 +}
  923 +.print-data {
  924 + margin: 3px;
  925 + float: left;
  926 + /* border: 1px solid #000; */
942 927 padding: 10px;
943   - width: 257px;
  928 + /* width: 55%; */
944 929 text-align: center;
945   - height: 290px;
  930 + height: 95%;
  931 +}
  932 +.shape1 {
  933 + float: left;
  934 +}
  935 +.shape2 {
  936 + float: right;
946 937 }
947 938 .icard-front h2 {
948   - font-size: 20px;
  939 + font-size: 30px;
  940 +}
  941 +.icard-back h2 {
  942 + font-size: 30px;
  943 +}
  944 +.print-data h2 {
  945 + font-size: 30px;
  946 + text-align: center;
  947 +}
  948 +.print-data img {
  949 + width: 70px;
  950 + height: 70px;
  951 + margin-bottom: 5px;
949 952 }
950 953 .icard-front img {
  954 + width: 70px;
  955 + height: 70px;
  956 + margin-bottom: 5px;
  957 +}
  958 +.icard-back img {
  959 + width: 50px;
  960 + height: 50px;
  961 + margin-bottom: 5px;
  962 +}
  963 +.icard-img {
951 964 width: 50px;
952 965 height: 50px;
953 966 margin-bottom: 5px;
954   - /* border: 1px solid #ddd; */
  967 + margin-top: 5px;
  968 + border: 1px solid #ddd;
955 969 }
956 970 .icard-data {
957 971 /* font-family: Arial; */
... ... @@ -963,12 +977,20 @@ export default {
963 977 }
964 978 .icard-back {
965 979 margin: 3px;
966   - float: right;
  980 + /* float: left; */
  981 + /* border: 1px solid #000; */
  982 + padding: 10px;
  983 + /* width: 55%; */
  984 + text-align: center;
  985 + /* height: 95%; */
  986 + /* margin-top: 35%; */
  987 +}
  988 +.back-icard {
  989 + margin: 3px;
  990 + float: left;
967 991 border: 1px solid #000;
968 992 padding: 10px;
969   - width: 257px;
970 993 text-align: center;
971   - height: 290px;
972 994 }
973 995 .icard-back h3 {
974 996 background-color: #000;
... ... @@ -984,12 +1006,12 @@ export default {
984 1006 font-weight: bold;
985 1007 padding: 5px 0px;
986 1008 }
987   -.icard-back p {
  1009 +/* .icard-back p {
988 1010 font-size: 15px;
989 1011 color: #000;
990 1012 font-weight: 500px;
991 1013 line-height: 17px;
992   -}
  1014 +} */
993 1015 .school-address {
994 1016 /* width: 40%; */
995 1017 font-weight: 500px;
... ... @@ -1006,10 +1028,12 @@ export default {
1006 1028 .qrcode img {
1007 1029 width: 60px;
1008 1030 height: 60px;
  1031 + margin-top: 15px;
1009 1032 }
1010 1033 .session {
1011 1034 float: right;
1012 1035 width: 70%;
  1036 + margin-top: 15px;
1013 1037 }
1014 1038 @media screen and (max-width: 360px) {
1015 1039 .icard-front {
... ...
static/icon/shape1.png
Diff comments   View file @37cb391

1.47 KB
static/icon/shape2.png
Diff comments   View file @37cb391

1.64 KB