Conditionally show drop-down menu in meeting event page, Solved responsive issue…

… on dashboard, Resolved multi selecter issue,Build the inner logic to enroll or withdraw and Refactor exixting code in enroll student page

Conditionally show drop-down menu in meeting event page, Solved responsive issue…
… on dashboard, Resolved multi selecter issue,Build the inner logic to enroll or withdraw and Refactor exixting code in enroll student page
Shikha Mishra
1 parent 1702e00af4
Showing 3 changed files with 86 additions and 46 deletions Show diff stats
src/pages/Course/enrollStudents.vue
src/pages/Dashboard/dashboard.vue
src/pages/meetingEvent/meetingEvent.vue
@@ -50,7 +50,7 @@
       :search="search"
       select-all
       v-model="selected"
-      item-key="name"
+      item-key="_id"
     >
       <template slot="items" slot-scope="props">
         <tr class="tr" :active="props.selected" @click="props.selected = !props.selected">
@@ -261,35 +261,73 @@ export default {
       }
     },
     toggleAll() {
-      if (this.selected.length) this.selected = [];
-      else this.selected = this.studentsData.slice();
-      let selectedStudentsArray = [];
-      for (let i = 0; i < this.selected.length; i++) {
-        selectedStudentsArray.push({ studentId: this.selected[i]._id });
+      let withdraw = false;
+      if (this.selected.length === this.studentsData.length) withdraw = true;
+
+      if (withdraw) {
+        var payload = {
+          courseId: this.getReport.courseId,
+          enrollStudents: []
+        };
+        http()
+          .put("/enrollStudents", payload)
+          .then(response => {
+            this.snackbar = true;
+            this.text = response.data.message;
+            this.selected = [];
+            for (let i = 0; i < this.studentsData.length; i++) {
+              this.studentsData[i].enroll = false;
+            }
+            this.getParticularCourse();
+          })
+          .catch(error => {
+            this.snackbar = true;
+            this.text = error.response.data.message;
+          });
+      } else {
+        let selectedStudentsArray = [];
+        for (let item of this.studentsData) {
+          if(item.enroll === false || !item.enroll) {
+            selectedStudentsArray.push({ studentId: item._id });
+          }
+        }
+
+        var payload = {
+          courseId: this.getReport.courseId,
+          enrollStudents: selectedStudentsArray
+        };
+        http()
+          .put("/enrollStudents", payload)
+          .then(response => {
+            this.snackbar = true;
+            this.text = response.data.message;
+            for (let i = 0; i < this.studentsData.length; i++) {
+              this.studentsData[i].enroll = true;
+            }
+            this.getParticularCourse();
+          })
+          .catch(error => {
+            this.snackbar = true;
+            this.text = error.response.data.message;
+          });
       }
-      // console.log("selectedStudentsArray", selectedStudentsArray);
-      var payload = {
-        courseId: this.getReport.courseId,
-        enrollStudents: selectedStudentsArray
-      };
-      http()
-        .put("/enrollStudents", payload)
-        .then(response => {
-          this.snackbar = true;
-          this.text = response.data.message;
-          this.getParticularCourse();
-        })
-        .catch(error => {
-          this.snackbar = true;
-          this.text = error.response.data.message;
-        });
     },
+
     selectParticularStudent(selected) {
       console.log("selected", selected);
       let selectedStudentsArray = [];
       selectedStudentsArray.push({ studentId: selected._id });
-      // console.log("selected.enroll", selected.enroll);
+
+      let isExists = false;
+      for(let item of this.selected) {
+        if(item._id === selected._id) {
+          isExists = true;
+          break;
+        }
+      }
+
       if (selected.enroll === true) {
+        if (!isExists) this.selected.push(selected);
         var payload = {
           courseId: this.getReport.courseId,
           enrollStudents: selectedStudentsArray
@@ -329,6 +367,7 @@ export default {
       }
     },
     getParticularCourse() {
+      this.selected = [];
       var payload = {
         courseId: this.getReport.courseId
       };
@@ -342,9 +381,10 @@ export default {
             studentId = response.data.data.enrollStudents[i];
             for (let j = 0; j < this.studentsData.length; j++) {
               if (studentId.studentId == this.studentsData[j]._id) {
-                // console.log("studentId._id", studentId._id);
                 this.studentsData[j].enroll = true;
                 this.studentsData[j].enrollId = studentId._id;
+                this.selected.push(this.studentsData[j]);
+                break;
               }
             }
           }
@@ -259,7 +259,7 @@
                     <br />
                     <span class="body-2">{{ props.item.title}}</span>
                   </td>
-                  <td class="noticeDecritpion grey--text mt-2">{{ props.item.description}}</td>
+                  <td class="grey--text mt-2">{{ props.item.description}}</td>
  
                   <td class="text-xs-center">
                     <span>
@@ -307,7 +307,7 @@
                         <br />
                         <span class="body-2">{{ props.item.title}}</span>
                       </td>
-                      <td class="noticeDecritpion grey--text mt-2">{{ props.item.description}}</td>
+                      <td class="grey--text mt-2">{{ props.item.description}}</td>
  
                       <td class="text-xs-center">
                         <span>
@@ -843,11 +843,11 @@ export default {
         .catch(error => {
           // console.log("err====>", err);
           this.showLoader = false;
-          // if (error.response.status === 401) {
-          //   this.$router.replace({ path: "/" });
-          //   this.$store.dispatch("setToken", null);
-          //   this.$store.dispatch("Id", null);
-          // }
+          if (error.response.status === 401) {
+            this.$router.replace({ path: "/" });
+            this.$store.dispatch("setToken", null);
+            this.$store.dispatch("Id", null);
+          }
         });
     },
     getParents() {
@@ -1091,12 +1091,8 @@ export default {
   async created() {
     if (this.$store.state.role === "ADMIN") {
       this.token = this.$store.state.token;
-      await this.getFeesAndCollectionsData();
-      await this.getExpensesData();
     } else if (this.$store.state.schoolRole === "SUPERADMIN") {
       this.token = this.$store.state.schoolToken;
-      await this.getFeesAndCollectionsData();
-      await this.getExpensesData();
     } else if (this.$store.state.role === "TEACHER") {
       this.token = this.$store.state.token;
     } else if (this.$store.state.role === "ACCOUNTANT") {
@@ -1116,8 +1112,8 @@ export default {
     await this.getClasses();
     await this.getNoticeData();
     await this.getUserData();
-    
-    
+    await this.getFeesAndCollectionsData();
+    await this.getExpensesData();
  
     /* get Latest events list for student login*/
     if (this.$store.state.role == "PARENT") {
@@ -165,6 +165,16 @@
                     <h5 class="my-1">{{ editedItem.typeOfEvent }}</h5>
                   </v-flex>
                 </v-layout>
+                <v-layout v-if="editedItem.courseId">
+                  <v-flex xs4 sm6>
+                    <h5 class="right my-1">
+                      <b>Course Name:</b>
+                    </h5>
+                  </v-flex>
+                  <v-flex sm6 xs8>
+                    <h5 class="my-1">{{ editedItem.courseId.courseName }}</h5>
+                  </v-flex>
+                </v-layout>
                 <v-layout v-if="editedItem.classId">
                   <v-flex xs4 sm6>
                     <h5 class="right my-1">
@@ -389,12 +399,12 @@
                     label="Select Type Of Event"
                     v-model="meetEvent.typeOfEvent"
                     :rules="typeOfEventRules"
-                    @change="getSelectOption(meetEvent.typeOfEvent)"
+                    
                   ></v-select>
                 </v-flex>
               </v-layout>
             </v-flex>
-            <v-flex xs12 v-show="classShow">
+            <v-flex xs12 v-show="meetEvent.typeOfEvent">
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Class:</label>
@@ -411,7 +421,7 @@
                 </v-flex>
               </v-layout>
             </v-flex>
-            <v-flex xs12 v-show="courseShow">
+            <v-flex xs12 v-show="meetEvent.typeOfEvent === 'Course'">
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Courses:</label>
@@ -546,8 +556,6 @@ export default {
     editedItem: {},
     menu1: false,
     menu2: false,
-    classShow: false,
-    courseShow: false,
     loginId: ""
   }),
   methods: {
@@ -615,10 +623,6 @@ export default {
           this.loading = false;
         });
     },
-    getSelectOption(type) {
-        this.classShow = true;
-        this.courseShow = true;
-    },
     getAllClass() {
       http()
         .get("/getClassesList")
...	...	@@ -50,7 +50,7 @@
50	50	:search="search"
51	51	select-all
52	52	v-model="selected"
53		- item-key="name"
	53	+ item-key="_id"
54	54	>
55	55	<template slot="items" slot-scope="props">
56	56	<tr class="tr" :active="props.selected" @click="props.selected = !props.selected">
...	...	@@ -261,35 +261,73 @@ export default {
261	261	}
262	262	},
263	263	toggleAll() {
264		- if (this.selected.length) this.selected = [];
265		- else this.selected = this.studentsData.slice();
266		- let selectedStudentsArray = [];
267		- for (let i = 0; i < this.selected.length; i++) {
268		- selectedStudentsArray.push({ studentId: this.selected[i]._id });
	264	+ let withdraw = false;
	265	+ if (this.selected.length === this.studentsData.length) withdraw = true;
	266	+
	267	+ if (withdraw) {
	268	+ var payload = {
	269	+ courseId: this.getReport.courseId,
	270	+ enrollStudents: []
	271	+ };
	272	+ http()
	273	+ .put("/enrollStudents", payload)
	274	+ .then(response => {
	275	+ this.snackbar = true;
	276	+ this.text = response.data.message;
	277	+ this.selected = [];
	278	+ for (let i = 0; i < this.studentsData.length; i++) {
	279	+ this.studentsData[i].enroll = false;
	280	+ }
	281	+ this.getParticularCourse();
	282	+ })
	283	+ .catch(error => {
	284	+ this.snackbar = true;
	285	+ this.text = error.response.data.message;
	286	+ });
	287	+ } else {
	288	+ let selectedStudentsArray = [];
	289	+ for (let item of this.studentsData) {
	290	+ if(item.enroll === false \|\| !item.enroll) {
	291	+ selectedStudentsArray.push({ studentId: item._id });
	292	+ }
	293	+ }
	294	+
	295	+ var payload = {
	296	+ courseId: this.getReport.courseId,
	297	+ enrollStudents: selectedStudentsArray
	298	+ };
	299	+ http()
	300	+ .put("/enrollStudents", payload)
	301	+ .then(response => {
	302	+ this.snackbar = true;
	303	+ this.text = response.data.message;
	304	+ for (let i = 0; i < this.studentsData.length; i++) {
	305	+ this.studentsData[i].enroll = true;
	306	+ }
	307	+ this.getParticularCourse();
	308	+ })
	309	+ .catch(error => {
	310	+ this.snackbar = true;
	311	+ this.text = error.response.data.message;
	312	+ });
269	313	}
270		- // console.log("selectedStudentsArray", selectedStudentsArray);
271		- var payload = {
272		- courseId: this.getReport.courseId,
273		- enrollStudents: selectedStudentsArray
274		- };
275		- http()
276		- .put("/enrollStudents", payload)
277		- .then(response => {
278		- this.snackbar = true;
279		- this.text = response.data.message;
280		- this.getParticularCourse();
281		- })
282		- .catch(error => {
283		- this.snackbar = true;
284		- this.text = error.response.data.message;
285		- });
286	314	},
	315	+
287	316	selectParticularStudent(selected) {
288	317	console.log("selected", selected);
289	318	let selectedStudentsArray = [];
290	319	selectedStudentsArray.push({ studentId: selected._id });
291		- // console.log("selected.enroll", selected.enroll);
	320	+
	321	+ let isExists = false;
	322	+ for(let item of this.selected) {
	323	+ if(item._id === selected._id) {
	324	+ isExists = true;
	325	+ break;
	326	+ }
	327	+ }
	328	+
292	329	if (selected.enroll === true) {
	330	+ if (!isExists) this.selected.push(selected);
293	331	var payload = {
294	332	courseId: this.getReport.courseId,
295	333	enrollStudents: selectedStudentsArray
...	...	@@ -329,6 +367,7 @@ export default {
329	367	}
330	368	},
331	369	getParticularCourse() {
	370	+ this.selected = [];
332	371	var payload = {
333	372	courseId: this.getReport.courseId
334	373	};
...	...	@@ -342,9 +381,10 @@ export default {
342	381	studentId = response.data.data.enrollStudents[i];
343	382	for (let j = 0; j < this.studentsData.length; j++) {
344	383	if (studentId.studentId == this.studentsData[j]._id) {
345		- // console.log("studentId._id", studentId._id);
346	384	this.studentsData[j].enroll = true;
347	385	this.studentsData[j].enrollId = studentId._id;
	386	+ this.selected.push(this.studentsData[j]);
	387	+ break;
348	388	}
349	389	}
350	390	}
...	...
...	...	@@ -259,7 +259,7 @@
259	259	<br />
260	260	<span class="body-2">{{ props.item.title}}</span>
261	261	</td>
262		- <td class="noticeDecritpion grey--text mt-2">{{ props.item.description}}</td>
	262	+ <td class="grey--text mt-2">{{ props.item.description}}</td>
263	263
264	264	<td class="text-xs-center">
265	265	<span>
...	...	@@ -307,7 +307,7 @@
307	307	<br />
308	308	<span class="body-2">{{ props.item.title}}</span>
309	309	</td>
310		- <td class="noticeDecritpion grey--text mt-2">{{ props.item.description}}</td>
	310	+ <td class="grey--text mt-2">{{ props.item.description}}</td>
311	311
312	312	<td class="text-xs-center">
313	313	<span>
...	...	@@ -843,11 +843,11 @@ export default {
843	843	.catch(error => {
844	844	// console.log("err====>", err);
845	845	this.showLoader = false;
846		- // if (error.response.status === 401) {
847		- // this.$router.replace({ path: "/" });
848		- // this.$store.dispatch("setToken", null);
849		- // this.$store.dispatch("Id", null);
850		- // }
	846	+ if (error.response.status === 401) {
	847	+ this.$router.replace({ path: "/" });
	848	+ this.$store.dispatch("setToken", null);
	849	+ this.$store.dispatch("Id", null);
	850	+ }
851	851	});
852	852	},
853	853	getParents() {
...	...	@@ -1091,12 +1091,8 @@ export default {
1091	1091	async created() {
1092	1092	if (this.$store.state.role === "ADMIN") {
1093	1093	this.token = this.$store.state.token;
1094		- await this.getFeesAndCollectionsData();
1095		- await this.getExpensesData();
1096	1094	} else if (this.$store.state.schoolRole === "SUPERADMIN") {
1097	1095	this.token = this.$store.state.schoolToken;
1098		- await this.getFeesAndCollectionsData();
1099		- await this.getExpensesData();
1100	1096	} else if (this.$store.state.role === "TEACHER") {
1101	1097	this.token = this.$store.state.token;
1102	1098	} else if (this.$store.state.role === "ACCOUNTANT") {
...	...	@@ -1116,8 +1112,8 @@ export default {
1116	1112	await this.getClasses();
1117	1113	await this.getNoticeData();
1118	1114	await this.getUserData();
1119		-
1120		-
	1115	+ await this.getFeesAndCollectionsData();
	1116	+ await this.getExpensesData();
1121	1117
1122	1118	/* get Latest events list for student login*/
1123	1119	if (this.$store.state.role == "PARENT") {
...	...
...	...	@@ -165,6 +165,16 @@
165	165	<h5 class="my-1">{{ editedItem.typeOfEvent }}</h5>
166	166	</v-flex>
167	167	</v-layout>
	168	+ <v-layout v-if="editedItem.courseId">
	169	+ <v-flex xs4 sm6>
	170	+ <h5 class="right my-1">
	171	+ <b>Course Name:</b>
	172	+ </h5>
	173	+ </v-flex>
	174	+ <v-flex sm6 xs8>
	175	+ <h5 class="my-1">{{ editedItem.courseId.courseName }}</h5>
	176	+ </v-flex>
	177	+ </v-layout>
168	178	<v-layout v-if="editedItem.classId">
169	179	<v-flex xs4 sm6>
170	180	<h5 class="right my-1">
...	...	@@ -389,12 +399,12 @@
389	399	label="Select Type Of Event"
390	400	v-model="meetEvent.typeOfEvent"
391	401	:rules="typeOfEventRules"
392		- @change="getSelectOption(meetEvent.typeOfEvent)"
	402	+
393	403	></v-select>
394	404	</v-flex>
395	405	</v-layout>
396	406	</v-flex>
397		- <v-flex xs12 v-show="classShow">
	407	+ <v-flex xs12 v-show="meetEvent.typeOfEvent">
398	408	<v-layout>
399	409	<v-flex xs4 class="pt-4 subheading">
400	410	<label class="right">Class:</label>
...	...	@@ -411,7 +421,7 @@
411	421	</v-flex>
412	422	</v-layout>
413	423	</v-flex>
414		- <v-flex xs12 v-show="courseShow">
	424	+ <v-flex xs12 v-show="meetEvent.typeOfEvent === 'Course'">
415	425	<v-layout>
416	426	<v-flex xs4 class="pt-4 subheading">
417	427	<label class="right">Courses:</label>
...	...	@@ -546,8 +556,6 @@ export default {
546	556	editedItem: {},
547	557	menu1: false,
548	558	menu2: false,
549		- classShow: false,
550		- courseShow: false,
551	559	loginId: ""
552	560	}),
553	561	methods: {
...	...	@@ -615,10 +623,6 @@ export default {
615	623	this.loading = false;
616	624	});
617	625	},
618		- getSelectOption(type) {
619		- this.classShow = true;
620		- this.courseShow = true;
621		- },
622	626	getAllClass() {
623	627	http()
624	628	.get("/getClassesList")
...	...