Commit a55b7fca2a8aa9a962fcb06af49f519ff1c8712e
1 parent
af086007bc
Exists in
master
and in
3 other branches
complete design and functionality of idCard
Showing
1 changed file
with
91 additions
and
127 deletions
Show diff stats
src/pages/Report/idCard.vue
... | ... | @@ -7,13 +7,13 @@ |
7 | 7 | <v-layout wrap> |
8 | 8 | <v-flex xs12 sm6 lg4> |
9 | 9 | <v-layout> |
10 | - <v-flex xs3 sm6 lg4 class="subheading mt-4"> | |
10 | + <!-- <v-flex xs3 sm6 lg4 class="subheading mt-4"> | |
11 | 11 | <label class="right">Id Card For:</label> |
12 | - </v-flex> | |
13 | - <v-flex xs7 sm6 lg7 class="ml-2"> | |
12 | + </v-flex>--> | |
13 | + <v-flex xs7 sm6 lg10 class="ml-2"> | |
14 | 14 | <v-autocomplete |
15 | 15 | v-model="getReport.role" |
16 | - label="Please Select" | |
16 | + label="Select Type" | |
17 | 17 | :items="getRoles" |
18 | 18 | item-text="name" |
19 | 19 | item-value="role" |
... | ... | @@ -25,10 +25,10 @@ |
25 | 25 | </v-flex> |
26 | 26 | <v-flex xs12 sm6 lg4 v-if="showClass"> |
27 | 27 | <v-layout> |
28 | - <v-flex xs3 sm6 lg2 class="subheading mt-4"> | |
28 | + <!-- <v-flex xs3 sm6 lg2 class="subheading mt-4"> | |
29 | 29 | <label class="right">Class:</label> |
30 | - </v-flex> | |
31 | - <v-flex xs9 sm6 lg8 class="ml-2"> | |
30 | + </v-flex>--> | |
31 | + <v-flex xs9 sm6 lg10 class="ml-2"> | |
32 | 32 | <v-select |
33 | 33 | v-model="getReport.classId" |
34 | 34 | label="Select Class" |
... | ... | @@ -43,10 +43,10 @@ |
43 | 43 | </v-flex> |
44 | 44 | <v-flex xs12 sm6 lg4 v-if="showSections"> |
45 | 45 | <v-layout> |
46 | - <v-flex xs3 sm6 lg2 class="subheading mt-4"> | |
46 | + <!-- <v-flex xs3 sm6 lg2 class="subheading mt-4"> | |
47 | 47 | <label class="right">Section:</label> |
48 | - </v-flex> | |
49 | - <v-flex xs9 sm6 lg8 class="ml-2"> | |
48 | + </v-flex>--> | |
49 | + <v-flex xs9 sm6 lg10 class="ml-2"> | |
50 | 50 | <v-select |
51 | 51 | :items="addSection" |
52 | 52 | label="Select Section" |
... | ... | @@ -62,10 +62,10 @@ |
62 | 62 | </v-flex> |
63 | 63 | <v-flex xs12 sm6 lg4 v-if="showStudents"> |
64 | 64 | <v-layout> |
65 | - <v-flex xs3 sm6 lg4 class="subheading mt-4"> | |
65 | + <!-- <v-flex xs3 sm6 lg4 class="subheading mt-4"> | |
66 | 66 | <label class="right">Student:</label> |
67 | - </v-flex> | |
68 | - <v-flex xs9 sm6 lg7 class="ml-2"> | |
67 | + </v-flex>--> | |
68 | + <v-flex xs9 sm6 lg10 class="ml-2"> | |
69 | 69 | <v-select |
70 | 70 | :items="getStudentsList" |
71 | 71 | label="Select Student" |
... | ... | @@ -79,10 +79,10 @@ |
79 | 79 | </v-flex> |
80 | 80 | <v-flex xs12 sm6 lg4 v-if="showTeacher"> |
81 | 81 | <v-layout> |
82 | - <v-flex xs3 sm6 lg2 class="subheading mt-4"> | |
82 | + <!-- <v-flex xs3 sm6 lg2 class="subheading mt-4"> | |
83 | 83 | <label class="right">Teacher:</label> |
84 | - </v-flex> | |
85 | - <v-flex xs9 sm6 lg8 class="ml-2"> | |
84 | + </v-flex>--> | |
85 | + <v-flex xs9 sm6 lg10 class="ml-2"> | |
86 | 86 | <v-select |
87 | 87 | v-model="getReport._id" |
88 | 88 | label="Select Teacher" |
... | ... | @@ -96,9 +96,9 @@ |
96 | 96 | </v-flex> |
97 | 97 | <v-flex xs12 sm6 lg4 v-if="showAdmin"> |
98 | 98 | <v-layout> |
99 | - <v-flex xs3 sm6 lg2 class="subheading mt-4"> | |
99 | + <!-- <v-flex xs3 sm6 lg2 class="subheading mt-4"> | |
100 | 100 | <label class="right">Admin:</label> |
101 | - </v-flex> | |
101 | + </v-flex>--> | |
102 | 102 | <v-flex xs9 sm6 lg10 class="ml-2"> |
103 | 103 | <v-select |
104 | 104 | v-model="getReport._id" |
... | ... | @@ -113,10 +113,10 @@ |
113 | 113 | </v-flex> |
114 | 114 | <v-flex xs12 sm6 lg4 v-if="showAccountant"> |
115 | 115 | <v-layout> |
116 | - <v-flex xs3 sm6 lg2 class="subheading mt-4"> | |
116 | + <!-- <v-flex xs3 sm6 lg2 class="subheading mt-4"> | |
117 | 117 | <label class="right">Accountant:</label> |
118 | - </v-flex> | |
119 | - <v-flex xs9 sm6 lg8 class="ml-2"> | |
118 | + </v-flex>--> | |
119 | + <v-flex xs9 sm6 lg10 class="ml-2"> | |
120 | 120 | <v-select |
121 | 121 | v-model="getReport._id" |
122 | 122 | label="Select Accountant" |
... | ... | @@ -130,10 +130,10 @@ |
130 | 130 | </v-flex> |
131 | 131 | <v-flex xs12 sm6 lg4 v-if="showLibrarian"> |
132 | 132 | <v-layout> |
133 | - <v-flex xs3 sm6 lg2 class="subheading mt-4"> | |
133 | + <!-- <v-flex xs3 sm6 lg2 class="subheading mt-4"> | |
134 | 134 | <label class="right">Librarian:</label> |
135 | - </v-flex> | |
136 | - <v-flex xs9 sm6 lg8 class="ml-2"> | |
135 | + </v-flex>--> | |
136 | + <v-flex xs9 sm6 lg10 class="ml-2"> | |
137 | 137 | <v-select |
138 | 138 | v-model="getReport._id" |
139 | 139 | label="Select Librarian" |
... | ... | @@ -147,17 +147,18 @@ |
147 | 147 | </v-flex> |
148 | 148 | <v-flex xs12 sm6 lg4> |
149 | 149 | <v-layout> |
150 | - <v-flex xs4 sm4 lg2 class="subheading mt-4"> | |
150 | + <!-- <v-flex xs4 sm4 lg2 class="subheading mt-4"> | |
151 | 151 | <label class="right">Type:</label> |
152 | - </v-flex> | |
153 | - <v-flex xs7 sm6 lg8 class="ml-2"> | |
152 | + </v-flex>--> | |
153 | + <v-flex xs7 sm6 lg10 class="ml-2"> | |
154 | 154 | <v-autocomplete |
155 | - label="Please Select" | |
155 | + label="Select View Type" | |
156 | 156 | type="text" |
157 | 157 | :items="typeList" |
158 | 158 | v-model="getReport.form" |
159 | 159 | item-text="name" |
160 | 160 | item-value="value" |
161 | + :rules="typeRules" | |
161 | 162 | @change="getReportType(getReport.form)" |
162 | 163 | required |
163 | 164 | ></v-autocomplete> |
... | ... | @@ -371,46 +372,7 @@ |
371 | 372 | > |
372 | 373 | <b>{{ getCard.name}}</b> |
373 | 374 | </p> |
374 | - <!-- <p | |
375 | - v-if="getCard.classId" | |
376 | - style="color: #302653;font-size:24px; | |
377 | - letter-spacing: 4px;" | |
378 | - >{{ getCard.classId.classNum }}</p>--> | |
379 | - <!-- <p | |
380 | - v-if="getCard.classId" | |
381 | - style="color: #302653;font-size:24px; | |
382 | - letter-spacing: 4px;" | |
383 | - >{{ getCard.sectionId.name }}</p>--> | |
384 | - <!-- <p | |
385 | - v-if="getCard.rollNo" | |
386 | - style="color: #302653;font-size:24px; | |
387 | - letter-spacing: 2px;" | |
388 | - >Roll: {{ getCard.rollNo }}</p> | |
389 | - <p | |
390 | - v-if="getCard.joinDate" | |
391 | - style="color: #302653;font-size:16px; | |
392 | - letter-spacing: 2px;" | |
393 | - >{{ dates(getCard.joinDate) }}</p> | |
394 | - <p | |
395 | - v-if="getCard.joiningDate" | |
396 | - style="color: #302653;font-size:16px; | |
397 | - letter-spacing: 2px;" | |
398 | - >{{ dates(getCard.joiningDate) }}</p> | |
399 | - <p | |
400 | - v-if="getCard.phone" | |
401 | - style="color: #302653;font-size:16px; | |
402 | - letter-spacing: 2px;" | |
403 | - >{{ getCard.phone }}</p>--> | |
404 | - <!-- <p | |
405 | - style=" | |
406 | - font-size: 19px; | |
407 | - font-weight: 100; | |
408 | - color: rgb(48, 38, 83); | |
409 | - letter-spacing: 5px;" | |
410 | - > | |
411 | - <span v-if="getCard.mobile">{{ getCard.mobile}}</span> | |
412 | - <span v-if="getCard.mobileNo">{{ getCard.mobileNo }}</span> | |
413 | - </p>--> | |
375 | + | |
414 | 376 | <p |
415 | 377 | v-if="getCard.city" |
416 | 378 | style=" |
... | ... | @@ -516,7 +478,7 @@ export default { |
516 | 478 | // accountantRules: [v => !!v || "Accountant Field is required"], |
517 | 479 | // librarianRules: [v => !!v || "Librarian Field is required"], |
518 | 480 | |
519 | - // typeRules: [v => !!v || "Type is required"], | |
481 | + typeRules: [v => !!v || "Type is required"], | |
520 | 482 | // backgroundRules: [v => !!v || "Background is required"], |
521 | 483 | typeList: [ |
522 | 484 | { |
... | ... | @@ -596,7 +558,7 @@ export default { |
596 | 558 | this.showLibrarian = false; |
597 | 559 | this.showStudents = false; |
598 | 560 | this.showSections = false; |
599 | - this.getUsersList(); | |
561 | + this.getUsersList(role); | |
600 | 562 | } |
601 | 563 | if (role === 7) { |
602 | 564 | this.showLibrarian = true; |
... | ... | @@ -606,7 +568,7 @@ export default { |
606 | 568 | this.showClass = false; |
607 | 569 | this.showStudents = false; |
608 | 570 | this.showSections = false; |
609 | - this.getUsersList(); | |
571 | + this.getUsersList(role); | |
610 | 572 | } |
611 | 573 | }, |
612 | 574 | |
... | ... | @@ -714,60 +676,62 @@ export default { |
714 | 676 | }); |
715 | 677 | }, |
716 | 678 | getCards() { |
717 | - http() | |
718 | - .get("/getIdCardDetail", { | |
719 | - headers: { | |
720 | - Authorization: "Bearer " + this.token | |
721 | - }, | |
722 | - params: { | |
723 | - profileId: this.getReport._id, | |
724 | - role: this.getReport.role | |
725 | - } | |
726 | - }) | |
727 | - .then(response => { | |
728 | - this.getCard = ""; | |
729 | - var data = response.data.data; | |
730 | - if ( | |
731 | - Object.keys(data.adminData).length != 0 && | |
732 | - data.adminData.constructor === Object | |
733 | - ) { | |
734 | - this.getCard = response.data.data.adminData; | |
735 | - console.log("this.getCard ", this.getCard); | |
736 | - } | |
737 | - if ( | |
738 | - Object.keys(data.teachersData).length != 0 && | |
739 | - data.teachersData.constructor === Object | |
740 | - ) { | |
741 | - this.getCard = response.data.data.teachersData; | |
742 | - console.log("this.getCard--teachersData ", this.getCard); | |
743 | - } | |
744 | - if ( | |
745 | - Object.keys(data.studentData).length != 0 && | |
746 | - data.studentData.constructor === Object | |
747 | - ) { | |
748 | - this.getCard = response.data.data.studentData; | |
749 | - console.log("this.getCard--studentData ", this.getCard); | |
750 | - } | |
751 | - if ( | |
752 | - Object.keys(data.usersData).length != 0 && | |
753 | - data.usersData.constructor === Object | |
754 | - ) { | |
755 | - this.getCard = response.data.data.usersData; | |
756 | - console.log("this.getCard--usersData ", this.getCard); | |
757 | - } | |
758 | - // console.log("this.getCard--all ", response.data.data); | |
759 | - this.showLoader = false; | |
760 | - this.showReport = true; | |
761 | - }) | |
762 | - .catch(error => { | |
763 | - this.showLoader = false; | |
764 | - console.log("error", error.response.data.errors); | |
765 | - if (error.response.data.errors) { | |
766 | - this.snackbar = true; | |
767 | - this.text = " Field is required"; | |
768 | - this.color = "error"; | |
769 | - } | |
770 | - }); | |
679 | + if (this.$refs.form.validate()) { | |
680 | + http() | |
681 | + .get("/getIdCardDetail", { | |
682 | + headers: { | |
683 | + Authorization: "Bearer " + this.token | |
684 | + }, | |
685 | + params: { | |
686 | + profileId: this.getReport._id, | |
687 | + role: this.getReport.role | |
688 | + } | |
689 | + }) | |
690 | + .then(response => { | |
691 | + this.getCard = ""; | |
692 | + var data = response.data.data; | |
693 | + if ( | |
694 | + Object.keys(data.adminData).length != 0 && | |
695 | + data.adminData.constructor === Object | |
696 | + ) { | |
697 | + this.getCard = response.data.data.adminData; | |
698 | + console.log("this.getCard ", this.getCard); | |
699 | + } | |
700 | + if ( | |
701 | + Object.keys(data.teachersData).length != 0 && | |
702 | + data.teachersData.constructor === Object | |
703 | + ) { | |
704 | + this.getCard = response.data.data.teachersData; | |
705 | + console.log("this.getCard--teachersData ", this.getCard); | |
706 | + } | |
707 | + if ( | |
708 | + Object.keys(data.studentData).length != 0 && | |
709 | + data.studentData.constructor === Object | |
710 | + ) { | |
711 | + this.getCard = response.data.data.studentData; | |
712 | + console.log("this.getCard--studentData ", this.getCard); | |
713 | + } | |
714 | + if ( | |
715 | + Object.keys(data.usersData).length != 0 && | |
716 | + data.usersData.constructor === Object | |
717 | + ) { | |
718 | + this.getCard = response.data.data.usersData; | |
719 | + console.log("this.getCard--usersData ", this.getCard); | |
720 | + } | |
721 | + // console.log("this.getCard--all ", response.data.data); | |
722 | + this.showLoader = false; | |
723 | + this.showReport = true; | |
724 | + }) | |
725 | + .catch(error => { | |
726 | + this.showLoader = false; | |
727 | + console.log("error", error.response.data.errors); | |
728 | + if (error.response.data.errors) { | |
729 | + this.snackbar = true; | |
730 | + this.text = " Field is required"; | |
731 | + this.color = "error"; | |
732 | + } | |
733 | + }); | |
734 | + } | |
771 | 735 | }, |
772 | 736 | getTeacherList() { |
773 | 737 | this.showLoader = true; |
... | ... | @@ -789,11 +753,11 @@ export default { |
789 | 753 | } |
790 | 754 | }); |
791 | 755 | }, |
792 | - getUsersList() { | |
756 | + getUsersList(role) { | |
793 | 757 | this.showLoader = true; |
794 | 758 | var token = this.$store.state.token; |
795 | 759 | http() |
796 | - .get("/getUsersList", { | |
760 | + .get("/getUsersList?role=" + role, { | |
797 | 761 | headers: { Authorization: "Bearer " + token } |
798 | 762 | }) |
799 | 763 | .then(response => { | ... | ... |