fixed validation and loader in time table

Neeraj Sharma
1 parent b4b24ab447
Showing 1 changed file with 51 additions and 35 deletions Show diff stats
src/pages/TimeTable/timeTable.vue
@@ -120,7 +120,7 @@
               <v-spacer></v-spacer>
             </v-toolbar>
             <v-card flat>
-              <v-form>
+              <v-form ref="formAddDay" v-model="validAddDay" lazy-validation>
                 <v-container fluid>
                   <v-flex xs12 sm12 class="py-3">
                     <v-layout>
@@ -133,6 +133,7 @@
                           :items="addOneDay"
                           label="Select Day"
                           v-model="schedule.selectDay"
+                          :rules="selecDayRule"
                         ></v-select>
                       </v-flex>
                     </v-layout>
@@ -427,7 +428,7 @@
               ></v-select>
             </v-layout>
             <v-spacer></v-spacer>
-            <v-btn @click="findTimeTable()" round dark :loading="loading" class="left">Find</v-btn>
+            <v-btn @click="findTimeTable()" round dark :loading="loadingFindData" class="left">Find</v-btn>
           </v-card-actions>
           <v-layout class="hidden-xl-only hidden-lg-only hidden-md-only">
             <v-flex xs4 sm2 class="mt-4 ml-2">
@@ -521,7 +522,6 @@
                       />
                       <span>Add</span>
                     </v-tooltip>
-                    <!-- <v-icon color="black" >add_circle_outline</v-icon> -->
                   </span>
                 </td>
               </tr>
@@ -619,6 +619,7 @@
                           item-text="classNum"
                           item-value="_id"
                           @change="getSections(timeTable.select)"
+                          :rules="classRules"
                           required
                         ></v-select>
                       </v-flex>
@@ -637,6 +638,7 @@
                           v-model="timeTable.selectSection"
                           item-text="name"
                           item-value="_id"
+                          :rules="sectionRules"
                           required
                         ></v-select>
                       </v-flex>
@@ -655,6 +657,7 @@
                           v-model="timeTable.selectTeacher"
                           item-text="name"
                           item-value="_id"
+                          :rules="teacherRules"
                           required
                         ></v-select>
                       </v-flex>
@@ -670,6 +673,7 @@
                           :items="addOneDay"
                           label="Select Day"
                           v-model="timeTable.selectDay"
+                          :rules="dayRules"
                           item-text="name"
                           item-value="_id"
                           required
@@ -718,6 +722,7 @@
                             v-model="timeTable.timeIn"
                             label="Select your timeIn"
                             append-icon="access_time"
+                            :rules="timeInRules"
                           ></v-text-field>
                           <v-time-picker
                             v-model="timeTable.timeIn"
@@ -751,6 +756,7 @@
                             v-model="timeTable.timeOut"
                             label="Select your Time Out"
                             append-icon="access_time"
+                            :rules="timeOutRules"
                           ></v-text-field>
                           <v-time-picker
                             v-model="timeTable.timeOut"
@@ -805,8 +811,10 @@ export default {
     dialogSchedule: false,
     dialog1: false,
     valid: true,
+    validAddDay: true,
     isActive: true,
     newActive: false,
+    loadingFindData: false,
     addclass: [],
     addSection: [],
     addTeachers: [],
@@ -823,6 +831,12 @@ export default {
     timeOutRules: [v => !!v || "Time Out is required"],
     lectureRules: [v => !!v || "Lecture No is required"],
     subjectNameRules: [v => !!v || "Subject Name is required"],
+    classRules: [v => !!v || "Class Name is required"],
+    sectionRules: [v => !!v || "Section Name is required"],
+    sectionRules: [v => !!v || "Section Name is required"],
+    teacherRules: [v => !!v || "Teacher Name is required"],
+    selecDayRule: [v => !!v || "Day is required"],
+    dayRules: [v => !!v || "Day is required"],
     getParticulerLecture: "",
     headers: [
       {
@@ -916,6 +930,7 @@ export default {
   }),
   methods: {
     findTimeTable() {
+      this.loadingFindData = true;
       http()
         .get("/getParticularClassTimeTable", {
           params: {
@@ -925,12 +940,13 @@ export default {
         })
         .then(response => {
           this.desserts = response.data.data;
+          this.loadingFindData = false;
         })
         .catch(error => {
-          if ((this.snackbar = true)) {
-            this.text = error.response.data.message;
-            this.text = error.response.data.statusText;
-          }
+          this.loadingFindData = false;
+          this.snackbar = true;
+          this.text = error.response.data.message;
+          this.text = error.response.data.statusText;
         });
     },
     getSections(_id) {
@@ -953,11 +969,14 @@ export default {
     getTimeTable(item) {
       this.showLoader = true;
       this.getParticulerLecture = item._id;
+      this.getTimeTableDayData();
+    },
+    getTimeTableDayData() {
       var token = this.$store.state.token;
       http()
         .get(
           "/getParticularTimeTable",
-          { params: { timeTableId: item._id } },
+          { params: { timeTableId: this.getParticulerLecture } },
           {
             headers: { Authorization: "Bearer " + token }
           }
@@ -1020,11 +1039,11 @@ export default {
       this.dialog = true;
     },
     updateTimeTable(timeToUpdate, classToUpdate) {
-      console.log(
-        "timeToUpdate, classToUpdate",
-        timeToUpdate._id,
-        classToUpdate.schedule
-      );
+      // console.log(
+      //   "timeToUpdate, classToUpdate",
+      //   timeToUpdate._id,
+      //   classToUpdate.schedule
+      // );
       for (let i = 0; i < classToUpdate.schedule.length; i++) {
         this.updateLecturesId.scheduleId = classToUpdate.schedule[i]._id;
       }
@@ -1135,10 +1154,6 @@ export default {
     },
     close() {
       this.dialog = false;
-      setTimeout(() => {
-        this.editedItem = Object.assign({}, this.defaultItem);
-        this.editedIndex = -1;
-      }, 300);
     },
     close1() {
       this.dialog1 = false;
@@ -1252,26 +1267,27 @@ export default {
       this.dialogSchedule = true;
     },
     submitSchedule() {
-      let scheduleDayData = {
-        timeTableId: this.scheduleDayId,
-        day: this.schedule.selectDay
-      };
-      http()
-        .post("/addSchedule", scheduleDayData)
-        .then(response => {
-          if ((this.snackbar = true)) {
+      if (this.$refs.formAddDay.validate()) {
+        let scheduleDayData = {
+          timeTableId: this.scheduleDayId,
+          day: this.schedule.selectDay
+        };
+        http()
+          .post("/addSchedule", scheduleDayData)
+          .then(response => {
+            this.snackbar = true;
             this.text = "New Schedule Day added successfully";
-          }
-          this.dialogSchedule = true;
-          this.loading = false;
-        })
-        .catch(error => {
-          // console.log(error);
-          if ((this.snackbar = true)) {
+            this.dialogSchedule = false;
+            this.loading = false;
+            this.getTimeTableDayData();
+          })
+          .catch(error => {
+            // console.log(error);
+            this.snackbar = true;
             this.text = error.response.data.message;
-          }
-          this.loading = false;
-        });
+            this.loading = false;
+          });
+      }
     }
   },
   mounted() {
...	...	@@ -120,7 +120,7 @@
120	120	<v-spacer></v-spacer>
121	121	</v-toolbar>
122	122	<v-card flat>
123		- <v-form>
	123	+ <v-form ref="formAddDay" v-model="validAddDay" lazy-validation>
124	124	<v-container fluid>
125	125	<v-flex xs12 sm12 class="py-3">
126	126	<v-layout>
...	...	@@ -133,6 +133,7 @@
133	133	:items="addOneDay"
134	134	label="Select Day"
135	135	v-model="schedule.selectDay"
	136	+ :rules="selecDayRule"
136	137	></v-select>
137	138	</v-flex>
138	139	</v-layout>
...	...	@@ -427,7 +428,7 @@
427	428	></v-select>
428	429	</v-layout>
429	430	<v-spacer></v-spacer>
430		- <v-btn @click="findTimeTable()" round dark :loading="loading" class="left">Find</v-btn>
	431	+ <v-btn @click="findTimeTable()" round dark :loading="loadingFindData" class="left">Find</v-btn>
431	432	</v-card-actions>
432	433	<v-layout class="hidden-xl-only hidden-lg-only hidden-md-only">
433	434	<v-flex xs4 sm2 class="mt-4 ml-2">
...	...	@@ -521,7 +522,6 @@
521	522	/>
522	523	<span>Add</span>
523	524	</v-tooltip>
524		- <!-- <v-icon color="black" >add_circle_outline</v-icon> -->
525	525	</span>
526	526	</td>
527	527	</tr>
...	...	@@ -619,6 +619,7 @@
619	619	item-text="classNum"
620	620	item-value="_id"
621	621	@change="getSections(timeTable.select)"
	622	+ :rules="classRules"
622	623	required
623	624	></v-select>
624	625	</v-flex>
...	...	@@ -637,6 +638,7 @@
637	638	v-model="timeTable.selectSection"
638	639	item-text="name"
639	640	item-value="_id"
	641	+ :rules="sectionRules"
640	642	required
641	643	></v-select>
642	644	</v-flex>
...	...	@@ -655,6 +657,7 @@
655	657	v-model="timeTable.selectTeacher"
656	658	item-text="name"
657	659	item-value="_id"
	660	+ :rules="teacherRules"
658	661	required
659	662	></v-select>
660	663	</v-flex>
...	...	@@ -670,6 +673,7 @@
670	673	:items="addOneDay"
671	674	label="Select Day"
672	675	v-model="timeTable.selectDay"
	676	+ :rules="dayRules"
673	677	item-text="name"
674	678	item-value="_id"
675	679	required
...	...	@@ -718,6 +722,7 @@
718	722	v-model="timeTable.timeIn"
719	723	label="Select your timeIn"
720	724	append-icon="access_time"
	725	+ :rules="timeInRules"
721	726	></v-text-field>
722	727	<v-time-picker
723	728	v-model="timeTable.timeIn"
...	...	@@ -751,6 +756,7 @@
751	756	v-model="timeTable.timeOut"
752	757	label="Select your Time Out"
753	758	append-icon="access_time"
	759	+ :rules="timeOutRules"
754	760	></v-text-field>
755	761	<v-time-picker
756	762	v-model="timeTable.timeOut"
...	...	@@ -805,8 +811,10 @@ export default {
805	811	dialogSchedule: false,
806	812	dialog1: false,
807	813	valid: true,
	814	+ validAddDay: true,
808	815	isActive: true,
809	816	newActive: false,
	817	+ loadingFindData: false,
810	818	addclass: [],
811	819	addSection: [],
812	820	addTeachers: [],
...	...	@@ -823,6 +831,12 @@ export default {
823	831	timeOutRules: [v => !!v \|\| "Time Out is required"],
824	832	lectureRules: [v => !!v \|\| "Lecture No is required"],
825	833	subjectNameRules: [v => !!v \|\| "Subject Name is required"],
	834	+ classRules: [v => !!v \|\| "Class Name is required"],
	835	+ sectionRules: [v => !!v \|\| "Section Name is required"],
	836	+ sectionRules: [v => !!v \|\| "Section Name is required"],
	837	+ teacherRules: [v => !!v \|\| "Teacher Name is required"],
	838	+ selecDayRule: [v => !!v \|\| "Day is required"],
	839	+ dayRules: [v => !!v \|\| "Day is required"],
826	840	getParticulerLecture: "",
827	841	headers: [
828	842	{
...	...	@@ -916,6 +930,7 @@ export default {
916	930	}),
917	931	methods: {
918	932	findTimeTable() {
	933	+ this.loadingFindData = true;
919	934	http()
920	935	.get("/getParticularClassTimeTable", {
921	936	params: {
...	...	@@ -925,12 +940,13 @@ export default {
925	940	})
926	941	.then(response => {
927	942	this.desserts = response.data.data;
	943	+ this.loadingFindData = false;
928	944	})
929	945	.catch(error => {
930		- if ((this.snackbar = true)) {
931		- this.text = error.response.data.message;
932		- this.text = error.response.data.statusText;
933		- }
	946	+ this.loadingFindData = false;
	947	+ this.snackbar = true;
	948	+ this.text = error.response.data.message;
	949	+ this.text = error.response.data.statusText;
934	950	});
935	951	},
936	952	getSections(_id) {
...	...	@@ -953,11 +969,14 @@ export default {
953	969	getTimeTable(item) {
954	970	this.showLoader = true;
955	971	this.getParticulerLecture = item._id;
	972	+ this.getTimeTableDayData();
	973	+ },
	974	+ getTimeTableDayData() {
956	975	var token = this.$store.state.token;
957	976	http()
958	977	.get(
959	978	"/getParticularTimeTable",
960		- { params: { timeTableId: item._id } },
	979	+ { params: { timeTableId: this.getParticulerLecture } },
961	980	{
962	981	headers: { Authorization: "Bearer " + token }
963	982	}
...	...	@@ -1020,11 +1039,11 @@ export default {
1020	1039	this.dialog = true;
1021	1040	},
1022	1041	updateTimeTable(timeToUpdate, classToUpdate) {
1023		- console.log(
1024		- "timeToUpdate, classToUpdate",
1025		- timeToUpdate._id,
1026		- classToUpdate.schedule
1027		- );
	1042	+ // console.log(
	1043	+ // "timeToUpdate, classToUpdate",
	1044	+ // timeToUpdate._id,
	1045	+ // classToUpdate.schedule
	1046	+ // );
1028	1047	for (let i = 0; i < classToUpdate.schedule.length; i++) {
1029	1048	this.updateLecturesId.scheduleId = classToUpdate.schedule[i]._id;
1030	1049	}
...	...	@@ -1135,10 +1154,6 @@ export default {
1135	1154	},
1136	1155	close() {
1137	1156	this.dialog = false;
1138		- setTimeout(() => {
1139		- this.editedItem = Object.assign({}, this.defaultItem);
1140		- this.editedIndex = -1;
1141		- }, 300);
1142	1157	},
1143	1158	close1() {
1144	1159	this.dialog1 = false;
...	...	@@ -1252,26 +1267,27 @@ export default {
1252	1267	this.dialogSchedule = true;
1253	1268	},
1254	1269	submitSchedule() {
1255		- let scheduleDayData = {
1256		- timeTableId: this.scheduleDayId,
1257		- day: this.schedule.selectDay
1258		- };
1259		- http()
1260		- .post("/addSchedule", scheduleDayData)
1261		- .then(response => {
1262		- if ((this.snackbar = true)) {
	1270	+ if (this.$refs.formAddDay.validate()) {
	1271	+ let scheduleDayData = {
	1272	+ timeTableId: this.scheduleDayId,
	1273	+ day: this.schedule.selectDay
	1274	+ };
	1275	+ http()
	1276	+ .post("/addSchedule", scheduleDayData)
	1277	+ .then(response => {
	1278	+ this.snackbar = true;
1263	1279	this.text = "New Schedule Day added successfully";
1264		- }
1265		- this.dialogSchedule = true;
1266		- this.loading = false;
1267		- })
1268		- .catch(error => {
1269		- // console.log(error);
1270		- if ((this.snackbar = true)) {
	1280	+ this.dialogSchedule = false;
	1281	+ this.loading = false;
	1282	+ this.getTimeTableDayData();
	1283	+ })
	1284	+ .catch(error => {
	1285	+ // console.log(error);
	1286	+ this.snackbar = true;
1271	1287	this.text = error.response.data.message;
1272		- }
1273		- this.loading = false;
1274		- });
	1288	+ this.loading = false;
	1289	+ });
	1290	+ }
1275	1291	}
1276	1292	},
1277	1293	mounted() {
...	...