Commit a55b7fca2a8aa9a962fcb06af49f519ff1c8712e

Authored by Neeraj Sharma
1 parent af086007bc

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 => {
... ...