viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 7f4d490dd6a72a0aaa68e87696e0b96347ad162a

Authored by Amber Dev
1 parent 0cb974fde1
Exists in master and in 2 other branches amber-development, ui-design

hid snackbar from enroll students

Showing 1 changed file with 15 additions and 7 deletions   Show diff stats
src/pages/Course/enrollStudents.vue
Diff comments   View file @7f4d490
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 autofocus v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> 41 <v-text-field
42 autofocus
43 v-model="search"
44 label="Search"
45 prepend-inner-icon="search"
46 color="primary"
47 ></v-text-field>
42 <v-icon @click="closeSearch" color="error">close</v-icon> 48 <v-icon @click="closeSearch" color="error">close</v-icon>
43 </v-layout> 49 </v-layout>
44 </v-flex> 50 </v-flex>
45 </v-toolbar> 51 </v-toolbar>
46 <v-data-table 52 <v-data-table
47 :headers="headers" 53 :headers="headers"
48 :items="studentsData" 54 :items="studentsData"
49 :pagination.sync="pagination" 55 :pagination.sync="pagination"
50 :search="search" 56 :search="search"
51 select-all 57 select-all
52 v-model="selected" 58 v-model="selected"
53 item-key="_id" 59 item-key="_id"
54 > 60 >
55 <template slot="items" slot-scope="props"> 61 <template slot="items" slot-scope="props">
56 <tr class="tr" :active="props.selected" @click="props.selected = !props.selected"> 62 <tr class="tr" :active="props.selected" @click="props.selected = !props.selected">
57 <td class="text-xs-center td td-row"> 63 <td class="text-xs-center td td-row">
58 <v-checkbox 64 <v-checkbox
59 v-model="props.item.enroll" 65 v-model="props.item.enroll"
60 @change="selectParticularStudent(props.item)" 66 @change="selectParticularStudent(props.item)"
61 primary 67 primary
62 hide-details 68 hide-details
63 ></v-checkbox> 69 ></v-checkbox>
64 </td> 70 </td>
65 <td class="text-xs-center td td-row"> 71 <td class="text-xs-center td td-row">
66 <v-avatar size="40"> 72 <v-avatar size="40">
67 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> 73 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
68 <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" />
69 </v-avatar> 75 </v-avatar>
70 </td> 76 </td>
71 <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>
72 <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>
73 <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>
74 </tr> 80 </tr>
75 </template> 81 </template>
76 <template slot="headers" slot-scope="props"> 82 <template slot="headers" slot-scope="props">
77 <tr> 83 <tr>
78 <th> 84 <th>
79 <v-checkbox 85 <v-checkbox
80 :input-value="props.all" 86 :input-value="props.all"
81 :indeterminate="props.indeterminate" 87 :indeterminate="props.indeterminate"
82 primary 88 primary
83 hide-details 89 hide-details
84 @click.native="toggleAll" 90 @click.native="toggleAll"
85 ></v-checkbox> 91 ></v-checkbox>
86 </th> 92 </th>
87 <th 93 <th
88 v-for="header in props.headers" 94 v-for="header in props.headers"
89 :key="header.text" 95 :key="header.text"
90 :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' : '']"
91 @click="changeSort(header.value)" 97 @click="changeSort(header.value)"
92 > 98 >
93 <v-icon small>arrow_upward</v-icon> 99 <v-icon small>arrow_upward</v-icon>
94 {{ header.text }} 100 {{ header.text }}
95 </th> 101 </th>
96 </tr> 102 </tr>
97 </template> 103 </template>
98 <v-alert 104 <v-alert
99 slot="no-results" 105 slot="no-results"
100 :value="true" 106 :value="true"
101 color="error" 107 color="error"
102 icon="warning" 108 icon="warning"
103 >Your search for "{{ search }}" found no results.</v-alert> 109 >Your search for "{{ search }}" found no results.</v-alert>
104 </v-data-table> 110 </v-data-table>
105 <v-snackbar 111 <v-snackbar
106 :timeout="timeout" 112 :timeout="timeout"
107 :top="y === 'top'" 113 :top="y === 'top'"
108 :right="x === 'right'" 114 :right="x === 'right'"
109 :vertical="mode === 'vertical'" 115 :vertical="mode === 'vertical'"
110 v-model="snackbar" 116 v-model="snackbar"
111 color="success" 117 color="success"
112 >{{ text }}</v-snackbar> 118 >{{ text }}</v-snackbar>
113 <div class="loader" v-if="showLoader"> 119 <div class="loader" v-if="showLoader">
114 <v-progress-circular indeterminate color="white"></v-progress-circular> 120 <v-progress-circular indeterminate color="white"></v-progress-circular>
115 </div> 121 </div>
116 </v-container> 122 </v-container>
117 </template> 123 </template>
118 124
119 <script> 125 <script>
120 import http from "@/Services/http.js"; 126 import http from "@/Services/http.js";
121 import moment from "moment"; 127 import moment from "moment";
122 128
123 export default { 129 export default {
124 data: () => ({ 130 data: () => ({
125 snackbar: false, 131 snackbar: false,
126 y: "top", 132 y: "top",
127 x: "right", 133 x: "right",
128 mode: "", 134 mode: "",
129 timeout: 3000, 135 timeout: 3000,
130 text: "", 136 text: "",
131 show: true, 137 show: true,
132 showSearch: false, 138 showSearch: false,
133 showLoader: false, 139 showLoader: false,
134 loading: false, 140 loading: false,
135 date: null, 141 date: null,
136 search: "", 142 search: "",
137 addclass: [], 143 addclass: [],
138 pagination: { 144 pagination: {
139 rowsPerPage: 10, 145 rowsPerPage: 10,
140 }, 146 },
141 headers: [ 147 headers: [
142 { 148 {
143 text: "Profile Pic", 149 text: "Profile Pic",
144 value: "profilprofilePicUrlePicUrl", 150 value: "profilprofilePicUrlePicUrl",
145 sortable: false, 151 sortable: false,
146 align: "center", 152 align: "center",
147 }, 153 },
148 { text: "Name", value: "name", sortable: false, align: "center" }, 154 { text: "Name", value: "name", sortable: false, align: "center" },
149 { 155 {
150 text: "Mobile No", 156 text: "Mobile No",
151 value: "fatherCellNo", 157 value: "fatherCellNo",
152 sortable: false, 158 sortable: false,
153 align: "center", 159 align: "center",
154 }, 160 },
155 { text: "Email", value: "email", sortable: false, align: "center" }, 161 { text: "Email", value: "email", sortable: false, align: "center" },
156 // { text: "Action", value: "", sortable: false, align: "center" } 162 // { text: "Action", value: "", sortable: false, align: "center" }
157 ], 163 ],
158 token: "", 164 token: "",
159 selectStudents: { 165 selectStudents: {
160 select: "", 166 select: "",
161 selectSection: "", 167 selectSection: "",
162 }, 168 },
163 169
164 role: "", 170 role: "",
165 schoolRole: "", 171 schoolRole: "",
166 menu: false, 172 menu: false,
167 valid: true, 173 valid: true,
168 174
169 getReport: {}, 175 getReport: {},
170 studentsData: [], 176 studentsData: [],
171 courseData: [], 177 courseData: [],
172 addSection: [], 178 addSection: [],
173 selected: [], 179 selected: [],
174 }), 180 }),
175 methods: { 181 methods: {
176 save(date) { 182 save(date) {
177 this.$refs.menu.save(date); 183 this.$refs.menu.save(date);
178 }, 184 },
179 getAllClass() { 185 getAllClass() {
180 http() 186 http()
181 .get("/getClassesList", { 187 .get("/getClassesList", {
182 headers: { Authorization: "Bearer " + this.token }, 188 headers: { Authorization: "Bearer " + this.token },
183 }) 189 })
184 .then((response) => { 190 .then((response) => {
185 this.addclass = response.data.data; 191 this.addclass = response.data.data;
186 }) 192 })
187 .catch((error) => { 193 .catch((error) => {
188 // console.log("err====>", err); 194 // console.log("err====>", err);
189 // this.$router.replace({ path: "/" }); 195 // this.$router.replace({ path: "/" });
190 }); 196 });
191 }, 197 },
192 getCourses(classId) { 198 getCourses(classId) {
193 this.showLoader = true; 199 this.showLoader = true;
194 http() 200 http()
195 .get("/getCourseesList", { 201 .get("/getCourseesList", {
196 params: { 202 params: {
197 classId: classId, 203 classId: classId,
198 }, 204 },
199 }) 205 })
200 .then((response) => { 206 .then((response) => {
201 this.courseData = response.data.data; 207 this.courseData = response.data.data;
202 this.showLoader = false; 208 this.showLoader = false;
203 }) 209 })
204 .catch((err) => { 210 .catch((err) => {
205 console.log("err====>", err); 211 console.log("err====>", err);
206 this.showLoader = false; 212 this.showLoader = false;
207 }); 213 });
208 }, 214 },
209 getStudents() { 215 getStudents(message) {
210 this.showLoader = true; 216 this.showLoader = true;
211 http() 217 http()
212 .get("/getStudentsList", { 218 .get("/getStudentsList", {
213 params: { 219 params: {
214 classId: this.getReport.classId, 220 classId: this.getReport.classId,
215 }, 221 },
216 }) 222 })
217 .then((response) => { 223 .then((response) => {
218 this.studentsData = response.data.data; 224 this.studentsData = response.data.data;
219 this.showLoader = false; 225 this.showLoader = false;
220 // this.addStudentAttendenceDialog = false; 226 // this.addStudentAttendenceDialog = false;
221 var attendence = ""; 227 var attendence = "";
222 for (let i = 0; i < this.studentsData.length; i++) { 228 for (let i = 0; i < this.studentsData.length; i++) {
223 this.studentsData[i].attendence = true; 229 this.studentsData[i].attendence = true;
224 } 230 }
225 this.getParticularCourse(); 231 this.getParticularCourse(message);
226 }) 232 })
227 .catch((error) => { 233 .catch((error) => {
228 console.log("err====>", error); 234 console.log("err====>", error);
229 this.showLoader = false; 235 this.showLoader = false;
230 }); 236 });
231 }, 237 },
232 getStudentTable(id) { 238 getStudentTable(id) {
233 // console.log("id", this.getReport.courseId); 239 // console.log("id", this.getReport.courseId);
234 this.getStudents(); 240 this.getStudents("noSnackbar");
235 }, 241 },
236 update() { 242 update() {
237 var studentsAttendence = []; 243 var studentsAttendence = [];
238 for (var j = 0; j < this.studentsData.length; j++) { 244 for (var j = 0; j < this.studentsData.length; j++) {
239 studentsAttendence.push({ 245 studentsAttendence.push({
240 studentId: this.studentsData[j]._id, 246 studentId: this.studentsData[j]._id,
241 isPresent: this.studentsData[j].attendence, 247 isPresent: this.studentsData[j].attendence,
242 }); 248 });
243 } 249 }
244 if (this.$refs.form.validate()) { 250 if (this.$refs.form.validate()) {
245 let attendanceData = { 251 let attendanceData = {
246 sectionId: this.getReport.sectionId, 252 sectionId: this.getReport.sectionId,
247 date: this.date, 253 date: this.date,
248 students: studentsAttendence, 254 students: studentsAttendence,
249 }; 255 };
250 http() 256 http()
251 .put("/updateAttendance", attendanceData) 257 .put("/updateAttendance", attendanceData)
252 .then((response) => { 258 .then((response) => {
253 this.snackbar = true; 259 this.snackbar = true;
254 this.text = response.data.message; 260 this.text = response.data.message;
255 this.addStudentAttendenceDialog = false; 261 this.addStudentAttendenceDialog = false;
256 }) 262 })
257 .catch((error) => { 263 .catch((error) => {
258 this.snackbar = true; 264 this.snackbar = true;
259 this.text = error.response.data.message; 265 this.text = error.response.data.message;
260 }); 266 });
261 } 267 }
262 }, 268 },
263 toggleAll() { 269 toggleAll() {
264 let withdraw = false; 270 let withdraw = false;
265 if (this.selected.length === this.studentsData.length) withdraw = true; 271 if (this.selected.length === this.studentsData.length) withdraw = true;
266 272
267 if (withdraw) { 273 if (withdraw) {
268 var payload = { 274 var payload = {
269 courseId: this.getReport.courseId, 275 courseId: this.getReport.courseId,
270 enrollStudents: [], 276 enrollStudents: [],
271 }; 277 };
272 http() 278 http()
273 .put("/enrollStudents", payload) 279 .put("/enrollStudents", payload)
274 .then((response) => { 280 .then((response) => {
275 this.snackbar = true; 281 this.snackbar = true;
276 this.text = response.data.message; 282 this.text = response.data.message;
277 this.selected = []; 283 this.selected = [];
278 for (let i = 0; i < this.studentsData.length; i++) { 284 for (let i = 0; i < this.studentsData.length; i++) {
279 this.studentsData[i].enroll = false; 285 this.studentsData[i].enroll = false;
280 } 286 }
281 this.getParticularCourse(); 287 this.getParticularCourse();
282 }) 288 })
283 .catch((error) => { 289 .catch((error) => {
284 this.snackbar = true; 290 this.snackbar = true;
285 this.text = error.response.data.message; 291 this.text = error.response.data.message;
286 }); 292 });
287 } else { 293 } else {
288 let selectedStudentsArray = []; 294 let selectedStudentsArray = [];
289 for (let item of this.studentsData) { 295 for (let item of this.studentsData) {
290 if (item.enroll === false || !item.enroll) { 296 if (item.enroll === false || !item.enroll) {
291 selectedStudentsArray.push({ studentId: item._id }); 297 selectedStudentsArray.push({ studentId: item._id });
292 } 298 }
293 } 299 }
294 300
295 var payload = { 301 var payload = {
296 courseId: this.getReport.courseId, 302 courseId: this.getReport.courseId,
297 enrollStudents: selectedStudentsArray, 303 enrollStudents: selectedStudentsArray,
298 }; 304 };
299 http() 305 http()
300 .put("/enrollStudents", payload) 306 .put("/enrollStudents", payload)
301 .then((response) => { 307 .then((response) => {
302 this.snackbar = true; 308 this.snackbar = true;
303 this.text = response.data.message; 309 this.text = response.data.message;
304 for (let i = 0; i < this.studentsData.length; i++) { 310 for (let i = 0; i < this.studentsData.length; i++) {
305 this.studentsData[i].enroll = true; 311 this.studentsData[i].enroll = true;
306 } 312 }
307 this.getParticularCourse(); 313 this.getParticularCourse();
308 }) 314 })
309 .catch((error) => { 315 .catch((error) => {
310 this.snackbar = true; 316 this.snackbar = true;
311 this.text = error.response.data.message; 317 this.text = error.response.data.message;
312 }); 318 });
313 } 319 }
314 }, 320 },
315 321
316 selectParticularStudent(selected) { 322 selectParticularStudent(selected) {
317 let selectedStudentsArray = []; 323 let selectedStudentsArray = [];
318 selectedStudentsArray.push({ studentId: selected._id }); 324 selectedStudentsArray.push({ studentId: selected._id });
319 325
320 let isExists = false; 326 let isExists = false;
321 for (let item of this.selected) { 327 for (let item of this.selected) {
322 if (item._id === selected._id) { 328 if (item._id === selected._id) {
323 isExists = true; 329 isExists = true;
324 break; 330 break;
325 } 331 }
326 } 332 }
327 333
328 if (selected.enroll === true) { 334 if (selected.enroll === true) {
329 if (!isExists) this.selected.push(selected); 335 if (!isExists) this.selected.push(selected);
330 var payload = { 336 var payload = {
331 courseId: this.getReport.courseId, 337 courseId: this.getReport.courseId,
332 enrollStudents: selectedStudentsArray, 338 enrollStudents: selectedStudentsArray,
333 }; 339 };
334 http() 340 http()
335 .put("/enrollStudents", payload) 341 .put("/enrollStudents", payload)
336 .then((response) => { 342 .then((response) => {
337 this.snackbar = true; 343 this.snackbar = true;
338 this.text = response.data.message; 344 this.text = response.data.message;
339 this.getParticularCourse(); 345 this.getParticularCourse();
340 }) 346 })
341 .catch((error) => { 347 .catch((error) => {
342 this.snackbar = true; 348 this.snackbar = true;
343 this.text = error.response.data.message; 349 this.text = error.response.data.message;
344 }); 350 });
345 } 351 }
346 if ( 352 if (
347 selected.enroll == false && 353 selected.enroll == false &&
348 selected.enroll != undefined && 354 selected.enroll != undefined &&
349 selected.enroll != null 355 selected.enroll != null
350 ) { 356 ) {
351 var payloadDeleteStudents = { 357 var payloadDeleteStudents = {
352 courseId: this.getReport.courseId, 358 courseId: this.getReport.courseId,
353 enrollStudentsId: selected.enrollId, 359 enrollStudentsId: selected.enrollId,
354 }; 360 };
355 http() 361 http()
356 .put("/deleteStudents", payloadDeleteStudents) 362 .put("/deleteStudents", payloadDeleteStudents)
357 .then((response) => { 363 .then((response) => {
358 this.snackbar = true; 364 this.snackbar = true;
359 this.text = response.data.message; 365 this.text = response.data.message;
360 this.getParticularCourse(); 366 this.getParticularCourse();
361 }) 367 })
362 .catch((error) => { 368 .catch((error) => {
363 this.snackbar = true; 369 this.snackbar = true;
364 this.text = error.response.data.message; 370 this.text = error.response.data.message;
365 }); 371 });
366 } 372 }
367 }, 373 },
368 getParticularCourse() { 374 getParticularCourse(message) {
369 this.selected = []; 375 this.selected = [];
370 var payload = { 376 var payload = {
371 courseId: this.getReport.courseId, 377 courseId: this.getReport.courseId,
372 }; 378 };
373 http() 379 http()
374 .get("/getParticularCourse", { 380 .get("/getParticularCourse", {
375 params: payload, 381 params: payload,
376 }) 382 })
377 .then((response) => { 383 .then((response) => {
378 for (let i = 0; i < response.data.data.enrollStudents.length; i++) { 384 for (let i = 0; i < response.data.data.enrollStudents.length; i++) {
379 var studentId = {}; 385 var studentId = {};
380 studentId = response.data.data.enrollStudents[i]; 386 studentId = response.data.data.enrollStudents[i];
381 for (let j = 0; j < this.studentsData.length; j++) { 387 for (let j = 0; j < this.studentsData.length; j++) {
382 if (studentId.studentId == this.studentsData[j]._id) { 388 if (studentId.studentId == this.studentsData[j]._id) {
383 this.studentsData[j].enroll = true; 389 this.studentsData[j].enroll = true;
384 this.studentsData[j].enrollId = studentId._id; 390 this.studentsData[j].enrollId = studentId._id;
385 this.selected.push(this.studentsData[j]); 391 this.selected.push(this.studentsData[j]);
386 break; 392 break;
387 } 393 }
388 } 394 }
389 } 395 }
390 this.snackbar = true; 396 if (message != "noSnackbar") {
391 this.text = response.data.message; 397 this.snackbar = true;
398 this.text = response.data.message;
399 }
392 }) 400 })
393 .catch((error) => { 401 .catch((error) => {
394 this.snackbar = true; 402 this.snackbar = true;
395 this.text = error.response.data.message; 403 this.text = error.response.data.message;
396 }); 404 });
397 }, 405 },
398 changeSort(column) { 406 changeSort(column) {
399 if (this.pagination.sortBy === column) { 407 if (this.pagination.sortBy === column) {
400 this.pagination.descending = !this.pagination.descending; 408 this.pagination.descending = !this.pagination.descending;
401 } else { 409 } else {
402 this.pagination.sortBy = column; 410 this.pagination.sortBy = column;
403 this.pagination.descending = false; 411 this.pagination.descending = false;
404 } 412 }
405 }, 413 },
406 displaySearch() { 414 displaySearch() {
407 this.show = false; 415 this.show = false;
408 this.showSearch = true; 416 this.showSearch = true;
409 }, 417 },
410 closeSearch() { 418 closeSearch() {
411 this.showSearch = false; 419 this.showSearch = false;
412 this.show = true; 420 this.show = true;
413 this.search = ""; 421 this.search = "";
414 }, 422 },
415 }, 423 },
416 mounted() { 424 mounted() {
417 // this.getStudentList(); 425 // this.getStudentList();
418 this.token = this.$store.state.token; 426 this.token = this.$store.state.token;
419 this.role = this.$store.state.role; 427 this.role = this.$store.state.role;
420 this.getAllClass(); 428 this.getAllClass();
421 }, 429 },
422 }; 430 };
423 </script> 431 </script>