viithiisys / School-Management-dashboard

Compare View

switch
from
...
to
 
Commits (9)
Showing 13 changed files   Show diff stats
src/Services/AllApiCalls.js
Diff comments   View file @4fb0af7
1 import GetApis from "@/Services/GetApis.js"; 1 import GetApis from "@/Services/GetApis.js";
2 import PutApis from "@/Services/PutApis.js"; 2 import PutApis from "@/Services/PutApis.js";
3 3
4 export default { 4 export default {
5 mixins: [GetApis, PutApis], 5 mixins: [GetApis, PutApis],
6 data() { 6 data() {
7 return { 7 return {
8 // UploadPdf.vue 8 // UploadPdf.vue
9 emptyPdf: '', 9 emptyPdf: '',
10 // UploadFiles.vue 10 // UploadFiles.vue
11 trigger: '', 11 trigger: '',
12 pptFile: "", 12 pptFile: "",
13 pptFileName: "", 13 pptFileName: "",
14 pdfFile: "", 14 pdfFile: "",
15 pdfFileName: "", 15 pdfFileName: "",
16 courseData: [], 16 courseData: [],
17 teachersList: [], 17 teachersList: [],
18 schoolEvents: [],
19 particularEvent: {},
18 schoolEvents: [], 20
19 particularEvent: {}, 21 }
20 22 },
21 } 23 methods: {
22 }, 24 /************************** METHODS USED FOR COMMON FILES *********************/
23 methods: { 25 /* METHODS USED FOR UploadPdf.vue */
24 /************************** METHODS USED FOR COMMON FILES *********************/ 26 pdfFileSelected(e, message) {
25 /* METHODS USED FOR UploadPdf.vue */ 27
26 pdfFileSelected(e, message) { 28 this.pdfFile = e.fileInBase64;
27 29 this.pdfFileName = e.selectedFileName;
28 this.pdfFile = e.fileInBase64; 30 this.emptyPdf = e.emptyPdf;
29 this.pdfFileName = e.selectedFileName; 31
30 this.emptyPdf = e.emptyPdf; 32 },
31 33
32 }, 34 /* METHODS USED FOR UploadFiles.vue */
33 35 fileSelected(e, message) {
34 /* METHODS USED FOR UploadFiles.vue */ 36 if (message == "uploadPPT") {
35 fileSelected(e, message) { 37 this.pptFile = e.fileInBase64;
36 if (message == "uploadPPT") { 38 this.pptFileName = e.selectedFileName;
37 this.pptFile = e.fileInBase64; 39 this.trigger = e.trigger;
38 this.pptFileName = e.selectedFileName; 40 }
39 this.trigger = e.trigger; 41 if (message == "uploadPDF") {
40 } 42 this.pdfFile = e.fileInBase64;
41 if (message == "uploadPDF") { 43 this.pdfFileName = e.selectedFileName;
42 this.pdfFile = e.fileInBase64; 44 this.emptyPdf = e.trigger;
43 this.pdfFileName = e.selectedFileName; 45 }
44 this.emptyPdf = e.trigger; 46 },
45 } 47
46 }, 48
47 49 },
48 50 }
src/Services/GetApis.js
Diff comments   View file @4fb0af7
1 import ApiCalls from "@/Services/ApiCalls.js"; 1 import ApiCalls from "@/Services/ApiCalls.js";
2 export default { 2 export default {
3 mixins: [ApiCalls], 3 mixins: [ApiCalls],
4 data() { 4 data() {
5 return { 5 return {
6 // courseData: [], 6 // courseData: [],
7 7
8 // dashboard.vue data properties 8 // dashboard.vue data properties
9 9
10 10
11 11
12 } 12 }
13 }, 13 },
14 methods: { 14 methods: {
15 /* getParticularCourseDetail */ 15 /* getParticularCourseDetail */
16 async getParticularCourseDetail(courseId) { 16 async getParticularCourseDetail(courseId) {
17 17
18 try { 18 try {
19 let response = await this.getMethod("/getParticularCourseDetail", { 19 let response = await this.getMethod("/getParticularCourseDetail", {
20 courseId: courseId 20 courseId: courseId
21 }) 21 })
22 return response 22 return response
23 } catch (error) { 23 } catch (error) {
24 console.log("error in getParticularCourseDetail - ", error.message) 24 console.log("error in getParticularCourseDetail - ", error.message)
25 } 25 }
26 }, 26 },
27 27
28 /* getStudentCourses - to get courseData */ 28 /* getStudentCourses - to get courseData */
29 async getStudentCourses(params) { 29 async getStudentCourses(params) {
30 try { 30 try {
31 let response = await this.getMethod("/getStudentCourses", { 31 let response = await this.getMethod("/getStudentCourses", {
32 classId: params.classId, 32 classId: params.classId,
33 studentId: params.studentId 33 studentId: params.studentId
34 }) 34 })
35 this.courseData = response.data.data; 35 this.courseData = response.data.data;
36 } catch (error) { 36 } catch (error) {
37 console.log("error in getStudentCourses - ", error.message) 37 console.log("error in getStudentCourses - ", error.message)
38 } 38 }
39 }, 39 },
40 40
41 /* getCourseDiscussionesList - used in courseDiscussionForum.vue */ 41 /* getCourseDiscussionesList - used in courseDiscussionForum.vue */
42 async getCourseDiscussionesList(params) { 42 async getCourseDiscussionesList(params) {
43 try { 43 try {
44 let response = await this.getMethod("/getCourseDiscussionesList", { 44 let response = await this.getMethod("/getCourseDiscussionesList", {
45 courseId: params.courseId, 45 courseId: params.courseId,
46 classId: params.classId, 46 classId: params.classId,
47 }) 47 })
48 this.courseDiscussionItems = response.data.data 48 this.courseDiscussionItems = response.data.data
49 // return response 49 // return response
50 console.log("response of getCourseDiscussionesList - ", response) 50 console.log("response of getCourseDiscussionesList - ", response)
51 } catch (error) { 51 } catch (error) {
52 console.log("error in getCourseDiscussionesList - ", error.message) 52 console.log("error in getCourseDiscussionesList - ", error.message)
53 } 53 }
54 }, 54 },
55 55
56 56
57 57
58 58
59 59
60 60
61 61
62 /***************************************************************************************************************************** */ 62 /***************************************************************************************************************************** */
63 63
64 // APIS USED IN dashboard.vue 64 // APIS USED IN dashboard.vue
65 /* studentMeetingEvents required in dashboard to display list of latest events */ 65 /* studentMeetingEvents required in dashboard to display list of latest events */
66 async studentMeetingEvents(params) { 66 async studentMeetingEvents(params) {
67 try { 67 try {
68 let response = await this.getMethod("/studentMeetingEvents", { 68 let response = await this.getMethod("/studentMeetingEvents", {
69 studentId: params.studentId 69 studentId: params.studentId
70 }) 70 })
71 console.log("response of studentMeetingEvents - ", response); 71 console.log("response of studentMeetingEvents - ", response);
72 return response 72 return response
73 } catch (error) { 73 } catch (error) {
74 console.log("error in studentMeetingEvents - ", error.message) 74 console.log("error in studentMeetingEvents - ", error.message)
75 } 75 }
76 76
77 }, 77 },
78 78
79 async getParticularMeetingEvent(params) { 79 async getParticularMeetingEvent(params) {
80 try { 80 try {
81 let response = await this.getMethod("/getParticularMeetingEvent", { 81 let response = await this.getMethod("/getParticularMeetingEvent", {
82 meetingEventId: params.meetingEventId 82 meetingEventId: params.meetingEventId
83 }) 83 })
84 // this.particularEvent.push = response.data.data 84 // this.particularEvent.push = response.data.data
85 return response
86 } catch (error) {
87 console.log("Error in getParticularMeetingEvent - ", error.message)
88 }
89 },
90
91 async getParticularSchoolEvent(params) {
92 try {
93 let response = await this.getMethod("/getParticularSchoolEvent", {
94 schoolEventId: params.schoolEventId
95 })
96 // this.particularEvent = response.data.data
97 return response
85 return response 98 } catch (error) {
86 } catch (error) { 99 console.log("Error in getParticularMeetingEvent - ", error.message)
87 console.log("Error in getParticularMeetingEvent - ", error.message) 100 }
88 } 101 },
89 }, 102
103 async getSchoolEventsList(params) {
104 try {
105 let response = await this.getMethod("/getSchoolEventsList")
106 this.schoolEvents = response.data.data;
107 console.log("school events - ", this.schoolEvents)
108 return response
109 } catch (error) {
110 console.log("Error in getParticularMeetingEvent - ", error.message)
111 }
112
113 },
114
115
90 116 /************************************************************************************************************************ */
91 async getParticularSchoolEvent(params) { 117
92 try { 118 /* APIS USED IN LiveOnlineClass.vue */
93 let response = await this.getMethod("/getParticularSchoolEvent", { 119 async getLiveClassesesList(params) {
94 schoolEventId: params.schoolEventId 120 try {
95 }) 121 let response = await this.getMethod("/getLiveClassesesList", {
96 // this.particularEvent = response.data.data 122 classId: params.classId,
97 return response 123 courseId: params.courseId,
98 } catch (error) { 124 chapterId: params.chapterId,
99 console.log("Error in getParticularMeetingEvent - ", error.message) 125 })
100 } 126 return response
101 }, 127 } catch (error) {
102 128 console.log(" error in getLiveClassesesList - ", error.message)
103 async getSchoolEventsList(params) { 129 }
104 try { 130 },
105 let response = await this.getMethod("/getSchoolEventsList") 131
106 this.schoolEvents = response.data.data; 132
107 console.log("school events - ", this.schoolEvents) 133
108 return response 134 /*************************************************************************************************************************** */
109 } catch (error) { 135
110 console.log("Error in getParticularMeetingEvent - ", error.message) 136
111 } 137 /* APIS USED IN announcement.vue */
112 138 async getAnnoucementesList(params) {
113 }, 139 try {
114 140 let response = await this.getMethod("/getAnnoucementesList", {
115 141 courseId: params.courseId
116 /************************************************************************************************************************ */ 142 })
117 143 return response;
118 /* APIS USED IN LiveOnlineClass.vue */ 144 } catch (error) {
119 async getLiveClassesesList(params) { 145 console.log("Error in getAnnoucementesList - ", error.message)
120 try { 146 }
121 let response = await this.getMethod("/getLiveClassesesList", { 147 },
122 classId: params.classId, 148
123 courseId: params.courseId, 149 /***********************************************************************************************/
124 chapterId: params.chapterId, 150
125 }) 151 /* APIS USED IN AssignTeachers.vue */
126 return response 152 async getCourseesList(params) {
127 } catch (error) { 153 try {
128 console.log(" error in getLiveClassesesList - ", error.message) 154 let response = await this.getMethod("/getCourseesList", {
129 } 155 classId: params.classId
130 }, 156 })
131 157 this.courseData = response.data.data;
132 158 return response;
133 159 } catch (error) {
134 /*************************************************************************************************************************** */ 160 console.log("Error in getAnnoucementesList - ", error.message)
135 161 }
136 162 },
137 /* APIS USED IN announcement.vue */ 163 async getTeachersList(params) {
138 async getAnnoucementesList(params) { 164 try {
139 try { 165 let response = await this.getMethod("/getTeachersList")
140 let response = await this.getMethod("/getAnnoucementesList", { 166 this.teachersList = response.data.data;
141 courseId: params.courseId 167 console.log("teachers list - ", this.teachersList)
142 }) 168 return response;
143 return response; 169 } catch (error) {
144 } catch (error) { 170 console.log("Error in getAnnoucementesList - ", error.message)
145 console.log("Error in getAnnoucementesList - ", error.message) 171 }
146 } 172 }
147 }, 173
148 174
149 /***********************************************************************************************/ 175 },
150 176 }
src/pages/Academic/subject.vue
Diff comments   View file @4fb0af7
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** EDIT Subject ****** --> 3 <!-- ****** EDIT Subject ****** -->
4 <v-dialog v-model="editSubjectDialog" max-width="600px" persistent> 4 <v-dialog v-model="editSubjectDialog" max-width="600px" persistent>
5 <v-card flat class="card-style pa-2" dark> 5 <v-card flat class="card-style pa-2" dark>
6 <v-layout> 6 <v-layout>
7 <v-flex xs12> 7 <v-flex xs12>
8 <label class="title text-xs-center">Edit Subject</label> 8 <label class="title text-xs-center">Edit Subject</label>
9 <v-icon size="24" class="right" @click="editSubjectDialog = false">cancel</v-icon> 9 <v-icon size="24" class="right" @click="editSubjectDialog = false">cancel</v-icon>
10 </v-flex> 10 </v-flex>
11 </v-layout> 11 </v-layout>
12 <v-container fluid> 12 <v-container fluid>
13 <v-form ref="formEditSubject" v-model="validEditSubject" lazy-validation> 13 <v-form ref="formEditSubject" v-model="validEditSubject" lazy-validation>
14 <v-layout> 14 <v-layout>
15 <v-flex xs4 class="pt-4 subheading"> 15 <v-flex xs4 class="pt-4 subheading">
16 <label class="right">Class:</label> 16 <label class="right">Class:</label>
17 </v-flex> 17 </v-flex>
18 <v-flex xs8 class="ml-3"> 18 <v-flex xs8 class="ml-3">
19 <v-select 19 <v-select
20 v-model="editedItem.classId" 20 v-model="editedItem.classId"
21 label="Select your class" 21 label="Select your class"
22 type="text" 22 type="text"
23 :items="classList" 23 :items="classList"
24 item-text="classNum" 24 item-text="classNum"
25 item-value="_id" 25 item-value="_id"
26 :rules="classRules" 26 :rules="classRules"
27 required 27 required
28 ></v-select> 28 ></v-select>
29 </v-flex> 29 </v-flex>
30 </v-layout> 30 </v-layout>
31 <v-layout> 31 <v-layout>
32 <v-flex xs4 sm4 class="pt-4 subheading"> 32 <v-flex xs4 sm4 class="pt-4 subheading">
33 <label class="right">Teacher Name :</label> 33 <label class="right">Teacher Name :</label>
34 </v-flex> 34 </v-flex>
35 <v-flex xs8 sm8 class="ml-3"> 35 <v-flex xs8 sm8 class="ml-3">
36 <v-select 36 <v-select
37 v-model="editedItem.teacherId" 37 v-model="editedItem.teacherId"
38 label="Select your teacher" 38 label="Select your teacher"
39 type="text" 39 type="text"
40 :items="teacherList" 40 :items="teacherList"
41 item-text="name" 41 item-text="name"
42 item-value="_id" 42 item-value="_id"
43 :rules="teacherRules" 43 :rules="teacherRules"
44 required 44 required
45 ></v-select> 45 ></v-select>
46 </v-flex> 46 </v-flex>
47 </v-layout> 47 </v-layout>
48 <v-layout> 48 <v-layout>
49 <v-flex xs4 sm4 class="pt-4 sybheading"> 49 <v-flex xs4 sm4 class="pt-4 sybheading">
50 <label class="right">Type :</label> 50 <label class="right">Type :</label>
51 </v-flex> 51 </v-flex>
52 <v-flex xs8 sm8 class="ml-3"> 52 <v-flex xs8 sm8 class="ml-3">
53 <v-select 53 <v-select
54 v-model="editedItem.type" 54 v-model="editedItem.type"
55 :items="type" 55 :items="type"
56 label="Select your Type" 56 label="Select your Type"
57 :rules="typeRules" 57 :rules="typeRules"
58 required 58 required
59 ></v-select> 59 ></v-select>
60 </v-flex> 60 </v-flex>
61 </v-layout> 61 </v-layout>
62 <v-layout> 62 <v-layout>
63 <v-flex xs4 sm4 class="pt-4 subheading"> 63 <v-flex xs4 sm4 class="pt-4 subheading">
64 <label class="right">Pass Mark :</label> 64 <label class="right">Pass Mark :</label>
65 </v-flex> 65 </v-flex>
66 <v-flex xs8 sm8 class="ml-3"> 66 <v-flex xs8 sm8 class="ml-3">
67 <v-text-field 67 <v-text-field
68 label="Fill your Pass Mark" 68 label="Fill your Pass Mark"
69 name="name" 69 name="name"
70 type="text" 70 type="text"
71 :rules="markRules" 71 :rules="markRules"
72 v-model="editedItem.passMarks" 72 v-model="editedItem.passMarks"
73 required 73 required
74 ></v-text-field> 74 ></v-text-field>
75 </v-flex> 75 </v-flex>
76 </v-layout> 76 </v-layout>
77 <v-layout> 77 <v-layout>
78 <v-flex xs4 sm4 class="pt-4 subheading"> 78 <v-flex xs4 sm4 class="pt-4 subheading">
79 <label class="right">Final Mark :</label> 79 <label class="right">Final Mark :</label>
80 </v-flex> 80 </v-flex>
81 <v-flex xs8 sm8 class="ml-3"> 81 <v-flex xs8 sm8 class="ml-3">
82 <v-text-field 82 <v-text-field
83 label="Fill your final mark" 83 label="Fill your final mark"
84 name="name" 84 name="name"
85 type="text" 85 type="text"
86 :rules="finalRules" 86 :rules="finalRules"
87 v-model="editedItem.finalMarks" 87 v-model="editedItem.finalMarks"
88 required 88 required
89 ></v-text-field> 89 ></v-text-field>
90 </v-flex> 90 </v-flex>
91 </v-layout> 91 </v-layout>
92 <v-layout> 92 <v-layout>
93 <v-flex xs4 class="pt-4 subheading"> 93 <v-flex xs4 class="pt-4 subheading">
94 <label class="right">Subject:</label> 94 <label class="right">Subject:</label>
95 </v-flex> 95 </v-flex>
96 <v-flex xs8 class="ml-3"> 96 <v-flex xs8 class="ml-3">
97 <v-text-field 97 <v-text-field
98 placeholder="fill your Subject" 98 placeholder="fill your Subject"
99 v-model="editedItem.subjectName" 99 v-model="editedItem.subjectName"
100 :rules="subjectRules" 100 :rules="subjectRules"
101 type="text" 101 type="text"
102 name="email" 102 name="email"
103 required 103 required
104 ></v-text-field> 104 ></v-text-field>
105 </v-flex> 105 </v-flex>
106 </v-layout> 106 </v-layout>
107 <v-layout> 107 <v-layout>
108 <v-flex xs4 sm4 class="pt-4 subheading"> 108 <v-flex xs4 sm4 class="pt-4 subheading">
109 <label class="right">Subject Author :</label> 109 <label class="right">Subject Author :</label>
110 </v-flex> 110 </v-flex>
111 <v-flex xs8 sm8 class="ml-3"> 111 <v-flex xs8 sm8 class="ml-3">
112 <v-text-field 112 <v-text-field
113 v-model="editedItem.subjectAuthor" 113 v-model="editedItem.subjectAuthor"
114 placeholder="fill your Subject Author" 114 placeholder="fill your Subject Author"
115 name="name" 115 name="name"
116 type="text" 116 type="text"
117 ></v-text-field> 117 ></v-text-field>
118 </v-flex> 118 </v-flex>
119 </v-layout> 119 </v-layout>
120 <v-layout> 120 <v-layout>
121 <v-flex xs4 sm4 class="pt-4 subheading"> 121 <v-flex xs4 sm4 class="pt-4 subheading">
122 <label class="right">Subject Code:</label> 122 <label class="right">Subject Code:</label>
123 </v-flex> 123 </v-flex>
124 <v-flex xs8 sm8 class="ml-3"> 124 <v-flex xs8 sm8 class="ml-3">
125 <v-text-field 125 <v-text-field
126 v-model="editedItem.subjectCode" 126 v-model="editedItem.subjectCode"
127 placeholder="fill your Subject Code" 127 placeholder="fill your Subject Code"
128 name="name" 128 name="name"
129 type="text" 129 type="text"
130 ></v-text-field> 130 ></v-text-field>
131 </v-flex> 131 </v-flex>
132 </v-layout> 132 </v-layout>
133 <v-flex xs12 sm12> 133 <v-flex xs12 sm12>
134 <v-card-actions> 134 <v-card-actions>
135 <v-spacer></v-spacer> 135 <v-spacer></v-spacer>
136 <v-btn 136 <v-btn
137 round 137 round
138 dark 138 dark
139 @click="save" 139 @click="save"
140 :loading="editLoading" 140 :loading="editLoading"
141 class="add-button" 141 class="add-button"
142 >Update Subject</v-btn> 142 >Update Subject</v-btn>
143 </v-card-actions> 143 </v-card-actions>
144 </v-flex> 144 </v-flex>
145 </v-form> 145 </v-form>
146 </v-container> 146 </v-container>
147 </v-card> 147 </v-card>
148 </v-dialog> 148 </v-dialog>
149 149
150 <!-- ****** VIEW PROFIL NOTICE BOARD ****** --> 150 <!-- ****** VIEW PROFIL NOTICE BOARD ****** -->
151 151
152 <v-dialog v-model="viewSubjectDialog" max-width="500px" persistent> 152 <v-dialog v-model="viewSubjectDialog" max-width="500px" persistent>
153 <v-card flat class="card-style pa-3" dark> 153 <v-card flat class="card-style pa-3" dark>
154 <v-layout> 154 <v-layout>
155 <v-flex xs12> 155 <v-flex xs12>
156 <label class="title text-xs-center">View Subject</label> 156 <label class="title text-xs-center">View Subject</label>
157 <v-icon size="24" class="right" @click="viewSubjectDialog = false">cancel</v-icon> 157 <v-icon size="24" class="right" @click="viewSubjectDialog = false">cancel</v-icon>
158 </v-flex> 158 </v-flex>
159 </v-layout> 159 </v-layout>
160 <v-card-text> 160 <v-card-text>
161 <v-container grid-list-md> 161 <v-container grid-list-md>
162 <v-layout wrap> 162 <v-layout wrap>
163 <v-flex> 163 <v-flex>
164 <v-layout> 164 <v-layout>
165 <v-flex xs6 sm4> 165 <v-flex xs6 sm4>
166 <h5 class="right my-1"> 166 <h5 class="right my-1">
167 <b>Subject Name:</b> 167 <b>Subject Name:</b>
168 </h5> 168 </h5>
169 </v-flex> 169 </v-flex>
170 <v-flex sm8 xs6> 170 <v-flex sm8 xs6>
171 <h5 class="my-1">{{ editedItem.subjectName }}</h5> 171 <h5 class="my-1">{{ editedItem.subjectName }}</h5>
172 </v-flex> 172 </v-flex>
173 </v-layout> 173 </v-layout>
174 <v-layout> 174 <v-layout>
175 <v-flex xs6 sm4> 175 <v-flex xs6 sm4>
176 <h5 class="right my-1"> 176 <h5 class="right my-1">
177 <b>Subject Author:</b> 177 <b>Subject Author:</b>
178 </h5> 178 </h5>
179 </v-flex> 179 </v-flex>
180 <v-flex sm8 xs6> 180 <v-flex sm8 xs6>
181 <h5 class="my-1">{{ editedItem.subjectAuthor }}</h5> 181 <h5 class="my-1">{{ editedItem.subjectAuthor }}</h5>
182 </v-flex> 182 </v-flex>
183 </v-layout> 183 </v-layout>
184 <v-layout> 184 <v-layout>
185 <v-flex xs6 sm4> 185 <v-flex xs6 sm4>
186 <h5 class="right my-1"> 186 <h5 class="right my-1">
187 <b>Subject :</b> 187 <b>Subject :</b>
188 </h5> 188 </h5>
189 </v-flex> 189 </v-flex>
190 <v-flex sm8 xs6> 190 <v-flex sm8 xs6>
191 <h5 class="my-1">{{ editedItem.subjectCode }}</h5> 191 <h5 class="my-1">{{ editedItem.subjectCode }}</h5>
192 </v-flex> 192 </v-flex>
193 </v-layout> 193 </v-layout>
194 <!-- <v-layout> 194 <!-- <v-layout>
195 <v-flex xs6 sm4> 195 <v-flex xs6 sm4>
196 <h5 class="right my-1"> 196 <h5 class="right my-1">
197 <b>Teacher :</b> 197 <b>Teacher :</b>
198 </h5> 198 </h5>
199 </v-flex> 199 </v-flex>
200 <v-flex sm8 xs6> 200 <v-flex sm8 xs6>
201 <h5 class="my-1">{{ editedItem.teacherId }}</h5> 201 <h5 class="my-1">{{ editedItem.teacherId }}</h5>
202 </v-flex> 202 </v-flex>
203 </v-layout>--> 203 </v-layout>-->
204 <v-layout> 204 <v-layout>
205 <v-flex xs6 sm4> 205 <v-flex xs6 sm4>
206 <h5 class="right my-1"> 206 <h5 class="right my-1">
207 <b>Pass Marks :</b> 207 <b>Pass Marks :</b>
208 </h5> 208 </h5>
209 </v-flex> 209 </v-flex>
210 <v-flex sm8 xs6> 210 <v-flex sm8 xs6>
211 <h5 class="my-1">{{ editedItem.passMarks }}</h5> 211 <h5 class="my-1">{{ editedItem.passMarks }}</h5>
212 </v-flex> 212 </v-flex>
213 </v-layout> 213 </v-layout>
214 <v-layout> 214 <v-layout>
215 <v-flex xs6 sm4> 215 <v-flex xs6 sm4>
216 <h5 class="right my-1"> 216 <h5 class="right my-1">
217 <b>Final Marks :</b> 217 <b>Final Marks :</b>
218 </h5> 218 </h5>
219 </v-flex> 219 </v-flex>
220 <v-flex sm8 xs6> 220 <v-flex sm8 xs6>
221 <h5 class="my-1">{{ editedItem.finalMarks }}</h5> 221 <h5 class="my-1">{{ editedItem.finalMarks }}</h5>
222 </v-flex> 222 </v-flex>
223 </v-layout> 223 </v-layout>
224 <v-layout> 224 <v-layout>
225 <v-flex xs6 sm4> 225 <v-flex xs6 sm4>
226 <h5 class="right my-1"> 226 <h5 class="right my-1">
227 <b>Type :</b> 227 <b>Type :</b>
228 </h5> 228 </h5>
229 </v-flex> 229 </v-flex>
230 <v-flex sm8 xs6> 230 <v-flex sm8 xs6>
231 <h5 class="my-1">{{ editedItem.type }}</h5> 231 <h5 class="my-1">{{ editedItem.type }}</h5>
232 </v-flex> 232 </v-flex>
233 </v-layout> 233 </v-layout>
234 </v-flex> 234 </v-flex>
235 </v-layout> 235 </v-layout>
236 </v-container> 236 </v-container>
237 </v-card-text> 237 </v-card-text>
238 </v-card> 238 </v-card>
239 </v-dialog> 239 </v-dialog>
240 240
241 <!-- ****** EXISTING SUBJECTS TABLE ****** --> 241 <!-- ****** EXISTING SUBJECTS TABLE ****** -->
242 <v-toolbar color="transparent" flat> 242 <v-toolbar color="transparent" flat>
243 <v-btn 243 <v-btn
244 fab 244 fab
245 dark 245 dark
246 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 246 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
247 small 247 small
248 @click="addSubjectDialog = true" 248 @click="addSubjectDialog = true"
249 > 249 >
250 <v-icon dark>add</v-icon> 250 <v-icon dark>add</v-icon>
251 </v-btn> 251 </v-btn>
252 <v-flex xs1 class="hidden-sm-only hidden-xs-only"> 252 <v-flex xs1 class="hidden-sm-only hidden-xs-only">
253 <v-btn 253 <v-btn
254 round 254 round
255 class="open-dialog-button" 255 class="open-dialog-button"
256 dark 256 dark
257 @click="addSubjectDialog = true" 257 @click="addSubjectDialog = true"
258 v-if="role != 'TEACHER' " 258 v-if="role != 'TEACHER' "
259 > 259 >
260 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Subject 260 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Subject
261 </v-btn> 261 </v-btn>
262 </v-flex> 262 </v-flex>
263 <v-spacer></v-spacer> 263 <v-spacer></v-spacer>
264 <v-flex lg2 md2 xs12 v-show="show"> 264 <v-flex lg2 md2 xs12 v-show="show">
265 <v-select 265 <v-select
266 :items="classList" 266 :items="classList"
267 label="Select Your Class" 267 label="Select Your Class"
268 v-model="getSubject.classId" 268 v-model="getSubject.classId"
269 item-text="classNum" 269 item-text="classNum"
270 item-value="_id" 270 item-value="_id"
271 name="Select Class" 271 name="Select Class"
272 :rules="classRules" 272 :rules="classRules"
273 @change="getClassSubject" 273 @change="getClassSubject"
274 class="pl-2" 274 class="pl-2"
275 required 275 required
276 ></v-select> 276 ></v-select>
277 </v-flex> 277 </v-flex>
278 <v-card-title class="body-1" v-show="show"> 278 <v-card-title class="body-1" v-show="show">
279 <v-btn icon flat @click="displaySearch"> 279 <v-btn icon flat @click="displaySearch">
280 <v-avatar size="27"> 280 <v-avatar size="27">
281 <img src="/static/icon/search.png" alt="icon" /> 281 <img src="/static/icon/search.png" alt="icon" />
282 </v-avatar> 282 </v-avatar>
283 </v-btn> 283 </v-btn>
284 </v-card-title> 284 </v-card-title>
285 <v-flex xs9 sm9 md2 lg2 xl2 v-if="showSearch"> 285 <v-flex xs9 sm9 md2 lg2 xl2 v-if="showSearch">
286 <v-layout> 286 <v-layout>
287 <v-text-field 287 <v-text-field
288 autofocus 288 autofocus
289 v-model="search" 289 v-model="search"
290 label="Search" 290 label="Search"
291 prepend-inner-icon="search" 291 prepend-inner-icon="search"
292 color="primary" 292 color="primary"
293 style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important" 293 style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important"
294 ></v-text-field> 294 ></v-text-field>
295 <v-icon @click="closeSearch" color="error">close</v-icon> 295 <v-icon @click="closeSearch" color="error">close</v-icon>
296 </v-layout> 296 </v-layout>
297 </v-flex> 297 </v-flex>
298 </v-toolbar> 298 </v-toolbar>
299 <v-data-table 299 <v-data-table
300 :headers="headers" 300 :headers="headers"
301 :items="subjectList.subjects" 301 :items="subjectList.subjects"
302 :pagination.sync="pagination" 302 :pagination.sync="pagination"
303 :search="search" 303 :search="search"
304 > 304 >
305 <template slot="items" slot-scope="props"> 305 <template slot="items" slot-scope="props">
306 <tr class="tr"> 306 <tr class="tr">
307 <td class="td-row td">{{ props.index + 1 }}</td> 307 <td class="td-row td">{{ props.index + 1 }}</td>
308 <td class="text-xs-center td td-row">{{ props.item.subjectName }}</td> 308 <td class="text-xs-center td td-row">{{ props.item.subjectName }}</td>
309 <td class="text-xs-center td td-row">{{ props.item.subjectAuthor }}</td> 309 <td class="text-xs-center td td-row">{{ props.item.subjectAuthor }}</td>
310 <td class="text-xs-center td td-row">{{ props.item.subjectCode }}</td> 310 <td class="text-xs-center td td-row">{{ props.item.subjectCode }}</td>
311 <!-- <td class="text-xs-center td td-row">{{ props.item.teacherId }}</td> --> 311 <!-- <td class="text-xs-center td td-row">{{ props.item.teacherId }}</td> -->
312 <td class="text-xs-center td td-row">{{ props.item.passMarks }}</td> 312 <td class="text-xs-center td td-row">{{ props.item.passMarks }}</td>
313 <td class="text-xs-center td td-row">{{ props.item.finalMarks }}</td> 313 <td class="text-xs-center td td-row">{{ props.item.finalMarks }}</td>
314 <td class="text-xs-center td td-row">{{ props.item.type }}</td> 314 <td class="text-xs-center td td-row">{{ props.item.type }}</td>
315 315
316 <!-- <td class="text-xs-center td td-row"> 316 <!-- <td class="text-xs-center td td-row">
317 <span> 317 <span>
318 <v-tooltip top> 318 <v-tooltip top>
319 <img 319 <img
320 slot="activator" 320 slot="activator"
321 style="cursor:pointer; width:25px; height:25px; " 321 style="cursor:pointer; width:25px; height:25px; "
322 class="mr-3" 322 class="mr-3"
323 @click="profile(props.item)" 323 @click="profile(props.item)"
324 src="/static/icon/view.png" 324 src="/static/icon/view.png"
325 /> 325 />
326 <span>View</span> 326 <span>View</span>
327 </v-tooltip> 327 </v-tooltip>
328 <v-tooltip top> 328 <v-tooltip top>
329 <img 329 <img
330 slot="activator" 330 slot="activator"
331 style="cursor:pointer; width:20px; height:18px; " 331 style="cursor:pointer; width:20px; height:18px; "
332 class="mr-3" 332 class="mr-3"
333 @click="editItem(props.item)" 333 @click="editItem(props.item)"
334 src="/static/icon/edit.png" 334 src="/static/icon/edit.png"
335 /> 335 />
336 <span>Edit</span> 336 <span>Edit</span>
337 </v-tooltip> 337 </v-tooltip>
338 <v-tooltip top> 338 <v-tooltip top>
339 <img 339 <img
340 slot="activator" 340 slot="activator"
341 style="cursor:pointer; width:20px; height:20px; " 341 style="cursor:pointer; width:20px; height:20px; "
342 class="mr-3" 342 class="mr-3"
343 @click="deleteItem(props.item)" 343 @click="deleteItem(props.item)"
344 src="/static/icon/delete.png" 344 src="/static/icon/delete.png"
345 /> 345 />
346 <span>Delete</span> 346 <span>Delete</span>
347 </v-tooltip> 347 </v-tooltip>
348 </span> 348 </span>
349 </td>--> 349 </td>-->
350 </tr> 350 </tr>
351 </template> 351 </template>
352 <v-alert 352 <v-alert
353 slot="no-results" 353 slot="no-results"
354 :value="true" 354 :value="true"
355 color="error" 355 color="error"
356 icon="warning" 356 icon="warning"
357 >Your search for "{{ search }}" found no results.</v-alert> 357 >Your search for "{{ search }}" found no results.</v-alert>
358 </v-data-table> 358 </v-data-table>
359 <!-- ****** ADD MULTIPLE Subject ****** --> 359 <!-- ****** ADD MULTIPLE Subject ****** -->
360 <v-snackbar 360 <v-snackbar
361 :timeout="timeout" 361 :timeout="timeout"
362 :top="y === 'top'" 362 :top="y === 'top'"
363 :right="x === 'right'" 363 :right="x === 'right'"
364 :vertical="mode === 'vertical'" 364 :vertical="mode === 'vertical'"
365 v-model="snackbar" 365 v-model="snackbar"
366 :color="color" 366 :color="color"
367 >{{ text }}</v-snackbar> 367 >{{ text }}</v-snackbar>
368 <v-dialog v-model="addSubjectDialog" max-width="600px" v-if="addSubjectDialog" persistent> 368 <v-dialog v-model="addSubjectDialog" max-width="600px" v-if="addSubjectDialog" persistent>
369 <v-card flat class="card-style pa-2" dark> 369 <v-card flat class="card-style pa-2" dark>
370 <v-layout> 370 <v-layout>
371 <v-flex xs12> 371 <v-flex xs12>
372 <label class="title text-xs-center">Add Subject</label> 372 <label class="title text-xs-center">Add Subject</label>
373 <v-icon 373 <v-icon
374 size="24" 374 size="24"
375 class="right" 375 class="right"
376 @click="$refs.form.reset();addSubjectDialog = false" 376 @click="$refs.form.reset();addSubjectDialog = false"
377 >cancel</v-icon> 377 >cancel</v-icon>
378 </v-flex> 378 </v-flex>
379 </v-layout> 379 </v-layout>
380 <v-container fluid fill-height> 380 <v-container fluid fill-height>
381 <v-layout align-center> 381 <v-layout align-center>
382 <v-flex xs12> 382 <v-flex xs12>
383 <v-form ref="form" v-model="valid" lazy-validation> 383 <v-form ref="form" v-model="valid" lazy-validation>
384 <v-layout> 384 <v-layout>
385 <v-flex xs4 sm4 class="pt-4 subheading"> 385 <v-flex xs4 sm4 class="pt-4 subheading">
386 <label class="right">Class Name :</label> 386 <label class="right">Class Name :</label>
387 </v-flex> 387 </v-flex>
388 <v-flex xs8 sm8 class="ml-3"> 388 <v-flex xs8 sm8 class="ml-3">
389 <v-select 389 <v-select
390 v-model="addSubject.classId" 390 v-model="addSubject.classId"
391 label="Select your class" 391 label="Select your class"
392 type="text" 392 type="text"
393 :items="classList" 393 :items="classList"
394 item-text="classNum" 394 item-text="classNum"
395 item-value="_id" 395 item-value="_id"
396 :rules="classRules" 396 :rules="classRules"
397 required 397 required
398 ></v-select> 398 ></v-select>
399 </v-flex> 399 </v-flex>
400 </v-layout> 400 </v-layout>
401 <v-layout> 401 <v-layout>
402 <v-flex xs4 sm4 class="pt-4 subheading"> 402 <v-flex xs4 sm4 class="pt-4 subheading">
403 <label class="right">Teacher Name :</label> 403 <label class="right">Teacher Name :</label>
404 </v-flex> 404 </v-flex>
405 <v-flex xs8 sm8 class="ml-3"> 405 <v-flex xs8 sm8 class="ml-3">
406 <v-select 406 <v-select
407 v-model="addSubject.teacherId" 407 v-model="addSubject.teacherId"
408 label="Select your teacher" 408 label="Select your teacher"
409 type="text" 409 type="text"
410 :items="teacherList" 410 :items="teacherList"
411 item-text="name" 411 item-text="name"
412 item-value="_id" 412 item-value="_id"
413 :rules="teacherRules" 413 :rules="teacherRules"
414 required 414 required
415 ></v-select> 415 ></v-select>
416 </v-flex> 416 </v-flex>
417 </v-layout> 417 </v-layout>
418 <v-layout> 418 <v-layout>
419 <v-flex xs4 sm4 class="pt-4 sybheading"> 419 <v-flex xs4 sm4 class="pt-4 sybheading">
420 <label class="right">Type :</label> 420 <label class="right">Type :</label>
421 </v-flex> 421 </v-flex>
422 <v-flex xs8 sm8 class="ml-3"> 422 <v-flex xs8 sm8 class="ml-3">
423 <v-select 423 <v-select
424 v-model="addSubject.type" 424 v-model="addSubject.type"
425 :items="type" 425 :items="type"
426 label="Select your Type" 426 label="Select your Type"
427 :rules="typeRules" 427 :rules="typeRules"
428 required 428 required
429 ></v-select> 429 ></v-select>
430 </v-flex> 430 </v-flex>
431 </v-layout> 431 </v-layout>
432 <v-layout> 432 <v-layout>
433 <v-flex xs4 sm4 class="pt-4 subheading"> 433 <v-flex xs4 sm4 class="pt-4 subheading">
434 <label class="right">Pass Mark :</label> 434 <label class="right">Pass Mark :</label>
435 </v-flex> 435 </v-flex>
436 <v-flex xs8 sm8 class="ml-3"> 436 <v-flex xs8 sm8 class="ml-3">
437 <v-text-field 437 <v-text-field
438 label="Fill your Pass Mark" 438 label="Fill your Pass Mark"
439 name="name" 439 name="name"
440 type="text" 440 type="text"
441 :rules="markRules" 441 :rules="markRules"
442 v-model="addSubject.passMarks" 442 v-model="addSubject.passMarks"
443 required 443 required
444 ></v-text-field> 444 ></v-text-field>
445 </v-flex> 445 </v-flex>
446 </v-layout> 446 </v-layout>
447 <v-layout> 447 <v-layout>
448 <v-flex xs4 sm4 class="pt-4 subheading"> 448 <v-flex xs4 sm4 class="pt-4 subheading">
449 <label class="right">Final Mark :</label> 449 <label class="right">Final Mark :</label>
450 </v-flex> 450 </v-flex>
451 <v-flex xs8 sm8 class="ml-3"> 451 <v-flex xs8 sm8 class="ml-3">
452 <v-text-field 452 <v-text-field
453 label="Fill your final mark" 453 label="Fill your final mark"
454 name="name" 454 name="name"
455 type="text" 455 type="text"
456 :rules="finalRules" 456 :rules="finalRules"
457 v-model="addSubject.finalMarks" 457 v-model="addSubject.finalMarks"
458 required 458 required
459 ></v-text-field> 459 ></v-text-field>
460 </v-flex> 460 </v-flex>
461 </v-layout> 461 </v-layout>
462 <v-layout> 462 <v-layout>
463 <v-flex xs4 sm4 class="pt-4 subheading"> 463 <v-flex xs4 sm4 class="pt-4 subheading">
464 <label class="right">Subject :</label> 464 <label class="right">Subject :</label>
465 </v-flex> 465 </v-flex>
466 <v-flex xs8 sm8 class="ml-3"> 466 <v-flex xs8 sm8 class="ml-3">
467 <v-text-field 467 <v-text-field
468 v-model="addSubject.subjectName" 468 v-model="addSubject.subjectName"
469 placeholder="fill your Subject Name" 469 placeholder="fill your Subject Name"
470 name="name" 470 name="name"
471 type="text" 471 type="text"
472 :rules="subjectRules" 472 :rules="subjectRules"
473 required 473 required
474 ></v-text-field> 474 ></v-text-field>
475 </v-flex> 475 </v-flex>
476 </v-layout> 476 </v-layout>
477 <v-layout> 477 <v-layout>
478 <v-flex xs4 sm4 class="pt-4 subheading"> 478 <v-flex xs4 sm4 class="pt-4 subheading">
479 <label class="right">Subject Author :</label> 479 <label class="right">Subject Author :</label>
480 </v-flex> 480 </v-flex>
481 <v-flex xs8 sm8 class="ml-3"> 481 <v-flex xs8 sm8 class="ml-3">
482 <v-text-field 482 <v-text-field
483 v-model="addSubject.subjectAuthor" 483 v-model="addSubject.subjectAuthor"
484 placeholder="fill your Subject Author" 484 placeholder="fill your Subject Author"
485 name="name" 485 name="name"
486 type="text" 486 type="text"
487 ></v-text-field> 487 ></v-text-field>
488 </v-flex> 488 </v-flex>
489 </v-layout> 489 </v-layout>
490 <v-layout> 490 <v-layout>
491 <v-flex xs4 sm4 class="pt-4 subheading"> 491 <v-flex xs4 sm4 class="pt-4 subheading">
492 <label class="right">Subject Code:</label> 492 <label class="right">Subject Code:</label>
493 </v-flex> 493 </v-flex>
494 <v-flex xs8 sm8 class="ml-3"> 494 <v-flex xs8 sm8 class="ml-3">
495 <v-text-field 495 <v-text-field
496 v-model="addSubject.subjectCode" 496 v-model="addSubject.subjectCode"
497 placeholder="fill your Subject Code" 497 placeholder="fill your Subject Code"
498 name="name" 498 name="name"
499 type="text" 499 type="text"
500 ></v-text-field> 500 ></v-text-field>
501 </v-flex> 501 </v-flex>
502 </v-layout> 502 </v-layout>
503 <v-layout> 503 <v-layout>
504 <v-flex xs12 sm12> 504 <v-flex xs12 sm12>
505 <v-card-actions> 505 <v-card-actions>
506 <v-spacer></v-spacer> 506 <v-spacer></v-spacer>
507 <v-btn 507 <v-btn
508 @click="submit" 508 @click="submit"
509 round 509 round
510 dark 510 dark
511 :loading="addLoading" 511 :loading="addLoading"
512 class="add-button" 512 class="add-button"
513 >Add Subject</v-btn> 513 >Add Subject</v-btn>
514 </v-card-actions> 514 </v-card-actions>
515 </v-flex> 515 </v-flex>
516 </v-layout> 516 </v-layout>
517 </v-form> 517 </v-form>
518 </v-flex> 518 </v-flex>
519 </v-layout> 519 </v-layout>
520 </v-container> 520 </v-container>
521 </v-card> 521 </v-card>
522 </v-dialog> 522 </v-dialog>
523 <div class="loader" v-if="showLoader"> 523 <div class="loader" v-if="showLoader">
524 <v-progress-circular indeterminate color="white"></v-progress-circular> 524 <v-progress-circular indeterminate color="white"></v-progress-circular>
525 </div> 525 </div>
526 </v-container> 526 </v-container>
527 </template> 527 </template>
528 528
529 <script> 529 <script>
530 import http from "@/Services/http.js"; 530 import http from "@/Services/http.js";
531 import Util from "@/util"; 531 import Util from "@/util";
532 532
533 export default { 533 export default {
534 data: () => ({ 534 data: () => ({
535 snackbar: false, 535 snackbar: false,
536 y: "top", 536 y: "top",
537 x: "right", 537 x: "right",
538 role: "", 538 role: "",
539 mode: "", 539 mode: "",
540 timeout: 3000, 540 timeout: 3000,
541 text: "", 541 text: "",
542 color: "", 542 color: "",
543 show: true, 543 show: true,
544 showSearch: false, 544 showSearch: false,
545 showLoader: false, 545 showLoader: false,
546 loading: false, 546 loading: false,
547 editLoading: false, 547 editLoading: false,
548 addLoading: false, 548 addLoading: false,
549 date: null, 549 date: null,
550 search: "", 550 search: "",
551 viewSubjectDialog: false, 551 viewSubjectDialog: false,
552 editSubjectDialog: false, 552 editSubjectDialog: false,
553 valid: true, 553 valid: true,
554 validEditSubject: true, 554 validEditSubject: true,
555 addSubjectDialog: false, 555 addSubjectDialog: false,
556 // isActive: true, 556 // isActive: true,
557 // newActive: false, 557 // newActive: false,
558 type: ["Optional", "Mandatory"], 558 type: ["Optional", "Mandatory"],
559 pagination: { 559 pagination: {
560 rowsPerPage: 10, 560 rowsPerPage: 10,
561 }, 561 },
562 token: "", 562 token: "",
563 classRules: [(v) => !!v || " Class Name is required"], 563 classRules: [(v) => !!v || " Class Name is required"],
564 teacherRules: [(v) => !!v || " Teacher Name is required"], 564 teacherRules: [(v) => !!v || " Teacher Name is required"],
565 typeRules: [(v) => !!v || "Type is required"], 565 typeRules: [(v) => !!v || "Type is required"],
566 markRules: [(v) => !!v || " Pass Mark is required"], 566 markRules: [(v) => !!v || " Pass Mark is required"],
567 finalRules: [(v) => !!v || "Final MArk is required"], 567 finalRules: [(v) => !!v || "Final MArk is required"],
568 subjectRules: [(v) => !!v || " Subject Name is required"], 568 subjectRules: [(v) => !!v || " Subject Name is required"],
569 headers: [ 569 headers: [
570 { 570 {
571 text: "No", 571 text: "No",
572 align: "", 572 align: "",
573 sortable: false, 573 sortable: false,
574 value: "No", 574 value: "No",
575 }, 575 },
576 { 576 {
577 text: "Subject Name", 577 text: "Subject Name",
578 value: "subjectName", 578 value: "subjectName",
579 sortable: false, 579 sortable: false,
580 align: "center", 580 align: "center",
581 }, 581 },
582 { 582 {
583 text: "Subject Author", 583 text: "Subject Author",
584 value: "subjectAuthor", 584 value: "subjectAuthor",
585 sortable: false, 585 sortable: false,
586 align: "center", 586 align: "center",
587 }, 587 },
588 { 588 {
589 text: "Subject Code", 589 text: "Subject Code",
590 value: "subjectCode", 590 value: "subjectCode",
591 sortable: false, 591 sortable: false,
592 align: "center", 592 align: "center",
593 }, 593 },
594 // { 594 // {
595 // text: "Teacher", 595 // text: "Teacher",
596 // value: "teacherId", 596 // value: "teacherId",
597 // sortable: false, 597 // sortable: false,
598 // align: "center" 598 // align: "center"
599 // }, 599 // },
600 { 600 {
601 text: "Pass Marks", 601 text: "Pass Marks",
602 value: "passMarks", 602 value: "passMarks",
603 sortable: false, 603 sortable: false,
604 align: "center", 604 align: "center",
605 }, 605 },
606 { 606 {
607 text: "Final Marks", 607 text: "Final Marks",
608 value: "finalMarks", 608 value: "finalMarks",
609 sortable: false, 609 sortable: false,
610 align: "center", 610 align: "center",
611 }, 611 },
612 { 612 {
613 text: "Type", 613 text: "Type",
614 value: "type", 614 value: "type",
615 sortable: false, 615 sortable: false,
616 align: "center", 616 align: "center",
617 }, 617 },
618 // { text: "Action", value: "", sortable: false, align: "center" } 618 // { text: "Action", value: "", sortable: false, align: "center" }
619 ], 619 ],
620 subjectList: [], 620 subjectList: [],
621 classList: [], 621 classList: [],
622 teacherList: [], 622 teacherList: [],
623 editedIndex: -1, 623 editedIndex: -1,
624 addSubject: {}, 624 addSubject: {},
625 getSubject: {}, 625 getSubject: {},
626 626
627 editedItem: { 627 editedItem: {
628 // subjectName: "", 628 // subjectName: "",
629 // subjectAuthor: "" 629 // subjectAuthor: ""
630 }, 630 },
631 }), 631 }),
632 watch: { 632 watch: {
633 addSubjectDialog: function (val) { 633 addSubjectDialog: function (val) {
634 if (!val) { 634 if (!val) {
635 // this.addSubject = []; 635 // this.addSubject = [];
636 } 636 }
637 }, 637 },
638 }, 638 },
639 methods: { 639 methods: {
640 pickFile() { 640 pickFile() {
641 this.$refs.image.click(); 641 this.$refs.image.click();
642 }, 642 },
643 editItem(item) { 643 editItem(item) {
644 this.editedIndex = this.subjectList.subjects; 644 this.editedIndex = this.subjectList.subjects;
645 this.editedItem = Object.assign({}, item); 645 this.editedItem = Object.assign({}, item);
646 this.dialog = true; 646 this.dialog = true;
647 this.editSubjectDialog = true; 647 this.editSubjectDialog = true;
648 }, 648 },
649 profile(item) { 649 profile(item) {
650 this.editedIndex = this.subjectList.subjects; 650 this.editedIndex = this.subjectList.subjects;
651 this.editedItem = Object.assign({}, item); 651 this.editedItem = Object.assign({}, item);
652 this.dialog1 = true; 652 this.dialog1 = true;
653 this.viewSubjectDialog = true; 653 this.viewSubjectDialog = true;
654 }, 654 },
655 deleteItem(item) { 655 deleteItem(item) {
656 let deleteSubject = { 656 let deleteSubject = {
657 classId: this.addSubject.classId, 657 classId: this.addSubject.classId,
658 subjectId: item._id, 658 subjectId: item._id,
659 }; 659 };
660 http() 660 http()
661 .delete( 661 .delete(
662 "/deleteSubject", 662 "/deleteSubject",
663 confirm("Are you sure you want to delete this?") && { 663 confirm("Are you sure you want to delete this?") && {
664 params: deleteSubject, 664 params: deleteSubject,
665 } 665 }
666 ) 666 )
667 .then((response) => { 667 .then((response) => {
668 this.snackbar = true; 668 this.snackbar = true;
669 this.color = "green"; 669 this.color = "green";
670 this.text = "Successfully delete Existing Subject"; 670 this.text = "Successfully delete Existing Subject";
671 this.getClassSubject(this.addSubject.classId); 671 this.getClassSubject(this.addSubject.classId);
672 }) 672 })
673 .catch((error) => { 673 .catch((error) => {
674 // this.snackbar = true; 674 // this.snackbar = true;
675 // this.text = error.response.data.message; 675 // this.text = error.response.data.message;
676 // this.color = "error"; 676 // this.color = "error";
677 console.log("error", error); 677 console.log("error", error);
678 }); 678 });
679 }, 679 },
680 close() { 680 close() {
681 this.editSubjectDialog = false; 681 this.editSubjectDialog = false;
682 }, 682 },
683 close1() { 683 close1() {
684 this.viewSubjectDialog = false; 684 this.viewSubjectDialog = false;
685 }, 685 },
686 submit() { 686 submit() {
687 if (this.$refs.form.validate()) { 687 if (this.$refs.form.validate()) {
688 this.addLoading = true; 688 this.addLoading = true;
689 http() 689 http()
690 .post("/addSubject", this.addSubject) 690 .post("/addSubject", this.addSubject)
691 .then((response) => { 691 .then((response) => {
692 this.snackbar = true; 692 this.snackbar = true;
693 this.text = "New Subject added successfully"; 693 this.text = "New Subject added successfully";
694 this.color = "green"; 694 this.color = "green";
695 this.addLoading = false; 695 this.addLoading = false;
696 this.$refs.form.reset(); 696 this.$refs.form.reset();
697 this.addSubjectDialog = false; 697 this.addSubjectDialog = false;
698 this.getClassSubject(_id); 698 this.getClassSubject(_id);
699 }) 699 })
700 .catch((error) => { 700 .catch((error) => {
701 this.addLoading = false; 701 this.addLoading = false;
702 }); 702 });
703 } 703 }
704 }, 704 },
705 clear() { 705 clear() {
706 this.$refs.form.reset(); 706 this.$refs.form.reset();
707 }, 707 },
708 save() { 708 save() {
709 if (this.$refs.formEditSubject.validate()) { 709 if (this.$refs.formEditSubject.validate()) {
710 let editSubject = { 710 let editSubject = {
711 classId: this.editedItem.classId, 711 classId: this.editedItem.classId,
712 subjectId: this.editedItem._id, 712 subjectId: this.editedItem._id,
713 teacherId: this.editedItem.teacherId, 713 teacherId: this.editedItem.teacherId,
714 type: this.editedItem.type, 714 type: this.editedItem.type,
715 passMarks: this.editedItem.passMarks, 715 passMarks: this.editedItem.passMarks,
716 finalMarks: this.editedItem.finalMarks, 716 finalMarks: this.editedItem.finalMarks,
717 subjectAuthor: this.editedItem.subjectAuthor, 717 subjectAuthor: this.editedItem.subjectAuthor,
718 subjectCode: this.editedItem.subjectCode, 718 subjectCode: this.editedItem.subjectCode,
719 subjectName: this.editedItem.subjectName, 719 subjectName: this.editedItem.subjectName,
720 }; 720 };
721 this.editLoading = true; 721 this.editLoading = true;
722 http() 722 http()
723 .put("/updateSubject", editSubject) 723 .put("/updateSubject", editSubject)
724 .then((response) => { 724 .then((response) => {
725 this.snackbar = true; 725 this.snackbar = true;
726 this.text = "Successfully Edit Existing Subject"; 726 this.text = "Successfully Edit Existing Subject";
727 this.color = "green"; 727 this.color = "green";
728 this.editLoading = false; 728 this.editLoading = false;
729 this.editSubjectDialog = false; 729 this.editSubjectDialog = false;
730 this.getClassSubject(this.editedItem.classId); 730 this.getClassSubject(this.editedItem.classId);
731 }) 731 })
732 .catch((error) => { 732 .catch((error) => {
733 this.editLoading = false; 733 this.editLoading = false;
734 734
735 // console.log(error); 735 // console.log(error);
736 }); 736 });
737 } 737 }
738 }, 738 },
739 getClassSubject(_id) { 739 getClassSubject(_id) {
740 this.showLoader = true; 740 this.showLoader = true;
741 console.log("class", _id); 741 console.log("class", _id);
742 // this.classId = this.classId; 742 // this.classId = this.classId;
743 http() 743 http()
744 .get( 744 .get(
745 "/getParticularClass", 745 "/getParticularClass",
746 { params: { classId: _id } }, 746 { params: { classId: _id } },
747 { 747 {
748 headers: { Authorization: "Bearer " + this.token }, 748 headers: { Authorization: "Bearer " + this.token },
749 } 749 }
750 ) 750 )
751 .then((response) => { 751 .then((response) => {
752 this.subjectList = response.data.data; 752 this.subjectList = response.data.data;
753 this.showLoader = false; 753 this.showLoader = false;
754 }) 754 })
755 .catch((err) => { 755 .catch((err) => {
756 this.showLoader = false; 756 this.showLoader = false;
757 }); 757 });
758 }, 758 },
759 getClass() { 759 getClass() {
760 http() 760 http()
761 .get("/getClassesList", { 761 .get("/getClassesList", {
762 headers: { Authorization: "Bearer " + this.token }, 762 headers: { Authorization: "Bearer " + this.token },
763 }) 763 })
764 .then((response) => { 764 .then((response) => {
765 this.classList = response.data.data; 765 this.classList = response.data.data;
766 }) 766 })
767 .catch((error) => { 767 .catch((error) => {
768 if (error.response.status === 401) { 768 if (error.response.status === 401) {
769 this.$router.replace({ path: "/" }); 769 this.$router.replace({ path: "/" });
770 this.$store.dispatch("setToken", null); 770 this.$store.dispatch("setToken", null);
771 this.$store.dispatch("Id", null); 771 this.$store.dispatch("Id", null);
772 } 772 }
773 }); 773 });
774 }, 774 },
775 getTeacherList() { 775 getTeacherList() {
776 this.showLoader = true; 776 this.showLoader = true;
777 var token = this.$store.state.token; 777 var token = this.$store.state.token;
778 http() 778 http()
779 .get("/getTeachersList", { 779 .get("/getTeachersList", {
780 headers: { Authorization: "Bearer " + token }, 780 headers: { Authorization: "Bearer " + token },
781 }) 781 })
782 .then((response) => { 782 .then((response) => {
783 this.teacherList = response.data.data; 783 this.teacherList = response.data.data;
784 this.showLoader = false; 784 this.showLoader = false;
785 // console.log("getTeacherList=====>",this.desserts) 785 // console.log("getTeacherList=====>",this.desserts)
786 }) 786 })
787 .catch((error) => { 787 .catch((error) => {
788 this.showLoader = false; 788 this.showLoader = false;
789 if (error.response.status === 401) { 789 if (error.response.status === 401) {
790 this.$router.replace({ path: "/" }); 790 this.$router.replace({ path: "/" });
791 this.$store.dispatch("setToken", null); 791 this.$store.dispatch("setToken", null);
792 this.$store.dispatch("Id", null); 792 this.$store.dispatch("Id", null);
793 } 793 }
794 }); 794 });
795 }, 795 },
796 displaySearch() { 796 displaySearch() {
797 (this.show = false), (this.showSearch = true); 797 (this.show = false), (this.showSearch = true);
798 }, 798 },
799 closeSearch() { 799 closeSearch() {
800 this.showSearch = false; 800 this.showSearch = false;
801 this.show = true; 801 this.show = true;
802 this.search = ""; 802 this.search = "";
803 }, 803 },
804 }, 804 },
805 mounted() { 805 mounted() {
806 this.token = this.$store.state.token; 806 this.token = this.$store.state.token;
807 // this.getNoticeDataList(); 807 // this.getNoticeDataList();
808 this.getClass(); 808 this.getClass();
809 this.getTeacherList(); 809 this.getTeacherList();
810 this.role = this.$store.state.role; 810 this.role = this.$store.state.role;
811 }, 811 },
812 }; 812 };
813 </script> 813 </script>
src/pages/AssignTeachers.vue
Diff comments   View file @4fb0af7
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- LOADER --> 3 <!-- LOADER -->
4 <div class="loader" v-if="showLoader"> 4 <div class="loader" v-if="showLoader">
5 <v-progress-circular indeterminate color="white"></v-progress-circular> 5 <v-progress-circular indeterminate color="white"></v-progress-circular>
6 </div> 6 </div>
7 7
8 <!-- SNACKBAR --> 8 <!-- SNACKBAR -->
9 <!-- <v-snackbar 9 <!-- <v-snackbar
10 :timeout="timeout" 10 :timeout="timeout"
11 :top="y === 'top'" 11 :top="y === 'top'"
12 :right="x === 'right'" 12 :right="x === 'right'"
13 :vertical="mode === 'vertical'" 13 :vertical="mode === 'vertical'"
14 v-model="snackbar" 14 v-model="snackbar"
15 :color="snackbarColor" 15 :color="snackbarColor"
16 > 16 >
17 {{ text }} 17 {{ text }}
18 <v-spacer></v-spacer> 18 <v-spacer></v-spacer>
19 <v-btn flat text @click="snackbar = false">X</v-btn> 19 <v-btn flat text @click="snackbar = false">X</v-btn>
20 </v-snackbar>--> 20 </v-snackbar>-->
21 21
22 <!-- DIALOG ENROLL TEACHER --> 22 <!-- DIALOG ENROLL TEACHER -->
23 <v-dialog v-model="dialogEnrollTeacher" max-width="600px" scrollable persistent> 23 <v-dialog v-model="dialogEnrollTeacher" max-width="600px" scrollable persistent>
24 <v-card flat class="card-style pa-3" dark> 24 <v-card flat class="card-style pa-3" dark>
25 <v-layout> 25 <v-layout>
26 <v-flex xs12> 26 <v-flex xs12>
27 <label class="title text-xs-center">View Course</label> 27 <label class="title text-xs-center">View Course</label>
28 <v-icon size="24" class="right" @click="profileStudentDialog = false">cancel</v-icon> 28 <v-icon size="24" class="right" @click="profileStudentDialog = false">cancel</v-icon>
29 </v-flex> 29 </v-flex>
30 </v-layout> 30 </v-layout>
31 <v-card-text> 31 <v-card-text>
32 <v-flex align-center justify-center layout text-xs-center class="mt-3"> 32 <v-flex align-center justify-center layout text-xs-center class="mt-3">
33 <v-avatar size="100px"> 33 <v-avatar size="100px">
34 <img src="/static/icon/user.png" v-if="!editedItem.courseImageUrl" /> 34 <img src="/static/icon/user.png" v-if="!editedItem.courseImageUrl" />
35 <img :src="editedItem.courseImageUrl" v-else-if="editedItem.courseImageUrl" /> 35 <img :src="editedItem.courseImageUrl" v-else-if="editedItem.courseImageUrl" />
36 </v-avatar> 36 </v-avatar>
37 </v-flex> 37 </v-flex>
38 <v-container grid-list-md> 38 <v-container grid-list-md>
39 <v-layout wrap> 39 <v-layout wrap>
40 <v-flex xs12> 40 <v-flex xs12>
41 <v-layout> 41 <v-layout>
42 <v-flex xs6 sm6> 42 <v-flex xs6 sm6>
43 <h5 class="right my-1"> 43 <h5 class="right my-1">
44 <b>Course :</b> 44 <b>Course :</b>
45 </h5> 45 </h5>
46 </v-flex> 46 </v-flex>
47 <v-flex sm6 xs6> 47 <v-flex sm6 xs6>
48 <h5 class="my-1 left">{{ editedItem.courseName }}</h5> 48 <h5 class="my-1 left">{{ editedItem.courseName }}</h5>
49 </v-flex> 49 </v-flex>
50 </v-layout> 50 </v-layout>
51 </v-flex> 51 </v-flex>
52 </v-layout> 52 </v-layout>
53 </v-container> 53 </v-container>
54 </v-card-text> 54 </v-card-text>
55 </v-card> 55 </v-card>
56 </v-dialog> 56 </v-dialog>
57 57
58 <v-toolbar color="transparent" flat> 58 <v-toolbar color="transparent" flat>
59 <v-spacer></v-spacer> 59 <v-spacer></v-spacer>
60 <v-flex xs12 sm4 md2> 60 <v-flex xs12 sm4 md2>
61 <v-select 61 <v-select
62 small 62 small
63 :items="classesList" 63 :items="classesList"
64 label="Select Class" 64 label="Select Class"
65 v-model="getReport.classId" 65 v-model="getReport.classId"
66 item-text="classNum" 66 item-text="classNum"
67 item-value="_id" 67 item-value="_id"
68 name="Select Class" 68 name="Select Class"
69 @change="getCourses(getReport.classId)" 69 @change="getCourses(getReport.classId)"
70 class="mr-2" 70 class="mr-2"
71 required 71 required
72 ></v-select> 72 ></v-select>
73 </v-flex> 73 </v-flex>
74 <v-flex xs12 sm4 md2> 74 <v-flex xs12 sm4 md2>
75 <v-select 75 <v-select
76 :items="courseData" 76 :items="courseData"
77 label="Select Course" 77 label="Select Course"
78 v-model="getReport.courseId" 78 v-model="getReport.courseId"
79 item-text="courseName" 79 item-text="courseName"
80 item-value="_id" 80 item-value="_id"
81 required 81 required
82 class="ml-2" 82 class="ml-2"
83 @change=" getTeacherTable(getReport.classId)" 83 @change=" getTeacherTable(getReport.classId)"
84 ></v-select> 84 ></v-select>
85 </v-flex> 85 </v-flex>
86 </v-toolbar>
87
88 <!-- LIST OF TEACHERS -->
89 <v-data-table
90 :headers="headers"
91 :items="teachersList" 86 </v-toolbar>
92 :pagination.sync="pagination" 87
93 :search="search" 88 <!-- LIST OF TEACHERS -->
94 select-all 89 <v-data-table
95 v-model="selected" 90 :headers="headers"
96 item-key="_id" 91 :items="teachersList"
97 > 92 :pagination.sync="pagination"
98 <template slot="items" slot-scope="props"> 93 :search="search"
99 <tr class="tr" :active="props.selected" @click="props.selected = !props.selected"> 94 select-all
100 <td class="text-xs-center td td-row"> 95 v-model="selected"
101 <v-checkbox 96 item-key="_id"
102 v-model="props.item.enroll" 97 >
103 @change="enrollTeacher(props.item)" 98 <template slot="items" slot-scope="props">
104 primary 99 <tr class="tr" :active="props.selected" @click="props.selected = !props.selected">
105 hide-details 100 <td class="text-xs-center td td-row">
106 ></v-checkbox> 101 <v-checkbox
107 </td> 102 v-model="props.item.enroll"
108 103 @change="enrollTeacher(props.item)"
109 <td class="text-xs-center td td-row">{{ props.item.name}}</td> 104 primary
110 <td class="text-xs-center td td-row">{{ props.item.email }}</td> 105 hide-details
111 </tr> 106 ></v-checkbox>
112 </template> 107 </td>
113 <template slot="headers" slot-scope="props"> 108
114 <tr> 109 <td class="text-xs-center td td-row">{{ props.item.name}}</td>
115 <th> 110 <td class="text-xs-center td td-row">{{ props.item.email }}</td>
116 <!-- <v-checkbox 111 </tr>
117 :input-value="props.all" 112 </template>
118 :indeterminate="props.indeterminate" 113 <template slot="headers" slot-scope="props">
119 primary 114 <tr>
120 hide-details 115 <th>
121 @click.native="toggleAll" 116 <!-- <v-checkbox
122 ></v-checkbox>--> 117 :input-value="props.all"
123 </th> 118 :indeterminate="props.indeterminate"
124 <th 119 primary
125 v-for="header in props.headers" 120 hide-details
126 :key="header.text" 121 @click.native="toggleAll"
127 :class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination.sortBy ? 'active' : '']" 122 ></v-checkbox>-->
128 @click="changeSort(header.value)" 123 </th>
129 > 124 <th
130 <v-icon small>arrow_upward</v-icon> 125 v-for="header in props.headers"
131 {{ header.text }} 126 :key="header.text"
132 </th> 127 :class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination.sortBy ? 'active' : '']"
133 </tr> 128 @click="changeSort(header.value)"
134 </template> 129 >
135 <v-alert 130 <v-icon small>arrow_upward</v-icon>
136 slot="no-results" 131 {{ header.text }}
137 :value="true" 132 </th>
138 color="error" 133 </tr>
139 icon="warning" 134 </template>
140 >Your search for "{{ search }}" found no results.</v-alert> 135 <v-alert
141 </v-data-table> 136 slot="no-results"
142 137 :value="true"
143 <v-snackbar 138 color="error"
144 :timeout="timeout" 139 icon="warning"
145 :top="y === 'top'" 140 >Your search for "{{ search }}" found no results.</v-alert>
146 :right="x === 'right'" 141 </v-data-table>
147 :vertical="mode === 'vertical'" 142
148 v-model="snackbar" 143 <v-snackbar
149 :color="color" 144 :timeout="timeout"
150 >{{ text }}</v-snackbar> 145 :top="y === 'top'"
151 <div class="loader" v-if="showLoader"> 146 :right="x === 'right'"
152 <v-progress-circular indeterminate color="white"></v-progress-circular> 147 :vertical="mode === 'vertical'"
153 </div> 148 v-model="snackbar"
154 </v-container> 149 :color="color"
155 </template> 150 >{{ text }}</v-snackbar>
156 151 <div class="loader" v-if="showLoader">
157 <script> 152 <v-progress-circular indeterminate color="white"></v-progress-circular>
158 import http from "@/Services/http.js"; 153 </div>
159 import moment from "moment"; 154 </v-container>
160 import countryList from "@/script/country.js"; 155 </template>
161 import parent from "@/script/parents.js"; 156
162 import AllApicalls from "@/Services/AllApiCalls.js"; 157 <script>
163 158 import http from "@/Services/http.js";
164 export default { 159 import moment from "moment";
165 mixins: [AllApicalls], 160 import countryList from "@/script/country.js";
166 data: () => ({ 161 import parent from "@/script/parents.js";
167 showNext: false, 162 import AllApicalls from "@/Services/AllApiCalls.js";
168 snackbar: false, 163
169 y: "top", 164 export default {
170 x: "right", 165 mixins: [AllApicalls],
171 role: "", 166 data: () => ({
172 mode: "", 167 showNext: false,
173 append: "", 168 snackbar: false,
174 timeout: 3000, 169 y: "top",
175 text: "", 170 x: "right",
176 show: true, 171 role: "",
177 color: "", 172 mode: "",
178 showSearch: false, 173 append: "",
179 showLoader: false, 174 timeout: 3000,
180 loading: false, 175 text: "",
181 editLoading: false, 176 show: true,
182 date: null, 177 color: "",
183 search: "", 178 showSearch: false,
184 menu: false, 179 showLoader: false,
185 menu1: false, 180 loading: false,
186 editStudentDialog: false, 181 editLoading: false,
187 profileStudentDialog: false, 182 date: null,
188 addCourseDialog: false, 183 search: "",
189 valid: true, 184 menu: false,
190 185 menu1: false,
191 addSection: [], 186 editStudentDialog: false,
192 pagination: { 187 profileStudentDialog: false,
193 rowsPerPage: 10, 188 addCourseDialog: false,
194 }, 189 valid: true,
195 imageData: {}, 190
196 imageName: "", 191 addSection: [],
197 imageUrl: "", 192 pagination: {
198 imageFile: "", 193 rowsPerPage: 10,
199 editImageName: "", 194 },
200 editImageUrl: "", 195 imageData: {},
201 courseRules: [(v) => !!v || " Course Name is required"], 196 imageName: "",
202 classRules: [(v) => !!v || " Class Name is required"], 197 imageUrl: "",
203 sectionRules: [(v) => !!v || " Section Name is required"], 198 imageFile: "",
204 errorMessages: "", 199 editImageName: "",
205 /* LIST OF TEACHERS */ 200 editImageUrl: "",
206 headers: [ 201 courseRules: [(v) => !!v || " Course Name is required"],
207 { 202 classRules: [(v) => !!v || " Class Name is required"],
208 text: "Teacher Name", 203 sectionRules: [(v) => !!v || " Section Name is required"],
209 value: "name", 204 errorMessages: "",
210 sortable: false, 205 /* LIST OF TEACHERS */
211 align: "center", 206 headers: [
212 }, 207 {
213 { 208 text: "Teacher Name",
214 text: "Email", 209 value: "name",
215 value: "email", 210 sortable: false,
216 sortable: false, 211 align: "center",
217 align: "center", 212 },
218 }, 213 {
219 ], 214 text: "Email",
220 getReport: {}, 215 value: "email",
221 selected: [], 216 sortable: false,
222 teachers: [], 217 align: "center",
223 // courseData: [], 218 },
224 editedIndex: -1, 219 ],
220 getReport: {},
225 addCourses: {}, 221 selected: [],
226 selectStudents: { 222 teachers: [],
227 select: "", 223 // courseData: [],
228 selectSection: "", 224 editedIndex: -1,
229 }, 225 addCourses: {},
230 editedItem: {}, 226 selectStudents: {
231 /* DIALOG ENROLL TEACHER */ 227 select: "",
232 dialogEnrollTeacher: false, 228 selectSection: "",
233 /* SELECT CLASS*/ 229 },
234 classesList: [], 230 editedItem: {},
235 classId: "", 231 /* DIALOG ENROLL TEACHER */
236 /* SELECT COURSE */ 232 dialogEnrollTeacher: false,
237 courseId: "", 233 /* SELECT CLASS*/
238 }), 234 classesList: [],
239 235 classId: "",
240 methods: { 236 /* SELECT COURSE */
241 // async populateCourses() { 237 courseId: "",
242 // let response = await this.getCourseesList({ classId: getReport.classId }); 238 }),
243 // }, 239
244 enrollTeacher(selected) { 240 methods: {
245 let selectedTeachersArray = []; 241 // async populateCourses() {
246 selectedTeachersArray.push({ teacherId: selected._id }); 242 // let response = await this.getCourseesList({ classId: getReport.classId });
247 243 // },
248 let isExists = false; 244 enrollTeacher(selected) {
249 for (let item of this.selected) { 245 let selectedTeachersArray = [];
250 if (item._id === selected._id) { 246 selectedTeachersArray.push({ teacherId: selected._id });
251 isExists = true; 247
252 break; 248 let isExists = false;
253 } 249 for (let item of this.selected) {
254 } 250 if (item._id === selected._id) {
255 if (selected.enroll === true) { 251 isExists = true;
256 if (!isExists) this.selected.push(selected); 252 break;
257 var payload = { 253 }
258 courseId: this.getReport.courseId, 254 }
259 teacherId: selected._id,
260 }; 255 if (selected.enroll === true) {
261 http() 256 if (!isExists) this.selected.push(selected);
262 .put("/assignTeacherToCourse", payload) 257 var payload = {
263 .then((response) => { 258 courseId: this.getReport.courseId,
264 // console.log("===response===", response); 259 teacherId: selected._id,
265 this.snackbar = true; 260 };
266 this.color = "success"; 261 http()
267 this.text = response.data.message; 262 .put("/assignTeacherToCourse", payload)
268 this.getParticularCourse("noSnackbar"); 263 .then((response) => {
264 // console.log("===response===", response);
269 }) 265 this.snackbar = true;
266 this.color = "success";
270 .catch((error) => { 267 this.text = response.data.message;
271 this.snackbar = true; 268 this.getParticularCourse("noSnackbar");
272 this.color = "error"; 269 })
273 this.text = error.response.data.message; 270 .catch((error) => {
274 }); 271 this.snackbar = true;
272 this.color = "error";
275 } 273 this.text = error.response.data.message;
276 if ( 274 });
277 selected.enroll == false && 275 }
278 selected.enroll != undefined && 276 if (
279 selected.enroll != null 277 selected.enroll == false &&
280 ) { 278 selected.enroll != undefined &&
281 var payloadDeleteTeacher = { 279 selected.enroll != null
282 courseId: this.getReport.courseId, 280 ) {
283 assignedId: selected.enrollId, 281 var payloadDeleteTeacher = {
284 }; 282 courseId: this.getReport.courseId,
285 http() 283 assignedId: selected.enrollId,
286 .put("/removeTeacherToCourse", payloadDeleteTeacher) 284 };
287 .then((response) => { 285 http()
288 this.snackbar = true; 286 .put("/removeTeacherToCourse", payloadDeleteTeacher)
289 this.color = "success"; 287 .then((response) => {
290 this.text = response.data.message; 288 this.snackbar = true;
289 this.color = "success";
291 this.getParticularCourse("noSnackbar"); 290 this.text = response.data.message;
292 }) 291 this.getParticularCourse("noSnackbar");
293 .catch((error) => { 292 })
294 this.snackbar = true; 293 .catch((error) => {
295 this.text = error.response.data.message; 294 this.snackbar = true;
296 }); 295 this.text = error.response.data.message;
297 } 296 });
298 }, 297 }
299 298 },
300 toggleAll() { 299
301 let withdraw = false; 300 toggleAll() {
302 if (this.selected.length === this.teachersList.length) withdraw = true; 301 let withdraw = false;
303 302 if (this.selected.length === this.teachersList.length) withdraw = true;
304 if (withdraw) { 303
305 var payload = { 304 if (withdraw) {
306 courseId: this.courseId, 305 var payload = {
307 teacherId: [], 306 courseId: this.courseId,
308 }; 307 teacherId: [],
309 http() 308 };
310 .put("/assignTeacherToCourse", payload) 309 http()
311 .then((response) => { 310 .put("/assignTeacherToCourse", payload)
312 this.snackbar = true; 311 .then((response) => {
313 this.text = response.data.message; 312 this.snackbar = true;
314 this.selected = []; 313 this.text = response.data.message;
315 for (let i = 0; i < this.teachersList.length; i++) { 314 this.selected = [];
316 this.teachersList[i].enroll = false; 315 for (let i = 0; i < this.teachersList.length; i++) {
317 } 316 this.teachersList[i].enroll = false;
318 this.getParticularCourse(); 317 }
319 }) 318 this.getParticularCourse();
320 .catch((error) => { 319 })
321 this.snackbar = true; 320 .catch((error) => {
322 this.text = error.response.data.message; 321 this.snackbar = true;
323 }); 322 this.text = error.response.data.message;
324 } else { 323 });
325 let selectedTeachersArray = []; 324 } else {
326 for (let item of this.teachersList) { 325 let selectedTeachersArray = [];
327 if (item.enroll === false || !item.enroll) { 326 for (let item of this.teachersList) {
328 selectedTeachersArray.push({ teacherId: item._id }); 327 if (item.enroll === false || !item.enroll) {
329 } 328 selectedTeachersArray.push({ teacherId: item._id });
330 } 329 }
331 330 }
332 var payload = { 331
333 courseId: this.courseId, 332 var payload = {
334 teacherId: selectedTeachersArray, 333 courseId: this.courseId,
335 }; 334 teacherId: selectedTeachersArray,
336 http() 335 };
337 .put("/assignTeacherToCourse", payload) 336 http()
338 .then((response) => { 337 .put("/assignTeacherToCourse", payload)
339 this.snackbar = true; 338 .then((response) => {
340 this.text = response.data.message; 339 this.snackbar = true;
341 for (let i = 0; i < this.teachersList.length; i++) { 340 this.text = response.data.message;
342 this.teachersList[i].enroll = true; 341 for (let i = 0; i < this.teachersList.length; i++) {
343 } 342 this.teachersList[i].enroll = true;
344 this.getParticularCourse(); 343 }
345 }) 344 this.getParticularCourse();
346 .catch((error) => { 345 })
347 this.snackbar = true; 346 .catch((error) => {
348 this.text = error.response.data.message; 347 this.snackbar = true;
349 }); 348 this.text = error.response.data.message;
350 } 349 });
351 }, 350 }
352 getTeacherTable(id) { 351 },
353 // console.log("id", this.getReport.courseId); 352 getTeacherTable(id) {
354 this.getTeachersList("noSnackbar"); 353 // console.log("id", this.getReport.courseId);
355 }, 354 this.getTeachersList("noSnackbar");
356 getTeachersList(message) { 355 },
357 this.showLoader = true; 356 getTeachersList(message) {
358 http() 357 this.showLoader = true;
359 .get("/getTeachersList", { 358 http()
360 params: { 359 .get("/getTeachersList", {
361 classId: this.getReport.classId, 360 params: {
362 }, 361 classId: this.getReport.classId,
363 }) 362 },
364 .then((response) => { 363 })
365 this.teachersList = response.data.data; 364 .then((response) => {
366 this.showLoader = false; 365 this.teachersList = response.data.data;
367 // this.addStudentAttendenceDialog = false; 366 this.showLoader = false;
368 var attendence = ""; 367 // this.addStudentAttendenceDialog = false;
369 for (let i = 0; i < this.teachersList.length; i++) { 368 var attendence = "";
369 for (let i = 0; i < this.teachersList.length; i++) {
370 this.teachersList[i].attendence = true;
371 }
372 this.getParticularCourse(message);
373 })
374 .catch((error) => {
375 console.log("err====>", error);
376 this.showLoader = false;
377 });
378 },
379 getParticularCourse(message) {
380 this.selected = [];
381 var payload = {
382 courseId: this.getReport.courseId,
383 };
384 http()
385 .get("/getParticularCourse", {
386 params: payload,
387 })
388 .then((response) => {
389 for (let i = 0; i < response.data.data.assignedTeacher.length; i++) {
390 var teacherId = {};
391 teacherId = response.data.data.assignedTeacher[i];
392 for (let j = 0; j < this.teachersList.length; j++) {
393 if (teacherId.teacherId == this.teachersList[j]._id) {
394 this.teachersList[j].enroll = true;
395 this.teachersList[j].enrollId = teacherId._id;
396 this.selected.push(this.teachersList[j]);
397 break;
398 }
399 }
400 }
401 if (message != "noSnackbar") {
402 this.snackbar = true;
403 this.text = response.data.message;
404 }
405 })
406 .catch((error) => {
407 this.snackbar = true;
408 this.text = error.response.data.message;
409 });
410 },
411 getCourses(classId) {
412 this.showLoader = true;
413 http()
414 .get("/getCourseesList", {
415 params: {
416 classId: classId,
417 },
418 })
419 .then((response) => {
420 this.courseData = response.data.data;
421 this.showLoader = false;
422 })
423 .catch((err) => {
424 console.log("err====>", err);
425 this.showLoader = false;
426 });
427 },
370 this.teachersList[i].attendence = true; 428 // getSections(_id) {
371 } 429 // var token = this.$store.state.token;
372 this.getParticularCourse(message); 430 // this.showLoader = true;
373 }) 431 // http()
374 .catch((error) => { 432 // .get(
375 console.log("err====>", error); 433 // "/getSectionsList",
376 this.showLoader = false; 434 // { params: { classId: _id } },
377 }); 435 // {
378 }, 436 // headers: { Authorization: "Bearer " + token },
379 getParticularCourse(message) { 437 // }
380 this.selected = []; 438 // )
381 var payload = { 439 // .then((response) => {
382 courseId: this.getReport.courseId, 440 // this.addSection = response.data.data;
383 }; 441 // this.showLoader = false;
384 http() 442 // })
385 .get("/getParticularCourse", { 443 // .catch((err) => {
386 params: payload, 444 // this.showLoader = false;
387 }) 445 // });
388 .then((response) => { 446 // },
389 for (let i = 0; i < response.data.data.assignedTeacher.length; i++) { 447 },
390 var teacherId = {}; 448 mounted() {
391 teacherId = response.data.data.assignedTeacher[i]; 449 var token = this.$store.state.token;
392 for (let j = 0; j < this.teachersList.length; j++) { 450 http()
393 if (teacherId.teacherId == this.teachersList[j]._id) { 451 .get("/getClassesList", {
394 this.teachersList[j].enroll = true; 452 headers: { Authorization: "Bearer " + token },
395 this.teachersList[j].enrollId = teacherId._id; 453 })
396 this.selected.push(this.teachersList[j]); 454 .then((response) => {
397 break; 455 this.classesList = response.data.data;
398 } 456 })
399 } 457 .catch((error) => {
400 } 458 this.showLoader = false;
401 if (message != "noSnackbar") { 459 if (error.response.status === 401) {
402 this.snackbar = true; 460 this.$router.replace({ path: "/" });
403 this.text = response.data.message; 461 this.$store.dispatch("setToken", null);
404 } 462 this.$store.dispatch("Id", null);
405 }) 463 this.$store.dispatch("Role", null);
406 .catch((error) => { 464 }
407 this.snackbar = true; 465 });
408 this.text = error.response.data.message; 466 },
409 }); 467 };
410 }, 468 </script>
411 getCourses(classId) { 469 <style scoped>
412 this.showLoader = true; 470 .active {
413 http() 471 background-color: gray;
src/pages/Common/UploadPdf.vue
Diff comments   View file @4fb0af7
1 <template> 1 <template>
2 <div> 2 <div>
3 <v-text-field 3 <v-text-field
4 :label="label" 4 :label="label"
5 @click="clickInputTag" 5 @click="clickInputTag"
6 v-model="fileName" 6 v-model="fileName"
7 append-icon="attach_file" 7 append-icon="attach_file"
8 ></v-text-field> 8 ></v-text-field>
9 <input 9 <input
10 type="file" 10 type="file"
11 style="display: none" 11 style="display: none"
12 :id="id" 12 :id="id"
13 :ref="reference" 13 :ref="reference"
14 accept="image/*" 14 accept="image/*"
15 @change="convertToBase64()" 15 @change="convertToBase64()"
16 /> 16 />
17 </div> 17 </div>
18 </template> 18 </template>
19 <script > 19 <script >
20 export default { 20 export default {
21 props: ["label", "reference", "id", "emptyPdf"], 21 props: ["label", "reference", "id", "emptyPdf"],
22 data() { 22 data() {
23 return { 23 return {
24 fileToLoad: "", 24 fileToLoad: "",
25 fileName: "", 25 fileName: "",
26 fileInBase64: "", 26 fileInBase64: "",
27 }; 27 };
28 }, 28 },
29 methods: { 29 methods: {
30 clickInputTag() { 30 clickInputTag() {
31 document.getElementById(this.id).click(); 31 document.getElementById(this.id).click();
32 }, 32 },
33 convertToBase64(e) { 33 convertToBase64(e) {
34 //Read File 34 //Read File
35 var selectedFile = document.getElementById(this.id).files; 35 var selectedFile = document.getElementById(this.id).files;
36 //Check File is not Empty 36 //Check File is not Empty
37 37
38 if (selectedFile.length > 0) { 38 if (selectedFile.length > 0) {
39 // Select the very first file from list 39 // Select the very first file from list
40 this.fileToLoad = selectedFile[0]; 40 this.fileToLoad = selectedFile[0];
41 this.fileName = selectedFile[0].name; 41 this.fileName = selectedFile[0].name;
42 // console.log("file name - ", this.fileName); 42 // console.log("file name - ", this.fileName);
43 // FileReader function for read the file. 43 // FileReader function for read the file.
44 var fileReader = new FileReader(); 44 var fileReader = new FileReader();
45 // Onload of file read the file content 45 // Onload of file read the file content
46 let vm = this; 46 let vm = this;
47 fileReader.onload = function (fileLoadedEvent) { 47 fileReader.onload = function (fileLoadedEvent) {
48 vm.fileInBase64 = fileLoadedEvent.target.result; 48 vm.fileInBase64 = fileLoadedEvent.target.result;
49 // Print data in console 49 // Print data in console
50 // console.log(vm.fileInBase64); 50 // console.log(vm.fileInBase64);
51 51
52 var str = vm.fileInBase64; 52 var str = vm.fileInBase64;
53 const [baseUrl, requiredUrl] = str.split(/,/); 53 const [baseUrl, requiredUrl] = str.split(/,/);
54 // console.log("required - ", requiredUrl); 54 // console.log("required - ", requiredUrl);
55 55
56 let fileData = { 56 let fileData = {
57 selectedFileName: vm.fileName, 57 selectedFileName: vm.fileName,
58 fileInBase64: requiredUrl, 58 fileInBase64: requiredUrl,
59 emptyPdf: "", 59 emptyPdf: "",
60 }; 60 };
61 vm.$emit("pdfFileSelected", fileData); 61 vm.$emit("pdfFileSelected", fileData);
62 }; 62 };
63 63
64 // Convert data to base64 64 // Convert data to base64
65 fileReader.readAsDataURL(this.fileToLoad); 65 fileReader.readAsDataURL(this.fileToLoad);
66 } 66 }
67 }, 67 },
68 resetInput(params) { 68 resetInput(params) {
69 // RESET INPUT ELEMENT,fileName and selectedfile array 69 // RESET INPUT ELEMENT,fileName and selectedfile array
70 this.fileToLoad = null; 70 this.fileToLoad = null;
71 this.fileName = null; 71 this.fileName = null;
72 this.fileInBase64 = null; 72 this.fileInBase64 = null;
73 let inputTag = document.getElementById(this.id); 73 let inputTag = document.getElementById(this.id);
74 inputTag.value = null; 74 inputTag.value = null;
75 // inputTag.type = "text"; 75 // inputTag.type = "text";
76 // inputTag.type = "file"; 76 // inputTag.type = "file";
77 77
78 let fileData = { 78 let fileData = {
79 fileName: this.fileName, 79 fileName: this.fileName,
80 fileInBase64: this.fileInBase64, 80 fileInBase64: this.fileInBase64,
81 trigger: "", 81 trigger: "",
82 }; 82 };
83 this.$emit("fileSelected", fileData); 83 this.$emit("fileSelected", fileData);
84 }, 84 },
85 }, 85 },
86 watch: { 86 watch: {
87 respondToTrigger() { 87 respondToTrigger() {
88 if (this.respondToTrigger == "reset") { 88 if (this.respondToTrigger == "reset") {
89 // console.log("Reset pdf - ", this.emptyPdf); 89 // console.log("Reset pdf - ", this.emptyPdf);
90 this.resetInput(); 90 this.resetInput();
91 } 91 }
92 }, 92 },
93 }, 93 },
94 computed: { 94 computed: {
95 respondToTrigger: { 95 respondToTrigger: {
96 get() { 96 get() {
97 return this.emptyPdf; 97 return this.emptyPdf;
98 }, 98 },
99 set(newVal) {}, 99 set(newVal) {},
100 // this.respondToTrigger = this.trigger; 100 // this.respondToTrigger = this.trigger;
101 }, 101 },
102 }, 102 },
103 }; 103 };
104 </script> 104 </script>
105 <style scoped > 105 <style scoped >
106 </style> 106 </style>
src/pages/Course/courseDetail.vue
Diff comments   View file @4fb0af7
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** Edit Chapter detail ****** --> 3 <!-- ****** Edit Chapter detail ****** -->
4 <v-dialog v-model="editCourseDetailDialog" max-width="1000px" scrollable persistent> 4 <v-dialog v-model="editCourseDetailDialog" max-width="1000px" scrollable persistent>
5 <v-card class="card-style pa-2" dark> 5 <v-card class="card-style pa-2" dark>
6 <v-layout> 6 <v-layout>
7 <v-flex xs12> 7 <v-flex xs12>
8 <label class="title text-xs-center">Edit Chapter</label> 8 <label class="title text-xs-center">Edit Chapter</label>
9 <v-icon size="24" class="right" @click="editCourseDetailDialog = false">cancel</v-icon> 9 <v-icon size="24" class="right" @click="editCourseDetailDialog = false">cancel</v-icon>
10 </v-flex> 10 </v-flex>
11 </v-layout> 11 </v-layout>
12 <v-card-text> 12 <v-card-text>
13 <v-layout wrap> 13 <v-layout wrap>
14 <v-flex xs12 sm12> 14 <v-flex xs12 sm12>
15 <v-layout> 15 <v-layout>
16 <v-flex xs4 class="pt-4 subheading"> 16 <v-flex xs4 class="pt-4 subheading">
17 <label class="right">Select Class:</label> 17 <label class="right">Select Class:</label>
18 </v-flex> 18 </v-flex>
19 <v-flex xs8 sm6 class="ml-3"> 19 <v-flex xs8 sm6 class="ml-3">
20 <v-select 20 <v-select
21 small 21 small
22 :items="addclass" 22 :items="addclass"
23 label="Select Class" 23 label="Select Class"
24 v-model="editedCourse.classId" 24 v-model="editedCourse.classId"
25 item-text="classNum" 25 item-text="classNum"
26 item-value="_id" 26 item-value="_id"
27 name="Select Class" 27 name="Select Class"
28 @change="getCourses(editedCourse.classId)" 28 @change="getCourses(editedCourse.classId)"
29 class="mr-2" 29 class="mr-2"
30 required 30 required
31 ></v-select> 31 ></v-select>
32 </v-flex> 32 </v-flex>
33 </v-layout> 33 </v-layout>
34 </v-flex> 34 </v-flex>
35 <v-flex xs12 sm12> 35 <v-flex xs12 sm12>
36 <v-layout> 36 <v-layout>
37 <v-flex xs4 class="pt-4 subheading"> 37 <v-flex xs4 class="pt-4 subheading">
38 <label class="right">Select Course:</label> 38 <label class="right">Select Course:</label>
39 </v-flex> 39 </v-flex>
40 <v-flex xs8 sm6 class="ml-3"> 40 <v-flex xs8 sm6 class="ml-3">
41 <v-select 41 <v-select
42 :items="courseData" 42 :items="courseData"
43 label="Select Course" 43 label="Select Course"
44 v-model="editedCourse.courseId" 44 v-model="editedCourse.courseId"
45 item-text="courseName" 45 item-text="courseName"
46 item-value="_id" 46 item-value="_id"
47 required 47 required
48 class="ml-2" 48 class="ml-2"
49 ></v-select> 49 ></v-select>
50 </v-flex> 50 </v-flex>
51 </v-layout> 51 </v-layout>
52 </v-flex> 52 </v-flex>
53 </v-layout> 53 </v-layout>
54 <v-layout> 54 <v-layout>
55 <v-flex xs12 sm12 md11 lg11> 55 <v-flex xs12 sm12 md11 lg11>
56 <v-card-actions class="hidden-xs-only hidden-sm-only"> 56 <v-card-actions class="hidden-xs-only hidden-sm-only">
57 <v-spacer></v-spacer> 57 <v-spacer></v-spacer>
58 <v-btn round dark @click="save" :loading="editLoading" class="add-button mr-4">Save</v-btn> 58 <v-btn round dark @click="save" :loading="editLoading" class="add-button mr-4">Save</v-btn>
59 </v-card-actions> 59 </v-card-actions>
60 <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> 60 <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only">
61 <v-spacer></v-spacer> 61 <v-spacer></v-spacer>
62 <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn> 62 <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn>
63 <v-spacer></v-spacer> 63 <v-spacer></v-spacer>
64 </v-card-actions> 64 </v-card-actions>
65 </v-flex> 65 </v-flex>
66 </v-layout> 66 </v-layout>
67 </v-card-text> 67 </v-card-text>
68 </v-card> 68 </v-card>
69 </v-dialog> 69 </v-dialog>
70 <!-- DIALOG BOX - EDIT CHAPTER--> 70 <!-- DIALOG BOX - EDIT CHAPTER-->
71 <v-dialog v-model="editChapterDetailDialog" max-width="1000px" scrollable persistent> 71 <v-dialog v-model="editChapterDetailDialog" max-width="1000px" scrollable persistent>
72 <v-card class="card-style pa-2" dark> 72 <v-card class="card-style pa-2" dark>
73 <v-layout> 73 <v-layout>
74 <v-flex xs12> 74 <v-flex xs12>
75 <label class="title text-xs-center">Edit Chapter</label> 75 <label class="title text-xs-center">Edit Chapter</label>
76 <v-icon 76 <v-icon
77 size="24" 77 size="24"
78 class="right" 78 class="right"
79 @click="editChapterDetailDialog = false; trigger = 'reset'; emptyPdf = 'reset' " 79 @click="editChapterDetailDialog = false; trigger = 'reset'; emptyPdf = 'reset' "
80 >cancel</v-icon> 80 >cancel</v-icon>
81 </v-flex> 81 </v-flex>
82 </v-layout> 82 </v-layout>
83 <v-card-text> 83 <v-card-text>
84 <v-layout wrap> 84 <v-layout wrap>
85 <!-- CHAPTER NAME --> 85 <!-- CHAPTER NAME -->
86 <v-flex xs12 sm12> 86 <v-flex xs12 sm12>
87 <v-layout> 87 <v-layout>
88 <v-flex xs4 class="pt-4 subheading"> 88 <v-flex xs4 class="pt-4 subheading">
89 <label class="right">Chapter Name:</label> 89 <label class="right">Chapter Name:</label>
90 </v-flex> 90 </v-flex>
91 <v-flex xs8 sm6 class="ml-3"> 91 <v-flex xs8 sm6 class="ml-3">
92 <v-text-field 92 <v-text-field
93 v-model="editChapter.chapterName" 93 v-model="editChapter.chapterName"
94 placeholder="fill your Title" 94 placeholder="fill your Title"
95 type="text" 95 type="text"
96 required 96 required
97 ></v-text-field> 97 ></v-text-field>
98 </v-flex> 98 </v-flex>
99 </v-layout> 99 </v-layout>
100 </v-flex> 100 </v-flex>
101 <!-- DESCRIPTION --> 101 <!-- DESCRIPTION -->
102 <v-flex xs12 sm12> 102 <v-flex xs12 sm12>
103 <v-layout> 103 <v-layout>
104 <v-flex xs4 class="pt-4 subheading"> 104 <v-flex xs4 class="pt-4 subheading">
105 <label class="right">Description:</label> 105 <label class="right">Description:</label>
106 </v-flex> 106 </v-flex>
107 <v-flex xs8 sm6 class="ml-3"> 107 <v-flex xs8 sm6 class="ml-3">
108 <v-text-field 108 <v-text-field
109 placeholder="fill your Description" 109 placeholder="fill your Description"
110 v-model="editChapter.description" 110 v-model="editChapter.description"
111 type="text" 111 type="text"
112 required 112 required
113 ></v-text-field> 113 ></v-text-field>
114 </v-flex> 114 </v-flex>
115 </v-layout> 115 </v-layout>
116 </v-flex> 116 </v-flex>
117 <!-- UPLOAD PPT --> 117 <!-- UPLOAD PPT -->
118 <!-- <v-flex xs12> 118 <!-- <v-flex xs12>
119 <v-layout> 119 <v-layout>
120 <v-flex xs4 class="pt-4 subheading"> 120 <v-flex xs4 class="pt-4 subheading">
121 <label class="right">Upload PPT:</label> 121 <label class="right">Upload PPT:</label>
122 </v-flex> 122 </v-flex>
123 <v-flex xs8 sm6 class="ml-3"> 123 <v-flex xs8 sm6 class="ml-3">
124 <UploadFiles 124 <UploadFiles
125 @fileSelected="fileSelected($event,'uploadPPT')" 125 @fileSelected="fileSelected($event,'uploadPPT')"
126 label="Add PPT" 126 label="Add PPT"
127 reference="EditPpt" 127 reference="EditPpt"
128 id="editPptInput" 128 id="editPptInput"
129 :trigger="trigger" 129 :trigger="trigger"
130 ></UploadFiles> 130 ></UploadFiles>
131 </v-flex> 131 </v-flex>
132 </v-layout> 132 </v-layout>
133 </v-flex>--> 133 </v-flex>-->
134 <!-- UPLOAD PDF --> 134 <!-- UPLOAD PDF -->
135 <v-flex xs12> 135 <v-flex xs12>
136 <v-layout> 136 <v-layout>
137 <v-flex xs4 class="pt-4 subheading"> 137 <v-flex xs4 class="pt-4 subheading">
138 <label class="right">Upload PDF:</label> 138 <label class="right">Upload PDF:</label>
139 </v-flex> 139 </v-flex>
140 <v-flex xs8 sm6 class="ml-3"> 140 <v-flex xs8 sm6 class="ml-3">
141 <UploadPdf 141 <UploadPdf
142 @pdfFileSelected="pdfFileSelected($event,'uploadPDF')" 142 @pdfFileSelected="pdfFileSelected($event,'uploadPDF')"
143 label="Add PDF" 143 label="Add PDF"
144 reference="editPdf" 144 reference="editPdf"
145 id="editPdfInput" 145 id="editPdfInput"
146 :emptyPdf="emptyPdf" 146 :emptyPdf="emptyPdf"
147 ></UploadPdf> 147 ></UploadPdf>
148 </v-flex> 148 </v-flex>
149 </v-layout> 149 </v-layout>
150 </v-flex> 150 </v-flex>
151 </v-layout> 151 </v-layout>
152 <!-- <v-flex xs12 v-if="editChapter.chapterPoints.length != 0"> 152 <!-- <v-flex xs12 v-if="editChapter.chapterPoints.length != 0">
153 <v-layout 153 <v-layout
154 wrap 154 wrap
155 v-for="(editChapterPoint,index) in editChapter.chapterPoints" 155 v-for="(editChapterPoint,index) in editChapter.chapterPoints"
156 :key="index" 156 :key="index"
157 > 157 >
158 <v-flex xs12 sm12 md4 class="pt-4 subheading"> 158 <v-flex xs12 sm12 md4 class="pt-4 subheading">
159 <label class="right hidden-xs-only hidden-sm-only">Chapter Points:</label> 159 <label class="right hidden-xs-only hidden-sm-only">Chapter Points:</label>
160 <label class="hidden-md-only hidden-lg-only hidden-xl-only">Chapter Points:</label> 160 <label class="hidden-md-only hidden-lg-only hidden-xl-only">Chapter Points:</label>
161 </v-flex> 161 </v-flex>
162 <v-layout> 162 <v-layout>
163 <v-flex xs10 sm10 sm5 md9 class="ml-3"> 163 <v-flex xs10 sm10 sm5 md9 class="ml-3">
164 <v-text-field :value="editChapterPoint" type="text" required></v-text-field> 164 <v-text-field :value="editChapterPoint" type="text" required></v-text-field>
165 </v-flex> 165 </v-flex>
166 <v-flex xs2 class="pt-4"> 166 <v-flex xs2 class="pt-4">
167 <v-icon @click="deleteUrl(index)">cancel</v-icon> 167 <v-icon @click="deleteUrl(index)">cancel</v-icon>
168 </v-flex> 168 </v-flex>
169 </v-layout> 169 </v-layout>
170 </v-layout> 170 </v-layout>
171 </v-flex>--> 171 </v-flex>-->
172 <v-flex xs12> 172 <v-flex xs12>
173 <div v-for="(updateImage,index) in updates" :key="index"> 173 <div v-for="(updateImage,index) in updates" :key="index">
174 <v-layout wrap> 174 <v-layout wrap>
175 <v-flex xs12 sm12 md4 class="pt-4 subheading"> 175 <v-flex xs12 sm12 md4 class="pt-4 subheading">
176 <label class="right hidden-xs-only hidden-sm-only">Chapter Points:</label> 176 <label class="right hidden-xs-only hidden-sm-only">Chapter Points:</label>
177 <label class="hidden-md-only hidden-lg-only hidden-xl-only">Chapter Points:</label> 177 <label class="hidden-md-only hidden-lg-only hidden-xl-only">Chapter Points:</label>
178 </v-flex> 178 </v-flex>
179 <v-layout> 179 <v-layout>
180 <v-flex xs10 sm12 md9 class="ml-3"> 180 <v-flex xs10 sm12 md9 class="ml-3">
181 <v-text-field 181 <v-text-field
182 v-model="updateImage.value" 182 v-model="updateImage.value"
183 placeholder="Upload new Chapter Points" 183 placeholder="Upload new Chapter Points"
184 required 184 required
185 ></v-text-field> 185 ></v-text-field>
186 </v-flex> 186 </v-flex>
187 <v-flex xs2 class="pt-4"> 187 <v-flex xs2 class="pt-4">
188 <v-icon @click="deleteUpdate(index)" v-if="index !=0">cancel</v-icon> 188 <v-icon @click="deleteUpdate(index)" v-if="index !=0">cancel</v-icon>
189 <v-icon @click="update">add_circle</v-icon> 189 <v-icon @click="update">add_circle</v-icon>
190 </v-flex> 190 </v-flex>
191 </v-layout> 191 </v-layout>
192 </v-layout> 192 </v-layout>
193 </div> 193 </div>
194 </v-flex> 194 </v-flex>
195 <v-layout> 195 <v-layout>
196 <v-flex xs12 sm12 md11 lg11> 196 <v-flex xs12 sm12 md11 lg11>
197 <v-card-actions class="hidden-xs-only hidden-sm-only"> 197 <v-card-actions class="hidden-xs-only hidden-sm-only">
198 <v-spacer></v-spacer> 198 <v-spacer></v-spacer>
199 <v-btn 199 <v-btn
200 round 200 round
201 dark 201 dark
202 @click="saveChapter" 202 @click="saveChapter"
203 :loading="editLoading" 203 :loading="editLoading"
204 class="add-button mr-4" 204 class="add-button mr-4"
205 >Save</v-btn> 205 >Save</v-btn>
206 </v-card-actions> 206 </v-card-actions>
207 <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> 207 <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only">
208 <v-spacer></v-spacer> 208 <v-spacer></v-spacer>
209 <v-btn 209 <v-btn
210 round 210 round
211 dark 211 dark
212 @click="saveChapter" 212 @click="saveChapter"
213 :loading="editLoading" 213 :loading="editLoading"
214 class="add-button" 214 class="add-button"
215 >Save</v-btn> 215 >Save</v-btn>
216 <v-spacer></v-spacer> 216 <v-spacer></v-spacer>
217 </v-card-actions> 217 </v-card-actions>
218 </v-flex> 218 </v-flex>
219 </v-layout> 219 </v-layout>
220 </v-card-text> 220 </v-card-text>
221 </v-card> 221 </v-card>
222 </v-dialog> 222 </v-dialog>
223 <!-- ADD NEW CHAPTER--> 223 <!-- ADD NEW CHAPTER-->
224 <v-dialog v-model="addChapterDialog" max-width="1000px" scrollable persistent> 224 <v-dialog v-model="addChapterDialog" max-width="1000px" scrollable persistent>
225 <v-card class="card-style pa-2" dark> 225 <v-card class="card-style pa-2" dark>
226 <v-layout> 226 <v-layout>
227 <v-flex xs12> 227 <v-flex xs12>
228 <label class="title text-xs-center">Add Chapter Detail</label> 228 <label class="title text-xs-center">Add Chapter Detail</label>
229 <v-icon 229 <v-icon
230 size="24" 230 size="24"
231 class="right" 231 class="right"
232 @click="addChapterDialog = false; trigger = 'reset'; emptyPdf = 'reset' " 232 @click="addChapterDialog = false; trigger = 'reset'; emptyPdf = 'reset' "
233 >cancel</v-icon> 233 >cancel</v-icon>
234 </v-flex> 234 </v-flex>
235 </v-layout> 235 </v-layout>
236 <v-card-text> 236 <v-card-text>
237 <v-layout wrap> 237 <v-layout wrap>
238 <v-flex xs12 sm12> 238 <v-flex xs12 sm12>
239 <v-layout> 239 <v-layout>
240 <v-flex xs4 class="pt-4 subheading"> 240 <v-flex xs4 class="pt-4 subheading">
241 <label class="right">Chapter Name:</label> 241 <label class="right">Chapter Name:</label>
242 </v-flex> 242 </v-flex>
243 <v-flex xs8 sm6 class="ml-3"> 243 <v-flex xs8 sm6 class="ml-3">
244 <v-text-field 244 <v-text-field
245 v-model="addChapterItem.chapterName" 245 v-model="addChapterItem.chapterName"
246 placeholder="fill your Title" 246 placeholder="fill your Title"
247 type="text" 247 type="text"
248 required 248 required
249 ></v-text-field> 249 ></v-text-field>
250 </v-flex> 250 </v-flex>
251 </v-layout> 251 </v-layout>
252 </v-flex> 252 </v-flex>
253 <v-flex xs12 sm12> 253 <v-flex xs12 sm12>
254 <v-layout> 254 <v-layout>
255 <v-flex xs4 class="pt-4 subheading"> 255 <v-flex xs4 class="pt-4 subheading">
256 <label class="right">Description:</label> 256 <label class="right">Description:</label>
257 </v-flex> 257 </v-flex>
258 <v-flex xs8 sm6 class="ml-3"> 258 <v-flex xs8 sm6 class="ml-3">
259 <v-text-field 259 <v-text-field
260 placeholder="fill your Description" 260 placeholder="fill your Description"
261 v-model="addChapterItem.description" 261 v-model="addChapterItem.description"
262 type="text" 262 type="text"
263 required 263 required
264 ></v-text-field> 264 ></v-text-field>
265 </v-flex> 265 </v-flex>
266 </v-layout> 266 </v-layout>
267 </v-flex> 267 </v-flex>
268 <!-- UPLOAD PPT --> 268 <!-- UPLOAD PPT -->
269 <!-- <v-flex xs12> 269 <!-- <v-flex xs12>
270 <v-layout> 270 <v-layout>
271 <v-flex xs4 class="pt-4 subheading"> 271 <v-flex xs4 class="pt-4 subheading">
272 <label class="right">Upload PPT:</label> 272 <label class="right">Upload PPT:</label>
273 </v-flex> 273 </v-flex>
274 <v-flex xs8 sm6 class="ml-3"> 274 <v-flex xs8 sm6 class="ml-3">
275 <UploadFiles 275 <UploadFiles
276 @fileSelected="fileSelected($event,'uploadPPT')" 276 @fileSelected="fileSelected($event,'uploadPPT')"
277 label="Add PPT" 277 label="Add PPT"
278 reference="newChapterPpt" 278 reference="newChapterPpt"
279 id="newChapterPptInput" 279 id="newChapterPptInput"
280 :trigger="trigger" 280 :trigger="trigger"
281 ></UploadFiles> 281 ></UploadFiles>
282 </v-flex> 282 </v-flex>
283 </v-layout> 283 </v-layout>
284 </v-flex>--> 284 </v-flex>-->
285 <!-- UPLOAD PDF --> 285 <!-- UPLOAD PDF -->
286 <v-flex xs12> 286 <v-flex xs12>
287 <v-layout> 287 <v-layout>
288 <v-flex xs4 class="pt-4 subheading"> 288 <v-flex xs4 class="pt-4 subheading">
289 <label class="right">Upload PDF:</label> 289 <label class="right">Upload PDF:</label>
290 </v-flex> 290 </v-flex>
291 <v-flex xs8 sm6 class="ml-3"> 291 <v-flex xs8 sm6 class="ml-3">
292 <UploadPdf 292 <UploadPdf
293 @pdfFileSelected="pdfFileSelected($event,'uploadPDF')" 293 @pdfFileSelected="pdfFileSelected($event,'uploadPDF')"
294 label="Add PDF" 294 label="Add PDF"
295 reference="newChapterPdf" 295 reference="newChapterPdf"
296 id="newChapterPdfInput" 296 id="newChapterPdfInput"
297 :emptyPdf="emptyPdf" 297 :emptyPdf="emptyPdf"
298 ></UploadPdf> 298 ></UploadPdf>
299 </v-flex> 299 </v-flex>
300 </v-layout> 300 </v-layout>
301 </v-flex> 301 </v-flex>
302 </v-layout> 302 </v-layout>
303 <v-flex xs12> 303 <v-flex xs12>
304 <div v-for="(chapterPoints,index) in findsChapterPoint" :key="index"> 304 <div v-for="(chapterPoints,index) in findsChapterPoint" :key="index">
305 <v-layout> 305 <v-layout>
306 <v-flex xs4 class="pt-4 subheading"> 306 <v-flex xs4 class="pt-4 subheading">
307 <label class="right">Chapter Points:</label> 307 <label class="right">Chapter Points:</label>
308 </v-flex> 308 </v-flex>
309 <v-flex xs8 sm8 md6 class="ml-3"> 309 <v-flex xs8 sm8 md6 class="ml-3">
310 <v-text-field 310 <v-text-field
311 placeholder="fill your Chapter Points" 311 placeholder="fill your Chapter Points"
312 v-model="chapterPoints.value" 312 v-model="chapterPoints.value"
313 type="text" 313 type="text"
314 name="link" 314 name="link"
315 required 315 required
316 ></v-text-field> 316 ></v-text-field>
317 </v-flex> 317 </v-flex>
318 <v-flex xs2 class="pt-4"> 318 <v-flex xs2 class="pt-4">
319 <v-icon @click="deleteChapterPoint(index)" v-if="index !=0 ">cancel</v-icon> 319 <v-icon @click="deleteChapterPoint(index)" v-if="index !=0 ">cancel</v-icon>
320 <v-icon @click="addChapterPoint()">add_circle</v-icon> 320 <v-icon @click="addChapterPoint()">add_circle</v-icon>
321 </v-flex> 321 </v-flex>
322 </v-layout> 322 </v-layout>
323 </div> 323 </div>
324 </v-flex> 324 </v-flex>
325 <v-layout> 325 <v-layout>
326 <v-flex xs12 sm12 md11 lg11> 326 <v-flex xs12 sm12 md11 lg11>
327 <v-card-actions class="hidden-xs-only hidden-sm-only"> 327 <v-card-actions class="hidden-xs-only hidden-sm-only">
328 <v-spacer></v-spacer> 328 <v-spacer></v-spacer>
329 <v-btn 329 <v-btn
330 round 330 round
331 dark 331 dark
332 @click="submitChapter" 332 @click="submitChapter"
333 :loading="editLoading" 333 :loading="editLoading"
334 class="add-button mr-4" 334 class="add-button mr-4"
335 >Submit</v-btn> 335 >Submit</v-btn>
336 </v-card-actions> 336 </v-card-actions>
337 <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only"> 337 <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only">
338 <v-spacer></v-spacer> 338 <v-spacer></v-spacer>
339 <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn> 339 <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn>
340 <v-spacer></v-spacer> 340 <v-spacer></v-spacer>
341 </v-card-actions> 341 </v-card-actions>
342 </v-flex> 342 </v-flex>
343 </v-layout> 343 </v-layout>
344 </v-card-text> 344 </v-card-text>
345 </v-card> 345 </v-card>
346 </v-dialog> 346 </v-dialog>
347 347
348 <!-- ****** PROFILE Gallery ****** --> 348 <!-- ****** PROFILE Gallery ****** -->
349 349
350 <v-dialog v-model="viewProfileGallery" max-width="1000" scrollable persistent> 350 <v-dialog v-model="viewProfileGallery" max-width="1000" scrollable persistent>
351 <v-card flat class="card-style pa-3" dark> 351 <v-card flat class="card-style pa-3" dark>
352 <v-layout> 352 <v-layout>
353 <v-flex xs12> 353 <v-flex xs12>
354 <label class="title text-xs-center">View Course Detail</label> 354 <label class="title text-xs-center">View Course Detail</label>
355 <v-icon size="24" class="right" @click="closeProfileGallery">cancel</v-icon> 355 <v-icon size="24" class="right" @click="closeProfileGallery">cancel</v-icon>
356 </v-flex> 356 </v-flex>
357 </v-layout> 357 </v-layout>
358 <v-card-text> 358 <v-card-text>
359 <v-container grid-list-md> 359 <v-container grid-list-md>
360 <v-layout wrap> 360 <v-layout wrap>
361 <v-flex xs12> 361 <v-flex xs12>
362 <v-layout> 362 <v-layout>
363 <v-flex xs4 sm6> 363 <v-flex xs4 sm6>
364 <h5 class="right my-1"> 364 <h5 class="right my-1">
365 <b>Chapter Name:</b> 365 <b>Chapter Name:</b>
366 </h5> 366 </h5>
367 </v-flex> 367 </v-flex>
368 <v-flex sm6 xs8> 368 <v-flex sm6 xs8>
369 <h5 class="my-1">{{ editedItem.chapterName }}</h5> 369 <h5 class="my-1">{{ editedItem.chapterName }}</h5>
370 </v-flex> 370 </v-flex>
371 </v-layout> 371 </v-layout>
372 <v-layout> 372 <v-layout>
373 <v-flex xs4 sm6> 373 <v-flex xs4 sm6>
374 <h5 class="right my-1"> 374 <h5 class="right my-1">
375 <b>Description:</b> 375 <b>Description:</b>
376 </h5> 376 </h5>
377 </v-flex> 377 </v-flex>
378 <v-flex sm6 xs8> 378 <v-flex sm6 xs8>
379 <h5 class="my-1">{{ editedItem.description }}</h5> 379 <h5 class="my-1">{{ editedItem.description }}</h5>
380 </v-flex> 380 </v-flex>
381 </v-layout> 381 </v-layout>
382 <v-layout> 382 <v-layout>
383 <v-flex xs5 sm6> 383 <v-flex xs5 sm6>
384 <h5 class="right my-1"> 384 <h5 class="right my-1">
385 <b>Chapter Points:</b> 385 <b>Chapter Points:</b>
386 </h5> 386 </h5>
387 </v-flex> 387 </v-flex>
388 <v-flex sm6 xs8> 388 <v-flex sm6 xs8>
389 <h5 class="my-1"> 389 <h5 class="my-1">
390 <ul v-for="chapterPoint in editedItem.chapterPoints" :key="chapterPoint"> 390 <ul v-for="chapterPoint in editedItem.chapterPoints" :key="chapterPoint">
391 <li>{{ chapterPoint}}</li> 391 <li>{{ chapterPoint}}</li>
392 </ul> 392 </ul>
393 </h5> 393 </h5>
394 </v-flex> 394 </v-flex>
395 </v-layout> 395 </v-layout>
396 <!-- LINK TO PDF --> 396 <!-- LINK TO PDF -->
397 <!-- <v-layout row justify-center v-show="editedItem.pdfFileUrl != ''"> 397 <!-- <v-layout row justify-center v-show="editedItem.pdfFileUrl != ''">
398 <v-flex xs6> 398 <v-flex xs6>
399 <div style="width: 100%;"> 399 <div style="width: 100%;">
400 <a 400 <a
401 :href="editedItem.pdfFileUrl" 401 :href="editedItem.pdfFileUrl"
402 target="_blank" 402 target="_blank"
403 style="text-decoration: none!important;" 403 style="text-decoration: none!important;"
404 > 404 >
405 <v-btn flat block> 405 <v-btn flat block>
406 <span> 406 <span>
407 <h5> 407 <h5>
408 <b>Open PDF</b> 408 <b>Open PDF</b>
409 </h5> 409 </h5>
410 </span> 410 </span>
411 </v-btn> 411 </v-btn>
412 </a> 412 </a>
413 </div> 413 </div>
414 </v-flex> 414 </v-flex>
415 </v-layout>--> 415 </v-layout>-->
416 </v-flex> 416 </v-flex>
417 </v-layout> 417 </v-layout>
418 </v-container> 418 </v-container>
419 </v-card-text> 419 </v-card-text>
420 </v-card> 420 </v-card>
421 </v-dialog> 421 </v-dialog>
422 422
423 <!-- ****** Course Detail TABLE ****** --> 423 <!-- ****** Course Detail TABLE ****** -->
424 <v-toolbar color="transparent" flat> 424 <v-toolbar color="transparent" flat>
425 <!-- <v-flex xs1> 425 <!-- <v-flex xs1>
426 <v-btn round class="open-dialog-button" dark @click="addCourseDetailDialog = true"> 426 <v-btn round class="open-dialog-button" dark @click="addCourseDetailDialog = true">
427 <v-icon size="20">add</v-icon> 427 <v-icon size="20">add</v-icon>
428 <span class="hidden-sm-and-down">Add Course Detail</span> 428 <span class="hidden-sm-and-down">Add Course Detail</span>
429 <span class="hidden-md-and-up">Add</span> 429 <span class="hidden-md-and-up">Add</span>
430 </v-btn> 430 </v-btn>
431 </v-flex>--> 431 </v-flex>-->
432 <v-btn 432 <v-btn
433 fab 433 fab
434 dark 434 dark
435 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 435 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
436 small 436 small
437 @click="addCourseDetailDialog = true" 437 @click="addCourseDetailDialog = true"
438 > 438 >
439 <v-icon dark>add</v-icon> 439 <v-icon dark>add</v-icon>
440 </v-btn> 440 </v-btn>
441 <v-flex xs1 class="hidden-sm-only hidden-xs-only"> 441 <v-flex xs1 class="hidden-sm-only hidden-xs-only">
442 <v-btn round class="open-dialog-button" dark @click="addCourseDetailDialog = true"> 442 <v-btn round class="open-dialog-button" dark @click="addCourseDetailDialog = true">
443 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Course Detail 443 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Course Detail
444 </v-btn> 444 </v-btn>
445 </v-flex> 445 </v-flex>
446 <v-spacer></v-spacer> 446 <v-spacer></v-spacer>
447 <v-flex xs12 sm4 md2> 447 <v-flex xs12 sm4 md2>
448 <v-select 448 <v-select
449 :items="addclass" 449 :items="addclass"
450 label="Select Class" 450 label="Select Class"
451 v-model="getCourse.classId" 451 v-model="getCourse.classId"
452 item-text="classNum" 452 item-text="classNum"
453 item-value="_id" 453 item-value="_id"
454 name="Select Class" 454 name="Select Class"
455 @change="getCourses(getCourse.classId)" 455 @change="getCourses(getCourse.classId)"
456 required 456 required
457 ></v-select> 457 ></v-select>
458 </v-flex> 458 </v-flex>
459 <v-flex xs12 sm4 md2 class="ml-2"> 459 <v-flex xs12 sm4 md2 class="ml-2">
460 <v-select 460 <v-select
461 :items="courseData" 461 :items="courseData"
462 label="Select Course" 462 label="Select Course"
463 v-model="getCourse.courseId" 463 v-model="getCourse.courseId"
464 item-text="courseName" 464 item-text="courseName"
465 item-value="_id" 465 item-value="_id"
466 required 466 required
467 @change="getCourseDetailsList(getCourse.courseId)" 467 @change="getCourseDetailsList(getCourse.courseId)"
468 ></v-select> 468 ></v-select>
469 </v-flex> 469 </v-flex>
470 470
471 <v-flex xs12 sm1 v-if="show"> 471 <v-flex xs12 sm1 v-if="show">
472 <v-btn icon large flat @click="show = false;showSearch = true;"> 472 <v-btn icon large flat @click="show = false;showSearch = true;">
473 <v-avatar size="27"> 473 <v-avatar size="27">
474 <img src="/static/icon/search.png" alt="icon" /> 474 <img src="/static/icon/search.png" alt="icon" />
475 </v-avatar> 475 </v-avatar>
476 </v-btn> 476 </v-btn>
477 </v-flex> 477 </v-flex>
478 478
479 <v-flex xs12 sm3 md3 v-if="showSearch" class="ml-2"> 479 <v-flex xs12 sm3 md3 v-if="showSearch" class="ml-2">
480 <div style="display: inline-block;width: 70%;"> 480 <div style="display: inline-block;width: 70%;">
481 <v-text-field 481 <v-text-field
482 autofocus 482 autofocus
483 v-model="search" 483 v-model="search"
484 label="Search" 484 label="Search"
485 prepend-inner-icon="search" 485 prepend-inner-icon="search"
486 color="primary" 486 color="primary"
487 ></v-text-field> 487 ></v-text-field>
488 </div> 488 </div>
489 <div style="display: inline-block;"> 489 <div style="display: inline-block;">
490 <v-icon @click="closeSearch" color="error">close</v-icon> 490 <v-icon @click="closeSearch" color="error">close</v-icon>
491 </div> 491 </div>
492 </v-flex> 492 </v-flex>
493 </v-toolbar> 493 </v-toolbar>
494 494
495 <v-data-table 495 <v-data-table
496 :headers="headers" 496 :headers="headers"
497 :items="CourseDetailsList" 497 :items="CourseDetailsList"
498 :pagination.sync="pagination" 498 :pagination.sync="pagination"
499 :search="search" 499 :search="search"
500 item-key="_id" 500 item-key="_id"
501 > 501 >
502 <template slot="items" slot-scope="props"> 502 <template slot="items" slot-scope="props">
503 <tr class="tr" @click="courseTableRow(props.item._id)"> 503 <tr class="tr" @click="courseTableRow(props.item._id)">
504 <td class="td td-row">{{ props.index + 1}}</td> 504 <td class="td td-row">{{ props.index + 1}}</td>
505 <td class="td td-row text-xs-center">{{ props.item.classId.classNum }}</td> 505 <td class="td td-row text-xs-center">{{ props.item.classId.classNum }}</td>
506 <td class="td td-row text-xs-center">{{ props.item.courseId.courseName }}</td> 506 <td class="td td-row text-xs-center">{{ props.item.courseId.courseName }}</td>
507 <td class="td td-row text-xs-center"> 507 <td class="td td-row text-xs-center">
508 <div style="vertical-align: top;"> 508 <div style="vertical-align: top;">
509 <v-tooltip top> 509 <v-tooltip top>
510 <v-icon 510 <v-icon
511 slot="activator" 511 slot="activator"
512 style="cursor:pointer;font-size:22px;position: relative;top: -4px; " 512 style="cursor:pointer;font-size:22px;position: relative;top: -4px; "
513 class="mr-3" 513 class="mr-3"
514 @click="addChapters(props.item)" 514 @click="addChapters(props.item)"
515 >add_circle_outline</v-icon> 515 >add_circle_outline</v-icon>
516 <span>Add</span> 516 <span>Add</span>
517 </v-tooltip> 517 </v-tooltip>
518 <v-tooltip top> 518 <v-tooltip top>
519 <img 519 <img
520 slot="activator" 520 slot="activator"
521 style="cursor:pointer; width:25px; height:25px; " 521 style="cursor:pointer; width:25px; height:25px; "
522 class="mr-3" 522 class="mr-3"
523 @click="props.expanded = !props.expanded" 523 @click="props.expanded = !props.expanded"
524 src="/static/icon/view.png" 524 src="/static/icon/view.png"
525 /> 525 />
526 <span>View</span> 526 <span>View</span>
527 </v-tooltip> 527 </v-tooltip>
528 <v-tooltip top> 528 <v-tooltip top>
529 <img 529 <img
530 slot="activator" 530 slot="activator"
531 style="cursor:pointer; width:20px; height:18px; " 531 style="cursor:pointer; width:20px; height:18px; "
532 class="mr-3" 532 class="mr-3"
533 @click="editItem(props.item)" 533 @click="editItem(props.item)"
534 src="/static/icon/edit.png" 534 src="/static/icon/edit.png"
535 /> 535 />
536 <span>Edit</span> 536 <span>Edit</span>
537 </v-tooltip> 537 </v-tooltip>
538 <v-tooltip top> 538 <v-tooltip top>
539 <img 539 <img
540 slot="activator" 540 slot="activator"
541 style="cursor:pointer; width:20px; height:20px; " 541 style="cursor:pointer; width:20px; height:20px; "
542 class="mr-3" 542 class="mr-3"
543 @click="deleteItem(props.item)" 543 @click="deleteItem(props.item)"
544 src="/static/icon/delete.png" 544 src="/static/icon/delete.png"
545 /> 545 />
546 <span>Delete</span> 546 <span>Delete</span>
547 </v-tooltip> 547 </v-tooltip>
548 </div> 548 </div>
549 </td> 549 </td>
550 </tr> 550 </tr>
551 </template> 551 </template>
552 <!-- CHAPTERS IN A COURSE --> 552 <!-- CHAPTERS IN A COURSE -->
553 <template slot="expand"> 553 <template slot="expand">
554 <v-data-table :items="chapters" hide-actions item-key="chapterName" style="width: auto;"> 554 <v-data-table :items="chapters" hide-actions item-key="chapterName" style="width: auto;">
555 <template slot="items" slot-scope="props"> 555 <template slot="items" slot-scope="props">
556 <tr class="tr" @click="props.expanded = !props.expanded"> 556 <tr class="tr" @click="props.expanded = !props.expanded">
557 <td class="td td-row">{{ props.index + 1}}</td> 557 <td class="td td-row">{{ props.index + 1}}</td>
558 <td class="text-xs-center td td-row">{{ props.item.chapterName}}</td> 558 <td class="text-xs-center td td-row">{{ props.item.chapterName}}</td>
559 <td class="text-xs-center td td-row">{{ props.item.description }}</td> 559 <td class="text-xs-center td td-row">{{ props.item.description }}</td>
560 <td class="text-xs-center td td-row"> 560 <td class="text-xs-center td td-row">
561 <v-tooltip top> 561 <v-tooltip top>
562 <v-icon 562 <v-icon
563 slot="activator" 563 slot="activator"
564 style="cursor:pointer;font-size:22px;position: relative;top: -4px; " 564 style="cursor:pointer;font-size:22px;position: relative;top: -4px; "
565 class="mr-3" 565 class="mr-3"
566 @click="$router.push({name: 'Live Online Class', query: {chapterId: props.item._id, chapterName: props.item.chapterName, courseId: getCourse.courseId, classId: getCourse.classId }})" 566 @click="$router.push({name: 'Live Online Class', query: {chapterId: props.item._id, chapterName: props.item.chapterName, courseId: getCourse.courseId, classId: getCourse.classId }})"
567 >video_call</v-icon> 567 >video_call</v-icon>
568 <span>Live Session</span> 568 <span>Live Session</span>
569 </v-tooltip> 569 </v-tooltip>
570 <v-tooltip top> 570 <v-tooltip top>
571 <img 571 <img
572 slot="activator" 572 slot="activator"
573 style="cursor:pointer; width:25px; height:25px; " 573 style="cursor:pointer; width:25px; height:25px; "
574 class="mr-3" 574 class="mr-3"
575 @click="profile(props.item)" 575 @click="profile(props.item)"
576 src="/static/icon/view.png" 576 src="/static/icon/view.png"
577 /> 577 />
578 <span>View</span> 578 <span>View</span>
579 </v-tooltip> 579 </v-tooltip>
580 <v-tooltip top> 580 <v-tooltip top>
581 <img 581 <img
582 slot="activator" 582 slot="activator"
583 style="cursor:pointer; width:20px; height:18px; " 583 style="cursor:pointer; width:20px; height:18px; "
584 class="mr-3" 584 class="mr-3"
585 @click="editChapterItem(props.item)" 585 @click="editChapterItem(props.item)"
586 src="/static/icon/edit.png" 586 src="/static/icon/edit.png"
587 /> 587 />
588 <span>Edit</span> 588 <span>Edit</span>
589 </v-tooltip> 589 </v-tooltip>
590 <v-tooltip top> 590 <v-tooltip top>
591 <img 591 <img
592 slot="activator" 592 slot="activator"
593 style="cursor:pointer; width:20px; height:20px; " 593 style="cursor:pointer; width:20px; height:20px; "
594 class="mr-3" 594 class="mr-3"
595 @click="deleteChapters(props.item)" 595 @click="deleteChapters(props.item)"
596 src="/static/icon/delete.png" 596 src="/static/icon/delete.png"
597 /> 597 />
598 <span>Delete Chapter</span> 598 <span>Delete Chapter</span>
599 </v-tooltip> 599 </v-tooltip>
600 <v-tooltip top>
601 <img
602 slot="activator"
603 style="cursor:pointer; width:20px; height:20px; "
604 class="mr-3"
605 src="/static/icon/dashboard icons-34.png"
606 @click="openLink(props.item.pdfFileUrl)"
607 />
608 <span>
609 <h5>{{props.item.fileName}}</h5>
610 </span>
611 </v-tooltip>
600 <v-tooltip top> 612 </td>
601 <img 613 </tr>
602 slot="activator" 614 </template>
603 style="cursor:pointer; width:20px; height:20px; " 615 </v-data-table>
604 class="mr-3" 616 </template>
605 src="/static/icon/dashboard icons-34.png" 617
606 @click="openLink(props.item.pdfFileUrl)" 618 <v-alert
607 /> 619 slot="no-results"
608 <span> 620 :value="true"
609 <h5>{{props.item.fileName}}</h5> 621 color="error"
610 </span> 622 icon="warning"
611 </v-tooltip> 623 >Your search for "{{ search }}" found no results.</v-alert>
612 </td> 624 </v-data-table>
613 </tr> 625 <!-- ****** ADD Course Detail ****** -->
614 </template> 626 <v-dialog v-model="addCourseDetailDialog" max-width="600px" persistent>
615 </v-data-table> 627 <v-card flat class="card-style pa-2" dark>
616 </template> 628 <v-layout>
617 629 <v-flex xs12>
618 <v-alert 630 <label class="title text-xs-center">Add Course Details</label>
619 slot="no-results" 631 <v-icon
620 :value="true" 632 size="24"
621 color="error" 633 class="right"
622 icon="warning" 634 @click="addCourseDetailDialog = false; clear() ; trigger = 'reset' ; emptyPdf = 'reset' "
623 >Your search for "{{ search }}" found no results.</v-alert> 635 >cancel</v-icon>
624 </v-data-table> 636 </v-flex>
625 <!-- ****** ADD Course Detail ****** --> 637 </v-layout>
626 <v-dialog v-model="addCourseDetailDialog" max-width="600px" persistent> 638 <v-form ref="form" v-model="valid" lazy-validation>
627 <v-card flat class="card-style pa-2" dark> 639 <v-container fluid>
628 <v-layout> 640 <v-flex xs12>
629 <v-flex xs12> 641 <v-layout>
630 <label class="title text-xs-center">Add Course Details</label> 642 <v-flex xs4 class="pt-4 subheading">
631 <v-icon 643 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
632 size="24" 644 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
633 class="right" 645 </v-flex>
634 @click="addCourseDetailDialog = false; clear() ; trigger = 'reset' ; emptyPdf = 'reset' " 646 <v-flex xs8 sm8 md7 class="ml-3">
635 >cancel</v-icon> 647 <v-select
636 </v-flex> 648 :items="addclass"
637 </v-layout> 649 label="Select Class"
638 <v-form ref="form" v-model="valid" lazy-validation> 650 v-model="addCourseDetail.classId"
639 <v-container fluid> 651 item-text="classNum"
640 <v-flex xs12> 652 item-value="_id"
641 <v-layout> 653 name="Select Class"
642 <v-flex xs4 class="pt-4 subheading"> 654 :rules="clsssRules"
643 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label> 655 @change="getCourses(addCourseDetail.classId)"
644 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> 656 required
645 </v-flex> 657 ></v-select>
646 <v-flex xs8 sm8 md7 class="ml-3"> 658 </v-flex>
647 <v-select 659 </v-layout>
648 :items="addclass" 660 </v-flex>
649 label="Select Class" 661 <v-flex xs12>
650 v-model="addCourseDetail.classId" 662 <v-layout>
651 item-text="classNum" 663 <v-flex xs4 class="pt-4 subheading">
652 item-value="_id" 664 <label class="right hidden-xs-only hidden-sm-only">Select Course:</label>
653 name="Select Class" 665 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Course:</label>
654 :rules="clsssRules" 666 </v-flex>
655 @change="getCourses(addCourseDetail.classId)" 667 <v-flex xs8 sm8 md7 class="ml-3">
656 required 668 <v-select
657 ></v-select> 669 :items="courseData"
658 </v-flex> 670 label="Select Course"
659 </v-layout> 671 v-model="addCourseDetail.courseId"
660 </v-flex> 672 item-text="courseName"
661 <v-flex xs12> 673 item-value="_id"
662 <v-layout> 674 :rules="courseRules"
663 <v-flex xs4 class="pt-4 subheading"> 675 required
664 <label class="right hidden-xs-only hidden-sm-only">Select Course:</label> 676 ></v-select>
665 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Course:</label> 677 </v-flex>
666 </v-flex> 678 </v-layout>
667 <v-flex xs8 sm8 md7 class="ml-3"> 679 </v-flex>
668 <v-select 680 <v-flex xs12>
669 :items="courseData" 681 <v-layout>
670 label="Select Course" 682 <v-flex xs4 class="pt-4 subheading">
671 v-model="addCourseDetail.courseId" 683 <label class="right">Chapter Name:</label>
672 item-text="courseName" 684 </v-flex>
673 item-value="_id" 685 <v-flex xs8 sm8 md7 class="ml-3">
674 :rules="courseRules" 686 <v-text-field
675 required 687 v-model="addCourseDetail.chapterName"
676 ></v-select> 688 placeholder="fill your Title"
677 </v-flex> 689 name="name"
678 </v-layout> 690 type="text"
679 </v-flex> 691 :rules="chapterNameRules"
680 <v-flex xs12> 692 required
681 <v-layout> 693 ></v-text-field>
682 <v-flex xs4 class="pt-4 subheading"> 694 </v-flex>
683 <label class="right">Chapter Name:</label> 695 </v-layout>
684 </v-flex> 696 </v-flex>
685 <v-flex xs8 sm8 md7 class="ml-3"> 697 <!-- DESCRIPTION -->
686 <v-text-field 698 <v-flex xs12>
687 v-model="addCourseDetail.chapterName" 699 <v-layout>
688 placeholder="fill your Title" 700 <v-flex xs4 class="pt-4 subheading">
689 name="name" 701 <label class="right">Description:</label>
690 type="text" 702 </v-flex>
691 :rules="chapterNameRules" 703 <v-flex xs8 sm8 md7 class="ml-3">
692 required 704 <v-text-field
693 ></v-text-field> 705 placeholder="fill your Description"
694 </v-flex> 706 :rules="descriptionRules"
695 </v-layout> 707 v-model="addCourseDetail.description"
696 </v-flex> 708 type="text"
697 <!-- DESCRIPTION --> 709 name="email"
698 <v-flex xs12> 710 required
699 <v-layout> 711 ></v-text-field>
700 <v-flex xs4 class="pt-4 subheading"> 712 </v-flex>
701 <label class="right">Description:</label> 713 </v-layout>
702 </v-flex> 714 </v-flex>
703 <v-flex xs8 sm8 md7 class="ml-3"> 715 <!-- UPLOAD PPT -->
704 <v-text-field 716 <!-- <v-flex xs12>
705 placeholder="fill your Description" 717 <v-layout>
706 :rules="descriptionRules" 718 <v-flex xs4 class="pt-4 subheading">
707 v-model="addCourseDetail.description" 719 <label class="right">Upload PPT:</label>
708 type="text" 720 </v-flex>
709 name="email" 721 <v-flex xs8 sm8 md7 class="ml-3">
710 required 722 <UploadFiles
711 ></v-text-field> 723 @fileSelected="fileSelected($event,'uploadPPT')"
712 </v-flex> 724 label="Add PPT"
713 </v-layout> 725 reference="newCoursePpt"
714 </v-flex> 726 id="newCoursePptInput"
715 <!-- UPLOAD PPT --> 727 :trigger="trigger"
716 <!-- <v-flex xs12> 728 ></UploadFiles>
717 <v-layout> 729 </v-flex>
718 <v-flex xs4 class="pt-4 subheading"> 730 </v-layout>
719 <label class="right">Upload PPT:</label> 731 </v-flex>-->
720 </v-flex> 732 <!-- UPLOAD PDF -->
721 <v-flex xs8 sm8 md7 class="ml-3"> 733 <v-flex xs12>
722 <UploadFiles 734 <v-layout>
723 @fileSelected="fileSelected($event,'uploadPPT')" 735 <v-flex xs4 class="pt-4 subheading">
724 label="Add PPT" 736 <label class="right">Upload PDF:</label>
725 reference="newCoursePpt" 737 </v-flex>
726 id="newCoursePptInput" 738 <v-flex xs8 sm8 md7 class="ml-3">
727 :trigger="trigger" 739 <UploadPdf
728 ></UploadFiles> 740 @pdfFileSelected="pdfFileSelected($event,'uploadPDF')"
729 </v-flex> 741 label="Add PDF"
730 </v-layout> 742 reference="newCoursePdf"
731 </v-flex>--> 743 id="newCoursePdfInput"
732 <!-- UPLOAD PDF --> 744 :emptyPdf="emptyPdf"
733 <v-flex xs12> 745 ></UploadPdf>
734 <v-layout> 746 </v-flex>
735 <v-flex xs4 class="pt-4 subheading"> 747 </v-layout>
736 <label class="right">Upload PDF:</label> 748 </v-flex>
737 </v-flex> 749 <v-layout>
738 <v-flex xs8 sm8 md7 class="ml-3"> 750 <v-flex xs12>
739 <UploadPdf 751 <div v-for="(chapterPoints,index) in finds" :key="index">
740 @pdfFileSelected="pdfFileSelected($event,'uploadPDF')" 752 <v-layout>
741 label="Add PDF" 753 <v-flex xs4 class="pt-4 subheading">
742 reference="newCoursePdf" 754 <label class="right">Chapter Points:</label>
743 id="newCoursePdfInput" 755 </v-flex>
744 :emptyPdf="emptyPdf" 756 <v-flex xs8 sm8 md6 class="ml-3">
745 ></UploadPdf> 757 <v-text-field
746 </v-flex> 758 placeholder="fill your Chapter Points"
747 </v-layout> 759 v-model="chapterPoints.value"
748 </v-flex> 760 type="text"
749 <v-layout> 761 required
750 <v-flex xs12> 762 ></v-text-field>
751 <div v-for="(chapterPoints,index) in finds" :key="index"> 763 </v-flex>
752 <v-layout> 764 <v-flex xs2 class="pt-4">
753 <v-flex xs4 class="pt-4 subheading"> 765 <v-icon @click="deleteFind(index)" v-if="index !=0 ">cancel</v-icon>
754 <label class="right">Chapter Points:</label> 766 <v-icon @click="addFind">add_circle</v-icon>
755 </v-flex> 767 </v-flex>
756 <v-flex xs8 sm8 md6 class="ml-3"> 768 </v-layout>
757 <v-text-field 769 </div>
758 placeholder="fill your Chapter Points" 770 </v-flex>
759 v-model="chapterPoints.value" 771 </v-layout>
760 type="text" 772 <v-layout>
761 required 773 <v-flex xs12 sm12>
762 ></v-text-field> 774 <v-layout class="right">
763 </v-flex> 775 <v-btn @click="clear();" round dark class="clear-button">Clear</v-btn>
764 <v-flex xs2 class="pt-4"> 776 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
765 <v-icon @click="deleteFind(index)" v-if="index !=0 ">cancel</v-icon> 777 </v-layout>
766 <v-icon @click="addFind">add_circle</v-icon> 778 </v-flex>
767 </v-flex> 779 </v-layout>
768 </v-layout> 780 </v-container>
769 </div> 781 </v-form>
770 </v-flex> 782 </v-card>
771 </v-layout> 783 </v-dialog>
772 <v-layout> 784 <v-snackbar
773 <v-flex xs12 sm12> 785 :timeout="timeout"
774 <v-layout class="right"> 786 :top="y === 'top'"
775 <v-btn @click="clear();" round dark class="clear-button">Clear</v-btn> 787 :right="x === 'right'"
776 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> 788 :vertical="mode === 'vertical'"
777 </v-layout> 789 v-model="snackbar"
778 </v-flex> 790 :color="color"
779 </v-layout> 791 >{{ text }}</v-snackbar>
780 </v-container> 792 <div class="loader" v-if="showLoader">
781 </v-form> 793 <v-progress-circular indeterminate color="white"></v-progress-circular>
782 </v-card> 794 </div>
783 </v-dialog> 795 </v-container>
784 <v-snackbar 796 </template>
785 :timeout="timeout" 797
786 :top="y === 'top'" 798 <script>
787 :right="x === 'right'" 799 import http from "@/Services/http.js";
788 :vertical="mode === 'vertical'" 800 import UploadFiles from "@/pages/Common/UploadFiles.vue";
789 v-model="snackbar" 801 import UploadPdf from "@/pages/Common/UploadPdf.vue";
790 :color="color" 802 import AllApiCalls from "@/Services/AllApiCalls.js";
791 >{{ text }}</v-snackbar> 803
792 <div class="loader" v-if="showLoader"> 804 export default {
793 <v-progress-circular indeterminate color="white"></v-progress-circular> 805 mixins: [AllApiCalls],
794 </div> 806 components: {
795 </v-container> 807 UploadFiles,
796 </template> 808 UploadPdf,
797 809 },
798 <script> 810 data: () => ({
799 import http from "@/Services/http.js"; 811 snackbar: false,
800 import UploadFiles from "@/pages/Common/UploadFiles.vue"; 812 y: "top",
801 import UploadPdf from "@/pages/Common/UploadPdf.vue"; 813 x: "right",
802 import AllApiCalls from "@/Services/AllApiCalls.js"; 814 mode: "",
803 815 timeout: 3000,
804 export default { 816 text: "",
805 mixins: [AllApiCalls], 817 loading: false,
806 components: { 818 color: "",
807 UploadFiles, 819 date: null,
808 UploadPdf, 820 search: "",
809 }, 821 show: true,
810 data: () => ({ 822 addCourseDetailDialog: false,
811 snackbar: false, 823 showSearch: false,
812 y: "top", 824 showLoader: false,
813 x: "right", 825 editCourseDetailDialog: false,
814 mode: "", 826 editChapterDetailDialog: false,
815 timeout: 3000, 827 viewProfileGallery: false,
816 text: "", 828 valid: true,
817 loading: false, 829 editLoading: false,
818 color: "", 830 addclass: [],
819 date: null, 831 courseData: [],
820 search: "", 832 addSection: [],
821 show: true, 833 getCourse: {},
822 addCourseDetailDialog: false, 834 finds: [{ value: "" }],
823 showSearch: false, 835 findsChapterPoint: [{ value: "" }],
824 showLoader: false, 836 updates: [],
825 editCourseDetailDialog: false, 837 youTubeLink: {},
826 editChapterDetailDialog: false, 838 addCourseDetail: {
827 viewProfileGallery: false, 839 chapters: [
828 valid: true, 840 {
829 editLoading: false, 841 chapterName: "",
830 addclass: [], 842 description: "",
831 courseData: [], 843 chapterPoints: [],
832 addSection: [], 844 },
833 getCourse: {}, 845 ],
834 finds: [{ value: "" }], 846 },
835 findsChapterPoint: [{ value: "" }], 847 chapters: [],
836 updates: [], 848 pagination: {
837 youTubeLink: {}, 849 rowsPerPage: 10,
838 addCourseDetail: { 850 },
839 chapters: [ 851 editFiles: [],
840 { 852 files: [],
841 chapterName: "", 853 courseData: [],
842 description: "", 854 token: "",
843 chapterPoints: [], 855 courseId: "",
844 }, 856 clsssRules: [(v) => !!v || " Class is required"],
845 ], 857 courseRules: [(v) => !!v || " Course is required"],
846 }, 858 chapterNameRules: [(v) => !!v || " Tilte is required"],
847 chapters: [], 859 descriptionRules: [(v) => !!v || " Description is required"],
848 pagination: { 860 headers: [
849 rowsPerPage: 10, 861 {
850 }, 862 align: "",
851 editFiles: [], 863 text: "No",
852 files: [], 864 sortable: false,
853 courseData: [], 865 value: "index",
854 token: "", 866 },
855 courseId: "", 867 {
856 clsssRules: [(v) => !!v || " Class is required"], 868 text: "Class Name",
857 courseRules: [(v) => !!v || " Course is required"], 869 value: "classNum",
858 chapterNameRules: [(v) => !!v || " Tilte is required"], 870 sortable: false,
859 descriptionRules: [(v) => !!v || " Description is required"], 871 align: "center",
860 headers: [ 872 },
861 { 873 {
862 align: "", 874 text: "Course Name",
863 text: "No", 875 value: "courseName",
864 sortable: false, 876 sortable: false,
865 value: "index", 877 align: "center",
866 }, 878 },
867 { 879 { text: "Action", value: "", sortable: false, align: "center" },
868 text: "Class Name", 880 ],
869 value: "classNum", 881 CourseDetailsList: [],
870 sortable: false, 882 editedIndex: -1,
871 align: "center", 883 editedItem: {},
872 }, 884 editedCourse: {},
873 { 885 editChapter: {
874 text: "Course Name", 886 chapterPoints: [],
875 value: "courseName", 887 },
876 sortable: false, 888 index: "",
877 align: "center", 889 addChapterItem: {},
878 }, 890 addChapterItemObj: {},
879 { text: "Action", value: "", sortable: false, align: "center" }, 891 addChapterDialog: false,
880 ], 892 showData: false,
881 CourseDetailsList: [], 893 }),
882 editedIndex: -1, 894 methods: {
895 openLink(url) {
896 window.open(url, "_blank");
897 },
883 editedItem: {}, 898 getCourses(classId) {
884 editedCourse: {}, 899 this.showLoader = true;
885 editChapter: { 900 http()
886 chapterPoints: [], 901 .get("/getCourseesList", {
887 }, 902 params: {
888 index: "", 903 classId: classId,
889 addChapterItem: {}, 904 },
890 addChapterItemObj: {}, 905 })
891 addChapterDialog: false, 906 .then((response) => {
892 showData: false, 907 this.editChapter.courseId = "";
893 }), 908 this.courseData = response.data.data;
894 methods: { 909 // console.log("this.courseData", this.courseData);
895 openLink(url) { 910 this.showLoader = false;
896 window.open(url, "_blank"); 911 })
897 }, 912 .catch((err) => {
898 getCourses(classId) { 913 console.log("err====>", err);
899 this.showLoader = true; 914 this.showLoader = false;
900 http() 915 });
901 .get("/getCourseesList", { 916 },
902 params: { 917 getCourseDetailsList() {
903 classId: classId, 918 this.showLoader = true;
904 }, 919 http()
905 }) 920 .get("/getParticularCourseDetail", {
906 .then((response) => { 921 params: {
907 this.editChapter.courseId = ""; 922 courseId: this.getCourse.courseId,
908 this.courseData = response.data.data; 923 },
909 // console.log("this.courseData", this.courseData); 924 })
910 this.showLoader = false; 925 .then((response) => {
911 }) 926 this.CourseDetailsList = response.data.data;
912 .catch((err) => { 927 if (this.CourseDetailsList.length === 0) {
913 console.log("err====>", err); 928 this.showLoader = false;
914 this.showLoader = false; 929 this.snackbar = true;
915 }); 930 this.text = "Data not found!";
916 }, 931 this.color = "error";
917 getCourseDetailsList() { 932 return;
918 this.showLoader = true; 933 }
919 http() 934 this.showData = true;
920 .get("/getParticularCourseDetail", { 935 if (response.data.data[0]) {
921 params: { 936 this.chapters = response.data.data[0].chapters;
922 courseId: this.getCourse.courseId, 937 }
923 }, 938 this.showLoader = false;
924 }) 939 })
925 .then((response) => { 940 .catch((error) => {
926 this.CourseDetailsList = response.data.data; 941 // console.log("err====>", err);
927 if (this.CourseDetailsList.length === 0) { 942 this.showLoader = false;
928 this.showLoader = false; 943 if (error.response.status === 401) {
929 this.snackbar = true; 944 this.$router.replace({ path: "/" });
930 this.text = "Data not found!"; 945 this.$store.dispatch("setToken", null);
931 this.color = "error"; 946 this.$store.dispatch("Id", null);
932 return; 947 }
933 } 948 });
934 this.showData = true; 949 },
935 if (response.data.data[0]) { 950 courseTableRow(id) {
936 this.chapters = response.data.data[0].chapters; 951 this.courseId = id;
937 } 952 },
938 this.showLoader = false; 953 addChapters(item) {
939 }) 954 this.editedIndex = this.CourseDetailsList.indexOf(item);
940 .catch((error) => { 955 this.addChapterItemObj = Object.assign({}, item);
941 // console.log("err====>", err); 956 this.addChapterItem.courseDetailId = this.addChapterItemObj._id;
942 this.showLoader = false; 957 this.addChapterDialog = true;
943 if (error.response.status === 401) { 958 },
944 this.$router.replace({ path: "/" }); 959 submitChapter() {
960 // console.log("addChapterItem", this.addChapterItem);
945 this.$store.dispatch("setToken", null); 961 this.addChapterItem.chapterPoints = [];
946 this.$store.dispatch("Id", null); 962 for (let i = 0; i < this.findsChapterPoint.length; i++) {
947 } 963 this.addChapterItem.chapterPoints.push(this.findsChapterPoint[i].value);
948 }); 964 }
965 this.addChapterItem.uploadPdf = this.pdfFile;
966 this.addChapterItem.uploadPpt = this.pptFile;
967 this.addChapterItem.fileName = this.pdfFileName;
949 }, 968 this.loading = true;
950 courseTableRow(id) { 969 http()
951 this.courseId = id; 970 .put("/addChapters", this.addChapterItem)
952 }, 971 .then((response) => {
953 addChapters(item) { 972 this.addChapterDialog = false;
954 this.editedIndex = this.CourseDetailsList.indexOf(item); 973 this.loading = false;
955 this.addChapterItemObj = Object.assign({}, item); 974 this.snackbar = true;
956 this.addChapterItem.courseDetailId = this.addChapterItemObj._id; 975 this.text = response.data.message;
957 this.addChapterDialog = true; 976 this.color = "green";
958 }, 977 this.addChapterItem = {};
959 submitChapter() { 978 this.removeChapterPoint();
960 // console.log("addChapterItem", this.addChapterItem); 979 this.getCourseDetailsList();
961 this.addChapterItem.chapterPoints = []; 980 })
962 for (let i = 0; i < this.findsChapterPoint.length; i++) { 981 .catch((error) => {
963 this.addChapterItem.chapterPoints.push(this.findsChapterPoint[i].value); 982 this.snackbar = true;
964 } 983 this.text = error.response.data.message;
965 this.addChapterItem.uploadPdf = this.pdfFile; 984 this.color = "error";
966 this.addChapterItem.uploadPpt = this.pptFile; 985 this.loading = false;
967 this.addChapterItem.fileName = this.pdfFileName; 986 });
968 this.loading = true; 987 },
969 http() 988 profile(item) {
970 .put("/addChapters", this.addChapterItem) 989 // console.log("chaper - ", item);
971 .then((response) => { 990 this.editedIndex = this.chapters.indexOf(item);
972 this.addChapterDialog = false; 991 this.editedItem = Object.assign({}, item);
973 this.loading = false; 992 this.viewProfileGallery = true;
974 this.snackbar = true; 993 },
975 this.text = response.data.message; 994 editItem(item) {
976 this.color = "green"; 995 this.editedIndex = this.CourseDetailsList.indexOf(item);
977 this.addChapterItem = {}; 996 this.editedCourse = Object.assign({}, item);
978 this.removeChapterPoint(); 997 this.editCourseDetailDialog = true;
979 this.getCourseDetailsList(); 998 },
980 }) 999 editChapterItem(item) {
981 .catch((error) => { 1000 this.editedIndex = this.chapters.indexOf(item);
982 this.snackbar = true; 1001 this.editChapter = Object.assign({}, item);
983 this.text = error.response.data.message; 1002 this.updates = [];
984 this.color = "error"; 1003 for (let i = 0; i < this.editChapter.chapterPoints.length; i++) {
985 this.loading = false; 1004 this.updates.push({ value: this.editChapter.chapterPoints[i] });
986 }); 1005 }
987 }, 1006 this.editChapterDetailDialog = true;
988 profile(item) { 1007 },
989 // console.log("chaper - ", item); 1008 deleteItem(item) {
990 this.editedIndex = this.chapters.indexOf(item); 1009 let deleteGallery = {
991 this.editedItem = Object.assign({}, item); 1010 courseDetailId: item._id,
992 this.viewProfileGallery = true; 1011 };
993 }, 1012 http()
994 editItem(item) { 1013 .delete(
995 this.editedIndex = this.CourseDetailsList.indexOf(item); 1014 "/deleteCourseDetail",
996 this.editedCourse = Object.assign({}, item); 1015 confirm("Are you sure you want to delete this?") && {
997 this.editCourseDetailDialog = true; 1016 params: deleteGallery,
998 }, 1017 headers: {
999 editChapterItem(item) { 1018 Authorization: "Bearer " + this.token,
1000 this.editedIndex = this.chapters.indexOf(item); 1019 },
1001 this.editChapter = Object.assign({}, item); 1020 }
1002 this.updates = []; 1021 )
1003 for (let i = 0; i < this.editChapter.chapterPoints.length; i++) { 1022 .then((response) => {
1004 this.updates.push({ value: this.editChapter.chapterPoints[i] }); 1023 this.snackbar = true;
1005 } 1024 this.text = "Successfully delete Course Details";
1006 this.editChapterDetailDialog = true; 1025 this.color = "green";
1007 }, 1026 this.getCourseDetailsList();
1008 deleteItem(item) { 1027 })
1009 let deleteGallery = { 1028 .catch((error) => {
1010 courseDetailId: item._id, 1029 // console.log(error);
1011 }; 1030 this.snackbar = true;
1012 http() 1031 this.text = error.response.data.message;
1013 .delete( 1032 this.color = "error";
1014 "/deleteCourseDetail", 1033 });
1015 confirm("Are you sure you want to delete this?") && { 1034 },
1016 params: deleteGallery, 1035 deleteChapters(item) {
1017 headers: { 1036 // console.log("item", item);
1018 Authorization: "Bearer " + this.token, 1037 let deleteChapters = {
1019 }, 1038 courseDetailId: this.courseId,
1020 } 1039 chapterId: item._id,
1021 ) 1040 };
1022 .then((response) => { 1041 http()
1023 this.snackbar = true; 1042 .put(
1024 this.text = "Successfully delete Course Details"; 1043 "/deleteChapters",
1025 this.color = "green"; 1044 confirm("Are you sure you want to delete this?") && deleteChapters
1026 this.getCourseDetailsList(); 1045 )
1027 }) 1046 .then((response) => {
1028 .catch((error) => { 1047 this.snackbar = true;
1029 // console.log(error); 1048 this.text = "Successfully delete Chapters";
1030 this.snackbar = true; 1049 this.color = "green";
1031 this.text = error.response.data.message; 1050 this.getCourseDetailsList();
1032 this.color = "error"; 1051 })
1033 }); 1052 .catch((error) => {
1034 }, 1053 // console.log(error);
1035 deleteChapters(item) { 1054 this.snackbar = true;
1036 // console.log("item", item); 1055 this.text = error.response.data.message;
1037 let deleteChapters = { 1056 this.color = "error";
1038 courseDetailId: this.courseId, 1057 });
1039 chapterId: item._id, 1058 },
1040 }; 1059 close() {
1041 http() 1060 this.editCourseDetailDialog = false;
1042 .put( 1061 },
1043 "/deleteChapters", 1062 closeProfileGallery() {
1044 confirm("Are you sure you want to delete this?") && deleteChapters 1063 this.viewProfileGallery = false;
1045 ) 1064 },
1046 .then((response) => { 1065 submit() {
1047 this.snackbar = true; 1066 let chapters = [];
1048 this.text = "Successfully delete Chapters"; 1067 var chapterPoints = [];
1049 this.color = "green"; 1068 for (let i = 0; i < this.finds.length; i++) {
1050 this.getCourseDetailsList(); 1069 chapterPoints.push(this.finds[i].value);
1051 }) 1070 // console.log("this.finds[i].value", this.finds[i].value);
1052 .catch((error) => { 1071 chapters = [
1053 // console.log(error); 1072 {
1054 this.snackbar = true; 1073 chapterName: this.addCourseDetail.chapterName,
1055 this.text = error.response.data.message; 1074 description: this.addCourseDetail.description,
1056 this.color = "error"; 1075 chapterPoints: chapterPoints,
1057 }); 1076 uploadPdf: this.pdfFile,
1058 }, 1077 uploadPpt: this.pptFile,
1078 fileName: this.pdfFileName,
1059 close() { 1079 },
1060 this.editCourseDetailDialog = false; 1080 ];
1061 }, 1081 }
1062 closeProfileGallery() { 1082 if (this.$refs.form.validate()) {
1063 this.viewProfileGallery = false; 1083 // console.log("this.addCourseDetail", this.addCourseDetail);
1064 }, 1084 var courseDetailsData = {
1065 submit() { 1085 classId: this.addCourseDetail.classId,
1066 let chapters = []; 1086 courseId: this.addCourseDetail.courseId,
1067 var chapterPoints = []; 1087 chapters: chapters,
1068 for (let i = 0; i < this.finds.length; i++) { 1088 };
1069 chapterPoints.push(this.finds[i].value); 1089 this.loading = true;
1070 // console.log("this.finds[i].value", this.finds[i].value); 1090 http()
1071 chapters = [ 1091 .post("/createCourseDetail", courseDetailsData)
1072 { 1092 .then((response) => {
1073 chapterName: this.addCourseDetail.chapterName, 1093 this.addCourseDetailDialog = false;
1074 description: this.addCourseDetail.description, 1094 this.loading = false;
1075 chapterPoints: chapterPoints, 1095 this.snackbar = true;
1076 uploadPdf: this.pdfFile, 1096 this.text = response.data.message;
1077 uploadPpt: this.pptFile, 1097 this.color = "green";
1078 fileName: this.pdfFileName, 1098 // this.clear();
1079 }, 1099 this.trigger = "reset";
1080 ]; 1100 this.emptyPdf = "reset";
1081 } 1101 http()
1082 if (this.$refs.form.validate()) { 1102 .get("/getParticularCourseDetail", {
1083 // console.log("this.addCourseDetail", this.addCourseDetail); 1103 params: {
1084 var courseDetailsData = { 1104 courseId: this.addCourseDetail.courseId,
1085 classId: this.addCourseDetail.classId, 1105 },
1086 courseId: this.addCourseDetail.courseId, 1106 })
1087 chapters: chapters, 1107 .then((response) => {
1088 }; 1108 this.CourseDetailsList = response.data.data;
1089 this.loading = true; 1109 if (this.CourseDetailsList.length === 0) {
1090 http() 1110 this.showLoader = false;
1091 .post("/createCourseDetail", courseDetailsData) 1111 this.snackbar = true;
1092 .then((response) => { 1112 this.text = "Data not found!";
1093 this.addCourseDetailDialog = false; 1113 this.color = "error";
1094 this.loading = false; 1114 return;
1095 this.snackbar = true; 1115 }
1096 this.text = response.data.message; 1116 this.showData = true;
1097 this.color = "green"; 1117 if (response.data.data[0]) {
1098 // this.clear(); 1118 this.chapters = response.data.data[0].chapters;
1099 this.trigger = "reset"; 1119 }
1100 this.emptyPdf = "reset"; 1120 this.showLoader = false;
1101 http() 1121 })
1102 .get("/getParticularCourseDetail", { 1122 .catch((error) => {
1103 params: { 1123 // console.log("err====>", err);
1104 courseId: this.addCourseDetail.courseId, 1124 this.showLoader = false;
1105 }, 1125 if (error.response.status === 401) {
1106 }) 1126 this.$router.replace({ path: "/" });
1107 .then((response) => { 1127 this.$store.dispatch("setToken", null);
1108 this.CourseDetailsList = response.data.data; 1128 this.$store.dispatch("Id", null);
1109 if (this.CourseDetailsList.length === 0) { 1129 }
1110 this.showLoader = false; 1130 });
1111 this.snackbar = true; 1131 this.removeAddFind();
1112 this.text = "Data not found!"; 1132 })
1113 this.color = "error"; 1133 .catch((error) => {
1114 return; 1134 this.snackbar = true;
1115 } 1135 this.text = error.response.data.message;
1116 this.showData = true; 1136 this.color = "error";
1117 if (response.data.data[0]) { 1137 this.loading = false;
1118 this.chapters = response.data.data[0].chapters; 1138 });
1119 } 1139 }
1120 this.showLoader = false; 1140 },
1121 }) 1141 clear() {
1122 .catch((error) => { 1142 this.$refs.form.reset();
1123 // console.log("err====>", err); 1143 },
1124 this.showLoader = false; 1144 saveChapter() {
1125 if (error.response.status === 401) { 1145 this.editedItem.courseDetailId = this.editedItem._id;
1126 this.$router.replace({ path: "/" }); 1146 // console.log("this.updates", this.updates);
1127 this.$store.dispatch("setToken", null); 1147 var chapterPoints = [];
1128 this.$store.dispatch("Id", null); 1148 for (let i = 0; i < this.updates.length; i++) {
1129 } 1149 chapterPoints.push(this.updates[i].value);
1130 }); 1150 }
1131 this.removeAddFind(); 1151 var updateData = {
1132 }) 1152 courseDetailId: this.courseId,
1133 .catch((error) => { 1153 chapterId: this.editChapter._id,
1134 this.snackbar = true; 1154 chapterName: this.editChapter.chapterName,
1135 this.text = error.response.data.message; 1155 description: this.editChapter.description,
1136 this.color = "error"; 1156 chapterPoints: chapterPoints,
1137 this.loading = false; 1157 uploadPdf: this.pdfFile,
1138 }); 1158 uploadPpt: this.pptFile,
1159 fileName: this.pdfFileName,
1139 } 1160 };
1140 }, 1161 this.editLoading = true;
1141 clear() { 1162 http()
1142 this.$refs.form.reset(); 1163 .put("/updateChapters", updateData)
1143 }, 1164 .then((response) => {
1144 saveChapter() { 1165 this.editChapterDetailDialog = false;
1145 this.editedItem.courseDetailId = this.editedItem._id; 1166 this.snackbar = true;
1146 // console.log("this.updates", this.updates); 1167 this.text = response.data.message;
1147 var chapterPoints = []; 1168 this.color = "green";
1148 for (let i = 0; i < this.updates.length; i++) { 1169 this.editLoading = false;
1149 chapterPoints.push(this.updates[i].value); 1170 // this.removeUpdatePoints();
1150 } 1171 this.trigger = "reset";
1151 var updateData = { 1172 this.emptyPdf = "reset";
1152 courseDetailId: this.courseId, 1173 http()
1153 chapterId: this.editChapter._id, 1174 .get("/getParticularCourseDetail", {
1154 chapterName: this.editChapter.chapterName, 1175 params: {
1155 description: this.editChapter.description, 1176 courseId: this.getCourse.courseId,
1156 chapterPoints: chapterPoints, 1177 },
1157 uploadPdf: this.pdfFile, 1178 })
1158 uploadPpt: this.pptFile, 1179 .then((response) => {
1159 fileName: this.pdfFileName, 1180 this.CourseDetailsList = response.data.data;
1160 }; 1181 if (this.CourseDetailsList.length === 0) {
1161 this.editLoading = true; 1182 this.showLoader = false;
1162 http() 1183 this.snackbar = true;
1163 .put("/updateChapters", updateData) 1184 this.text = "Data not found!";
1164 .then((response) => { 1185 this.color = "error";
1165 this.editChapterDetailDialog = false; 1186 return;
1166 this.snackbar = true; 1187 }
1167 this.text = response.data.message; 1188 this.showData = true;
1168 this.color = "green"; 1189 if (response.data.data[0]) {
1169 this.editLoading = false; 1190 this.chapters = response.data.data[0].chapters;
1170 // this.removeUpdatePoints(); 1191 }
1171 this.trigger = "reset"; 1192 this.showLoader = false;
1172 this.emptyPdf = "reset"; 1193 })
1173 http() 1194 .catch((error) => {
1174 .get("/getParticularCourseDetail", { 1195 // console.log("err====>", err);
1175 params: { 1196 this.showLoader = false;
1176 courseId: this.getCourse.courseId, 1197 if (error.response.status === 401) {
1177 }, 1198 this.$router.replace({ path: "/" });
1178 }) 1199 this.$store.dispatch("setToken", null);
1179 .then((response) => { 1200 this.$store.dispatch("Id", null);
1180 this.CourseDetailsList = response.data.data; 1201 }
1181 if (this.CourseDetailsList.length === 0) { 1202 });
1182 this.showLoader = false; 1203 })
1183 this.snackbar = true; 1204 .catch((error) => {
1184 this.text = "Data not found!"; 1205 this.editLoading = false;
1185 this.color = "error"; 1206 this.snackbar = true;
1186 return; 1207 this.text = error.response.data.message;
1187 } 1208 this.color = "error";
1188 this.showData = true; 1209 });
1189 if (response.data.data[0]) { 1210 },
1190 this.chapters = response.data.data[0].chapters; 1211 save() {
1191 } 1212 var updateData = {
1192 this.showLoader = false; 1213 courseDetailId: this.editedCourse._id,
1193 }) 1214 courseId: this.editedCourse.courseId._id,
1194 .catch((error) => { 1215 classId: this.editedCourse.classId._id,
1195 // console.log("err====>", err); 1216 };
1196 this.showLoader = false; 1217 this.editLoading = true;
1197 if (error.response.status === 401) { 1218 http()
1198 this.$router.replace({ path: "/" }); 1219 .put("/updateCourseDetail", updateData)
1199 this.$store.dispatch("setToken", null); 1220 .then((response) => {
1200 this.$store.dispatch("Id", null); 1221 this.getCourseDetailsList();
1201 } 1222 this.editCourseDetailDialog = false;
1202 }); 1223 this.snackbar = true;
1203 }) 1224 this.text = response.data.message;
1204 .catch((error) => { 1225 this.color = "green";
1205 this.editLoading = false; 1226 this.editLoading = false;
1206 this.snackbar = true; 1227 // this.editChapterPointName = "";
1207 this.text = error.response.data.message; 1228 this.editFiles = [];
1208 this.color = "error"; 1229 })
1209 }); 1230 .catch((error) => {
1210 }, 1231 this.editLoading = false;
1211 save() { 1232 this.snackbar = true;
1212 var updateData = { 1233 this.text = error.response.data.message;
1213 courseDetailId: this.editedCourse._id, 1234 this.color = "error";
1214 courseId: this.editedCourse.courseId._id, 1235 });
1215 classId: this.editedCourse.classId._id, 1236 },
1216 }; 1237 getAllClasses() {
1217 this.editLoading = true; 1238 http()
1218 http() 1239 .get("/getClassesList", {
1219 .put("/updateCourseDetail", updateData) 1240 headers: { Authorization: "Bearer " + this.token },
1220 .then((response) => { 1241 })
1221 this.getCourseDetailsList(); 1242 .then((response) => {
1222 this.editCourseDetailDialog = false; 1243 this.addclass = response.data.data;
1223 this.snackbar = true; 1244 })
1224 this.text = response.data.message; 1245 .catch((err) => {
1225 this.color = "green"; 1246 // console.log("err====>", err);
1226 this.editLoading = false; 1247 });
1227 // this.editChapterPointName = ""; 1248 },
1228 this.editFiles = []; 1249 removeChapterPoint: function () {
1229 }) 1250 this.findsChapterPoint = [{ value: "" }];
1230 .catch((error) => { 1251 },
1231 this.editLoading = false; 1252 removeAddFind: function () {
1232 this.snackbar = true; 1253 this.finds = [{ value: "" }];
1233 this.text = error.response.data.message; 1254 },
1234 this.color = "error"; 1255 addFind: function () {
1235 }); 1256 this.finds.push({ value: "" });
1236 }, 1257 },
1237 getAllClasses() { 1258 addChapterPoint: function () {
1238 http() 1259 this.findsChapterPoint.push({ value: "" });
1239 .get("/getClassesList", { 1260 },
1240 headers: { Authorization: "Bearer " + this.token }, 1261 update: function () {
1241 }) 1262 this.updates.push({ value: "" });
1242 .then((response) => { 1263 },
1243 this.addclass = response.data.data; 1264 // removeUpdatePoints: function() {
1244 }) 1265 // this.updates = [{ value: "" }];
1245 .catch((err) => { 1266 // },
1246 // console.log("err====>", err); 1267 deleteFind: function (index) {
1247 }); 1268 this.finds.splice(index, 1);
1248 }, 1269 if (index === 0) this.addFind();
1249 removeChapterPoint: function () { 1270 },
1250 this.findsChapterPoint = [{ value: "" }]; 1271 deleteChapterPoint: function (index) {
1251 }, 1272 this.findsChapterPoint.splice(index, 1);
1252 removeAddFind: function () { 1273 if (index === 0) this.addChapterPoint();
1253 this.finds = [{ value: "" }]; 1274 },
1254 }, 1275 deleteUpdate: function (index) {
1255 addFind: function () { 1276 this.updates.splice(index, 1);
1256 this.finds.push({ value: "" }); 1277 if (index === 0) this.update();
1257 }, 1278 },
1258 addChapterPoint: function () { 1279 deleteUrl: function (index, youTubelinkId, id) {
1259 this.findsChapterPoint.push({ value: "" }); 1280 this.editChapter.chapterPoints.splice(index, 1);
1260 }, 1281 if (index === 0) this.update();
1261 update: function () { 1282 },
1262 this.updates.push({ value: "" }); 1283 displaySearch() {
1263 }, 1284 this.show = false;
1264 // removeUpdatePoints: function() { 1285 this.showSearch = true;
1265 // this.updates = [{ value: "" }]; 1286 },
1266 // }, 1287 closeSearch() {
1267 deleteFind: function (index) { 1288 this.showSearch = false;
1268 this.finds.splice(index, 1); 1289 this.show = true;
1269 if (index === 0) this.addFind(); 1290 this.search = "";
1270 }, 1291 },
1271 deleteChapterPoint: function (index) { 1292 },
1272 this.findsChapterPoint.splice(index, 1); 1293 mounted() {
1273 if (index === 0) this.addChapterPoint(); 1294 this.token = this.$store.state.token;
1274 }, 1295 this.getAllClasses();
1275 deleteUpdate: function (index) { 1296 },
1276 this.updates.splice(index, 1); 1297 };
1277 if (index === 0) this.update(); 1298 </script>
src/pages/Course/enrollStudents.vue
Diff comments   View file @4fb0af7
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** STUDENTS TABLE ****** --> 3 <!-- ****** STUDENTS TABLE ****** -->
4 <v-toolbar color="transparent" flat> 4 <v-toolbar color="transparent" flat>
5 <v-spacer></v-spacer> 5 <v-spacer></v-spacer>
6 <v-flex xs12 sm4 md2> 6 <v-flex xs12 sm4 md2>
7 <v-select 7 <v-select
8 small 8 small
9 :items="addclass" 9 :items="addclass"
10 label="Select Class" 10 label="Select Class"
11 v-model="getReport.classId" 11 v-model="getReport.classId"
12 item-text="classNum" 12 item-text="classNum"
13 item-value="_id" 13 item-value="_id"
14 name="Select Class" 14 name="Select Class"
15 @change="getCourses(getReport.classId)" 15 @change="getCourses(getReport.classId)"
16 class="mr-2" 16 class="mr-2"
17 required 17 required
18 ></v-select> 18 ></v-select>
19 </v-flex> 19 </v-flex>
20 <v-flex xs12 sm4 md2> 20 <v-flex xs12 sm4 md2>
21 <v-select 21 <v-select
22 :items="courseData" 22 :items="courseData"
23 label="Select Course" 23 label="Select Course"
24 v-model="getReport.courseId" 24 v-model="getReport.courseId"
25 item-text="courseName" 25 item-text="courseName"
26 item-value="_id" 26 item-value="_id"
27 required 27 required
28 class="ml-2" 28 class="ml-2"
29 @change="getStudentTable(getReport.courseId)" 29 @change="getStudentTable(getReport.courseId)"
30 ></v-select> 30 ></v-select>
31 </v-flex> 31 </v-flex>
32 <v-card-title class="body-1" v-show="show"> 32 <v-card-title class="body-1" v-show="show">
33 <v-btn icon large flat @click="displaySearch"> 33 <v-btn icon large flat @click="displaySearch">
34 <v-avatar size="27"> 34 <v-avatar size="27">
35 <img src="/static/icon/search.png" alt="icon" /> 35 <img src="/static/icon/search.png" alt="icon" />
36 </v-avatar> 36 </v-avatar>
37 </v-btn> 37 </v-btn>
38 </v-card-title> 38 </v-card-title>
39 <v-flex xs8 sm8 md3 lg2 v-if="showSearch"> 39 <v-flex xs8 sm8 md3 lg2 v-if="showSearch">
40 <v-layout> 40 <v-layout>
41 <v-text-field 41 <v-text-field
42 autofocus 42 autofocus
43 v-model="search" 43 v-model="search"
44 label="Search" 44 label="Search"
45 prepend-inner-icon="search" 45 prepend-inner-icon="search"
46 color="primary" 46 color="primary"
47 ></v-text-field> 47 ></v-text-field>
48 <v-icon @click="closeSearch" color="error">close</v-icon> 48 <v-icon @click="closeSearch" color="error">close</v-icon>
49 </v-layout> 49 </v-layout>
50 </v-flex> 50 </v-flex>
51 </v-toolbar> 51 </v-toolbar>
52 <v-data-table 52 <v-data-table
53 :headers="headers" 53 :headers="headers"
54 :items="studentsData" 54 :items="studentsData"
55 :pagination.sync="pagination" 55 :pagination.sync="pagination"
56 :search="search" 56 :search="search"
57 select-all 57 select-all
58 v-model="selected" 58 v-model="selected"
59 item-key="_id" 59 item-key="_id"
60 > 60 >
61 <template slot="items" slot-scope="props"> 61 <template slot="items" slot-scope="props">
62 <tr class="tr" :active="props.selected" @click="props.selected = !props.selected"> 62 <tr class="tr" :active="props.selected" @click="props.selected = !props.selected">
63 <td class="text-xs-center td td-row"> 63 <td class="text-xs-center td td-row">
64 <v-checkbox 64 <v-checkbox
65 v-model="props.item.enroll" 65 v-model="props.item.enroll"
66 @change="selectParticularStudent(props.item)" 66 @change="selectParticularStudent(props.item)"
67 primary 67 primary
68 hide-details 68 hide-details
69 ></v-checkbox> 69 ></v-checkbox>
70 </td> 70 </td>
71 <td class="text-xs-center td td-row"> 71 <td class="text-xs-center td td-row">
72 <v-avatar size="40"> 72 <v-avatar size="40">
73 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> 73 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
74 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> 74 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
75 </v-avatar> 75 </v-avatar>
76 </td> 76 </td>
77 <td class="text-xs-center td td-row">{{ props.item.name}}</td> 77 <td class="text-xs-center td td-row">{{ props.item.name}}</td>
78 <td class="text-xs-center td td-row">{{ props.item.fatherCellNo}}</td> 78 <td class="text-xs-center td td-row">{{ props.item.fatherCellNo}}</td>
79 <td class="text-xs-center td td-row">{{ props.item.email }}</td> 79 <td class="text-xs-center td td-row">{{ props.item.email }}</td>
80 </tr> 80 </tr>
81 </template> 81 </template>
82 <template slot="headers" slot-scope="props"> 82 <template slot="headers" slot-scope="props">
83 <tr> 83 <tr>
84 <th> 84 <th>
85 <v-checkbox 85 <v-checkbox
86 :input-value="props.all" 86 :input-value="props.all"
87 :indeterminate="props.indeterminate" 87 :indeterminate="props.indeterminate"
88 primary 88 primary
89 hide-details 89 hide-details
90 @click.native="toggleAll" 90 @click.native="toggleAll"
91 ></v-checkbox> 91 ></v-checkbox>
92 </th> 92 </th>
93 <th 93 <th
94 v-for="header in props.headers" 94 v-for="header in props.headers"
95 :key="header.text" 95 :key="header.text"
96 :class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination.sortBy ? 'active' : '']" 96 :class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination.sortBy ? 'active' : '']"
97 @click="changeSort(header.value)" 97 @click="changeSort(header.value)"
98 > 98 >
99 <v-icon small>arrow_upward</v-icon> 99 <v-icon small>arrow_upward</v-icon>
100 {{ header.text }} 100 {{ header.text }}
101 </th> 101 </th>
102 </tr> 102 </tr>
103 </template> 103 </template>
104 <v-alert 104 <v-alert
105 slot="no-results" 105 slot="no-results"
106 :value="true" 106 :value="true"
107 color="error" 107 color="error"
108 icon="warning" 108 icon="warning"
109 >Your search for "{{ search }}" found no results.</v-alert> 109 >Your search for "{{ search }}" found no results.</v-alert>
110 </v-data-table> 110 </v-data-table>
111 <v-snackbar 111 <v-snackbar
112 :timeout="timeout" 112 :timeout="timeout"
113 :top="y === 'top'" 113 :top="y === 'top'"
114 :right="x === 'right'" 114 :right="x === 'right'"
115 :vertical="mode === 'vertical'" 115 :vertical="mode === 'vertical'"
116 v-model="snackbar" 116 v-model="snackbar"
117 color="success" 117 color="success"
118 >{{ text }}</v-snackbar> 118 >{{ text }}</v-snackbar>
119 <div class="loader" v-if="showLoader"> 119 <div class="loader" v-if="showLoader">
120 <v-progress-circular indeterminate color="white"></v-progress-circular> 120 <v-progress-circular indeterminate color="white"></v-progress-circular>
121 </div> 121 </div>
122 </v-container> 122 </v-container>
123 </template> 123 </template>
124 124
125 <script> 125 <script>
126 import http from "@/Services/http.js"; 126 import http from "@/Services/http.js";
127 import moment from "moment"; 127 import moment from "moment";
128 128
129 export default { 129 export default {
130 data: () => ({ 130 data: () => ({
131 snackbar: false, 131 snackbar: false,
132 y: "top", 132 y: "top",
133 x: "right", 133 x: "right",
134 mode: "", 134 mode: "",
135 timeout: 3000, 135 timeout: 3000,
136 text: "", 136 text: "",
137 show: true, 137 show: true,
138 showSearch: false, 138 showSearch: false,
139 showLoader: false, 139 showLoader: false,
140 loading: false, 140 loading: false,
141 date: null, 141 date: null,
142 search: "", 142 search: "",
143 addclass: [], 143 addclass: [],
144 pagination: { 144 pagination: {
145 rowsPerPage: 10, 145 rowsPerPage: 10,
146 }, 146 },
147 headers: [ 147 headers: [
148 { 148 {
149 text: "Profile Pic", 149 text: "Profile Pic",
150 value: "profilprofilePicUrlePicUrl", 150 value: "profilprofilePicUrlePicUrl",
151 sortable: false, 151 sortable: false,
152 align: "center", 152 align: "center",
153 }, 153 },
154 { text: "Name", value: "name", sortable: false, align: "center" }, 154 { text: "Name", value: "name", sortable: false, align: "center" },
155 { 155 {
156 text: "Mobile No", 156 text: "Mobile No",
157 value: "fatherCellNo", 157 value: "fatherCellNo",
158 sortable: false, 158 sortable: false,
159 align: "center", 159 align: "center",
160 }, 160 },
161 { text: "Email", value: "email", sortable: false, align: "center" }, 161 { text: "Email", value: "email", sortable: false, align: "center" },
162 // { text: "Action", value: "", sortable: false, align: "center" } 162 // { text: "Action", value: "", sortable: false, align: "center" }
163 ], 163 ],
164 token: "", 164 token: "",
165 selectStudents: { 165 selectStudents: {
166 select: "", 166 select: "",
167 selectSection: "", 167 selectSection: "",
168 }, 168 },
169 169
170 role: "", 170 role: "",
171 schoolRole: "", 171 schoolRole: "",
172 menu: false, 172 menu: false,
173 valid: true, 173 valid: true,
174 174
175 getReport: {}, 175 getReport: {},
176 studentsData: [], 176 studentsData: [],
177 courseData: [], 177 courseData: [],
178 addSection: [], 178 addSection: [],
179 selected: [], 179 selected: [],
180 }), 180 }),
181 methods: { 181 methods: {
182 save(date) { 182 save(date) {
183 this.$refs.menu.save(date); 183 this.$refs.menu.save(date);
184 }, 184 },
185 getAllClass() { 185 getAllClass() {
186 http() 186 http()
187 .get("/getClassesList", { 187 .get("/getClassesList", {
188 headers: { Authorization: "Bearer " + this.token }, 188 headers: { Authorization: "Bearer " + this.token },
189 }) 189 })
190 .then((response) => { 190 .then((response) => {
191 this.addclass = response.data.data; 191 this.addclass = response.data.data;
192 }) 192 })
193 .catch((error) => { 193 .catch((error) => {
194 // console.log("err====>", err); 194 // console.log("err====>", err);
195 // this.$router.replace({ path: "/" }); 195 // this.$router.replace({ path: "/" });
196 }); 196 });
197 }, 197 },
198 getCourses(classId) { 198 getCourses(classId) {
199 this.showLoader = true; 199 this.showLoader = true;
200 this.studentsData = [];
201 this.getReport.courseId = "";
200 this.studentsData = []; 202 http()
201 this.getReport.courseId = ""; 203 .get("/getCourseesList", {
202 http() 204 params: {
203 .get("/getCourseesList", { 205 classId: classId,
204 params: { 206 },
205 classId: classId, 207 })
206 }, 208 .then((response) => {
207 }) 209 this.courseData = response.data.data;
208 .then((response) => { 210 this.showLoader = false;
209 this.courseData = response.data.data; 211 })
210 this.showLoader = false; 212 .catch((err) => {
211 }) 213 console.log("err====>", err);
212 .catch((err) => { 214 this.showLoader = false;
213 console.log("err====>", err); 215 });
214 this.showLoader = false; 216 },
215 }); 217 getStudents(message) {
216 }, 218 this.showLoader = true;
217 getStudents(message) { 219 http()
218 this.showLoader = true; 220 .get("/getStudentsList", {
219 http() 221 params: {
220 .get("/getStudentsList", { 222 classId: this.getReport.classId,
221 params: { 223 },
222 classId: this.getReport.classId, 224 })
223 }, 225 .then((response) => {
224 }) 226 this.studentsData = response.data.data.filter((item) => item.status);
227 //this.studentsData = response.data.data;
225 .then((response) => { 228 this.showLoader = false;
226 this.studentsData = response.data.data.filter((item) => item.status); 229 // this.addStudentAttendenceDialog = false;
227 //this.studentsData = response.data.data; 230 var attendence = "";
228 this.showLoader = false; 231 for (let i = 0; i < this.studentsData.length; i++) {
229 // this.addStudentAttendenceDialog = false; 232 this.studentsData[i].attendence = true;
230 var attendence = ""; 233 }
231 for (let i = 0; i < this.studentsData.length; i++) { 234 this.getParticularCourse(message);
232 this.studentsData[i].attendence = true; 235 })
233 } 236 .catch((error) => {
234 this.getParticularCourse(message); 237 console.log("err====>", error);
235 }) 238 this.showLoader = false;
236 .catch((error) => { 239 });
237 console.log("err====>", error); 240 },
238 this.showLoader = false; 241 getStudentTable(id) {
239 }); 242 // console.log("id", this.getReport.courseId);
240 }, 243 this.getStudents("noSnackbar");
241 getStudentTable(id) { 244 },
242 // console.log("id", this.getReport.courseId); 245 update() {
243 this.getStudents("noSnackbar"); 246 var studentsAttendence = [];
244 }, 247 for (var j = 0; j < this.studentsData.length; j++) {
245 update() { 248 studentsAttendence.push({
246 var studentsAttendence = []; 249 studentId: this.studentsData[j]._id,
247 for (var j = 0; j < this.studentsData.length; j++) { 250 isPresent: this.studentsData[j].attendence,
248 studentsAttendence.push({ 251 });
249 studentId: this.studentsData[j]._id, 252 }
250 isPresent: this.studentsData[j].attendence, 253 if (this.$refs.form.validate()) {
251 }); 254 let attendanceData = {
252 } 255 sectionId: this.getReport.sectionId,
253 if (this.$refs.form.validate()) { 256 date: this.date,
254 let attendanceData = { 257 students: studentsAttendence,
255 sectionId: this.getReport.sectionId, 258 };
256 date: this.date, 259 http()
257 students: studentsAttendence, 260 .put("/updateAttendance", attendanceData)
258 }; 261 .then((response) => {
259 http() 262 this.snackbar = true;
260 .put("/updateAttendance", attendanceData) 263 this.text = response.data.message;
261 .then((response) => { 264 this.addStudentAttendenceDialog = false;
262 this.snackbar = true; 265 })
263 this.text = response.data.message; 266 .catch((error) => {
264 this.addStudentAttendenceDialog = false; 267 this.snackbar = true;
265 }) 268 this.text = error.response.data.message;
266 .catch((error) => { 269 });
267 this.snackbar = true; 270 }
268 this.text = error.response.data.message; 271 },
269 }); 272 toggleAll() {
270 } 273 let withdraw = false;
271 }, 274 if (this.selected.length === this.studentsData.length) withdraw = true;
272 toggleAll() { 275
273 let withdraw = false; 276 if (withdraw) {
274 if (this.selected.length === this.studentsData.length) withdraw = true; 277 var payload = {
275 278 courseId: this.getReport.courseId,
276 if (withdraw) { 279 enrollStudents: [],
277 var payload = { 280 };
278 courseId: this.getReport.courseId, 281 http()
279 enrollStudents: [], 282 .put("/enrollStudents", payload)
280 }; 283 .then((response) => {
281 http() 284 this.snackbar = true;
282 .put("/enrollStudents", payload) 285 this.text = response.data.message;
283 .then((response) => { 286 this.selected = [];
284 this.snackbar = true; 287 for (let i = 0; i < this.studentsData.length; i++) {
285 this.text = response.data.message; 288 this.studentsData[i].enroll = false;
286 this.selected = []; 289 }
287 for (let i = 0; i < this.studentsData.length; i++) { 290 this.getParticularCourse();
288 this.studentsData[i].enroll = false; 291 })
289 } 292 .catch((error) => {
290 this.getParticularCourse(); 293 this.snackbar = true;
291 }) 294 this.text = error.response.data.message;
292 .catch((error) => { 295 });
293 this.snackbar = true; 296 } else {
294 this.text = error.response.data.message; 297 let selectedStudentsArray = [];
295 }); 298 for (let item of this.studentsData) {
296 } else { 299 if (item.enroll === false || !item.enroll) {
297 let selectedStudentsArray = []; 300 selectedStudentsArray.push({ studentId: item._id });
298 for (let item of this.studentsData) { 301 }
299 if (item.enroll === false || !item.enroll) { 302 }
300 selectedStudentsArray.push({ studentId: item._id }); 303
301 } 304 var payload = {
302 } 305 courseId: this.getReport.courseId,
303 306 enrollStudents: selectedStudentsArray,
304 var payload = { 307 };
305 courseId: this.getReport.courseId, 308 http()
306 enrollStudents: selectedStudentsArray, 309 .put("/enrollStudents", payload)
307 }; 310 .then((response) => {
308 http() 311 this.snackbar = true;
309 .put("/enrollStudents", payload) 312 this.text = response.data.message;
310 .then((response) => { 313 for (let i = 0; i < this.studentsData.length; i++) {
311 this.snackbar = true; 314 this.studentsData[i].enroll = true;
312 this.text = response.data.message; 315 }
313 for (let i = 0; i < this.studentsData.length; i++) { 316 this.getParticularCourse();
314 this.studentsData[i].enroll = true; 317 })
315 } 318 .catch((error) => {
316 this.getParticularCourse(); 319 this.snackbar = true;
317 }) 320 this.text = error.response.data.message;
318 .catch((error) => { 321 });
319 this.snackbar = true; 322 }
320 this.text = error.response.data.message; 323 },
321 }); 324
322 } 325 selectParticularStudent(selected) {
323 }, 326 let selectedStudentsArray = [];
324 327 selectedStudentsArray.push({ studentId: selected._id });
325 selectParticularStudent(selected) { 328
326 let selectedStudentsArray = []; 329 let isExists = false;
327 selectedStudentsArray.push({ studentId: selected._id }); 330 for (let item of this.selected) {
328 331 if (item._id === selected._id) {
329 let isExists = false; 332 isExists = true;
330 for (let item of this.selected) { 333 break;
331 if (item._id === selected._id) { 334 }
332 isExists = true; 335 }
333 break; 336
334 } 337 if (selected.enroll === true) {
335 } 338 if (!isExists) this.selected.push(selected);
336 339 var payload = {
337 if (selected.enroll === true) { 340 courseId: this.getReport.courseId,
338 if (!isExists) this.selected.push(selected); 341 enrollStudents: selectedStudentsArray,
339 var payload = { 342 };
340 courseId: this.getReport.courseId, 343 http()
341 enrollStudents: selectedStudentsArray, 344 .put("/enrollStudents", payload)
342 }; 345 .then((response) => {
343 http() 346 this.snackbar = true;
344 .put("/enrollStudents", payload) 347 this.text = response.data.message;
345 .then((response) => { 348 this.getParticularCourse("noSnackbar");
346 this.snackbar = true; 349 })
347 this.text = response.data.message; 350 .catch((error) => {
348 this.getParticularCourse("noSnackbar"); 351 this.snackbar = true;
349 }) 352 this.text = error.response.data.message;
350 .catch((error) => { 353 });
351 this.snackbar = true; 354 }
352 this.text = error.response.data.message; 355 if (
353 }); 356 selected.enroll == false &&
354 } 357 selected.enroll != undefined &&
355 if ( 358 selected.enroll != null
356 selected.enroll == false && 359 ) {
357 selected.enroll != undefined && 360 var payloadDeleteStudents = {
358 selected.enroll != null 361 courseId: this.getReport.courseId,
359 ) { 362 enrollStudentsId: selected.enrollId,
360 var payloadDeleteStudents = { 363 };
361 courseId: this.getReport.courseId, 364 http()
362 enrollStudentsId: selected.enrollId, 365 .put("/deleteStudents", payloadDeleteStudents)
363 }; 366 .then((response) => {
364 http() 367 this.snackbar = true;
365 .put("/deleteStudents", payloadDeleteStudents) 368 this.text = response.data.message;
366 .then((response) => { 369 this.getParticularCourse();
367 this.snackbar = true; 370 })
368 this.text = response.data.message; 371 .catch((error) => {
369 this.getParticularCourse(); 372 this.snackbar = true;
370 }) 373 this.text = error.response.data.message;
371 .catch((error) => { 374 });
372 this.snackbar = true; 375 }
373 this.text = error.response.data.message; 376 },
374 }); 377 getParticularCourse(message) {
375 } 378 this.selected = [];
376 }, 379 var payload = {
377 getParticularCourse(message) { 380 courseId: this.getReport.courseId,
378 this.selected = []; 381 };
379 var payload = { 382 http()
380 courseId: this.getReport.courseId, 383 .get("/getParticularCourse", {
381 }; 384 params: payload,
382 http() 385 })
383 .get("/getParticularCourse", { 386 .then((response) => {
384 params: payload, 387 for (let i = 0; i < response.data.data.enrollStudents.length; i++) {
385 }) 388 var studentId = {};
386 .then((response) => { 389 studentId = response.data.data.enrollStudents[i];
387 for (let i = 0; i < response.data.data.enrollStudents.length; i++) { 390 for (let j = 0; j < this.studentsData.length; j++) {
388 var studentId = {}; 391 if (studentId.studentId == this.studentsData[j]._id) {
389 studentId = response.data.data.enrollStudents[i]; 392 this.studentsData[j].enroll = true;
390 for (let j = 0; j < this.studentsData.length; j++) { 393 this.studentsData[j].enrollId = studentId._id;
391 if (studentId.studentId == this.studentsData[j]._id) { 394 this.selected.push(this.studentsData[j]);
392 this.studentsData[j].enroll = true; 395 break;
393 this.studentsData[j].enrollId = studentId._id; 396 }
394 this.selected.push(this.studentsData[j]); 397 }
395 break; 398 }
396 } 399 if (message != "noSnackbar") {
397 } 400 this.snackbar = true;
398 } 401 this.text = response.data.message;
399 if (message != "noSnackbar") { 402 }
400 this.snackbar = true; 403 })
401 this.text = response.data.message; 404 .catch((error) => {
402 } 405 this.snackbar = true;
403 }) 406 this.text = error.response.data.message;
404 .catch((error) => { 407 });
405 this.snackbar = true; 408 },
406 this.text = error.response.data.message; 409 changeSort(column) {
407 }); 410 if (this.pagination.sortBy === column) {
408 }, 411 this.pagination.descending = !this.pagination.descending;
409 changeSort(column) { 412 } else {
410 if (this.pagination.sortBy === column) { 413 this.pagination.sortBy = column;
411 this.pagination.descending = !this.pagination.descending; 414 this.pagination.descending = false;
412 } else { 415 }
413 this.pagination.sortBy = column; 416 },
414 this.pagination.descending = false; 417 displaySearch() {
415 } 418 this.show = false;
416 }, 419 this.showSearch = true;
417 displaySearch() { 420 },
418 this.show = false; 421 closeSearch() {
419 this.showSearch = true; 422 this.showSearch = false;
420 }, 423 this.show = true;
421 closeSearch() { 424 this.search = "";
422 this.showSearch = false; 425 },
423 this.show = true; 426 },
424 this.search = ""; 427 mounted() {
425 }, 428 // this.getStudentList();
426 }, 429 this.token = this.$store.state.token;
427 mounted() { 430 this.role = this.$store.state.role;
428 // this.getStudentList(); 431 this.getAllClass();
429 this.token = this.$store.state.token; 432 },
430 this.role = this.$store.state.role; 433 };
431 this.getAllClass(); 434 </script>
src/pages/Dashboard/LiveOnlineClass.vue
Diff comments   View file @4fb0af7
1 <template> 1 <template>
2 <div class="body-color"> 2 <div class="body-color">
3 <!-- LOADER --> 3 <!-- LOADER -->
4 <div class="loader" v-if="showLoader"> 4 <div class="loader" v-if="showLoader">
5 <v-progress-circular indeterminate color="white"></v-progress-circular> 5 <v-progress-circular indeterminate color="white"></v-progress-circular>
6 </div> 6 </div>
7 7
8 <!-- SNACKBAR --> 8 <!-- SNACKBAR -->
9 <v-snackbar 9 <v-snackbar
10 :timeout="timeout" 10 :timeout="timeout"
11 :top="y === 'top'" 11 :top="y === 'top'"
12 :right="x === 'right'" 12 :right="x === 'right'"
13 :vertical="mode === 'vertical'" 13 :vertical="mode === 'vertical'"
14 v-model="snackbar" 14 v-model="snackbar"
15 :color="snackbarColor" 15 :color="snackbarColor"
16 > 16 >
17 {{ text }} 17 {{ text }}
18 <v-spacer></v-spacer> 18 <v-spacer></v-spacer>
19 <v-btn flat text @click="snackbar = false">X</v-btn> 19 <v-btn flat text @click="snackbar = false">X</v-btn>
20 </v-snackbar> 20 </v-snackbar>
21 21
22 <v-container grid-list-xl class="pt-0"> 22 <v-container grid-list-xl class="pt-0">
23 <v-layout row wrap class="mt-1"> 23 <v-layout row wrap class="mt-1">
24 <!-- if logged in user is parent --> 24 <!-- if logged in user is parent -->
25 <v-flex xs12 sm12 md9 v-if=" $store.state.role === 'PARENT' "> 25 <v-flex xs12 sm12 md9 v-if=" $store.state.role === 'PARENT' ">
26 <v-layout column> 26 <v-layout column>
27 <!-- HEADING --> 27 <!-- HEADING -->
28 <v-flex> 28 <v-flex>
29 <div 29 <div
30 class="title side-bar-color font-weight-bold" 30 class="title side-bar-color font-weight-bold"
31 >Live Online Classes - {{$route.query.chapterName}}</div> 31 >Live Online Classes - {{$route.query.chapterName}}</div>
32 <!-- <div class="subheading grey--text lighten-1">{{liveLink}}</div> --> 32 <!-- <div class="subheading grey--text lighten-1">{{liveLink}}</div> -->
33 <!-- <div 33 <!-- <div
34 class="subheading grey--text lighten-1" 34 class="subheading grey--text lighten-1"
35 >The session started at 1:00 there is 1 moderator</div>--> 35 >The session started at 1:00 there is 1 moderator</div>-->
36 </v-flex> 36 </v-flex>
37 37
38 <!-- JOIN OR END SESSION --> 38 <!-- JOIN OR END SESSION -->
39 <v-flex> 39 <v-flex>
40 <div> 40 <div>
41 <v-btn 41 <v-btn
42 round 42 round
43 class="open-dialog-button" 43 class="open-dialog-button"
44 dark 44 dark
45 v-if="studentBtn" 45 v-if="studentBtn"
46 @click="showLoader = true;startChat();" 46 @click="showLoader = true;startChat();"
47 >{{studentBtn}}</v-btn> 47 >{{studentBtn}}</v-btn>
48 <span class="subheading grey--twxt lighten-1" v-else>Session hasnt started yet</span> 48 <span class="subheading grey--twxt lighten-1" v-else>Session hasnt started yet</span>
49 </div> 49 </div>
50 </v-flex> 50 </v-flex>
51 <v-flex id="studentClone"> 51 <v-flex id="studentClone">
52 <div id="jitsi-container"></div> 52 <div id="jitsi-container"></div>
53 </v-flex> 53 </v-flex>
54 </v-layout> 54 </v-layout>
55 </v-flex> 55 </v-flex>
56 56
57 <!-- if logged in user is teacher --> 57 <!-- if logged in user is teacher -->
58 <v-flex xs12 sm12 md12 v-else> 58 <v-flex xs12 sm12 md12 v-else>
59 <v-layout column> 59 <v-layout column>
60 <!-- HEADING --> 60 <!-- HEADING -->
61 <v-flex> 61 <v-flex>
62 <div 62 <div
63 class="title side-bar-color font-weight-bold" 63 class="title side-bar-color font-weight-bold"
64 >Live Online Classes - {{$route.query.chapterName}}</div> 64 >Live Online Classes - {{$route.query.chapterName}}</div>
65 <!-- <div class="subheading grey--text lighten-1"></div> --> 65 <!-- <div class="subheading grey--text lighten-1"></div> -->
66 <!-- <div 66 <!-- <div
67 class="subheading grey--text lighten-1" 67 class="subheading grey--text lighten-1"
68 >The session started at 1:00 there is 1 moderator</div>--> 68 >The session started at 1:00 there is 1 moderator</div>-->
69 </v-flex> 69 </v-flex>
70 70
71 <!-- JOIN OR END SESSION --> 71 <!-- JOIN OR END SESSION -->
72 <v-flex> 72 <v-flex>
73 <div> 73 <div>
74 <v-btn round class="open-dialog-button" dark @click="showLoader = true;startChat()">Start Session</v-btn> 74 <v-btn round class="open-dialog-button" dark @click="showLoader = true;startChat()">Start Session</v-btn>
75 </div> 75 </div>
76 </v-flex> 76 </v-flex>
77 <v-flex id="teacherClone"> 77 <v-flex id="teacherClone">
78 <div id="jitsi-container"></div> 78 <div id="jitsi-container"></div>
79 </v-flex> 79 </v-flex>
80 </v-layout> 80 </v-layout>
81 </v-flex> 81 </v-flex>
82 82
83 <v-spacer></v-spacer> 83 <v-spacer></v-spacer>
84 84
85 <!-- COURSES SIDE BAR- positioned to the right of the page --> 85 <!-- COURSES SIDE BAR- positioned to the right of the page -->
86 <!-- <v-flex xs3> 86 <!-- <v-flex xs3>
87 <v-card class="elevation-0 card-border" height="100%"> 87 <v-card class="elevation-0 card-border" height="100%">
88 <CoursesSideBar></CoursesSideBar> 88 <CoursesSideBar></CoursesSideBar>
89 </v-card> 89 </v-card>
90 </v-flex>--> 90 </v-flex>-->
91 </v-layout> 91 </v-layout>
92 </v-container> 92 </v-container>
93 </div> 93 </div>
94 </template> 94 </template>
95 <script> 95 <script>
96 import AllApiCalls from "@/Services/AllApiCalls.js"; 96 import AllApiCalls from "@/Services/AllApiCalls.js";
97 import http from "@/Services/http.js"; 97 import http from "@/Services/http.js";
98 import moment from "moment"; 98 import moment from "moment";
99 import Meet from "@/pages/Meet/meet.vue"; 99 import Meet from "@/pages/Meet/meet.vue";
100 import CoursesSideBar from "@/pages/Common/CoursesSideBar.vue"; 100 import CoursesSideBar from "@/pages/Common/CoursesSideBar.vue";
101 export default { 101 export default {
102 mixins: [AllApiCalls], 102 mixins: [AllApiCalls],
103 components: { 103 components: {
104 CoursesSideBar, 104 CoursesSideBar,
105 }, 105 },
106 data() { 106 data() {
107 return { 107 return {
108 startLiveSession: "", 108 startLiveSession: "",
109 studentBtn: "", 109 studentBtn: "",
110 110
111 // DATA TABLE 111 // DATA TABLE
112 search: "", 112 search: "",
113 pagination: { 113 pagination: {
114 rowsPerPage: 10, 114 rowsPerPage: 10,
115 }, 115 },
116 liveOnlineHeaders: [ 116 liveOnlineHeaders: [
117 { 117 {
118 text: "Playback", 118 text: "Playback",
119 value: "attachementUrl", 119 value: "attachementUrl",
120 sortable: false, 120 sortable: false,
121 align: "center", 121 align: "center",
122 }, 122 },
123 { 123 {
124 text: "Meeting", 124 text: "Meeting",
125 align: "center", 125 align: "center",
126 sortable: false, 126 sortable: false,
127 value: "", 127 value: "",
128 }, 128 },
129 { 129 {
130 text: "Recording", 130 text: "Recording",
131 value: "", 131 value: "",
132 sortable: false, 132 sortable: false,
133 align: "center", 133 align: "center",
134 }, 134 },
135 { 135 {
136 text: "Description Preview", 136 text: "Description Preview",
137 value: "", 137 value: "",
138 sortable: false, 138 sortable: false,
139 align: "center", 139 align: "center",
140 }, 140 },
141 { text: "Date", value: "", sortable: false, align: "center" }, 141 { text: "Date", value: "", sortable: false, align: "center" },
142 { text: "Duration", value: "", sortable: false, align: "center" }, 142 { text: "Duration", value: "", sortable: false, align: "center" },
143 { text: "Toolbar", value: "", sortable: false, align: "center" }, 143 { text: "Toolbar", value: "", sortable: false, align: "center" },
144 ], 144 ],
145 liveOnlineItems: [], 145 liveOnlineItems: [],
146 146
147 // JITSI CONTAINER 147 // JITSI CONTAINER
148 liveLink: "", 148 liveLink: "",
149 token: "", 149 token: "",
150 selectStudents: {}, 150 selectStudents: {},
151 classRules: [(v) => !!v || " Class Name is required"], 151 classRules: [(v) => !!v || " Class Name is required"],
152 sectionRules: [(v) => !!v || " Section Name is required"], 152 sectionRules: [(v) => !!v || " Section Name is required"],
153 addclass: [], 153 addclass: [],
154 addSection: [], 154 addSection: [],
155 loading: false, 155 loading: false,
156 room: "", 156 room: "",
157 username: "", 157 username: "",
158 roomPassword: "", 158 roomPassword: "",
159 counter: 0, 159 counter: 0,
160 }; 160 };
161 }, 161 },
162 methods: { 162 methods: {
163 async startChat() { 163 async startChat() {
164 if (this.$store.state.role === "PARENT") { 164 if (this.$store.state.role === "PARENT") {
165 if (this.counter == 0) { 165 if (this.counter == 0) {
166 console.log("enter start chat"); 166 console.log("enter start chat");
167 this.startConference(); 167 this.startConference();
168 this.counter += 1; 168 this.counter += 1;
169 } 169 }
170 } 170 }
171 if (this.$store.state.role === "TEACHER") { 171 if (this.$store.state.role === "TEACHER") {
172 if (this.counter == 0) { 172 if (this.counter == 0) {
173 this.createRoom(); 173 this.createRoom();
174 this.counter += 1; 174 this.counter += 1;
175 } 175 }
176 } 176 }
177 }, 177 },
178 // JITSI CONTAINER 178 // JITSI CONTAINER
179 startConference() { 179 startConference() {
180 console.log("yes session started"); 180 console.log("yes session started");
181 var _this = this; 181 var _this = this;
182 try { 182 try {
183 const domain = "meet.intrack.in"; 183 const domain = "meet.intrack.in";
184 const options = { 184 const options = {
185 audioInput: "<deviceLabel>", 185 audioInput: "<deviceLabel>",
186 audioOutput: "<deviceLabel>", 186 audioOutput: "<deviceLabel>",
187 videoInput: "<deviceLabel>", 187 videoInput: "<deviceLabel>",
188 prejoinPageEnabled: false, 188 prejoinPageEnabled: false,
189 roomName: this.room, 189 roomName: this.room,
190 height: 500, 190 height: 500,
191 parentNode: document.getElementById("jitsi-container"), 191 parentNode: document.getElementById("jitsi-container"),
192 interfaceConfigOverwrite: { 192 interfaceConfigOverwrite: {
193 filmStripOnly: false, 193 filmStripOnly: false,
194 SHOW_PROMOTIONAL_CLOSE_PAGE: false, 194 SHOW_PROMOTIONAL_CLOSE_PAGE: false,
195 SHOW_POWERED_BY: false, 195 SHOW_POWERED_BY: false,
196 SHOW_JITSI_WATERMARK: false, 196 SHOW_JITSI_WATERMARK: false,
197 TOOLBAR_BUTTONS: [ 197 TOOLBAR_BUTTONS: [
198 "microphone", 198 "microphone",
199 "camera", 199 "camera",
200 "closedcaptions", 200 "closedcaptions",
201 "desktop", 201 "desktop",
202 "fullscreen", 202 "fullscreen",
203 "fodeviceselection", 203 "fodeviceselection",
204 "hangup", 204 "hangup",
205 "profile", 205 "profile",
206 "info", 206 "info",
207 "chat", 207 "chat",
208 "recording", 208 "recording",
209 "livestreaming", 209 "livestreaming",
210 "etherpad", 210 "etherpad",
211 "sharedvideo", 211 "sharedvideo",
212 "settings", 212 "settings",
213 "raisehand", 213 "raisehand",
214 "videoquality", 214 "videoquality",
215 "filmstrip", 215 "filmstrip",
216 "invite", 216 "invite",
217 "feedback", 217 "feedback",
218 "stats", 218 "stats",
219 "shortcuts", 219 "shortcuts",
220 "tileview", 220 "tileview",
221 ], 221 ],
222 }, 222 },
223 configOverwrite: { 223 configOverwrite: {
224 disableSimulcast: false, 224 disableSimulcast: false,
225 }, 225 },
226 teacherName: "", 226 teacherName: "",
227 romm: "", 227 romm: "",
228 }; 228 };
229 _this.api = new JitsiMeetExternalAPI(domain, options); 229 _this.api = new JitsiMeetExternalAPI(domain, options);
230 console.log("this.api ", this.api); 230 console.log("this.api ", this.api);
231 _this.api.addEventListener("videoConferenceJoined", () => { 231 _this.api.addEventListener("videoConferenceJoined", () => {
232 console.log("Local User Joined"); 232 console.log("Local User Joined");
233 this.showLoader = false; 233 this.showLoader = false;
234 _this.api.executeCommand("displayName", _this.username); 234 _this.api.executeCommand("displayName", _this.username);
235 _this.api.executeCommand("password", this_.roomPassword); 235 _this.api.executeCommand("password", this_.roomPassword);
236 }); 236 });
237
237 238 _this.api.on("readyToClose", () => {
238 _this.api.on("readyToClose", () => { 239 this.$router.push({ name: "Refresh" });
239 this.$router.push({ name: "Refresh" }); 240
240 241 });
242
241 }); 243 } catch (error) {
242 244 console.error("Failed to load Jitsi API", error);
243 } catch (error) { 245 }
244 console.error("Failed to load Jitsi API", error); 246 },
245 } 247 openRoom() {
246 }, 248 // verify the JitsiMeetExternalAPI constructor is added to the global..
247 openRoom() { 249 // if (this.teacherName != "" || this.room != "") {
248 // verify the JitsiMeetExternalAPI constructor is added to the global.. 250 // if (window.JitsiMeetExternalAPI) {
249 // if (this.teacherName != "" || this.room != "") { 251 // // var person = prompt("Please enter your name:", "Rabie");
250 // if (window.JitsiMeetExternalAPI) { 252 // if (person != null || person != "") this.username = this.teacherName;
251 // // var person = prompt("Please enter your name:", "Rabie"); 253 // var room = prompt("Please enter your room:", "Test Room");
252 // if (person != null || person != "") this.username = this.teacherName; 254 // if (room != null || room != "") this.room = this.room;
253 // var room = prompt("Please enter your room:", "Test Room"); 255 // this.startConference();
254 // if (room != null || room != "") this.room = this.room; 256 // } else alert("Jitsi Meet API script not loaded");
255 // this.startConference(); 257 // }
256 // } else alert("Jitsi Meet API script not loaded"); 258 },
257 // } 259
258 }, 260 createRoom(classId) {
259 261 this.showLoader = true;
260 createRoom(classId) { 262 var classId = {
261 this.showLoader = true; 263 classId: classId,
262 var classId = { 264 };
263 classId: classId, 265 http()
264 }; 266 .post("/createLiveClasses", {
265 http() 267 classId: this.$route.query.classId,
266 .post("/createLiveClasses", { 268 courseId: this.$route.query.courseId,
267 classId: this.$route.query.classId, 269 chapterId: this.$route.query.chapterId,
268 courseId: this.$route.query.courseId, 270 })
269 chapterId: this.$route.query.chapterId, 271 .then((response) => {
270 }) 272 // this.addSection = response.data.data;
271 .then((response) => { 273 console.log("CREATE___ROOOM", response.data);
272 // this.addSection = response.data.data; 274 var room = response.data.data.roomName;
273 console.log("CREATE___ROOOM", response.data); 275 var username = localStorage.getItem("teacherName")
274 var room = response.data.data.roomName; 276 var roomPassword = response.data.data.password;
275 var username = localStorage.getItem("teacherName") 277 console.log(
276 var roomPassword = response.data.data.password; 278 "room",
277 console.log( 279 room,
278 "room", 280 "username",
279 room, 281 username,
280 "username", 282 "roomPassword",
281 username, 283 roomPassword
282 "roomPassword", 284 );
283 roomPassword 285 var this_ = this;
284 ); 286 if (username != "" || room != "") {
285 var this_ = this; 287 if (window.JitsiMeetExternalAPI) {
286 if (username != "" || room != "") { 288 // var person = prompt("Please enter your name:", "Rabie");
287 if (window.JitsiMeetExternalAPI) { 289 if (username != null || username != "") {
288 // var person = prompt("Please enter your name:", "Rabie"); 290 this_.username = username;
289 if (username != null || username != "") { 291 }
290 this_.username = username; 292 // var room = prompt("Please enter your room:", "Test Room");
291 } 293 if (room != null || room != "") {
292 // var room = prompt("Please enter your room:", "Test Room"); 294 this_.room = room;
293 if (room != null || room != "") { 295 }
294 this_.room = room; 296 if (roomPassword != null || roomPassword != "") {
295 } 297 this_.password = roomPassword;
296 if (roomPassword != null || roomPassword != "") { 298 }
297 this_.password = roomPassword; 299 } else alert("Jitsi Meet API script not loaded");
298 } 300 this_.startConference();
299 } else alert("Jitsi Meet API script not loaded"); 301 }
300 this_.startConference(); 302 this.showLoader = false;
301 } 303 })
302 this.showLoader = false; 304 .catch((err) => {
303 }) 305 this.showLoader = false;
304 .catch((err) => { 306 });
305 this.showLoader = false; 307 },
306 }); 308 async studentClasses() {
307 }, 309 this.liveLink = "";
308 async studentClasses() { 310 this.room = "";
309 this.liveLink = ""; 311 this.username = "";
310 this.room = ""; 312 this.roomPassword = "";
311 this.username = ""; 313 /* getLiveClassesesList - To up date line under heading*/
312 this.roomPassword = ""; 314 let response = await this.getLiveClassesesList({
313 /* getLiveClassesesList - To up date line under heading*/ 315 classId: this.$route.query.classId,
314 let response = await this.getLiveClassesesList({ 316 courseId: this.$route.query.courseId,
315 classId: this.$route.query.classId, 317 chapterId: this.$route.query.chapterId,
316 courseId: this.$route.query.courseId, 318 });
317 chapterId: this.$route.query.chapterId, 319 console.log("response getLiveClassesesList- ", response);
318 }); 320
319 console.log("response getLiveClassesesList- ", response); 321 /* CHECK RESPONSE TO ASSIGN MESSAGE INSIDE BUTTON */
320 322 if (response.data.data[0].sessionStatus == "ENDED") {
321 /* CHECK RESPONSE TO ASSIGN MESSAGE INSIDE BUTTON */ 323 // this.startLiveSession = "Start Session";
322 if (response.data.data[0].sessionStatus == "ENDED") { 324 this.studentBtn = "";
323 // this.startLiveSession = "Start Session"; 325 }
324 this.studentBtn = ""; 326 if (response.data.data[0].sessionStatus == "STARTED") {
325 } 327 // this.startLiveSession = "Join Session";
326 if (response.data.data[0].sessionStatus == "STARTED") { 328 this.studentBtn = "Join Session";
327 // this.startLiveSession = "Join Session"; 329 }
328 this.studentBtn = "Join Session"; 330 if (response.data.data.length == 0) {
329 } 331 this.startLiveSession = "Start Session";
330 if (response.data.data.length == 0) { 332 this.studentBtn = "";
331 this.startLiveSession = "Start Session"; 333 } else {
332 this.studentBtn = ""; 334 this.liveLink = response.data.data[0].link;
333 } else { 335 var room = response.data.data[0].roomName;
334 this.liveLink = response.data.data[0].link; 336 var username = this.currentUser;
335 var room = response.data.data[0].roomName; 337 var roomPassword = response.data.data[0].password;
336 var username = this.currentUser; 338 var this_ = this;
337 var roomPassword = response.data.data[0].password; 339 // console.log(this.room, this.roomPassword, this.username);
338 var this_ = this; 340
339 // console.log(this.room, this.roomPassword, this.username); 341 if (username != "" || room != "") {
340 342 if (window.JitsiMeetExternalAPI) {
341 if (username != "" || room != "") { 343 // var person = prompt("Please enter your name:", "Rabie");
342 if (window.JitsiMeetExternalAPI) { 344 if (username != null || username != "") {
343 // var person = prompt("Please enter your name:", "Rabie"); 345 this_.username = username;
344 if (username != null || username != "") { 346 }
345 this_.username = username; 347 if (roomPassword != null || roomPassword != "") {
346 } 348 this_.roomPassword = roomPassword;
347 if (roomPassword != null || roomPassword != "") { 349 }
348 this_.roomPassword = roomPassword; 350 // var room = prompt("Please enter your room:", "Test Room");
349 } 351 if (room != null || room != "") {
350 // var room = prompt("Please enter your room:", "Test Room"); 352 this_.room = room;
351 if (room != null || room != "") { 353 }
352 this_.room = room; 354 // this.startConference();
353 } 355 }
354 // this.startConference(); 356 }
355 } 357 }
356 } 358 },
357 } 359 },
358 }, 360
359 }, 361 async created() {
360 362 console.log(
361 async created() { 363 "this.$store.state.studentsData",
362 console.log( 364 this.$store.state.studentsData[0].name
363 "this.$store.state.studentsData", 365 );
364 this.$store.state.studentsData[0].name 366 this.currentUser = localStorage.getItem("studentName");
365 ); 367 this.token = this.$store.state.token;
366 this.currentUser = localStorage.getItem("studentName"); 368 if (this.$store.state.role === "PARENT") {
367 this.token = this.$store.state.token; 369 await this.studentClasses();
368 if (this.$store.state.role === "PARENT") { 370 }
369 await this.studentClasses(); 371
370 } 372 /* getStudentCourses - to get courseData - defined in GetApis.js*/
371 373 if (this.$store.state.role === "PARENT") {
372 /* getStudentCourses - to get courseData - defined in GetApis.js*/ 374 await this.getStudentCourses({
373 if (this.$store.state.role === "PARENT") { 375 classId: localStorage.getItem("parentClassId"),
374 await this.getStudentCourses({ 376 studentId: localStorage.getItem("parentStudentId"),
375 classId: localStorage.getItem("parentClassId"), 377 });
376 studentId: localStorage.getItem("parentStudentId"), 378 }
377 }); 379 },
378 } 380 };
379 }, 381 </script>
380 }; 382 <style scoped>
381 </script> 383 .side-bar-color {
382 <style scoped> 384 color: #827bfa !important;
383 .side-bar-color { 385 /* border-top-right-radius: 74px !important; */
384 color: #827bfa !important; 386 }
385 /* border-top-right-radius: 74px !important; */ 387 .card-border {
386 } 388 border: 1px #bdbdbd solid;
387 .card-border { 389 border-radius: 3px;
388 border: 1px #bdbdbd solid; 390 }
389 border-radius: 3px; 391 .reply-desc {
390 } 392 border: 1px solid #f2f2f2;
391 .reply-desc { 393 }
392 border: 1px solid #f2f2f2; 394 .open-dialog-button {
393 } 395 background: #827bfa !important;
394 .open-dialog-button { 396 border-color: #827bfa !important;
395 background: #827bfa !important; 397 text-transform: none !important;
396 border-color: #827bfa !important; 398 }
397 text-transform: none !important; 399
398 } 400 .reply-btn {
399 401 background: #feb83c !important;
400 .reply-btn { 402 border-color: #feb83c !important;
401 background: #feb83c !important; 403 text-transform: none !important;
402 border-color: #feb83c !important; 404 -webkit-box-shadow: none !important;
403 text-transform: none !important; 405 box-shadow: none !important;
404 -webkit-box-shadow: none !important; 406 }
405 box-shadow: none !important; 407 #jitsi-container {
406 } 408 height: 100vh;
407 #jitsi-container { 409 }
408 height: 100vh; 410 </style>
src/pages/Dashboard/dashboard.vue
Diff comments   View file @4fb0af7
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <!-- ****** VIEW PROFIL NOTICE BOARD ****** --> 3 <!-- ****** VIEW PROFIL NOTICE BOARD ****** -->
4 <!-- <v-dialog v-model="dialogNotice" max-width="940px" scrollable> 4 <!-- <v-dialog v-model="dialogNotice" max-width="940px" scrollable>
5 <v-card> 5 <v-card>
6 <v-toolbar color="grey lighten-2" flat> 6 <v-toolbar color="grey lighten-2" flat>
7 <v-spacer></v-spacer> 7 <v-spacer></v-spacer>
8 <v-toolbar-title> 8 <v-toolbar-title>
9 <h3>Notice Board</h3> 9 <h3>Notice Board</h3>
10 </v-toolbar-title> 10 </v-toolbar-title>
11 <v-spacer></v-spacer> 11 <v-spacer></v-spacer>
12 <v-icon @click="closeNotice">close</v-icon> 12 <v-icon @click="closeNotice">close</v-icon>
13 </v-toolbar> 13 </v-toolbar>
14 <v-card-text> 14 <v-card-text>
15 <v-layout> 15 <v-layout>
16 <v-flex align-center justify-center layout text-xs-center class="mt-2"> 16 <v-flex align-center justify-center layout text-xs-center class="mt-2">
17 <img src="/static/icon/user.png" width="70px" v-if="!notice.eventImageUrl" /> 17 <img src="/static/icon/user.png" width="70px" v-if="!notice.eventImageUrl" />
18 <img :src="notice.eventImageUrl" width="280px" v-else-if="notice.eventImageUrl" /> 18 <img :src="notice.eventImageUrl" width="280px" v-else-if="notice.eventImageUrl" />
19 </v-flex> 19 </v-flex>
20 </v-layout> 20 </v-layout>
21 <v-container grid-list-md> 21 <v-container grid-list-md>
22 <v-layout wrap> 22 <v-layout wrap>
23 <v-flex> 23 <v-flex>
24 <v-layout> 24 <v-layout>
25 <v-flex xs5 sm6> 25 <v-flex xs5 sm6>
26 <h5 class="right my-1"> 26 <h5 class="right my-1">
27 <b>Title:</b> 27 <b>Title:</b>
28 </h5> 28 </h5>
29 </v-flex> 29 </v-flex>
30 <v-flex sm6 xs8> 30 <v-flex sm6 xs8>
31 <h5 class="my-1">{{ notice.title }}</h5> 31 <h5 class="my-1">{{ notice.title }}</h5>
32 </v-flex> 32 </v-flex>
33 </v-layout> 33 </v-layout>
34 <v-layout> 34 <v-layout>
35 <v-flex xs5 sm6> 35 <v-flex xs5 sm6>
36 <h5 class="right my-1"> 36 <h5 class="right my-1">
37 <b>Description:</b> 37 <b>Description:</b>
38 </h5> 38 </h5>
39 </v-flex> 39 </v-flex>
40 <v-flex sm6 xs8> 40 <v-flex sm6 xs8>
41 <h5 class="my-1">{{ notice.description }}</h5> 41 <h5 class="my-1">{{ notice.description }}</h5>
42 </v-flex> 42 </v-flex>
43 </v-layout> 43 </v-layout>
44 </v-flex> 44 </v-flex>
45 </v-layout> 45 </v-layout>
46 </v-container> 46 </v-container>
47 </v-card-text> 47 </v-card-text>
48 </v-card> 48 </v-card>
49 </v-dialog>--> 49 </v-dialog>-->
50 <!-- <v-container fluid grid-list-xl> --> 50 <!-- <v-container fluid grid-list-xl> -->
51 51
52 <!-- LOADER --> 52 <!-- LOADER -->
53 <div class="loader" v-if="showLoader"> 53 <div class="loader" v-if="showLoader">
54 <v-progress-circular indeterminate color="white"></v-progress-circular> 54 <v-progress-circular indeterminate color="white"></v-progress-circular>
55 </div> 55 </div>
56 56
57 <!-- SNACKBAR --> 57 <!-- SNACKBAR -->
58 <v-snackbar 58 <v-snackbar
59 :timeout="timeout" 59 :timeout="timeout"
60 :top="y === 'top'" 60 :top="y === 'top'"
61 :right="x === 'right'" 61 :right="x === 'right'"
62 :vertical="mode === 'vertical'" 62 :vertical="mode === 'vertical'"
63 v-model="snackbar" 63 v-model="snackbar"
64 :color="snackbarColor" 64 :color="snackbarColor"
65 > 65 >
66 {{ text }} 66 {{ text }}
67 <v-spacer></v-spacer> 67 <v-spacer></v-spacer>
68 <v-btn flat text @click="snackbar = false">X</v-btn> 68 <v-btn flat text @click="snackbar = false">X</v-btn>
69 </v-snackbar> 69 </v-snackbar>
70 70
71 <!-- DIALOG BOX EVENT DETAILS --> 71 <!-- DIALOG BOX EVENT DETAILS -->
72 <v-dialog v-model="viewEventDetails" max-width="500" persistent lazy> 72 <v-dialog v-model="viewEventDetails" max-width="500" persistent lazy>
73 <v-card flat class="card-style elevation-0" height="600" dark> 73 <v-card flat class="card-style elevation-0" height="600" dark>
74 <v-layout>
75 <v-flex xs12> 74 <v-layout>
76 <v-icon 75 <v-flex xs12>
77 size="24" 76 <v-icon
78 class="right" 77 size="24"
79 @click="active=0;displayEventsList=[];dialogSchoolEvents = [];dialogMeetingEvents=[];viewEventDetails = false" 78 class="right"
80 >cancel</v-icon> 79 @click="active=0;displayEventsList=[];dialogSchoolEvents = [];dialogMeetingEvents=[];viewEventDetails = false"
81 </v-flex> 80 >cancel</v-icon>
81 </v-flex>
82 </v-layout> 82 </v-layout>
83 <v-tabs v-model="active" color="#7f62f8" dark v-if="displayEventsList.length == 0">
84 <v-tabs-slider color="yellow"></v-tabs-slider>
85 <v-tab v-for="(tab,index) in tabs" :key="index">
86 <div class="subheading py-1">{{ tab.name }}</div>
87 </v-tab>
88 <!-- <v-tab href="#schoolTab" v-if="dialogSchoolEvents.length > 0">School Events</v-tab>
89 <v-tab href="#meetingTab" v-if="dialogMeetingEvents.length > 0">Meeting Events</v-tab>-->
83 <v-tabs v-model="active" color="#7f62f8" dark v-if="displayEventsList.length == 0"> 90
84 <v-tabs-slider color="yellow"></v-tabs-slider> 91 <!-- SCHOOL EVENTS-->
85 <v-tab v-for="(tab,index) in tabs" :key="index"> 92 <v-tab-item>
86 <div class="subheading py-1">{{ tab.name }}</div> 93 <v-card flat class="card-style pa-2" dark v-if="dialogSchoolEvents.length > 0">
87 </v-tab> 94 <v-container fluid>
88 <!-- <v-tab href="#schoolTab" v-if="dialogSchoolEvents.length > 0">School Events</v-tab> 95 <v-divider class="white"></v-divider>
89 <v-tab href="#meetingTab" v-if="dialogMeetingEvents.length > 0">Meeting Events</v-tab>--> 96 <v-card
90 97 v-for="(particularEvent,index) in dialogSchoolEvents"
91 <!-- SCHOOL EVENTS--> 98 :key="index"
92 <v-tab-item> 99 class="mt-3 pa-2 card-style white--text elevation-0"
93 <v-card flat class="card-style pa-2" dark v-if="dialogSchoolEvents.length > 0"> 100 >
94 <v-container fluid> 101 <div>
95 <v-divider class="white"></v-divider> 102 <div class="headline">{{particularEvent.title}}</div>
96 <v-card 103 <div>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
97 v-for="(particularEvent,index) in dialogSchoolEvents" 104 <div v-if="particularEvent.link">Start Time : {{particularEvent.startTime}}</div>
98 :key="index" 105 <div v-if="particularEvent.link">Duration : {{particularEvent.duration}}</div>
99 class="mt-3 pa-2 card-style white--text elevation-0" 106 <div v-if="particularEvent.link">
100 > 107 Link :
101 <div> 108 <a :href="particularEvent.link">{{particularEvent.link}}</a>
102 <div class="headline">{{particularEvent.title}}</div> 109 </div>
103 <div>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div> 110 <div
111 v-if="particularEvent.description"
112 >Description : {{particularEvent.description}}</div>
113 </div>
114 <v-divider class="white mt-3"></v-divider>
115 </v-card>
116 </v-container>
117 </v-card>
118 </v-tab-item>
119
120 <!-- MEETING EVENTS -->
121 <v-tab-item>
122 <v-card v-if="dialogMeetingEvents.length > 0" flat class="card-style pa-2" dark>
123 <v-container fluid>
124 <v-divider class="white"></v-divider>
125 <v-card
126 v-for="(particularEvent,index) in dialogMeetingEvents"
127 :key="index"
128 class="mt-3 pa-2 card-style white--text elevation-0"
129 >
130 <div>
131 <div class="headline">{{particularEvent.title}}</div>
132 <div>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
133 <div v-if="particularEvent.link">Start Time : {{particularEvent.startTime}}</div>
134 <div v-if="particularEvent.link">Duration : {{particularEvent.duration}}</div>
135 <div v-if="particularEvent.link">
136 Link :
137 <a :href="particularEvent.link">{{particularEvent.link}}</a>
138 </div>
139 <div
140 v-if="particularEvent.description"
141 >Description : {{particularEvent.description}}</div>
142 </div>
143 <v-divider class="white mt-3"></v-divider>
144 </v-card>
145 </v-container>
146 </v-card>
147 </v-tab-item>
148 </v-tabs>
149
150 <!-- IF NO MULTIPLE EVENTS ON SAME DATE -->
151 <v-card flat class="card-style pa-2 elevation-0" dark v-else>
152 <v-container fluid>
153 <v-divider class="white"></v-divider>
154 <v-card
155 v-for="(particularEvent,index) in displayEventsList"
156 :key="index"
157 class="mt-3 pa-2 card-style white--text elevation-0"
158 >
159 <div>
160 <div class="headline">{{particularEvent.title}}</div>
161 <div>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
162 <div v-if="particularEvent.link">Start Time : {{particularEvent.startTime}}</div>
163 <div v-if="particularEvent.link">Duration : {{particularEvent.duration}}</div>
164 <div v-if="particularEvent.link">
104 <div v-if="particularEvent.link">Start Time : {{particularEvent.startTime}}</div> 165 Link :
105 <div v-if="particularEvent.link">Duration : {{particularEvent.duration}}</div> 166 <a :href="particularEvent.link">{{particularEvent.link}}</a>
106 <div v-if="particularEvent.link"> 167 </div>
107 Link : 168 <div
108 <a :href="particularEvent.link">{{particularEvent.link}}</a> 169 v-if="particularEvent.description"
109 </div> 170 >Description : {{particularEvent.description}}</div>
110 <div 171 </div>
172 <v-divider class="white mt-3"></v-divider>
173 </v-card>
174 </v-container>
175 </v-card>
111 v-if="particularEvent.description" 176 </v-card>
112 >Description : {{particularEvent.description}}</div> 177 </v-dialog>
113 </div> 178
114 <v-divider class="white mt-3"></v-divider> 179 <v-layout wrap row>
115 </v-card> 180 <v-flex xs12 sm12 md8>
116 </v-container> 181 <v-container fluid grid-list-xl>
117 </v-card> 182 <!-- ***** Total Students ***** -->
118 </v-tab-item> 183 <v-layout wrap class v-if="$store.state.role != 'PARENT' ">
119 184 <v-flex xs12 sm12 md3>
120 <!-- MEETING EVENTS --> 185 <router-link :to="{ name:'Students' }">
121 <v-tab-item> 186 <v-card class="card pink-bgcolor">
122 <v-card v-if="dialogMeetingEvents.length > 0" flat class="card-style pa-2" dark> 187 <v-card-title primary-title class="titleCard white--text py-3">Students</v-card-title>
123 <v-container fluid> 188 <img src="/static/icon/student.png" class="ml-2" width="40" alt="icons" />
124 <v-divider class="white"></v-divider> 189 <v-card-title class="headline py-1 white--text">{{ students.length }}</v-card-title>
125 <v-card 190 </v-card>
126 v-for="(particularEvent,index) in dialogMeetingEvents" 191 </router-link>
127 :key="index" 192 </v-flex>
128 class="mt-3 pa-2 card-style white--text elevation-0" 193 <!-- ***** Total Teachers***** -->
129 > 194 <v-flex xs12 sm12 md3>
130 <div> 195 <router-link :to="{ name:'Teachers' }">
131 <div class="headline">{{particularEvent.title}}</div> 196 <v-card flat class="card elevation-2 firozi-bgcolor">
132 <div>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div> 197 <v-card-title primary-title class="titleCard white--text py-3">Teachers</v-card-title>
133 <div v-if="particularEvent.link">Start Time : {{particularEvent.startTime}}</div> 198 <img src="/static/icon/teacher.png" class="ml-2" width="40" alt="icons" />
134 <div v-if="particularEvent.link">Duration : {{particularEvent.duration}}</div> 199
135 <div v-if="particularEvent.link"> 200 <v-card-title class="headline py-1 white--text">{{ teachers.length }}</v-card-title>
136 Link : 201 </v-card>
137 <a :href="particularEvent.link">{{particularEvent.link}}</a> 202 </router-link>
138 </div> 203 </v-flex>
139 <div 204 <!-- ***** Total Parents ***** -->
140 v-if="particularEvent.description" 205 <v-flex xs12 sm12 md3>
141 >Description : {{particularEvent.description}}</div> 206 <router-link :to="{ name:'Parents' }">
142 </div> 207 <v-card flat class="card yellow darken-3">
143 <v-divider class="white mt-3"></v-divider> 208 <v-card-title primary-title class="titleCard white--text py-3">Parents</v-card-title>
144 </v-card> 209 <img src="/static/icon/parents.png" class="ml-3" width="40px" alt="icons" />
145 </v-container> 210 <v-card-title class="headline py-1 white--text">{{ parents.length }}</v-card-title>
146 </v-card> 211 </v-card>
147 </v-tab-item> 212 </router-link>
148 </v-tabs> 213 </v-flex>
149 214 <!-- ***** Total Class***** -->
150 <!-- IF NO MULTIPLE EVENTS ON SAME DATE --> 215 <v-flex xs12 sm12 md3>
151 <v-card flat class="card-style pa-2 elevation-0" dark v-else> 216 <router-link :to="{ name:'Class' }">
152 <v-container fluid> 217 <v-card flat class="card darkBlue-bgcolor">
153 <v-divider class="white"></v-divider> 218 <v-card-title primary-title class="titleCard white--text py-3">Class</v-card-title>
154 <v-card 219 <img src="/static/icon/class.png" width="40" alt="icons" class="ml-2" />
155 v-for="(particularEvent,index) in displayEventsList" 220 <v-card-title class="headline py-1 white--text">{{ classes.length }}</v-card-title>
156 :key="index" 221 </v-card>
157 class="mt-3 pa-2 card-style white--text elevation-0" 222 </router-link>
158 > 223 </v-flex>
159 <div> 224 </v-layout>
160 <div class="headline">{{particularEvent.title}}</div> 225
161 <div>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div> 226 <p
162 <div v-if="particularEvent.link">Start Time : {{particularEvent.startTime}}</div> 227 v-if="studentsData.length === 0 && role == 'PARENT'"
163 <div v-if="particularEvent.link">Duration : {{particularEvent.duration}}</div> 228 class="text-center title grey lighten-4 error--text"
164 <div v-if="particularEvent.link"> 229 >You have no student registered with school</p>
165 Link : 230 <!-- ACCOUNT -->
166 <a :href="particularEvent.link">{{particularEvent.link}}</a> 231 <v-layout v-if="role == 'SUPERADMIN'|| role == 'ADMIN'">
167 </div> 232 <v-flex xs12>
168 <div 233 <v-card class="card mt-2 account-Card">
169 v-if="particularEvent.description" 234 <h4>
170 >Description : {{particularEvent.description}}</div> 235 <b>Account</b>
171 </div> 236 </h4>
172 <v-divider class="white mt-3"></v-divider> 237 <v-layout wrap>
173 </v-card> 238 <v-flex xs12 sm12 md3>
174 </v-container> 239 <v-list two-line>
175 </v-card> 240 <template>
176 </v-card> 241 <v-list-tile>
177 </v-dialog> 242 <v-list-tile-avatar>
178 243 <v-icon class="account-circle darkBlue-color">panorama_fish_eye</v-icon>
179 <v-layout wrap row> 244 </v-list-tile-avatar>
180 <v-flex xs12 sm12 md8> 245 <v-list-tile-content>
181 <v-container fluid grid-list-xl> 246 <v-list-tile-title class="mt-2">
182 <!-- ***** Total Students ***** --> 247 <p class="subheading font-color">Fees</p>
183 <v-layout wrap class v-if="$store.state.role != 'PARENT' "> 248 </v-list-tile-title>
184 <v-flex xs12 sm12 md3> 249 <v-list-tile-title>Rs. {{ feeData.totalFees }}</v-list-tile-title>
185 <router-link :to="{ name:'Students' }"> 250 </v-list-tile-content>
186 <v-card class="card pink-bgcolor"> 251 </v-list-tile>
187 <v-card-title primary-title class="titleCard white--text py-3">Students</v-card-title> 252 <v-list-tile>
188 <img src="/static/icon/student.png" class="ml-2" width="40" alt="icons" /> 253 <v-list-tile-avatar>
189 <v-card-title class="headline py-1 white--text">{{ students.length }}</v-card-title> 254 <v-icon class="account-circle yellowDark-color">panorama_fish_eye</v-icon>
190 </v-card> 255 </v-list-tile-avatar>
191 </router-link> 256 <v-list-tile-content>
192 </v-flex> 257 <v-list-tile-title class="mt-2">
193 <!-- ***** Total Teachers***** --> 258 <p class="subheading font-color">Collection</p>
194 <v-flex xs12 sm12 md3> 259 </v-list-tile-title>
195 <router-link :to="{ name:'Teachers' }"> 260 <v-list-tile-title>Rs. {{ feeData.totalCollection }}</v-list-tile-title>
196 <v-card flat class="card elevation-2 firozi-bgcolor"> 261 </v-list-tile-content>
197 <v-card-title primary-title class="titleCard white--text py-3">Teachers</v-card-title> 262 </v-list-tile>
198 <img src="/static/icon/teacher.png" class="ml-2" width="40" alt="icons" /> 263 <v-list-tile>
199 264 <v-list-tile-avatar>
200 <v-card-title class="headline py-1 white--text">{{ teachers.length }}</v-card-title> 265 <v-icon class="account-circle pink-color">panorama_fish_eye</v-icon>
201 </v-card> 266 </v-list-tile-avatar>
202 </router-link> 267 <v-list-tile-content>
203 </v-flex> 268 <v-list-tile-title class="mt-2">
204 <!-- ***** Total Parents ***** --> 269 <p class="subheading font-color">Expences</p>
205 <v-flex xs12 sm12 md3> 270 </v-list-tile-title>
206 <router-link :to="{ name:'Parents' }"> 271 <v-list-tile-title>Rs. {{ expenseData.sum }}</v-list-tile-title>
207 <v-card flat class="card yellow darken-3"> 272 </v-list-tile-content>
208 <v-card-title primary-title class="titleCard white--text py-3">Parents</v-card-title> 273 </v-list-tile>
209 <img src="/static/icon/parents.png" class="ml-3" width="40px" alt="icons" /> 274 </template>
210 <v-card-title class="headline py-1 white--text">{{ parents.length }}</v-card-title> 275 </v-list>
211 </v-card> 276 </v-flex>
212 </router-link> 277 <v-flex xs12 sm12 md9 lg9>
213 </v-flex> 278 <div id="chart">
214 <!-- ***** Total Class***** --> 279 <div v-if="showChart">
215 <v-flex xs12 sm12 md3> 280 <apexchart
216 <router-link :to="{ name:'Class' }"> 281 type="bar"
217 <v-card flat class="card darkBlue-bgcolor"> 282 height="250"
218 <v-card-title primary-title class="titleCard white--text py-3">Class</v-card-title> 283 style="max-width: 800px !important"
219 <img src="/static/icon/class.png" width="40" alt="icons" class="ml-2" /> 284 :options="chartOptions"
220 <v-card-title class="headline py-1 white--text">{{ classes.length }}</v-card-title> 285 :series="series"
221 </v-card> 286 ></apexchart>
222 </router-link> 287 </div>
223 </v-flex> 288 </div>
224 </v-layout> 289 </v-flex>
225 290 </v-layout>
226 <p 291 </v-card>
227 v-if="studentsData.length === 0 && role == 'PARENT'" 292 </v-flex>
228 class="text-center title grey lighten-4 error--text" 293 </v-layout>
229 >You have no student registered with school</p> 294
230 <!-- ACCOUNT --> 295 <!-- FOR ADMIN ROLE -->
231 <v-layout v-if="role == 'SUPERADMIN'|| role == 'ADMIN'"> 296 <v-layout row wrap v-if="role == 'ADMIN'||role == 'TEACHER'">
232 <v-flex xs12> 297 <!-- NOTICE -->
233 <v-card class="card mt-2 account-Card"> 298 <v-flex xs12 sm6>
234 <h4> 299 <v-card class="card">
235 <b>Account</b> 300 <v-container>
236 </h4> 301 <v-card-title class="justify-center subheading font-weight-bold">Notice</v-card-title>
237 <v-layout wrap>
238 <v-flex xs12 sm12 md3>
239 <v-list two-line>
240 <template>
241 <v-list-tile>
242 <v-list-tile-avatar> 302
243 <v-icon class="account-circle darkBlue-color">panorama_fish_eye</v-icon> 303 <v-data-table
244 </v-list-tile-avatar> 304 :items="noticeData"
245 <v-list-tile-content> 305 class="elevation-0"
246 <v-list-tile-title class="mt-2"> 306 flat
247 <p class="subheading font-color">Fees</p> 307 hide-actions
248 </v-list-tile-title> 308 hide-headers
249 <v-list-tile-title>Rs. {{ feeData.totalFees }}</v-list-tile-title> 309 style="border-spacing: 0 !important;"
250 </v-list-tile-content> 310 >
251 </v-list-tile> 311 <template
252 <v-list-tile> 312 slot="items"
253 <v-list-tile-avatar> 313 slot-scope="props"
254 <v-icon class="account-circle yellowDark-color">panorama_fish_eye</v-icon> 314 v-if="props.index < 5"
255 </v-list-tile-avatar> 315 style="border-spacing: 0 !important;"
256 <v-list-tile-content> 316 >
257 <v-list-tile-title class="mt-2"> 317 <tr class="td-notice">
258 <p class="subheading font-color">Collection</p> 318 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
259 </v-list-tile-title> 319 <td>
260 <v-list-tile-title>Rs. {{ feeData.totalCollection }}</v-list-tile-title> 320 <span class="grey--text caption">{{ date(props.item.created) }}</span>
261 </v-list-tile-content> 321 <br />
262 </v-list-tile> 322 <span class="body-2">{{ props.item.title}}</span>
263 <v-list-tile> 323 </td>
264 <v-list-tile-avatar> 324 <!-- <td class="grey--text mt-2" >{{ props.item.description}}</td> -->
325
326 <td class="text-xs-center">
327 <span>
328 <v-tooltip top>
329 <img
330 slot="activator"
331 style="cursor:pointer; width:25px; height:25px; "
332 @click="profile"
333 src="/static/icon/view.png"
334 />
335 <span>View</span>
336 </v-tooltip>
337 </span>
338 </td>
339 </tr>
340 </template>
341 </v-data-table>
342 </v-container>
343 </v-card>
344 </v-flex>
345
346 <!-- SCHOOL EVENTS -->
347 <v-flex xs12 sm6>
348 <v-card class="card">
349 <v-container>
350 <v-card-title class="justify-center subheading font-weight-bold">School Events</v-card-title>
351 <div
352 v-for="(schoolEvent,index) in schoolEvents"
353 :key="schoolEvent.title"
354 class="mt-2"
355 style="cursor: pointer;"
356 @click="seeEventDetails(schoolEvent,'schoolEvent')"
357 >
358 <!-- color dot-->
359 <span
360 :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
361 style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
362 ></span>
363 <div style="display: inline-block;" class="ml-2">
364 <div>
365 <!-- date of event -->
366 <div
367 class="grey--text lighten-1 caption"
368 v-if="schoolEvent.dateOfEvent"
369 >{{moment(schoolEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
370 <!-- event title-->
371 <div class="body-1" v-if="schoolEvent.title">{{schoolEvent.title}}</div>
372 </div>
373 </div>
374 </div>
375 <div v-if="schoolEvents.length == 0">
376 <p class="text-center title grey lighten-4 error--text">No Data Found!</p>
377 </div>
378 </v-container>
379 </v-card>
380 </v-flex>
381 </v-layout>
265 <v-icon class="account-circle pink-color">panorama_fish_eye</v-icon> 382
266 </v-list-tile-avatar> 383
267 <v-list-tile-content>
268 <v-list-tile-title class="mt-2">
269 <p class="subheading font-color">Expences</p>
270 </v-list-tile-title>
271 <v-list-tile-title>Rs. {{ expenseData.sum }}</v-list-tile-title>
272 </v-list-tile-content>
273 </v-list-tile>
274 </template>
275 </v-list>
276 </v-flex>
277 <v-flex xs12 sm12 md9 lg9>
278 <div id="chart">
279 <div v-if="showChart">
280 <apexchart
281 type="bar"
282 height="250"
283 style="max-width: 800px !important" 384
284 :options="chartOptions" 385 <!-- FOR TEACHER ROLE -->
285 :series="series" 386 <!-- <v-card class="mt-2 card" v-if="role == 'TEACHER'">
286 ></apexchart> 387 <v-layout>
287 </div> 388 <v-flex xs6 sm6 md6>
288 </div> 389 <h4 class="pa-3">
289 </v-flex> 390 <b>Notice</b>
290 </v-layout> 391 </h4>
291 </v-card> 392 <v-data-table
292 </v-flex> 393 :items="noticeData"
293 </v-layout> 394 class="elevation-0"
294 395 flat
295 <!-- FOR ADMIN ROLE --> 396 hide-actions
296 <v-layout row wrap> 397 hide-headers
297 <!-- NOTICE --> 398 style="border-spacing: 0 !important;"
298 <v-flex xs12 sm6> 399 >
299 <v-card class="card" v-if="role == 'ADMIN'"> 400 <template
300 <v-container> 401 slot="items"
301 <v-card-title class="justify-center subheading font-weight-bold">Notice</v-card-title> 402 slot-scope="props"
302 403 v-if="props.index < 5"
303 <v-data-table 404 style="border-spacing: 0 !important;"
304 :items="noticeData" 405 >
305 class="elevation-0" 406 <tr class="td-notice">
306 flat 407 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
307 hide-actions 408 <td>
308 hide-headers 409 <span class="grey--text caption">{{ date(props.item.created) }}</span>
309 style="border-spacing: 0 !important;" 410 <br />
310 > 411 <span class="body-2">{{ props.item.title}}</span>
311 <template 412 </td>
312 slot="items" 413 <td class="grey--text mt-2">{{ props.item.description}}</td>
313 slot-scope="props" 414
314 v-if="props.index < 5" 415 <td class="text-xs-center">
315 style="border-spacing: 0 !important;" 416 <span>
316 > 417 <v-tooltip top>
317 <tr class="td-notice"> 418 <img
318 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td> 419 slot="activator"
319 <td> 420 style="cursor:pointer; width:25px; height:25px; "
320 <span class="grey--text caption">{{ date(props.item.created) }}</span> 421 @click="profile"
321 <br /> 422 src="/static/icon/view.png"
322 <span class="body-2">{{ props.item.title}}</span> 423 />
323 </td> 424 <span>View</span>
324 <!-- <td class="grey--text mt-2" >{{ props.item.description}}</td> --> 425 </v-tooltip>
325 426 </span>
326 <td class="text-xs-center"> 427 </td>
327 <span> 428 </tr>
328 <v-tooltip top> 429 </template>
329 <img 430 </v-data-table>
330 slot="activator" 431 </v-flex>
331 style="cursor:pointer; width:25px; height:25px; " 432
332 @click="profile" 433 <v-flex xs6 sm6 md6>
333 src="/static/icon/view.png" 434 <v-card-text>
334 /> 435 <v-card-title class="justify-center subheading font-weight-bold">Meeting Events</v-card-title>
335 <span>View</span> 436 <div
336 </v-tooltip> 437 v-for="(activity,index) in activityList"
337 </span> 438 :key="index"
338 </td> 439 class="mt-2"
339 </tr> 440 style="cursor: pointer;"
340 </template> 441 @click="seeEventDetails(activity)"
341 </v-data-table> 442 >
342 </v-container> 443 <span
343 </v-card> 444 :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
344 </v-flex> 445 style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
345 446 ></span>
346 <!-- SCHOOL EVENTS --> 447 <div style="display: inline-block;" class="ml-2">
347 <v-flex xs12 sm6> 448 <div>
348 <v-card class="card"> 449 <div
349 <v-container> 450 class="grey--text lighten-1 caption"
350 <v-card-title class="justify-center subheading font-weight-bold">School Events</v-card-title> 451 v-if="activity.dateOfEvent"
351 <div 452 >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div>
352 v-for="(schoolEvent,index) in schoolEvents" 453 <div class="body-2" v-if="activity.title">{{activity.title}}</div>
353 :key="schoolEvent.title" 454 </div>
354 class="mt-2" 455 </div>
355 style="cursor: pointer;" 456 </div>
356 @click="seeEventDetails(schoolEvent,'schoolEvent')" 457 <div v-if="activityList.length == 0">
357 > 458 <p class="text-center title grey lighten-4 error--text">No Data Found!</p>
358 <!-- color dot--> 459 </div>
359 <span 460 </v-card-text>
360 :style="{ 'background-color': colorsArray[index%colorsArray.length] }" 461 </v-flex>
361 style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;" 462 </v-layout>
362 ></span> 463 </v-card> -->
363 <div style="display: inline-block;" class="ml-2"> 464
364 <div> 465 <!-- COURSES -->
365 <!-- date of event --> 466 <v-layout v-if="role == 'PARENT'">
366 <div 467 <v-flex xs12>
367 class="grey--text lighten-1 caption" 468 <v-card class="card mt-2 account-Card">
368 v-if="schoolEvent.dateOfEvent" 469 <h4>
369 >{{moment(schoolEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div> 470 <b>My Courses</b>
370 <!-- event title--> 471 </h4>
371 <div class="body-1" v-if="schoolEvent.title">{{schoolEvent.title}}</div> 472 <v-layout wrap>
372 </div> 473 <v-flex xs12 sm12>
373 </div> 474 <v-list two-line>
374 </div> 475 <template>
375 <div v-if="schoolEvents.length == 0"> 476 <v-list-tile v-for="(course,i) in courseData" :key="i">
376 <p class="text-center title grey lighten-4 error--text">No Data Found!</p> 477 <v-list-tile-avatar>
377 </div> 478 <!-- <v-icon
378 </v-container> 479 class="account-circle darkBlue-color"
379 </v-card> 480 style="cursor: pointer;"
380 </v-flex> 481 @click="routeToCourseDetails(course._id)"
381 </v-layout> 482 >panorama_fish_eye</v-icon>-->
382 483 <span>
383 <!-- SCHOOL EVENTS --> 484 <v-tooltip top>
384 <div></div> 485 <img
385 486 slot="activator"
386 <!-- FOR TEACHER ROLE --> 487 style="cursor:pointer; width:25px; height:25px; "
387 <v-card class="mt-2 card" v-if="role == 'TEACHER'"> 488 src="/static/icon/view.png"
388 <v-layout> 489 @click="routeToCourseDetails(course._id)"
389 <v-flex xs6 sm6 md6> 490 />
390 <h4 class="pa-3"> 491 <span>View</span>
391 <b>Notice</b> 492 </v-tooltip>
392 </h4> 493 </span>
393 <v-data-table 494 </v-list-tile-avatar>
394 :items="noticeData" 495 <v-list-tile-content>
395 class="elevation-0" 496 <v-list-tile-title
396 flat 497 style="cursor: pointer;"
397 hide-actions 498 @click="routeToCourseDetails(course._id)"
398 hide-headers 499 >{{ course.courseName }}</v-list-tile-title>
399 style="border-spacing: 0 !important;" 500 </v-list-tile-content>
400 > 501 </v-list-tile>
401 <template 502 </template>
402 slot="items" 503 </v-list>
403 slot-scope="props" 504 </v-flex>
404 v-if="props.index < 5" 505 </v-layout>
405 style="border-spacing: 0 !important;" 506 </v-card>
406 > 507 </v-flex>
407 <tr class="td-notice"> 508 </v-layout>
408 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td> 509 <v-layout v-if="role == 'PARENT'">
409 <td> 510 <v-flex xs6>
410 <span class="grey--text caption">{{ date(props.item.created) }}</span> 511 <v-card class="mt-2 card">
411 <br /> 512 <h4 class="pa-3">
412 <span class="body-2">{{ props.item.title}}</span> 513 <b>Latest Annoucements</b>
413 </td> 514 </h4>
414 <td class="grey--text mt-2">{{ props.item.description}}</td> 515
415 516 <v-data-table
416 <td class="text-xs-center"> 517 :items="annoucementData"
417 <span> 518 class="elevation-0"
418 <v-tooltip top> 519 flat
419 <img 520 hide-actions
420 slot="activator" 521 hide-headers
421 style="cursor:pointer; width:25px; height:25px; " 522 style="border-spacing: 0 !important;"
422 @click="profile" 523 >
423 src="/static/icon/view.png" 524 <template
424 /> 525 slot="items"
425 <span>View</span> 526 slot-scope="props"
426 </v-tooltip> 527 v-if="props.index < 5"
427 </span> 528 style="border-spacing: 0 !important;"
428 </td> 529 >
429 </tr> 530 <tr class="td-notice">
430 </template> 531 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
431 </v-data-table> 532 <td>
432 </v-flex> 533 <span class="grey--text caption">{{ date(props.item.created) }}</span>
433 534 <br />
434 <v-flex xs6 sm6 md6> 535 <span class="body-2">{{ props.item.discussionType}}</span>
435 <v-card-text> 536 </td>
436 <v-card-title class="justify-center subheading font-weight-bold">Meeting Events</v-card-title> 537 <td class="text-xs-center">
437 <div 538 <span>
438 v-for="(activity,index) in activityList" 539 <v-tooltip top>
439 :key="index" 540 <img
440 class="mt-2" 541 slot="activator"
441 style="cursor: pointer;" 542 style="cursor:pointer; width:25px; height:25px; "
442 @click="seeEventDetails(activity)" 543 src="/static/icon/view.png"
443 > 544 />
444 <span 545 <span>View</span>
445 :style="{ 'background-color': colorsArray[index%colorsArray.length] }" 546 </v-tooltip>
446 style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;" 547 </span>
447 ></span> 548 </td>
448 <div style="display: inline-block;" class="ml-2"> 549 </tr>
449 <div> 550 </template>
450 <div 551 </v-data-table>
451 class="grey--text lighten-1 caption" 552 </v-card>
452 v-if="activity.dateOfEvent" 553 </v-flex>
453 >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div> 554 <v-flex xs6>
454 <div class="body-2" v-if="activity.title">{{activity.title}}</div> 555 <v-card class="mt-2 card">
455 </div> 556 <h4 class="pa-3">
456 </div> 557 <b>Online User</b>
457 </div> 558 </h4>
458 <div v-if="activityList.length == 0"> 559
459 <p class="text-center title grey lighten-4 error--text">No Data Found!</p> 560 <v-data-table
460 </div> 561 :items="onlineUser"
461 </v-card-text> 562 class="elevation-0"
462 </v-flex> 563 flat
463 </v-layout> 564 hide-actions
464 </v-card> 565 hide-headers
465 566 style="border-spacing: 0 !important;"
466 <!-- COURSES --> 567 >
467 <v-layout v-if="role == 'PARENT'"> 568 <template
468 <v-flex xs12> 569 slot="items"
469 <v-card class="card mt-2 account-Card"> 570 slot-scope="props"
470 <h4> 571 v-if="props.index < 5"
471 <b>My Courses</b> 572 style="border-spacing: 0 !important;"
472 </h4> 573 >
473 <v-layout wrap> 574 <tr class="td-notice">
474 <v-flex xs12 sm12> 575 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
475 <v-list two-line> 576 <td>
476 <template> 577 <span class="body-2">{{ props.item.user }}</span>
477 <v-list-tile v-for="(course,i) in courseData" :key="i"> 578 </td>
478 <v-list-tile-avatar> 579 <td class="text-xs-center">
479 <!-- <v-icon 580 <span>
480 class="account-circle darkBlue-color" 581 <v-tooltip top>
481 style="cursor: pointer;" 582 <img
482 @click="routeToCourseDetails(course._id)" 583 slot="activator"
483 >panorama_fish_eye</v-icon>--> 584 style="cursor:pointer; width:25px; height:25px; "
484 <span> 585 src="/static/icon/view.png"
485 <v-tooltip top> 586 />
486 <img 587 <span>View</span>
487 slot="activator" 588 </v-tooltip>
488 style="cursor:pointer; width:25px; height:25px; " 589 </span>
489 src="/static/icon/view.png" 590 </td>
490 @click="routeToCourseDetails(course._id)" 591 </tr>
491 /> 592 </template>
492 <span>View</span> 593 </v-data-table>
493 </v-tooltip> 594 </v-card>
494 </span> 595 </v-flex>
495 </v-list-tile-avatar> 596 </v-layout>
496 <v-list-tile-content> 597 </v-container>
497 <v-list-tile-title 598 </v-flex>
498 style="cursor: pointer;" 599 <v-spacer></v-spacer>
499 @click="routeToCourseDetails(course._id)" 600 <!-- SIDE BAR -->
500 >{{ course.courseName }}</v-list-tile-title> 601 <v-flex xs12 sm12 md4>
501 </v-list-tile-content> 602 <v-card height="100%" class="elevation-0 mt-3 profileDasboard">
502 </v-list-tile> 603 <v-card-text class="px-2">
503 </template> 604 <h4 class="text-xs-center py-3">
504 </v-list> 605 <b>Profile</b>
505 </v-flex> 606 </h4>
506 </v-layout> 607 <v-flex xs12 class="py-3">
507 </v-card> 608 <v-layout wrap>
508 </v-flex> 609 <v-flex xs12 sm12 md4>
509 </v-layout> 610 <img
510 <v-layout v-if="role == 'PARENT'"> 611 src="/static/icon/user.png"
511 <v-flex xs6> 612 v-if="!userData.profilePicUrl && !userData.schoolLogoUrl"
512 <v-card class="mt-2 card"> 613 width="80"
513 <h4 class="pa-3"> 614 />
514 <b>Latest Annoucements</b> 615 <img
515 </h4> 616 :src="userData.profilePicUrl"
516 617 onerror="this.src='/static/icon/user.png';"
517 <v-data-table 618 v-if="userData.profilePicUrl"
518 :items="annoucementData" 619 width="80"
519 class="elevation-0" 620 />
520 flat 621 <img
521 hide-actions 622 :src="userData.schoolLogoUrl"
522 hide-headers 623 onerror="this.src='/static/icon/user.png';"
523 style="border-spacing: 0 !important;" 624 v-if="userData.schoolLogoUrl"
524 > 625 width="80"
525 <template 626 />
526 slot="items" 627 </v-flex>
527 slot-scope="props" 628 <v-flex xs12 sm12 md6>
528 v-if="props.index < 5" 629 <p class="mb-0 body-1">
529 style="border-spacing: 0 !important;" 630 <i>{{ userData.name }}</i>
530 > 631 </p>
531 <tr class="td-notice"> 632 <p class="mb-0 caption grey--text">{{ userData.email }}</p>
532 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td> 633 <p class="mb-0 caption grey--text">{{ userData.mobile }}</p>
533 <td> 634 <address class="caption grey--text mb-3">{{ userData.address }}</address>
534 <span class="grey--text caption">{{ date(props.item.created) }}</span> 635 </v-flex>
535 <br /> 636 </v-layout>
536 <span class="body-2">{{ props.item.discussionType}}</span> 637 </v-flex>
537 </td> 638 <hr />
538 <td class="text-xs-center"> 639 <div class="text-xs-center py-3 subheading font-weight-bold">Calender</div>
539 <span> 640
540 <v-tooltip top> 641 <vue-event-calendar :events="activityEvents" @day-changed="handleDayChanged($event)"></vue-event-calendar>
541 <img 642
542 slot="activator" 643 <!-- MEETING EVENTS -->
543 style="cursor:pointer; width:25px; height:25px; " 644 <!-- IF ROLE IS ADMIN -->
645 <v-card class="my-3 elevation-0">
544 src="/static/icon/view.png" 646 <v-card-text v-if="$store.state.role === 'ADMIN' ">
545 /> 647 <!-- MEETING EVENTS -->
648 <v-card-title class="justify-center subheading font-weight-bold">Meeting Events</v-card-title>
546 <span>View</span> 649 <div
547 </v-tooltip> 650 v-for="(activity,index) in activityList"
548 </span> 651 :key="index"
549 </td> 652 class="mt-2"
550 </tr> 653 style="cursor: pointer;"
551 </template> 654 @click="seeEventDetails(activity)"
552 </v-data-table> 655 >
553 </v-card> 656 <span
554 </v-flex> 657 :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
555 <v-flex xs6> 658 style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
556 <v-card class="mt-2 card"> 659 ></span>
557 <h4 class="pa-3"> 660 <div style="display: inline-block;" class="ml-2">
558 <b>Online User</b> 661 <div>
559 </h4> 662 <div
560 663 class="grey--text lighten-1 caption"
561 <v-data-table 664 v-if="activity.dateOfEvent"
562 :items="onlineUser" 665 >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div>
563 class="elevation-0" 666 <div class="body-1" v-if="activity.title">{{activity.title}}</div>
564 flat 667 </div>
565 hide-actions 668 </div>
566 hide-headers 669 </div>
567 style="border-spacing: 0 !important;" 670 <div v-if="activityList.length == 0">
568 > 671 <p class="text-center title grey lighten-4 error--text">No Data Found!</p>
569 <template 672 </div>
570 slot="items" 673 </v-card-text>
674
675 <!-- ROLE IS NOT ADMIN -->
571 slot-scope="props" 676 <v-card-text v-if="$store.state.role != 'ADMIN'">
572 v-if="props.index < 5" 677 <v-card-title class="justify-center subheading font-weight-bold">Meeting Events</v-card-title>
573 style="border-spacing: 0 !important;" 678 <div
574 > 679 v-for="(activity,index) in activityList"
575 <tr class="td-notice"> 680 :key="index"
576 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td> 681 class="mt-2"
577 <td> 682 style="cursor: pointer;"
578 <span class="body-2">{{ props.item.user }}</span> 683 @click="seeEventDetails(activity)"
579 </td> 684 >
580 <td class="text-xs-center"> 685 <span
581 <span> 686 :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
582 <v-tooltip top> 687 style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
583 <img 688 ></span>
584 slot="activator" 689 <div style="display: inline-block;" class="ml-2">
585 style="cursor:pointer; width:25px; height:25px; " 690 <!-- MEETING EVENTS FOR PARENT -->
586 src="/static/icon/view.png" 691 <div v-if="$store.state.role === 'PARENT' ">
587 /> 692 <div
588 <span>View</span> 693 class="grey--text lighten-1 caption"
589 </v-tooltip> 694 v-if="activity.meetingEvent"
590 </span> 695 >{{moment(activity.meetingEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
591 </td> 696 <div
592 </tr> 697 class="body-2"
593 </template> 698 v-if="activity.meetingEvent"
594 </v-data-table> 699 >{{activity.meetingEvent.title}}</div>
595 </v-card> 700 </div>
596 </v-flex> 701
597 </v-layout> 702 <!-- MEETING EVENTS FOR TEACHER -->
598 </v-container> 703 <div v-if="role === 'TEACHER'">
599 </v-flex> 704 <div
600 <v-spacer></v-spacer> 705 class="grey--text lighten-1 caption"
601 <!-- SIDE BAR --> 706 v-if="activity.dateOfEvent"
602 <v-flex xs12 sm12 md4> 707 >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div>
603 <v-card height="100%" class="elevation-0 mt-3 profileDasboard"> 708 <div class="body-2" v-if="activity.title">{{activity.title}}</div>
604 <v-card-text class="px-2"> 709 </div>
605 <h4 class="text-xs-center py-3"> 710 </div>
606 <b>Profile</b> 711 <div v-if="activityList.length == 0">
607 </h4> 712 <p class="text-center title grey lighten-4 error--text">No Data Found!</p>
608 <v-flex xs12 class="py-3"> 713 </div>
609 <v-layout wrap> 714 </div>
610 <v-flex xs12 sm12 md4> 715 </v-card-text>
611 <img 716 </v-card>
612 src="/static/icon/user.png" 717 </v-card-text>
613 v-if="!userData.profilePicUrl && !userData.schoolLogoUrl" 718 </v-card>
614 width="80" 719 </v-flex>
615 /> 720 </v-layout>
616 <img 721
617 :src="userData.profilePicUrl" 722 <v-dialog v-model="dialog" max-width="500" persistent>
618 onerror="this.src='/static/icon/user.png';" 723 <v-card color="grey lighten-4" flat>
619 v-if="userData.profilePicUrl" 724 <v-toolbar dark color="fixcolors">
620 width="80" 725 <v-spacer></v-spacer>
621 /> 726 <v-btn icon @click="dialog= false">
622 <img 727 <v-icon>close</v-icon>
623 :src="userData.schoolLogoUrl" 728 </v-btn>
624 onerror="this.src='/static/icon/user.png';" 729 </v-toolbar>
625 v-if="userData.schoolLogoUrl" 730 <v-flex class="py-4">
626 width="80" 731 <v-list-tile>
627 /> 732 <v-list-tile-action>
628 </v-flex> 733 <v-icon>edit</v-icon>
629 <v-flex xs12 sm12 md6> 734 </v-list-tile-action>
630 <p class="mb-0 body-1"> 735 <v-list-tile-content>
631 <i>{{ userData.name }}</i> 736 <v-list-tile-title>{{ selected.title }}</v-list-tile-title>
632 </p> 737 </v-list-tile-content>
633 <p class="mb-0 caption grey--text">{{ userData.email }}</p> 738 </v-list-tile>
634 <p class="mb-0 caption grey--text">{{ userData.mobile }}</p> 739 <v-list-tile>
635 <address class="caption grey--text mb-3">{{ userData.address }}</address> 740 <v-list-tile-action>
636 </v-flex> 741 <v-icon>access_time</v-icon>
637 </v-layout> 742 </v-list-tile-action>
638 </v-flex> 743 <v-list-tile-content>
639 <hr /> 744 <v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title>
640 <div class="text-xs-center py-3 subheading font-weight-bold">Calender</div> 745 </v-list-tile-content>
641 746 </v-list-tile>
642 <vue-event-calendar :events="activityEvents" @day-changed="handleDayChanged($event)"></vue-event-calendar> 747 </v-flex>
643 748 </v-card>
644 <!-- LATEST EVENTS --> 749 </v-dialog>
645 <!-- IF ROLE IS ADMIN --> 750 </v-app>
646 <v-card class="my-3 elevation-0" v-if="role != 'TEACHER'"> 751 </template>
647 <v-card-text v-if="$store.state.role === 'ADMIN' "> 752
648 <!-- MEETING EVENTS --> 753 <script>
649 <v-card-title class="justify-center subheading font-weight-bold">Meeting Events</v-card-title> 754 import http from "@/Services/http.js";
650 <div 755 import moment from "moment";
651 v-for="(activity,index) in activityList" 756 import AllApiCalls from "@/Services/AllApiCalls.js";
652 :key="index" 757 // import { FunctionalCalendar } from "vue-functional-calendar";
653 class="mt-2" 758
654 style="cursor: pointer;" 759 export default {
655 @click="seeEventDetails(activity)" 760 components: {
656 > 761 // FunctionalCalendar
657 <span 762 },
658 :style="{ 'background-color': colorsArray[index%colorsArray.length] }" 763 mixins: [AllApiCalls],
659 style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;" 764 data() {
660 ></span> 765 return {
661 <div style="display: inline-block;" class="ml-2"> 766 // data: {
662 <div> 767 // clieckedToday: false
663 <div 768 // },
664 class="grey--text lighten-1 caption" 769 // markedDates: ["16/4/2019", "18/4/2019", "20/4/2019", "21/4/2019"],
665 v-if="activity.dateOfEvent" 770 // calendarData: {},
666 >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div> 771 // calendar: {},
667 <div class="body-1" v-if="activity.title">{{activity.title}}</div> 772
668 </div> 773 // DIALOG BOX EVENT DETAILS
774 tabs: [
775 { name: "School Events", icon: "mdi-account" },
776 { name: "Meeting Events", icon: "mdi-account-outline" },
777 ],
669 </div> 778 viewEventDetails: false,
779 active: 0,
780 particularEvent: [],
781 displayEventsList: [],
782 dialogSchoolEvents: [],
783 dialogMeetingEvents: [],
670 </div> 784
671 <div v-if="activityList.length == 0"> 785 // CALENDER
672 <p class="text-center title grey lighten-4 error--text">No Data Found!</p> 786 moment: moment,
673 </div> 787 activityEvents: [],
674 </v-card-text> 788 onlineUser: [
675 789 {
676 <!-- ROLE IS NOT ADMIN --> 790 user: "Student Demo",
677 <v-card-text v-if="$store.state.role != 'ADMIN'"> 791 },
678 <v-card-title class="justify-center subheading font-weight-bold">Latest Events</v-card-title> 792 {
679 <div 793 user: "Teacher Demo",
680 v-for="(activity,index) in activityList" 794 },
681 :key="index" 795 {
682 class="mt-2" 796 user: "Priyansh Gupta",
683 style="cursor: pointer;" 797 },
684 @click="seeEventDetails(activity)" 798 {
685 > 799 user: "Gaurav Aggarwal",
686 <span 800 },
687 :style="{ 'background-color': colorsArray[index%colorsArray.length] }" 801 {
688 style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;" 802 user: "Approve Arorra",
689 ></span> 803 },
690 <div style="display: inline-block;" class="ml-2"> 804 ],
691 <!-- LATEST EVENTS FOR PARENT --> 805 showLoader: false,
692 <div v-if="$store.state.role === 'PARENT' "> 806 calendarData: {},
693 <div 807 dialog: false,
694 class="grey--text lighten-1 caption" 808 dialogNotice: false,
695 v-if="activity.meetingEvent" 809 HolidaysList: [],
696 >{{moment(activity.meetingEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div> 810 EventsList: [],
697 <div 811 events: [],
698 class="body-2" 812 config: {
699 v-if="activity.meetingEvent" 813 eventClick: (event) => {
700 >{{activity.meetingEvent.title}}</div> 814 this.selected = event;
701 </div> 815 this.dialog = true;
702 816 },
703 <!-- LATEST EVENTS FOR TEACHER --> 817 },
704 <div v-if="role === 'TEACHER'"> 818 selected: {},
705 <div 819 barGraph: [],
706 class="grey--text lighten-1 caption" 820 // notice: {},
707 v-if="activity.dateOfEvent" 821 userData: {},
708 >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div> 822 dated: new Date(2018, 0, 9),
709 <div class="body-2" v-if="activity.title">{{activity.title}}</div> 823 userList: [],
710 </div> 824 sectionList: [],
711 </div> 825 students: "",
712 <div v-if="activityList.length == 0"> 826 parents: "",
713 <p class="text-center title grey lighten-4 error--text">No Data Found!</p> 827 teachers: "",
714 </div> 828 classes: "",
715 </div> 829 noticeData: [],
716 </v-card-text> 830 expenseData: [],
717 </v-card> 831 feeData: [],
718 </v-card-text> 832 collectionData: [],
719 </v-card> 833 courseData: [],
720 </v-flex> 834 studentsData: [],
721 </v-layout> 835 annoucementData: [],
722 836 role: "",
723 <v-dialog v-model="dialog" max-width="500" persistent> 837 attrs: [
724 <v-card color="grey lighten-4" flat> 838 {
725 <v-toolbar dark color="fixcolors"> 839 key: "today",
726 <v-spacer></v-spacer> 840 highlight: true,
727 <v-btn icon @click="dialog= false"> 841 dates: new Date(),
728 <v-icon>close</v-icon> 842 },
729 </v-btn> 843 ],
730 </v-toolbar> 844 drawer: true,
731 <v-flex class="py-4"> 845 items: [
732 <v-list-tile> 846 { title: "Home", icon: "dashboard" },
733 <v-list-tile-action> 847 { title: "About", icon: "question_answer" },
734 <v-icon>edit</v-icon> 848 ],
735 </v-list-tile-action> 849 right: null,
736 <v-list-tile-content> 850
737 <v-list-tile-title>{{ selected.title }}</v-list-tile-title> 851 series: [
738 </v-list-tile-content> 852 {
739 </v-list-tile> 853 name: "Total",
740 <v-list-tile> 854 data: [],
741 <v-list-tile-action> 855 },
742 <v-icon>access_time</v-icon> 856 ],
743 </v-list-tile-action> 857 showChart: false,
744 <v-list-tile-content> 858 chartOptions: {
745 <v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title> 859 chart: {
746 </v-list-tile-content> 860 type: "bar",
747 </v-list-tile> 861 height: 150,
748 </v-flex> 862 stacked: true,
749 </v-card> 863 // animations: {
750 </v-dialog> 864 // enabled: true,
751 </v-app> 865 // easing: "easeinout",
752 </template> 866 // speed: 1200,
753 867 // animateGradually: {
754 <script> 868 // enabled: true,
755 import http from "@/Services/http.js"; 869 // delay: 450
756 import moment from "moment"; 870 // },
757 import AllApiCalls from "@/Services/AllApiCalls.js"; 871 // dynamicAnimation: {
758 // import { FunctionalCalendar } from "vue-functional-calendar"; 872 // enabled: true,
759 873 // speed: 450
760 export default { 874 // }
761 components: { 875 // }
762 // FunctionalCalendar 876 },
763 }, 877 plotOptions: {
764 mixins: [AllApiCalls], 878 bar: {
765 data() { 879 horizontal: false,
766 return { 880 columnWidth: "25%",
767 // data: { 881 // endingShape: "rounded",
768 // clieckedToday: false 882 distributed: true,
769 // }, 883 },
770 // markedDates: ["16/4/2019", "18/4/2019", "20/4/2019", "21/4/2019"], 884 },
771 // calendarData: {}, 885 responsive: [
772 // calendar: {}, 886 {
773 887 breakpoint: 480,
774 // DIALOG BOX EVENT DETAILS 888 options: {
775 tabs: [ 889 legend: {
776 { name: "School Events", icon: "mdi-account" }, 890 position: "bottom",
777 { name: "Meeting Events", icon: "mdi-account-outline" }, 891 offsetX: -10,
778 ], 892 offsetY: 0,
779 viewEventDetails: false, 893 },
780 active: 0, 894 },
781 particularEvent: [], 895 },
782 displayEventsList: [], 896 ],
783 dialogSchoolEvents: [], 897 legend: {
784 dialogMeetingEvents: [], 898 show: false,
785 899 },
786 // CALENDER 900 colors: ["#7852cc", "#f9a825", "#ff8a89"],
787 moment: moment, 901 dataLabels: {
788 activityEvents: [], 902 enabled: false,
789 onlineUser: [ 903 },
790 { 904 stroke: {
791 user: "Student Demo", 905 show: true,
792 }, 906 width: 2,
793 { 907 colors: ["transparent"],
794 user: "Teacher Demo", 908 },
795 }, 909 xaxis: {
796 { 910 categories: ["Fee", "Collections", "Expences"],
797 user: "Priyansh Gupta", 911 },
798 }, 912 yaxis: {
799 { 913 title: {
800 user: "Gaurav Aggarwal", 914 text: "",
801 }, 915 },
802 { 916 },
803 user: "Approve Arorra", 917 fill: {
804 }, 918 opacity: 1,
805 ], 919 },
806 showLoader: false, 920 tooltip: {
807 calendarData: {}, 921 y: {
808 dialog: false, 922 formatter: function (val, opts) {
809 dialogNotice: false, 923 return "" + val + " ";
810 HolidaysList: [], 924 },
811 EventsList: [], 925 },
812 events: [], 926 },
813 config: { 927 },
814 eventClick: (event) => { 928
815 this.selected = event; 929 // LATEST ACTIVITY
816 this.dialog = true; 930 colorsArray: ["#ff8a89", "#71d9ea", "#7852cc", "#F9A825"],
817 }, 931 activityList: [],
818 }, 932 };
819 selected: {}, 933 },
820 barGraph: [], 934
821 // notice: {}, 935 methods: {
822 userData: {}, 936 test(e) {
823 dated: new Date(2018, 0, 9), 937 console.log(" test - ", e);
824 userList: [], 938 },
825 sectionList: [], 939 async handleDayChanged(e) {
826 students: "", 940 console.log("event calender - ", e);
827 parents: "", 941 /*the list of events that will be used in dialog box to display events */
828 teachers: "", 942 // this.displayEventsList = [];
943 this.dialogMeetingEvents = [];
944 this.dialogSchoolEvents = [];
945
946 for (var i = 0; i < e.events.length; i++) {
947 if (e.events[i].eventType == "meetingEvent") {
948 let meetingEventResponse = await this.getParticularMeetingEvent({
949 meetingEventId: e.events[i]._id,
950 });
951 this.dialogMeetingEvents.push(meetingEventResponse.data.data);
952 }
953 if (e.events[i].eventType == "schoolEvent") {
954 let schoolEventResponse = await this.getParticularSchoolEvent({
955 schoolEventId: e.events[i]._id,
956 });
957 this.dialogSchoolEvents.push(schoolEventResponse.data.data);
958 }
959 }
960
829 classes: "", 961 this.viewEventDetails = true;
830 noticeData: [], 962 },
831 expenseData: [], 963 async seeEventDetails(activity, message) {
832 feeData: [], 964 // if (this.$store.state.role === "TEACHER") {
833 collectionData: [], 965 // let response = await this.getParticularMeetingEvent({
834 courseData: [], 966 // meetingEventId: activity._id,
835 studentsData: [], 967 // });
968 // this.displayEventsList = [];
969 // this.displayEventsList.push(response.data.data);
970 // this.viewEventDetails = true;
971 // }
836 annoucementData: [], 972 if (this.$store.state.role === "PARENT") {
837 role: "", 973 let response = await this.getParticularMeetingEvent({
838 attrs: [ 974 meetingEventId: activity.meetingEvent._id,
839 { 975 });
976 this.displayEventsList = [];
977 this.displayEventsList.push(response.data.data);
840 key: "today", 978 this.viewEventDetails = true;
841 highlight: true, 979 }
842 dates: new Date(), 980 if (this.$store.state.role === "ADMIN" || this.$store.state.role === "TEACHER") {
843 }, 981 if (message == "schoolEvent") {
844 ], 982 let response = await this.getParticularSchoolEvent({
845 drawer: true, 983 schoolEventId: activity._id,
984 });
985 this.displayEventsList = [];
986 this.displayEventsList.push(response.data.data);
987 } else {
988 let response = await this.getParticularMeetingEvent({
989 meetingEventId: activity._id,
990 });
991 this.displayEventsList = [];
992 this.displayEventsList.push(response.data.data);
993 }
846 items: [ 994 this.viewEventDetails = true;
847 { title: "Home", icon: "dashboard" }, 995 }
848 { title: "About", icon: "question_answer" }, 996 },
849 ], 997 async routeToCourseDetails(courseId) {
850 right: null, 998 /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/
851 999 let response = await this.getParticularCourseDetail(courseId);
852 series: [ 1000
853 { 1001 /* If the response is null then dont route */
854 name: "Total", 1002 if (response.data.data.length > 0) {
855 data: [], 1003 this.$router.push({
856 }, 1004 name: "Course Details",
857 ], 1005 query: { courseId: courseId },
858 showChart: false, 1006 });
859 chartOptions: { 1007 } else {
860 chart: { 1008 this.seeSnackbar("No Data Available", "warning");
861 type: "bar", 1009 }
862 height: 150, 1010 },
863 stacked: true, 1011
864 // animations: { 1012 closeNotice() {
865 // enabled: true, 1013 this.dialogNotice = false;
866 // easing: "easeinout", 1014 },
867 // speed: 1200, 1015 profile() {
868 // animateGradually: { 1016 // this.editedIndex = this.desserts.indexOf(item);
869 // enabled: true, 1017 // this.notice = Object.assign({}, item);
870 // delay: 450 1018 // this.dialogNotice = true;
871 // }, 1019 this.$router.push("/noticeBoard");
872 // dynamicAnimation: { 1020 },
873 // enabled: true, 1021 date: function (date) {
874 // speed: 450 1022 return moment(date).format("MMMM DD, YYYY HH:mm");
875 // } 1023 },
876 // } 1024 activityDate(date) {
877 }, 1025 return moment(date).format("MMMM DD, YYYY");
878 plotOptions: { 1026 },
879 bar: { 1027 refreshEvents() {
880 horizontal: false, 1028 this.$refs.calendar.$emit("refetch-events");
881 columnWidth: "25%", 1029 },
882 // endingShape: "rounded", 1030 removeEvent() {
883 distributed: true, 1031 this.$refs.calendar.$emit("remove-event", this.selected);
884 }, 1032 this.selected = {};
885 }, 1033 },
886 responsive: [ 1034 eventSelected(event) {
887 { 1035 this.selected = event;
888 breakpoint: 480, 1036 },
889 options: { 1037 // eventDropStart: function(event) {
890 legend: { 1038 // event.editable = false;
891 position: "bottom", 1039 // },
892 offsetX: -10, 1040 eventCreated(...test) {
893 offsetY: 0, 1041 console.log(test);
894 }, 1042 },
895 }, 1043 getStudents() {
896 }, 1044 http()
897 ], 1045 .get("/getStudentsList")
898 legend: { 1046 .then((response) => {
899 show: false, 1047 this.students = response.data.data;
900 }, 1048 this.showLoader = false;
901 colors: ["#7852cc", "#f9a825", "#ff8a89"], 1049 })
902 dataLabels: { 1050 .catch((error) => {
903 enabled: false, 1051 // console.log("err====>", err);
904 }, 1052 this.showLoader = false;
905 stroke: { 1053 if (error.response.status === 401) {
906 show: true, 1054 this.$router.replace({ path: "/" });
907 width: 2, 1055 this.$store.dispatch("setToken", null);
908 colors: ["transparent"], 1056 this.$store.dispatch("Id", null);
909 }, 1057 }
910 xaxis: { 1058 });
911 categories: ["Fee", "Collections", "Expences"], 1059 },
912 }, 1060 getParents() {
913 yaxis: { 1061 http()
914 title: { 1062 .get("/getParentsList")
915 text: "", 1063 .then((response) => {
916 }, 1064 this.parents = response.data.data;
917 }, 1065 this.showLoader = false;
918 fill: { 1066 })
919 opacity: 1, 1067 .catch((error) => {
920 }, 1068 // console.log("err====>", err);
921 tooltip: { 1069 this.showLoader = false;
922 y: { 1070 });
923 formatter: function (val, opts) { 1071 },
924 return "" + val + " "; 1072 getTeachers() {
925 }, 1073 http()
926 }, 1074 .get("/getTeachersList")
927 }, 1075 .then((response) => {
928 }, 1076 this.teachers = response.data.data;
929 1077 this.showLoader = false;
930 // LATEST ACTIVITY 1078 })
931 colorsArray: ["#ff8a89", "#71d9ea", "#7852cc", "#F9A825"], 1079 .catch((error) => {
932 activityList: [], 1080 // console.log("err====>", err);
933 }; 1081 this.showLoader = false;
934 }, 1082 });
935 1083 },
936 methods: { 1084 getClasses() {
937 test(e) { 1085 http()
938 console.log(" test - ", e); 1086 .get("/getClassesList")
939 }, 1087 .then((response) => {
940 async handleDayChanged(e) { 1088 this.classes = response.data.data;
941 console.log("event calender - ", e); 1089 this.showLoader = false;
942 /*the list of events that will be used in dialog box to display events */ 1090 })
943 // this.displayEventsList = []; 1091 .catch((error) => {
944 this.dialogMeetingEvents = []; 1092 this.showLoader = false;
945 this.dialogSchoolEvents = []; 1093 });
946 1094 },
947 for (var i = 0; i < e.events.length; i++) { 1095 getNoticeData() {
948 if (e.events[i].eventType == "meetingEvent") { 1096 this.showLoader = true;
949 let meetingEventResponse = await this.getParticularMeetingEvent({ 1097 http()
950 meetingEventId: e.events[i]._id, 1098 .get("/getEventsList")
951 }); 1099 .then((response) => {
952 this.dialogMeetingEvents.push(meetingEventResponse.data.data); 1100 this.noticeData = response.data.data;
953 } 1101 this.showLoader = false;
954 if (e.events[i].eventType == "schoolEvent") { 1102 })
955 let schoolEventResponse = await this.getParticularSchoolEvent({ 1103 .catch((error) => {
956 schoolEventId: e.events[i]._id, 1104 this.showLoader = false;
957 }); 1105 });
958 this.dialogSchoolEvents.push(schoolEventResponse.data.data); 1106 },
959 } 1107 getUserData() {
960 } 1108 // this.showLoader = true;
961 1109 if (this.$store.state.role === "PARENT") {
962 this.viewEventDetails = true; 1110 http()
963 }, 1111 .get("/getParticularUserDetail", {
964 async seeEventDetails(activity, message) { 1112 params: {
965 if (this.$store.state.role === "TEACHER") { 1113 studentId: localStorage.getItem("parentStudentId"),
966 let response = await this.getParticularMeetingEvent({ 1114 },
967 meetingEventId: activity._id, 1115 })
968 }); 1116 .then((response) => {
969 this.displayEventsList = []; 1117 this.userData = response.data.data;
970 this.displayEventsList.push(response.data.data); 1118 this.showLoader = false;
971 this.viewEventDetails = true; 1119 })
972 } 1120 .catch((error) => {
973 if (this.$store.state.role === "PARENT") { 1121 this.showLoader = false;
974 let response = await this.getParticularMeetingEvent({ 1122 });
975 meetingEventId: activity.meetingEvent._id, 1123 } else {
976 }); 1124 http()
977 this.displayEventsList = []; 1125 .get("/getParticularUserDetail")
978 this.displayEventsList.push(response.data.data); 1126 .then((response) => {
979 this.viewEventDetails = true; 1127 this.userData = response.data.data;
980 } 1128 this.showLoader = false;
981 if (this.$store.state.role === "ADMIN") { 1129 })
982 if (message == "schoolEvent") { 1130 .catch((error) => {
983 let response = await this.getParticularSchoolEvent({ 1131 this.showLoader = false;
984 schoolEventId: activity._id, 1132 });
985 }); 1133 }
986 this.displayEventsList = []; 1134 },
987 this.displayEventsList.push(response.data.data); 1135
988 } else { 1136 getFeesAndCollectionsData() {
989 let response = await this.getParticularMeetingEvent({ 1137 http()
990 meetingEventId: activity._id, 1138 .get("/getTotalFeesAndCollections")
991 }); 1139 .then((response) => {
992 this.displayEventsList = []; 1140 this.feeData = response.data.data;
993 this.displayEventsList.push(response.data.data); 1141 // this.collectionData = response.data.data;
994 } 1142 this.series[0].data[0] = this.feeData.totalFees;
995 this.viewEventDetails = true; 1143 this.series[0].data[1] = this.feeData.totalCollection;
996 } 1144 this.showLoader = false;
997 }, 1145 })
998 async routeToCourseDetails(courseId) { 1146 .catch((error) => {
999 /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/ 1147 this.showLoader = false;
1000 let response = await this.getParticularCourseDetail(courseId); 1148 });
1001 1149 },
1002 /* If the response is null then dont route */ 1150 getExpensesData() {
1003 if (response.data.data.length > 0) { 1151 http()
1004 this.$router.push({ 1152 .get("/getTotalExpenses")
1005 name: "Course Details", 1153 .then((response) => {
1006 query: { courseId: courseId }, 1154 this.expenseData = response.data.data;
1007 }); 1155 // var array = response.data.data.sum;
1008 } else { 1156 this.series[0].data[2] = this.expenseData.sum;
1009 this.seeSnackbar("No Data Available", "warning"); 1157 this.showChart = true;
1010 } 1158 // this.series = [
1011 }, 1159 // {
1012 1160 // name: "Total",
1013 closeNotice() { 1161 // data: array
1014 this.dialogNotice = false; 1162 // }
1015 }, 1163 // ];
1016 profile() { 1164 this.showLoader = false;
1017 // this.editedIndex = this.desserts.indexOf(item); 1165 })
1018 // this.notice = Object.assign({}, item); 1166 .catch((error) => {
1019 // this.dialogNotice = true; 1167 this.showLoader = false;
1020 this.$router.push("/noticeBoard"); 1168 });
1021 }, 1169 },
1022 date: function (date) { 1170 // async getparentStudents() {
1023 return moment(date).format("MMMM DD, YYYY HH:mm"); 1171 // this.showLoader = true;
1024 }, 1172 // await http()
1025 activityDate(date) { 1173 // .get("/parentStudentsList")
1026 return moment(date).format("MMMM DD, YYYY"); 1174 // .then((response) => {
1027 }, 1175
1028 refreshEvents() { 1176 // /* set values in local storage */
1029 this.$refs.calendar.$emit("refetch-events"); 1177 // this.studentsData = response.data.data.students;
1030 }, 1178 // this.showLoader = false;
1031 removeEvent() { 1179 // })
1032 this.$refs.calendar.$emit("remove-event", this.selected); 1180 // .catch((err) => {
1033 this.selected = {}; 1181 // console.log("err====>", err);
1034 }, 1182 // this.showLoader = false;
1035 eventSelected(event) { 1183 // });
1036 this.selected = event; 1184 // await this.getCourses(parentStudentsId, classId);
1037 }, 1185 // await this.getAnnoucementes(classId);
1038 // eventDropStart: function(event) { 1186 // },
1039 // event.editable = false; 1187 async getCourses(parentStudentsId, classId) {
1040 // }, 1188 /* getStudentCourses - to get courseData - defined in GetApis.js*/
1041 eventCreated(...test) { 1189 await this.getStudentCourses({
1042 console.log(test); 1190 classId: localStorage.getItem("parentClassId"),
1043 }, 1191 studentId: localStorage.getItem("parentStudentId"),
1044 getStudents() { 1192 });
1045 http() 1193 },
1046 .get("/getStudentsList") 1194 getAnnoucementes(classId) {
1047 .then((response) => { 1195 this.showLoader = true;
1048 this.students = response.data.data; 1196 http()
1049 this.showLoader = false; 1197 .get("/getAnnoucementesList", {
1050 }) 1198 params: {
1051 .catch((error) => { 1199 classId: localStorage.getItem("parentClassId"),
1052 // console.log("err====>", err); 1200 },
1053 this.showLoader = false; 1201 })
1054 if (error.response.status === 401) { 1202 .then((response) => {
1055 this.$router.replace({ path: "/" }); 1203 this.annoucementData = response.data.data;
1056 this.$store.dispatch("setToken", null); 1204 this.showLoader = false;
1057 this.$store.dispatch("Id", null); 1205 })
1058 } 1206 .catch((err) => {
1059 }); 1207 console.log("err====>", err);
1060 }, 1208 this.showLoader = false;
1061 getParents() { 1209 });
1062 http() 1210 },
1063 .get("/getParentsList") 1211 async getMeetingEventes() {
1064 .then((response) => { 1212 if (this.role == "TEACHER" || this.role === "ADMIN") {
1065 this.parents = response.data.data; 1213 this.showLoader = true;
1066 this.showLoader = false; 1214 await http()
1067 }) 1215 .get("/getMeetingEventesList")
1068 .catch((error) => { 1216 .then((response) => {
1069 // console.log("err====>", err); 1217 var activityList = response.data.data;
1070 this.showLoader = false; 1218 this.activityList = activityList;
1071 }); 1219 this.showLoader = false;
1072 }, 1220
1073 getTeachers() { 1221 /* set meetingEvents in activityEvents array to highlight event dates in calender */
1074 http() 1222 for (var i = 0; i < this.activityList.length; i++) {
1075 .get("/getTeachersList") 1223 let obj = {};
1076 .then((response) => { 1224 obj.date = moment(this.activityList[i].dateOfEvent).format(
1077 this.teachers = response.data.data; 1225 "YYYY/MM/DD"
1078 this.showLoader = false; 1226 );
1079 }) 1227 obj.title = this.activityList[i].title;
1080 .catch((error) => { 1228 obj._id = this.activityList[i]._id;
1229 obj.eventType = "meetingEvent";
1230 /* activityEvents is an array used to display events in calender on particular dates */
1081 // console.log("err====>", err); 1231 this.activityEvents.push(obj);
1082 this.showLoader = false; 1232 }
1083 }); 1233 })
1084 }, 1234 .catch((error) => {
1085 getClasses() { 1235 this.showLoader = false;
1086 http() 1236 });
1087 .get("/getClassesList") 1237 }
1238 /* If role is ADMIN or TEACHER then school events need to be displayed too */
1239 if (this.role === "ADMIN" || this.role === "TEACHER") {
1240 await this.getSchoolEventsList();
1241 /* set schoolEvents in activityEvents array to highlight event dates in calender */
1242 for (var i = 0; i < this.schoolEvents.length; i++) {
1243 let obj = {};
1244 obj.date = moment(this.schoolEvents[i].dateOfEvent).format(
1245 "YYYY/MM/DD"
1246 );
1247 obj.title = this.schoolEvents[i].title;
1248 obj._id = this.schoolEvents[i]._id;
1249 obj.eventType = "schoolEvent";
1250 /* activityEvents is an array used to display events in calender on particular dates */
1251 this.activityEvents.push(obj);
1252 }
1253 }
1088 .then((response) => { 1254 },
1089 this.classes = response.data.data; 1255 },
1090 this.showLoader = false; 1256
1091 }) 1257 mounted() {
1092 .catch((error) => { 1258 // = this.$store.state.schoolToken;
1093 this.showLoader = false; 1259 // console.log("this.$store.state.role", this.token);
1094 }); 1260 // this.getUsersList();
1095 }, 1261 },
1096 getNoticeData() { 1262
1097 this.showLoader = true; 1263 async created() {
1098 http() 1264 if (this.$store.state.role === "ADMIN") {
1099 .get("/getEventsList") 1265 // this.token = this.$store.state.token;
1100 .then((response) => { 1266 await this.getFeesAndCollectionsData();
1101 this.noticeData = response.data.data; 1267 await this.getExpensesData();
1102 this.showLoader = false; 1268 } else if (this.$store.state.schoolRole === "SUPERADMIN") {
1103 }) 1269 // this.token = this.$store.state.schoolToken;
1104 .catch((error) => { 1270 await this.getFeesAndCollectionsData();
1105 this.showLoader = false; 1271 await this.getExpensesData();
1106 }); 1272 } else if (this.$store.state.role === "TEACHER") {
1107 }, 1273 // this.token = this.$store.state.token;
1108 getUserData() { 1274 } else if (this.$store.state.role === "ACCOUNTANT") {
1109 // this.showLoader = true; 1275 // this.token = this.$store.state.token;
1110 if (this.$store.state.role === "PARENT") { 1276 } else if (this.$store.state.role === "LIBRARIAN") {
1111 http() 1277 // this.token = this.$store.state.token;
1112 .get("/getParticularUserDetail", { 1278 } else if (this.$store.state.role === "PARENT") {
1113 params: { 1279 // this.token = this.$store.state.token;
1114 studentId: localStorage.getItem("parentStudentId"), 1280 // await this.getparentStudents();
1115 }, 1281 this.studentsData = this.$store.getters.GET_STUDENTS_DATA;
1116 }) 1282 console.log("students data - ", this.studentsData);
1117 .then((response) => { 1283 await this.getCourses();
1118 this.userData = response.data.data; 1284 await this.getAnnoucementes();
1119 this.showLoader = false; 1285 }
1120 }) 1286 this.role = this.$store.state.role;
1121 .catch((error) => { 1287
1122 this.showLoader = false; 1288 await this.getStudents();
1123 }); 1289 await this.getTeachers();
1124 } else { 1290 await this.getParents();
1125 http() 1291 await this.getClasses();
1126 .get("/getParticularUserDetail") 1292 await this.getNoticeData();
1127 .then((response) => { 1293 await this.getUserData();
1128 this.userData = response.data.data; 1294
1129 this.showLoader = false; 1295 /* get Latest events list for student login*/
1130 }) 1296 if (this.$store.state.role == "PARENT") {
1131 .catch((error) => { 1297 let response = await this.studentMeetingEvents({
1132 this.showLoader = false; 1298 studentId: localStorage.getItem("parentStudentId"),
1133 }); 1299 });
1134 } 1300 this.activityList = response.data.data;
1135 }, 1301
1136 1302 /* set activityEvents array to highlight event dates in calender */
1137 getFeesAndCollectionsData() { 1303 for (var i = 0; i < this.activityList.length; i++) {
1138 http() 1304 let obj = {};
1139 .get("/getTotalFeesAndCollections") 1305 obj.date = moment(this.activityList[i].meetingEvent.dateOfEvent).format(
1140 .then((response) => { 1306 "YYYY/MM/DD"
1141 this.feeData = response.data.data; 1307 );
1142 // this.collectionData = response.data.data; 1308 obj.title = this.activityList[i].meetingEvent.title;
1143 this.series[0].data[0] = this.feeData.totalFees; 1309 obj._id = this.activityList[i].meetingEvent._id;
src/pages/Report/admitCard.vue
Diff comments   View file @4fb0af7
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- **** Admit Card Table **** --> 3 <!-- **** Admit Card Table **** -->
4 <v-card flat class="elevation-0 transparent"> 4 <v-card flat class="elevation-0 transparent">
5 <v-form ref="form" v-model="valid" lazy-validation> 5 <v-form ref="form" v-model="valid" lazy-validation>
6 <v-flex xs12 sm12 lg12> 6 <v-flex xs12 sm12 lg12>
7 <v-layout wrap> 7 <v-layout wrap>
8 <v-flex xs12 sm12 lg3> 8 <v-flex xs12 sm12 lg3>
9 <v-layout> 9 <v-layout>
10 <v-flex xs12 sm12 lg10 class="ml-2"> 10 <v-flex xs12 sm12 lg10 class="ml-2">
11 <v-autocomplete 11 <v-autocomplete
12 v-model="getReport.examId" 12 v-model="getReport.examId"
13 label="Please Select Exam" 13 label="Please Select Exam"
14 :items="examData" 14 :items="examData"
15 item-text="examName" 15 item-text="examName"
16 item-value="_id" 16 item-value="_id"
17 :rules="examRules" 17 :rules="examRules"
18 @change="getExamList" 18 @change="getExamList"
19 required 19 required
20 ></v-autocomplete> 20 ></v-autocomplete>
21 </v-flex> 21 </v-flex>
22 </v-layout> 22 </v-layout>
23 </v-flex> 23 </v-flex>
24 24
25 <v-flex xs12 sm12 lg3 v-if="getReport.examId"> 25 <v-flex xs12 sm12 lg3 v-if="getReport.examId">
26 <v-layout> 26 <v-layout>
27 <v-flex xs12 sm12 lg10 class="ml-2"> 27 <v-flex xs12 sm12 lg10 class="ml-2">
28 <v-select 28 <v-select
29 v-model="getReport.classId" 29 v-model="getReport.classId"
30 label="Select your class" 30 label="Select your class"
31 type="text" 31 type="text"
32 :items="classList" 32 :items="classList"
33 item-text="classNum" 33 item-text="classNum"
34 item-value="_id" 34 item-value="_id"
35 :rules="classRules" 35 :rules="classRules"
36 @change="getSections(getReport.classId)" 36 @change="getSections(getReport.classId)"
37 required 37 required
38 ></v-select> 38 ></v-select>
39 </v-flex> 39 </v-flex>
40 </v-layout> 40 </v-layout>
41 </v-flex> 41 </v-flex>
42 <v-flex xs12 sm12 lg3 v-if="getReport.classId"> 42 <v-flex xs12 sm12 lg3 v-if="getReport.classId">
43 <v-layout> 43 <v-layout>
44 <v-flex xs12 sm12 lg10 class="ml-2"> 44 <v-flex xs12 sm12 lg10 class="ml-2">
45 <v-select 45 <v-select
46 :items="addSection" 46 :items="addSection"
47 label="Select your Section" 47 label="Select your Section"
48 v-model="getReport.sectionId" 48 v-model="getReport.sectionId"
49 item-text="name" 49 item-text="name"
50 item-value="_id" 50 item-value="_id"
51 name="Select Section" 51 name="Select Section"
52 @change="getStudents" 52 @change="getStudents"
53 :rules="sectionRules" 53 :rules="sectionRules"
54 required 54 required
55 ></v-select> 55 ></v-select>
56 </v-flex> 56 </v-flex>
57 </v-layout> 57 </v-layout>
58 </v-flex> 58 </v-flex>
59 <v-flex xs12 sm12 lg3 v-if="getReport.sectionId"> 59 <v-flex xs12 sm12 lg3 v-if="getReport.sectionId">
60 <v-layout> 60 <v-layout>
61 <v-flex xs12 sm12 lg10 class="ml-2"> 61 <v-flex xs12 sm12 lg10 class="ml-2">
62 <v-select 62 <v-select
63 :items="getStudentsList" 63 :items="getStudentsList"
64 label="Select your student" 64 label="Select your student"
65 v-model="getReport.studentId" 65 v-model="getReport.studentId"
66 item-text="name" 66 item-text="name"
67 item-value="_id" 67 item-value="_id"
68 :rules="studentRules" 68 :rules="studentRules"
69 required 69 required
70 ></v-select> 70 ></v-select>
71 </v-flex> 71 </v-flex>
72 </v-layout> 72 </v-layout>
73 </v-flex> 73 </v-flex>
74 74
75 <v-flex xs12 sm12 lg3> 75 <v-flex xs12 sm12 lg3>
76 <v-layout> 76 <v-layout>
77 <v-flex xs12 sm12 lg10 class="ml-2"> 77 <v-flex xs12 sm12 lg10 class="ml-2">
78 <v-autocomplete 78 <v-autocomplete
79 label="Please Select View Type" 79 label="Please Select View Type"
80 type="text" 80 type="text"
81 :rules="typeRules" 81 :rules="typeRules"
82 :items="typeList" 82 :items="typeList"
83 v-model="getReport.form" 83 v-model="getReport.form"
84 item-text="name" 84 item-text="name"
85 item-value="value" 85 item-value="value"
86 required 86 required
87 ></v-autocomplete> 87 ></v-autocomplete>
88 </v-flex> 88 </v-flex>
89 </v-layout> 89 </v-layout>
90 </v-flex> 90 </v-flex>
91 <v-flex xs12 sm12 lg3> 91 <v-flex xs12 sm12 lg3>
92 <v-btn 92 <v-btn
93 @click="getSchedule" 93 @click="getSchedule"
94 round 94 round
95 dark 95 dark
96 :loading="loading" 96 :loading="loading"
97 class="open-dialog-button mt-3" 97 class="open-dialog-button mt-3"
98 >Get Report</v-btn> 98 >Get Report</v-btn>
99 </v-flex> 99 </v-flex>
100 </v-layout> 100 </v-layout>
101 </v-flex> 101 </v-flex>
102 </v-form> 102 </v-form>
103 </v-card> 103 </v-card>
104 <div v-show="showTable"> 104 <div v-show="showTable">
105 <v-flex xs12 sm12 md10 style="margin:auto"> 105 <v-flex xs12 sm12 md10 style="margin:auto">
106 <v-layout> 106 <v-layout>
107 <v-flex xs12> 107 <v-flex xs12>
108 <v-btn class="open-dialog-button right" round dark @click="printAdmitReport()"> 108 <v-btn class="open-dialog-button right" round dark @click="printAdmitReport()">
109 Print 109 Print
110 <v-icon right dark>print</v-icon> 110 <v-icon right dark>print</v-icon>
111 </v-btn> 111 </v-btn>
112 </v-flex> 112 </v-flex>
113 </v-layout> 113 </v-layout>
114 <!-- ADMIT CARDS --> 114 <!-- ADMIT CARDS -->
115 <div id="printMe" v-if="frontPart"> 115 <div id="printMe" v-if="frontPart">
116 <v-card 116 <v-card
117 v-for="(student,index) in getScheduleList.studentData" 117 v-for="(student,index) in getScheduleList.studentData"
118 :key="index" 118 :key="index"
119 class="mt-3" 119 class="mt-3"
120 style=" 120 style="
121 page-break-after: always; 121 page-break-after: always;
122 background-color: #fff; 122 background-color: #fff;
123 border: 1px solid #ddd; 123 border: 1px solid #ddd;
124 color: rgba(0,0,0,0.87); 124 color: rgba(0,0,0,0.87);
125 overflow-x: auto; 125 overflow-x: auto;
126 display: block; 126 display: block;
127 padding:14px !important; 127 padding:14px !important;
128 webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important; 128 webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important;
129 box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important;" 129 box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important;"
130 > 130 >
131 <v-layout style="border-bottom: 1px solid #ddd;margin: 8px; auto"> 131 <v-layout style="border-bottom: 1px solid #ddd;margin: 8px; auto">
132 <v-flex xs3 style="margin-bottom:0px">
133 <img 132 <v-flex xs3 style="margin-bottom:0px">
134 :src="userData.schoolLogoUrl" 133 <img
135 style="widht:80px;height:80px;" 134 :src="userData.schoolLogoUrl"
136 alt="logo" 135 style="widht:80px;height:80px;"
137 v-if="userData.schoolLogoUrl" 136 alt="logo"
138 /> 137 v-if="userData.schoolLogoUrl"
139 <img 138 />
140 src="/static/default_thumb.png" 139 <img
141 style="widht:80px;height:80px;" 140 src="/static/default_thumb.png"
142 v-else-if="!userData.schoolLogoUrl" 141 style="widht:80px;height:80px;"
143 /> 142 v-else-if="!userData.schoolLogoUrl"
144 <div class="school-name"> 143 />
145 <div class="body-1">{{ student.schoolId.address }}</div> 144 <div class="school-name">
146 <div class="body-1">{{ student.schoolId.mobile }}</div> 145 <div class="body-1">{{ student.schoolId.address }}</div>
147 </div> 146 <div class="body-1">{{ student.schoolId.mobile }}</div>
148 </v-flex> 147 </div>
149 <v-flex xs5 style="text-align:center;margin-bottom:0px"> 148 </v-flex>
150 <p 149 <v-flex xs5 style="text-align:center;margin-bottom:0px">
151 style="font-size:24px;color: #700CE8;letter-spacing:1px;margin-bottom: 4px" 150 <p
152 >{{ student.schoolId.name }}</p> 151 style="font-size:24px;color: #700CE8;letter-spacing:1px;margin-bottom: 4px"
153 <p>{{ student.schoolId.email }}</p> 152 >{{ student.schoolId.name }}</p>
154 153 <p>{{ student.schoolId.email }}</p>
155 <div> 154
156 <h4>{{ getScheduleList.scheduleData[0].examId.examName }} Exam Admit Card</h4> 155 <div>
157 </div> 156 <h4>{{ getScheduleList.scheduleData[0].examId.examName }} Exam Admit Card</h4>
158 </v-flex> 157 </div>
159 <v-flex xs4 style="text-align:center;margin-bottom:0px"> 158 </v-flex>
160 <img src="/static/icon/user.png" v-if="!student.profilePicUrl" width="80" /> 159 <v-flex xs4 style="text-align:center;margin-bottom:0px">
161 <img 160 <img src="/static/icon/user.png" v-if="!student.profilePicUrl" width="80" />
162 :src="student.profilePicUrl"
163 onerror="this.src='/static/icon/user.png';"
164 v-if="student.profilePicUrl"
165 width="80"
166 />
167 </v-flex> 161 <img
168 </v-layout> 162 :src="student.profilePicUrl"
169 <v-layout> 163 onerror="this.src='/static/icon/user.png';"
170 <v-flex xs5 style="margin-bottom:10px"> 164 v-if="student.profilePicUrl"
171 <p style="font-size: 16px;margin:0px;margin-bottom:8px;"> 165 width="80"
172 <b>Name :</b> 166 />
173 <span>{{student.name}}</span> 167 </v-flex>
174 </p> 168 </v-layout>
175 <p style="font-size: 16px;margin:0px;margin-bottom:8px;"> 169 <v-layout>
176 <b>Class :</b> 170 <v-flex xs5 style="margin-bottom:10px">
177 <span>{{student.classId.classNum}}</span> 171 <p style="font-size: 16px;margin:0px;margin-bottom:8px;">
178 </p> 172 <b>Name :</b>
179 <p style="font-size: 16px;margin:0px;margin-bottom:8px;"> 173 <span>{{student.name}}</span>
180 <b>Roll :</b> 174 </p>
181 <span>{{student.rollNo}}</span> 175 <p style="font-size: 16px;margin:0px;margin-bottom:8px;">
182 </p> 176 <b>Class :</b>
183 </v-flex> 177 <span>{{student.classId.classNum}}</span>
184 <v-flex xs5 style="margin-bottom:10px"> 178 </p>
185 <p style="font-size: 16px;margin:0px;margin-bottom:8px;"> 179 <p style="font-size: 16px;margin:0px;margin-bottom:8px;">
186 <b>Section :</b> 180 <b>Roll :</b>
187 <span>{{student.sectionId.name }}</span> 181 <span>{{student.rollNo}}</span>
188 </p> 182 </p>
189 <p style="font-size: 16px;margin:0px;margin-bottom:8px;"> 183 </v-flex>
190 <b>Blood Group :</b> 184 <v-flex xs5 style="margin-bottom:10px">
191 <span style="color: #707478">{{student.bloodGroup }}</span> 185 <p style="font-size: 16px;margin:0px;margin-bottom:8px;">
192 </p> 186 <b>Section :</b>
193 <p style="font-size: 16px;margin:0px;margin-bottom:8px;">Subject in which Appearing</p> 187 <span>{{student.sectionId.name }}</span>
194 </v-flex> 188 </p>
195 </v-layout> 189 <p style="font-size: 16px;margin:0px;margin-bottom:8px;">
196 <table 190 <b>Blood Group :</b>
197 class="mb-5 tableRsponsive feeTypeTable" 191 <span style="color: #707478">{{student.bloodGroup }}</span>
198 style="border: 1px solid lightgrey; 192 </p>
199 border-collapse: collapse;!important 193 <p style="font-size: 16px;margin:0px;margin-bottom:8px;">Subject in which Appearing</p>
200 table-layout: auto !important; 194 </v-flex>
201 width: 100% !important;" 195 </v-layout>
202 > 196 <table
203 <thead style="border: 1px solid lightgrey !important;"> 197 class="mb-5 tableRsponsive feeTypeTable"
204 <tr style="border: 1px solid lightgrey !important;padding:4px;"> 198 style="border: 1px solid lightgrey;
205 <td style="border: 1px solid lightgrey !important;padding: 6px;">No</td> 199 border-collapse: collapse;!important
206 <td style="border: 1px solid lightgrey !important;padding: 6px;">Exam Date</td> 200 table-layout: auto !important;
207 <td style="border: 1px solid lightgrey !important;padding: 6px;">Start Time</td> 201 width: 100% !important;"
208 <td style="border: 1px solid lightgrey !important;padding: 6px;">End Time</td> 202 >
209 <td style="border: 1px solid lightgrey !important;padding: 6px;">Subject Name</td> 203 <thead style="border: 1px solid lightgrey !important;">
210 </tr> 204 <tr style="border: 1px solid lightgrey !important;padding:4px;">
211 </thead> 205 <td style="border: 1px solid lightgrey !important;padding: 6px;">No</td>
212 <tbody style="border: 1px solid lightgrey !important;"> 206 <td style="border: 1px solid lightgrey !important;padding: 6px;">Exam Date</td>
213 <tr v-for="(scheduleData,i) in getScheduleList.scheduleData" :key="i"> 207 <td style="border: 1px solid lightgrey !important;padding: 6px;">Start Time</td>
214 <td style="border:1px solid lightgrey !important; padding:6px;">{{ i + 1 }}</td> 208 <td style="border: 1px solid lightgrey !important;padding: 6px;">End Time</td>
215 <td 209 <td style="border: 1px solid lightgrey !important;padding: 6px;">Subject Name</td>
216 style="border: 1px solid lightgrey !important;padding: 6px;" 210 </tr>
217 >{{ scheduleData.date ? scheduleData.date : '-' }}</td> 211 </thead>
218 <td 212 <tbody style="border: 1px solid lightgrey !important;">
219 style="border: 1px solid lightgrey !important;padding: 6px;" 213 <tr v-for="(scheduleData,i) in getScheduleList.scheduleData" :key="i">
220 >{{ scheduleData.timeFrom ? scheduleData.timeFrom : "-" }}</td> 214 <td style="border:1px solid lightgrey !important; padding:6px;">{{ i + 1 }}</td>
221 <td 215 <td
222 style="border: 1px solid lightgrey !important;padding: 6px;" 216 style="border: 1px solid lightgrey !important;padding: 6px;"
223 >{{ scheduleData.timeTo ? scheduleData.timeTo : "-"}}</td> 217 >{{ scheduleData.date ? scheduleData.date : '-' }}</td>
224 <td 218 <td
225 style="border: 1px solid lightgrey !important;padding: 6px;" 219 style="border: 1px solid lightgrey !important;padding: 6px;"
226 >{{ scheduleData.subjectName ? scheduleData.subjectName : "-" }}</td> 220 >{{ scheduleData.timeFrom ? scheduleData.timeFrom : "-" }}</td>
227 </tr> 221 <td
228 <tr v-if="getScheduleList.scheduleData.length === 0"> 222 style="border: 1px solid lightgrey !important;padding: 6px;"
229 <td style="border: 1px soild lightgrey !importand;padding:6px;">-</td> 223 >{{ scheduleData.timeTo ? scheduleData.timeTo : "-"}}</td>
230 <td style="border: 1px solid lightgrey !important;padding: 6px;">-</td> 224 <td
231 <td style="border: 1px solid lightgrey !important;padding: 6px;">-</td> 225 style="border: 1px solid lightgrey !important;padding: 6px;"
232 <td style="border: 1px solid lightgrey !important;padding: 6px;">-</td> 226 >{{ scheduleData.subjectName ? scheduleData.subjectName : "-" }}</td>
233 <td style="border: 1px solid lightgrey !important;padding: 6px;">-</td> 227 </tr>
234 </tr> 228 <tr v-if="getScheduleList.scheduleData.length === 0">
235 </tbody> 229 <td style="border: 1px soild lightgrey !importand;padding:6px;">-</td>
236 </table> 230 <td style="border: 1px solid lightgrey !important;padding: 6px;">-</td>
237 </v-card> 231 <td style="border: 1px solid lightgrey !important;padding: 6px;">-</td>
238 </div> 232 <td style="border: 1px solid lightgrey !important;padding: 6px;">-</td>
239 <div id="printMe" v-if="backPart"> 233 <td style="border: 1px solid lightgrey !important;padding: 6px;">-</td>
240 <v-card 234 </tr>
241 style=" 235 </tbody>
242 text-align:center 236 </table>
243 background-color: #fff; 237 </v-card>
244 border: 1px solid #ddd; 238 </div>
245 color: rgba(0,0,0,0.87); 239 <div id="printMe" v-if="backPart">
246 overflow-x: auto; 240 <v-card
247 display: block; 241 style="
248 padding:14px !important; 242 text-align:center
249 webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important; 243 background-color: #fff;
250 box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important;" 244 border: 1px solid #ddd;
251 > 245 color: rgba(0,0,0,0.87);
252 <div 246 overflow-x: auto;
253 style=" 247 display: block;
254 margin-bottom: 16px; 248 padding:14px !important;
255 overflow: hidden; 249 webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important;
256 padding: 50px 90px;" 250 box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important;"
257 > 251 >
258 <ol style=" 252 <div
259 margin: 0; 253 style="
260 margin-bottom: 10px;"> 254 margin-bottom: 16px;
261 <p 255 overflow: hidden;
262 style=" 256 padding: 50px 90px;"
263 margin-bottom: 16px; 257 >
264 line-height: 20px; 258 <ol style="
265 text-align: left;" 259 margin: 0;
266 > 260 margin-bottom: 10px;">
267 <b>1. Do not Carry these Electronic Gadgets:</b> 261 <p
268 Electronic gadgets(Bluetooth devices,head phones,pen/buttonhole cameras,scanner,calculator,storage devices etc) 262 style="
269 in the examination lab. These items are strictly prohibited from examination lab. 263 margin-bottom: 16px;
270 </p> 264 line-height: 20px;
271 <p 265 text-align: left;"
272 style=" 266 >
273 margin-bottom: 16px; 267 <b>1. Do not Carry these Electronic Gadgets:</b>
274 line-height: 20px; 268 Electronic gadgets(Bluetooth devices,head phones,pen/buttonhole cameras,scanner,calculator,storage devices etc)
275 text-align: left;" 269 in the examination lab. These items are strictly prohibited from examination lab.
276 > 270 </p>
277 <b>2. Do not Carry these Ornaments:</b> 271 <p
278 Candidates should also not wear charms,veil,items containing such as rings,bracelet,earings,nose-pin,chains, 272 style="
279 necklace,pendants,badge,broach,hair-pin,hair-band. 273 margin-bottom: 16px;
280 </p> 274 line-height: 20px;
281 <p 275 text-align: left;"
282 style=" 276 >
283 margin-bottom: 16px; 277 <b>2. Do not Carry these Ornaments:</b>
284 line-height: 20px; 278 Candidates should also not wear charms,veil,items containing such as rings,bracelet,earings,nose-pin,chains,
285 text-align: left;" 279 necklace,pendants,badge,broach,hair-pin,hair-band.
286 > 280 </p>
287 <b>3. What Candidates wear to Examination hall:</b> 281 <p
288 Candidates should not wear clothes with full sleeves or big button,etc. Candidates are adviced to wear open footwear 282 style="
289 like slippers,sandals instead of shoes as the candidates could be asked to remove shoes by the frisking staff. 283 margin-bottom: 16px;
290 </p> 284 line-height: 20px;
291 <p 285 text-align: left;"
292 style=" 286 >
293 margin-bottom: 16px; 287 <b>3. What Candidates wear to Examination hall:</b>
294 line-height: 20px; 288 Candidates should not wear clothes with full sleeves or big button,etc. Candidates are adviced to wear open footwear
295 text-align: left;" 289 like slippers,sandals instead of shoes as the candidates could be asked to remove shoes by the frisking staff.
296 > 290 </p>
297 <b>4. Do not carry Stationary:</b> 291 <p
298 Pen/pencil and paper for rough work would be provided in examination lab. Electronic watch (timer)will be available 292 style="
299 on the computer screen alloted to the candidates. 293 margin-bottom: 16px;
300 </p> 294 line-height: 20px;
301 <p 295 text-align: left;"
302 style=" 296 >
303 margin-bottom: 16px; 297 <b>4. Do not carry Stationary:</b>
304 line-height: 20px; 298 Pen/pencil and paper for rough work would be provided in examination lab. Electronic watch (timer)will be available
305 text-align: left;" 299 on the computer screen alloted to the candidates.
306 > 300 </p>
307 <b>5. Do not Carry Bags:</b> 301 <p
308 Don not Carry back pack, College bag or any other bag like hand bag. If candidates brings any bag, they must make a 302 style="
309 arrangement for safe custody of these items.The Commission shall not make any arrangement nor be responsible for the 303 margin-bottom: 16px;
310 safe custody of such items. 304 line-height: 20px;
311 </p> 305 text-align: left;"
312 <p 306 >
313 style=" 307 <b>5. Do not Carry Bags:</b>
314 margin-bottom: 16px; 308 Don not Carry back pack, College bag or any other bag like hand bag. If candidates brings any bag, they must make a
315 line-height: 20px; 309 arrangement for safe custody of these items.The Commission shall not make any arrangement nor be responsible for the
316 text-align: left;" 310 safe custody of such items.
317 > 311 </p>
318 <b>6. What will Happen if you carry Prohibited items to Exam Hall:</b> 312 <p
319 If any such prohibited item is found in the possession of a candidate in examination lab, his/her candidature is liable 313 style="
320 to be canceled and legal/criminal proceedings could be initiated against him/her. He/she would also liable to be debarred 314 margin-bottom: 16px;
321 from appearing in future examinations of the Commission for a period of 3 years. 315 line-height: 20px;
322 </p> 316 text-align: left;"
323 <p 317 >
324 style=" 318 <b>6. What will Happen if you carry Prohibited items to Exam Hall:</b>
325 margin-bottom: 16px; 319 If any such prohibited item is found in the possession of a candidate in examination lab, his/her candidature is liable
326 line-height: 20px; 320 to be canceled and legal/criminal proceedings could be initiated against him/her. He/she would also liable to be debarred
327 text-align: left; 321 from appearing in future examinations of the Commission for a period of 3 years.
328 " 322 </p>
329 > 323 <p
330 <b>7. Candidate should not create Disturbance in Exam Hall:</b> 324 style="
331 If any candidate is found obstructing the conduct of examination or creating disturbances at the examination venue, 325 margin-bottom: 16px;
332 his/her candidature shall be summarily canceled. 326 line-height: 20px;
333 </p> 327 text-align: left;
334 </ol> 328 "
335 </div> 329 >
336 </v-card> 330 <b>7. Candidate should not create Disturbance in Exam Hall:</b>
337 </div> 331 If any candidate is found obstructing the conduct of examination or creating disturbances at the examination venue,
338 </v-flex> 332 his/her candidature shall be summarily canceled.
339 </div> 333 </p>
340 <v-snackbar 334 </ol>
341 :timeout="timeout" 335 </div>
342 :top="y === 'top'" 336 </v-card>
343 :right="x === 'right'" 337 </div>
344 :vertical="mode === 'vertical'" 338 </v-flex>
345 v-model="snackbar" 339 </div>
346 :color="color" 340 <v-snackbar
347 >{{ text }}</v-snackbar> 341 :timeout="timeout"
348 <div class="loader" v-if="showLoader"> 342 :top="y === 'top'"
349 <v-progress-circular indeterminate color="white"></v-progress-circular> 343 :right="x === 'right'"
350 </div> 344 :vertical="mode === 'vertical'"
351 </v-container> 345 v-model="snackbar"
352 </template> 346 :color="color"
353 <script> 347 >{{ text }}</v-snackbar>
354 import http from "@/Services/http.js"; 348 <div class="loader" v-if="showLoader">
355 import moment from "moment"; 349 <v-progress-circular indeterminate color="white"></v-progress-circular>
356 import _ from "underscore"; 350 </div>
357 var qs = require("qs"); 351 </v-container>
358 352 </template>
359 export default { 353 <script>
360 data: () => ({ 354 import http from "@/Services/http.js";
361 snackbar: false, 355 import moment from "moment";
362 color: "", 356 import _ from "underscore";
363 y: "top", 357 var qs = require("qs");
364 x: "right", 358
365 mode: "", 359 export default {
366 timeout: 10000, 360 data: () => ({
367 text: "", 361 snackbar: false,
368 showLoader: false, 362 color: "",
369 valid: true, 363 y: "top",
370 userData: {}, 364 x: "right",
371 frontPart: false, 365 mode: "",
372 backPart: false, 366 timeout: 10000,
373 loading: false, 367 text: "",
374 showTable: false, 368 showLoader: false,
375 showData: false, 369 valid: true,
376 hideprintAdmitReport: false, 370 userData: {},
377 examRules: [(v) => !!v || "Exam Field is required"], 371 frontPart: false,
378 classRules: [(v) => !!v || "Class Field Required"], 372 backPart: false,
379 sectionRules: [(v) => !!v || "Section Field is required"], 373 loading: false,
380 studentRules: [(v) => !!v || "Student Field is required"], 374 showTable: false,
381 typeRules: [(v) => !!v || "Type Field is required"], 375 showData: false,
382 backgroundRules: [(v) => !!v || "Background Field is required"], 376 hideprintAdmitReport: false,
383 377 examRules: [(v) => !!v || "Exam Field is required"],
384 pagination: { 378 classRules: [(v) => !!v || "Class Field Required"],
385 rowsPerPage: 10, 379 sectionRules: [(v) => !!v || "Section Field is required"],
386 }, 380 studentRules: [(v) => !!v || "Student Field is required"],
387 search: "", 381 typeRules: [(v) => !!v || "Type Field is required"],
388 382 backgroundRules: [(v) => !!v || "Background Field is required"],
389 classList: [], 383
390 studentData: {}, 384 pagination: {
391 scheduleData: {}, 385 rowsPerPage: 10,
392 examData: [], 386 },
393 addSection: [], 387 search: "",
394 getStudentsList: [{ name: "Select All", _id: "selectAll" }], 388
395 getScheduleList: [], 389 classList: [],
396 getScheduleListArray: [], 390 studentData: {},
397 getReport: {}, 391 scheduleData: {},
398 examName: [], 392 examData: [],
399 typeList: [ 393 addSection: [],
400 { 394 getStudentsList: [{ name: "Select All", _id: "selectAll" }],
401 name: "Front Part", 395 getScheduleList: [],
402 value: "frontPart", 396 getScheduleListArray: [],
403 }, 397 getReport: {},
404 { 398 examName: [],
405 name: "Back Part", 399 typeList: [
406 value: "backPart", 400 {
407 }, 401 name: "Front Part",
408 ], 402 value: "frontPart",
409 backgroundList: ["Yes", "No"], 403 },
410 headers: [ 404 {
411 { 405 name: "Back Part",
412 text: "No", 406 value: "backPart",
413 align: "", 407 },
414 sortable: false, 408 ],
415 value: "No", 409 backgroundList: ["Yes", "No"],
416 }, 410 headers: [
417 { 411 {
418 text: "Exam Date", 412 text: "No",
419 align: "center", 413 align: "",
420 sortable: false, 414 sortable: false,
421 value: "date", 415 value: "No",
422 }, 416 },
423 { 417 {
424 text: "Start Time", 418 text: "Exam Date",
425 align: "center", 419 align: "center",
426 sortable: false, 420 sortable: false,
427 value: "timeFrom", 421 value: "date",
428 }, 422 },
429 { 423 {
430 text: "End Time", 424 text: "Start Time",
431 align: "center", 425 align: "center",
432 sortable: false, 426 sortable: false,
433 value: "timeTo", 427 value: "timeFrom",
434 }, 428 },
435 { 429 {
436 text: "Subject Name", 430 text: "End Time",
437 align: "center", 431 align: "center",
438 sortable: false, 432 sortable: false,
439 value: "subjectName", 433 value: "timeTo",
440 }, 434 },
441 ], 435 {
442 }), 436 text: "Subject Name",
443 437 align: "center",
444 mounted() { 438 sortable: false,
445 this.token = this.$store.state.token; 439 value: "subjectName",
446 this.getClass(); 440 },
447 this.getExamList(); 441 ],
448 this.getUserData(); 442 }),
449 }, 443
450 444 mounted() {
451 methods: { 445 this.token = this.$store.state.token;
452 getExamList() { 446 this.getClass();
453 this.showLoader = true; 447 this.getExamList();
454 this.loadingSearch = true; 448 this.getUserData();
455 http() 449 },
456 .get("/getExamsList", { 450
457 headers: { Authorization: "Bearer " + this.token }, 451 methods: {
458 }) 452 getExamList() {
459 .then((response) => { 453 this.showLoader = true;
460 this.examData = response.data.data; 454 this.loadingSearch = true;
461 this.showLoader = false; 455 http()
462 this.loadingSearch = false; 456 .get("/getExamsList", {
463 }) 457 headers: { Authorization: "Bearer " + this.token },
464 .catch((error) => { 458 })
465 this.showLoader = false; 459 .then((response) => {
466 this.loadingSearch = false; 460 this.examData = response.data.data;
467 this.snackbar = true; 461 this.showLoader = false;
468 this.text = error.response.data.message; 462 this.loadingSearch = false;
469 if (error.response.status === 401) { 463 })
470 this.$router.replace({ path: "/" }); 464 .catch((error) => {
471 this.$store.dispatch("setToken", null); 465 this.showLoader = false;
472 this.$store.dispatch("Id", null); 466 this.loadingSearch = false;
473 } 467 this.snackbar = true;
474 }); 468 this.text = error.response.data.message;
475 }, 469 if (error.response.status === 401) {
476 getClass() { 470 this.$router.replace({ path: "/" });
477 this.showLoader = true; 471 this.$store.dispatch("setToken", null);
478 http() 472 this.$store.dispatch("Id", null);
479 .get("/getClassesList", { 473 }
480 headers: { Authorization: "Bearer " + this.token }, 474 });
481 }) 475 },
482 .then((response) => { 476 getClass() {
483 this.classList = response.data.data; 477 this.showLoader = true;
484 this.showLoader = false; 478 http()
485 }) 479 .get("/getClassesList", {
486 .catch((error) => { 480 headers: { Authorization: "Bearer " + this.token },
487 this.showLoader = false; 481 })
488 // console.log("err====>", err); 482 .then((response) => {
489 }); 483 this.classList = response.data.data;
490 }, 484 this.showLoader = false;
491 getSections(_id) { 485 })
492 this.showLoader = true; 486 .catch((error) => {
493 http() 487 this.showLoader = false;
494 .get( 488 // console.log("err====>", err);
495 "/getSectionsList", 489 });
496 { params: { classId: _id } }, 490 },
497 { 491 getSections(_id) {
498 headers: { Authorization: "Bearer " + this.token }, 492 this.showLoader = true;
499 } 493 http()
500 ) 494 .get(
501 .then((response) => { 495 "/getSectionsList",
502 this.addSection = response.data.data; 496 { params: { classId: _id } },
503 this.showLoader = false; 497 {
504 }) 498 headers: { Authorization: "Bearer " + this.token },
505 .catch((err) => { 499 }
506 this.showLoader = false; 500 )
507 // console.log("err====>", err); 501 .then((response) => {
508 }); 502 this.addSection = response.data.data;
509 }, 503 this.showLoader = false;
510 getStudents() { 504 })
511 this.showLoader = true; 505 .catch((err) => {
512 http() 506 this.showLoader = false;
513 .get("/getStudentWithClass", { 507 // console.log("err====>", err);
514 params: { 508 });
515 classId: this.getReport.classId, 509 },
516 sectionId: this.getReport.sectionId, 510 getStudents() {
517 }, 511 this.showLoader = true;
518 }) 512 http()
519 .then((response) => { 513 .get("/getStudentWithClass", {
520 for (var i = 0; i < response.data.data.length; i++) { 514 params: {
521 this.getStudentsList.push(response.data.data[i]); 515 classId: this.getReport.classId,
522 } 516 sectionId: this.getReport.sectionId,
523 517 },
524 this.showLoader = false; 518 })
525 }) 519 .then((response) => {
526 .catch((error) => { 520 for (var i = 0; i < response.data.data.length; i++) {
527 console.log("err====>", error); 521 this.getStudentsList.push(response.data.data[i]);
528 this.showLoader = false; 522 }
529 }); 523
530 }, 524 this.showLoader = false;
531 getSchedule() { 525 })
532 if (this.$refs.form.validate()) { 526 .catch((error) => {
533 this.showLoader = true; 527 console.log("err====>", error);
534 let studentId = []; 528 this.showLoader = false;
535 if (this.getReport.studentId == "selectAll") { 529 });
536 studentId = []; 530 },
537 for (var i = 1; i < this.getStudentsList.length; i++) { 531 getSchedule() {
538 studentId.push(this.getStudentsList[i]._id); 532 if (this.$refs.form.validate()) {
539 } 533 this.showLoader = true;
540 } else { 534 let studentId = [];
541 studentId.push(this.getReport.studentId); 535 if (this.getReport.studentId == "selectAll") {
542 } 536 studentId = [];
543 // console.log("this.getReport.studentId - ", studentId); 537 for (var i = 1; i < this.getStudentsList.length; i++) {
544 var admitPayload = { 538 studentId.push(this.getStudentsList[i]._id);
545 examId: this.getReport.examId, 539 }
546 classId: this.getReport.classId, 540 } else {
547 sectionId: this.getReport.sectionId, 541 studentId.push(this.getReport.studentId);
548 studentId: studentId, 542 }
549 }; 543 // console.log("this.getReport.studentId - ", studentId);
544 var admitPayload = {
545 examId: this.getReport.examId,
546 classId: this.getReport.classId,
547 sectionId: this.getReport.sectionId,
548 studentId: studentId,
549 };
550 http() 550 http()
551 .put("/getScheduleForParticularStudent", admitPayload, { 551 .put("/getScheduleForParticularStudent", admitPayload, {
552 paramsSerializer: (params) => {
553 return qs.stringify(params);
554 },
555 })
556 .then((response) => {
557 this.showTable = true;
558 this.getScheduleList = response.data.data; 552 paramsSerializer: (params) => {
559 console.log(" getScheduleList - ", this.getScheduleList); 553 return qs.stringify(params);
560 // this.schoolData = response.data.data.studentData.schoolId; 554 },
561 if (response.data.data.scheduleData.length === 0) { 555 })
562 this.showLoader = false; 556 .then((response) => {
563 this.snackbar = true; 557 this.showTable = true;
564 this.text = "Data not found!"; 558 this.getScheduleList = response.data.data;
565 this.color = "error"; 559 console.log(" getScheduleList - ", this.getScheduleList);
566 return; 560 // this.schoolData = response.data.data.studentData.schoolId;
567 } 561 if (response.data.data.scheduleData.length === 0) {
568 this.showData = true; 562 this.showLoader = false;
569 if (this.getReport.form === "frontPart") { 563 this.snackbar = true;
570 this.frontPart = true; 564 this.text = "Data not found!";
571 this.backPart = false; 565 this.color = "error";
572 } 566 return;
573 if (this.getReport.form === "backPart") { 567 }
574 this.frontPart = false; 568 this.showData = true;
575 this.backPart = true; 569 if (this.getReport.form === "frontPart") {
576 } 570 this.frontPart = true;
577 this.showLoader = false; 571 this.backPart = false;
578 }) 572 }
579 .catch((error) => { 573 if (this.getReport.form === "backPart") {
580 this.showLoader = false; 574 this.frontPart = false;
581 }); 575 this.backPart = true;
582 } 576 }
583 }, 577 this.showLoader = false;
584 578 })
585 printAdmitReport() { 579 .catch((error) => {
586 // Pass the element id here 580 this.showLoader = false;
587 this.$htmlToPaper("printMe"); 581 });
588 }, 582 }
589 getUserData() { 583 },
590 http() 584
591 .get("/getParticularUserDetail") 585 printAdmitReport() {
592 .then((response) => { 586 // Pass the element id here
593 this.userData = response.data.data; 587 this.$htmlToPaper("printMe");
594 }) 588 },
595 .catch((error) => { 589 getUserData() {
596 if (error.response.status === 401) { 590 http()
597 this.$router.replace({ path: "/" }); 591 .get("/getParticularUserDetail")
598 this.$store.dispatch("setToken", null); 592 .then((response) => {
599 this.$store.dispatch("Id", null); 593 this.userData = response.data.data;
600 } 594 })
601 }); 595 .catch((error) => {
602 }, 596 if (error.response.status === 401) {
603 // created() { 597 this.$router.replace({ path: "/" });
604 // this.$root.$on("app:search", search => { 598 this.$store.dispatch("setToken", null);
605 // this.search = search; 599 this.$store.dispatch("Id", null);
606 // }); 600 }
607 // }, 601 });
608 // beforeDestroy() { 602 },
609 // // dont forget to remove the listener 603 // created() {
610 // this.$root.$off("app:search"); 604 // this.$root.$on("app:search", search => {
611 // } 605 // this.search = search;
612 }, 606 // });
613 }; 607 // },
614 </script> 608 // beforeDestroy() {
615 <style> 609 // // dont forget to remove the listener
616 .admincardreport { 610 // this.$root.$off("app:search");
617 border: 1px solid #ddd; 611 // }
618 overflow: hidden; 612 },
619 padding: 20px 50px; 613 };
620 /* margin-bottom: 10px; 614 </script>
621 min-height: 443px; */ 615 <style>
622 } 616 .admincardreport {
623 .line { 617 border: 1px solid #ddd;
624 border-bottom: 1px solid #ddd; 618 overflow: hidden;
625 overflow: hidden; 619 padding: 20px 50px;
626 padding-bottom: 10px; 620 /* margin-bottom: 10px;
627 vertical-align: middle; 621 min-height: 443px; */
628 /* margin-bottom: 4px; */ 622 }
629 } 623 .line {
630 .school-logo { 624 border-bottom: 1px solid #ddd;
631 float: left; 625 overflow: hidden;
632 } 626 padding-bottom: 10px;
633 .student-logo { 627 vertical-align: middle;
634 position: absolute; 628 /* margin-bottom: 4px; */
635 top: 221px; 629 }
636 right: 221px; 630 .school-logo {
637 } 631 float: left;
638 .school-name { 632 }
639 box-sizing: border-box; 633 .student-logo {
640 align-items: center; 634 position: absolute;
641 } 635 top: 221px;
642 /* .student-info { 636 right: 221px;
643 float: left; 637 }
644 width: max-content; 638 .school-name {
645 text-align: initial; 639 box-sizing: border-box;
646 } */ 640 align-items: center;
647 .student-info { 641 }
648 width: 50%; 642 /* .student-info {
649 float: left; 643 float: left;
650 text-align: initial; 644 width: max-content;
651 } 645 text-align: initial;
652 .student-info p { 646 } */
653 width: 50%; 647 .student-info {
654 float: left; 648 width: 50%;
655 margin-bottom: 1px; 649 float: left;
656 padding: 0 0px; 650 text-align: initial;
657 font-size: 12px; 651 }
658 } 652 .student-info p {
659 .admitcardreportbackend ol { 653 width: 50%;
660 margin: 0; 654 float: left;
661 margin-bottom: 10px; 655 margin-bottom: 1px;
src/pages/Report/idCard.vue
Diff comments   View file @4fb0af7
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- **** Id Card Select options **** --> 3 <!-- **** Id Card Select options **** -->
4 <v-card flat class="elevation-0 transparent"> 4 <v-card flat class="elevation-0 transparent">
5 <v-form ref="form" v-model="valid" lazy-validation> 5 <v-form ref="form" v-model="valid" lazy-validation>
6 <v-flex xs12 sm12 lg12> 6 <v-flex xs12 sm12 lg12>
7 <v-layout wrap> 7 <v-layout wrap>
8 <v-flex xs12 sm12 lg4> 8 <v-flex xs12 sm12 lg4>
9 <v-layout> 9 <v-layout>
10 <v-flex xs12 sm12 lg10 class="ml-2"> 10 <v-flex xs12 sm12 lg10 class="ml-2">
11 <v-autocomplete 11 <v-autocomplete
12 v-model="getReport.role" 12 v-model="getReport.role"
13 label="Select Type" 13 label="Select Type"
14 :items="getRoles" 14 :items="getRoles"
15 item-text="name" 15 item-text="name"
16 return-object 16 return-object
17 @change="getRoleInputs(getReport.role)" 17 @change="getRoleInputs(getReport.role)"
18 required 18 required
19 ></v-autocomplete> 19 ></v-autocomplete>
20 </v-flex> 20 </v-flex>
21 </v-layout> 21 </v-layout>
22 </v-flex> 22 </v-flex>
23 <!-- SELECT CLASS --> 23 <!-- SELECT CLASS -->
24 <v-flex xs12 sm12 lg4 v-if="showClass"> 24 <v-flex xs12 sm12 lg4 v-if="showClass">
25 <v-layout> 25 <v-layout>
26 <v-flex xs12 sm12 lg10 class="ml-2"> 26 <v-flex xs12 sm12 lg10 class="ml-2">
27 <v-select 27 <v-select
28 v-model="getReport.classId" 28 v-model="getReport.classId"
29 label="Select Class" 29 label="Select Class"
30 :items="classList" 30 :items="classList"
31 item-text="classNum" 31 item-text="classNum"
32 item-value="_id" 32 item-value="_id"
33 @change="getSections(getReport.classId)" 33 @change="getSections(getReport.classId)"
34 required 34 required
35 ></v-select> 35 ></v-select>
36 </v-flex> 36 </v-flex>
37 </v-layout> 37 </v-layout>
38 </v-flex> 38 </v-flex>
39 <!-- SELECT SECTION --> 39 <!-- SELECT SECTION -->
40 <v-flex xs12 sm12 lg4 v-if="showSections"> 40 <v-flex xs12 sm12 lg4 v-if="showSections">
41 <v-layout> 41 <v-layout>
42 <v-flex xs12 sm12 lg10 class="ml-2"> 42 <v-flex xs12 sm12 lg10 class="ml-2">
43 <v-select 43 <v-select
44 :items="addSection" 44 :items="addSection"
45 label="Select Section" 45 label="Select Section"
46 v-model="getReport.sectionId" 46 v-model="getReport.sectionId"
47 item-text="name" 47 item-text="name"
48 item-value="_id" 48 item-value="_id"
49 name="Select Section" 49 name="Select Section"
50 @change="getStudents" 50 @change="getStudents"
51 required 51 required
52 ></v-select> 52 ></v-select>
53 </v-flex> 53 </v-flex>
54 </v-layout> 54 </v-layout>
55 </v-flex> 55 </v-flex>
56 <!-- SELECT STUDENT --> 56 <!-- SELECT STUDENT -->
57 <v-flex xs12 sm12 lg4 v-if="showStudents"> 57 <v-flex xs12 sm12 lg4 v-if="showStudents">
58 <v-layout> 58 <v-layout>
59 <v-flex xs12 sm12 lg10 class="ml-2"> 59 <v-flex xs12 sm12 lg10 class="ml-2">
60 <v-select 60 <v-select
61 :items="getSelectUserData" 61 :items="getSelectUserData"
62 label="Select Student" 62 label="Select Student"
63 v-model="getReport._id" 63 v-model="getReport._id"
64 item-text="name" 64 item-text="name"
65 item-value="_id" 65 item-value="_id"
66 required 66 required
67 ></v-select> 67 ></v-select>
68 </v-flex> 68 </v-flex>
69 </v-layout> 69 </v-layout>
70 </v-flex> 70 </v-flex>
71 <v-flex xs12 sm12 lg4 v-if="showTeacher"> 71 <v-flex xs12 sm12 lg4 v-if="showTeacher">
72 <v-layout> 72 <v-layout>
73 <v-flex xs12 sm12 lg10 class="ml-2"> 73 <v-flex xs12 sm12 lg10 class="ml-2">
74 <v-select 74 <v-select
75 v-model="getReport._id" 75 v-model="getReport._id"
76 label="Select Teacher" 76 label="Select Teacher"
77 :items="getSelectUserData" 77 :items="getSelectUserData"
78 item-text="name" 78 item-text="name"
79 item-value="_id" 79 item-value="_id"
80 required 80 required
81 ></v-select> 81 ></v-select>
82 </v-flex> 82 </v-flex>
83 </v-layout> 83 </v-layout>
84 </v-flex> 84 </v-flex>
85 <v-flex xs12 sm12 lg4 v-if="showAdmin"> 85 <v-flex xs12 sm12 lg4 v-if="showAdmin">
86 <v-layout> 86 <v-layout>
87 <v-flex xs12 sm12 lg10 class="ml-2"> 87 <v-flex xs12 sm12 lg10 class="ml-2">
88 <v-select 88 <v-select
89 v-model="getReport._id" 89 v-model="getReport._id"
90 label="Select Admin" 90 label="Select Admin"
91 :items="getSelectUserData" 91 :items="getSelectUserData"
92 item-text="name" 92 item-text="name"
93 item-value="_id" 93 item-value="_id"
94 required 94 required
95 ></v-select> 95 ></v-select>
96 </v-flex> 96 </v-flex>
97 </v-layout> 97 </v-layout>
98 </v-flex> 98 </v-flex>
99 <v-flex xs12 sm12 lg4 v-if="showAccountant"> 99 <v-flex xs12 sm12 lg4 v-if="showAccountant">
100 <v-layout> 100 <v-layout>
101 <v-flex xs12 sm12 lg10 class="ml-2"> 101 <v-flex xs12 sm12 lg10 class="ml-2">
102 <v-select 102 <v-select
103 v-model="getReport._id" 103 v-model="getReport._id"
104 label="Select Accountant" 104 label="Select Accountant"
105 :items="getSelectUserData" 105 :items="getSelectUserData"
106 item-text="name" 106 item-text="name"
107 item-value="_id" 107 item-value="_id"
108 required 108 required
109 ></v-select> 109 ></v-select>
110 </v-flex> 110 </v-flex>
111 </v-layout> 111 </v-layout>
112 </v-flex> 112 </v-flex>
113 <v-flex xs12 sm12 lg4 v-if="showLibrarian"> 113 <v-flex xs12 sm12 lg4 v-if="showLibrarian">
114 <v-layout> 114 <v-layout>
115 <v-flex xs12 sm12 lg10 class="ml-2"> 115 <v-flex xs12 sm12 lg10 class="ml-2">
116 <v-select 116 <v-select
117 v-model="getReport._id" 117 v-model="getReport._id"
118 label="Select Librarian" 118 label="Select Librarian"
119 :items="getSelectUserData " 119 :items="getSelectUserData "
120 item-text="name" 120 item-text="name"
121 item-value="_id" 121 item-value="_id"
122 required 122 required
123 ></v-select> 123 ></v-select>
124 </v-flex> 124 </v-flex>
125 </v-layout> 125 </v-layout>
126 </v-flex> 126 </v-flex>
127 <v-flex xs12 sm12 lg4> 127 <v-flex xs12 sm12 lg4>
128 <v-layout> 128 <v-layout>
129 <v-flex xs12 sm12 lg10 class="ml-2"> 129 <v-flex xs12 sm12 lg10 class="ml-2">
130 <v-autocomplete 130 <v-autocomplete
131 label="Select View Type" 131 label="Select View Type"
132 type="text" 132 type="text"
133 :items="typeList" 133 :items="typeList"
134 v-model="getReport.viewType" 134 v-model="getReport.viewType"
135 item-text="name" 135 item-text="name"
136 item-value="value" 136 item-value="value"
137 :rules="typeRules" 137 :rules="typeRules"
138 @change="getReportType(getReport.viewType)" 138 @change="getReportType(getReport.viewType)"
139 required 139 required
140 ></v-autocomplete> 140 ></v-autocomplete>
141 </v-flex> 141 </v-flex>
142 </v-layout> 142 </v-layout>
143 </v-flex> 143 </v-flex>
144 <v-flex xs12 sm12 lg4> 144 <v-flex xs12 sm12 lg4>
145 <v-btn 145 <v-btn
146 @click="getCards" 146 @click="getCards"
147 round 147 round
148 dark 148 dark
149 :loading="loading" 149 :loading="loading"
150 class="open-dialog-button mt-3" 150 class="open-dialog-button mt-3"
151 >Get Report</v-btn> 151 >Get Report</v-btn>
152 </v-flex> 152 </v-flex>
153 </v-layout> 153 </v-layout>
154 </v-flex> 154 </v-flex>
155 </v-form> 155 </v-form>
156 </v-card> 156 </v-card>
157 <div> 157 <div>
158 <v-layout v-show="showReport"> 158 <v-layout v-show="showReport">
159 <v-flex xs12> 159 <v-flex xs12>
160 <v-card class="transparent elevation-0"> 160 <v-card class="transparent elevation-0">
161 <!-- print button --> 161 <!-- print button -->
162 <v-layout> 162 <v-layout>
163 <v-flex xs12> 163 <v-flex xs12>
164 <v-btn class="open-dialog-button right" round dark @click="prindIDCardReport()"> 164 <v-btn class="open-dialog-button right" round dark @click="prindIDCardReport()">
165 Print 165 Print
166 <v-icon right dark>print</v-icon> 166 <v-icon right dark>print</v-icon>
167 </v-btn> 167 </v-btn>
168 </v-flex> 168 </v-flex>
169 </v-layout> 169 </v-layout>
170 </v-card> 170 </v-card>
171 <v-layout row wrap id="printMe" justify-center> 171 <v-layout row wrap id="printMe" justify-center>
172 <div 172 <div
173 v-for="(getCard,index) in getCard" 173 v-for="(getCard,index) in getCard"
174 :key="index" 174 :key="index"
175 style="page-break-after: always; width:100%;margin:14px auto;background:transparent;" 175 style="page-break-after: always; width:100%;margin:14px auto;background:transparent;"
176 > 176 >
177 <v-container grid-list-md> 177 <v-container grid-list-md>
178 <v-layout class="col-sm-12"> 178 <v-layout class="col-sm-12">
179 <div 179 <div
180 style="font-family: arial; 180 style="font-family: arial;
181 max-width: 794px; 181 max-width: 794px;
182 max-height: 1123px; 182 max-height: 1123px;
183 margin-left: auto; 183 margin-left: auto;
184 margin-right: auto; 184 margin-right: auto;
185 -webkit-print-color-adjust: exact;" 185 -webkit-print-color-adjust: exact;"
186 > 186 >
187 <div 187 <div
188 style=" 188 style="
189 float: left; 189 float: left;
190 190
191 width: 520px; 191 width: 520px;
192 background: #fff; 192 background: #fff;
193 border: 1px solid lightgray; 193 border: 1px solid lightgray;
194 position:relative;" 194 position:relative;"
195 > 195 >
196 <!-- bottom-right-side-image --> 196 <!-- bottom-right-side-image -->
197 <img 197 <img
198 src="/static/icon/shape1.png" 198 src="/static/icon/shape1.png"
199 alt="shape" 199 alt="shape"
200 style="position:absolute;width: 90px;" 200 style="position:absolute;width: 90px;"
201 /> 201 />
202 <!-- Front Side --> 202 <!-- Front Side -->
203 <v-layout 203 <v-layout
204 style=" 204 style="
205 text-align: center; 205 text-align: center;
206 " 206 "
207 v-if="frontPart" 207 v-if="frontPart"
208 > 208 >
209 <v-flex xs12> 209 <v-flex xs12>
210 <!-- school Logo Url --> 210 <!-- school Logo Url -->
211 <img 211 <img
212 v-if="getCard.schoolLogoUrl" 212 v-if="getCard.schoolLogoUrl"
213 :src="getCard.schoolLogoUrl" 213 :src="getCard.schoolLogoUrl"
214 alt="schoollogo" 214 alt="schoollogo"
215 style=" 215 style="
216 width: 110px; 216 width: 110px;
217 margin-top:10px; 217 margin-top:10px;
218 overflow:hidden" 218 overflow:hidden"
219 /> 219 />
220 <img 220 <img
221 src="/static/default_thumb.png" 221 src="/static/default_thumb.png"
222 v-if="!getCard.schoolLogoUrl" 222 v-if="!getCard.schoolLogoUrl"
223 alt="schoollogo" 223 alt="schoollogo"
224 style=" 224 style="
225 width: 110px; 225 width: 110px;
226 margin-top:10px; 226 margin-top:10px;
227 overflow:hidden" 227 overflow:hidden"
228 /> 228 />
229 <v-layout style="margin:auto"> 229 <v-layout style="margin:auto">
230 <!-- profile url --> 230 <!-- profile url -->
231 <img 231 <img
232 v-if="getCard.profilePicUrl" 232 v-if="getCard.profilePicUrl"
233 :src="getCard.profilePicUrl" 233 :src="getCard.profilePicUrl"
234 alt="profileImage" 234 alt="profileImage"
235 style="; 235 style=";
236 width: 110px; 236 width: 110px;
237 margin:10px auto; 237 margin:10px auto;
238 width: 110px; 238 width: 110px;
239 margin: 10px auto; 239 margin: 10px auto;
240 border: 3px solid #323232; 240 border: 3px solid #323232;
241 border-radius: 12px;" 241 border-radius: 12px;"
242 /> 242 />
243 <img 243 <img
244 style=" 244 style="
245 width: 110px; 245 width: 110px;
246 margin:10px auto; 246 margin:10px auto;
247 width: 110px; 247 width: 110px;
248 margin: 10px auto;" 248 margin: 10px auto;"
249 alt="dummy" 249 alt="dummy"
250 src="/static/icon/user.png" 250 src="/static/icon/user.png"
251 v-if="!getCard.profilePicUrl && getCard.role != '2'" 251 v-if="!getCard.profilePicUrl && getCard.role != '2'"
252 /> 252 />
253 </v-layout> 253 </v-layout>
254 254
255 <p 255 <p
256 style="color: #302653;font-size:24px; 256 style="color: #302653;font-size:24px;
257 letter-spacing: 4px; 257 letter-spacing: 4px;
258 margin-bottom:14px;" 258 margin-bottom:14px;"
259 > 259 >
260 <b>{{ getCard.name}}</b> 260 <b>{{ getCard.name}}</b>
261 </p> 261 </p>
262 <p 262 <p
263 style="color: #302653; 263 style="color: #302653;
264 font-size:14px; 264 font-size:14px;
265 letter-spacing: 4px; 265 letter-spacing: 4px;
266 margin-bottom:14px;" 266 margin-bottom:14px;"
267 > 267 >
268 <b>{{ getCard.gender}}</b> 268 <b>{{ getCard.gender}}</b>
269 </p> 269 </p>
270 <p 270 <p
271 v-if="getCard.classId" 271 v-if="getCard.classId"
272 style="color: #302653; 272 style="color: #302653;
273 font-size:24px; 273 font-size:24px;
274 letter-spacing: 4px; 274 letter-spacing: 4px;
275 margin-bottom:14px;" 275 margin-bottom:14px;"
276 >{{ getCard.classId.classNum }}</p> 276 >{{ getCard.classId.classNum }}</p>
277 <p 277 <p
278 v-if="getCard.classId" 278 v-if="getCard.classId"
279 style="color: #302653; 279 style="color: #302653;
280 font-size:24px; 280 font-size:24px;
281 letter-spacing: 4px; 281 letter-spacing: 4px;
282 margin-bottom:14px;" 282 margin-bottom:14px;"
283 >{{ getCard.sectionId.name }}</p> 283 >{{ getCard.sectionId.name }}</p>
284 <p 284 <p
285 v-if="getCard.rollNo" 285 v-if="getCard.rollNo"
286 style="color: #302653; 286 style="color: #302653;
287 font-size:24px; 287 font-size:24px;
288 letter-spacing: 2px; 288 letter-spacing: 2px;
289 margin-bottom:10px;" 289 margin-bottom:10px;"
290 >Roll: {{ getCard.rollNo }}</p> 290 >Roll: {{ getCard.rollNo }}</p>
291 <p 291 <p
292 v-if="getCard.joinDate" 292 v-if="getCard.joinDate"
293 style="color: #302653; 293 style="color: #302653;
294 margin-bottom:10px; 294 margin-bottom:10px;
295 font-size:16px; 295 font-size:16px;
296 letter-spacing: 2px;" 296 letter-spacing: 2px;"
297 >{{ dates(getCard.joinDate) }}</p> 297 >{{ dates(getCard.joinDate) }}</p>
298 <p 298 <p
299 v-if="getCard.joiningDate" 299 v-if="getCard.joiningDate"
300 style="color: #302653; 300 style="color: #302653;
301 margin-bottom:10px; 301 margin-bottom:10px;
302 font-size:16px; 302 font-size:16px;
303 letter-spacing: 2px;" 303 letter-spacing: 2px;"
304 >{{ dates(getCard.joiningDate) }}</p> 304 >{{ dates(getCard.joiningDate) }}</p>
305 <p 305 <p
306 v-if="getCard.phone" 306 v-if="getCard.phone"
307 style="color: #302653; 307 style="color: #302653;
308 margin-bottom:10px; 308 margin-bottom:10px;
309 font-size:16px; 309 font-size:16px;
310 letter-spacing: 2px;" 310 letter-spacing: 2px;"
311 >{{ getCard.phone }}</p> 311 >{{ getCard.phone }}</p>
312 <p 312 <p
313 style=" 313 style="
314 font-size: 19px; 314 font-size: 19px;
315 font-weight: 100; 315 font-weight: 100;
316 color: rgb(48, 38, 83); 316 color: rgb(48, 38, 83);
317 letter-spacing: 5px; 317 letter-spacing: 5px;
318 margin-bottom:10px;" 318 margin-bottom:10px;"
319 > 319 >
320 <span v-if="getCard.mobile">{{ getCard.mobile}}</span> 320 <span v-if="getCard.mobile">{{ getCard.mobile}}</span>
321 <span v-if="getCard.mobileNo">{{ getCard.mobileNo }}</span> 321 <span v-if="getCard.mobileNo">{{ getCard.mobileNo }}</span>
322 </p> 322 </p>
323 <p 323 <p
324 style=" 324 style="
325 font-size: 17px; 325 font-size: 17px;
326 font-weight: 100; 326 font-weight: 100;
327 color: rgb(48, 38, 83); 327 color: rgb(48, 38, 83);
328 letter-spacing: 4px; 328 letter-spacing: 4px;
329 margin-bottom:14px;" 329 margin-bottom:14px;"
330 >{{ getCard.email}}</p> 330 >{{ getCard.email}}</p>
331 </v-flex> 331 </v-flex>
332 </v-layout> 332 </v-layout>
333 <!-- back side --> 333 <!-- back side -->
334 <v-layout style=" 334 <v-layout style="
335 text-align: center;" v-if="backPart"> 335 text-align: center;" v-if="backPart">
336 <v-flex xs12> 336 <v-flex xs12>
337 <!-- school Logo Url --> 337 <!-- school Logo Url -->
338 <img 338 <img
339 v-if="getCard.schoolLogoUrl" 339 v-if="getCard.schoolLogoUrl"
340 :src="getCard.schoolLogoUrl" 340 :src="getCard.schoolLogoUrl"
341 alt="schoollogo" 341 alt="schoollogo"
342 style=" 342 style="
343 width: 110px; 343 width: 110px;
344 margin-top:10px; 344 margin-top:10px;
345 overflow:hidden" 345 overflow:hidden"
346 /> 346 />
347 <img 347 <img
348 v-if="getCard.schoolId" 348 v-if="getCard.schoolId"
349 :src="getCard.schoolId.schoolLogoUrl" 349 :src="getCard.schoolId.schoolLogoUrl"
350 alt="schoollogo" 350 alt="schoollogo"
351 style=" 351 style="
352 width: 110px; 352 width: 110px;
353 margin-top:10px; 353 margin-top:10px;
354 overflow:hidden" 354 overflow:hidden"
355 /> 355 />
356 <p 356 <p
357 v-if="getCard.schoolLogoUrl" 357 v-if="getCard.schoolLogoUrl"
358 style="color: #302653; 358 style="color: #302653;
359 font-size:24px; 359 font-size:24px;
360 letter-spacing: 4px; 360 letter-spacing: 4px;
361 margin-bottom:14px;" 361 margin-bottom:14px;"
362 > 362 >
363 <b>{{ getCard.name}}</b> 363 <b>{{ getCard.name}}</b>
364 </p> 364 </p>
365 365
366 <p 366 <p
367 v-if="getCard.city" 367 v-if="getCard.city"
368 style=" 368 style="
369 font-size: 17px; 369 font-size: 17px;
370 font-weight: 100; 370 font-weight: 100;
371 color: rgb(48, 38, 83); 371 color: rgb(48, 38, 83);
372 letter-spacing: 4px; 372 letter-spacing: 4px;
373 margin-bottom:14px;" 373 margin-bottom:14px;"
374 >{{ getCard.city}}</p> 374 >{{ getCard.city}}</p>
375 <p 375 <p
376 style=" 376 style="
377 font-size: 17px; 377 font-size: 17px;
378 font-weight: 100; 378 font-weight: 100;
379 color: rgb(48, 38, 83); 379 color: rgb(48, 38, 83);
380 letter-spacing: 4px; 380 letter-spacing: 4px;
381 margin-bottom:14px;" 381 margin-bottom:14px;"
382 > 382 >
383 {{ getCard.address }} 383 {{ getCard.address }}
384 {{ getCard.presentAddress }} 384 {{ getCard.presentAddress }}
385 <span 385 <span
386 v-if="getCard.state" 386 v-if="getCard.state"
387 >({{ getCard.state }})</span> 387 >({{ getCard.state }})</span>
388 </p> 388 </p>
389 <p 389 <p
390 v-if="getCard.establishmentYear" 390 v-if="getCard.establishmentYear"
391 style=" 391 style="
392 font-size: 17px; 392 font-size: 17px;
393 font-weight: 100; 393 font-weight: 100;
394 color: rgb(48, 38, 83); 394 color: rgb(48, 38, 83);
395 letter-spacing: 4px; 395 letter-spacing: 4px;
396 margin-bottom:14px;" 396 margin-bottom:14px;"
397 >{{ getCard.establishmentYear }}</p> 397 >{{ getCard.establishmentYear }}</p>
398 </v-flex> 398 </v-flex>
399 </v-layout> 399 </v-layout>
400 <!-- bottom-right-side-image --> 400 <!-- bottom-right-side-image -->
401 <img 401 <img
402 src="static/icon/shape2.png" 402 src="static/icon/shape2.png"
403 alt="shape2" 403 alt="shape2"
404 style="bottom: 0; 404 style="bottom: 0;
405 position: absolute; 405 position: absolute;
406 right: 0; 406 right: 0;
407 width: 110px;" 407 width: 110px;"
408 /> 408 />
409 </div> 409 </div>
410 </div> 410 </div>
411 </v-layout> 411 </v-layout>
412 </v-container> 412 </v-container>
413 </div> 413 </div>
414 </v-layout> 414 </v-layout>
415 </v-flex> 415 </v-flex>
416 </v-layout> 416 </v-layout>
417 </div> 417 </div>
418 <v-snackbar 418 <v-snackbar
419 :timeout="timeout" 419 :timeout="timeout"
420 :top="y === 'top'" 420 :top="y === 'top'"
421 :right="x === 'right'" 421 :right="x === 'right'"
422 :vertical="mode === 'vertical'" 422 :vertical="mode === 'vertical'"
423 v-model="snackbar" 423 v-model="snackbar"
424 :color="color" 424 :color="color"
425 >{{ text }}</v-snackbar> 425 >{{ text }}</v-snackbar>
426 <div class="loader" v-if="showLoader"> 426 <div class="loader" v-if="showLoader">
427 <v-progress-circular indeterminate color="white"></v-progress-circular> 427 <v-progress-circular indeterminate color="white"></v-progress-circular>
428 </div> 428 </div>
429 </v-container> 429 </v-container>
430 </template> 430 </template>
431 431
432 <script> 432 <script>
433 import http from "@/Services/http.js"; 433 import http from "@/Services/http.js";
434 import moment from "moment"; 434 import moment from "moment";
435 var qs = require("qs"); 435 var qs = require("qs");
436 436
437 export default { 437 export default {
438 data: () => ({ 438 data: () => ({
439 showLoader: false, 439 showLoader: false,
440 valid: true, 440 valid: true,
441 report: {}, 441 report: {},
442 userData: {}, 442 userData: {},
443 snackbar: false, 443 snackbar: false,
444 color: "", 444 color: "",
445 y: "top", 445 y: "top",
446 x: "right", 446 x: "right",
447 mode: "", 447 mode: "",
448 timeout: 10000, 448 timeout: 10000,
449 text: "", 449 text: "",
450 loading: false, 450 loading: false,
451 showReport: false, 451 showReport: false,
452 frontPart: false, 452 frontPart: false,
453 backPart: false, 453 backPart: false,
454 showClass: false, 454 showClass: false,
455 showTeacher: false, 455 showTeacher: false,
456 showAdmin: false, 456 showAdmin: false,
457 showAccountant: false, 457 showAccountant: false,
458 showLibrarian: false, 458 showLibrarian: false,
459 hideprintIdCard: false, 459 hideprintIdCard: false,
460 hidebackprintIdCard: false, 460 hidebackprintIdCard: false,
461 showStudents: false, 461 showStudents: false,
462 showSections: false, 462 showSections: false,
463 getRoles: [], 463 getRoles: [],
464 classList: [], 464 classList: [],
465 getCard: [], 465 getCard: [],
466 addSection: [], 466 addSection: [],
467 // getStudentsList: 467 // getStudentsList:
468 // teacherList: [], 468 // teacherList: [],
469 getSelectUserData: [], 469 getSelectUserData: [],
470 // Users: [], 470 // Users: [],
471 getReport: {}, 471 getReport: {},
472 typeRules: [(v) => !!v || "Type is required"], 472 typeRules: [(v) => !!v || "Type is required"],
473 typeList: [ 473 typeList: [
474 { 474 {
475 name: "Front Part", 475 name: "Front Part",
476 value: "frontPart", 476 value: "frontPart",
477 }, 477 },
478 { 478 {
479 name: "Back Part", 479 name: "Back Part",
480 value: "backPart", 480 value: "backPart",
481 }, 481 },
482 ], 482 ],
483 backgroundList: ["Yes", "No"], 483 backgroundList: ["Yes", "No"],
484 }), 484 }),
485 485
486 mounted() { 486 mounted() {
487 this.token = this.$store.state.token; 487 this.token = this.$store.state.token;
488 this.getUserData(); 488 this.getUserData();
489 this.getRole(); 489 this.getRole();
490 }, 490 },
491 491
492 methods: { 492 methods: {
493 dates: function (date) { 493 dates: function (date) {
494 return moment(date).format("MMMM DD, YYYY"); 494 return moment(date).format("MMMM DD, YYYY");
495 return date; 495 return date;
496 }, 496 },
497 getReportType() { 497 getReportType() {
498 if (this.getReport.viewType === "frontPart") { 498 if (this.getReport.viewType === "frontPart") {
499 this.frontPart = true; 499 this.frontPart = true;
500 this.backPart = false; 500 this.backPart = false;
501 } 501 }
502 if (this.getReport.viewType === "backPart") { 502 if (this.getReport.viewType === "backPart") {
503 this.frontPart = false; 503 this.frontPart = false;
504 this.backPart = true; 504 this.backPart = true;
505 } 505 }
506 }, 506 },
507 getRoleInputs(role) { 507 getRoleInputs(role) {
508 // console.log("role", role); 508 // console.log("role", role);
509 this.showReport = false; 509 this.showReport = false;
510 this.getReport._id = ""; 510 this.getReport._id = "";
511 this.getCard = ""; 511 this.getCard = "";
512 this.classList = [];
513 this.addSection = [];
514 this.getReport.classId = "";
515 this.getReport.sectionId = "";
516 this.getReport._id = "";
517 this.getSelectUserData = [];
512 this.classList = []; 518 if (role.name === "STUDENT") {
513 this.addSection = []; 519 // console.log("role", role);
514 this.getReport.classId = ""; 520 this.showClass = true;
515 this.getReport.sectionId = ""; 521 this.showTeacher = false;
516 this.getReport._id = ""; 522 this.showAdmin = false;
517 this.getSelectUserData = []; 523 this.showAccountant = false;
518 if (role.name === "STUDENT") { 524 this.showLibrarian = false;
519 // console.log("role", role); 525 this.showStudents = false;
520 this.showClass = true; 526 this.showSections = false;
521 this.showTeacher = false; 527 this.getClass();
522 this.showAdmin = false; 528 }
523 this.showAccountant = false; 529 if (role.name === "TEACHER") {
524 this.showLibrarian = false; 530 this.showTeacher = true;
525 this.showStudents = false; 531 this.showClass = false;
526 this.showSections = false; 532 this.showAdmin = false;
527 this.getClass(); 533 this.showAccountant = false;
528 } 534 this.showLibrarian = false;
529 if (role.name === "TEACHER") { 535 this.showStudents = false;
530 this.showTeacher = true; 536 this.showSections = false;
531 this.showClass = false; 537 this.getTeacherList();
532 this.showAdmin = false; 538 }
533 this.showAccountant = false; 539 if (role.name === "ADMIN") {
534 this.showLibrarian = false; 540 this.showAdmin = true;
535 this.showStudents = false; 541 this.showTeacher = false;
536 this.showSections = false; 542 this.showClass = false;
537 this.getTeacherList(); 543 this.showAccountant = false;
538 } 544 this.showLibrarian = false;
539 if (role.name === "ADMIN") { 545 this.showStudents = false;
540 this.showAdmin = true; 546 this.showSections = false;
541 this.showTeacher = false; 547 this.getUsersList(role.role);
542 this.showClass = false; 548 }
543 this.showAccountant = false; 549 if (role.name === "ACCOUNTANT") {
544 this.showLibrarian = false; 550 this.showAccountant = true;
545 this.showStudents = false; 551 this.showAdmin = false;
546 this.showSections = false; 552 this.showTeacher = false;
547 this.getUsersList(role.role); 553 this.showClass = false;
548 } 554 this.showLibrarian = false;
549 if (role.name === "ACCOUNTANT") { 555 this.showStudents = false;
550 this.showAccountant = true; 556 this.showSections = false;
551 this.showAdmin = false; 557 this.getUsersList(role.role);
552 this.showTeacher = false; 558 }
553 this.showClass = false; 559 if (role.name === "LIBRARIAN") {
554 this.showLibrarian = false; 560 this.showLibrarian = true;
555 this.showStudents = false; 561 this.showAccountant = false;
556 this.showSections = false; 562 this.showAdmin = false;
557 this.getUsersList(role.role); 563 this.showTeacher = false;
558 } 564 this.showClass = false;
559 if (role.name === "LIBRARIAN") { 565 this.showStudents = false;
560 this.showLibrarian = true; 566 this.showSections = false;
561 this.showAccountant = false; 567 this.getUsersList(role.role);
562 this.showAdmin = false; 568 }
563 this.showTeacher = false; 569 },
564 this.showClass = false; 570
565 this.showStudents = false; 571 prindIDCardReport() {
566 this.showSections = false; 572 // Pass the element id here
567 this.getUsersList(role.role); 573 this.$htmlToPaper("printMe");
568 } 574 },
569 }, 575 getUserData() {
570 576 this.getSelectUserData = [];
571 prindIDCardReport() { 577 this.showLoader = true;
572 // Pass the element id here 578 http()
573 this.$htmlToPaper("printMe"); 579 .get("/getParticularUserDetail")
574 }, 580 .then((response) => {
575 getUserData() { 581 let mergeObj = {
576 this.getSelectUserData = []; 582 name: "Select All",
577 this.showLoader = true; 583 id: "Select All",
578 http() 584 };
579 .get("/getParticularUserDetail") 585 this.getSelectUserData.push(mergeObj);
580 .then((response) => { 586 let getUserDetails = response.data.data;
581 let mergeObj = { 587 this.getSelectUserData.push(getUserDetails);
582 name: "Select All", 588 this.showLoader = false;
583 id: "Select All", 589 // this.adminList = response.data.data;
584 }; 590 })
585 this.getSelectUserData.push(mergeObj); 591 .catch((error) => {
586 let getUserDetails = response.data.data; 592 this.showLoader = false;
587 this.getSelectUserData.push(getUserDetails); 593 if (error.response.status === 401) {
588 this.showLoader = false; 594 this.$router.replace({ path: "/" });
589 // this.adminList = response.data.data; 595 this.$store.dispatch("setToken", null);
590 }) 596 this.$store.dispatch("Id", null);
591 .catch((error) => { 597 }
592 this.showLoader = false; 598 });
593 if (error.response.status === 401) { 599 },
594 this.$router.replace({ path: "/" }); 600 getRole() {
595 this.$store.dispatch("setToken", null); 601 this.showLoader = true;
596 this.$store.dispatch("Id", null); 602 http()
597 } 603 .get("/getRolesList", {
598 }); 604 headers: { Authorization: "Bearer " + this.token },
599 }, 605 })
600 getRole() { 606 .then((response) => {
601 this.showLoader = true; 607 var getRoles = [];
602 http() 608 getRoles = response.data.data;
603 .get("/getRolesList", { 609 for (let i = 0; i < getRoles.length; i++) {
604 headers: { Authorization: "Bearer " + this.token }, 610 if (
605 }) 611 getRoles[i].name != "SUPERADMIN" &&
606 .then((response) => { 612 getRoles[i].name != "PARENT"
607 var getRoles = []; 613 ) {
608 getRoles = response.data.data; 614 this.getRoles.push(getRoles[i]);
609 for (let i = 0; i < getRoles.length; i++) { 615 }
610 if ( 616 }
611 getRoles[i].name != "SUPERADMIN" && 617 this.showLoader = false;
612 getRoles[i].name != "PARENT" 618 })
613 ) { 619 .catch((error) => {
614 this.getRoles.push(getRoles[i]); 620 this.showLoader = false;
615 } 621 if (error.response.status === 401) {
616 } 622 this.$router.replace({ path: "/" });
617 this.showLoader = false; 623 this.$store.dispatch("setToken", null);
618 }) 624 this.$store.dispatch("Id", null);
619 .catch((error) => { 625 this.$store.dispatch("Role", null);
620 this.showLoader = false; 626 }
621 if (error.response.status === 401) { 627 });
622 this.$router.replace({ path: "/" }); 628 },
623 this.$store.dispatch("setToken", null); 629 getClass() {
624 this.$store.dispatch("Id", null); 630 // console.log("get classes");
625 this.$store.dispatch("Role", null); 631 this.showLoader = true;
626 } 632 http()
627 }); 633 .get("/getClassesList", {
628 }, 634 headers: { Authorization: "Bearer " + this.token },
629 getClass() { 635 })
630 // console.log("get classes"); 636 .then((response) => {
631 this.showLoader = true; 637 this.classList = response.data.data;
632 http() 638 this.showLoader = false;
633 .get("/getClassesList", { 639 })
634 headers: { Authorization: "Bearer " + this.token }, 640 .catch((error) => {
635 }) 641 this.showLoader = false;
636 .then((response) => { 642 // console.log("err====>", err);
637 this.classList = response.data.data; 643 });
638 this.showLoader = false; 644 },
639 }) 645 getSections(_id) {
640 .catch((error) => { 646 this.showLoader = true;
641 this.showLoader = false; 647 http()
642 // console.log("err====>", err); 648 .get(
643 }); 649 "/getSectionsList",
644 }, 650 { params: { classId: _id } },
645 getSections(_id) { 651 {
646 this.showLoader = true; 652 headers: { Authorization: "Bearer " + this.token },
647 http() 653 }
648 .get( 654 )
649 "/getSectionsList", 655 .then((response) => {
650 { params: { classId: _id } }, 656 this.addSection = response.data.data;
651 { 657 this.showSections = true;
652 headers: { Authorization: "Bearer " + this.token }, 658 this.showLoader = false;
653 } 659 })
654 ) 660 .catch((err) => {
655 .then((response) => { 661 this.showLoader = false;
656 this.addSection = response.data.data; 662 // console.log("err====>", err);
657 this.showSections = true; 663 });
658 this.showLoader = false; 664 },
659 }) 665 getStudents() {
660 .catch((err) => { 666 this.getSelectUserData = [];
661 this.showLoader = false; 667 this.showLoader = true;
662 // console.log("err====>", err); 668 http()
663 }); 669 .get("/getStudentWithClass", {
664 }, 670 params: {
665 getStudents() { 671 classId: this.getReport.classId,
666 this.getSelectUserData = []; 672 sectionId: this.getReport.sectionId,
667 this.showLoader = true; 673 },
668 http() 674 })
669 .get("/getStudentWithClass", { 675 .then((response) => {
670 params: { 676 response.data.data.unshift({
671 classId: this.getReport.classId, 677 name: "Select All",
672 sectionId: this.getReport.sectionId, 678 _id: "Select All",
673 }, 679 });
674 }) 680 this.getSelectUserData = response.data.data;
675 .then((response) => { 681 this.showStudents = true;
676 response.data.data.unshift({ 682 this.showLoader = false;
677 name: "Select All", 683 })
678 _id: "Select All", 684 .catch((error) => {
679 }); 685 console.log("err====>", error);
680 this.getSelectUserData = response.data.data; 686 this.showLoader = false;
681 this.showStudents = true; 687 });
682 this.showLoader = false; 688 },
683 }) 689 getCards() {
684 .catch((error) => { 690 var getSelectUserId = [];
685 console.log("err====>", error); 691 for (let i = 0; i < this.getSelectUserData.length; i++) {
686 this.showLoader = false; 692 /* if the selected user id mathches any id in the original user data then push it in
687 }); 693 array, this way only one id will be pushed */
688 }, 694 if (this.getReport._id === this.getSelectUserData[i]._id) {
689 getCards() { 695 getSelectUserId.push(this.getSelectUserData[i]._id);
690 var getSelectUserId = []; 696 } /* else if select all option is selected then all ids will be pushed */ else if (
691 for (let i = 0; i < this.getSelectUserData.length; i++) { 697 this.getReport._id == "Select All"
692 /* if the selected user id mathches any id in the original user data then push it in 698 ) {
693 array, this way only one id will be pushed */ 699 getSelectUserId.push(this.getSelectUserData[i]._id);
694 if (this.getReport._id === this.getSelectUserData[i]._id) { 700 if (
695 getSelectUserId.push(this.getSelectUserData[i]._id); 701 getSelectUserId[0] == undefined ||
696 } /* else if select all option is selected then all ids will be pushed */ else if ( 702 getSelectUserId[0] == "Select All"
697 this.getReport._id == "Select All" 703 ) {
698 ) { 704 getSelectUserId.shift();
699 getSelectUserId.push(this.getSelectUserData[i]._id); 705 }
700 if ( 706 }
701 getSelectUserId[0] == undefined || 707 }
702 getSelectUserId[0] == "Select All" 708
703 ) { 709 if (this.$refs.form.validate()) {
704 getSelectUserId.shift(); 710 this.showLoader = true;
705 } 711 // var strigified = JSON.stringify(getSelectUserId)
706 } 712 // var profileId = [];
707 } 713 // profileId = getSelectUserId;
714 var idcardPayload = {
715 profileId: getSelectUserId,
716 role: this.getReport.role.role,
717 };
708 718 http()
709 if (this.$refs.form.validate()) { 719 .put("/getIdCardDetail", idcardPayload, {
710 this.showLoader = true; 720 headers: {
711 // var strigified = JSON.stringify(getSelectUserId) 721 Authorization: "Bearer " + this.token,
712 // var profileId = []; 722 },
713 // profileId = getSelectUserId;
714 var idcardPayload = {
715 profileId: getSelectUserId,
716 role: this.getReport.role.role,
717 }; 723 paramsSerializer: (params) => {
718 http() 724 return qs.stringify(params);
719 .put("/getIdCardDetail", idcardPayload, { 725 },
720 headers: { 726 // params: {
721 Authorization: "Bearer " + this.token, 727 // profileId: strigified,
722 }, 728 // role: this.getReport.role.role,
723 paramsSerializer: (params) => { 729 // },
724 return qs.stringify(params); 730 })
725 }, 731 .then((response) => {
726 // params: { 732 this.getCard = "";
727 // profileId: strigified, 733
728 // role: this.getReport.role.role, 734 var data = response.data.data;
729 // }, 735
730 }) 736 if (data.adminData && data.adminData.length != 0) {
731 .then((response) => { 737 this.getCard = response.data.data.adminData;
732 this.getCard = ""; 738 // console.log("this.getCard ", this.getCard);
733 739 }
734 var data = response.data.data; 740 if (data.teachersData && data.teachersData.length != 0) {
735 741 this.getCard = response.data.data.teachersData;
736 if (data.adminData && data.adminData.length != 0) { 742 }
737 this.getCard = response.data.data.adminData; 743 if (data.studentData && data.studentData.length != 0) {
738 // console.log("this.getCard ", this.getCard); 744 this.getCard = response.data.data.studentData;
739 } 745 // console.log("this.getCard--studentData ", this.getCard);
740 if (data.teachersData && data.teachersData.length != 0) { 746 }
741 this.getCard = response.data.data.teachersData; 747 if (data.usersData && data.usersData.length != 0) {
742 } 748 this.getCard = response.data.data.usersData;
743 if (data.studentData && data.studentData.length != 0) { 749 // console.log("this.getCard--usersData ", this.getCard);
744 this.getCard = response.data.data.studentData; 750 }
745 // console.log("this.getCard--studentData ", this.getCard); 751 // console.log("this.getCard--all ", response.data.data);
746 } 752 this.showLoader = false;
747 if (data.usersData && data.usersData.length != 0) { 753 this.showReport = true;
748 this.getCard = response.data.data.usersData; 754 })
749 // console.log("this.getCard--usersData ", this.getCard); 755 .catch((error) => {
750 } 756 this.showLoader = false;
751 // console.log("this.getCard--all ", response.data.data); 757 // console.log("error", error.response.data.errors);
752 this.showLoader = false; 758 // if (error.response.data.errors) {
753 this.showReport = true; 759 // this.snackbar = true;
754 }) 760 // this.text = " Field is required";
755 .catch((error) => { 761 // this.color = "error";
756 this.showLoader = false; 762 // }
757 // console.log("error", error.response.data.errors); 763 });
758 // if (error.response.data.errors) { 764 }
759 // this.snackbar = true; 765 },
760 // this.text = " Field is required"; 766 getTeacherList() {
761 // this.color = "error"; 767 this.getSelectUserData = [];
762 // } 768 this.showLoader = true;
763 }); 769 var token = this.$store.state.token;
764 } 770 http()
765 }, 771 .get("/getTeachersList", {
766 getTeacherList() { 772 headers: { Authorization: "Bearer " + token },
767 this.getSelectUserData = []; 773 })
768 this.showLoader = true; 774 .then((response) => {
769 var token = this.$store.state.token; 775 response.data.data.unshift({
770 http() 776 name: "Select All",
771 .get("/getTeachersList", { 777 _id: "Select All",
772 headers: { Authorization: "Bearer " + token }, 778 });
773 }) 779 this.getSelectUserData = response.data.data;
774 .then((response) => { 780 this.showLoader = false;
775 response.data.data.unshift({ 781 })
776 name: "Select All", 782 .catch((error) => {
777 _id: "Select All", 783 this.showLoader = false;
778 }); 784 if (error.response.status === 401) {
779 this.getSelectUserData = response.data.data; 785 this.$router.replace({ path: "/" });
780 this.showLoader = false; 786 this.$store.dispatch("setToken", null);
781 }) 787 this.$store.dispatch("Id", null);
782 .catch((error) => { 788 }
783 this.showLoader = false; 789 });
784 if (error.response.status === 401) { 790 },
785 this.$router.replace({ path: "/" }); 791 getUsersList(role) {
786 this.$store.dispatch("setToken", null); 792 this.getSelectUserData = [];
787 this.$store.dispatch("Id", null); 793 this.showLoader = true;
788 } 794 var token = this.$store.state.token;
789 }); 795 http()
790 }, 796 .get("/getUsersList?role=" + role, {
791 getUsersList(role) { 797 headers: { Authorization: "Bearer " + token },
792 this.getSelectUserData = []; 798 })
793 this.showLoader = true; 799 .then((response) => {
794 var token = this.$store.state.token; 800 response.data.data.unshift({
795 http() 801 name: "Select All",
796 .get("/getUsersList?role=" + role, { 802 _id: "Select All",
797 headers: { Authorization: "Bearer " + token }, 803 });
798 }) 804 this.getSelectUserData = response.data.data;
799 .then((response) => { 805 this.showLoader = false;
800 response.data.data.unshift({ 806 })
801 name: "Select All", 807 .catch((error) => {
802 _id: "Select All", 808 this.showLoader = false;
803 }); 809 if (error.response.status === 401) {
804 this.getSelectUserData = response.data.data; 810 this.$router.replace({ path: "/" });
805 this.showLoader = false; 811 this.$store.dispatch("setToken", null);
806 }) 812 this.$store.dispatch("Id", null);
807 .catch((error) => { 813 }
808 this.showLoader = false; 814 });
809 if (error.response.status === 401) { 815 },
810 this.$router.replace({ path: "/" }); 816 getParentDetails() {
811 this.$store.dispatch("setToken", null); 817 http()
812 this.$store.dispatch("Id", null); 818 .get("getParentsList", {
813 } 819 headers: {
814 }); 820 Authorization: "Bearer " + this.$store.state.token,
815 }, 821 },
816 getParentDetails() { 822 })
817 http() 823 .then((response) => {
818 .get("getParentsList", { 824 this.parentsList = response.data.data;
819 headers: { 825 })
820 Authorization: "Bearer " + this.$store.state.token, 826 .catch((error) => {
821 }, 827 // console.log("err====>", error.response.data.message);
822 }) 828 this.showLoader = false;
823 .then((response) => { 829 if (error.response.status === 401) {
824 this.parentsList = response.data.data; 830 this.$router.replace({ path: "/" });
825 }) 831 this.$store.dispatch("setToken", null);
826 .catch((error) => { 832 this.$store.dispatch("Id", null);
827 // console.log("err====>", error.response.data.message); 833 this.$store.dispatch("Role", null);
828 this.showLoader = false; 834 }
829 if (error.response.status === 401) { 835 });
830 this.$router.replace({ path: "/" }); 836 },
831 this.$store.dispatch("setToken", null); 837 },
832 this.$store.dispatch("Id", null); 838 };
833 this.$store.dispatch("Role", null); 839 </script>
834 } 840
835 }); 841 <style scoped>
836 }, 842 .Data {
837 }, 843 width: 100%;
838 }; 844 float: left;
839 </script> 845 margin-bottom: 0px;
840 846 padding: 0 15px;
841 <style scoped> 847 font-size: 14px;
842 .Data { 848 margin-top: 5px;
843 width: 100%; 849 text-align: justify;
844 float: left; 850 }
845 margin-bottom: 0px; 851 .idcardreport {
846 padding: 0 15px; 852 font-family: arial;
847 font-size: 14px; 853 max-width: 794px;
848 margin-top: 5px; 854 max-height: 1123px;
849 text-align: justify; 855 margin-left: auto;
850 } 856 margin-right: auto;
851 .idcardreport { 857 -webkit-print-color-adjust: exact;
852 font-family: arial; 858 }
853 max-width: 794px; 859 .idcardreport1 {
854 max-height: 1123px; 860 text-align: center;
855 margin-left: auto; 861 margin-left: 35%;
856 margin-right: auto; 862 }
857 -webkit-print-color-adjust: exact; 863 .icard-front {
858 } 864 margin: 3px;
859 .idcardreport1 { 865 float: left;
860 text-align: center; 866 padding: 10px;
861 margin-left: 35%; 867 text-align: center;
862 } 868 /* height: 520px; */
863 .icard-front { 869 width: 520px;
864 margin: 3px; 870 background: #fff;
865 float: left; 871 border: 1px solid lightgray;
866 padding: 10px; 872 }
867 text-align: center; 873 .print-data {
868 /* height: 520px; */ 874 margin: 3px;
869 width: 520px; 875 float: left;
870 background: #fff; 876 /* border: 1px solid #000; */
871 border: 1px solid lightgray; 877 padding: 10px;
872 } 878 /* width: 55%; */
873 .print-data { 879 text-align: center;
874 margin: 3px; 880 height: 95%;
875 float: left; 881 }
876 /* border: 1px solid #000; */ 882 .rightside {
877 padding: 10px; 883 float: right !important;
878 /* width: 55%; */ 884 }
879 text-align: center; 885 .icard-front h2 {
880 height: 95%; 886 font-size: 30px;
881 } 887 }
882 .rightside { 888 .icard-back h2 {
883 float: right !important; 889 font-size: 30px;
884 } 890 }
885 .icard-front h2 { 891 .print-data h2 {
886 font-size: 30px; 892 font-size: 30px;
887 } 893 text-align: center;
888 .icard-back h2 { 894 }
889 font-size: 30px; 895 .print-data img {
890 } 896 width: 70px;
891 .print-data h2 { 897 height: 70px;
892 font-size: 30px; 898 margin-bottom: 5px;
893 text-align: center; 899 }
894 } 900 .icard-front img {
895 .print-data img { 901 width: 70px;
896 width: 70px; 902 height: 70px;
897 height: 70px; 903 margin-bottom: 5px;
898 margin-bottom: 5px; 904 }
899 } 905 .icard-back img {
900 .icard-front img { 906 width: 50px;
901 width: 70px; 907 height: 50px;
902 height: 70px; 908 margin-bottom: 5px;
903 margin-bottom: 5px; 909 }
904 } 910 .icard-img {
905 .icard-back img { 911 width: 50px;
906 width: 50px; 912 height: 50px;
907 height: 50px; 913 margin-bottom: 5px;
908 margin-bottom: 5px; 914 margin-top: 5px;
909 } 915 border: 1px solid #ddd;
910 .icard-img { 916 }
911 width: 50px; 917 .icard-data {
912 height: 50px; 918 /* font-family: Arial; */
913 margin-bottom: 5px; 919 max-width: 794px;
914 margin-top: 5px; 920 max-height: 1123px;
915 border: 1px solid #ddd; 921 margin-left: auto;
916 } 922 margin-right: auto;
917 .icard-data { 923 -webkit-print-color-adjust: exact;
918 /* font-family: Arial; */ 924 }
919 max-width: 794px; 925 .icard-back {
920 max-height: 1123px; 926 margin: 3px;
921 margin-left: auto; 927 /* float: left; */
922 margin-right: auto; 928 /* border: 1px solid #000; */
923 -webkit-print-color-adjust: exact; 929 padding: 10px;
924 } 930 /* width: 55%; */
925 .icard-back { 931 text-align: center;
926 margin: 3px; 932 /* height: 95%; */
927 /* float: left; */ 933 /* margin-top: 35%; */
928 /* border: 1px solid #000; */ 934 }
929 padding: 10px; 935 .back-icard {
930 /* width: 55%; */ 936 margin: 3px;
931 text-align: center; 937 padding: 10px;
932 /* height: 95%; */ 938 }
933 /* margin-top: 35%; */ 939 .icard-back h3 {
934 } 940 background-color: #000;
935 .back-icard { 941 color: #fff;
936 margin: 3px; 942 font-size: 13px;
937 padding: 10px; 943 padding: 5px 0px;
938 } 944 margin: 5px;
939 .icard-back h3 { 945 margin-top: 13px;
940 background-color: #000; 946 }
941 color: #fff; 947 .icard-back h5 {
942 font-size: 13px; 948 font-size: 11px;
943 padding: 5px 0px; 949 color: #000;
944 margin: 5px; 950 font-weight: bold;
945 margin-top: 13px; 951 padding: 5px 0px;
946 } 952 }
947 .icard-back h5 { 953 /* .icard-back p {
948 font-size: 11px; 954 font-size: 15px;
949 color: #000; 955 color: #000;
950 font-weight: bold; 956 font-weight: 500px;
951 padding: 5px 0px; 957 line-height: 17px;
952 } 958 } */
953 /* .icard-back p { 959 .school-address {
954 font-size: 15px; 960 /* width: 40%; */
955 color: #000; 961 font-weight: 500px;
956 font-weight: 500px; 962 color: #000;
957 line-height: 17px; 963 }
958 } */ 964 .address {
959 .school-address { 965 font-weight: 500px;
960 /* width: 40%; */ 966 color: #000;
961 font-weight: 500px; 967 text-align: center;
962 color: #000; 968 }
963 } 969 .icard-bottom {
964 .address { 970 padding-top: 5px;
965 font-weight: 500px; 971 text-align: center;
966 color: #000; 972 }
967 text-align: center; 973 .qrcode {
968 } 974 float: left;
969 .icard-bottom { 975 width: 50%;
970 padding-top: 5px; 976 }
971 text-align: center; 977 .qrcode img {
972 } 978 width: 60px;
973 .qrcode { 979 height: 60px;
974 float: left; 980 margin-top: 15px;
975 width: 50%; 981 }
976 } 982 .session {
977 .qrcode img { 983 float: right;
978 width: 60px; 984 width: 70%;
979 height: 60px; 985 margin-top: 15px;
980 margin-top: 15px; 986 }
981 } 987
982 .session { 988 @media screen and (max-width: 360px) {
983 float: right; 989 .icard-front {
984 width: 70%; 990 width: 316px;
985 margin-top: 15px; 991 height: 418px;
986 } 992 float: inherit;
987 993 }
988 @media screen and (max-width: 360px) { 994 .icard-back {
src/pages/Section/section.vue
Diff comments   View file @4fb0af7
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <v-dialog v-model="editSectionDialog" max-width="460px" persistent> 3 <v-dialog v-model="editSectionDialog" max-width="460px" persistent>
4 <v-card flat class="card-style pa-2" dark> 4 <v-card flat class="card-style pa-2" dark>
5 <v-layout> 5 <v-layout>
6 <v-flex xs12> 6 <v-flex xs12>
7 <label class="title text-xs-center">Edit Section</label> 7 <label class="title text-xs-center">Edit Section</label>
8 <v-icon size="24" class="right" @click="editSectionDialog = false">cancel</v-icon> 8 <v-icon size="24" class="right" @click="editSectionDialog = false">cancel</v-icon>
9 </v-flex> 9 </v-flex>
10 </v-layout> 10 </v-layout>
11 <v-container fluid> 11 <v-container fluid>
12 <v-layout wrap justify-center> 12 <v-layout wrap justify-center>
13 <v-flex xs12 sm12> 13 <v-flex xs12 sm12>
14 <v-form> 14 <v-form>
15 <v-layout> 15 <v-layout>
16 <v-flex xs5 sm4 class="pt-4 subheading"> 16 <v-flex xs5 sm4 class="pt-4 subheading">
17 <label class="right">Class :</label> 17 <label class="right">Class :</label>
18 </v-flex> 18 </v-flex>
19 <v-flex xs7 sm8> 19 <v-flex xs7 sm8>
20 <v-autocomplete 20 <v-autocomplete
21 :items="addclass" 21 :items="addclass"
22 :label="editedItem.classData.classNum" 22 :label="editedItem.classData.classNum"
23 v-model="editItem.classId" 23 v-model="editItem.classId"
24 item-text="classNum" 24 item-text="classNum"
25 item-value="_id" 25 item-value="_id"
26 class="ml-2" 26 class="ml-2"
27 ></v-autocomplete> 27 ></v-autocomplete>
28 </v-flex> 28 </v-flex>
29 </v-layout> 29 </v-layout>
30 <v-layout> 30 <v-layout>
31 <v-flex xs5 sm4 class="pt-4 subheading"> 31 <v-flex xs5 sm4 class="pt-4 subheading">
32 <h5 class="right my-1 hidden-xs-only hidden-sm-only">Section Name :</h5> 32 <h5 class="right my-1 hidden-xs-only hidden-sm-only">Section Name :</h5>
33 <h5 class="right my-1 hidden-lg-only hidden-md-only hidden-xl-only">Name :</h5> 33 <h5 class="right my-1 hidden-lg-only hidden-md-only hidden-xl-only">Name :</h5>
34 </v-flex> 34 </v-flex>
35 <v-flex xs7 sm8> 35 <v-flex xs7 sm8>
36 <v-autocomplete 36 <v-autocomplete
37 v-model="editedItem.name" 37 v-model="editedItem.name"
38 placeholder="fill your Section Name" 38 placeholder="fill your Section Name"
39 :items="SectionName" 39 :items="SectionName"
40 class="ml-2" 40 class="ml-2"
41 ></v-autocomplete> 41 ></v-autocomplete>
42 </v-flex> 42 </v-flex>
43 </v-layout> 43 </v-layout>
44 <v-layout> 44 <v-layout>
45 <v-flex xs5 sm4 class="pt-4 subheading"> 45 <v-flex xs5 sm4 class="pt-4 subheading">
46 <h5 class="right my-1 hidden-xs-only hidden-sm-only">Incharge :</h5> 46 <h5 class="right my-1 hidden-xs-only hidden-sm-only">Incharge :</h5>
47 <h5 class="right my-1 hidden-lg-only hidden-md-only hidden-xl-only">Incharge :</h5> 47 <h5 class="right my-1 hidden-lg-only hidden-md-only hidden-xl-only">Incharge :</h5>
48 </v-flex> 48 </v-flex>
49 <v-flex xs7 sm8> 49 <v-flex xs7 sm8>
50 <v-select 50 <v-select
51 :items="teacherList" 51 :items="teacherList"
52 v-model="editedItem.classInchargeId" 52 v-model="editedItem.classInchargeId"
53 :label="editedItem.teacherData[0].name" 53 :label="editedItem.teacherData[0].name"
54 item-text="name" 54 item-text="name"
55 item-value="_id" 55 item-value="_id"
56 class="ml-2" 56 class="ml-2"
57 ></v-select> 57 ></v-select>
58 </v-flex> 58 </v-flex>
59 </v-layout> 59 </v-layout>
60 <v-flex xs12> 60 <v-flex xs12>
61 <v-card-actions> 61 <v-card-actions>
62 <v-btn round dark @click.native="closeSectionDialog" class="add-button">Cancel</v-btn> 62 <v-btn round dark @click.native="closeSectionDialog" class="add-button">Cancel</v-btn>
63 <v-spacer></v-spacer> 63 <v-spacer></v-spacer>
64 <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn> 64 <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn>
65 </v-card-actions> 65 </v-card-actions>
66 </v-flex> 66 </v-flex>
67 </v-form> 67 </v-form>
68 </v-flex> 68 </v-flex>
69 </v-layout> 69 </v-layout>
70 </v-container> 70 </v-container>
71 </v-card> 71 </v-card>
72 </v-dialog> 72 </v-dialog>
73 73
74 <!-- ****** PROFILE VIEW SECTION DATA ****** --> 74 <!-- ****** PROFILE VIEW SECTION DATA ****** -->
75 75
76 <v-dialog v-model="viewSectionDialog" max-width="500px" persistent> 76 <v-dialog v-model="viewSectionDialog" max-width="500px" persistent>
77 <v-card flat class="card-style pa-3" dark> 77 <v-card flat class="card-style pa-3" dark>
78 <v-layout> 78 <v-layout>
79 <v-flex xs12> 79 <v-flex xs12>
80 <label class="title text-xs-center">View Section</label> 80 <label class="title text-xs-center">View Section</label>
81 <v-icon size="24" class="right" @click="viewSectionDialog = false">cancel</v-icon> 81 <v-icon size="24" class="right" @click="viewSectionDialog = false">cancel</v-icon>
82 </v-flex> 82 </v-flex>
83 </v-layout> 83 </v-layout>
84 <v-card-text> 84 <v-card-text>
85 <v-container grid-list-md> 85 <v-container grid-list-md>
86 <v-layout wrap> 86 <v-layout wrap>
87 <v-flex> 87 <v-flex>
88 <v-layout> 88 <v-layout>
89 <v-flex xs7 sm6> 89 <v-flex xs7 sm6>
90 <h5 class="right my-1 hidden-xs-only hidden-sm-only"> 90 <h5 class="right my-1 hidden-xs-only hidden-sm-only">
91 <b>Class Name :</b> 91 <b>Class Name :</b>
92 </h5> 92 </h5>
93 <h5 class="right my-1 hidden-lg-only hidden-md-only hidden-xl-only"> 93 <h5 class="right my-1 hidden-lg-only hidden-md-only hidden-xl-only">
94 <b>Class :</b> 94 <b>Class :</b>
95 </h5> 95 </h5>
96 </v-flex> 96 </v-flex>
97 <v-flex sm6 xs5> 97 <v-flex sm6 xs5>
98 <h5 class="my-1">{{ editedItem.classData.classNum }}</h5> 98 <h5 class="my-1">{{ editedItem.classData.classNum }}</h5>
99 </v-flex> 99 </v-flex>
100 </v-layout> 100 </v-layout>
101 <v-layout> 101 <v-layout>
102 <v-flex xs7 sm6> 102 <v-flex xs7 sm6>
103 <h5 class="right my-1"> 103 <h5 class="right my-1">
104 <b>Section Name :</b> 104 <b>Section Name :</b>
105 </h5> 105 </h5>
106 </v-flex> 106 </v-flex>
107 <v-flex sm6 xs5> 107 <v-flex sm6 xs5>
108 <h5 class="my-1">{{ editedItem.name }}</h5> 108 <h5 class="my-1">{{ editedItem.name }}</h5>
109 </v-flex> 109 </v-flex>
110 </v-layout> 110 </v-layout>
111 <v-layout> 111 <v-layout>
112 <v-flex xs7 sm6> 112 <v-flex xs7 sm6>
113 <h5 class="right my-1 hidden-xs-only hidden-sm-only"> 113 <h5 class="right my-1 hidden-xs-only hidden-sm-only">
114 <b>Class Incharge :</b> 114 <b>Class Incharge :</b>
115 </h5> 115 </h5>
116 <h5 class="right my-1 hidden-lg-only hidden-md-only hidden-xl-only"> 116 <h5 class="right my-1 hidden-lg-only hidden-md-only hidden-xl-only">
117 <b>Incharge :</b> 117 <b>Incharge :</b>
118 </h5> 118 </h5>
119 </v-flex> 119 </v-flex>
120 <v-flex sm6 xs5> 120 <v-flex sm6 xs5>
121 <h5 class="my-1">{{ editedItem.teacherData[0].name }}</h5> 121 <h5 class="my-1">{{ editedItem.teacherData[0].name }}</h5>
122 </v-flex> 122 </v-flex>
123 </v-layout> 123 </v-layout>
124 <v-layout> 124 <v-layout>
125 <v-flex xs7 sm6> 125 <v-flex xs7 sm6>
126 <h5 class="right my-1"> 126 <h5 class="right my-1">
127 <b>Session :</b> 127 <b>Session :</b>
128 </h5> 128 </h5>
129 </v-flex> 129 </v-flex>
130 <v-flex sm6 xs5> 130 <v-flex sm6 xs5>
131 <h5 class="my-1">{{ editedItem.session }}</h5> 131 <h5 class="my-1">{{ editedItem.session }}</h5>
132 </v-flex> 132 </v-flex>
133 </v-layout> 133 </v-layout>
134 </v-flex> 134 </v-flex>
135 </v-layout> 135 </v-layout>
136 </v-container> 136 </v-container>
137 </v-card-text> 137 </v-card-text>
138 </v-card> 138 </v-card>
139 </v-dialog> 139 </v-dialog>
140 <!-- ****** Section Table ****** --> 140 <!-- ****** Section Table ****** -->
141 <v-toolbar color="transparent" flat> 141 <v-toolbar color="transparent" flat>
142 <v-btn 142 <v-btn
143 fab 143 fab
144 dark 144 dark
145 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 145 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
146 small 146 small
147 @click="addSectionDialog = true" 147 @click="addSectionDialog = true"
148 > 148 >
149 <v-icon dark>add</v-icon> 149 <v-icon dark>add</v-icon>
150 </v-btn> 150 </v-btn>
151 <v-btn 151 <v-btn
152 round 152 round
153 class="open-dialog-button hidden-sm-only hidden-xs-only" 153 class="open-dialog-button hidden-sm-only hidden-xs-only"
154 dark 154 dark
155 @click="addSectionDialog = true" 155 @click="addSectionDialog = true"
156 > 156 >
157 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Section 157 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Section
158 </v-btn> 158 </v-btn>
159 <v-spacer></v-spacer> 159 <v-spacer></v-spacer>
160 <v-card-title class="body-1" v-show="show"> 160 <v-card-title class="body-1" v-show="show">
161 <v-btn icon large flat @click="displaySearch"> 161 <v-btn icon large flat @click="displaySearch">
162 <v-avatar size="27"> 162 <v-avatar size="27">
163 <img src="/static/icon/search.png" alt="icon" /> 163 <img src="/static/icon/search.png" alt="icon" />
164 </v-avatar> 164 </v-avatar>
165 </v-btn> 165 </v-btn>
166 </v-card-title> 166 </v-card-title>
167 <v-flex xs8 v-if="showSearch"> 167 <v-flex xs8 v-if="showSearch">
168 <v-layout> 168 <v-layout>
169 <v-text-field 169 <v-text-field
170 autofocus 170 autofocus
171 v-model="search" 171 v-model="search"
172 label="Search" 172 label="Search"
173 prepend-inner-icon="search" 173 prepend-inner-icon="search"
174 color="primary" 174 color="primary"
175 style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important" 175 style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important"
176 ></v-text-field> 176 ></v-text-field>
177 <v-icon @click="closeSearch" color="error">close</v-icon> 177 <v-icon @click="closeSearch" color="error">close</v-icon>
178 </v-layout> 178 </v-layout>
179 </v-flex> 179 </v-flex>
180 </v-toolbar> 180 </v-toolbar>
181 <v-data-table 181 <v-data-table
182 :headers="headers" 182 :headers="headers"
183 :items="sectionList" 183 :items="sectionList"
184 :pagination.sync="pagination" 184 :pagination.sync="pagination"
185 :search="search" 185 :search="search"
186 > 186 >
187 <template slot="items" slot-scope="props"> 187 <template slot="items" slot-scope="props">
188 <tr class="tr"> 188 <tr class="tr">
189 <td class="td td-row">{{ props.index + 1 }}</td> 189 <td class="td td-row">{{ props.index + 1 }}</td>
190 <td class="text-xs-center td td-row">{{ props.item.classData.classNum }}</td> 190 <td class="text-xs-center td td-row">{{ props.item.classData.classNum }}</td>
191 <td class="text-xs-center td td-row">{{ props.item.name }}</td> 191 <td class="text-xs-center td td-row">{{ props.item.name }}</td>
192 <td class="text-xs-center td td-row">{{ props.item.session }}</td> 192 <td class="text-xs-center td td-row">{{ props.item.session }}</td>
193 <td class="text-xs-center td td-row"> 193 <td class="text-xs-center td td-row">
194 <span> 194 <span>
195 <v-tooltip top> 195 <v-tooltip top>
196 <img 196 <img
197 slot="activator" 197 slot="activator"
198 style="cursor:pointer; width:25px; height:25px;" 198 style="cursor:pointer; width:25px; height:25px;"
199 class="mr-3" 199 class="mr-3"
200 @click="profile(props.item)" 200 @click="profile(props.item)"
201 src="/static/icon/view.png" 201 src="/static/icon/view.png"
202 /> 202 />
203 <span>View</span> 203 <span>View</span>
204 </v-tooltip> 204 </v-tooltip>
205 <v-tooltip top> 205 <v-tooltip top>
206 <img 206 <img
207 slot="activator" 207 slot="activator"
208 style="cursor:pointer; width:20px; height:18px; " 208 style="cursor:pointer; width:20px; height:18px; "
209 class="mr-3" 209 class="mr-3"
210 @click="editItem(props.item)" 210 @click="editItem(props.item)"
211 src="/static/icon/edit.png" 211 src="/static/icon/edit.png"
212 /> 212 />
213 <span>Edit</span> 213 <span>Edit</span>
214 </v-tooltip> 214 </v-tooltip>
215 <!-- <v-tooltip top> 215 <!-- <v-tooltip top>
216 <img 216 <img
217 slot="activator" 217 slot="activator"
218 style="cursor:pointer; width:20px; height:20px; " 218 style="cursor:pointer; width:20px; height:20px; "
219 @click="deleteItem(props.item)" 219 @click="deleteItem(props.item)"
220 src="/static/icon/delete.png" 220 src="/static/icon/delete.png"
221 class="mr-3" 221 class="mr-3"
222 /> 222 />
223 <span>Delete</span> 223 <span>Delete</span>
224 </v-tooltip>--> 224 </v-tooltip>-->
225 </span> 225 </span>
226 </td> 226 </td>
227 </tr> 227 </tr>
228 </template> 228 </template>
229 <v-alert 229 <v-alert
230 slot="no-results" 230 slot="no-results"
231 :value="true" 231 :value="true"
232 color="error" 232 color="error"
233 icon="warning" 233 icon="warning"
234 >Your search for "{{ search }}" found no results.</v-alert> 234 >Your search for "{{ search }}" found no results.</v-alert>
235 </v-data-table> 235 </v-data-table>
236 <!-- </v-tab-item> --> 236 <!-- </v-tab-item> -->
237 237
238 <!-- DIALOG BOX - ADD Students Dialog box --> 238 <!-- DIALOG BOX - ADD Students Dialog box -->
239 <v-dialog v-model="addSectionDialog" max-width="400px" v-if="addSectionDialog" persistent> 239 <v-dialog v-model="addSectionDialog" max-width="400px" v-if="addSectionDialog" persistent>
240 <v-card flat class="card-style pa-2" dark> 240 <v-card flat class="card-style pa-2" dark>
241 <v-layout> 241 <v-layout>
242 <v-flex xs12> 242 <v-flex xs12>
243 <label class="title text-xs-center">Add Section</label> 243 <label class="title text-xs-center">Add Section</label>
244 <v-icon 244 <v-icon
245 size="24" 245 size="24"
246 class="right" 246 class="right"
247 @click="$refs.form.reset();addSectionDialog = false" 247 @click="$refs.form.reset();addSectionDialog = false"
248 >cancel</v-icon> 248 >cancel</v-icon>
249 </v-flex> 249 </v-flex>
250 </v-layout> 250 </v-layout>
251 <v-container fluid fill-height> 251 <v-container fluid fill-height>
252 <v-layout align-center> 252 <v-layout align-center>
253 <v-flex xs12> 253 <v-flex xs12>
254 <v-form ref="form" v-model="valid" lazy-validation> 254 <v-form ref="form" v-model="valid" lazy-validation>
255 <v-layout> 255 <v-layout>
256 <v-flex xs4 class="pt-4 subheading"> 256 <v-flex xs4 class="pt-4 subheading">
257 <label class="right">Section :</label> 257 <label class="right">Section :</label>
258 </v-flex> 258 </v-flex>
259 <v-flex xs8 class="ml-3"> 259 <v-flex xs8 class="ml-3">
260 <v-autocomplete 260 <v-autocomplete
261 v-model="sectionData.name" 261 v-model="sectionData.name"
262 placeholder="fill your Section Name" 262 placeholder="fill your Section Name"
263 :items="SectionName" 263 :items="SectionName"
264 :rules="nameRules" 264 :rules="nameRules"
265 required 265 required
266 ></v-autocomplete> 266 ></v-autocomplete>
267 </v-flex> 267 </v-flex>
268 </v-layout> 268 </v-layout>
269 <v-layout> 269 <v-layout>
270 <v-flex xs4 class="pt-4 subheading"> 270 <v-flex xs4 class="pt-4 subheading">
271 <label class="right">Class :</label> 271 <label class="right">Class :</label>
272 </v-flex> 272 </v-flex>
273 <v-flex xs8 class="ml-3"> 273 <v-flex xs8 class="ml-3">
274 <v-select 274 <v-select
275 :items="addclass" 275 :items="addclass"
276 label="Select Class" 276 label="Select Class"
277 v-model="sectionData.classNum" 277 v-model="sectionData.classNum"
278 item-text="classNum" 278 item-text="classNum"
279 item-value="_id" 279 item-value="_id"
280 name="Select Class" 280 name="Select Class"
281 :rules="classRules" 281 :rules="classRules"
282 required 282 required
283 ></v-select> 283 ></v-select>
284 </v-flex> 284 </v-flex>
285 </v-layout> 285 </v-layout>
286 <v-layout> 286 <v-layout>
287 <v-flex xs4 class="pt-4 subheading"> 287 <v-flex xs4 class="pt-4 subheading">
288 <label class="right">Incharge :</label> 288 <label class="right">Incharge :</label>
289 </v-flex> 289 </v-flex>
290 <v-flex xs8 class="ml-3"> 290 <v-flex xs8 class="ml-3">
291 <v-select 291 <v-select
292 :items="teacherList" 292 :items="teacherList"
293 label="Select Incharge" 293 label="Select Incharge"
294 v-model="sectionData.sectionId" 294 v-model="sectionData.sectionId"
295 item-text="name" 295 item-text="name"
296 item-value="_id" 296 item-value="_id"
297 name="Select Class" 297 name="Select Class"
298 :rules="inchargeRules" 298 :rules="inchargeRules"
299 required 299 required
300 ></v-select> 300 ></v-select>
301 </v-flex> 301 </v-flex>
302 </v-layout> 302 </v-layout>
303 <v-layout> 303 <v-layout>
304 <v-flex xs4 class="pt-4 subheading"> 304 <v-flex xs4 class="pt-4 subheading">
305 <label class="right">Session:</label> 305 <label class="right">Session:</label>
306 </v-flex> 306 </v-flex>
307 <v-flex xs8 class="ml-3"> 307 <v-flex xs8 class="ml-3">
308 <v-text-field 308 <v-text-field
309 v-model="sectionData.session" 309 v-model="sectionData.session"
310 placeholder="fill your Session" 310 placeholder="fill your Session"
311 name="name" 311 name="name"
312 type="text" 312 type="text"
313 :rules="sessionRules" 313 :rules="sessionRules"
314 required 314 required
315 ></v-text-field> 315 ></v-text-field>
316 </v-flex> 316 </v-flex>
317 </v-layout> 317 </v-layout>
318 <v-layout> 318 <v-layout>
319 <v-flex xs12 sm12> 319 <v-flex xs12 sm12>
320 <v-card-actions> 320 <v-card-actions>
321 <v-btn @click="clear" class="clear-button" round dark>Clear</v-btn> 321 <v-btn @click="clear" class="clear-button" round dark>Clear</v-btn>
322 <v-spacer></v-spacer> 322 <v-spacer></v-spacer>
323 <v-btn @click="submit" class="add-button" round dark :loading="loading">Add</v-btn> 323 <v-btn @click="submit" class="add-button" round dark :loading="loading">Add</v-btn>
324 </v-card-actions> 324 </v-card-actions>
325 </v-flex> 325 </v-flex>
326 </v-layout> 326 </v-layout>
327 </v-form> 327 </v-form>
328 </v-flex> 328 </v-flex>
329 </v-layout> 329 </v-layout>
330 </v-container> 330 </v-container>
331 </v-card> 331 </v-card>
332 </v-dialog> 332 </v-dialog>
333 <v-snackbar 333 <v-snackbar
334 :timeout="timeout" 334 :timeout="timeout"
335 :top="y === 'top'" 335 :top="y === 'top'"
336 :right="x === 'right'" 336 :right="x === 'right'"
337 :vertical="mode === 'vertical'" 337 :vertical="mode === 'vertical'"
338 v-model="snackbar" 338 v-model="snackbar"
339 :color="color" 339 :color="color"
340 >{{ text }}</v-snackbar> 340 >{{ text }}</v-snackbar>
341 <div class="loader" v-if="showLoader"> 341 <div class="loader" v-if="showLoader">
342 <v-progress-circular indeterminate color="white"></v-progress-circular> 342 <v-progress-circular indeterminate color="white"></v-progress-circular>
343 </div> 343 </div>
344 </v-container> 344 </v-container>
345 </template> 345 </template>
346 346
347 <script> 347 <script>
348 import http from "@/Services/http.js"; 348 import http from "@/Services/http.js";
349 // import { apiCollection } from "@/schoolApi/apiCollection"; 349 // import { apiCollection } from "@/schoolApi/apiCollection";
350 // const getSectionData = apiCollection.get("posts"); 350 // const getSectionData = apiCollection.get("posts");
351 351
352 export default { 352 export default {
353 data: () => ({ 353 data: () => ({
354 snackbar: false, 354 snackbar: false,
355 y: "top", 355 y: "top",
356 x: "right", 356 x: "right",
357 mode: "", 357 mode: "",
358 timeout: 5000, 358 timeout: 5000,
359 text: "", 359 text: "",
360 color: "", 360 color: "",
361 show: true, 361 show: true,
362 showSearch: false, 362 showSearch: false,
363 showLoader: false, 363 showLoader: false,
364 loading: false, 364 loading: false,
365 date: null, 365 date: null,
366 search: "", 366 search: "",
367 editSectionDialog: false, 367 editSectionDialog: false,
368 viewSectionDialog: false, 368 viewSectionDialog: false,
369 valid: true, 369 valid: true,
370 validEdit: true, 370 validEdit: true,
371 addSectionDialog: false, 371 addSectionDialog: false,
372 editLoading: false, 372 editLoading: false,
373 details: [], 373 details: [],
374 pagination: { 374 pagination: {
375 rowsPerPage: 10, 375 rowsPerPage: 10,
376 }, 376 },
377 nameRules: [(v) => !!v || " Section Name is required"], 377 nameRules: [(v) => !!v || " Section Name is required"],
378 classRules: [(v) => !!v || " Class Name is required"], 378 classRules: [(v) => !!v || " Class Name is required"],
379 sessionRules: [(v) => !!v || " Session is required"], 379 sessionRules: [(v) => !!v || " Session is required"],
380 inchargeRules: [(v) => !!v || " Incharge Name is required"], 380 inchargeRules: [(v) => !!v || " Incharge Name is required"],
381 SectionName: ["A", "B", "C", "D", "E", "F"], 381 SectionName: ["A", "B", "C", "D", "E", "F"],
382 headers: [ 382 headers: [
383 { 383 {
384 text: "No", 384 text: "No",
385 align: "", 385 align: "",
386 sortable: false, 386 sortable: false,
387 value: "No", 387 value: "No",
388 }, 388 },
389 { 389 {
390 text: "Class Name", 390 text: "Class Name",
391 value: "classData.classNum", 391 value: "classData.classNum",
392 sortable: false, 392 sortable: false,
393 align: "center", 393 align: "center",
394 }, 394 },
395 { text: "Section Name", value: "name", sortable: false, align: "center" }, 395 { text: "Section Name", value: "name", sortable: false, align: "center" },
396 { text: "Session", value: "session", sortable: false, align: "center" }, 396 { text: "Session", value: "session", sortable: false, align: "center" },
397 { text: "Action", value: "", sortable: false, align: "center" }, 397 { text: "Action", value: "", sortable: false, align: "center" },
398 ], 398 ],
399 sectionList: [], 399 sectionList: [],
400 addclass: [], 400 addclass: [],
401 teacherList: [], 401 teacherList: [],
402 select: "", 402 select: "",
403 selectId: "", 403 selectId: "",
404 token: "", 404 token: "",
405 editedIndex: -1, 405 editedIndex: -1,
406 editedItem: { 406 editedItem: {
407 classData: { 407 classData: {
408 classNum: "", 408 classNum: "",
409 }, 409 },
410 teacherData: [ 410 teacherData: [
411 { 411 {
412 name: "", 412 name: "",
413 }, 413 },
414 ], 414 ],
415 // name: "", 415 // name: "",
416 // session: new Date().getFullYear() 416 // session: new Date().getFullYear()
417 }, 417 },
418 sectionData: { 418 sectionData: {
419 session: new Date().getFullYear(), 419 session: new Date().getFullYear(),
420 }, 420 },
421 }), 421 }),
422 watch: { 422 watch: {
423 addSectionDialog: function (val) { 423 addSectionDialog: function (val) {
424 if (!val) { 424 if (!val) {
425 this.sectionData = []; 425 this.sectionData = [];
426 } 426 }
427 }, 427 },
428 }, 428 },
429 methods: { 429 methods: {
430 getSectionList() { 430 getSectionList() {
431 // const { data } = await getSectionData.get(); 431 // const { data } = await getSectionData.get();
432 this.showLoader = true; 432 this.showLoader = true;
433 http() 433 http()
434 .get("/getAllSections", { 434 .get("/getAllSections", {
435 headers: { Authorization: "Bearer " + this.token }, 435 headers: { Authorization: "Bearer " + this.token },
436 }) 436 })
437 .then((response) => { 437 .then((response) => {
438 this.sectionList = response.data.data; 438 this.sectionList = response.data.data;
439 this.showLoader = false; 439 this.showLoader = false;
440 // console.log("getAllSections=====>",response.data.data) 440 // console.log("getAllSections=====>",response.data.data)
441 }) 441 })
442 .catch((error) => { 442 .catch((error) => {
443 this.showLoader = false; 443 this.showLoader = false;
444 if (error.response.status === 401) { 444 if (error.response.status === 401) {
445 this.$router.replace({ path: "/" }); 445 this.$router.replace({ path: "/" });
446 this.$store.dispatch("setToken", null); 446 this.$store.dispatch("setToken", null);
447 this.$store.dispatch("Id", null); 447 this.$store.dispatch("Id", null);
448 } 448 }
449 }); 449 });
450 }, 450 },
451 editItem(item) { 451 editItem(item) {
452 this.editedIndex = this.sectionList.indexOf(item); 452 this.editedIndex = this.sectionList.indexOf(item);
453 this.editedItem = Object.assign({}, item); 453 this.editedItem = Object.assign({}, item);
454 this.editSectionDialog = true; 454 this.editSectionDialog = true;
455 }, 455 },
456 profile(item) { 456 profile(item) {
457 this.editedIndex = this.sectionList.indexOf(item); 457 this.editedIndex = this.sectionList.indexOf(item);
458 this.editedItem = Object.assign({}, item); 458 this.editedItem = Object.assign({}, item);
459 this.viewSectionDialog = true; 459 this.viewSectionDialog = true;
460 }, 460 },
461 deleteItem(item) { 461 deleteItem(item) {
462 let deleteStudent = { 462 let deleteStudent = {
463 sectionId: item._id, 463 sectionId: item._id,
464 }; 464 };
465 http() 465 http()
466 .delete( 466 .delete(
467 "/deleteSection", 467 "/deleteSection",
468 confirm("Are you sure you want to delete this?") && { 468 confirm("Are you sure you want to delete this?") && {
469 params: deleteStudent, 469 params: deleteStudent,
470 } 470 }
471 ) 471 )
472 .then((response) => { 472 .then((response) => {
473 this.snackbar = true; 473 this.snackbar = true;
474 this.text = response.data.message; 474 this.text = response.data.message;
475 this.color = "green"; 475 this.color = "green";
476 this.getSectionList(); 476 this.getSectionList();
477 }) 477 })
478 .catch((error) => { 478 .catch((error) => {
479 this.snackbar = true; 479 this.snackbar = true;
480 this.text = error.response.data.message; 480 this.text = error.response.data.message;
481 this.color = "green"; 481 this.color = "green";
482 }); 482 });
483 }, 483 },
484 closeSectionDialog() { 484 closeSectionDialog() {
485 this.editSectionDialog = false; 485 this.editSectionDialog = false;
486 }, 486 },
487 closeviewSectionDialog() { 487 closeviewSectionDialog() {
488 this.viewSectionDialog = false; 488 this.viewSectionDialog = false;
489 }, 489 },
490 submit() { 490 submit() {
491 if (this.$refs.form.validate()) { 491 if (this.$refs.form.validate()) {
492 let addSection = { 492 let addSection = {
493 name: this.sectionData.name, 493 name: this.sectionData.name,
494 classId: this.sectionData.classNum, 494 classId: this.sectionData.classNum,
495 session: this.sectionData.session, 495 session: this.sectionData.session,
496 classInchargeId: this.sectionData.sectionId, 496 classInchargeId: this.sectionData.sectionId,
497 }; 497 };
498 this.loading = true; 498 this.loading = true;
499 http() 499 http()
500 .post("/createSection", addSection) 500 .post("/createSection", addSection)
501 .then((response) => { 501 .then((response) => {
502 this.getSectionList(); 502 this.getSectionList();
503 this.snackbar = true; 503 this.snackbar = true;
504 this.color = "green"; 504 this.color = "green";
505 this.text = "New Section added successfully"; 505 this.text = "New Section added successfully";
506 this.clear(); 506 this.clear();
507 this.addSectionDialog = false; 507 this.addSectionDialog = false;
508 this.loading = false; 508 this.loading = false;
509 }) 509 })
510 .catch((error) => { 510 .catch((error) => {
511 this.snackbar = true; 511 this.snackbar = true;
512 this.color = "error"; 512 this.color = "error";
513 this.text = error.response.data.message; 513 this.text = error.response.data.message;
514 this.loading = false; 514 this.loading = false;
515 }); 515 });
516 } 516 }
517 }, 517 },
518 clear() { 518 clear() {
519 this.$refs.form.reset(); 519 this.$refs.form.reset();
520 }, 520 },
521 save() { 521 save() {
522 this.editedItem.sectionId = this.editedItem._id; 522 this.editedItem.sectionId = this.editedItem._id;
523 this.editLoading = true; 523 this.editLoading = true;
524 http() 524 http()
525 .put("/updateSection", this.editedItem) 525 .put("/updateSection", this.editedItem)
526 .then((response) => { 526 .then((response) => {
527 this.editLoading = false; 527 this.editLoading = false;
528 this.snackbar = true; 528 this.snackbar = true;
529 this.color = "green"; 529 this.color = "green";
530 this.text = response.data.message; 530 this.text = response.data.message;
531 this.getSectionList(); 531 this.getSectionList();
532 this.closeSectionDialog(); 532 this.closeSectionDialog();
533 }) 533 })
534 .catch((error) => { 534 .catch((error) => {
535 this.editLoading = false; 535 this.editLoading = false;
536 this.snackbar = true; 536 this.snackbar = true;
537 this.color = "error"; 537 this.color = "error";
538 this.text = error.response.data.message; 538 this.text = error.response.data.message;
539 }); 539 });
540 }, 540 },
541 getAllTeacher() { 541 getAllTeacher() {
542 http() 542 http()
543 .get("/getTeachersList", { 543 .get("/getTeachersList", {
544 headers: { Authorization: "Bearer " + this.token }, 544 headers: { Authorization: "Bearer " + this.token },
545 }) 545 })
546 .then((response) => { 546 .then((response) => {
547 this.teacherList = response.data.data; 547 this.teacherList = response.data.data;
548 this.showLoader = false; 548 this.showLoader = false;
549 }) 549 })
550 .catch((err) => { 550 .catch((err) => {
551 // console.log("err====>", err); 551 // console.log("err====>", err);
552 this.showLoader = false; 552 this.showLoader = false;
553 }); 553 });
554 }, 554 },
555 getAllClasses() { 555 getAllClasses() {
556 http() 556 http()
557 .get("/getClassesList", { 557 .get("/getClassesList", {
558 headers: { Authorization: "Bearer " + this.token }, 558 headers: { Authorization: "Bearer " + this.token },
559 }) 559 })
560 .then((response) => { 560 .then((response) => {
561 this.addclass = response.data.data; 561 this.addclass = response.data.data;
562 }) 562 })
563 .catch((err) => { 563 .catch((err) => {
564 // console.log("err====>", err); 564 // console.log("err====>", err);
565 // this.$router.replace({ path: "/" }); 565 // this.$router.replace({ path: "/" });
566 }); 566 });
567 }, 567 },
568 displaySearch() { 568 displaySearch() {
569 (this.show = false), (this.showSearch = true); 569 (this.show = false), (this.showSearch = true);
570 }, 570 },
571 closeSearch() { 571 closeSearch() {
572 this.showSearch = false; 572 this.showSearch = false;
573 this.show = true; 573 this.show = true;
574 this.search = ""; 574 this.search = "";
575 }, 575 },
576 }, 576 },
577 mounted() { 577 mounted() {
578 this.token = this.$store.state.token; 578 this.token = this.$store.state.token;
579 this.getSectionList(); 579 this.getSectionList();
580 this.getAllClasses(); 580 this.getAllClasses();
581 this.getAllTeacher(); 581 this.getAllTeacher();
582 }, 582 },
583 }; 583 };
584 </script> 584 </script>
585 585