Commit 5ddc6bb0474a5cd9758e251c9ccf32f59b7092cc

Authored by Neeraj Sharma
1 parent a55b7fca2a

complete design and functionality of idCard

Showing 1 changed file with 36 additions and 28 deletions   Show diff stats
src/pages/Report/idCard.vue
... ... @@ -5,12 +5,12 @@
5 5 <v-form ref="form" v-model="valid" lazy-validation>
6 6 <v-flex xs12 sm12 lg12>
7 7 <v-layout wrap>
8   - <v-flex xs12 sm6 lg4>
  8 + <v-flex xs12 sm12 lg4>
9 9 <v-layout>
10   - <!-- <v-flex xs3 sm6 lg4 class="subheading mt-4">
  10 + <!-- <v-flex xs3 sm12 lg4 class="subheading mt-4">
11 11 <label class="right">Id Card For:</label>
12 12 </v-flex>-->
13   - <v-flex xs7 sm6 lg10 class="ml-2">
  13 + <v-flex xs12 sm12 lg10 class="ml-2">
14 14 <v-autocomplete
15 15 v-model="getReport.role"
16 16 label="Select Type"
... ... @@ -23,12 +23,12 @@
23 23 </v-flex>
24 24 </v-layout>
25 25 </v-flex>
26   - <v-flex xs12 sm6 lg4 v-if="showClass">
  26 + <v-flex xs12 sm12 lg4 v-if="showClass">
27 27 <v-layout>
28   - <!-- <v-flex xs3 sm6 lg2 class="subheading mt-4">
  28 + <!-- <v-flex xs3 sm12 lg2 class="subheading mt-4">
29 29 <label class="right">Class:</label>
30 30 </v-flex>-->
31   - <v-flex xs9 sm6 lg10 class="ml-2">
  31 + <v-flex xs12 sm12 lg10 class="ml-2">
32 32 <v-select
33 33 v-model="getReport.classId"
34 34 label="Select Class"
... ... @@ -41,12 +41,12 @@
41 41 </v-flex>
42 42 </v-layout>
43 43 </v-flex>
44   - <v-flex xs12 sm6 lg4 v-if="showSections">
  44 + <v-flex xs12 sm12 lg4 v-if="showSections">
45 45 <v-layout>
46   - <!-- <v-flex xs3 sm6 lg2 class="subheading mt-4">
  46 + <!-- <v-flex xs3 sm12 lg2 class="subheading mt-4">
47 47 <label class="right">Section:</label>
48 48 </v-flex>-->
49   - <v-flex xs9 sm6 lg10 class="ml-2">
  49 + <v-flex xs12 sm12 lg10 class="ml-2">
50 50 <v-select
51 51 :items="addSection"
52 52 label="Select Section"
... ... @@ -60,12 +60,12 @@
60 60 </v-flex>
61 61 </v-layout>
62 62 </v-flex>
63   - <v-flex xs12 sm6 lg4 v-if="showStudents">
  63 + <v-flex xs12 sm12 lg4 v-if="showStudents">
64 64 <v-layout>
65   - <!-- <v-flex xs3 sm6 lg4 class="subheading mt-4">
  65 + <!-- <v-flex xs3 sm12 lg4 class="subheading mt-4">
66 66 <label class="right">Student:</label>
67 67 </v-flex>-->
68   - <v-flex xs9 sm6 lg10 class="ml-2">
  68 + <v-flex xs12 sm12 lg10 class="ml-2">
69 69 <v-select
70 70 :items="getStudentsList"
71 71 label="Select Student"
... ... @@ -77,12 +77,12 @@
77 77 </v-flex>
78 78 </v-layout>
79 79 </v-flex>
80   - <v-flex xs12 sm6 lg4 v-if="showTeacher">
  80 + <v-flex xs12 sm12 lg4 v-if="showTeacher">
81 81 <v-layout>
82   - <!-- <v-flex xs3 sm6 lg2 class="subheading mt-4">
  82 + <!-- <v-flex xs3 sm12 lg2 class="subheading mt-4">
83 83 <label class="right">Teacher:</label>
84 84 </v-flex>-->
85   - <v-flex xs9 sm6 lg10 class="ml-2">
  85 + <v-flex xs12 sm12 lg10 class="ml-2">
86 86 <v-select
87 87 v-model="getReport._id"
88 88 label="Select Teacher"
... ... @@ -94,12 +94,12 @@
94 94 </v-flex>
95 95 </v-layout>
96 96 </v-flex>
97   - <v-flex xs12 sm6 lg4 v-if="showAdmin">
  97 + <v-flex xs12 sm12 lg4 v-if="showAdmin">
98 98 <v-layout>
99   - <!-- <v-flex xs3 sm6 lg2 class="subheading mt-4">
  99 + <!-- <v-flex xs3 sm12 lg2 class="subheading mt-4">
100 100 <label class="right">Admin:</label>
101 101 </v-flex>-->
102   - <v-flex xs9 sm6 lg10 class="ml-2">
  102 + <v-flex xs12 sm12 lg10 class="ml-2">
103 103 <v-select
104 104 v-model="getReport._id"
105 105 label="Select Admin"
... ... @@ -111,12 +111,12 @@
111 111 </v-flex>
112 112 </v-layout>
113 113 </v-flex>
114   - <v-flex xs12 sm6 lg4 v-if="showAccountant">
  114 + <v-flex xs12 sm12 lg4 v-if="showAccountant">
115 115 <v-layout>
116   - <!-- <v-flex xs3 sm6 lg2 class="subheading mt-4">
  116 + <!-- <v-flex xs3 sm12 lg2 class="subheading mt-4">
117 117 <label class="right">Accountant:</label>
118 118 </v-flex>-->
119   - <v-flex xs9 sm6 lg10 class="ml-2">
  119 + <v-flex xs12 sm12 lg10 class="ml-2">
120 120 <v-select
121 121 v-model="getReport._id"
122 122 label="Select Accountant"
... ... @@ -128,12 +128,12 @@
128 128 </v-flex>
129 129 </v-layout>
130 130 </v-flex>
131   - <v-flex xs12 sm6 lg4 v-if="showLibrarian">
  131 + <v-flex xs12 sm12 lg4 v-if="showLibrarian">
132 132 <v-layout>
133   - <!-- <v-flex xs3 sm6 lg2 class="subheading mt-4">
  133 + <!-- <v-flex xs3 sm12 lg2 class="subheading mt-4">
134 134 <label class="right">Librarian:</label>
135 135 </v-flex>-->
136   - <v-flex xs9 sm6 lg10 class="ml-2">
  136 + <v-flex xs12 sm12 lg10 class="ml-2">
137 137 <v-select
138 138 v-model="getReport._id"
139 139 label="Select Librarian"
... ... @@ -145,12 +145,12 @@
145 145 </v-flex>
146 146 </v-layout>
147 147 </v-flex>
148   - <v-flex xs12 sm6 lg4>
  148 + <v-flex xs12 sm12 lg4>
149 149 <v-layout>
150 150 <!-- <v-flex xs4 sm4 lg2 class="subheading mt-4">
151 151 <label class="right">Type:</label>
152 152 </v-flex>-->
153   - <v-flex xs7 sm6 lg10 class="ml-2">
  153 + <v-flex xs12 sm12 lg10 class="ml-2">
154 154 <v-autocomplete
155 155 label="Select View Type"
156 156 type="text"
... ... @@ -165,13 +165,13 @@
165 165 </v-flex>
166 166 </v-layout>
167 167 </v-flex>
168   - <v-flex xs12 sm6 lg4 class="pl-5">
  168 + <v-flex xs12 sm12 lg4>
169 169 <v-btn
170 170 @click="getCards"
171 171 round
172 172 dark
173 173 :loading="loading"
174   - class="open-dialog-button mt-3 ml-5"
  174 + class="open-dialog-button mt-3 "
175 175 >Get Report</v-btn>
176 176 </v-flex>
177 177 </v-layout>
... ... @@ -428,6 +428,9 @@
428 428 v-model="snackbar"
429 429 :color="color"
430 430 >{{ text }}</v-snackbar>
  431 + <div class="loader" v-if="showLoader">
  432 + <v-progress-circular indeterminate color="white"></v-progress-circular>
  433 + </div>
431 434 </v-container>
432 435 </template>
433 436  
... ... @@ -437,6 +440,7 @@ import moment from &quot;moment&quot;;
437 440  
438 441 export default {
439 442 data: () => ({
  443 + showLoader: false,
440 444 valid: true,
441 445 report: {},
442 446 userData: {},
... ... @@ -577,13 +581,16 @@ export default {
577 581 this.$htmlToPaper("printMe");
578 582 },
579 583 getUserData() {
  584 + this.showLoader = true;
580 585 http()
581 586 .get("/getParticularUserDetail")
582 587 .then(response => {
583 588 this.userData = response.data.data;
  589 + this.showLoader = false;
584 590 // this.adminList = response.data.data;
585 591 })
586 592 .catch(error => {
  593 + this.showLoader = false;
587 594 if (error.response.status === 401) {
588 595 this.$router.replace({ path: "/" });
589 596 this.$store.dispatch("setToken", null);
... ... @@ -676,6 +683,7 @@ export default {
676 683 });
677 684 },
678 685 getCards() {
  686 + this.showLoader = true;
679 687 if (this.$refs.form.validate()) {
680 688 http()
681 689 .get("/getIdCardDetail", {
... ...