Commit afc98f0286e450017d45509a4a6eee877daae7c0
1 parent
dc4d6088aa
Exists in
master
and in
3 other branches
implement class validation of edit subaject
Showing
1 changed file
with
81 additions
and
76 deletions
Show diff stats
src/pages/Subjects/subjects.vue
... | ... | @@ -39,44 +39,46 @@ |
39 | 39 | </v-toolbar> |
40 | 40 | <v-card flat> |
41 | 41 | <v-container fluid> |
42 | - <v-layout> | |
43 | - <v-flex xs4 class="pt-4 subheading"> | |
44 | - <label class="right">Class:</label> | |
42 | + <v-form ref="formEditSubject" v-model="validEditSubject" lazy-validation> | |
43 | + <v-layout> | |
44 | + <v-flex xs4 class="pt-4 subheading"> | |
45 | + <label class="right">Class:</label> | |
46 | + </v-flex> | |
47 | + <v-flex xs6 class="ml-3"> | |
48 | + <v-select | |
49 | + :items="classList" | |
50 | + label="Select Class" | |
51 | + v-model="addSubject.selectName" | |
52 | + item-text="classNum" | |
53 | + item-value="_id" | |
54 | + name="Select Class" | |
55 | + :rules="nameEditSubjectRules" | |
56 | + required | |
57 | + ></v-select> | |
58 | + </v-flex> | |
59 | + </v-layout> | |
60 | + <v-layout> | |
61 | + <v-flex xs4 class="pt-4 subheading"> | |
62 | + <label class="right">Subject:</label> | |
63 | + </v-flex> | |
64 | + <v-flex xs6 class="ml-3"> | |
65 | + <v-text-field | |
66 | + placeholder="fill your Subject" | |
67 | + v-model="editedItem.subjectName" | |
68 | + type="text" | |
69 | + name="email" | |
70 | + required | |
71 | + ></v-text-field> | |
72 | + </v-flex> | |
73 | + </v-layout> | |
74 | + <v-flex xs12 sm9 offset-sm2> | |
75 | + <v-card-actions> | |
76 | + <v-btn round dark @click.native="close">Cancel</v-btn> | |
77 | + <v-spacer></v-spacer> | |
78 | + <v-btn round dark @click="save" :loading="editLoading">Save</v-btn> | |
79 | + </v-card-actions> | |
45 | 80 | </v-flex> |
46 | - <v-flex xs6 class="ml-3"> | |
47 | - <v-select | |
48 | - :items="classList" | |
49 | - label="Select Class" | |
50 | - v-model="addSubject.selectName" | |
51 | - item-text="classNum" | |
52 | - item-value="_id" | |
53 | - name="Select Class" | |
54 | - :rules="nameRules" | |
55 | - required | |
56 | - ></v-select> | |
57 | - </v-flex> | |
58 | - </v-layout> | |
59 | - <v-layout> | |
60 | - <v-flex xs4 class="pt-4 subheading"> | |
61 | - <label class="right">Subject:</label> | |
62 | - </v-flex> | |
63 | - <v-flex xs6 class="ml-3"> | |
64 | - <v-text-field | |
65 | - placeholder="fill your Subject" | |
66 | - v-model="editedItem.subjectName" | |
67 | - type="text" | |
68 | - name="email" | |
69 | - required | |
70 | - ></v-text-field> | |
71 | - </v-flex> | |
72 | - </v-layout> | |
73 | - <v-flex xs12 sm9 offset-sm2> | |
74 | - <v-card-actions> | |
75 | - <v-btn round dark @click.native="close">Cancel</v-btn> | |
76 | - <v-spacer></v-spacer> | |
77 | - <v-btn round dark @click="save">Save</v-btn> | |
78 | - </v-card-actions> | |
79 | - </v-flex> | |
81 | + </v-form> | |
80 | 82 | </v-container> |
81 | 83 | </v-card> |
82 | 84 | </v-flex> |
... | ... | @@ -291,11 +293,13 @@ export default { |
291 | 293 | color: "", |
292 | 294 | showLoader: false, |
293 | 295 | loading: false, |
296 | + editLoading: false, | |
294 | 297 | date: null, |
295 | 298 | search: "", |
296 | 299 | dialog: false, |
297 | 300 | dialog1: false, |
298 | 301 | valid: true, |
302 | + validEditSubject: true, | |
299 | 303 | isActive: true, |
300 | 304 | newActive: false, |
301 | 305 | gender: ["Male", "Female"], |
... | ... | @@ -304,6 +308,7 @@ export default { |
304 | 308 | }, |
305 | 309 | token: "", |
306 | 310 | nameRules: [v => !!v || " Class Name is required"], |
311 | + nameEditSubjectRules: [v => !!v || " Class Name is required"], | |
307 | 312 | subjectRules: [v => !!v || " Subject Name is required"], |
308 | 313 | headers: [ |
309 | 314 | { |
... | ... | @@ -336,6 +341,7 @@ export default { |
336 | 341 | }, |
337 | 342 | |
338 | 343 | editItem(item) { |
344 | + console.log("item", item); | |
339 | 345 | this.editedItem = Object.assign({}, item); |
340 | 346 | this.dialog = true; |
341 | 347 | }, |
... | ... | @@ -379,10 +385,6 @@ export default { |
379 | 385 | }, |
380 | 386 | close() { |
381 | 387 | this.dialog = false; |
382 | - setTimeout(() => { | |
383 | - this.editedItem = Object.assign({}, this.defaultItem); | |
384 | - this.editedIndex = -1; | |
385 | - }, 300); | |
386 | 388 | }, |
387 | 389 | close1() { |
388 | 390 | this.dialog1 = false; |
... | ... | @@ -410,42 +412,45 @@ export default { |
410 | 412 | this.$refs.form.reset(); |
411 | 413 | }, |
412 | 414 | save() { |
413 | - let editSubject = { | |
414 | - classId: this.addSubject.selectName, | |
415 | - subjectId: this.editedItem._id, | |
416 | - subjectName: this.editedItem.subjectName | |
417 | - }; | |
418 | - http() | |
419 | - .put("/updateSubject", editSubject) | |
420 | - .then(response => { | |
421 | - // console.log("editEvent",editEvent); | |
422 | - if ((this.snackbar = true)) { | |
415 | + if (this.$refs.formEditSubject.validate()) { | |
416 | + let editSubject = { | |
417 | + classId: this.addSubject.selectName, | |
418 | + subjectId: this.editedItem._id, | |
419 | + subjectName: this.editedItem.subjectName | |
420 | + }; | |
421 | + this.editLoading = true; | |
422 | + http() | |
423 | + .put("/updateSubject", editSubject) | |
424 | + .then(response => { | |
425 | + this.snackbar = true; | |
423 | 426 | this.text = "Successfully Edit Existing Subject"; |
424 | - } | |
425 | - // this.getClassSubject(); | |
426 | - http() | |
427 | - .get( | |
428 | - "/getParticularClass", | |
429 | - { params: { classId: this.selectClassId } }, | |
430 | - { | |
431 | - headers: { Authorization: "Bearer " + this.token } | |
432 | - } | |
433 | - ) | |
434 | - .then(response => { | |
435 | - this.subjectList = response.data.data; | |
436 | - this.getClassSubject(); | |
437 | - this.snackbar = true; | |
438 | - this.color = "green"; | |
439 | - this.text = response.data.message; | |
440 | - }) | |
441 | - .catch(err => { | |
442 | - console.log("err====>", err); | |
443 | - }); | |
444 | - }) | |
445 | - .catch(error => { | |
446 | - // console.log(error); | |
447 | - }); | |
448 | - this.close(); | |
427 | + this.editLoading = false; | |
428 | + http() | |
429 | + .get( | |
430 | + "/getParticularClass", | |
431 | + { params: { classId: this.selectClassId } }, | |
432 | + { | |
433 | + headers: { Authorization: "Bearer " + this.token } | |
434 | + } | |
435 | + ) | |
436 | + .then(response => { | |
437 | + this.subjectList = response.data.data; | |
438 | + this.getClassSubject(); | |
439 | + this.snackbar = true; | |
440 | + this.color = "green"; | |
441 | + this.text = response.data.message; | |
442 | + this.close(); | |
443 | + }) | |
444 | + .catch(err => { | |
445 | + console.log("err====>", err); | |
446 | + }); | |
447 | + }) | |
448 | + .catch(error => { | |
449 | + this.editLoading = false; | |
450 | + | |
451 | + // console.log(error); | |
452 | + }); | |
453 | + } | |
449 | 454 | }, |
450 | 455 | getClassSubject() { |
451 | 456 | this.selectClassId = this.selectClassId; | ... | ... |