Commit 5ddc6bb0474a5cd9758e251c9ccf32f59b7092cc
1 parent
a55b7fca2a
Exists in
master
and in
3 other branches
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 "moment"; |
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", { | ... | ... |