viithiisys / School-Management-dashboard

Browse Code »

Commit 7efe0276247c8d678a06d115b6a419d4dab0d399

Authored by Amber Dev 2020-08-12 08:01:03 -0400

1 parent 9037797eef

Exists in master and in 2 other branches

made forms reset

Showing 9 changed files with 17 additions and 15 deletions Show diff stats

src/pages/Attendence/teacherAttendence.vue

Diff comments View file @7efe027

 <template>
   <v-container fluid class="body-color">
     <!-- ****** ATTENDENCE TACHERS TABLE ****** -->
     <v-toolbar color="transparent" flat>
       <v-btn
         fab
         dark
         class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
         small
         @click="addTeacherAttendenceDialog = true"
       >
         <v-icon dark>add</v-icon>
       </v-btn>
       <v-btn
         v-if="role != 'TEACHER' "
         round
         class="open-dialog-button hidden-sm-only hidden-xs-only"
         dark
         @click="addTeacherAttendenceDialog = true"
       >
         <v-icon class="white--text pr-1" size="20">add</v-icon>Add Teacher Attendence
       </v-btn>
       <v-spacer></v-spacer>
       <v-card-title class="body-1" v-show="show">
         <v-btn icon large flat @click="displaySearch">
           <v-avatar size="27">
             <img src="/static/icon/search.png" alt="icon" />
           </v-avatar>
         </v-btn>
       </v-card-title>
       <v-flex xs8 sm8 md3 lg2 v-if="showSearch">
         <v-layout>
           <v-text-field autofocus v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>
           <v-icon @click="closeSearch" color="error">close</v-icon>
         </v-layout>
       </v-flex>
     </v-toolbar>
     <v-data-table
       :headers="headers"
       :items="teachersData"
       :pagination.sync="pagination"
       :search="search"
     >
       <template slot="items" slot-scope="props">
         <tr class="tr">
           <td class="td td-row">{{ props.index + 1}}</td>
           <td class="text-xs-center td td-row">
             <v-avatar size="40">
               <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
               <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
             </v-avatar>
           </td>
           <td class="td td-row text-xs-center">{{ props.item.name}}</td>
           <td class="td td-row text-xs-center">{{ props.item.email }}</td>
           <td class="td td-row text-xs-center">{{ props.item.mobileNo }}</td>
           <td class="text-xs-center td td-row">
             <router-link
               :to="{ name:'View Teacher Attendence',params: { teacherId:props.item._id } }"
             >
               <span>
                 <v-tooltip top>
                   <img
                     slot="activator"
                     style="cursor:pointer; width:25px; height:25px; "
                     src="/static/icon/view.png"
                   />
                   <span>View</span>
                 </v-tooltip>
               </span>
             </router-link>
           </td>
         </tr>
       </template>
       <v-alert
         slot="no-results"
         :value="true"
         color="error"
         icon="warning"
       >Your search for "{{ search }}" found no results.</v-alert>
     </v-data-table>
     <!-- ****** Add Teachers Attendece****** -->
     <v-dialog v-model="addTeacherAttendenceDialog" width="1600">
       <v-card flat class="pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Teacher Attendence</label>
-            <v-icon size="24" class="right" @click="addTeacherAttendenceDialog = false">cancel</v-icon>
+            <v-icon size="24" class="right" @click="$refs.form.reset();addTeacherAttendenceDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-flex xs12 class="mt-4">
           <v-form ref="form" v-model="valid" lazy-validation>
             <v-layout wrap>
               <v-flex xs12 class="px-4">
                 <v-layout>
                   <v-flex xs6 sm6 lg3 md4>
                     <v-menu
                       ref="menu"
                       :close-on-content-click="false"
                       v-model="menu"
                       :nudge-right="40"
                       lazy
                       transition="scale-transition"
                       offset-y
                       full-width
                       min-width="290px"
                     >
                       <v-text-field
                         slot="activator"
                         v-model="date"
                         label="Select Date"
                         append-icon="event"
                         :rules="dataValid"
                         readonly
                       ></v-text-field>
                       <v-date-picker
                         ref="picker"
                         v-model="date"
                         :max="new Date().toISOString().substr(0, 10)"
                         min="1950-01-01"
                         @change="save"
                       ></v-date-picker>
                     </v-menu>
                   </v-flex>
                   <v-flex xs6 sm6 lg9 md8>
                     <v-btn class="right mt-3 add-button" dark round @click="showTable">Attendence</v-btn>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
           </v-form>
         </v-flex>
         <v-flex xs12 v-show="attendeceTable" class>
           <v-data-table
             :headers="headers"
             :items="teachersData"
             :pagination.sync="pagination"
             :search="search"
           >
             <template slot="items" slot-scope="props">
               <tr class="tr">
                 <td class="td td-row">{{ props.index + 1}}</td>
                 <td class="text-xs-center td td-row">
                   <v-avatar size="40">
                     <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
                     <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
                   </v-avatar>
                 </td>
                 <td class="text-xs-center td td-row">{{ props.item.name}}</td>
                 <td class="text-xs-center td td-row">{{ props.item.email }}</td>
                 <td class="text-xs-center td td-row">{{ props.item.mobileNo }}</td>
                 <td class="text-xs-center td td-row">
                   <v-radio-group v-model="props.item.attendence" :mandatory="false" row>
                     <v-radio
                       v-for="attendences in attendenceType"
                       :key="attendences.value"
                       :label="`${attendences.label}`"
                       :value="attendences.value"
                     ></v-radio>
                   </v-radio-group>
                 </td>
               </tr>
             </template>
           </v-data-table>
           <v-flex xs12>
             <v-card-actions>
               <v-spacer></v-spacer>
               <v-btn @click="submit()" class="add-button" round dark>Submit</v-btn>
             </v-card-actions>
           </v-flex>
         </v-flex>
       </v-card>
     </v-dialog>
     <v-snackbar
       :timeout="timeout"
       :top="y === 'top'"
       :right="x === 'right'"
       :vertical="mode === 'vertical'"
       v-model="snackbar"
       color="success"
     >{{ text }}</v-snackbar>
     <div class="loader" v-if="showLoader">
       <v-progress-circular indeterminate color="white"></v-progress-circular>
     </div>
   </v-container>
 </template>
 <script>
 import http from "@/Services/http.js";
 import moment from "moment";
 export default {
   data: () => ({
     snackbar: false,
     y: "top",
     x: "right",
     role: "",
     mode: "",
     timeout: 5000,
     text: "",
     date: null,
     menu: false,
     show: true,
     showSearch: false,
     addTeacherAttendenceDialog: false,
     attendeceTable: false,
     showLoader: false,
     loading: false,
     search: "",
     valid: true,
     isActive: true,
     newActive: false,
     dataValid: [v => !!v || "Date is required"],
     attendenceType: [
       {
         label: "Present",
         value: "present"
       },
       {
         label: "Late Present With Excuset",
         value: "latePresentWithExcuse"
       },
       {
         label: "Late Present",
         value: "latePresent"
       },
       {
         label: "Absent",
         value: "absent"
       }
     ],
     pagination: {
       rowsPerPage: 8
     },
     headers: [
       {
         text: "No",
         align: "",
         sortable: false,
         value: "No"
       },
       {
         text: "Profile Pic",
         value: "profilePicUrl",
         sortable: false,
         align: "center"
       },
       { text: "Name", value: "name", sortable: false, align: "center" },
       { text: "Email", value: "email", sortable: false, align: "center" },
       {
         text: "Mobile No",
         value: "mobileNo",
         sortable: false,
         align: "center"
       },
       { text: "Attendance", value: "", sortable: false, align: "center" }
     ],
     desserts: [],
     teachersData: [],
     addTeachers: {}
   }),
   watch: {
     menu(val) {
       val && this.$nextTick(() => (this.$refs.picker.activePicker = "DAY"));
     }
   },
   methods: {
     save(date) {
       this.$refs.menu.save(date);
     },
     showTable() {
       this.attendeceTable = true;
       this.getTeacherList();
     },
     getTeacherList() {
       this.showLoader = true;
       var token = this.$store.state.token;
       http()
         .get("/getTeachersList", {
           headers: { Authorization: "Bearer " + token }
         })
         .then(response => {
           this.teachersData = response.data.data;
           // this.desserts = response.data.data;
           var attendence = "";
           for (let i = 0; i < this.teachersData.length; i++) {
             this.teachersData[i].attendence = "present";
           }
           this.showLoader = false;
           // console.log("getTeacherList=====>",this.desserts)
           // console.log("getTeacherList=====>",this.teachersData)
         })
         .catch(error => {
           this.showLoader = false;
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
           }
         });
     },
     submit() {
       var teachersAttendence = [];
       for (var j = 0; j < this.teachersData.length; j++) {
         teachersAttendence.push({
           teacherId: this.teachersData[j]._id,
           attendanceType: this.teachersData[j].attendence
         });
       }
       if (this.$refs.form.validate()) {
         let attendanceData = {
           date: this.date,
           teachers: teachersAttendence
         };
         http()
           .post("/createTeacherAttendance", attendanceData)
           .then(response => {
             this.snackbar = true;
             this.text = response.data.message;
             this.addTeacherAttendenceDialog = false;
+            this.clear();
           })
           .catch(error => {
             this.snackbar = true;
             this.text = error.response.data.message;
           });
       }
     },
     clear() {
       this.$refs.form.reset();
       this.imageUrl = "";
     },
     displaySearch() {
       (this.show = false), (this.showSearch = true);
     },
     closeSearch() {
       this.showSearch = false;
       this.show = true;
       this.search = "";
     }
   },
   mounted() {
     this.getTeacherList();
     this.role = this.$store.state.role;
   }
 };
 </script>

src/pages/Class/addclass.vue

Diff comments View file @7efe027

 <template>
   <v-container fluid class="body-color">
     <!-- ****** EDIT  ClASS  ****** -->
     <v-dialog v-model="editClassDialog" max-width="400px">
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Class</label>
             <v-icon size="24" class="right" @click="editClassDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-container fluid>
           <v-layout justify-center>
             <v-flex xs12 sm12>
               <v-flex xs12>
                 <v-text-field v-model="editedItem.classNum" @keyup.enter="save" :rules="nameRules"></v-text-field>
               </v-flex>
               <v-card-actions>
                 <v-spacer></v-spacer>
                 <v-btn round dark @click="save" class="add-button">Save</v-btn>
                 <v-spacer></v-spacer>
               </v-card-actions>
             </v-flex>
           </v-layout>
         </v-container>
       </v-card>
     </v-dialog>
     <!-- ****** PROFILE VIEW STUDENTS ******  -->
     <v-dialog v-model="profileClassDialog" max-width="400px">
       <v-card flat class="card-style pa-3" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View Class</label>
             <v-icon size="24" class="right" @click="profileClassDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-card-text>
           <v-container grid-list-md>
             <v-layout wrap>
               <v-flex xs6 sm6>
                 <h5 class="right my-1 subheading">
                   <b>Class Name:</b>
                 </h5>
               </v-flex>
               <v-flex sm6 xs6>
                 <h5 class="my-1">{{ editedItem.classNum }}</h5>
               </v-flex>
             </v-layout>
           </v-container>
         </v-card-text>
       </v-card>
     </v-dialog>
     <!-- ****** Class Table ****** -->
     <v-toolbar color="transparent" flat>
       <v-btn
         fab
         dark
         class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
         small
         @click="addClassDialog = true"
       >
         <v-icon dark>add</v-icon>
       </v-btn>
       <v-btn
         round
         class="open-dialog-button hidden-sm-only hidden-xs-only"
         dark
         @click="addClassDialog = true"
       >
         <v-icon class="white--text pr-1" size="20">add</v-icon>Add Class
       </v-btn>
       <v-spacer></v-spacer>
       <v-card-title class="body-1" v-show="show">
         <v-btn icon large flat @click="displaySearch">
           <v-avatar size="27">
             <img src="/static/icon/search.png" alt="icon" />
           </v-avatar>
         </v-btn>
       </v-card-title>
       <v-flex xs8 sm8 md3 lg2 v-if="showSearch">
         <v-layout>
           <v-text-field autofocus v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>
           <v-icon @click="closeSearch" color="error">close</v-icon>
         </v-layout>
       </v-flex>
     </v-toolbar>
     <v-data-table
       :headers="headers"
       :items="classList"
       :pagination.sync="pagination"
       :search="search"
     >
       <template slot="items" slot-scope="props">
         <tr class="tr">
           <td class="td td-row">{{ props.index + 1 }}</td>
           <td class="text-xs-center td td-row">{{ props.item.classNum}}</td>
           <td class="text-xs-center td td-row">
             <span>
               <v-tooltip top>
                 <img
                   slot="activator"
                   style="cursor:pointer; width:25px; height:25px; "
                   class="mr-3"
                   @click="profile(props.item)"
                   src="/static/icon/view.png"
                 />
                 <span>View</span>
               </v-tooltip>
               <v-tooltip top>
                 <img
                   slot="activator"
                   style="cursor:pointer; width:20px; height:18px; "
                   class="mr-3"
                   @click="editItem(props.item)"
                   src="/static/icon/edit.png"
                 />
                 <span>Edit</span>
               </v-tooltip>
               <!-- <v-tooltip top>
                 <img
                   slot="activator"
                   style="cursor:pointer; width:20px; height:20px; "
                   @click="deleteItem(props.item)"
                   src="/static/icon/delete.png"
                 />
                 <span>Delete</span>
               </v-tooltip>-->
             </span>
           </td>
         </tr>
       </template>
       <v-alert
         slot="no-results"
         :value="true"
         color="error"
         icon="warning"
       >Your search for "{{ search }}" found no results.</v-alert>
     </v-data-table>
-    <!-- ****** ADD Class ****** -->
+    <!-- DIALOG BOX - ADD Class  -->
     <v-dialog v-model="addClassDialog" max-width="400px">
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Class</label>
-            <v-icon size="24" class="right" @click="addClassDialog = false">cancel</v-icon>
+            <v-icon size="24" class="right" @click="$refs.form.reset();addClassDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-container fluid fill-height>
           <v-layout align-center>
             <v-flex xs12>
               <v-form ref="form" v-model="valid" lazy-validation>
                 <v-flex xs12 class="headline text-xs-center">
                   <label>Class</label>
                 </v-flex>
                 <v-flex xs12>
                   <v-text-field
                     v-model="addclasses.classNum"
                     placeholder="fill your class Name"
                     type="text"
                     :rules="nameRules"
                     required
                   ></v-text-field>
                 </v-flex>
                 <v-layout>
                   <v-flex xs12 sm12>
                     <v-card-actions>
                       <v-spacer></v-spacer>
                       <v-btn
                         @click="submit"
                         class="add-button"
                         round
                         dark
                         :loading="loading"
                       >Add Class</v-btn>
                       <v-spacer></v-spacer>
                     </v-card-actions>
                   </v-flex>
                 </v-layout>
               </v-form>
             </v-flex>
           </v-layout>
         </v-container>
       </v-card>
     </v-dialog>
     <div class="loader" v-if="showLoader">
       <v-progress-circular indeterminate color="white"></v-progress-circular>
     </div>
     <v-snackbar
       :timeout="timeout"
       :top="y === 'top'"
       :right="x === 'right'"
       :vertical="mode === 'vertical'"
       v-model="snackbar"
       :color="color"
     >{{ text }}</v-snackbar>
   </v-container>
 </template>
 <script>
 import http from "@/Services/http.js";
 export default {
   data: () => ({
     snackbar: false,
     y: "top",
     x: "right",
     mode: "",
     timeout: 5000,
     text: "",
     color: "",
     show: true,
     showSearch: false,
     showLoader: false,
     loading: false,
     addClassDialog: false,
     search: "",
     editClassDialog: false,
     profileClassDialog: false,
     valid: true,
     pagination: {
       rowsPerPage: 10,
     },
     nameRules: [(v) => !!v || " Class Name is required"],
     headers: [
       {
         text: "No",
         align: "left",
         sortable: false,
         value: "No",
       },
       { text: "Class No", value: "classNum", sortable: false, align: "center" },
       { text: "Action", value: "", sortable: false, align: "center" },
     ],
     classList: [],
     editedIndex: -1,
     editedItem: {
       classNum: "",
     },
     addclasses: {
       classNum: "",
     },
   }),
   methods: {
     getClassList() {
       this.showLoader = true;
       var token = this.$store.state.token;
       http()
         .get("/getClassesList")
         .then((response) => {
           this.classList = response.data.data;
           this.showLoader = false;
         })
         .catch((error) => {
           this.showLoader = false;
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
           }
         });
     },
     editItem(item) {
       this.editedIndex = this.classList.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.editClassDialog = true;
     },
     profile(item) {
       this.editedIndex = this.classList.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.profileClassDialog = true;
     },
     deleteItem(item) {
       let deleteStudent = {
         classId: item._id,
       };
       http()
         .delete(
           "/deleteClass",
           confirm("Are you sure you want to delete this?") && {
             params: deleteStudent,
           }
         )
         .then((response) => {
           this.snackbar = true;
           this.text = response.data.message;
           this.color = "green";
           this.getClassList();
         })
         .catch((error) => {
           this.snackbar = true;
           this.color = "error";
           this.text = error.response.data.message;
         });
     },
     close() {
       this.editClassDialog = false;
     },
     closeProfile() {
       this.profileClassDialog = false;
     },
     submit() {
       if (this.$refs.form.validate()) {
         let addClass = {
           classNum: this.addclasses.classNum,
         };
         this.loading = true;
         http()
           .post("/createClass", addClass)
           .then((response) => {
             this.getClassList();
             this.snackbar = true;
             this.text = response.data.message;
             this.color = "green";
-            this.clear();
+            // this.clear();
             this.loading = false;
+            this.$refs.form.reset()
             this.addClassDialog = false;
           })
           .catch((error) => {
             this.loading = false;
             this.snackbar = true;
             this.color = "error";
             this.text = error.response.data.message;
           });
       }
     },
     clear() {
       this.$refs.form.reset();
     },
     save() {
       let editClass = {
         classId: this.editedItem._id,
         classNum: this.editedItem.classNum,
       };
       http()
         .put("/updateClass", editClass)
         .then((response) => {
           this.snackbar = true;
           this.text = response.data.message;
           this.color = "green";
           this.getClassList();
           this.close();
         })
         .catch((error) => {
           this.snackbar = true;
           this.text = error.response.data.message;
           this.color = "error";
           // console.log(error);
         });
     },
     displaySearch() {
       (this.show = false), (this.showSearch = true);
     },
     closeSearch() {
       this.showSearch = false;
       this.show = true;
       this.search = "";
     },
   },
   mounted() {
     this.getClassList();
   },
   // created() {
   //   this.$root.$on("app:search", search => {
   //     this.search = search;
   //   });
   // },
   // beforeDestroy() {
   //   // dont forget to remove the listener
   //   this.$root.$off("app:search");
   // }
 };
 </script>
 <style>
 </style>

src/pages/Exam/exam.vue

Diff comments View file @7efe027

1	<template>	1	<template>
2	<v-container fluid class="body-color">	2	<v-container fluid class="body-color">
3	<!-- **** EDIT EXAM **** -->	3	<!-- **** EDIT EXAM **** -->
4	<v-dialog v-model="editExamDialog" max-width="600px" scrollable>	4	<v-dialog v-model="editExamDialog" max-width="600px" scrollable>
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 Exam</label>	8	<label class="title text-xs-center">Edit Exam</label>
9	<v-icon size="24" class="right" @click="editExamDialog = false">cancel</v-icon>	9	<v-icon size="24" class="right" @click="editExamDialog = 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-form ref="form">	13	<v-form ref="form">
14	<v-container fluid>	14	<v-container fluid>
15	<v-layout wrap>	15	<v-layout wrap>
16	<v-flex xs12 sm12>	16	<v-flex xs12 sm12>
17	<v-layout>	17	<v-layout>
18	<v-flex xs4 class="pt-4 subheading">	18	<v-flex xs4 class="pt-4 subheading">
19	<label class="right">Exam Name:</label>	19	<label class="right">Exam Name:</label>
20	</v-flex>	20	</v-flex>
21	<v-flex xs7 class="ml-3">	21	<v-flex xs7 class="ml-3">
22	<v-text-field	22	<v-text-field
23	placeholder="fill your Serial Number"	23	placeholder="fill your Serial Number"
24	v-model="editedItem.examName"	24	v-model="editedItem.examName"
25	type="text"	25	type="text"
26	></v-text-field>	26	></v-text-field>
27	</v-flex>	27	</v-flex>
28	</v-layout>	28	</v-layout>
29	</v-flex>	29	</v-flex>
30	<v-flex xs12 sm12>	30	<v-flex xs12 sm12>
31	<v-layout>	31	<v-layout>
32	<v-flex xs4 class="pt-4 subheading">	32	<v-flex xs4 class="pt-4 subheading">
33	<label class="right">Date:</label>	33	<label class="right">Date:</label>
34	</v-flex>	34	</v-flex>
35	<v-flex xs7 class="ml-3">	35	<v-flex xs7 class="ml-3">
36	<v-menu	36	<v-menu
37	ref="menu1"	37	ref="menu1"
38	:close-on-content-click="false"	38	:close-on-content-click="false"
39	v-model="menu1"	39	v-model="menu1"
40	:nudge-right="40"	40	:nudge-right="40"
41	:return-value.sync="menu1"	41	:return-value.sync="menu1"
42	lazy	42	lazy
43	transition="scale-transition"	43	transition="scale-transition"
44	offset-y	44	offset-y
45	full-width	45	full-width
46	min-width="290px"	46	min-width="290px"
47	>	47	>
48	<v-text-field	48	<v-text-field
49	slot="activator"	49	slot="activator"
50	v-model="editedItem.date"	50	v-model="editedItem.date"
51	label="Select Date"	51	label="Select Date"
52	append-icon="event"	52	append-icon="event"
53	readonly	53	readonly
54	></v-text-field>	54	></v-text-field>
55	<v-date-picker v-model="editedItem.date" @input="menu1 = false"></v-date-picker>	55	<v-date-picker v-model="editedItem.date" @input="menu1 = false"></v-date-picker>
56	</v-menu>	56	</v-menu>
57	</v-flex>	57	</v-flex>
58	</v-layout>	58	</v-layout>
59	</v-flex>	59	</v-flex>
60	<v-flex xs12 sm12>	60	<v-flex xs12 sm12>
61	<v-layout>	61	<v-layout>
62	<v-flex xs4 class="pt-4 subheading">	62	<v-flex xs4 class="pt-4 subheading">
63	<label class="right">Note:</label>	63	<label class="right">Note:</label>
64	</v-flex>	64	</v-flex>
65	<v-flex xs7 class="ml-3">	65	<v-flex xs7 class="ml-3">
66	<v-text-field	66	<v-text-field
67	placeholder="fill your Serial Number"	67	placeholder="fill your Serial Number"
68	v-model="editedItem.note"	68	v-model="editedItem.note"
69	type="text"	69	type="text"
70	></v-text-field>	70	></v-text-field>
71	</v-flex>	71	</v-flex>
72	</v-layout>	72	</v-layout>
73	</v-flex>	73	</v-flex>
74	</v-layout>	74	</v-layout>
75	<v-layout>	75	<v-layout>
76	<v-flex xs12>	76	<v-flex xs12>
77	<v-card-actions>	77	<v-card-actions>
78	<v-spacer></v-spacer>	78	<v-spacer></v-spacer>
79	<v-btn round dark @click="save" class="add-button">Save</v-btn>	79	<v-btn round dark @click="save" class="add-button">Save</v-btn>
80	</v-card-actions>	80	</v-card-actions>
81	</v-flex>	81	</v-flex>
82	</v-layout>	82	</v-layout>
83	</v-container>	83	</v-container>
84	</v-form>	84	</v-form>
85	</v-card-text>	85	</v-card-text>
86	</v-card>	86	</v-card>
87	</v-dialog>	87	</v-dialog>
88		88
89	<!-- **** PROFILE VIEW PARTICULAR EXAM **** -->	89	<!-- **** PROFILE VIEW PARTICULAR EXAM **** -->
90		90
91	<v-dialog v-model="profileExamDialog" max-width="500px">	91	<v-dialog v-model="profileExamDialog" max-width="500px">
92	<v-card flat class="card-style pa-3" dark>	92	<v-card flat class="card-style pa-3" dark>
93	<v-layout>	93	<v-layout>
94	<v-flex xs12>	94	<v-flex xs12>
95	<label class="title text-xs-center">View Exam</label>	95	<label class="title text-xs-center">View Exam</label>
96	<v-icon size="24" class="right" @click="profileExamDialog = false">cancel</v-icon>	96	<v-icon size="24" class="right" @click="profileExamDialog = false">cancel</v-icon>
97	</v-flex>	97	</v-flex>
98	</v-layout>	98	</v-layout>
99	<v-card-text>	99	<v-card-text>
100	<v-container grid-list-md>	100	<v-container grid-list-md>
101	<v-layout wrap>	101	<v-layout wrap>
102	<v-flex>	102	<v-flex>
103	<v-layout>	103	<v-layout>
104	<v-flex xs6 sm4>	104	<v-flex xs6 sm4>
105	<h5 class="right my-1">	105	<h5 class="right my-1">
106	<b>Exam Name:</b>	106	<b>Exam Name:</b>
107	</h5>	107	</h5>
108	</v-flex>	108	</v-flex>
109	<v-flex sm8 xs6>	109	<v-flex sm8 xs6>
110	<h5 class="my-1">{{ editedItem.examName }}</h5>	110	<h5 class="my-1">{{ editedItem.examName }}</h5>
111	</v-flex>	111	</v-flex>
112	</v-layout>	112	</v-layout>
113	<v-layout>	113	<v-layout>
114	<v-flex xs6 sm4>	114	<v-flex xs6 sm4>
115	<h5 class="right my-1">	115	<h5 class="right my-1">
116	<b>Date:</b>	116	<b>Date:</b>
117	</h5>	117	</h5>
118	</v-flex>	118	</v-flex>
119	<v-flex sm8 xs6>	119	<v-flex sm8 xs6>
120	<h5 class="my-1">{{ dates(editedItem.date) }}</h5>	120	<h5 class="my-1">{{ dates(editedItem.date) }}</h5>
121	</v-flex>	121	</v-flex>
122	</v-layout>	122	</v-layout>
123	<v-layout>	123	<v-layout>
124	<v-flex xs6 sm4>	124	<v-flex xs6 sm4>
125	<h5 class="right my-1">	125	<h5 class="right my-1">
126	<b>Note:</b>	126	<b>Note:</b>
127	</h5>	127	</h5>
128	</v-flex>	128	</v-flex>
129	<v-flex sm8 xs6>	129	<v-flex sm8 xs6>
130	<h5 class="my-1">{{ editedItem.note }}</h5>	130	<h5 class="my-1">{{ editedItem.note }}</h5>
131	</v-flex>	131	</v-flex>
132	</v-layout>	132	</v-layout>
133	</v-flex>	133	</v-flex>
134	</v-layout>	134	</v-layout>
135	</v-container>	135	</v-container>
136	</v-card-text>	136	</v-card-text>
137	</v-card>	137	</v-card>
138	</v-dialog>	138	</v-dialog>
139	<!-- **** EXAM TABLE**** -->	139	<!-- **** EXAM TABLE**** -->
140		140
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="addExamDialog = true"	147	@click="addExamDialog = 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="addExamDialog = true"	155	@click="addExamDialog = true"
156	>	156	>
157	<v-icon class="white--text pr-1" size="20">add</v-icon>Add Exam	157	<v-icon class="white--text pr-1" size="20">add</v-icon>Add Exam
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 sm8 md3 lg2 v-if="showSearch">	167	<v-flex xs8 sm8 md3 lg2 v-if="showSearch">
168	<v-layout>	168	<v-layout>
169	<v-text-field autofocus v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>	169	<v-text-field autofocus v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>
170	<v-icon @click="closeSearch" color="error">close</v-icon>	170	<v-icon @click="closeSearch" color="error">close</v-icon>
171	</v-layout>	171	</v-layout>
172	</v-flex>	172	</v-flex>
173	</v-toolbar>	173	</v-toolbar>
174	<v-data-table	174	<v-data-table
175	:headers="headers"	175	:headers="headers"
176	:items="examData"	176	:items="examData"
177	:pagination.sync="pagination"	177	:pagination.sync="pagination"
178	:search="search"	178	:search="search"
179	>	179	>
180	<template slot="items" slot-scope="props">	180	<template slot="items" slot-scope="props">
181	<tr class="tr">	181	<tr class="tr">
182	<td class="td td-row">{{ props.index + 1}}</td>	182	<td class="td td-row">{{ props.index + 1}}</td>
183	<td class="td td-row text-xs-center">{{ props.item.examName}}</td>	183	<td class="td td-row text-xs-center">{{ props.item.examName}}</td>
184	<td class="td td-row text-xs-center">{{ dates(props.item.date) }}</td>	184	<td class="td td-row text-xs-center">{{ dates(props.item.date) }}</td>
185	<td class="td td-row text-xs-center">{{ props.item.note}}</td>	185	<td class="td td-row text-xs-center">{{ props.item.note}}</td>
186	<td class="td td-row text-xs-center">	186	<td class="td td-row text-xs-center">
187	<span>	187	<span>
188	<v-tooltip top>	188	<v-tooltip top>
189	<img	189	<img
190	slot="activator"	190	slot="activator"
191	style="cursor:pointer; width:25px; height:25px; "	191	style="cursor:pointer; width:25px; height:25px; "
192	class="mr-3"	192	class="mr-3"
193	@click="profile(props.item)"	193	@click="profile(props.item)"
194	src="/static/icon/view.png"	194	src="/static/icon/view.png"
195	/>	195	/>
196	<span>View</span>	196	<span>View</span>
197	</v-tooltip>	197	</v-tooltip>
198	<v-tooltip top>	198	<v-tooltip top>
199	<img	199	<img
200	slot="activator"	200	slot="activator"
201	style="cursor:pointer; width:20px; height:18px; "	201	style="cursor:pointer; width:20px; height:18px; "
202	class="mr-3"	202	class="mr-3"
203	@click="editItem(props.item)"	203	@click="editItem(props.item)"
204	src="/static/icon/edit.png"	204	src="/static/icon/edit.png"
205	/>	205	/>
206	<span>Edit</span>	206	<span>Edit</span>
207	</v-tooltip>	207	</v-tooltip>
208	<v-tooltip top>	208	<v-tooltip top>
209	<img	209	<img
210	slot="activator"	210	slot="activator"
211	style="cursor:pointer; width:20px; height:20px; "	211	style="cursor:pointer; width:20px; height:20px; "
212	class="mr-3"	212	class="mr-3"
213	@click="deleteItem(props.item)"	213	@click="deleteItem(props.item)"
214	src="/static/icon/delete.png"	214	src="/static/icon/delete.png"
215	/>	215	/>
216	<span>Delete</span>	216	<span>Delete</span>
217	</v-tooltip>	217	</v-tooltip>
218	</span>	218	</span>
219	</td>	219	</td>
220	</tr>	220	</tr>
221	</template>	221	</template>
222	<v-alert	222	<v-alert
223	slot="no-results"	223	slot="no-results"
224	:value="true"	224	:value="true"
225	color="error"	225	color="error"
226	icon="warning"	226	icon="warning"
227	>Your search for "{{ search }}" found no results.</v-alert>	227	>Your search for "{{ search }}" found no results.</v-alert>
228	</v-data-table>	228	</v-data-table>
229		229
230	<!-- **** ADD EXAM **** -->	230	<!-- **** ADD EXAM **** -->
231	<v-dialog v-model="addExamDialog" max-width="500px">	231	<v-dialog v-model="addExamDialog" max-width="500px">
232	<v-card flat class="card-style pa-2" dark>	232	<v-card flat class="card-style pa-2" dark>
233	<v-layout>	233	<v-layout>
234	<v-flex xs12>	234	<v-flex xs12>
235	<label class="title text-xs-center">Add Exam</label>	235	<label class="title text-xs-center">Add Exam</label>
236	<v-icon size="24" class="right" @click="addExamDialog = false">cancel</v-icon>	236	<v-icon size="24" class="right" @click="$refs.form.reset();addExamDialog = false">cancel</v-icon>
237	</v-flex>	237	</v-flex>
238	</v-layout>	238	</v-layout>
239	<v-form ref="form" v-model="valid" lazy-validation>	239	<v-form ref="form" v-model="valid" lazy-validation>
240	<v-container fluid>	240	<v-container fluid>
241	<v-flex xs12>	241	<v-flex xs12>
242	<v-layout>	242	<v-layout>
243	<v-flex xs4 class="pt-4 subheading">	243	<v-flex xs4 class="pt-4 subheading">
244	<label class="right hidden-xs-only">Exam Name:</label>	244	<label class="right hidden-xs-only">Exam Name:</label>
245	<label	245	<label
246	class="right hidden-sm-only hidden-md-only hidden-lg-only hidden-xl-only"	246	class="right hidden-sm-only hidden-md-only hidden-lg-only hidden-xl-only"
247	>ExamName:</label>	247	>ExamName:</label>
248	</v-flex>	248	</v-flex>
249	<v-flex xs8 sm7 class="ml-3">	249	<v-flex xs8 sm7 class="ml-3">
250	<v-text-field	250	<v-text-field
251	placeholder="fill your Exam Name"	251	placeholder="fill your Exam Name"
252	:rules="authorRules"	252	:rules="authorRules"
253	v-model="addExam.examName"	253	v-model="addExam.examName"
254	></v-text-field>	254	></v-text-field>
255	</v-flex>	255	</v-flex>
256	</v-layout>	256	</v-layout>
257	</v-flex>	257	</v-flex>
258	<v-flex xs12>	258	<v-flex xs12>
259	<v-layout>	259	<v-layout>
260	<v-flex xs4 class="pt-4 subheading">	260	<v-flex xs4 class="pt-4 subheading">
261	<label class="right">Date:</label>	261	<label class="right">Date:</label>
262	</v-flex>	262	</v-flex>
263	<v-flex xs8 sm7 class="ml-3">	263	<v-flex xs8 sm7 class="ml-3">
264	<v-menu	264	<v-menu
265	ref="menu2"	265	ref="menu2"
266	:close-on-content-click="false"	266	:close-on-content-click="false"
267	v-model="menu2"	267	v-model="menu2"
268	:nudge-right="40"	268	:nudge-right="40"
269	:return-value.sync="addExam.date"	269	:return-value.sync="addExam.date"
270	lazy	270	lazy
271	transition="scale-transition"	271	transition="scale-transition"
272	offset-y	272	offset-y
273	full-width	273	full-width
274	min-width="290px"	274	min-width="290px"
275	>	275	>
276	<v-text-field	276	<v-text-field
277	slot="activator"	277	slot="activator"
278	v-model="addExam.date"	278	v-model="addExam.date"
279	:rules="examDateRules"	279	:rules="examDateRules"
280	label="Select Date"	280	label="Select Date"
281	append-icon="event"	281	append-icon="event"
282	readonly	282	readonly
283	></v-text-field>	283	></v-text-field>
284	<v-date-picker v-model="addExam.date" @input="$refs.menu2.save(addExam.date)"></v-date-picker>	284	<v-date-picker v-model="addExam.date" @input="$refs.menu2.save(addExam.date)"></v-date-picker>
285	</v-menu>	285	</v-menu>
286	</v-flex>	286	</v-flex>
287	</v-layout>	287	</v-layout>
288	</v-flex>	288	</v-flex>
289	<v-flex xs12>	289	<v-flex xs12>
290	<v-layout>	290	<v-layout>
291	<v-flex xs4 class="pt-4 subheading">	291	<v-flex xs4 class="pt-4 subheading">
292	<label class="right">Note:</label>	292	<label class="right">Note:</label>
293	</v-flex>	293	</v-flex>
294	<v-flex xs8 sm7 class="ml-3">	294	<v-flex xs8 sm7 class="ml-3">
295	<v-text-field	295	<v-text-field
296	placeholder="fill your Note"	296	placeholder="fill your Note"
297	v-model="addExam.note"	297	v-model="addExam.note"
298	></v-text-field>	298	></v-text-field>
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	<v-card-actions>	304	<v-card-actions>
305	<v-spacer class="hidden-xs-only"></v-spacer>	305	<v-spacer class="hidden-xs-only"></v-spacer>
306	<v-btn @click="clear" round dark class="clear-button">clear</v-btn>	306	<v-btn @click="clear" round dark class="clear-button">clear</v-btn>
307	<v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>	307	<v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
308	</v-card-actions>	308	</v-card-actions>
309	</v-flex>	309	</v-flex>
310	</v-layout>	310	</v-layout>
311	</v-container>	311	</v-container>
312	</v-form>	312	</v-form>
313	</v-card>	313	</v-card>
314	</v-dialog>	314	</v-dialog>
315	<v-snackbar	315	<v-snackbar
316	:timeout="timeout"	316	:timeout="timeout"
317	:top="y === 'top'"	317	:top="y === 'top'"
318	:right="x === 'right'"	318	:right="x === 'right'"
319	:vertical="mode === 'vertical'"	319	:vertical="mode === 'vertical'"
320	v-model="snackbar"	320	v-model="snackbar"
321	:color="color"	321	:color="color"
322	>{{ text }}</v-snackbar>	322	>{{ text }}</v-snackbar>
323	<div class="loader" v-if="showLoader">	323	<div class="loader" v-if="showLoader">
324	<v-progress-circular indeterminate color="white"></v-progress-circular>	324	<v-progress-circular indeterminate color="white"></v-progress-circular>
325	</div>	325	</div>
326	</v-container>	326	</v-container>
327	</template>	327	</template>
328		328
329	<script>	329	<script>
330	import http from "@/Services/http.js";	330	import http from "@/Services/http.js";
331	import moment from "moment";	331	import moment from "moment";
332		332
333	export default {	333	export default {
334	data: () => ({	334	data: () => ({
335	snackbar: false,	335	snackbar: false,
336	date: null,	336	date: null,
337	menu1: false,	337	menu1: false,
338	menu2: false,	338	menu2: false,
339	color: "",	339	color: "",
340	y: "top",	340	y: "top",
341	x: "right",	341	x: "right",
342	mode: "",	342	mode: "",
343	timeout: 10000,	343	timeout: 10000,
344	text: "",	344	text: "",
345	libraryId: "",	345	libraryId: "",
346	show: true,	346	show: true,
347	showSearch: false,	347	showSearch: false,
348	addExamDialog: false,	348	addExamDialog: false,
349	loading: false,	349	loading: false,
350	loadingSearch: false,	350	loadingSearch: false,
351	date: null,	351	date: null,
352	search: "",	352	search: "",
353	showLoader: false,	353	showLoader: false,
354	editExamDialog: false,	354	editExamDialog: false,
355	profileExamDialog: false,	355	profileExamDialog: false,
356	valid: true,	356	valid: true,
357	pagination: {	357	pagination: {
358	rowsPerPage: 10	358	rowsPerPage: 10
359	},	359	},
360	libraryIDRules: [v => !!v \|\| " Library ID is required"],	360	libraryIDRules: [v => !!v \|\| " Library ID is required"],
361	bookRules: [v => !!v \|\| " book Name is required"],	361	bookRules: [v => !!v \|\| " book Name is required"],
362	authorRules: [v => !!v \|\| "Author Name is required"],	362	authorRules: [v => !!v \|\| "Author Name is required"],
363	subjectCodeRules: [v => !!v \|\| "Subject Code is required"],	363	subjectCodeRules: [v => !!v \|\| "Subject Code is required"],
364	authorRules: [v => !!v \|\| "Author is required"],	364	authorRules: [v => !!v \|\| "Author is required"],
365	examDateRules: [v => !!v \|\| "Date is required"],	365	examDateRules: [v => !!v \|\| "Date is required"],
366	headers: [	366	headers: [
367	{	367	{
368	align: "",	368	align: "",
369	text: "No",	369	text: "No",
370	sortable: false,	370	sortable: false,
371	value: "No"	371	value: "No"
372	},	372	},
373	{ text: "Exam Name", vaue: "examName", sortable: false, align: "center" },	373	{ text: "Exam Name", vaue: "examName", sortable: false, align: "center" },
374	{	374	{
375	text: "Date",	375	text: "Date",
376	value: "date",	376	value: "date",
377	sortable: false,	377	sortable: false,
378	align: "center"	378	align: "center"
379	},	379	},
380	{	380	{
381	text: "Note",	381	text: "Note",
382	value: "note",	382	value: "note",
383	sortable: false,	383	sortable: false,
384	align: "center"	384	align: "center"
385	},	385	},
386	{ text: "Action", value: "", sortable: false, align: "center" }	386	{ text: "Action", value: "", sortable: false, align: "center" }
387	],	387	],
388	examData: [],	388	examData: [],
389	addExam: {},	389	addExam: {},
390	editedItem: {},	390	editedItem: {},
391	token: ""	391	token: ""
392	}),	392	}),
393	methods: {	393	methods: {
394	dates: function(date) {	394	dates: function(date) {
395	return moment(date).format("MMMM DD, YYYY");	395	return moment(date).format("MMMM DD, YYYY");
396	},	396	},
397	pickFile() {	397	pickFile() {
398	this.$refs.image.click();	398	this.$refs.image.click();
399	},	399	},
400	getExamList() {	400	getExamList() {
401	this.showLoader = true;	401	this.showLoader = true;
402	this.loadingSearch = true;	402	this.loadingSearch = true;
403	http()	403	http()
404	.get("/getExamsList", {	404	.get("/getExamsList", {
405	headers: { Authorization: "Bearer " + this.token }	405	headers: { Authorization: "Bearer " + this.token }
406	})	406	})
407	.then(response => {	407	.then(response => {
408	this.examData = response.data.data;	408	this.examData = response.data.data;
409	this.showLoader = false;	409	this.showLoader = false;
410	this.loadingSearch = false;	410	this.loadingSearch = false;
411	})	411	})
412	.catch(error => {	412	.catch(error => {
413	// console.log("err====>", err);	413	// console.log("err====>", err);
414	this.showLoader = false;	414	this.showLoader = false;
415	this.loadingSearch = false;	415	this.loadingSearch = false;
416	this.snackbar = true;	416	this.snackbar = true;
417	this.text = error.response.data.message;	417	this.text = error.response.data.message;
418	if (error.response.status === 401) {	418	if (error.response.status === 401) {
419	this.$router.replace({ path: "/" });	419	this.$router.replace({ path: "/" });
420	this.$store.dispatch("setToken", null);	420	this.$store.dispatch("setToken", null);
421	this.$store.dispatch("Id", null);	421	this.$store.dispatch("Id", null);
422	}	422	}
423	});	423	});
424	},	424	},
425	editItem(item) {	425	editItem(item) {
426	this.editedIndex = this.examData.indexOf(item);	426	this.editedIndex = this.examData.indexOf(item);
427	this.editedItem = Object.assign({}, item);	427	this.editedItem = Object.assign({}, item);
428	this.editedItem.date =	428	this.editedItem.date =
429	this.editedItem.date != undefined	429	this.editedItem.date != undefined
430	? (this.editedItem.date = this.editedItem.date.substring(0, 10))	430	? (this.editedItem.date = this.editedItem.date.substring(0, 10))
431	: (this.editedItem.date = "");	431	: (this.editedItem.date = "");
432	this.editExamDialog = true;	432	this.editExamDialog = true;
433	},	433	},
434	profile(item) {	434	profile(item) {
435	this.editedIndex = this.examData.indexOf(item);	435	this.editedIndex = this.examData.indexOf(item);
436	this.editedItem = Object.assign({}, item);	436	this.editedItem = Object.assign({}, item);
437	this.profileExamDialog = true;	437	this.profileExamDialog = true;
438	},	438	},
439	deleteItem(item) {	439	deleteItem(item) {
440	let Exam = {	440	let Exam = {
441	examId: item._id	441	examId: item._id
442	};	442	};
443	http()	443	http()
444	.delete(	444	.delete(
445	"/deleteExam",	445	"/deleteExam",
446	confirm("Are you sure you want to Delete this?") && {	446	confirm("Are you sure you want to Delete this?") && {
447	params: Exam	447	params: Exam
448	}	448	}
449	)	449	)
450	.then(response => {	450	.then(response => {
451	this.snackbar = true;	451	this.snackbar = true;
452	this.text = "Successfully Delete Exam ";	452	this.text = "Successfully Delete Exam ";
453	this.text = response.data.message;	453	this.text = response.data.message;
454	this.color = "green";	454	this.color = "green";
455	this.getExamList();	455	this.getExamList();
456	})	456	})
457	.catch(error => {	457	.catch(error => {
458	this.snackbar = true;	458	this.snackbar = true;
459	this.text = error.response.data.message;	459	this.text = error.response.data.message;
460	this.color = "red";	460	this.color = "red";
461	});	461	});
462	},	462	},
463	close() {	463	close() {
464	this.editExamDialog = false;	464	this.editExamDialog = false;
465	},	465	},
466	submit() {	466	submit() {
467	if (this.$refs.form.validate()) {	467	if (this.$refs.form.validate()) {
468	this.loading = true;	468	this.loading = true;
469	http()	469	http()
470	.post("/createExam", this.addExam)	470	.post("/createExam", this.addExam)
471	.then(response => {	471	.then(response => {
472	this.snackbar = true;	472	this.snackbar = true;
473	this.text = response.data.message;	473	this.text = response.data.message;
474	this.color = "green";	474	this.color = "green";
475	this.addExamDialog = false;	475	this.addExamDialog = false;
476	this.getExamList();	476	this.getExamList();
477	this.color = "success";	477	this.color = "success";
478	this.loading = false;	478	this.loading = false;
479	this.clear();	479	this.clear();
480	})	480	})
481	.catch(error => {	481	.catch(error => {
482	this.snackbar = true;	482	this.snackbar = true;
483	this.text = error.response.data.message;	483	this.text = error.response.data.message;
484	this.color = "red";	484	this.color = "red";
485	this.loading = false;	485	this.loading = false;
486	});	486	});
487	}	487	}
488	},	488	},
489	clear() {	489	clear() {
490	this.$refs.form.reset();	490	this.$refs.form.reset();
491	this.disable = false;	491	this.disable = false;
492	},	492	},
493	save() {	493	save() {
494	this.editedItem.examId = this.editedItem._id;	494	this.editedItem.examId = this.editedItem._id;
495	http()	495	http()
496	.put("/updateExam", this.editedItem)	496	.put("/updateExam", this.editedItem)
497	.then(response => {	497	.then(response => {
498	this.snackbar = true;	498	this.snackbar = true;
499	this.text = response.data.message;	499	this.text = response.data.message;
500	this.color = "green";	500	this.color = "green";
501	this.getExamList();	501	this.getExamList();
502	this.close();	502	this.close();
503	})	503	})
504	.catch(error => {	504	.catch(error => {
505	this.snackbar = true;	505	this.snackbar = true;
506	this.text = error.response.data.message;	506	this.text = error.response.data.message;
507	this.color = "red";	507	this.color = "red";
508	});	508	});
509	},	509	},
510	displaySearch() {	510	displaySearch() {
511	(this.show = false), (this.showSearch = true);	511	(this.show = false), (this.showSearch = true);
512	},	512	},
513	closeSearch() {	513	closeSearch() {
514	this.showSearch = false;	514	this.showSearch = false;
515	this.show = true;	515	this.show = true;
516	this.search = "";	516	this.search = "";
517	}	517	}
518	},	518	},
519	mounted() {	519	mounted() {
520	this.token = this.$store.state.token;	520	this.token = this.$store.state.token;
521	this.getExamList();	521	this.getExamList();
522	}	522	}
523	};	523	};
524	</script>	524	</script>

src/pages/Exam/examSchedule.vue

Diff comments View file @7efe027

1	<template>	1	<template>
2	<v-container fluid class="body-color">	2	<v-container fluid class="body-color">
3	<!-- **** Edit Exam Schedule**** -->	3	<!-- **** Edit Exam Schedule**** -->
4	<v-dialog v-model="editExamScheduleDialog" max-width="800px" scrollable>	4	<v-dialog v-model="editExamScheduleDialog" max-width="800px" scrollable>
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 Exam Schedule</label>	8	<label class="title text-xs-center">Edit Exam Schedule</label>
9	<v-icon size="24" class="right" @click="editExamScheduleDialog = false">cancel</v-icon>	9	<v-icon size="24" class="right" @click="editExamScheduleDialog = 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-form ref="form">	13	<v-form ref="form">
14	<v-container fluid>	14	<v-container fluid>
15	<v-layout wrap>	15	<v-layout wrap>
16	<v-flex xs12 sm12>	16	<v-flex xs12 sm12>
17	<v-layout>	17	<v-layout>
18	<v-flex xs4 class="pt-4 subheading">	18	<v-flex xs4 class="pt-4 subheading">
19	<label class="right">Exam Name:</label>	19	<label class="right">Exam Name:</label>
20	</v-flex>	20	</v-flex>
21	<v-flex xs7 class="ml-3">	21	<v-flex xs7 class="ml-3">
22	<v-select	22	<v-select
23	:rules="examRules"	23	:rules="examRules"
24	:items="examList"	24	:items="examList"
25	v-model="editedItem.examId"	25	v-model="editedItem.examId"
26	label="Select your Exam Name"	26	label="Select your Exam Name"
27	item-text="examName"	27	item-text="examName"
28	item-value="_id"	28	item-value="_id"
29	></v-select>	29	></v-select>
30	</v-flex>	30	</v-flex>
31	</v-layout>	31	</v-layout>
32	</v-flex>	32	</v-flex>
33	<v-flex xs12 sm12>	33	<v-flex xs12 sm12>
34	<v-layout>	34	<v-layout>
35	<v-flex xs4 class="pt-4 subheading">	35	<v-flex xs4 class="pt-4 subheading">
36	<label class="right">Class:</label>	36	<label class="right">Class:</label>
37	</v-flex>	37	</v-flex>
38	<v-flex xs7 class="ml-3">	38	<v-flex xs7 class="ml-3">
39	<v-select	39	<v-select
40	v-model="editedItem.classId"	40	v-model="editedItem.classId"
41	label="Select your Class"	41	label="Select your Class"
42	type="text"	42	type="text"
43	:items="classList"	43	:items="classList"
44	item-text="classNum"	44	item-text="classNum"
45	item-value="_id"	45	item-value="_id"
46	@change="getSections(editedItem.classId)"	46	@change="getSections(editedItem.classId)"
47	required	47	required
48	></v-select>	48	></v-select>
49	</v-flex>	49	</v-flex>
50	</v-layout>	50	</v-layout>
51	</v-flex>	51	</v-flex>
52	<v-flex xs12 sm12>	52	<v-flex xs12 sm12>
53	<v-layout>	53	<v-layout>
54	<v-flex xs4 class="pt-4 subheading">	54	<v-flex xs4 class="pt-4 subheading">
55	<label class="right">Subject Name:</label>	55	<label class="right">Subject Name:</label>
56	</v-flex>	56	</v-flex>
57	<v-flex xs7 class="ml-3">	57	<v-flex xs7 class="ml-3">
58	<v-select	58	<v-select
59	:items="subjects"	59	:items="subjects"
60	label="Select your Subject"	60	label="Select your Subject"
61	v-model="editedItem.subjectName"	61	v-model="editedItem.subjectName"
62	item-text="subjectName"	62	item-text="subjectName"
63	item-value="subjectName"	63	item-value="subjectName"
64	name="Select Subject"	64	name="Select Subject"
65	required	65	required
66	></v-select>	66	></v-select>
67	</v-flex>	67	</v-flex>
68	</v-layout>	68	</v-layout>
69	</v-flex>	69	</v-flex>
70	<v-flex xs12 sm12>	70	<v-flex xs12 sm12>
71	<v-layout>	71	<v-layout>
72	<v-flex xs4 class="pt-4 subheading">	72	<v-flex xs4 class="pt-4 subheading">
73	<label class="right">Date:</label>	73	<label class="right">Date:</label>
74	</v-flex>	74	</v-flex>
75	<v-flex xs7 class="ml-3">	75	<v-flex xs7 class="ml-3">
76	<v-menu	76	<v-menu
77	ref="editDate"	77	ref="editDate"
78	:close-on-content-click="false"	78	:close-on-content-click="false"
79	v-model="editDate"	79	v-model="editDate"
80	:nudge-right="40"	80	:nudge-right="40"
81	:return-value.sync="editDate"	81	:return-value.sync="editDate"
82	lazy	82	lazy
83	transition="scale-transition"	83	transition="scale-transition"
84	offset-y	84	offset-y
85	full-width	85	full-width
86	min-width="290px"	86	min-width="290px"
87	>	87	>
88	<v-text-field	88	<v-text-field
89	slot="activator"	89	slot="activator"
90	v-model="editedItem.date"	90	v-model="editedItem.date"
91	label="Select Date"	91	label="Select Date"
92	append-icon="event"	92	append-icon="event"
93	readonly	93	readonly
94	></v-text-field>	94	></v-text-field>
95	<v-date-picker v-model="editedItem.date" @input="editDate = false"></v-date-picker>	95	<v-date-picker v-model="editedItem.date" @input="editDate = false"></v-date-picker>
96	</v-menu>	96	</v-menu>
97	</v-flex>	97	</v-flex>
98	</v-layout>	98	</v-layout>
99	</v-flex>	99	</v-flex>
100	<v-flex xs12 sm12>	100	<v-flex xs12 sm12>
101	<v-layout>	101	<v-layout>
102	<v-flex xs4 class="pt-4 subheading">	102	<v-flex xs4 class="pt-4 subheading">
103	<label class="right">Time From:</label>	103	<label class="right">Time From:</label>
104	</v-flex>	104	</v-flex>
105	<v-flex xs7 class="ml-3">	105	<v-flex xs7 class="ml-3">
106	<v-menu	106	<v-menu
107	ref="menuEdit"	107	ref="menuEdit"
108	:close-on-content-click="false"	108	:close-on-content-click="false"
109	v-model="menuEdit"	109	v-model="menuEdit"
110	:nudge-right="40"	110	:nudge-right="40"
111	:return-value.sync="editedItem.timeFrom"	111	:return-value.sync="editedItem.timeFrom"
112	lazy	112	lazy
113	transition="scale-transition"	113	transition="scale-transition"
114	offset-y	114	offset-y
115	full-width	115	full-width
116	max-width="290px"	116	max-width="290px"
117	min-width="290px"	117	min-width="290px"
118	>	118	>
119	<v-text-field	119	<v-text-field
120	slot="activator"	120	slot="activator"
121	v-model="editedItem.timeFrom"	121	v-model="editedItem.timeFrom"
122	label="Select your time From"	122	label="Select your time From"
123	append-icon="access_time"	123	append-icon="access_time"
124	readonly	124	readonly
125	></v-text-field>	125	></v-text-field>
126	<v-time-picker	126	<v-time-picker
127	v-model="editedItem.timeIn"	127	v-model="editedItem.timeIn"
128	@change="$refs.menuEdit.save(editedItem.timeIn)"	128	@change="$refs.menuEdit.save(editedItem.timeIn)"
129	></v-time-picker>	129	></v-time-picker>
130	</v-menu>	130	</v-menu>
131	</v-flex>	131	</v-flex>
132	</v-layout>	132	</v-layout>
133	</v-flex>	133	</v-flex>
134	<v-flex xs12 sm12>	134	<v-flex xs12 sm12>
135	<v-layout>	135	<v-layout>
136	<v-flex xs4 class="pt-4 subheading">	136	<v-flex xs4 class="pt-4 subheading">
137	<label class="right">Time To:</label>	137	<label class="right">Time To:</label>
138	</v-flex>	138	</v-flex>
139	<v-flex xs7 class="ml-3">	139	<v-flex xs7 class="ml-3">
140	<v-menu	140	<v-menu
141	ref="timeToEdit"	141	ref="timeToEdit"
142	:close-on-content-click="false"	142	:close-on-content-click="false"
143	v-model="timeToEdit"	143	v-model="timeToEdit"
144	:nudge-right="40"	144	:nudge-right="40"
145	:return-value.sync="editedItem.timeTo"	145	:return-value.sync="editedItem.timeTo"
146	lazy	146	lazy
147	transition="scale-transition"	147	transition="scale-transition"
148	offset-y	148	offset-y
149	full-width	149	full-width
150	max-width="290px"	150	max-width="290px"
151	min-width="290px"	151	min-width="290px"
152	>	152	>
153	<v-text-field	153	<v-text-field
154	slot="activator"	154	slot="activator"
155	v-model="editedItem.timeTo"	155	v-model="editedItem.timeTo"
156	label="Select your Time To"	156	label="Select your Time To"
157	append-icon="access_time"	157	append-icon="access_time"
158	readonly	158	readonly
159	></v-text-field>	159	></v-text-field>
160	<v-time-picker	160	<v-time-picker
161	v-model="editedItem.timeTo"	161	v-model="editedItem.timeTo"
162	@change="$refs.timeToEdit.save(editedItem.timeTo)"	162	@change="$refs.timeToEdit.save(editedItem.timeTo)"
163	></v-time-picker>	163	></v-time-picker>
164	</v-menu>	164	</v-menu>
165	</v-flex>	165	</v-flex>
166	</v-layout>	166	</v-layout>
167	</v-flex>	167	</v-flex>
168	<v-flex xs12 sm12>	168	<v-flex xs12 sm12>
169	<v-layout>	169	<v-layout>
170	<v-flex xs4 class="pt-4 subheading">	170	<v-flex xs4 class="pt-4 subheading">
171	<label class="right">Room:</label>	171	<label class="right">Room:</label>
172	</v-flex>	172	</v-flex>
173	<v-flex xs7 class="ml-3">	173	<v-flex xs7 class="ml-3">
174	<v-text-field	174	<v-text-field
175	placeholder="fill your room"	175	placeholder="fill your room"
176	v-model="editedItem.room"	176	v-model="editedItem.room"
177	@keyup.enter="save"	177	@keyup.enter="save"
178	></v-text-field>	178	></v-text-field>
179	</v-flex>	179	</v-flex>
180	</v-layout>	180	</v-layout>
181	</v-flex>	181	</v-flex>
182	</v-layout>	182	</v-layout>
183	<v-layout>	183	<v-layout>
184	<v-flex xs12>	184	<v-flex xs12>
185	<v-card-actions>	185	<v-card-actions>
186	<v-spacer></v-spacer>	186	<v-spacer></v-spacer>
187	<v-btn round dark @click="update" class="add-button">Save</v-btn>	187	<v-btn round dark @click="update" class="add-button">Save</v-btn>
188	</v-card-actions>	188	</v-card-actions>
189	</v-flex>	189	</v-flex>
190	</v-layout>	190	</v-layout>
191	</v-container>	191	</v-container>
192	</v-form>	192	</v-form>
193	</v-card-text>	193	</v-card-text>
194	</v-card>	194	</v-card>
195	</v-dialog>	195	</v-dialog>
196		196
197	<!-- **** PROFILE VIEW Exam Schedule DATA **** -->	197	<!-- **** PROFILE VIEW Exam Schedule DATA **** -->
198		198
199	<v-dialog v-model="profileExamScheduleDialog" max-width="600px">	199	<v-dialog v-model="profileExamScheduleDialog" max-width="600px">
200	<v-card flat class="card-style pa-3" dark>	200	<v-card flat class="card-style pa-3" dark>
201	<v-layout>	201	<v-layout>
202	<v-flex xs12>	202	<v-flex xs12>
203	<label class="title text-xs-center">View Exam Schedule</label>	203	<label class="title text-xs-center">View Exam Schedule</label>
204	<v-icon size="24" class="right" @click="profileExamScheduleDialog = false">cancel</v-icon>	204	<v-icon size="24" class="right" @click="profileExamScheduleDialog = false">cancel</v-icon>
205	</v-flex>	205	</v-flex>
206	</v-layout>	206	</v-layout>
207	<v-card-text>	207	<v-card-text>
208	<v-container grid-list-md>	208	<v-container grid-list-md>
209	<v-layout wrap>	209	<v-layout wrap>
210	<v-flex>	210	<v-flex>
211	<v-layout>	211	<v-layout>
212	<v-flex xs5 sm6>	212	<v-flex xs5 sm6>
213	<h5 class="right my-1">	213	<h5 class="right my-1">
214	<b>Exam Name:</b>	214	<b>Exam Name:</b>
215	</h5>	215	</h5>
216	</v-flex>	216	</v-flex>
217	<v-flex sm6 xs8>	217	<v-flex sm6 xs8>
218	<h5 class="my-1">{{ editedItem.examId}}</h5>	218	<h5 class="my-1">{{ editedItem.examId}}</h5>
219	</v-flex>	219	</v-flex>
220	</v-layout>	220	</v-layout>
221	<v-layout>	221	<v-layout>
222	<v-flex xs5 sm6>	222	<v-flex xs5 sm6>
223	<h5 class="right my-1">	223	<h5 class="right my-1">
224	<b>Class:</b>	224	<b>Class:</b>
225	</h5>	225	</h5>
226	</v-flex>	226	</v-flex>
227	<v-flex sm6 xs8>	227	<v-flex sm6 xs8>
228	<h5 class="my-1">{{ editedItem.classId }}</h5>	228	<h5 class="my-1">{{ editedItem.classId }}</h5>
229	</v-flex>	229	</v-flex>
230	</v-layout>	230	</v-layout>
231	<v-layout>	231	<v-layout>
232	<v-flex xs5 sm6>	232	<v-flex xs5 sm6>
233	<h5 class="right my-1">	233	<h5 class="right my-1">
234	<b>Section:</b>	234	<b>Section:</b>
235	</h5>	235	</h5>
236	</v-flex>	236	</v-flex>
237	<v-flex sm6 xs8>	237	<v-flex sm6 xs8>
238	<h5 class="my-1">{{ editedItem.sectionId }}</h5>	238	<h5 class="my-1">{{ editedItem.sectionId }}</h5>
239	</v-flex>	239	</v-flex>
240	</v-layout>	240	</v-layout>
241	<v-layout>	241	<v-layout>
242	<v-flex xs5 sm6>	242	<v-flex xs5 sm6>
243	<h5 class="right my-1">	243	<h5 class="right my-1">
244	<b>Subject Name:</b>	244	<b>Subject Name:</b>
245	</h5>	245	</h5>
246	</v-flex>	246	</v-flex>
247	<v-flex sm6 xs8>	247	<v-flex sm6 xs8>
248	<h5 class="my-1">{{ editedItem.subjectName }}</h5>	248	<h5 class="my-1">{{ editedItem.subjectName }}</h5>
249	</v-flex>	249	</v-flex>
250	</v-layout>	250	</v-layout>
251	<v-layout>	251	<v-layout>
252	<v-flex xs5 sm6>	252	<v-flex xs5 sm6>
253	<h5 class="right my-1">	253	<h5 class="right my-1">
254	<b>Date:</b>	254	<b>Date:</b>
255	</h5>	255	</h5>
256	</v-flex>	256	</v-flex>
257	<v-flex sm6 xs8>	257	<v-flex sm6 xs8>
258	<h5 class="my-1">{{ dates(editedItem.date) }}</h5>	258	<h5 class="my-1">{{ dates(editedItem.date) }}</h5>
259	</v-flex>	259	</v-flex>
260	</v-layout>	260	</v-layout>
261	<v-layout>	261	<v-layout>
262	<v-flex xs5 sm6>	262	<v-flex xs5 sm6>
263	<h5 class="right my-1">	263	<h5 class="right my-1">
264	<b>Time From:</b>	264	<b>Time From:</b>
265	</h5>	265	</h5>
266	</v-flex>	266	</v-flex>
267	<v-flex sm6 xs8>	267	<v-flex sm6 xs8>
268	<h5 class="my-1">{{ editedItem.timeFrom }}</h5>	268	<h5 class="my-1">{{ editedItem.timeFrom }}</h5>
269	</v-flex>	269	</v-flex>
270	</v-layout>	270	</v-layout>
271	<v-layout>	271	<v-layout>
272	<v-flex xs5 sm6>	272	<v-flex xs5 sm6>
273	<h5 class="right my-1">	273	<h5 class="right my-1">
274	<b>Time To:</b>	274	<b>Time To:</b>
275	</h5>	275	</h5>
276	</v-flex>	276	</v-flex>
277	<v-flex sm6 xs8>	277	<v-flex sm6 xs8>
278	<h5 class="my-1">{{ editedItem.timeTo }}</h5>	278	<h5 class="my-1">{{ editedItem.timeTo }}</h5>
279	</v-flex>	279	</v-flex>
280	</v-layout>	280	</v-layout>
281	<v-layout>	281	<v-layout>
282	<v-flex xs5 sm6>	282	<v-flex xs5 sm6>
283	<h5 class="right my-1">	283	<h5 class="right my-1">
284	<b>Room:</b>	284	<b>Room:</b>
285	</h5>	285	</h5>
286	</v-flex>	286	</v-flex>
287	<v-flex sm6 xs8>	287	<v-flex sm6 xs8>
288	<h5 class="my-1">{{ editedItem.room }}</h5>	288	<h5 class="my-1">{{ editedItem.room }}</h5>
289	</v-flex>	289	</v-flex>
290	</v-layout>	290	</v-layout>
291	</v-flex>	291	</v-flex>
292	</v-layout>	292	</v-layout>
293	</v-container>	293	</v-container>
294	</v-card-text>	294	</v-card-text>
295	</v-card>	295	</v-card>
296	</v-dialog>	296	</v-dialog>
297	<!-- *** Exam Schedule TABLE**** -->	297	<!-- *** Exam Schedule TABLE**** -->
298	<v-toolbar color="transparent" flat>	298	<v-toolbar color="transparent" flat>
299	<v-btn	299	<v-btn
300	fab	300	fab
301	dark	301	dark
302	class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"	302	class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
303	small	303	small
304	@click="addExamScheduleDialog = true"	304	@click="addExamScheduleDialog = true"
305	>	305	>
306	<v-icon dark>add</v-icon>	306	<v-icon dark>add</v-icon>
307	</v-btn>	307	</v-btn>
308	<v-btn	308	<v-btn
309	v-if="role != 'TEACHER' "	309	v-if="role != 'TEACHER' "
310	round	310	round
311	class="open-dialog-button hidden-sm-only hidden-xs-only"	311	class="open-dialog-button hidden-sm-only hidden-xs-only"
312	dark	312	dark
313	@click="addExamScheduleDialog = true"	313	@click="addExamScheduleDialog = true"
314	>	314	>
315	<v-icon class="white--text pr-1" size="20">add</v-icon>Add Exam Schedule	315	<v-icon class="white--text pr-1" size="20">add</v-icon>Add Exam Schedule
316	</v-btn>	316	</v-btn>
317	<v-spacer></v-spacer>	317	<v-spacer></v-spacer>
318	<v-flex xs8 sm3 md2 class="mr-3">	318	<v-flex xs8 sm3 md2 class="mr-3">
319	<v-select	319	<v-select
320	v-model="getScheduleData.classId"	320	v-model="getScheduleData.classId"
321	label="Select your class"	321	label="Select your class"
322	type="text"	322	type="text"
323	:items="classList"	323	:items="classList"
324	item-text="classNum"	324	item-text="classNum"
325	item-value="_id"	325	item-value="_id"
326	@change="getSections(getScheduleData.classId)"	326	@change="getSections(getScheduleData.classId)"
327	required	327	required
328	></v-select>	328	></v-select>
329	</v-flex>	329	</v-flex>
330	<v-flex xs8 sm3 md2 class="mr-3">	330	<v-flex xs8 sm3 md2 class="mr-3">
331	<v-select	331	<v-select
332	v-model="getScheduleData.sectionId"	332	v-model="getScheduleData.sectionId"
333	label="Select your section"	333	label="Select your section"
334	type="text"	334	type="text"
335	:items="addSection"	335	:items="addSection"
336	item-text="name"	336	item-text="name"
337	item-value="_id"	337	item-value="_id"
338	@change="getSchedulesList(getScheduleData.classId,getScheduleData.sectionId)"	338	@change="getSchedulesList(getScheduleData.classId,getScheduleData.sectionId)"
339	required	339	required
340	></v-select>	340	></v-select>
341	</v-flex>	341	</v-flex>
342	<v-card-title class="body-1" v-show="show">	342	<v-card-title class="body-1" v-show="show">
343	<v-btn icon large flat @click="displaySearch">	343	<v-btn icon large flat @click="displaySearch">
344	<v-avatar size="27">	344	<v-avatar size="27">
345	<img src="/static/icon/search.png" alt="icon" />	345	<img src="/static/icon/search.png" alt="icon" />
346	</v-avatar>	346	</v-avatar>
347	</v-btn>	347	</v-btn>
348	</v-card-title>	348	</v-card-title>
349	<v-flex xs8 sm8 md3 lg2 v-if="showSearch">	349	<v-flex xs8 sm8 md3 lg2 v-if="showSearch">
350	<v-layout>	350	<v-layout>
351	<v-text-field autofocus v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>	351	<v-text-field autofocus v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>
352	<v-icon @click="closeSearch" color="error">close</v-icon>	352	<v-icon @click="closeSearch" color="error">close</v-icon>
353	</v-layout>	353	</v-layout>
354	</v-flex>	354	</v-flex>
355	</v-toolbar>	355	</v-toolbar>
356	<v-data-table	356	<v-data-table
357	:headers="headers"	357	:headers="headers"
358	:items="ScheduleData"	358	:items="ScheduleData"
359	:pagination.sync="pagination"	359	:pagination.sync="pagination"
360	:search="search"	360	:search="search"
361	>	361	>
362	<template slot="items" slot-scope="props">	362	<template slot="items" slot-scope="props">
363	<tr class="tr">	363	<tr class="tr">
364	<td class="td td-row">{{ props.index + 1}}</td>	364	<td class="td td-row">{{ props.index + 1}}</td>
365	<td class="td td-row text-xs-center">{{ props.item.examId.examName}}</td>	365	<td class="td td-row text-xs-center">{{ props.item.examId.examName}}</td>
366	<td class="td td-row text-xs-center">{{ props.item.classId.classNum}}</td>	366	<td class="td td-row text-xs-center">{{ props.item.classId.classNum}}</td>
367	<td class="td td-row text-xs-center">{{ props.item.subjectName }}</td>	367	<td class="td td-row text-xs-center">{{ props.item.subjectName }}</td>
368	<td class="td td-row text-xs-center">{{ dates(props.item.date) }}</td>	368	<td class="td td-row text-xs-center">{{ dates(props.item.date) }}</td>
369	<td class="td td-row text-xs-center">{{ props.item.timeFrom }} - {{ props.item.timeTo }}</td>	369	<td class="td td-row text-xs-center">{{ props.item.timeFrom }} - {{ props.item.timeTo }}</td>
370	<td class="td td-row text-xs-center">{{ props.item.room }}</td>	370	<td class="td td-row text-xs-center">{{ props.item.room }}</td>
371	<td class="td td-row text-xs-center">	371	<td class="td td-row text-xs-center">
372	<span>	372	<span>
373	<v-tooltip top>	373	<v-tooltip top>
374	<img	374	<img
375	slot="activator"	375	slot="activator"
376	style="cursor:pointer; width:25px; height:25px; "	376	style="cursor:pointer; width:25px; height:25px; "
377	class="mr-3"	377	class="mr-3"
378	@click="profile(props.item)"	378	@click="profile(props.item)"
379	src="/static/icon/view.png"	379	src="/static/icon/view.png"
380	/>	380	/>
381	<span>View</span>	381	<span>View</span>
382	</v-tooltip>	382	</v-tooltip>
383	<v-tooltip top v-if="role != 'TEACHER' ">	383	<v-tooltip top v-if="role != 'TEACHER' ">
384	<img	384	<img
385	slot="activator"	385	slot="activator"
386	style="cursor:pointer; width:20px; height:18px; "	386	style="cursor:pointer; width:20px; height:18px; "
387	class="mr-3"	387	class="mr-3"
388	@click="editItem(props.item)"	388	@click="editItem(props.item)"
389	src="/static/icon/edit.png"	389	src="/static/icon/edit.png"
390	/>	390	/>
391	<span>Edit</span>	391	<span>Edit</span>
392	</v-tooltip>	392	</v-tooltip>
393	<v-tooltip top v-if="role != 'TEACHER' ">	393	<v-tooltip top v-if="role != 'TEACHER' ">
394	<img	394	<img
395	slot="activator"	395	slot="activator"
396	style="cursor:pointer; width:20px; height:20px; "	396	style="cursor:pointer; width:20px; height:20px; "
397	@click="deleteSchedule(props.item)"	397	@click="deleteSchedule(props.item)"
398	src="/static/icon/delete.png"	398	src="/static/icon/delete.png"
399	/>	399	/>
400	<span>Delete</span>	400	<span>Delete</span>
401	</v-tooltip>	401	</v-tooltip>
402	</span>	402	</span>
403	</td>	403	</td>
404	</tr>	404	</tr>
405	</template>	405	</template>
406	<v-alert	406	<v-alert
407	slot="no-results"	407	slot="no-results"
408	:value="true"	408	:value="true"
409	color="error"	409	color="error"
410	icon="warning"	410	icon="warning"
411	>Your search for "{{ search }}" found no results.</v-alert>	411	>Your search for "{{ search }}" found no results.</v-alert>
412	</v-data-table>	412	</v-data-table>
413		413
414	<!-- **** ADD Exam Schedule **** -->	414	<!-- **** ADD Exam Schedule **** -->
415	<v-dialog v-model="addExamScheduleDialog" max-width="600">	415	<v-dialog v-model="addExamScheduleDialog" max-width="600">
416	<v-card flat class="card-style pa-2" dark>	416	<v-card flat class="card-style pa-2" dark>
417	<v-layout>	417	<v-layout>
418	<v-flex xs12>	418	<v-flex xs12>
419	<label class="title text-xs-center">Add Exam Schedule</label>	419	<label class="title text-xs-center">Add Exam Schedule</label>
420	<v-icon size="24" class="right" @click="addExamScheduleDialog = false">cancel</v-icon>	420	<v-icon size="24" class="right" @click="$refs.form.reset();addExamScheduleDialog = false">cancel</v-icon>
421	</v-flex>	421	</v-flex>
422	</v-layout>	422	</v-layout>
423	<v-form ref="form" v-model="valid" lazy-validation>	423	<v-form ref="form" v-model="valid" lazy-validation>
424	<v-container fluid>	424	<v-container fluid>
425	<v-flex xs12>	425	<v-flex xs12>
426	<v-layout>	426	<v-layout>
427	<v-flex xs5 class="pt-4 subheading">	427	<v-flex xs5 class="pt-4 subheading">
428	<label class="right">Exam Name:</label>	428	<label class="right">Exam Name:</label>
429	</v-flex>	429	</v-flex>
430	<v-flex xs7 sm7 md6 class="ml-3">	430	<v-flex xs7 sm7 md6 class="ml-3">
431	<v-select	431	<v-select
432	label="Select your Exam Name"	432	label="Select your Exam Name"
433	:rules="examRules"	433	:rules="examRules"
434	:items="examList"	434	:items="examList"
435	v-model="addSchedule.examId"	435	v-model="addSchedule.examId"
436	item-text="examName"	436	item-text="examName"
437	item-value="_id"	437	item-value="_id"
438	></v-select>	438	></v-select>
439	</v-flex>	439	</v-flex>
440	</v-layout>	440	</v-layout>
441	</v-flex>	441	</v-flex>
442	<v-flex xs12>	442	<v-flex xs12>
443	<v-layout>	443	<v-layout>
444	<v-flex xs5 class="pt-4 subheading">	444	<v-flex xs5 class="pt-4 subheading">
445	<label class="right">Class:</label>	445	<label class="right">Class:</label>
446	</v-flex>	446	</v-flex>
447	<v-flex xs7 sm7 md6 class="ml-3">	447	<v-flex xs7 sm7 md6 class="ml-3">
448	<v-select	448	<v-select
449	v-model="addSchedule.classId"	449	v-model="addSchedule.classId"
450	label="Select your class"	450	label="Select your class"
451	type="text"	451	type="text"
452	:items="classList"	452	:items="classList"
453	item-text="classNum"	453	item-text="classNum"
454	item-value="_id"	454	item-value="_id"
455	:rules="classRules"	455	:rules="classRules"
456	@change="getSections(addSchedule.classId)"	456	@change="getSections(addSchedule.classId)"
457	required	457	required
458	></v-select>	458	></v-select>
459	</v-flex>	459	</v-flex>
460	</v-layout>	460	</v-layout>
461	</v-flex>	461	</v-flex>
462	<v-flex xs12>	462	<v-flex xs12>
463	<v-layout>	463	<v-layout>
464	<v-flex xs5 class="pt-4 subheading">	464	<v-flex xs5 class="pt-4 subheading">
465	<label class="right">Section:</label>	465	<label class="right">Section:</label>
466	</v-flex>	466	</v-flex>
467	<v-flex xs7 sm7 md6 class="ml-3">	467	<v-flex xs7 sm7 md6 class="ml-3">
468	<v-select	468	<v-select
469	:items="addSection"	469	:items="addSection"
470	label="Select Section"	470	label="Select Section"
471	v-model="addSchedule.sectionId"	471	v-model="addSchedule.sectionId"
472	item-text="name"	472	item-text="name"
473	item-value="_id"	473	item-value="_id"
474	name="Select Section"	474	name="Select Section"
475	:rules="sectionRules"	475	:rules="sectionRules"
476	required	476	required
477	></v-select>	477	></v-select>
478	</v-flex>	478	</v-flex>
479	</v-layout>	479	</v-layout>
480	</v-flex>	480	</v-flex>
481	<v-flex xs12>	481	<v-flex xs12>
482	<v-layout>	482	<v-layout>
483	<v-flex xs5 class="pt-4 subheading">	483	<v-flex xs5 class="pt-4 subheading">
484	<label class="right">Subject Name:</label>	484	<label class="right">Subject Name:</label>
485	</v-flex>	485	</v-flex>
486	<v-flex xs7 sm7 md6 class="ml-3">	486	<v-flex xs7 sm7 md6 class="ml-3">
487	<v-select	487	<v-select
488	:items="subjects"	488	:items="subjects"
489	label="Select Subject"	489	label="Select Subject"
490	v-model="addSchedule.subjectName"	490	v-model="addSchedule.subjectName"
491	item-text="subjectName"	491	item-text="subjectName"
492	item-value="subjectName"	492	item-value="subjectName"
493	name="Select Section"	493	name="Select Section"
494	:rules="subjectRules"	494	:rules="subjectRules"
495	required	495	required
496	></v-select>	496	></v-select>
497	</v-flex>	497	</v-flex>
498	</v-layout>	498	</v-layout>
499	</v-flex>	499	</v-flex>
500	<v-flex xs12>	500	<v-flex xs12>
501	<v-layout>	501	<v-layout>
502	<v-flex xs5 class="pt-4 subheading">	502	<v-flex xs5 class="pt-4 subheading">
503	<label class="right">Date:</label>	503	<label class="right">Date:</label>
504	</v-flex>	504	</v-flex>
505	<v-flex xs7 sm7 md6 class="ml-3">	505	<v-flex xs7 sm7 md6 class="ml-3">
506	<v-menu	506	<v-menu
507	ref="menu2"	507	ref="menu2"
508	:close-on-content-click="false"	508	:close-on-content-click="false"
509	v-model="menu2"	509	v-model="menu2"
510	:nudge-right="40"	510	:nudge-right="40"
511	:return-value.sync="addSchedule.date"	511	:return-value.sync="addSchedule.date"
512	lazy	512	lazy
513	transition="scale-transition"	513	transition="scale-transition"
514	offset-y	514	offset-y
515	full-width	515	full-width
516	min-width="290px"	516	min-width="290px"
517	>	517	>
518	<v-text-field	518	<v-text-field
519	slot="activator"	519	slot="activator"
520	v-model="addSchedule.date"	520	v-model="addSchedule.date"
521	:rules="examScheduleDateRules"	521	:rules="examScheduleDateRules"
522	label="Select Date"	522	label="Select Date"
523	append-icon="event"	523	append-icon="event"
524	readonly	524	readonly
525	></v-text-field>	525	></v-text-field>
526	<v-date-picker	526	<v-date-picker
527	v-model="addSchedule.date"	527	v-model="addSchedule.date"
528	@input="$refs.menu2.save(addSchedule.date)"	528	@input="$refs.menu2.save(addSchedule.date)"
529	></v-date-picker>	529	></v-date-picker>
530	</v-menu>	530	</v-menu>
531	</v-flex>	531	</v-flex>
532	</v-layout>	532	</v-layout>
533	</v-flex>	533	</v-flex>
534	<v-flex xs12>	534	<v-flex xs12>
535	<v-layout>	535	<v-layout>
536	<v-flex xs5 class="pt-4 subheading">	536	<v-flex xs5 class="pt-4 subheading">
537	<label class="right">Time From:</label>	537	<label class="right">Time From:</label>
538	</v-flex>	538	</v-flex>
539	<v-flex xs7 sm7 md6 class="ml-3">	539	<v-flex xs7 sm7 md6 class="ml-3">
540	<v-menu	540	<v-menu
541	ref="menuA"	541	ref="menuA"
542	:close-on-content-click="false"	542	:close-on-content-click="false"
543	v-model="menuB"	543	v-model="menuB"
544	:nudge-right="40"	544	:nudge-right="40"
545	:return-value.sync="addSchedule.timeFrom"	545	:return-value.sync="addSchedule.timeFrom"
546	lazy	546	lazy
547	transition="scale-transition"	547	transition="scale-transition"
548	offset-y	548	offset-y
549	full-width	549	full-width
550	max-width="290px"	550	max-width="290px"
551	min-width="290px"	551	min-width="290px"
552	>	552	>
553	<v-text-field	553	<v-text-field
554	slot="activator"	554	slot="activator"
555	v-model="addSchedule.timeIn"	555	v-model="addSchedule.timeIn"
556	label="Select your time From"	556	label="Select your time From"
557	append-icon="access_time"	557	append-icon="access_time"
558	:rules="timeInRules"	558	:rules="timeInRules"
559	readonly	559	readonly
560	></v-text-field>	560	></v-text-field>
561	<v-time-picker	561	<v-time-picker
562	v-model="addSchedule.timeIn"	562	v-model="addSchedule.timeIn"
563	@change="$refs.menuA.save(addSchedule.timeIn)"	563	@change="$refs.menuA.save(addSchedule.timeIn)"
564	></v-time-picker>	564	></v-time-picker>
565	</v-menu>	565	</v-menu>
566	</v-flex>	566	</v-flex>
567	</v-layout>	567	</v-layout>
568	</v-flex>	568	</v-flex>
569	<v-flex xs12>	569	<v-flex xs12>
570	<v-layout>	570	<v-layout>
571	<v-flex xs5 class="pt-4 subheading">	571	<v-flex xs5 class="pt-4 subheading">
572	<label class="right">Time To:</label>	572	<label class="right">Time To:</label>
573	</v-flex>	573	</v-flex>
574	<v-flex xs7 sm7 md6 class="ml-3">	574	<v-flex xs7 sm7 md6 class="ml-3">
575	<v-menu	575	<v-menu
576	ref="menu"	576	ref="menu"
577	:close-on-content-click="false"	577	:close-on-content-click="false"
578	v-model="menu1"	578	v-model="menu1"
579	:nudge-right="40"	579	:nudge-right="40"
580	:return-value.sync="addSchedule.timeTo"	580	:return-value.sync="addSchedule.timeTo"
581	lazy	581	lazy
582	transition="scale-transition"	582	transition="scale-transition"
583	offset-y	583	offset-y
584	full-width	584	full-width
585	max-width="290px"	585	max-width="290px"
586	min-width="290px"	586	min-width="290px"
587	>	587	>
588	<v-text-field	588	<v-text-field
589	slot="activator"	589	slot="activator"
590	v-model="addSchedule.timeTo"	590	v-model="addSchedule.timeTo"
591	label="Select your Time To"	591	label="Select your Time To"
592	append-icon="access_time"	592	append-icon="access_time"
593	:rules="timeOutRules"	593	:rules="timeOutRules"
594	readonly	594	readonly
595	></v-text-field>	595	></v-text-field>
596	<v-time-picker	596	<v-time-picker
597	v-model="addSchedule.timeTo"	597	v-model="addSchedule.timeTo"
598	@change="$refs.menu.save(addSchedule.timeTo)"	598	@change="$refs.menu.save(addSchedule.timeTo)"
599	></v-time-picker>	599	></v-time-picker>
600	</v-menu>	600	</v-menu>
601	</v-flex>	601	</v-flex>
602	</v-layout>	602	</v-layout>
603	</v-flex>	603	</v-flex>
604	<v-flex xs12>	604	<v-flex xs12>
605	<v-layout>	605	<v-layout>
606	<v-flex xs5 class="pt-4 subheading">	606	<v-flex xs5 class="pt-4 subheading">
607	<label class="right">Room:</label>	607	<label class="right">Room:</label>
608	</v-flex>	608	</v-flex>
609	<v-flex xs7 sm7 md6 class="ml-3">	609	<v-flex xs7 sm7 md6 class="ml-3">
610	<v-text-field	610	<v-text-field
611	placeholder="fill your room"	611	placeholder="fill your room"
612	:rules="roomRules"	612	:rules="roomRules"
613	v-model="addSchedule.room"	613	v-model="addSchedule.room"
614	@keyup.enter="submit"	614	@keyup.enter="submit"
615	></v-text-field>	615	></v-text-field>
616	</v-flex>	616	</v-flex>
617	</v-layout>	617	</v-layout>
618	</v-flex>	618	</v-flex>
619	<v-layout>	619	<v-layout>
620	<v-flex xs12>	620	<v-flex xs12>
621	<v-card-actions>	621	<v-card-actions>
622	<v-spacer class="hidden-xs-only"></v-spacer>	622	<v-spacer class="hidden-xs-only"></v-spacer>
623	<v-btn @click="clear" round dark class="clear-button">clear</v-btn>	623	<v-btn @click="clear" round dark class="clear-button">clear</v-btn>
624	<v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>	624	<v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
625	</v-card-actions>	625	</v-card-actions>
626	</v-flex>	626	</v-flex>
627	</v-layout>	627	</v-layout>
628	</v-container>	628	</v-container>
629	</v-form>	629	</v-form>
630	</v-card>	630	</v-card>
631	</v-dialog>	631	</v-dialog>
632	<v-snackbar	632	<v-snackbar
633	:timeout="timeout"	633	:timeout="timeout"
634	:top="y === 'top'"	634	:top="y === 'top'"
635	:right="x === 'right'"	635	:right="x === 'right'"
636	:vertical="mode === 'vertical'"	636	:vertical="mode === 'vertical'"
637	v-model="snackbar"	637	v-model="snackbar"
638	:color="color"	638	:color="color"
639	>{{ text }}</v-snackbar>	639	>{{ text }}</v-snackbar>
640	<div class="loader" v-if="showLoader">	640	<div class="loader" v-if="showLoader">
641	<v-progress-circular indeterminate color="white"></v-progress-circular>	641	<v-progress-circular indeterminate color="white"></v-progress-circular>
642	</div>	642	</div>
643	</v-container>	643	</v-container>
644	</template>	644	</template>
645		645
646	<script>	646	<script>
647	import http from "@/Services/http.js";	647	import http from "@/Services/http.js";
648	import moment from "moment";	648	import moment from "moment";
649		649
650	export default {	650	export default {
651	data: () => ({	651	data: () => ({
652	snackbar: false,	652	snackbar: false,
653	date: null,	653	date: null,
654	editDate: false,	654	editDate: false,
655	menu1: false,	655	menu1: false,
656	menuB: false,	656	menuB: false,
657	menu2: false,	657	menu2: false,
658	menuEdit: false,	658	menuEdit: false,
659	timeToEdit: false,	659	timeToEdit: false,
660	show: true,	660	show: true,
661	showSearch: false,	661	showSearch: false,
662	addExamScheduleDialog: false,	662	addExamScheduleDialog: false,
663	color: "",	663	color: "",
664	y: "top",	664	y: "top",
665	x: "right",	665	x: "right",
666	mode: "",	666	mode: "",
667	timeout: 10000,	667	timeout: 10000,
668	text: "",	668	text: "",
669	loading: false,	669	loading: false,
670	date: null,	670	date: null,
671	search: "",	671	search: "",
672	showLoader: false,	672	showLoader: false,
673	editExamScheduleDialog: false,	673	editExamScheduleDialog: false,
674	profileExamScheduleDialog: false,	674	profileExamScheduleDialog: false,
675	valid: true,	675	valid: true,
676	role: "",	676	role: "",
677	pagination: {	677	pagination: {
678	rowsPerPage: 10	678	rowsPerPage: 10
679	},	679	},
680	examRules: [v => !!v \|\| "Exam Name is required"],	680	examRules: [v => !!v \|\| "Exam Name is required"],
681	classRules: [v => !!v \|\| "Class Name is required"],	681	classRules: [v => !!v \|\| "Class Name is required"],
682	sectionRules: [v => !!v \|\| "section is required"],	682	sectionRules: [v => !!v \|\| "section is required"],
683	subjectRules: [v => !!v \|\| "Subject is required"],	683	subjectRules: [v => !!v \|\| "Subject is required"],
684	timeInRules: [v => !!v \|\| "Time In is required"],	684	timeInRules: [v => !!v \|\| "Time In is required"],
685	timeOutRules: [v => !!v \|\| "time Out s is required"],	685	timeOutRules: [v => !!v \|\| "time Out s is required"],
686	roomRules: [v => !!v \|\| "Room is required"],	686	roomRules: [v => !!v \|\| "Room is required"],
687	examScheduleDateRules: [v => !!v \|\| "Date is required"],	687	examScheduleDateRules: [v => !!v \|\| "Date is required"],
688	headers: [	688	headers: [
689	{	689	{
690	align: "",	690	align: "",
691	text: "No",	691	text: "No",
692	sortable: false,	692	sortable: false,
693	value: "No"	693	value: "No"
694	},	694	},
695	{	695	{
696	text: "Exam Name",	696	text: "Exam Name",
697	vaue: "examId.examName",	697	vaue: "examId.examName",
698	sortable: false,	698	sortable: false,
699	align: "center"	699	align: "center"
700	},	700	},
701	{	701	{
702	text: "Class",	702	text: "Class",
703	value: "classId.classNum",	703	value: "classId.classNum",
704	sortable: false,	704	sortable: false,
705	align: "center"	705	align: "center"
706	},	706	},
707	// {	707	// {
708	// text: "Section",	708	// text: "Section",
709	// value: "sectionId.name",	709	// value: "sectionId.name",
710	// sortable: false,	710	// sortable: false,
711	// align: "center"	711	// align: "center"
712	// },	712	// },
713	{	713	{
714	text: "Subject Name",	714	text: "Subject Name",
715	value: "subjectName",	715	value: "subjectName",
716	sortable: false,	716	sortable: false,
717	align: "center"	717	align: "center"
718	},	718	},
719	{	719	{
720	text: "Date",	720	text: "Date",
721	value: "date",	721	value: "date",
722	sortable: false,	722	sortable: false,
723	align: "center"	723	align: "center"
724	},	724	},
725	{	725	{
726	text: "Time",	726	text: "Time",
727	value: "timeFrom",	727	value: "timeFrom",
728	sortable: false,	728	sortable: false,
729	align: "center"	729	align: "center"
730	},	730	},
731	{	731	{
732	text: "Room",	732	text: "Room",
733	value: "room",	733	value: "room",
734	sortable: false,	734	sortable: false,
735	align: "center"	735	align: "center"
736	},	736	},
737	{ text: "Action", value: "", sortable: false, align: "center" }	737	{ text: "Action", value: "", sortable: false, align: "center" }
738	],	738	],
739	classList: [],	739	classList: [],
740	addSection: [],	740	addSection: [],
741	examList: [],	741	examList: [],
742	subjects: [],	742	subjects: [],
743	addSchedule: {},	743	addSchedule: {},
744	editedItem: {	744	editedItem: {
745	sectionId: {	745	sectionId: {
746	name: ""	746	name: ""
747	}	747	}
748	},	748	},
749	getScheduleData: {},	749	getScheduleData: {},
750	ScheduleData: [],	750	ScheduleData: [],
751	token: ""	751	token: ""
752	}),	752	}),
753	methods: {	753	methods: {
754	dates: function(date) {	754	dates: function(date) {
755	return moment(date).format("MMMM DD, YYYY");	755	return moment(date).format("MMMM DD, YYYY");
756	},	756	},
757	pickFile() {	757	pickFile() {
758	this.$refs.image.click();	758	this.$refs.image.click();
759	},	759	},
760	getSchedulesList() {	760	getSchedulesList() {
761	if (this.addSchedule.classId) {	761	if (this.addSchedule.classId) {
762	this.getScheduleData.classId = this.addSchedule.classId;	762	this.getScheduleData.classId = this.addSchedule.classId;
763	}	763	}
764	this.showLoader = true;	764	this.showLoader = true;
765	http()	765	http()
766	.get("/getSchedulesList", {	766	.get("/getSchedulesList", {
767	params: {	767	params: {
768	classId: this.getScheduleData.classId,	768	classId: this.getScheduleData.classId,
769	sectionId: this.getScheduleData.sectionId	769	sectionId: this.getScheduleData.sectionId
770	},	770	},
771	headers: { Authorization: "Bearer " + this.token }	771	headers: { Authorization: "Bearer " + this.token }
772	})	772	})
773	.then(response => {	773	.then(response => {
774	this.ScheduleData = response.data.data;	774	this.ScheduleData = response.data.data;
775	// console.log("this.ScheduleData", this.ScheduleData);	775	// console.log("this.ScheduleData", this.ScheduleData);
776	this.showLoader = false;	776	this.showLoader = false;
777	})	777	})
778	.catch(error => {	778	.catch(error => {
779	// console.log("err====>", err);	779	// console.log("err====>", err);
780	this.showLoader = false;	780	this.showLoader = false;
781	this.loadingSearch = false;	781	this.loadingSearch = false;
782	this.snackbar = true;	782	this.snackbar = true;
783	this.color = "error";	783	this.color = "error";
784	this.text = error.response.data.message;	784	this.text = error.response.data.message;
785	if (error.response.status === 401) {	785	if (error.response.status === 401) {
786	this.$router.replace({ path: "/" });	786	this.$router.replace({ path: "/" });
787	this.$store.dispatch("setToken", null);	787	this.$store.dispatch("setToken", null);
788	this.$store.dispatch("Id", null);	788	this.$store.dispatch("Id", null);
789	}	789	}
790	});	790	});
791	},	791	},
792	editItem(item) {	792	editItem(item) {
793	// console.log("item", item);	793	// console.log("item", item);
794	this.editedIndex = this.ScheduleData.indexOf(item);	794	this.editedIndex = this.ScheduleData.indexOf(item);
795	this.editedItem = Object.assign({}, item);	795	this.editedItem = Object.assign({}, item);
796	this.editedItem.examId = this.editedItem.examId._id;	796	this.editedItem.examId = this.editedItem.examId._id;
797	this.editedItem.classId = this.editedItem.classId._id;	797	this.editedItem.classId = this.editedItem.classId._id;
798	this.editedItem.sectionId =	798	this.editedItem.sectionId =
799	this.editedItem.sectionId === null	799	this.editedItem.sectionId === null
800	? (this.editedItem.sectionId = this.editedItem.sectionId = "")	800	? (this.editedItem.sectionId = this.editedItem.sectionId = "")
801	: this.editedItem.sectionId._id;	801	: this.editedItem.sectionId._id;
802	this.editedItem.date =	802	this.editedItem.date =
803	this.editedItem.date != undefined	803	this.editedItem.date != undefined
804	? (this.editedItem.date = this.editedItem.date.substring(0, 10))	804	? (this.editedItem.date = this.editedItem.date.substring(0, 10))
805	: (this.editedItem.date = "");	805	: (this.editedItem.date = "");
806	this.editExamScheduleDialog = true;	806	this.editExamScheduleDialog = true;
807	},	807	},
808	profile(item) {	808	profile(item) {
809	this.editedIndex = this.ScheduleData.indexOf(item);	809	this.editedIndex = this.ScheduleData.indexOf(item);
810	this.editedItem = Object.assign({}, item);	810	this.editedItem = Object.assign({}, item);
811	this.editedItem.examId = this.editedItem.examId.examName;	811	this.editedItem.examId = this.editedItem.examId.examName;
812	this.editedItem.classId = this.editedItem.classId.classNum;	812	this.editedItem.classId = this.editedItem.classId.classNum;
813	this.editedItem.sectionId =	813	this.editedItem.sectionId =
814	this.editedItem.sectionId === null	814	this.editedItem.sectionId === null
815	? (this.editedItem.sectionId = this.editedItem.sectionId = "")	815	? (this.editedItem.sectionId = this.editedItem.sectionId = "")
816	: this.editedItem.sectionId.name;	816	: this.editedItem.sectionId.name;
817	this.profileExamScheduleDialog = true;	817	this.profileExamScheduleDialog = true;
818	},	818	},
819	deleteSchedule(item) {	819	deleteSchedule(item) {
820	let deleteSchedule = {	820	let deleteSchedule = {
821	scheduleId: item._id	821	scheduleId: item._id
822	};	822	};
823	http()	823	http()
824	.delete(	824	.delete(
825	"/deleteSchedule",	825	"/deleteSchedule",
826	confirm("Are you sure you want to Delete this?") && {	826	confirm("Are you sure you want to Delete this?") && {
827	params: deleteSchedule	827	params: deleteSchedule
828	}	828	}
829	)	829	)
830	.then(response => {	830	.then(response => {
831	this.snackbar = true;	831	this.snackbar = true;
832	this.text = response.data.message;	832	this.text = response.data.message;
833	this.color = "green";	833	this.color = "green";
834	this.getSchedulesList();	834	this.getSchedulesList();
835	})	835	})
836	.catch(error => {	836	.catch(error => {
837	this.snackbar = true;	837	this.snackbar = true;
838	this.color = "error";	838	this.color = "error";
839	this.text = error.response.data.message;	839	this.text = error.response.data.message;
840	});	840	});
841	},	841	},
842	close() {	842	close() {
843	this.dialog = false;	843	this.dialog = false;
844	},	844	},
845	submit() {	845	submit() {
846	if (this.$refs.form.validate()) {	846	if (this.$refs.form.validate()) {
847	this.loading = true;	847	this.loading = true;
848	http()	848	http()
849	.post("/createSchedule", this.addSchedule)	849	.post("/createSchedule", this.addSchedule)
850	.then(response => {	850	.then(response => {
851	this.loading = false;	851	this.loading = false;
852	this.snackbar = true;	852	this.snackbar = true;
853	this.text = response.data.message;	853	this.text = response.data.message;
854	this.color = "green";	854	this.color = "green";
855	this.addExamScheduleDialog = false;	855	this.addExamScheduleDialog = false;
856	this.getSchedulesList();	856	this.getSchedulesList();
857	this.clear();	857	this.clear();
858	})	858	})
859	.catch(error => {	859	.catch(error => {
860	this.snackbar = true;	860	this.snackbar = true;
861	this.text = error.response.data.message;	861	this.text = error.response.data.message;
862	this.color = "red";	862	this.color = "red";
863	this.loading = false;	863	this.loading = false;
864	});	864	});
865	}	865	}
866	},	866	},
867	clear() {	867	clear() {
868	this.$refs.form.reset();	868	this.$refs.form.reset();
869	this.disable = false;	869	this.disable = false;
870	this.loading = false;	870	this.loading = false;
871	},	871	},
872	update() {	872	update() {
873	this.editedItem.scheduleId = this.editedItem._id;	873	this.editedItem.scheduleId = this.editedItem._id;
874	http()	874	http()
875	.put("/updateSchedule", this.editedItem)	875	.put("/updateSchedule", this.editedItem)
876	.then(response => {	876	.then(response => {
877	this.snackbar = true;	877	this.snackbar = true;
878	this.text = "Successfully Edit Exam Schedule";	878	this.text = "Successfully Edit Exam Schedule";
879	this.color = "green";	879	this.color = "green";
880	this.editExamScheduleDialog = false;	880	this.editExamScheduleDialog = false;
881	this.getSchedulesList();	881	this.getSchedulesList();
882	this.close();	882	this.close();
883	})	883	})
884	.catch(error => {	884	.catch(error => {
885	this.snackbar = true;	885	this.snackbar = true;
886	this.text = error.response.data.messages;	886	this.text = error.response.data.messages;
887	this.color = "error";	887	this.color = "error";
888	this.loading = false;	888	this.loading = false;
889	});	889	});
890	},	890	},
891	getClass() {	891	getClass() {
892	http()	892	http()
893	.get("/getClassesList", {	893	.get("/getClassesList", {
894	headers: { Authorization: "Bearer " + this.token }	894	headers: { Authorization: "Bearer " + this.token }
895	})	895	})
896	.then(response => {	896	.then(response => {
897	this.classList = response.data.data;	897	this.classList = response.data.data;
898	})	898	})
899	.catch(err => {	899	.catch(err => {
900	// console.log("err====>", err);	900	// console.log("err====>", err);
901	});	901	});
902	},	902	},
903	getSections(_id) {	903	getSections(_id) {
904	for (let i = 0; i < this.classList.length; i++) {	904	for (let i = 0; i < this.classList.length; i++) {
905	if (_id == this.classList[i]._id) {	905	if (_id == this.classList[i]._id) {
906	this.subjects = this.classList[i].subjects;	906	this.subjects = this.classList[i].subjects;
907	}	907	}
908	}	908	}
909	http()	909	http()
910	.get(	910	.get(
911	"/getSectionsList",	911	"/getSectionsList",
912	{ params: { classId: _id } },	912	{ params: { classId: _id } },
913	{	913	{
914	headers: { Authorization: "Bearer " + this.token }	914	headers: { Authorization: "Bearer " + this.token }
915	}	915	}
916	)	916	)
917	.then(response => {	917	.then(response => {
918	this.addSection = response.data.data;	918	this.addSection = response.data.data;
919	})	919	})
920	.catch(err => {});	920	.catch(err => {});
921	},	921	},
922	getExamList() {	922	getExamList() {
923	this.showLoader = true;	923	this.showLoader = true;
924	this.loadingSearch = true;	924	this.loadingSearch = true;
925	http()	925	http()
926	.get("/getExamsList", {	926	.get("/getExamsList", {
927	headers: { Authorization: "Bearer " + this.token }	927	headers: { Authorization: "Bearer " + this.token }
928	})	928	})
929	.then(response => {	929	.then(response => {
930	this.examList = response.data.data;	930	this.examList = response.data.data;
931	this.showLoader = false;	931	this.showLoader = false;
932	this.loadingSearch = false;	932	this.loadingSearch = false;
933	})	933	})
934	.catch(error => {	934	.catch(error => {
935	this.showLoader = false;	935	this.showLoader = false;
936	this.loadingSearch = false;	936	this.loadingSearch = false;
937	this.snackbar = true;	937	this.snackbar = true;
938	this.text = error.response.data.message;	938	this.text = error.response.data.message;
939	if (error.response.status === 401) {	939	if (error.response.status === 401) {
940	this.$router.replace({ path: "/" });	940	this.$router.replace({ path: "/" });
941	this.$store.dispatch("setToken", null);	941	this.$store.dispatch("setToken", null);
942	this.$store.dispatch("Id", null);	942	this.$store.dispatch("Id", null);
943	}	943	}
944	});	944	});
945	},	945	},
946	displaySearch() {	946	displaySearch() {
947	(this.show = false), (this.showSearch = true);	947	(this.show = false), (this.showSearch = true);
948	},	948	},
949	closeSearch() {	949	closeSearch() {
950	this.showSearch = false;	950	this.showSearch = false;
951	this.show = true;	951	this.show = true;
952	this.search = "";	952	this.search = "";
953	}	953	}
954	},	954	},
955	mounted() {	955	mounted() {
956	this.token = this.$store.state.token;	956	this.token = this.$store.state.token;
957	this.getClass();	957	this.getClass();
958	this.getExamList();	958	this.getExamList();
959	this.role = this.$store.state.role;	959	this.role = this.$store.state.role;
960	}	960	}
961	};	961	};
962	</script>	962	</script>

src/pages/Exam/grade.vue

Diff comments View file @7efe027

1	<template>	1	<template>
2	<v-container fluid class="body-color">	2	<v-container fluid class="body-color">
3	<!-- **** EDIT GRADE **** -->	3	<!-- **** EDIT GRADE **** -->
4	<v-dialog v-model="editGradeDialog" max-width="500px">	4	<v-dialog v-model="editGradeDialog" max-width="500px">
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 Grade</label>	8	<label class="title text-xs-center">Edit Grade</label>
9	<v-icon size="24" class="right" @click="editGradeDialog = false">cancel</v-icon>	9	<v-icon size="24" class="right" @click="editGradeDialog = false">cancel</v-icon>
10	</v-flex>	10	</v-flex>
11	</v-layout>	11	</v-layout>
12	<v-form ref="formEditGrade" v-model="validEditGrade" lazy-validation>	12	<v-form ref="formEditGrade" v-model="validEditGrade" lazy-validation>
13	<v-container fluid>	13	<v-container fluid>
14	<v-layout wrap>	14	<v-layout wrap>
15	<v-flex xs12 sm12>	15	<v-flex xs12 sm12>
16	<v-layout>	16	<v-layout>
17	<v-flex xs4 class="pt-4 subheading">	17	<v-flex xs4 class="pt-4 subheading">
18	<label class="right">Grade Name:</label>	18	<label class="right">Grade Name:</label>
19	</v-flex>	19	</v-flex>
20	<v-flex xs7 class="ml-3">	20	<v-flex xs7 class="ml-3">
21	<v-text-field	21	<v-text-field
22	placeholder="fill your Grade Name"	22	placeholder="fill your Grade Name"
23	v-model="editedItem.gradeName"	23	v-model="editedItem.gradeName"
24	type="text"	24	type="text"
25	:rules="editGradeName"	25	:rules="editGradeName"
26	></v-text-field>	26	></v-text-field>
27	</v-flex>	27	</v-flex>
28	</v-layout>	28	</v-layout>
29	</v-flex>	29	</v-flex>
30	<v-flex xs12 sm12>	30	<v-flex xs12 sm12>
31	<v-layout>	31	<v-layout>
32	<v-flex xs4 class="pt-4 subheading">	32	<v-flex xs4 class="pt-4 subheading">
33	<label class="right">Grade Point:</label>	33	<label class="right">Grade Point:</label>
34	</v-flex>	34	</v-flex>
35	<v-flex xs7 class="ml-3">	35	<v-flex xs7 class="ml-3">
36	<v-text-field	36	<v-text-field
37	placeholder="fill your Grade Point"	37	placeholder="fill your Grade Point"
38	v-model="editedItem.gradePoint"	38	v-model="editedItem.gradePoint"
39	:rules="editGradePoint"	39	:rules="editGradePoint"
40	type="text"	40	type="text"
41	></v-text-field>	41	></v-text-field>
42	</v-flex>	42	</v-flex>
43	</v-layout>	43	</v-layout>
44	</v-flex>	44	</v-flex>
45	<v-flex xs12 sm12>	45	<v-flex xs12 sm12>
46	<v-layout>	46	<v-layout>
47	<v-flex xs4 class="pt-4 subheading">	47	<v-flex xs4 class="pt-4 subheading">
48	<label class="right">Mark From:</label>	48	<label class="right">Mark From:</label>
49	</v-flex>	49	</v-flex>
50	<v-flex xs7 class="ml-3">	50	<v-flex xs7 class="ml-3">
51	<v-text-field	51	<v-text-field
52	placeholder="fill your Mark From"	52	placeholder="fill your Mark From"
53	v-model="editedItem.marksFrom"	53	v-model="editedItem.marksFrom"
54	:rules="editMarksFrom"	54	:rules="editMarksFrom"
55	type="text"	55	type="text"
56	></v-text-field>	56	></v-text-field>
57	</v-flex>	57	</v-flex>
58	</v-layout>	58	</v-layout>
59	</v-flex>	59	</v-flex>
60	<v-flex xs12 sm12>	60	<v-flex xs12 sm12>
61	<v-layout>	61	<v-layout>
62	<v-flex xs4 class="pt-4 subheading">	62	<v-flex xs4 class="pt-4 subheading">
63	<label class="right">Mark Upto:</label>	63	<label class="right">Mark Upto:</label>
64	</v-flex>	64	</v-flex>
65	<v-flex xs7 class="ml-3">	65	<v-flex xs7 class="ml-3">
66	<v-text-field	66	<v-text-field
67	placeholder="fill your Mark From"	67	placeholder="fill your Mark From"
68	v-model="editedItem.marksUpTo"	68	v-model="editedItem.marksUpTo"
69	:rules="editMarksUpTo"	69	:rules="editMarksUpTo"
70	type="text"	70	type="text"
71	></v-text-field>	71	></v-text-field>
72	</v-flex>	72	</v-flex>
73	</v-layout>	73	</v-layout>
74	</v-flex>	74	</v-flex>
75	<v-flex xs12 sm12>	75	<v-flex xs12 sm12>
76	<v-layout>	76	<v-layout>
77	<v-flex xs4 class="pt-4 subheading">	77	<v-flex xs4 class="pt-4 subheading">
78	<label class="right">Note:</label>	78	<label class="right">Note:</label>
79	</v-flex>	79	</v-flex>
80	<v-flex xs7 class="ml-3">	80	<v-flex xs7 class="ml-3">
81	<v-text-field	81	<v-text-field
82	placeholder="fill your Serial Number"	82	placeholder="fill your Serial Number"
83	v-model="editedItem.note"	83	v-model="editedItem.note"
84	type="text"	84	type="text"
85	></v-text-field>	85	></v-text-field>
86	</v-flex>	86	</v-flex>
87	</v-layout>	87	</v-layout>
88	</v-flex>	88	</v-flex>
89	</v-layout>	89	</v-layout>
90	<v-layout>	90	<v-layout>
91	<v-flex xs12>	91	<v-flex xs12>
92	<v-card-actions>	92	<v-card-actions>
93	<v-spacer></v-spacer>	93	<v-spacer></v-spacer>
94	<v-btn round dark @click="save" class="add-button">Save</v-btn>	94	<v-btn round dark @click="save" class="add-button">Save</v-btn>
95	</v-card-actions>	95	</v-card-actions>
96	</v-flex>	96	</v-flex>
97	</v-layout>	97	</v-layout>
98	</v-container>	98	</v-container>
99	</v-form>	99	</v-form>
100	</v-card>	100	</v-card>
101	</v-dialog>	101	</v-dialog>
102		102
103	<!-- **** PROFILE VIEW PARTICULAR GRDAE DATA **** -->	103	<!-- **** PROFILE VIEW PARTICULAR GRDAE DATA **** -->
104		104
105	<v-dialog v-model="viewGradeDialog" max-width="500px">	105	<v-dialog v-model="viewGradeDialog" max-width="500px">
106	<v-card flat class="card-style pa-3" dark>	106	<v-card flat class="card-style pa-3" dark>
107	<v-layout>	107	<v-layout>
108	<v-flex xs12>	108	<v-flex xs12>
109	<label class="title text-xs-center">View Grade</label>	109	<label class="title text-xs-center">View Grade</label>
110	<v-icon size="24" class="right" @click="viewGradeDialog = false">cancel</v-icon>	110	<v-icon size="24" class="right" @click="viewGradeDialog = false">cancel</v-icon>
111	</v-flex>	111	</v-flex>
112	</v-layout>	112	</v-layout>
113	<v-card-text>	113	<v-card-text>
114	<v-container grid-list-md>	114	<v-container grid-list-md>
115	<v-layout wrap>	115	<v-layout wrap>
116	<v-flex>	116	<v-flex>
117	<v-layout>	117	<v-layout>
118	<v-flex xs5 sm6>	118	<v-flex xs5 sm6>
119	<h5 class="right my-1">	119	<h5 class="right my-1">
120	<b>Grade Name:</b>	120	<b>Grade Name:</b>
121	</h5>	121	</h5>
122	</v-flex>	122	</v-flex>
123	<v-flex sm6 xs8>	123	<v-flex sm6 xs8>
124	<h5 class="my-1">{{ editedItem.gradeName }}</h5>	124	<h5 class="my-1">{{ editedItem.gradeName }}</h5>
125	</v-flex>	125	</v-flex>
126	</v-layout>	126	</v-layout>
127	<v-layout>	127	<v-layout>
128	<v-flex xs5 sm6>	128	<v-flex xs5 sm6>
129	<h5 class="right my-1">	129	<h5 class="right my-1">
130	<b>Grade Point:</b>	130	<b>Grade Point:</b>
131	</h5>	131	</h5>
132	</v-flex>	132	</v-flex>
133	<v-flex sm6 xs8>	133	<v-flex sm6 xs8>
134	<h5 class="my-1">{{ editedItem.gradePoint }}</h5>	134	<h5 class="my-1">{{ editedItem.gradePoint }}</h5>
135	</v-flex>	135	</v-flex>
136	</v-layout>	136	</v-layout>
137	<v-layout>	137	<v-layout>
138	<v-flex xs5 sm6>	138	<v-flex xs5 sm6>
139	<h5 class="right my-1">	139	<h5 class="right my-1">
140	<b>Mark From:</b>	140	<b>Mark From:</b>
141	</h5>	141	</h5>
142	</v-flex>	142	</v-flex>
143	<v-flex sm6 xs8>	143	<v-flex sm6 xs8>
144	<h5 class="my-1">{{ editedItem.marksFrom }}</h5>	144	<h5 class="my-1">{{ editedItem.marksFrom }}</h5>
145	</v-flex>	145	</v-flex>
146	</v-layout>	146	</v-layout>
147	<v-layout>	147	<v-layout>
148	<v-flex xs5 sm6>	148	<v-flex xs5 sm6>
149	<h5 class="right my-1">	149	<h5 class="right my-1">
150	<b>Mark Upto:</b>	150	<b>Mark Upto:</b>
151	</h5>	151	</h5>
152	</v-flex>	152	</v-flex>
153	<v-flex sm6 xs8>	153	<v-flex sm6 xs8>
154	<h5 class="my-1">{{ editedItem.marksUpTo }}</h5>	154	<h5 class="my-1">{{ editedItem.marksUpTo }}</h5>
155	</v-flex>	155	</v-flex>
156	</v-layout>	156	</v-layout>
157	<v-layout>	157	<v-layout>
158	<v-flex xs5 sm6>	158	<v-flex xs5 sm6>
159	<h5 class="right my-1">	159	<h5 class="right my-1">
160	<b>Note:</b>	160	<b>Note:</b>
161	</h5>	161	</h5>
162	</v-flex>	162	</v-flex>
163	<v-flex sm6 xs8>	163	<v-flex sm6 xs8>
164	<h5 class="my-1">{{ editedItem.note }}</h5>	164	<h5 class="my-1">{{ editedItem.note }}</h5>
165	</v-flex>	165	</v-flex>
166	</v-layout>	166	</v-layout>
167	</v-flex>	167	</v-flex>
168	</v-layout>	168	</v-layout>
169	</v-container>	169	</v-container>
170	</v-card-text>	170	</v-card-text>
171	</v-card>	171	</v-card>
172	</v-dialog>	172	</v-dialog>
173	<!-- **** EXISTING GRADE TABLE**** -->	173	<!-- **** EXISTING GRADE TABLE**** -->
174		174
175	<v-toolbar color="transparent" flat>	175	<v-toolbar color="transparent" flat>
176	<v-btn	176	<v-btn
177	fab	177	fab
178	dark	178	dark
179	class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"	179	class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
180	small	180	small
181	@click="addGradeDialog = true"	181	@click="addGradeDialog = true"
182	>	182	>
183	<v-icon dark>add</v-icon>	183	<v-icon dark>add</v-icon>
184	</v-btn>	184	</v-btn>
185	<v-btn	185	<v-btn
186	round	186	round
187	class="open-dialog-button hidden-sm-only hidden-xs-only"	187	class="open-dialog-button hidden-sm-only hidden-xs-only"
188	dark	188	dark
189	@click="addGradeDialog = true"	189	@click="addGradeDialog = true"
190	>	190	>
191	<v-icon class="white--text pr-1" size="20">add</v-icon>Add Grade	191	<v-icon class="white--text pr-1" size="20">add</v-icon>Add Grade
192	</v-btn>	192	</v-btn>
193	<v-spacer></v-spacer>	193	<v-spacer></v-spacer>
194	<v-card-title class="body-1" v-show="show">	194	<v-card-title class="body-1" v-show="show">
195	<v-btn icon large flat @click="displaySearch">	195	<v-btn icon large flat @click="displaySearch">
196	<v-avatar size="27">	196	<v-avatar size="27">
197	<img src="/static/icon/search.png" alt="icon" />	197	<img src="/static/icon/search.png" alt="icon" />
198	</v-avatar>	198	</v-avatar>
199	</v-btn>	199	</v-btn>
200	</v-card-title>	200	</v-card-title>
201	<v-flex xs8 sm8 md3 lg2 v-if="showSearch">	201	<v-flex xs8 sm8 md3 lg2 v-if="showSearch">
202	<v-layout>	202	<v-layout>
203	<v-text-field autofocus v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>	203	<v-text-field autofocus v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>
204	<v-icon @click="closeSearch" color="error">close</v-icon>	204	<v-icon @click="closeSearch" color="error">close</v-icon>
205	</v-layout>	205	</v-layout>
206	</v-flex>	206	</v-flex>
207	</v-toolbar>	207	</v-toolbar>
208	<v-data-table	208	<v-data-table
209	:headers="headers"	209	:headers="headers"
210	:items="gradeData"	210	:items="gradeData"
211	:pagination.sync="pagination"	211	:pagination.sync="pagination"
212	:search="search"	212	:search="search"
213	>	213	>
214	<template slot="items" slot-scope="props">	214	<template slot="items" slot-scope="props">
215	<tr class="tr">	215	<tr class="tr">
216	<td class="td td-row">{{ props.index + 1}}</td>	216	<td class="td td-row">{{ props.index + 1}}</td>
217	<td class="td td-row text-xs-center">{{ props.item.gradeName}}</td>	217	<td class="td td-row text-xs-center">{{ props.item.gradeName}}</td>
218	<td class="td td-row text-xs-center">{{ props.item.gradePoint }}</td>	218	<td class="td td-row text-xs-center">{{ props.item.gradePoint }}</td>
219	<td class="td td-row text-xs-center">{{ props.item.marksFrom }}</td>	219	<td class="td td-row text-xs-center">{{ props.item.marksFrom }}</td>
220	<td class="td td-row text-xs-center">{{ props.item.marksUpTo }}</td>	220	<td class="td td-row text-xs-center">{{ props.item.marksUpTo }}</td>
221	<td class="td td-row text-xs-center">{{ props.item.note }}</td>	221	<td class="td td-row text-xs-center">{{ props.item.note }}</td>
222	<td class="td td-row text-xs-center">	222	<td class="td td-row text-xs-center">
223	<span>	223	<span>
224	<v-tooltip top>	224	<v-tooltip top>
225	<img	225	<img
226	slot="activator"	226	slot="activator"
227	style="cursor:pointer; width:25px; height:25px; "	227	style="cursor:pointer; width:25px; height:25px; "
228	class="mr-3"	228	class="mr-3"
229	@click="profile(props.item)"	229	@click="profile(props.item)"
230	src="/static/icon/view.png"	230	src="/static/icon/view.png"
231	/>	231	/>
232	<span>View</span>	232	<span>View</span>
233	</v-tooltip>	233	</v-tooltip>
234	<v-tooltip top>	234	<v-tooltip top>
235	<img	235	<img
236	slot="activator"	236	slot="activator"
237	style="cursor:pointer; width:20px; height:18px; "	237	style="cursor:pointer; width:20px; height:18px; "
238	class="mr-3"	238	class="mr-3"
239	@click="editItem(props.item)"	239	@click="editItem(props.item)"
240	src="/static/icon/edit.png"	240	src="/static/icon/edit.png"
241	/>	241	/>
242	<span>Edit</span>	242	<span>Edit</span>
243	</v-tooltip>	243	</v-tooltip>
244	<v-tooltip top>	244	<v-tooltip top>
245	<img	245	<img
246	slot="activator"	246	slot="activator"
247	style="cursor:pointer; width:20px; height:20px; "	247	style="cursor:pointer; width:20px; height:20px; "
248	@click="deleteGrade(props.item)"	248	@click="deleteGrade(props.item)"
249	class="mr-3"	249	class="mr-3"
250	src="/static/icon/delete.png"	250	src="/static/icon/delete.png"
251	/>	251	/>
252	<span>Delete</span>	252	<span>Delete</span>
253	</v-tooltip>	253	</v-tooltip>
254	</span>	254	</span>
255	</td>	255	</td>
256	</tr>	256	</tr>
257	</template>	257	</template>
258	<v-alert	258	<v-alert
259	slot="no-results"	259	slot="no-results"
260	:value="true"	260	:value="true"
261	color="error"	261	color="error"
262	icon="warning"	262	icon="warning"
263	>Your search for "{{ search }}" found no results.</v-alert>	263	>Your search for "{{ search }}" found no results.</v-alert>
264	</v-data-table>	264	</v-data-table>
265	<!-- **** ADD GRADE **** -->	265	<!-- **** ADD GRADE **** -->
266	<v-dialog v-model="addGradeDialog" max-width="500px">	266	<v-dialog v-model="addGradeDialog" max-width="500px">
267	<v-card flat class="card-style pa-2" dark>	267	<v-card flat class="card-style pa-2" dark>
268	<v-layout>	268	<v-layout>
269	<v-flex xs12>	269	<v-flex xs12>
270	<label class="title text-xs-center">Add Grade</label>	270	<label class="title text-xs-center">Add Grade</label>
271	<v-icon size="24" class="right" @click="addGradeDialog = false">cancel</v-icon>	271	<v-icon size="24" class="right" @click="$refs.form.reset();addGradeDialog = false">cancel</v-icon>
272	</v-flex>	272	</v-flex>
273	</v-layout>	273	</v-layout>
274	<v-form ref="form" v-model="valid" lazy-validation>	274	<v-form ref="form" v-model="valid" lazy-validation>
275	<v-container fluid>	275	<v-container fluid>
276	<v-flex xs12>	276	<v-flex xs12>
277	<v-layout>	277	<v-layout>
278	<v-flex xs5 sm4 class="pt-4 subheading">	278	<v-flex xs5 sm4 class="pt-4 subheading">
279	<label class="right">Grade Name:</label>	279	<label class="right">Grade Name:</label>
280	</v-flex>	280	</v-flex>
281	<v-flex xs7 class="ml-3">	281	<v-flex xs7 class="ml-3">
282	<v-text-field	282	<v-text-field
283	placeholder="fill your Grade Name"	283	placeholder="fill your Grade Name"
284	:rules="gradeNameRules"	284	:rules="gradeNameRules"
285	v-model="addGrade.gradeName"	285	v-model="addGrade.gradeName"
286	></v-text-field>	286	></v-text-field>
287	</v-flex>	287	</v-flex>
288	</v-layout>	288	</v-layout>
289	</v-flex>	289	</v-flex>
290	<v-flex xs12>	290	<v-flex xs12>
291	<v-layout>	291	<v-layout>
292	<v-flex xs5 sm4 class="pt-4 subheading">	292	<v-flex xs5 sm4 class="pt-4 subheading">
293	<label class="right">Grade Point:</label>	293	<label class="right">Grade Point:</label>
294	</v-flex>	294	</v-flex>
295	<v-flex xs7 class="ml-3">	295	<v-flex xs7 class="ml-3">
296	<v-text-field	296	<v-text-field
297	placeholder="fill your Grade Point"	297	placeholder="fill your Grade Point"
298	v-model="addGrade.gradePoint"	298	v-model="addGrade.gradePoint"
299	:rules="gradePointRules"	299	:rules="gradePointRules"
300	></v-text-field>	300	></v-text-field>
301	</v-flex>	301	</v-flex>
302	</v-layout>	302	</v-layout>
303	</v-flex>	303	</v-flex>
304	<v-flex xs12>	304	<v-flex xs12>
305	<v-layout>	305	<v-layout>
306	<v-flex xs5 sm4 class="pt-4 subheading">	306	<v-flex xs5 sm4 class="pt-4 subheading">
307	<label class="right">Mark From:</label>	307	<label class="right">Mark From:</label>
308	</v-flex>	308	</v-flex>
309	<v-flex xs7 class="ml-3">	309	<v-flex xs7 class="ml-3">
310	<v-text-field	310	<v-text-field
311	placeholder="fill your Mark From"	311	placeholder="fill your Mark From"
312	:rules="markFromRules"	312	:rules="markFromRules"
313	v-model="addGrade.marksFrom"	313	v-model="addGrade.marksFrom"
314	type="number"	314	type="number"
315	></v-text-field>	315	></v-text-field>
316	</v-flex>	316	</v-flex>
317	</v-layout>	317	</v-layout>
318	</v-flex>	318	</v-flex>
319	<v-flex xs12>	319	<v-flex xs12>
320	<v-layout>	320	<v-layout>
321	<v-flex xs5 sm4 class="pt-4 subheading">	321	<v-flex xs5 sm4 class="pt-4 subheading">
322	<label class="right">Mark Upto:</label>	322	<label class="right">Mark Upto:</label>
323	</v-flex>	323	</v-flex>
324	<v-flex xs7 class="ml-3">	324	<v-flex xs7 class="ml-3">
325	<v-text-field	325	<v-text-field
326	placeholder="fill your Mark Upto"	326	placeholder="fill your Mark Upto"
327	:rules="markUptoRules"	327	:rules="markUptoRules"
328	v-model="addGrade.marksUpTo"	328	v-model="addGrade.marksUpTo"
329	type="number"	329	type="number"
330	></v-text-field>	330	></v-text-field>
331	</v-flex>	331	</v-flex>
332	</v-layout>	332	</v-layout>
333	</v-flex>	333	</v-flex>
334	<v-flex xs12>	334	<v-flex xs12>
335	<v-layout>	335	<v-layout>
336	<v-flex xs5 sm4 class="pt-4 subheading">	336	<v-flex xs5 sm4 class="pt-4 subheading">
337	<label class="right">Note:</label>	337	<label class="right">Note:</label>
338	</v-flex>	338	</v-flex>
339	<v-flex xs7 class="ml-3">	339	<v-flex xs7 class="ml-3">
340	<v-text-field	340	<v-text-field
341	placeholder="fill your Note"	341	placeholder="fill your Note"
342	:rules="noteRules"	342	:rules="noteRules"
343	v-model="addGrade.note"	343	v-model="addGrade.note"
344	@keyup.enter="submit"	344	@keyup.enter="submit"
345	></v-text-field>	345	></v-text-field>
346	</v-flex>	346	</v-flex>
347	</v-layout>	347	</v-layout>
348	</v-flex>	348	</v-flex>
349	<v-layout>	349	<v-layout>
350	<v-flex xs12>	350	<v-flex xs12>
351	<v-card-actions>	351	<v-card-actions>
352	<v-spacer class="hidden-xs-only"></v-spacer>	352	<v-spacer class="hidden-xs-only"></v-spacer>
353	<v-btn @click="clear" round dark class="clear-button">Clear</v-btn>	353	<v-btn @click="clear" round dark class="clear-button">Clear</v-btn>
354	<v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>	354	<v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
355	</v-card-actions>	355	</v-card-actions>
356	</v-flex>	356	</v-flex>
357	</v-layout>	357	</v-layout>
358	</v-container>	358	</v-container>
359	</v-form>	359	</v-form>
360	</v-card>	360	</v-card>
361	</v-dialog>	361	</v-dialog>
362	<v-snackbar	362	<v-snackbar
363	:timeout="timeout"	363	:timeout="timeout"
364	:top="y === 'top'"	364	:top="y === 'top'"
365	:right="x === 'right'"	365	:right="x === 'right'"
366	:vertical="mode === 'vertical'"	366	:vertical="mode === 'vertical'"
367	v-model="snackbar"	367	v-model="snackbar"
368	:color="color"	368	:color="color"
369	>{{ text }}</v-snackbar>	369	>{{ text }}</v-snackbar>
370	<div class="loader" v-if="showLoader">	370	<div class="loader" v-if="showLoader">
371	<v-progress-circular indeterminate color="white"></v-progress-circular>	371	<v-progress-circular indeterminate color="white"></v-progress-circular>
372	</div>	372	</div>
373	</v-container>	373	</v-container>
374	</template>	374	</template>
375		375
376	<script>	376	<script>
377	import http from "@/Services/http.js";	377	import http from "@/Services/http.js";
378	import moment from "moment";	378	import moment from "moment";
379		379
380	export default {	380	export default {
381	data: () => ({	381	data: () => ({
382	snackbar: false,	382	snackbar: false,
383	date: null,	383	date: null,
384	menu1: false,	384	menu1: false,
385	menu2: false,	385	menu2: false,
386	addGradeDialog: false,	386	addGradeDialog: false,
387	color: "",	387	color: "",
388	y: "top",	388	y: "top",
389	x: "right",	389	x: "right",
390	mode: "",	390	mode: "",
391	timeout: 10000,	391	timeout: 10000,
392	text: "",	392	text: "",
393	show: true,	393	show: true,
394	showSearch: false,	394	showSearch: false,
395	loading: false,	395	loading: false,
396	loadingSearch: false,	396	loadingSearch: false,
397	date: null,	397	date: null,
398	search: "",	398	search: "",
399	showLoader: false,	399	showLoader: false,
400	editGradeDialog: false,	400	editGradeDialog: false,
401	viewGradeDialog: false,	401	viewGradeDialog: false,
402	valid: true,	402	valid: true,
403	validEditGrade: true,	403	validEditGrade: true,
404	pagination: {	404	pagination: {
405	rowsPerPage: 10	405	rowsPerPage: 10
406	},	406	},
407	gradeNameRules: [v => !!v \|\| "Grade Name is required"],	407	gradeNameRules: [v => !!v \|\| "Grade Name is required"],
408	gradePointRules: [v => !!v \|\| "Grade Point required"],	408	gradePointRules: [v => !!v \|\| "Grade Point required"],
409	markFromRules: [v => !!v \|\| "Mark From is required"],	409	markFromRules: [v => !!v \|\| "Mark From is required"],
410	markUptoRules: [v => !!v \|\| "Mark Upto is required"],	410	markUptoRules: [v => !!v \|\| "Mark Upto is required"],
411	authorRules: [v => !!v \|\| "Author is required"],	411	authorRules: [v => !!v \|\| "Author is required"],
412	noteRules: [v => !!v \|\| "Note is required"],	412	noteRules: [v => !!v \|\| "Note is required"],
413	editGradeName: [v => !!v \|\| "Grade Name is required"],	413	editGradeName: [v => !!v \|\| "Grade Name is required"],
414	editGradeName: [v => !!v \|\| "Grade Name is required"],	414	editGradeName: [v => !!v \|\| "Grade Name is required"],
415	editGradePoint: [v => !!v \|\| "Grade Point required"],	415	editGradePoint: [v => !!v \|\| "Grade Point required"],
416	editMarksFrom: [v => !!v \|\| "Mark From is required"],	416	editMarksFrom: [v => !!v \|\| "Mark From is required"],
417	editMarksUpTo: [v => !!v \|\| "Mark Upto is required"],	417	editMarksUpTo: [v => !!v \|\| "Mark Upto is required"],
418	headers: [	418	headers: [
419	{	419	{
420	align: "",	420	align: "",
421	text: "No",	421	text: "No",
422	sortable: false,	422	sortable: false,
423	value: "No"	423	value: "No"
424	},	424	},
425	{	425	{
426	text: "Grade Name",	426	text: "Grade Name",
427	vaue: "gradeName",	427	vaue: "gradeName",
428	sortable: false,	428	sortable: false,
429	align: "center"	429	align: "center"
430	},	430	},
431	{	431	{
432	text: "Grade Point",	432	text: "Grade Point",
433	value: "gradePoint",	433	value: "gradePoint",
434	sortable: false,	434	sortable: false,
435	align: "center"	435	align: "center"
436	},	436	},
437	{	437	{
438	text: "Mark From",	438	text: "Mark From",
439	value: "marksFrom",	439	value: "marksFrom",
440	sortable: false,	440	sortable: false,
441	align: "center"	441	align: "center"
442	},	442	},
443	{	443	{
444	text: "Mark Upto",	444	text: "Mark Upto",
445	value: "marksUpTo",	445	value: "marksUpTo",
446	sortable: false,	446	sortable: false,
447	align: "center"	447	align: "center"
448	},	448	},
449	{	449	{
450	text: "Note",	450	text: "Note",
451	value: "note",	451	value: "note",
452	sortable: false,	452	sortable: false,
453	align: "center"	453	align: "center"
454	},	454	},
455	{ text: "Action", value: "", sortable: false, align: "center" }	455	{ text: "Action", value: "", sortable: false, align: "center" }
456	],	456	],
457	gradeData: [],	457	gradeData: [],
458	addGrade: {},	458	addGrade: {},
459	editedItem: {},	459	editedItem: {},
460	token: ""	460	token: ""
461	}),	461	}),
462	methods: {	462	methods: {
463	dates: function(date) {	463	dates: function(date) {
464	return moment(date).format("MMMM DD, YYYY");	464	return moment(date).format("MMMM DD, YYYY");
465	},	465	},
466	pickFile() {	466	pickFile() {
467	this.$refs.image.click();	467	this.$refs.image.click();
468	},	468	},
469	getGradeList() {	469	getGradeList() {
470	this.showLoader = true;	470	this.showLoader = true;
471	this.loadingSearch = true;	471	this.loadingSearch = true;
472	http()	472	http()
473	.get("/getGradesList", {	473	.get("/getGradesList", {
474	headers: { Authorization: "Bearer " + this.token }	474	headers: { Authorization: "Bearer " + this.token }
475	})	475	})
476	.then(response => {	476	.then(response => {
477	this.gradeData = response.data.data;	477	this.gradeData = response.data.data;
478	this.showLoader = false;	478	this.showLoader = false;
479	this.loadingSearch = false;	479	this.loadingSearch = false;
480	})	480	})
481	.catch(error => {	481	.catch(error => {
482	// console.log("err====>", err);	482	// console.log("err====>", err);
483	this.showLoader = false;	483	this.showLoader = false;
484	this.loadingSearch = false;	484	this.loadingSearch = false;
485	this.snackbar = true;	485	this.snackbar = true;
486	this.text = error.response.data.message;	486	this.text = error.response.data.message;
487	if (error.response.status === 401) {	487	if (error.response.status === 401) {
488	this.$router.replace({ path: "/" });	488	this.$router.replace({ path: "/" });
489	this.$store.dispatch("setToken", null);	489	this.$store.dispatch("setToken", null);
490	this.$store.dispatch("Id", null);	490	this.$store.dispatch("Id", null);
491	}	491	}
492	});	492	});
493	},	493	},
494	editItem(item) {	494	editItem(item) {
495	console.log("item", item);	495	console.log("item", item);
496	this.editedIndex = this.gradeData.indexOf(item);	496	this.editedIndex = this.gradeData.indexOf(item);
497	this.editedItem = Object.assign({}, item);	497	this.editedItem = Object.assign({}, item);
498	this.editedItem.date =	498	this.editedItem.date =
499	this.editedItem.date != undefined	499	this.editedItem.date != undefined
500	? (this.editedItem.date = this.editedItem.date.substring(0, 10))	500	? (this.editedItem.date = this.editedItem.date.substring(0, 10))
501	: (this.editedItem.date = "");	501	: (this.editedItem.date = "");
502	this.editGradeDialog = true;	502	this.editGradeDialog = true;
503	},	503	},
504	profile(item) {	504	profile(item) {
505	this.editedIndex = this.gradeData.indexOf(item);	505	this.editedIndex = this.gradeData.indexOf(item);
506	this.editedItem = Object.assign({}, item);	506	this.editedItem = Object.assign({}, item);
507	this.viewGradeDialog = true;	507	this.viewGradeDialog = true;
508	},	508	},
509	deleteGrade(item) {	509	deleteGrade(item) {
510	let deleteGrade = {	510	let deleteGrade = {
511	gradeId: item._id	511	gradeId: item._id
512	};	512	};
513	http()	513	http()
514	.delete(	514	.delete(
515	"/deleteGrade",	515	"/deleteGrade",
516	confirm("Are you sure you want to Delete this?") && {	516	confirm("Are you sure you want to Delete this?") && {
517	params: deleteGrade	517	params: deleteGrade
518	}	518	}
519	)	519	)
520	.then(response => {	520	.then(response => {
521	this.snackbar = true;	521	this.snackbar = true;
522	this.text = response.data.message;	522	this.text = response.data.message;
523	this.color = "green";	523	this.color = "green";
524	this.getGradeList();	524	this.getGradeList();
525	})	525	})
526	.catch(error => {	526	.catch(error => {
527	this.loading = false;	527	this.loading = false;
528	this.snackbar = true;	528	this.snackbar = true;
529	this.color = "error";	529	this.color = "error";
530	this.text = error.response.data.message;	530	this.text = error.response.data.message;
531	});	531	});
532	},	532	},
533	close() {	533	close() {
534	this.editGradeDialog = false;	534	this.editGradeDialog = false;
535	},	535	},
536	submit() {	536	submit() {
537	if (this.$refs.form.validate()) {	537	if (this.$refs.form.validate()) {
538	this.loading = true;	538	this.loading = true;
539	http()	539	http()
540	.post("/createGrade", this.addGrade)	540	.post("/createGrade", this.addGrade)
541	.then(response => {	541	.then(response => {
542	this.snackbar = true;	542	this.snackbar = true;
543	this.text = response.data.message;	543	this.text = response.data.message;
544	this.color = "green";	544	this.color = "green";
545	this.addGradeDialog = false;	545	this.addGradeDialog = false;
546	this.loading = false;	546	this.loading = false;
547	this.clear();	547	this.clear();
548	this.getGradeList();	548	this.getGradeList();
549	})	549	})
550	.catch(error => {	550	.catch(error => {
551	this.snackbar = true;	551	this.snackbar = true;
552	this.text = error.response.data.message;	552	this.text = error.response.data.message;
553	this.color = "red";	553	this.color = "red";
554	this.loading = false;	554	this.loading = false;
555	});	555	});
556	}	556	}
557	},	557	},
558	clear() {	558	clear() {
559	this.$refs.form.reset();	559	this.$refs.form.reset();
560	this.disable = false;	560	this.disable = false;
561	this.loading = false;	561	this.loading = false;
562	},	562	},
563	save() {	563	save() {
564	if (this.$refs.formEditGrade.validate()) {	564	if (this.$refs.formEditGrade.validate()) {
565	this.editedItem.gradeId = this.editedItem._id;	565	this.editedItem.gradeId = this.editedItem._id;
566	http()	566	http()
567	.put("/updateGrade", this.editedItem)	567	.put("/updateGrade", this.editedItem)
568	.then(response => {	568	.then(response => {
569	this.snackbar = true;	569	this.snackbar = true;
570	this.text = response.data.message;	570	this.text = response.data.message;
571	this.color = "green";	571	this.color = "green";
572	this.getGradeList();	572	this.getGradeList();
573	this.close();	573	this.close();
574	})	574	})
575	.catch(error => {	575	.catch(error => {
576	this.snackbar = true;	576	this.snackbar = true;
577	this.text = error.response.data.message;	577	this.text = error.response.data.message;
578	this.color = "red";	578	this.color = "red";
579	});	579	});
580	}	580	}
581	},	581	},
582	displaySearch() {	582	displaySearch() {
583	(this.show = false), (this.showSearch = true);	583	(this.show = false), (this.showSearch = true);
584	},	584	},
585	closeSearch() {	585	closeSearch() {
586	this.showSearch = false;	586	this.showSearch = false;
587	this.show = true;	587	this.show = true;
588	this.search = "";	588	this.search = "";
589	}	589	}
590	},	590	},
591	mounted() {	591	mounted() {
592	this.token = this.$store.state.token;	592	this.token = this.$store.state.token;
593	this.getGradeList();	593	this.getGradeList();
594	}	594	}
595	};	595	};
596	</script>	596	</script>

src/pages/Parent/parents.vue

Diff comments View file @7efe027

1	<template>	1	<template>
2	<v-container fluid class="body-color">	2	<v-container fluid class="body-color">
3	<v-dialog v-model="editParentDilaog" max-width="600px" scrollable>	3	<v-dialog v-model="editParentDilaog" max-width="600px" scrollable>
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 Parents Details</label>	7	<label class="title text-xs-center">Edit Parents Details</label>
8	<v-icon size="24" class="right" @click="editParentDilaog = false">cancel</v-icon>	8	<v-icon size="24" class="right" @click="editParentDilaog = false">cancel</v-icon>
9	</v-flex>	9	</v-flex>
10	</v-layout>	10	</v-layout>
11	<v-card-text class="hidden-xs-only hidden-sm-only">	11	<v-card-text class="hidden-xs-only hidden-sm-only">
12	<v-form ref="editParentForm" v-model="validEditParent" lazy-validation>	12	<v-form ref="editParentForm" v-model="validEditParent" lazy-validation>
13	<v-flex xs12>	13	<v-flex xs12>
14	<v-layout>	14	<v-layout>
15	<v-flex xs3 sm4 class="pt-4 subheading">	15	<v-flex xs3 sm4 class="pt-4 subheading">
16	<label class="right">Email ID:</label>	16	<label class="right">Email ID:</label>
17	</v-flex>	17	</v-flex>
18	<v-flex xs8 sm6 class="ml-3">	18	<v-flex xs8 sm6 class="ml-3">
19	<v-text-field	19	<v-text-field
20	placeholder="fill your email"	20	placeholder="fill your email"
21	v-model="editedItem.email"	21	v-model="editedItem.email"
22	type="text"	22	type="text"
23	name="email"	23	name="email"
24	required	24	required
25	></v-text-field>	25	></v-text-field>
26	</v-flex>	26	</v-flex>
27	</v-layout>	27	</v-layout>
28	</v-flex>	28	</v-flex>
29	<v-flex xs12>	29	<v-flex xs12>
30	<v-layout>	30	<v-layout>
31	<v-flex xs3 sm4 class="pt-4 subheading">	31	<v-flex xs3 sm4 class="pt-4 subheading">
32	<label class="right">Father Name:</label>	32	<label class="right">Father Name:</label>
33	</v-flex>	33	</v-flex>
34	<v-flex xs8 sm6 class="ml-3">	34	<v-flex xs8 sm6 class="ml-3">
35	<v-text-field	35	<v-text-field
36	v-model="editedItem.fatherName"	36	v-model="editedItem.fatherName"
37	placeholder="fill your father Name"	37	placeholder="fill your father Name"
38	required	38	required
39	></v-text-field>	39	></v-text-field>
40	</v-flex>	40	</v-flex>
41	</v-layout>	41	</v-layout>
42	</v-flex>	42	</v-flex>
43	<v-flex xs12>	43	<v-flex xs12>
44	<v-layout>	44	<v-layout>
45	<v-flex xs3 sm4 class="pt-4 subheading">	45	<v-flex xs3 sm4 class="pt-4 subheading">
46	<label class="right">Father Cell No:</label>	46	<label class="right">Father Cell No:</label>
47	</v-flex>	47	</v-flex>
48	<v-flex xs8 sm6 class="ml-3">	48	<v-flex xs8 sm6 class="ml-3">
49	<v-text-field	49	<v-text-field
50	v-model="editedItem.fatherCellNo"	50	v-model="editedItem.fatherCellNo"
51	placeholder="fill your father Cell Number"	51	placeholder="fill your father Cell Number"
52	:rules="editFatherNoRule"	52	:rules="editFatherNoRule"
53	type="number"	53	type="number"
54	required	54	required
55	></v-text-field>	55	></v-text-field>
56	</v-flex>	56	</v-flex>
57	</v-layout>	57	</v-layout>
58	</v-flex>	58	</v-flex>
59	<v-flex xs12>	59	<v-flex xs12>
60	<v-layout>	60	<v-layout>
61	<v-flex xs3 sm4 class="pt-4 subheading">	61	<v-flex xs3 sm4 class="pt-4 subheading">
62	<label class="right">Father Profession:</label>	62	<label class="right">Father Profession:</label>
63	</v-flex>	63	</v-flex>
64	<v-flex xs8 sm6 class="ml-3">	64	<v-flex xs8 sm6 class="ml-3">
65	<v-text-field	65	<v-text-field
66	v-model="editedItem.fatherProfession"	66	v-model="editedItem.fatherProfession"
67	placeholder="fill your father Profession"	67	placeholder="fill your father Profession"
68	required	68	required
69	></v-text-field>	69	></v-text-field>
70	</v-flex>	70	</v-flex>
71	</v-layout>	71	</v-layout>
72	</v-flex>	72	</v-flex>
73	<v-flex xs12>	73	<v-flex xs12>
74	<v-layout>	74	<v-layout>
75	<v-flex xs3 sm4 class="pt-4 subheading">	75	<v-flex xs3 sm4 class="pt-4 subheading">
76	<label class="right">Mother Name:</label>	76	<label class="right">Mother Name:</label>
77	</v-flex>	77	</v-flex>
78	<v-flex xs8 sm6 class="ml-3">	78	<v-flex xs8 sm6 class="ml-3">
79	<v-text-field	79	<v-text-field
80	v-model="editedItem.motherName"	80	v-model="editedItem.motherName"
81	placeholder="fill your Mother Name"	81	placeholder="fill your Mother Name"
82	type="text"	82	type="text"
83	required	83	required
84	></v-text-field>	84	></v-text-field>
85	</v-flex>	85	</v-flex>
86	</v-layout>	86	</v-layout>
87	</v-flex>	87	</v-flex>
88	<v-flex xs12>	88	<v-flex xs12>
89	<v-layout>	89	<v-layout>
90	<v-flex xs3 sm4 class="pt-4 subheading">	90	<v-flex xs3 sm4 class="pt-4 subheading">
91	<label class="right">Mother Cell No:</label>	91	<label class="right">Mother Cell No:</label>
92	</v-flex>	92	</v-flex>
93	<v-flex xs8 sm6 class="ml-3">	93	<v-flex xs8 sm6 class="ml-3">
94	<v-text-field	94	<v-text-field
95	v-model="editedItem.motherCellNo"	95	v-model="editedItem.motherCellNo"
96	placeholder="fill your Mother Cell Number"	96	placeholder="fill your Mother Cell Number"
97	type="number"	97	type="number"
98	required	98	required
99	></v-text-field>	99	></v-text-field>
100	</v-flex>	100	</v-flex>
101	</v-layout>	101	</v-layout>
102	</v-flex>	102	</v-flex>
103	<v-flex xs12>	103	<v-flex xs12>
104	<v-layout>	104	<v-layout>
105	<v-flex xs3 sm4 class="pt-4 subheading">	105	<v-flex xs3 sm4 class="pt-4 subheading">
106	<label class="right">Mother Profession:</label>	106	<label class="right">Mother Profession:</label>
107	</v-flex>	107	</v-flex>
108	<v-flex xs8 sm6 class="ml-3">	108	<v-flex xs8 sm6 class="ml-3">
109	<v-text-field	109	<v-text-field
110	v-model="editedItem.motherProfession"	110	v-model="editedItem.motherProfession"
111	placeholder="fill your Mother Profession"	111	placeholder="fill your Mother Profession"
112	type="text"	112	type="text"
113	required	113	required
114	></v-text-field>	114	></v-text-field>
115	</v-flex>	115	</v-flex>
116	</v-layout>	116	</v-layout>
117	<v-layout>	117	<v-layout>
118	<v-flex xs4 class="pt-4 subheading">	118	<v-flex xs4 class="pt-4 subheading">
119	<label class="right">Password:</label>	119	<label class="right">Password:</label>
120	</v-flex>	120	</v-flex>
121	<v-flex xs8 class="ml-3">	121	<v-flex xs8 class="ml-3">
122	<v-text-field	122	<v-text-field
123	v-model="editedItem.password"	123	v-model="editedItem.password"
124	placeholder="Enter Password"	124	placeholder="Enter Password"
125	type="text"	125	type="text"
126	required	126	required
127	></v-text-field>	127	></v-text-field>
128	</v-flex>	128	</v-flex>
129	</v-layout>	129	</v-layout>
130	</v-flex>	130	</v-flex>
131	<v-layout>	131	<v-layout>
132	<v-flex xs12 sm12>	132	<v-flex xs12 sm12>
133	<v-card-actions>	133	<v-card-actions>
134	<v-spacer></v-spacer>	134	<v-spacer></v-spacer>
135	<v-btn round dark @click="save" class="add-button">Save</v-btn>	135	<v-btn round dark @click="save" class="add-button">Save</v-btn>
136	<v-spacer></v-spacer>	136	<v-spacer></v-spacer>
137	</v-card-actions>	137	</v-card-actions>
138	</v-flex>	138	</v-flex>
139	</v-layout>	139	</v-layout>
140	</v-form>	140	</v-form>
141	</v-card-text>	141	</v-card-text>
142	<v-card-text style="height: 600px;" class="hidden-lg-only hidden-xl-only hidden-md-only">	142	<v-card-text style="height: 600px;" class="hidden-lg-only hidden-xl-only hidden-md-only">
143	<v-flex xs12>	143	<v-flex xs12>
144	<v-layout wrap>	144	<v-layout wrap>
145	<v-flex xs12 class="pt-4 subheading">	145	<v-flex xs12 class="pt-4 subheading">
146	<label>Email ID:</label>	146	<label>Email ID:</label>
147	</v-flex>	147	</v-flex>
148	<v-flex xs12>	148	<v-flex xs12>
149	<v-text-field	149	<v-text-field
150	placeholder="fill your email"	150	placeholder="fill your email"
151	v-model="editedItem.email"	151	v-model="editedItem.email"
152	type="text"	152	type="text"
153	name="email"	153	name="email"
154	required	154	required
155	></v-text-field>	155	></v-text-field>
156	</v-flex>	156	</v-flex>
157	</v-layout>	157	</v-layout>
158	</v-flex>	158	</v-flex>
159	<v-flex xs12>	159	<v-flex xs12>
160	<v-layout wrap>	160	<v-layout wrap>
161	<v-flex xs12 class="pt-4 subheading">	161	<v-flex xs12 class="pt-4 subheading">
162	<label>Father Name:</label>	162	<label>Father Name:</label>
163	</v-flex>	163	</v-flex>
164	<v-flex xs12>	164	<v-flex xs12>
165	<v-text-field	165	<v-text-field
166	v-model="editedItem.fatherName"	166	v-model="editedItem.fatherName"
167	placeholder="fill your father Name"	167	placeholder="fill your father Name"
168	required	168	required
169	></v-text-field>	169	></v-text-field>
170	</v-flex>	170	</v-flex>
171	</v-layout>	171	</v-layout>
172	</v-flex>	172	</v-flex>
173	<v-flex xs12>	173	<v-flex xs12>
174	<v-layout wrap>	174	<v-layout wrap>
175	<v-flex xs12 class="pt-4 subheading">	175	<v-flex xs12 class="pt-4 subheading">
176	<label>Father Cell No:</label>	176	<label>Father Cell No:</label>
177	</v-flex>	177	</v-flex>
178	<v-flex xs12>	178	<v-flex xs12>
179	<v-text-field	179	<v-text-field
180	v-model="editedItem.fatherCellNo"	180	v-model="editedItem.fatherCellNo"
181	placeholder="fill your father Cell Number"	181	placeholder="fill your father Cell Number"
182	type="number"	182	type="number"
183	required	183	required
184	></v-text-field>	184	></v-text-field>
185	</v-flex>	185	</v-flex>
186	</v-layout>	186	</v-layout>
187	</v-flex>	187	</v-flex>
188	<v-flex xs12>	188	<v-flex xs12>
189	<v-layout wrap>	189	<v-layout wrap>
190	<v-flex xs12 class="pt-4 subheading">	190	<v-flex xs12 class="pt-4 subheading">
191	<label>Father Profession:</label>	191	<label>Father Profession:</label>
192	</v-flex>	192	</v-flex>
193	<v-flex xs12>	193	<v-flex xs12>
194	<v-text-field	194	<v-text-field
195	v-model="editedItem.fatherProfession"	195	v-model="editedItem.fatherProfession"
196	placeholder="fill your father Profession"	196	placeholder="fill your father Profession"
197	required	197	required
198	></v-text-field>	198	></v-text-field>
199	</v-flex>	199	</v-flex>
200	</v-layout>	200	</v-layout>
201	</v-flex>	201	</v-flex>
202	<v-flex xs12>	202	<v-flex xs12>
203	<v-layout wrap>	203	<v-layout wrap>
204	<v-flex xs12 class="pt-4 subheading">	204	<v-flex xs12 class="pt-4 subheading">
205	<label>Mother Name:</label>	205	<label>Mother Name:</label>
206	</v-flex>	206	</v-flex>
207	<v-flex xs12>	207	<v-flex xs12>
208	<v-text-field	208	<v-text-field
209	v-model="editedItem.motherName"	209	v-model="editedItem.motherName"
210	placeholder="fill your Mother Name"	210	placeholder="fill your Mother Name"
211	type="text"	211	type="text"
212	required	212	required
213	></v-text-field>	213	></v-text-field>
214	</v-flex>	214	</v-flex>
215	</v-layout>	215	</v-layout>
216	</v-flex>	216	</v-flex>
217	<v-flex xs12>	217	<v-flex xs12>
218	<v-layout wrap>	218	<v-layout wrap>
219	<v-flex xs12 class="pt-4 subheading">	219	<v-flex xs12 class="pt-4 subheading">
220	<label>Mother Cell No:</label>	220	<label>Mother Cell No:</label>
221	</v-flex>	221	</v-flex>
222	<v-flex xs12>	222	<v-flex xs12>
223	<v-text-field	223	<v-text-field
224	v-model="editedItem.motherCellNo"	224	v-model="editedItem.motherCellNo"
225	placeholder="fill your Mother Cell Number"	225	placeholder="fill your Mother Cell Number"
226	type="number"	226	type="number"
227	required	227	required
228	></v-text-field>	228	></v-text-field>
229	</v-flex>	229	</v-flex>
230	</v-layout>	230	</v-layout>
231	</v-flex>	231	</v-flex>
232	<v-flex xs12>	232	<v-flex xs12>
233	<v-layout wrap>	233	<v-layout wrap>
234	<v-flex xs12 class="pt-4 subheading">	234	<v-flex xs12 class="pt-4 subheading">
235	<label>Mother Profession:</label>	235	<label>Mother Profession:</label>
236	</v-flex>	236	</v-flex>
237	<v-flex xs12>	237	<v-flex xs12>
238	<v-text-field	238	<v-text-field
239	v-model="editedItem.motherProfession"	239	v-model="editedItem.motherProfession"
240	placeholder="fill your Mother Profession"	240	placeholder="fill your Mother Profession"
241	type="text"	241	type="text"
242	required	242	required
243	></v-text-field>	243	></v-text-field>
244	</v-flex>	244	</v-flex>
245	<v-flex xs12 class="pt-4 subheading">	245	<v-flex xs12 class="pt-4 subheading">
246	<label>Password:</label>	246	<label>Password:</label>
247	</v-flex>	247	</v-flex>
248	<v-flex xs12>	248	<v-flex xs12>
249	<v-text-field	249	<v-text-field
250	v-model="editedItem.password"	250	v-model="editedItem.password"
251	placeholder="Enter Password"	251	placeholder="Enter Password"
252	type="text"	252	type="text"
253	required	253	required
254	></v-text-field>	254	></v-text-field>
255	</v-flex>	255	</v-flex>
256	</v-layout>	256	</v-layout>
257	</v-flex>	257	</v-flex>
258	<v-layout>	258	<v-layout>
259	<v-flex xs12 sm12>	259	<v-flex xs12 sm12>
260	<v-card-actions>	260	<v-card-actions>
261	<v-spacer></v-spacer>	261	<v-spacer></v-spacer>
262	<v-btn round dark @click="save" class="add-button">Save</v-btn>	262	<v-btn round dark @click="save" class="add-button">Save</v-btn>
263	<v-spacer></v-spacer>	263	<v-spacer></v-spacer>
264	</v-card-actions>	264	</v-card-actions>
265	</v-flex>	265	</v-flex>
266	</v-layout>	266	</v-layout>
267	</v-card-text>	267	</v-card-text>
268	</v-card>	268	</v-card>
269	</v-dialog>	269	</v-dialog>
270		270
271	<!-- **** RESET Parents MPIN **** -->	271	<!-- **** RESET Parents MPIN **** -->
272	<v-dialog v-model="resetParentMpin" max-width="500px" scrollable>	272	<v-dialog v-model="resetParentMpin" max-width="500px" scrollable>
273	<v-card class="card-style pa-2" dark>	273	<v-card class="card-style pa-2" dark>
274	<v-layout>	274	<v-layout>
275	<v-flex xs12>	275	<v-flex xs12>
276	<label class="title text-xs-center">Reset Mpin</label>	276	<label class="title text-xs-center">Reset Mpin</label>
277	<v-icon size="24" class="right" @click="resetParentMpin = false">cancel</v-icon>	277	<v-icon size="24" class="right" @click="resetParentMpin = false">cancel</v-icon>
278	</v-flex>	278	</v-flex>
279	</v-layout>	279	</v-layout>
280	<v-card-text class="hidden-xs-only hidden-sm-only">	280	<v-card-text class="hidden-xs-only hidden-sm-only">
281	<v-form ref="resetParentMpinForm" v-model="validParentMpin" lazy-validation>	281	<v-form ref="resetParentMpinForm" v-model="validParentMpin" lazy-validation>
282	<v-flex xs12>	282	<v-flex xs12>
283	<v-layout>	283	<v-layout>
284	<v-flex xs3 sm4 class="pt-4 subheading">	284	<v-flex xs3 sm4 class="pt-4 subheading">
285	<label class="right">Change Mpin:</label>	285	<label class="right">Change Mpin:</label>
286	</v-flex>	286	</v-flex>
287	<v-flex xs8 sm6 class="ml-3">	287	<v-flex xs8 sm6 class="ml-3">
288	<v-text-field	288	<v-text-field
289	placeholder="change mpin"	289	placeholder="change mpin"
290	:rules="mPinRules"	290	:rules="mPinRules"
291	v-model="editMpin.mPin"	291	v-model="editMpin.mPin"
292	type="number"	292	type="number"
293	counter="4"	293	counter="4"
294	required	294	required
295	></v-text-field>	295	></v-text-field>
296	</v-flex>	296	</v-flex>
297	</v-layout>	297	</v-layout>
298	</v-flex>	298	</v-flex>
299	</v-form>	299	</v-form>
300	<v-layout>	300	<v-layout>
301	<v-flex xs12 sm12>	301	<v-flex xs12 sm12>
302	<v-card-actions>	302	<v-card-actions>
303	<v-spacer></v-spacer>	303	<v-spacer></v-spacer>
304	<v-btn round dark @click="resetMpin" class="add-button">Reset</v-btn>	304	<v-btn round dark @click="resetMpin" class="add-button">Reset</v-btn>
305	<v-spacer></v-spacer>	305	<v-spacer></v-spacer>
306	</v-card-actions>	306	</v-card-actions>
307	</v-flex>	307	</v-flex>
308	</v-layout>	308	</v-layout>
309	</v-card-text>	309	</v-card-text>
310	</v-card>	310	</v-card>
311	</v-dialog>	311	</v-dialog>
312		312
313	<!-- **** PROFILE VIEW Parents DEATILS **** -->	313	<!-- **** PROFILE VIEW Parents DEATILS **** -->
314		314
315	<v-dialog v-model="profileParentDialog" max-width="500px" scrollable>	315	<v-dialog v-model="profileParentDialog" max-width="500px" scrollable>
316	<v-card class="card-style pa-2" dark>	316	<v-card class="card-style pa-2" dark>
317	<v-layout>	317	<v-layout>
318	<v-flex xs12>	318	<v-flex xs12>
319	<label class="title text-xs-center">View Parent Details</label>	319	<label class="title text-xs-center">View Parent Details</label>
320	<v-icon size="24" class="right" @click="profileParentDialog = false">cancel</v-icon>	320	<v-icon size="24" class="right" @click="profileParentDialog = false">cancel</v-icon>
321	</v-flex>	321	</v-flex>
322	</v-layout>	322	</v-layout>
323	<v-flex align-center justify-center layout text-xs-center class="mt-3">	323	<v-flex align-center justify-center layout text-xs-center class="mt-3">
324	<v-avatar size="100px">	324	<v-avatar size="100px">
325	<img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" />	325	<img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" />
326	<img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" />	326	<img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" />
327	</v-avatar>	327	</v-avatar>
328	</v-flex>	328	</v-flex>
329	<v-container grid-list-md>	329	<v-container grid-list-md>
330	<v-layout wrap>	330	<v-layout wrap>
331	<v-flex xs12>	331	<v-flex xs12>
332	<v-layout>	332	<v-layout>
333	<v-flex xs12 sm12>	333	<v-flex xs12 sm12>
334	<v-layout>	334	<v-layout>
335	<v-flex xs6>	335	<v-flex xs6>
336	<h5 class="right my-1">	336	<h5 class="right my-1">
337	<b>Email:</b>	337	<b>Email:</b>
338	</h5>	338	</h5>
339	</v-flex>	339	</v-flex>
340	<v-flex xs6>	340	<v-flex xs6>
341	<h5 class="my-1">{{ editedItem.email }}</h5>	341	<h5 class="my-1">{{ editedItem.email }}</h5>
342	</v-flex>	342	</v-flex>
343	</v-layout>	343	</v-layout>
344	</v-flex>	344	</v-flex>
345	</v-layout>	345	</v-layout>
346	<v-layout>	346	<v-layout>
347	<v-flex xs12>	347	<v-flex xs12>
348	<v-layout>	348	<v-layout>
349	<v-flex xs6>	349	<v-flex xs6>
350	<b>	350	<b>
351	<h5 class="right my-1">	351	<h5 class="right my-1">
352	<b>Fahter Name:</b>	352	<b>Fahter Name:</b>
353	</h5>	353	</h5>
354	</b>	354	</b>
355	</v-flex>	355	</v-flex>
356	<v-flex xs6>	356	<v-flex xs6>
357	<h5 class="my-1">{{ editedItem.fatherName }}</h5>	357	<h5 class="my-1">{{ editedItem.fatherName }}</h5>
358	</v-flex>	358	</v-flex>
359	</v-layout>	359	</v-layout>
360	</v-flex>	360	</v-flex>
361	</v-layout>	361	</v-layout>
362	<v-layout>	362	<v-layout>
363	<v-flex xs12>	363	<v-flex xs12>
364	<v-layout>	364	<v-layout>
365	<v-flex xs6>	365	<v-flex xs6>
366	<b>	366	<b>
367	<h5 class="right my-1">	367	<h5 class="right my-1">
368	<b>Mother Name:</b>	368	<b>Mother Name:</b>
369	</h5>	369	</h5>
370	</b>	370	</b>
371	</v-flex>	371	</v-flex>
372	<v-flex xs6>	372	<v-flex xs6>
373	<h5 class="my-1">{{ editedItem.motherName }}</h5>	373	<h5 class="my-1">{{ editedItem.motherName }}</h5>
374	</v-flex>	374	</v-flex>
375	</v-layout>	375	</v-layout>
376	</v-flex>	376	</v-flex>
377	</v-layout>	377	</v-layout>
378	<v-layout>	378	<v-layout>
379	<v-flex xs12>	379	<v-flex xs12>
380	<v-layout>	380	<v-layout>
381	<v-flex sm6 xs6>	381	<v-flex sm6 xs6>
382	<b>	382	<b>
383	<h5 class="right my-1">	383	<h5 class="right my-1">
384	<b>Father Cell No:</b>	384	<b>Father Cell No:</b>
385	</h5>	385	</h5>
386	</b>	386	</b>
387	</v-flex>	387	</v-flex>
388	<v-flex sm6 xs6>	388	<v-flex sm6 xs6>
389	<h5 class="my-1">{{ editedItem.fatherCellNo }}</h5>	389	<h5 class="my-1">{{ editedItem.fatherCellNo }}</h5>
390	</v-flex>	390	</v-flex>
391	</v-layout>	391	</v-layout>
392	</v-flex>	392	</v-flex>
393	</v-layout>	393	</v-layout>
394	<v-layout>	394	<v-layout>
395	<v-flex xs12>	395	<v-flex xs12>
396	<v-layout>	396	<v-layout>
397	<v-flex xs6>	397	<v-flex xs6>
398	<b>	398	<b>
399	<h5 class="right my-1">	399	<h5 class="right my-1">
400	<b>Mother Cell No:</b>	400	<b>Mother Cell No:</b>
401	</h5>	401	</h5>
402	</b>	402	</b>
403	</v-flex>	403	</v-flex>
404	<v-flex xs6>	404	<v-flex xs6>
405	<h5 class="my-1">{{ editedItem.motherCellNo }}</h5>	405	<h5 class="my-1">{{ editedItem.motherCellNo }}</h5>
406	</v-flex>	406	</v-flex>
407	</v-layout>	407	</v-layout>
408	</v-flex>	408	</v-flex>
409	</v-layout>	409	</v-layout>
410	<v-layout>	410	<v-layout>
411	<v-flex xs12>	411	<v-flex xs12>
412	<v-layout>	412	<v-layout>
413	<v-flex xs6>	413	<v-flex xs6>
414	<b>	414	<b>
415	<h5 class="right my-1 hidden-lg-only hidden-xl-only hidden-md-only">	415	<h5 class="right my-1 hidden-lg-only hidden-xl-only hidden-md-only">
416	<b>FatherProfession:</b>	416	<b>FatherProfession:</b>
417	</h5>	417	</h5>
418	<h5 class="right my-1 hidden-sm-only hidden-xs-only">	418	<h5 class="right my-1 hidden-sm-only hidden-xs-only">
419	<b>Father Profession:</b>	419	<b>Father Profession:</b>
420	</h5>	420	</h5>
421	</b>	421	</b>
422	</v-flex>	422	</v-flex>
423	<v-flex xs6>	423	<v-flex xs6>
424	<h5 class="my-1">{{ editedItem.fatherProfession }}</h5>	424	<h5 class="my-1">{{ editedItem.fatherProfession }}</h5>
425	</v-flex>	425	</v-flex>
426	</v-layout>	426	</v-layout>
427	</v-flex>	427	</v-flex>
428	</v-layout>	428	</v-layout>
429	<v-layout>	429	<v-layout>
430	<v-flex xs12>	430	<v-flex xs12>
431	<v-layout>	431	<v-layout>
432	<v-flex xs6>	432	<v-flex xs6>
433	<b>	433	<b>
434	<h5 class="right my-1 hidden-lg-only hidden-xl-only hidden-md-only">	434	<h5 class="right my-1 hidden-lg-only hidden-xl-only hidden-md-only">
435	<b>MotherProfession:</b>	435	<b>MotherProfession:</b>
436	</h5>	436	</h5>
437	<h5 class="right my-1 hidden-sm-only hidden-xs-only">	437	<h5 class="right my-1 hidden-sm-only hidden-xs-only">
438	<b>Mother Profession:</b>	438	<b>Mother Profession:</b>
439	</h5>	439	</h5>
440	</b>	440	</b>
441	</v-flex>	441	</v-flex>
442	<v-flex xs6>	442	<v-flex xs6>
443	<h5 class="my-1">{{ editedItem.motherProfession }}</h5>	443	<h5 class="my-1">{{ editedItem.motherProfession }}</h5>
444	</v-flex>	444	</v-flex>
445	</v-layout>	445	</v-layout>
446	<!-- <v-layout>	446	<!-- <v-layout>
447	<v-flex xs6>	447	<v-flex xs6>
448	<b>	448	<b>
449	<h5 class="right my-1 hidden-lg-only hidden-xl-only hidden-md-only">	449	<h5 class="right my-1 hidden-lg-only hidden-xl-only hidden-md-only">
450	<b>Password:</b>	450	<b>Password:</b>
451	</h5>	451	</h5>
452	<h5 class="right my-1 hidden-sm-only hidden-xs-only">	452	<h5 class="right my-1 hidden-sm-only hidden-xs-only">
453	<b>Password:</b>	453	<b>Password:</b>
454	</h5>	454	</h5>
455	</b>	455	</b>
456	</v-flex>	456	</v-flex>
457	<v-flex xs6>	457	<v-flex xs6>
458	<h5 class="my-1">{{ editedItem.password }}</h5>	458	<h5 class="my-1">{{ editedItem.password }}</h5>
459	</v-flex>	459	</v-flex>
460	</v-layout>-->	460	</v-layout>-->
461	</v-flex>	461	</v-flex>
462	</v-layout>	462	</v-layout>
463	</v-flex>	463	</v-flex>
464	</v-layout>	464	</v-layout>
465	</v-container>	465	</v-container>
466	</v-card>	466	</v-card>
467	</v-dialog>	467	</v-dialog>
468	<!-- **** EXISTING-USERS Parents TABLE **** -->	468	<!-- **** EXISTING-USERS Parents TABLE **** -->
469	<v-toolbar color="transparent" flat>	469	<v-toolbar color="transparent" flat>
470	<v-btn	470	<v-btn
471	fab	471	fab
472	dark	472	dark
473	class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"	473	class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
474	small	474	small
475	@click="addParentDialog = true"	475	@click="addParentDialog = true"
476	>	476	>
477	<v-icon dark>add</v-icon>	477	<v-icon dark>add</v-icon>
478	</v-btn>	478	</v-btn>
479	<v-btn	479	<v-btn
480	v-if="role != 'TEACHER' "	480	v-if="role != 'TEACHER' "
481	round	481	round
482	class="open-dialog-button hidden-sm-only hidden-xs-only"	482	class="open-dialog-button hidden-sm-only hidden-xs-only"
483	dark	483	dark
484	@click="addParentDialog = true"	484	@click="addParentDialog = true"
485	>	485	>
486	<v-icon class="white--text pr-1" size="20">add</v-icon>Add Parent	486	<v-icon class="white--text pr-1" size="20">add</v-icon>Add Parent
487	</v-btn>	487	</v-btn>
488	<v-spacer></v-spacer>	488	<v-spacer></v-spacer>
489	<v-card-title class="body-1" v-show="show">	489	<v-card-title class="body-1" v-show="show">
490	<v-btn icon large flat @click="displaySearch">	490	<v-btn icon large flat @click="displaySearch">
491	<v-avatar size="27">	491	<v-avatar size="27">
492	<img src="/static/icon/search.png" alt="icon" />	492	<img src="/static/icon/search.png" alt="icon" />
493	</v-avatar>	493	</v-avatar>
494	</v-btn>	494	</v-btn>
495	</v-card-title>	495	</v-card-title>
496	<v-flex xs8 sm8 md2 lg2 v-if="showSearch">	496	<v-flex xs8 sm8 md2 lg2 v-if="showSearch">
497	<v-layout>	497	<v-layout>
498	<v-text-field	498	<v-text-field
499	v-model="search"	499	v-model="search"
500	label="Search"	500	label="Search"
501	prepend-inner-icon="search"	501	prepend-inner-icon="search"
502	color="primary"	502	color="primary"
503	ref="searchField"	503	ref="searchField"
504	autofocus	504	autofocus
505	style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important"	505	style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important"
506	></v-text-field>	506	></v-text-field>
507	<v-icon @click="closeSearch" color="error">close</v-icon>	507	<v-icon @click="closeSearch" color="error">close</v-icon>
508	</v-layout>	508	</v-layout>
509	</v-flex>	509	</v-flex>
510	</v-toolbar>	510	</v-toolbar>
511	<v-data-table	511	<v-data-table
512	:headers="headers"	512	:headers="headers"
513	:items="parentsList"	513	:items="parentsList"
514	:pagination.sync="pagination"	514	:pagination.sync="pagination"
515	:search="search"	515	:search="search"
516	>	516	>
517	<template slot="items" slot-scope="props">	517	<template slot="items" slot-scope="props">
518	<tr class="tr">	518	<tr class="tr">
519	<td class="text-xs-center td td-row">{{ props.index + 1}}</td>	519	<td class="text-xs-center td td-row">{{ props.index + 1}}</td>
520	<td class="text-xs-center td td-row">{{ props.item.email }}</td>	520	<td class="text-xs-center td td-row">{{ props.item.email }}</td>
521	<td class="text-xs-center td td-row">{{ props.item.fatherName }}</td>	521	<td class="text-xs-center td td-row">{{ props.item.fatherName }}</td>
522	<td class="text-xs-center td td-row">{{ props.item.fatherCellNo }}</td>	522	<td class="text-xs-center td td-row">{{ props.item.fatherCellNo }}</td>
523	<td class="text-xs-center td td-row">{{ props.item.motherName }}</td>	523	<td class="text-xs-center td td-row">{{ props.item.motherName }}</td>
524	<td class="text-xs-center td td-row">{{ props.item.motherCellNo }}</td>	524	<td class="text-xs-center td td-row">{{ props.item.motherCellNo }}</td>
525	<td class="text-xs-center td td-row">	525	<td class="text-xs-center td td-row">
526	<span>	526	<span>
527	<v-tooltip top>	527	<v-tooltip top>
528	<img	528	<img
529	slot="activator"	529	slot="activator"
530	style="cursor:pointer; width:25px; height:25px; "	530	style="cursor:pointer; width:25px; height:25px; "
531	class="mr-3"	531	class="mr-3"
532	@click="profile(props.item)"	532	@click="profile(props.item)"
533	src="/static/icon/view.png"	533	src="/static/icon/view.png"
534	/>	534	/>
535	<span>View</span>	535	<span>View</span>
536	</v-tooltip>	536	</v-tooltip>
537	<v-tooltip top v-if="role != 'TEACHER' ">	537	<v-tooltip top v-if="role != 'TEACHER' ">
538	<img	538	<img
539	slot="activator"	539	slot="activator"
540	style="cursor:pointer; width:20px; height:18px; "	540	style="cursor:pointer; width:20px; height:18px; "
541	@click="editItem(props.item)"	541	@click="editItem(props.item)"
542	src="/static/icon/edit.png"	542	src="/static/icon/edit.png"
543	class="mr-3"	543	class="mr-3"
544	/>	544	/>
545	<span>Edit</span>	545	<span>Edit</span>
546	</v-tooltip>	546	</v-tooltip>
547	<span v-if="role === 'ADMIN' ">	547	<span v-if="role === 'ADMIN' ">
548	<i	548	<i
549	class="material-icons md-18"	549	class="material-icons md-18"
550	style="cursor:pointer; width:20px; height:18px;"	550	style="cursor:pointer; width:20px; height:18px;"
551	@click="resetParentMPIN(props.item)"	551	@click="resetParentMPIN(props.item)"
552	>vpn_key</i>	552	>vpn_key</i>
553	</span>	553	</span>
554	</span>	554	</span>
555	</td>	555	</td>
556	</tr>	556	</tr>
557	</template>	557	</template>
558	<v-alert	558	<v-alert
559	slot="no-results"	559	slot="no-results"
560	:value="true"	560	:value="true"
561	color="error"	561	color="error"
562	icon="warning"	562	icon="warning"
563	>Your search for "{{ search }}" found no results.</v-alert>	563	>Your search for "{{ search }}" found no results.</v-alert>
564	</v-data-table>	564	</v-data-table>
565		565
566	<!-- **** ADD PARENTS DETAILS**** -->	566	<!-- ****DIALOG BOX - ADD PARENTS DETAILS**** -->
567	<v-dialog v-model="addParentDialog" max-width="1100px">	567	<v-dialog v-model="addParentDialog" max-width="1100px">
568	<v-card flat class="card-style pa-2" dark>	568	<v-card flat class="card-style pa-2" dark>
569	<v-layout>	569	<v-layout>
570	<v-flex xs12>	570	<v-flex xs12>
571	<label class="title text-xs-center">Add Parent</label>	571	<label class="title text-xs-center">Add Parent</label>
572	<v-icon size="24" class="right" @click="addParentDialog = false">cancel</v-icon>	572	<v-icon size="24" class="right" @click="$refs.parentForm.reset();addParentDialog = false">cancel</v-icon>
573	</v-flex>	573	</v-flex>
574	</v-layout>	574	</v-layout>
575	<v-container fluid fill-height>	575	<v-container fluid fill-height>
576	<v-layout align-center>	576	<v-layout align-center>
577	<v-flex xs12 sm12>	577	<v-flex xs12 sm12>
578	<v-form ref="parentForm" v-model="valid" lazy-validation>	578	<v-form ref="parentForm" v-model="valid" lazy-validation>
579	<v-container fluid class="hidden-xs-only hidden-sm-only">	579	<v-container fluid class="hidden-xs-only hidden-sm-only">
580	<v-layout>	580	<v-layout>
581	<v-flex xs12 sm6>	581	<v-flex xs12 sm6>
582	<v-layout>	582	<v-layout>
583	<v-flex xs4 class="pt-4 subheading">	583	<v-flex xs4 class="pt-4 subheading">
584	<label class="right">Father Cell No:</label>	584	<label class="right">Father Cell No:</label>
585	</v-flex>	585	</v-flex>
586	<v-flex xs8 class="ml-3">	586	<v-flex xs8 class="ml-3">
587	<v-text-field	587	<v-text-field
588	v-model="parentData.fatherCellNo"	588	v-model="parentData.fatherCellNo"
589	placeholder="fill your father Cell Number"	589	placeholder="fill your father Cell Number"
590	type="number"	590	type="number"
591	:rules="fatheCellNoRules"	591	:rules="fatheCellNoRules"
592	counter="10"	592	counter="10"
593	required	593	required
594	></v-text-field>	594	></v-text-field>
595	</v-flex>	595	</v-flex>
596	</v-layout>	596	</v-layout>
597	</v-flex>	597	</v-flex>
598	<v-flex xs12 sm6>	598	<v-flex xs12 sm6>
599	<v-layout>	599	<v-layout>
600	<v-flex xs4 class="pt-4 subheading">	600	<v-flex xs4 class="pt-4 subheading">
601	<label class="right">Parent Email Id:</label>	601	<label class="right">Parent Email Id:</label>
602	</v-flex>	602	</v-flex>
603	<v-flex xs8 class="ml-3">	603	<v-flex xs8 class="ml-3">
604	<v-text-field	604	<v-text-field
605	placeholder="fill Parent email"	605	placeholder="fill Parent email"
606	v-model="parentData.email"	606	v-model="parentData.email"
607	type="text"	607	type="text"
608	required	608	required
609	></v-text-field>	609	></v-text-field>
610	</v-flex>	610	</v-flex>
611	</v-layout>	611	</v-layout>
612	</v-flex>	612	</v-flex>
613	</v-layout>	613	</v-layout>
614	<v-layout>	614	<v-layout>
615	<v-flex xs12 sm6>	615	<v-flex xs12 sm6>
616	<v-layout>	616	<v-layout>
617	<v-flex xs4 class="pt-4 subheading">	617	<v-flex xs4 class="pt-4 subheading">
618	<label class="right">Father Name:</label>	618	<label class="right">Father Name:</label>
619	</v-flex>	619	</v-flex>
620	<v-flex xs8 class="ml-3">	620	<v-flex xs8 class="ml-3">
621	<v-text-field	621	<v-text-field
622	v-model="parentData.fatherName"	622	v-model="parentData.fatherName"
623	placeholder="Fill your father Name"	623	placeholder="Fill your father Name"
624	required	624	required
625	></v-text-field>	625	></v-text-field>
626	</v-flex>	626	</v-flex>
627	</v-layout>	627	</v-layout>
628	</v-flex>	628	</v-flex>
629	<v-flex xs12 sm6>	629	<v-flex xs12 sm6>
630	<v-layout>	630	<v-layout>
631	<v-flex xs4 class="pt-4 subheading">	631	<v-flex xs4 class="pt-4 subheading">
632	<label class="right">Father Profession:</label>	632	<label class="right">Father Profession:</label>
633	</v-flex>	633	</v-flex>
634	<v-flex xs8 class="ml-3">	634	<v-flex xs8 class="ml-3">
635	<v-text-field	635	<v-text-field
636	v-model="parentData.fatherProfession"	636	v-model="parentData.fatherProfession"
637	placeholder="fill your father Profession"	637	placeholder="fill your father Profession"
638	required	638	required
639	></v-text-field>	639	></v-text-field>
640	</v-flex>	640	</v-flex>
641	</v-layout>	641	</v-layout>
642	</v-flex>	642	</v-flex>
643	</v-layout>	643	</v-layout>
644	<v-layout>	644	<v-layout>
645	<v-flex xs12 sm6>	645	<v-flex xs12 sm6>
646	<v-layout>	646	<v-layout>
647	<v-flex xs4 class="pt-4 subheading">	647	<v-flex xs4 class="pt-4 subheading">
648	<label class="right">Mother Name:</label>	648	<label class="right">Mother Name:</label>
649	</v-flex>	649	</v-flex>
650	<v-flex xs8 class="ml-3">	650	<v-flex xs8 class="ml-3">
651	<v-text-field	651	<v-text-field
652	v-model="parentData.motherName"	652	v-model="parentData.motherName"
653	placeholder="fill your Mother Name"	653	placeholder="fill your Mother Name"
654	type="text"	654	type="text"
655	required	655	required
656	></v-text-field>	656	></v-text-field>
657	</v-flex>	657	</v-flex>
658	</v-layout>	658	</v-layout>
659	</v-flex>	659	</v-flex>
660	<v-flex xs12 sm6>	660	<v-flex xs12 sm6>
661	<v-layout>	661	<v-layout>
662	<v-flex xs4 class="pt-4 subheading">	662	<v-flex xs4 class="pt-4 subheading">
663	<label class="right">Mother Cell No:</label>	663	<label class="right">Mother Cell No:</label>
664	</v-flex>	664	</v-flex>
665	<v-flex xs8 class="ml-3">	665	<v-flex xs8 class="ml-3">
666	<v-text-field	666	<v-text-field
667	v-model="parentData.motherCellNo"	667	v-model="parentData.motherCellNo"
668	placeholder="fill your Mother Cell Number"	668	placeholder="fill your Mother Cell Number"
669	counter="10"	669	counter="10"
670	type="number"	670	type="number"
671	required	671	required
672	></v-text-field>	672	></v-text-field>
673	</v-flex>	673	</v-flex>
674	</v-layout>	674	</v-layout>
675	</v-flex>	675	</v-flex>
676	</v-layout>	676	</v-layout>
677	<v-layout>	677	<v-layout>
678	<v-flex xs12 sm6>	678	<v-flex xs12 sm6>
679	<v-layout>	679	<v-layout>
680	<v-flex xs4 class="pt-4 subheading">	680	<v-flex xs4 class="pt-4 subheading">
681	<label class="right">Mother Profession:</label>	681	<label class="right">Mother Profession:</label>
682	</v-flex>	682	</v-flex>
683	<v-flex xs8 class="ml-3">	683	<v-flex xs8 class="ml-3">
684	<v-text-field	684	<v-text-field
685	v-model="parentData.motherProfession"	685	v-model="parentData.motherProfession"
686	placeholder="fill your Mother Profession"	686	placeholder="fill your Mother Profession"
687	type="text"	687	type="text"
688	required	688	required
689	></v-text-field>	689	></v-text-field>
690	</v-flex>	690	</v-flex>
691	</v-layout>	691	</v-layout>
692	</v-flex>	692	</v-flex>
693	<v-flex xs12 sm6>	693	<v-flex xs12 sm6>
694	<v-layout>	694	<v-layout>
695	<v-flex xs4 class="pt-4 subheading">	695	<v-flex xs4 class="pt-4 subheading">
696	<label class="right">Password:</label>	696	<label class="right">Password:</label>
697	</v-flex>	697	</v-flex>
698	<v-flex xs8 class="ml-3">	698	<v-flex xs8 class="ml-3">
699	<v-text-field	699	<v-text-field
700	v-model="parentData.password"	700	v-model="parentData.password"
701	:append-icon="e1 ? 'visibility_off' : 'visibility'"	701	:append-icon="e1 ? 'visibility_off' : 'visibility'"
702	:append-icon-cb="() => (e1 = !e1)"	702	:append-icon-cb="() => (e1 = !e1)"
703	:type="e1 ? 'password' : 'text'"	703	:type="e1 ? 'password' : 'text'"
704	:rules="password"	704	:rules="password"
705	placeholder="Enter Your Password"	705	placeholder="Enter Your Password"
706	:disabled="isFatherCellExists"	706	:disabled="isFatherCellExists"
707	required	707	required
708	></v-text-field>	708	></v-text-field>
709	</v-flex>	709	</v-flex>
710	</v-layout>	710	</v-layout>
711	</v-flex>	711	</v-flex>
712	</v-layout>	712	</v-layout>
713	<v-flex xs12 sm12>	713	<v-flex xs12 sm12>
714	<v-layout>	714	<v-layout>
715	<v-flex xs12 sm12>	715	<v-flex xs12 sm12>
716	<v-btn	716	<v-btn
717	class="right add-button"	717	class="right add-button"
718	@click="submitParentDetails"	718	@click="submitParentDetails"
719	round	719	round
720	dark	720	dark
721	:loading="loading"	721	:loading="loading"
722	v-show="showParent"	722	v-show="showParent"
723	>Add</v-btn>	723	>Add</v-btn>
724	<v-btn @click="clear" round dark class="clear-button right">Clear</v-btn>	724	<v-btn @click="clear" round dark class="clear-button right">Clear</v-btn>
725	</v-flex>	725	</v-flex>
726	</v-layout>	726	</v-layout>
727	</v-flex>	727	</v-flex>
728	</v-container>	728	</v-container>
729	<v-container fluid class="hidden-lg-only hidden-xl-only hidden-md-only">	729	<v-container fluid class="hidden-lg-only hidden-xl-only hidden-md-only">
730	<v-layout wrap>	730	<v-layout wrap>
731	<v-flex xs12 sm6>	731	<v-flex xs12 sm6>
732	<v-layout wrap>	732	<v-layout wrap>
733	<v-flex xs12 class="pt-4 subheading">	733	<v-flex xs12 class="pt-4 subheading">
734	<label>Father Cell No:</label>	734	<label>Father Cell No:</label>
735	</v-flex>	735	</v-flex>
736	<v-flex xs12>	736	<v-flex xs12>
737	<v-text-field	737	<v-text-field
738	v-model="parentData.fatherCellNo"	738	v-model="parentData.fatherCellNo"
739	:rules="fatheCellNoRules"	739	:rules="fatheCellNoRules"
740	counter="10"	740	counter="10"
741	placeholder="fill your father Cell Number"	741	placeholder="fill your father Cell Number"
742	type="number"	742	type="number"
743	required	743	required
744	></v-text-field>	744	></v-text-field>
745	</v-flex>	745	</v-flex>
746	</v-layout>	746	</v-layout>
747	</v-flex>	747	</v-flex>
748	<v-flex xs12 sm6>	748	<v-flex xs12 sm6>
749	<v-layout wrap>	749	<v-layout wrap>
750	<v-flex xs12 class="pt-4 subheading">	750	<v-flex xs12 class="pt-4 subheading">
751	<label>Parent Email Id:</label>	751	<label>Parent Email Id:</label>
752	</v-flex>	752	</v-flex>
753	<v-flex xs12>	753	<v-flex xs12>
754	<v-text-field	754	<v-text-field
755	placeholder="fill Parent email"	755	placeholder="fill Parent email"
756	v-model="parentData.email"	756	v-model="parentData.email"
757	type="text"	757	type="text"
758	required	758	required
759	></v-text-field>	759	></v-text-field>
760	</v-flex>	760	</v-flex>
761	</v-layout>	761	</v-layout>
762	</v-flex>	762	</v-flex>
763	</v-layout>	763	</v-layout>
764	<v-layout wrap>	764	<v-layout wrap>
765	<v-flex xs12 sm6>	765	<v-flex xs12 sm6>
766	<v-layout wrap>	766	<v-layout wrap>
767	<v-flex xs12 class="pt-4 subheading">	767	<v-flex xs12 class="pt-4 subheading">
768	<label>Father Name:</label>	768	<label>Father Name:</label>
769	</v-flex>	769	</v-flex>
770	<v-flex xs12>	770	<v-flex xs12>
771	<v-text-field	771	<v-text-field
772	v-model="parentData.fatherName"	772	v-model="parentData.fatherName"
773	placeholder="Fill your father Name"	773	placeholder="Fill your father Name"
774	required	774	required
775	></v-text-field>	775	></v-text-field>
776	</v-flex>	776	</v-flex>
777	</v-layout>	777	</v-layout>
778	</v-flex>	778	</v-flex>
779	<v-flex xs12 sm6>	779	<v-flex xs12 sm6>
780	<v-layout wrap>	780	<v-layout wrap>
781	<v-flex xs12 class="pt-4 subheading">	781	<v-flex xs12 class="pt-4 subheading">
782	<label>Father Profession:</label>	782	<label>Father Profession:</label>
783	</v-flex>	783	</v-flex>
784	<v-flex xs12>	784	<v-flex xs12>
785	<v-text-field	785	<v-text-field
786	v-model="parentData.fatherProfession"	786	v-model="parentData.fatherProfession"
787	placeholder="fill your father Profession"	787	placeholder="fill your father Profession"
788	required	788	required
789	></v-text-field>	789	></v-text-field>
790	</v-flex>	790	</v-flex>
791	</v-layout>	791	</v-layout>
792	</v-flex>	792	</v-flex>
793	</v-layout>	793	</v-layout>
794	<v-layout wrap>	794	<v-layout wrap>
795	<v-flex xs12 sm6>	795	<v-flex xs12 sm6>
796	<v-layout wrap>	796	<v-layout wrap>
797	<v-flex xs12 class="pt-4 subheading">	797	<v-flex xs12 class="pt-4 subheading">
798	<label>Mother Name:</label>	798	<label>Mother Name:</label>
799	</v-flex>	799	</v-flex>
800	<v-flex xs12>	800	<v-flex xs12>
801	<v-text-field	801	<v-text-field
802	v-model="parentData.motherName"	802	v-model="parentData.motherName"
803	placeholder="fill your Mother Name"	803	placeholder="fill your Mother Name"
804	type="text"	804	type="text"
805	required	805	required
806	></v-text-field>	806	></v-text-field>
807	</v-flex>	807	</v-flex>
808	</v-layout>	808	</v-layout>
809	</v-flex>	809	</v-flex>
810	<v-flex xs12 sm6>	810	<v-flex xs12 sm6>
811	<v-layout wrap>	811	<v-layout wrap>
812	<v-flex xs42 class="pt-4 subheading">	812	<v-flex xs42 class="pt-4 subheading">
813	<label>Mother Cell No:</label>	813	<label>Mother Cell No:</label>
814	</v-flex>	814	</v-flex>
815	<v-flex xs12>	815	<v-flex xs12>
816	<v-text-field	816	<v-text-field
817	v-model="parentData.motherCellNo"	817	v-model="parentData.motherCellNo"
818	placeholder="fill your Mother Cell Number"	818	placeholder="fill your Mother Cell Number"
819	type="number"	819	type="number"
820	required	820	required
821	></v-text-field>	821	></v-text-field>
822	</v-flex>	822	</v-flex>
823	</v-layout>	823	</v-layout>
824	</v-flex>	824	</v-flex>
825	</v-layout>	825	</v-layout>
826	<v-layout wrap>	826	<v-layout wrap>
827	<v-flex xs12 sm6>	827	<v-flex xs12 sm6>
828	<v-layout wrap>	828	<v-layout wrap>
829	<v-flex xs12 class="pt-4 subheading">	829	<v-flex xs12 class="pt-4 subheading">
830	<label>Mother Profession:</label>	830	<label>Mother Profession:</label>
831	</v-flex>	831	</v-flex>
832	<v-flex xs12>	832	<v-flex xs12>
833	<v-text-field	833	<v-text-field
834	v-model="parentData.motherProfession"	834	v-model="parentData.motherProfession"
835	placeholder="fill your Mother Profession"	835	placeholder="fill your Mother Profession"
836	type="text"	836	type="text"
837	required	837	required
838	></v-text-field>	838	></v-text-field>
839	</v-flex>	839	</v-flex>
840	</v-layout>	840	</v-layout>
841	</v-flex>	841	</v-flex>
842	</v-layout>	842	</v-layout>
843	<v-flex xs12 sm12>	843	<v-flex xs12 sm12>
844	<v-layout>	844	<v-layout>
845	<v-flex xs6 sm6 offset-sm1>	845	<v-flex xs6 sm6 offset-sm1>
846	<v-btn @click="clear" class="clear-button" round dark>clear</v-btn>	846	<v-btn @click="clear" class="clear-button" round dark>clear</v-btn>
847	</v-flex>	847	</v-flex>
848	<v-flex xs6 sm6>	848	<v-flex xs6 sm6>
849	<v-btn	849	<v-btn
850	class="add-button"	850	class="add-button"
851	@click="submitParentDetails"	851	@click="submitParentDetails"
852	round	852	round
853	dark	853	dark
854	:loading="loading"	854	:loading="loading"
855	v-show="showParent"	855	v-show="showParent"
856	>Add</v-btn>	856	>Add</v-btn>
857	</v-flex>	857	</v-flex>
858	</v-layout>	858	</v-layout>
859	</v-flex>	859	</v-flex>
860	</v-container>	860	</v-container>
861	</v-form>	861	</v-form>
862	</v-flex>	862	</v-flex>
863	</v-layout>	863	</v-layout>
864	</v-container>	864	</v-container>
865	</v-card>	865	</v-card>
866	</v-dialog>	866	</v-dialog>
867	<div class="loader" v-if="showLoader">	867	<div class="loader" v-if="showLoader">
868	<v-progress-circular indeterminate color="white"></v-progress-circular>	868	<v-progress-circular indeterminate color="white"></v-progress-circular>
869	</div>	869	</div>
870	<v-snackbar	870	<v-snackbar
871	:timeout="timeout"	871	:timeout="timeout"
872	:top="y === 'top'"	872	:top="y === 'top'"
873	:right="x === 'right'"	873	:right="x === 'right'"
874	:vertical="mode === 'vertical'"	874	:vertical="mode === 'vertical'"
875	v-model="snackbar"	875	v-model="snackbar"
876	color="success"	876	color="success"
877	>{{ text }}</v-snackbar>	877	>{{ text }}</v-snackbar>
878	</v-container>	878	</v-container>
879	</template>	879	</template>
880		880
881	<script>	881	<script>
882	import http from "@/Services/http.js";	882	import http from "@/Services/http.js";
883	import Util from "@/util";	883	import Util from "@/util";
884	import moment from "moment";	884	import moment from "moment";
885		885
886	export default {	886	export default {
887	data: () => ({	887	data: () => ({
888	e1: true,	888	e1: true,
889	showParent: true,	889	showParent: true,
890	snackbar: false,	890	snackbar: false,
891	role: "",	891	role: "",
892	// TEACHER: "",	892	// TEACHER: "",
893	y: "top",	893	y: "top",
894	x: "right",	894	x: "right",
895	color: "",	895	color: "",
896	mode: "",	896	mode: "",
897	timeout: 3000,	897	timeout: 3000,
898	text: "",	898	text: "",
899	show: true,	899	show: true,
900	showSearch: false,	900	showSearch: false,
901	showLoader: false,	901	showLoader: false,
902	loading: false,	902	loading: false,
903	date: null,	903	date: null,
904	search: "",	904	search: "",
905	password: "",	905	password: "",
906	addParentDialog: false,	906	addParentDialog: false,
907	menu: false,	907	menu: false,
908	menu1: false,	908	menu1: false,
909	editParentDilaog: false,	909	editParentDilaog: false,
910	profileParentDialog: false,	910	profileParentDialog: false,
911	resetParentMpin: false,	911	resetParentMpin: false,
912	viewProfileParentDialog: false,	912	viewProfileParentDialog: false,
913	valid: true,	913	valid: true,
914	validEditParent: true,	914	validEditParent: true,
915	validParentMpin: true,	915	validParentMpin: true,
916	pagination: {	916	pagination: {
917	rowsPerPage: 10,	917	rowsPerPage: 10,
918	},	918	},
919	fatherNameRules: [(v) => !!v \|\| " Father Name is required"],	919	fatherNameRules: [(v) => !!v \|\| " Father Name is required"],
920	fatheCellNoRules: [	920	fatheCellNoRules: [
921	(v) => !!v \|\| " father Cell Number is required",	921	(v) => !!v \|\| " father Cell Number is required",
922	(v) => v <= 10000000000 \|\| "Max 10 characters is required",	922	(v) => v <= 10000000000 \|\| "Max 10 characters is required",
923	],	923	],
924	password: [	924	password: [
925	(v) => !!v \|\| "Password field is Required.",	925	(v) => !!v \|\| "Password field is Required.",
926	// v => (/^(?=.[a-z])(?=.[0-9])(?=.[!@#$%^&])(?=.{8,})/).test(v) && v.length >= 8 \|\| 'Min 8 characters lower case symbol required'	926	// v => (/^(?=.[a-z])(?=.[0-9])(?=.[!@#$%^&])(?=.{8,})/).test(v) && v.length >= 8 \|\| 'Min 8 characters lower case symbol required'
927	],	927	],
928	editFatherNoRule: [	928	editFatherNoRule: [
929	(v) => !!v \|\| " father Cell Number is required",	929	(v) => !!v \|\| " father Cell Number is required",
930	(v) => v <= 10000000000 \|\| "Max 10 characters is required",	930	(v) => v <= 10000000000 \|\| "Max 10 characters is required",
931	],	931	],
932		932
933	editfatherCellNo: [(v) => !!v \|\| " Father Name is required"],	933	editfatherCellNo: [(v) => !!v \|\| " Father Name is required"],
934	errorMessages: "",	934	errorMessages: "",
935	emailRules: [	935	emailRules: [
936	(v) => !!v \|\| "E-mail is required",	936	(v) => !!v \|\| "E-mail is required",
937	(v) =>	937	(v) =>
938	/^\w+([.-]?\w+)@\w+([.-]?\w+)(\.\w{2,3})+$/.test(v) \|\|	938	/^\w+([.-]?\w+)@\w+([.-]?\w+)(\.\w{2,3})+$/.test(v) \|\|
939	"E-mail must be valid",	939	"E-mail must be valid",
940	],	940	],
941	mPinRules: [	941	mPinRules: [
942	(v) => !!v \|\| "MPIN is required",	942	(v) => !!v \|\| "MPIN is required",
943	(v) => v <= 10000 \|\| "Max 4 numbers are required",	943	(v) => v <= 10000 \|\| "Max 4 numbers are required",
944	],	944	],
945	headers: [	945	headers: [
946	{	946	{
947	text: "No",	947	text: "No",
948	align: "center",	948	align: "center",
949	sortable: false,	949	sortable: false,
950	value: "No",	950	value: "No",
951	},	951	},
952	{ text: "Email", value: "email", sortable: false, align: "center" },	952	{ text: "Email", value: "email", sortable: false, align: "center" },
953	{	953	{
954	text: "Father Name",	954	text: "Father Name",
955	value: "fatherName",	955	value: "fatherName",
956	sortable: false,	956	sortable: false,
957	align: "center",	957	align: "center",
958	},	958	},
959	{	959	{
960	text: "Father Cell No",	960	text: "Father Cell No",
961	value: "fatherName",	961	value: "fatherName",
962	sortable: false,	962	sortable: false,
963	align: "center",	963	align: "center",
964	},	964	},
965	{	965	{
966	text: "Mother Name",	966	text: "Mother Name",
967	value: "motherName",	967	value: "motherName",
968	sortable: false,	968	sortable: false,
969	align: "center",	969	align: "center",
970	},	970	},
971	{	971	{
972	text: "Mother Cell No",	972	text: "Mother Cell No",
973	value: "motherCellNo",	973	value: "motherCellNo",
974	sortable: false,	974	sortable: false,
975	align: "center",	975	align: "center",
976	},	976	},
977	{ text: "Action", value: "", sortable: false, align: "center" },	977	{ text: "Action", value: "", sortable: false, align: "center" },
978	],	978	],
979	parentsList: [],	979	parentsList: [],
980	editedIndex: -1,	980	editedIndex: -1,
981	parentData: {},	981	parentData: {},
982	max: 10,	982	max: 10,
983	editedItem: {	983	editedItem: {
984	fatherName: "",	984	fatherName: "",
985	fatherCellNo: "",	985	fatherCellNo: "",
986	motherName: "",	986	motherName: "",
987	motherCellNo: "",	987	motherCellNo: "",
988	email: "",	988	email: "",
989	password: "",	989	password: "",
990	},	990	},
991	editMpin: {	991	editMpin: {
992	mPin: "",	992	mPin: "",
993	},	993	},
994	isFatherCellExists: false,	994	isFatherCellExists: false,
995	}),	995	}),
996	watch: {	996	watch: {
997	menu(val) {	997	menu(val) {
998	val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));	998	val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
999	},	999	},
1000	menu1(val) {	1000	menu1(val) {
1001	val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));	1001	val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
1002	},	1002	},
1003	},	1003	},
1004	methods: {	1004	methods: {
1005	editItem(item) {	1005	editItem(item) {
1006	this.editedIndex = this.parentsList.indexOf(item);	1006	this.editedIndex = this.parentsList.indexOf(item);
1007	this.editedItem = Object.assign({}, item);	1007	this.editedItem = Object.assign({}, item);
1008	this.editParentDilaog = true;	1008	this.editParentDilaog = true;
1009	},	1009	},
1010	profile(item) {	1010	profile(item) {
1011	this.editedIndex = this.parentsList.indexOf(item);	1011	this.editedIndex = this.parentsList.indexOf(item);
1012	this.editedItem = Object.assign({}, item);	1012	this.editedItem = Object.assign({}, item);
1013	this.profileParentDialog = true;	1013	this.profileParentDialog = true;
1014	},	1014	},
1015	resetParentMPIN(item) {	1015	resetParentMPIN(item) {
1016	this.editMpin = Object.assign({}, item);	1016	this.editMpin = Object.assign({}, item);
1017	this.resetParentMpin = true;	1017	this.resetParentMpin = true;
1018	},	1018	},
1019	close() {	1019	close() {
1020	this.editParentDilaog = false;	1020	this.editParentDilaog = false;
1021	},	1021	},
1022	closeProfile() {	1022	closeProfile() {
1023	this.profileParentDialog = false;	1023	this.profileParentDialog = false;
1024	},	1024	},
1025	closeReset() {	1025	closeReset() {
1026	this.resetParentMpin = false;	1026	this.resetParentMpin = false;
1027	},	1027	},
1028	clear() {	1028	clear() {
1029	this.$refs.parentForm.reset();	1029	this.$refs.parentForm.reset();
1030	},	1030	},
1031	save() {	1031	save() {
1032	if (this.$refs.editParentForm.validate()) {	1032	if (this.$refs.editParentForm.validate()) {
1033	this.editedItem.parentId = this.editedItem._id;	1033	this.editedItem.parentId = this.editedItem._id;
1034	http()	1034	http()
1035	.put("/updateParent", this.editedItem)	1035	.put("/updateParent", this.editedItem)
1036	.then((response) => {	1036	.then((response) => {
1037	this.snackbar = true;	1037	this.snackbar = true;
1038	this.color = "green";	1038	this.color = "green";
1039	this.text = response.data.message;	1039	this.text = response.data.message;
1040	this.getParentDetails();	1040	this.getParentDetails();
1041	this.close();	1041	this.close();
1042	})	1042	})
1043	.catch((error) => {	1043	.catch((error) => {
1044	this.snackbar = true;	1044	this.snackbar = true;
1045	this.color = "error";	1045	this.color = "error";
1046	this.text = error.response.data.message;	1046	this.text = error.response.data.message;
1047	if (error.response.data.statusText) {	1047	if (error.response.data.statusText) {
1048	this.text = error.response.data.statusText;	1048	this.text = error.response.data.statusText;
1049	}	1049	}
1050	});	1050	});
1051	}	1051	}
1052	},	1052	},
1053	resetMpin() {	1053	resetMpin() {
1054	if (this.$refs.resetParentMpinForm.validate()) {	1054	if (this.$refs.resetParentMpinForm.validate()) {
1055	var changeMpin = {	1055	var changeMpin = {
1056	parentId: this.editMpin._id,	1056	parentId: this.editMpin._id,
1057	mPin: this.editMpin.mPin,	1057	mPin: this.editMpin.mPin,
1058	};	1058	};
1059	http()	1059	http()
1060	.put("/resetMPin", changeMpin)	1060	.put("/resetMPin", changeMpin)
1061	.then((response) => {	1061	.then((response) => {
1062	this.snackbar = true;	1062	this.snackbar = true;
1063	this.color = "green";	1063	this.color = "green";
1064	this.text = response.data.message;	1064	this.text = response.data.message;
1065	this.getParentDetails();	1065	this.getParentDetails();
1066	this.resetParentMpin = false;	1066	this.resetParentMpin = false;
1067	this.closeReset();	1067	this.closeReset();
1068	})	1068	})
1069	.catch((error) => {	1069	.catch((error) => {
1070	this.snackbar = true;	1070	this.snackbar = true;
1071	this.color = "error";	1071	this.color = "error";
1072	this.text = error.response.data.message;	1072	this.text = error.response.data.message;
1073	if (error.response.data.statusText) {	1073	if (error.response.data.statusText) {
1074	this.text = error.response.data.statusText;	1074	this.text = error.response.data.statusText;
1075	}	1075	}
1076	});	1076	});
1077	}	1077	}
1078	},	1078	},
1079	async submitParentDetails() {	1079	async submitParentDetails() {
1080	if (this.$refs.parentForm.validate()) {	1080	if (this.$refs.parentForm.validate()) {
1081	this.parentData.role = "PARENT";	1081	this.parentData.role = "PARENT";
1082	this.loading = true;	1082	this.loading = true;
1083	await http()	1083	await http()
1084	.post("/createParent", this.parentData)	1084	.post("/createParent", this.parentData)
1085	.then((response) => {	1085	.then((response) => {
1086	this.parentId = response.data.data.id;	1086	this.parentId = response.data.data.id;
1087	this.snackbar = true;	1087	this.snackbar = true;
1088	this.color = "green";	1088	this.color = "green";
1089	this.text = response.data.message;	1089	this.text = response.data.message;
1090	this.getParentDetails();	1090	this.getParentDetails();
1091	this.clear();	1091	this.clear();
1092	this.loading = false;	1092	this.loading = false;
1093	this.isFatherCellExists = true;	1093	this.isFatherCellExists = true;
1094	this.addParentDialog = false;	1094	this.addParentDialog = false;
1095	})	1095	})
1096	.catch((error) => {	1096	.catch((error) => {
1097	this.snackbar = true;	1097	this.snackbar = true;
1098	this.color = "error";	1098	this.color = "error";
1099	this.text = error.response.data.message;	1099	this.text = error.response.data.message;
1100	if (error.response.data.statusText) {	1100	if (error.response.data.statusText) {
1101	this.text = error.response.data.statusText;	1101	this.text = error.response.data.statusText;
1102	}	1102	}
1103	this.loading = false;	1103	this.loading = false;
1104	});	1104	});
1105	}	1105	}
1106	},	1106	},
1107	getParentDetails() {	1107	getParentDetails() {
1108	http()	1108	http()
1109	.get("getParentsList", {	1109	.get("getParentsList", {
1110	headers: {	1110	headers: {
1111	Authorization: "Bearer " + this.$store.state.token,	1111	Authorization: "Bearer " + this.$store.state.token,
1112	},	1112	},
1113	})	1113	})
1114	.then((response) => {	1114	.then((response) => {
1115	this.parentsList = response.data.data;	1115	this.parentsList = response.data.data;
1116	})	1116	})
1117	.catch((error) => {	1117	.catch((error) => {
1118	// console.log("err====>", error.response.data.message);	1118	// console.log("err====>", error.response.data.message);
1119	this.showLoader = false;	1119	this.showLoader = false;
1120	if (error.response.status === 401) {	1120	if (error.response.status === 401) {
1121	this.$router.replace({ path: "/" });	1121	this.$router.replace({ path: "/" });
1122	this.$store.dispatch("setToken", null);	1122	this.$store.dispatch("setToken", null);
1123	this.$store.dispatch("Id", null);	1123	this.$store.dispatch("Id", null);
1124	this.$store.dispatch("Role", null);	1124	this.$store.dispatch("Role", null);
1125	}	1125	}
1126	});	1126	});
1127	},	1127	},
1128	displaySearch() {	1128	displaySearch() {
1129	this.show = false	1129	this.show = false
1130	this.showSearch = true;	1130	this.showSearch = true;
1131	// this.$refs.searchField.focus()	1131	// this.$refs.searchField.focus()
1132	},	1132	},
1133	closeSearch() {	1133	closeSearch() {
1134	this.showSearch = false;	1134	this.showSearch = false;
1135	this.show = true;	1135	this.show = true;
1136	this.search = "";	1136	this.search = "";
1137	},	1137	},
1138	},	1138	},
1139	mounted() {	1139	mounted() {
1140	this.getParentDetails();	1140	this.getParentDetails();
1141	// console.log("role", this.$store.state.role);	1141	// console.log("role", this.$store.state.role);
1142	this.role = this.$store.state.role;	1142	this.role = this.$store.state.role;
1143	},	1143	},
1144	};	1144	};
1145	</script>	1145	</script>

src/pages/Section/section.vue

Diff comments View file @7efe027

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">	3	<v-dialog v-model="editSectionDialog" max-width="460px">
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">	76	<v-dialog v-model="viewSectionDialog" max-width="500px">
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	<!-- **** ADD Students Dialog box**** -->	238	<!-- DIALOG BOX - ADD Students Dialog box -->
239	<v-dialog v-model="addSectionDialog" max-width="400px">	239	<v-dialog v-model="addSectionDialog" max-width="400px">
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 size="24" class="right" @click="addSectionDialog = false">cancel</v-icon>	244	<v-icon size="24" class="right" @click="$refs.form.reset();addSectionDialog = false">cancel</v-icon>
245	</v-flex>	245	</v-flex>
246	</v-layout>	246	</v-layout>
247	<v-container fluid fill-height>	247	<v-container fluid fill-height>
248	<v-layout align-center>	248	<v-layout align-center>
249	<v-flex xs12>	249	<v-flex xs12>
250	<v-form ref="form" v-model="valid" lazy-validation>	250	<v-form ref="form" v-model="valid" lazy-validation>
251	<v-layout>	251	<v-layout>
252	<v-flex xs4 class="pt-4 subheading">	252	<v-flex xs4 class="pt-4 subheading">
253	<label class="right">Section :</label>	253	<label class="right">Section :</label>
254	</v-flex>	254	</v-flex>
255	<v-flex xs8 class="ml-3">	255	<v-flex xs8 class="ml-3">
256	<v-autocomplete	256	<v-autocomplete
257	v-model="sectionData.name"	257	v-model="sectionData.name"
258	placeholder="fill your Section Name"	258	placeholder="fill your Section Name"
259	:items="SectionName"	259	:items="SectionName"
260	:rules="nameRules"	260	:rules="nameRules"
261	required	261	required
262	></v-autocomplete>	262	></v-autocomplete>
263	</v-flex>	263	</v-flex>
264	</v-layout>	264	</v-layout>
265	<v-layout>	265	<v-layout>
266	<v-flex xs4 class="pt-4 subheading">	266	<v-flex xs4 class="pt-4 subheading">
267	<label class="right">Class :</label>	267	<label class="right">Class :</label>
268	</v-flex>	268	</v-flex>
269	<v-flex xs8 class="ml-3">	269	<v-flex xs8 class="ml-3">
270	<v-select	270	<v-select
271	:items="addclass"	271	:items="addclass"
272	label="Select Class"	272	label="Select Class"
273	v-model="sectionData.classNum"	273	v-model="sectionData.classNum"
274	item-text="classNum"	274	item-text="classNum"
275	item-value="_id"	275	item-value="_id"
276	name="Select Class"	276	name="Select Class"
277	:rules="classRules"	277	:rules="classRules"
278	required	278	required
279	></v-select>	279	></v-select>
280	</v-flex>	280	</v-flex>
281	</v-layout>	281	</v-layout>
282	<v-layout>	282	<v-layout>
283	<v-flex xs4 class="pt-4 subheading">	283	<v-flex xs4 class="pt-4 subheading">
284	<label class="right">Incharge :</label>	284	<label class="right">Incharge :</label>
285	</v-flex>	285	</v-flex>
286	<v-flex xs8 class="ml-3">	286	<v-flex xs8 class="ml-3">
287	<v-select	287	<v-select
288	:items="teacherList"	288	:items="teacherList"
289	label="Select Incharge"	289	label="Select Incharge"
290	v-model="sectionData.sectionId"	290	v-model="sectionData.sectionId"
291	item-text="name"	291	item-text="name"
292	item-value="_id"	292	item-value="_id"
293	name="Select Class"	293	name="Select Class"
294	:rules="inchargeRules"	294	:rules="inchargeRules"
295	required	295	required
296	></v-select>	296	></v-select>
297	</v-flex>	297	</v-flex>
298	</v-layout>	298	</v-layout>
299	<v-layout>	299	<v-layout>
300	<v-flex xs4 class="pt-4 subheading">	300	<v-flex xs4 class="pt-4 subheading">
301	<label class="right">Session:</label>	301	<label class="right">Session:</label>
302	</v-flex>	302	</v-flex>
303	<v-flex xs8 class="ml-3">	303	<v-flex xs8 class="ml-3">
304	<v-text-field	304	<v-text-field
305	v-model="sectionData.session"	305	v-model="sectionData.session"
306	placeholder="fill your Session"	306	placeholder="fill your Session"
307	name="name"	307	name="name"
308	type="text"	308	type="text"
309	:rules="sessionRules"	309	:rules="sessionRules"
310	required	310	required
311	></v-text-field>	311	></v-text-field>
312	</v-flex>	312	</v-flex>
313	</v-layout>	313	</v-layout>
314	<v-layout>	314	<v-layout>
315	<v-flex xs12 sm12>	315	<v-flex xs12 sm12>
316	<v-card-actions>	316	<v-card-actions>
317	<v-btn @click="clear" class="add-button" round dark>Clear</v-btn>	317	<v-btn @click="clear" class="add-button" round dark>Clear</v-btn>
318	<v-spacer></v-spacer>	318	<v-spacer></v-spacer>
319	<v-btn @click="submit" class="add-button" round dark :loading="loading">Add</v-btn>	319	<v-btn @click="submit" class="add-button" round dark :loading="loading">Add</v-btn>
320	</v-card-actions>	320	</v-card-actions>
321	</v-flex>	321	</v-flex>
322	</v-layout>	322	</v-layout>
323	</v-form>	323	</v-form>
324	</v-flex>	324	</v-flex>
325	</v-layout>	325	</v-layout>
326	</v-container>	326	</v-container>
327	</v-card>	327	</v-card>
328	</v-dialog>	328	</v-dialog>
329	<v-snackbar	329	<v-snackbar
330	:timeout="timeout"	330	:timeout="timeout"
331	:top="y === 'top'"	331	:top="y === 'top'"
332	:right="x === 'right'"	332	:right="x === 'right'"
333	:vertical="mode === 'vertical'"	333	:vertical="mode === 'vertical'"
334	v-model="snackbar"	334	v-model="snackbar"
335	:color="color"	335	:color="color"
336	>{{ text }}</v-snackbar>	336	>{{ text }}</v-snackbar>
337	<div class="loader" v-if="showLoader">	337	<div class="loader" v-if="showLoader">
338	<v-progress-circular indeterminate color="white"></v-progress-circular>	338	<v-progress-circular indeterminate color="white"></v-progress-circular>
339	</div>	339	</div>
340	</v-container>	340	</v-container>
341	</template>	341	</template>
342		342
343	<script>	343	<script>
344	import http from "@/Services/http.js";	344	import http from "@/Services/http.js";
345	// import { apiCollection } from "@/schoolApi/apiCollection";	345	// import { apiCollection } from "@/schoolApi/apiCollection";
346	// const getSectionData = apiCollection.get("posts");	346	// const getSectionData = apiCollection.get("posts");
347		347
348	export default {	348	export default {
349	data: () => ({	349	data: () => ({
350	snackbar: false,	350	snackbar: false,
351	y: "top",	351	y: "top",
352	x: "right",	352	x: "right",
353	mode: "",	353	mode: "",
354	timeout: 5000,	354	timeout: 5000,
355	text: "",	355	text: "",
356	color: "",	356	color: "",
357	show: true,	357	show: true,
358	showSearch: false,	358	showSearch: false,
359	showLoader: false,	359	showLoader: false,
360	loading: false,	360	loading: false,
361	date: null,	361	date: null,
362	search: "",	362	search: "",
363	editSectionDialog: false,	363	editSectionDialog: false,
364	viewSectionDialog: false,	364	viewSectionDialog: false,
365	valid: true,	365	valid: true,
366	validEdit: true,	366	validEdit: true,
367	addSectionDialog: false,	367	addSectionDialog: false,
368	editLoading: false,	368	editLoading: false,
369	details: [],	369	details: [],
370	pagination: {	370	pagination: {
371	rowsPerPage: 10	371	rowsPerPage: 10
372	},	372	},
373	nameRules: [v => !!v \|\| " Section Name is required"],	373	nameRules: [v => !!v \|\| " Section Name is required"],
374	classRules: [v => !!v \|\| " Class Name is required"],	374	classRules: [v => !!v \|\| " Class Name is required"],
375	sessionRules: [v => !!v \|\| " Session is required"],	375	sessionRules: [v => !!v \|\| " Session is required"],
376	inchargeRules: [v => !!v \|\| " Incharge Name is required"],	376	inchargeRules: [v => !!v \|\| " Incharge Name is required"],
377	SectionName: ["A", "B", "C", "D", "E", "F"],	377	SectionName: ["A", "B", "C", "D", "E", "F"],
378	headers: [	378	headers: [
379	{	379	{
380	text: "No",	380	text: "No",
381	align: "",	381	align: "",
382	sortable: false,	382	sortable: false,
383	value: "No"	383	value: "No"
384	},	384	},
385	{	385	{
386	text: "Class Name",	386	text: "Class Name",
387	value: "classData.classNum",	387	value: "classData.classNum",
388	sortable: false,	388	sortable: false,
389	align: "center"	389	align: "center"
390	},	390	},
391	{ text: "Section Name", value: "name", sortable: false, align: "center" },	391	{ text: "Section Name", value: "name", sortable: false, align: "center" },
392	{ text: "Session", value: "session", sortable: false, align: "center" },	392	{ text: "Session", value: "session", sortable: false, align: "center" },
393	{ text: "Action", value: "", sortable: false, align: "center" }	393	{ text: "Action", value: "", sortable: false, align: "center" }
394	],	394	],
395	sectionList: [],	395	sectionList: [],
396	addclass: [],	396	addclass: [],
397	teacherList: [],	397	teacherList: [],
398	select: "",	398	select: "",
399	selectId: "",	399	selectId: "",
400	token: "",	400	token: "",
401	editedIndex: -1,	401	editedIndex: -1,
402	editedItem: {	402	editedItem: {
403	classData: {	403	classData: {
404	classNum: ""	404	classNum: ""
405	},	405	},
406	teacherData: [	406	teacherData: [
407	{	407	{
408	name: ""	408	name: ""
409	}	409	}
410	]	410	]
411	// name: "",	411	// name: "",
412	// session: new Date().getFullYear()	412	// session: new Date().getFullYear()
413	},	413	},
414	sectionData: {	414	sectionData: {
415	session: new Date().getFullYear()	415	session: new Date().getFullYear()
416	}	416	}
417	}),	417	}),
418	methods: {	418	methods: {
419	getSectionList() {	419	getSectionList() {
420	// const { data } = await getSectionData.get();	420	// const { data } = await getSectionData.get();
421	this.showLoader = true;	421	this.showLoader = true;
422	http()	422	http()
423	.get("/getAllSections", {	423	.get("/getAllSections", {
424	headers: { Authorization: "Bearer " + this.token }	424	headers: { Authorization: "Bearer " + this.token }
425	})	425	})
426	.then(response => {	426	.then(response => {
427	this.sectionList = response.data.data;	427	this.sectionList = response.data.data;
428	this.showLoader = false;	428	this.showLoader = false;
429	// console.log("getAllSections=====>",response.data.data)	429	// console.log("getAllSections=====>",response.data.data)
430	})	430	})
431	.catch(error => {	431	.catch(error => {
432	this.showLoader = false;	432	this.showLoader = false;
433	if (error.response.status === 401) {	433	if (error.response.status === 401) {
434	this.$router.replace({ path: "/" });	434	this.$router.replace({ path: "/" });
435	this.$store.dispatch("setToken", null);	435	this.$store.dispatch("setToken", null);
436	this.$store.dispatch("Id", null);	436	this.$store.dispatch("Id", null);
437	}	437	}
438	});	438	});
439	},	439	},
440	editItem(item) {	440	editItem(item) {
441	this.editedIndex = this.sectionList.indexOf(item);	441	this.editedIndex = this.sectionList.indexOf(item);
442	this.editedItem = Object.assign({}, item);	442	this.editedItem = Object.assign({}, item);
443	this.editSectionDialog = true;	443	this.editSectionDialog = true;
444	},	444	},
445	profile(item) {	445	profile(item) {
446	this.editedIndex = this.sectionList.indexOf(item);	446	this.editedIndex = this.sectionList.indexOf(item);
447	this.editedItem = Object.assign({}, item);	447	this.editedItem = Object.assign({}, item);
448	this.viewSectionDialog = true;	448	this.viewSectionDialog = true;
449	},	449	},
450	deleteItem(item) {	450	deleteItem(item) {
451	let deleteStudent = {	451	let deleteStudent = {
452	sectionId: item._id	452	sectionId: item._id
453	};	453	};
454	http()	454	http()
455	.delete(	455	.delete(
456	"/deleteSection",	456	"/deleteSection",
457	confirm("Are you sure you want to delete this?") && {	457	confirm("Are you sure you want to delete this?") && {
458	params: deleteStudent	458	params: deleteStudent
459	}	459	}
460	)	460	)
461	.then(response => {	461	.then(response => {
462	this.snackbar = true;	462	this.snackbar = true;
463	this.text = response.data.message;	463	this.text = response.data.message;
464	this.color = "green";	464	this.color = "green";
465	this.getSectionList();	465	this.getSectionList();
466	})	466	})
467	.catch(error => {	467	.catch(error => {
468	this.snackbar = true;	468	this.snackbar = true;
469	this.text = error.response.data.message;	469	this.text = error.response.data.message;
470	this.color = "green";	470	this.color = "green";
471	});	471	});
472	},	472	},
473	closeSectionDialog() {	473	closeSectionDialog() {
474	this.editSectionDialog = false;	474	this.editSectionDialog = false;
475	},	475	},
476	closeviewSectionDialog() {	476	closeviewSectionDialog() {
477	this.viewSectionDialog = false;	477	this.viewSectionDialog = false;
478	},	478	},
479	submit() {	479	submit() {
480	if (this.$refs.form.validate()) {	480	if (this.$refs.form.validate()) {
481	let addSection = {	481	let addSection = {
482	name: this.sectionData.name,	482	name: this.sectionData.name,
483	classId: this.sectionData.classNum,	483	classId: this.sectionData.classNum,
484	session: this.sectionData.session,	484	session: this.sectionData.session,
485	classInchargeId: this.sectionData.sectionId	485	classInchargeId: this.sectionData.sectionId
486	};	486	};
487	this.loading = true;	487	this.loading = true;
488	http()	488	http()
489	.post("/createSection", addSection)	489	.post("/createSection", addSection)
490	.then(response => {	490	.then(response => {
491	this.getSectionList();	491	this.getSectionList();
492	this.snackbar = true;	492	this.snackbar = true;
493	this.color = "green";	493	this.color = "green";
494	this.text = "New Section added successfully";	494	this.text = "New Section added successfully";
495	this.clear();	495	this.clear();
496	this.addSectionDialog = false;	496	this.addSectionDialog = false;
497	this.loading = false;	497	this.loading = false;
498	})	498	})
499	.catch(error => {	499	.catch(error => {
500	this.snackbar = true;	500	this.snackbar = true;
501	this.color = "error";	501	this.color = "error";
502	this.text = error.response.data.message;	502	this.text = error.response.data.message;
503	this.loading = false;	503	this.loading = false;
504	});	504	});
505	}	505	}
506	},	506	},
507	clear() {	507	clear() {
508	this.$refs.form.reset();	508	this.$refs.form.reset();
509	},	509	},
510	save() {	510	save() {
511	this.editedItem.sectionId = this.editedItem._id;	511	this.editedItem.sectionId = this.editedItem._id;
512	this.editLoading = true;	512	this.editLoading = true;
513	http()	513	http()
514	.put("/updateSection", this.editedItem)	514	.put("/updateSection", this.editedItem)
515	.then(response => {	515	.then(response => {
516	this.editLoading = false;	516	this.editLoading = false;
517	this.snackbar = true;	517	this.snackbar = true;
518	this.color = "green";	518	this.color = "green";
519	this.text = response.data.message;	519	this.text = response.data.message;
520	this.getSectionList();	520	this.getSectionList();
521	this.closeSectionDialog();	521	this.closeSectionDialog();
522	})	522	})
523	.catch(error => {	523	.catch(error => {
524	this.editLoading = false;	524	this.editLoading = false;
525	this.snackbar = true;	525	this.snackbar = true;
526	this.color = "error";	526	this.color = "error";
527	this.text = error.response.data.message;	527	this.text = error.response.data.message;
528	});	528	});
529	},	529	},
530	getAllTeacher() {	530	getAllTeacher() {
531	http()	531	http()
532	.get("/getTeachersList", {	532	.get("/getTeachersList", {
533	headers: { Authorization: "Bearer " + this.token }	533	headers: { Authorization: "Bearer " + this.token }
534	})	534	})
535	.then(response => {	535	.then(response => {
536	this.teacherList = response.data.data;	536	this.teacherList = response.data.data;
537	this.showLoader = false;	537	this.showLoader = false;
538	})	538	})
539	.catch(err => {	539	.catch(err => {
540	// console.log("err====>", err);	540	// console.log("err====>", err);
541	this.showLoader = false;	541	this.showLoader = false;
542	});	542	});
543	},	543	},
544	getAllClasses() {	544	getAllClasses() {
545	http()	545	http()
546	.get("/getClassesList", {	546	.get("/getClassesList", {
547	headers: { Authorization: "Bearer " + this.token }	547	headers: { Authorization: "Bearer " + this.token }
548	})	548	})
549	.then(response => {	549	.then(response => {
550	this.addclass = response.data.data;	550	this.addclass = response.data.data;
551	})	551	})
552	.catch(err => {	552	.catch(err => {
553	// console.log("err====>", err);	553	// console.log("err====>", err);
554	// this.$router.replace({ path: "/" });	554	// this.$router.replace({ path: "/" });
555	});	555	});
556	},	556	},
557	displaySearch() {	557	displaySearch() {
558	(this.show = false), (this.showSearch = true);	558	(this.show = false), (this.showSearch = true);
559	},	559	},
560	closeSearch() {	560	closeSearch() {
561	this.showSearch = false;	561	this.showSearch = false;
562	this.show = true;	562	this.show = true;
563	this.search = "";	563	this.search = "";
564	}	564	}
565	},	565	},
566	mounted() {	566	mounted() {
567	this.token = this.$store.state.token;	567	this.token = this.$store.state.token;
568	this.getSectionList();	568	this.getSectionList();
569	this.getAllClasses();	569	this.getAllClasses();
570	this.getAllTeacher();	570	this.getAllTeacher();
571	}	571	}
572	};	572	};
573	</script>	573	</script>
574		574

src/pages/Teachers/teachers.vue

Diff comments View file @7efe027

1	<template>	1	<template>
2	<v-container fluid class="body-color">	2	<v-container fluid class="body-color">
3	<!-- **** EDIT TEACHERS DETAILS **** -->	3	<!-- **** EDIT TEACHERS DETAILS **** -->
4	<v-dialog v-model="editTeacherDialog" max-width="1160px" scrollable>	4	<v-dialog v-model="editTeacherDialog" max-width="1160px" scrollable>
5	<v-card flat class="card-style" dark>	5	<v-card flat class="card-style" dark>
6	<v-card-text>	6	<v-card-text>
7	<v-layout>	7	<v-layout>
8	<v-flex xs12>	8	<v-flex xs12>
9	<label class="title text-xs-center">Edit Teacher Details</label>	9	<label class="title text-xs-center">Edit Teacher Details</label>
10	<v-icon size="24" class="right" @click="editTeacherDialog = false">cancel</v-icon>	10	<v-icon size="24" class="right" @click="editTeacherDialog = false">cancel</v-icon>
11	</v-flex>	11	</v-flex>
12	</v-layout>	12	</v-layout>
13	<v-container fluid>	13	<v-container fluid>
14	<v-layout>	14	<v-layout>
15	<v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4">	15	<v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4">
16	<v-avatar size="100px" v-if="!editedItem.profilePicUrl && !imageUrl">	16	<v-avatar size="100px" v-if="!editedItem.profilePicUrl && !imageUrl">
17	<img src="/static/icon/user.png" />	17	<img src="/static/icon/user.png" />
18	</v-avatar>	18	</v-avatar>
19	<img	19	<img
20	:src="editedItem.profilePicUrl"	20	:src="editedItem.profilePicUrl"
21	v-else-if="editedItem.profilePicUrl && !imageUrl"	21	v-else-if="editedItem.profilePicUrl && !imageUrl"
22	height="150"	22	height="150"
23	style="border-radius:50%; width:150px"	23	style="border-radius:50%; width:150px"
24	/>	24	/>
25	<img	25	<img
26	v-if="imageUrl"	26	v-if="imageUrl"
27	:src="imageUrl"	27	:src="imageUrl"
28	height="150"	28	height="150"
29	style="border-radius:50%; width:150px"	29	style="border-radius:50%; width:150px"
30	/>	30	/>
31	<input	31	<input
32	type="file"	32	type="file"
33	style="display:none"	33	style="display:none"
34	ref="image"	34	ref="image"
35	accept="image/*"	35	accept="image/*"
36	@change="onFilePicked"	36	@change="onFilePicked"
37	/>	37	/>
38	</v-flex>	38	</v-flex>
39	</v-layout>	39	</v-layout>
40	<v-layout wrap>	40	<v-layout wrap>
41	<v-flex xs12 sm6>	41	<v-flex xs12 sm6>
42	<v-layout>	42	<v-layout>
43	<v-flex xs4 class="pt-4 subheading">	43	<v-flex xs4 class="pt-4 subheading">
44	<label class="right hidden-xs-only hidden-sm-only">Full Name:</label>	44	<label class="right hidden-xs-only hidden-sm-only">Full Name:</label>
45	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label>	45	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label>
46	</v-flex>	46	</v-flex>
47	<v-flex xs8 class="ml-3">	47	<v-flex xs8 class="ml-3">
48	<v-text-field	48	<v-text-field
49	v-model="editedItem.name"	49	v-model="editedItem.name"
50	placeholder="fill your full Name"	50	placeholder="fill your full Name"
51	type="text"	51	type="text"
52	required	52	required
53	></v-text-field>	53	></v-text-field>
54	</v-flex>	54	</v-flex>
55	</v-layout>	55	</v-layout>
56	</v-flex>	56	</v-flex>
57	<v-flex xs12 sm6>	57	<v-flex xs12 sm6>
58	<v-layout>	58	<v-layout>
59	<v-flex xs4 sm4 class="pt-4 subheading">	59	<v-flex xs4 sm4 class="pt-4 subheading">
60	<label class="right">Email ID:</label>	60	<label class="right">Email ID:</label>
61	</v-flex>	61	</v-flex>
62	<v-flex xs8 sm8 class="ml-3">	62	<v-flex xs8 sm8 class="ml-3">
63	<v-text-field	63	<v-text-field
64	placeholder="fill your email"	64	placeholder="fill your email"
65	v-model="editedItem.email"	65	v-model="editedItem.email"
66	type="text"	66	type="text"
67	required	67	required
68	></v-text-field>	68	></v-text-field>
69	</v-flex>	69	</v-flex>
70	</v-layout>	70	</v-layout>
71	</v-flex>	71	</v-flex>
72	</v-layout>	72	</v-layout>
73	<v-layout wrap>	73	<v-layout wrap>
74	<v-flex xs12 sm6>	74	<v-flex xs12 sm6>
75	<v-layout>	75	<v-layout>
76	<v-flex xs4 class="pt-4 subheading">	76	<v-flex xs4 class="pt-4 subheading">
77	<label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>	77	<label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>
78	<label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label>	78	<label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label>
79	</v-flex>	79	</v-flex>
80	<v-flex xs8 class="ml-3">	80	<v-flex xs8 class="ml-3">
81	<v-menu	81	<v-menu
82	ref="menu"	82	ref="menu"
83	:close-on-content-click="false"	83	:close-on-content-click="false"
84	v-model="menu2"	84	v-model="menu2"
85	:nudge-right="40"	85	:nudge-right="40"
86	lazy	86	lazy
87	transition="scale-transition"	87	transition="scale-transition"
88	offset-y	88	offset-y
89	full-width	89	full-width
90	min-width="290px"	90	min-width="290px"
91	>	91	>
92	<v-text-field	92	<v-text-field
93	slot="activator"	93	slot="activator"
94	v-model="editedItem.dob"	94	v-model="editedItem.dob"
95	placeholder="Select date"	95	placeholder="Select date"
96	></v-text-field>	96	></v-text-field>
97	<v-date-picker	97	<v-date-picker
98	ref="picker"	98	ref="picker"
99	v-model="editedItem.dob"	99	v-model="editedItem.dob"
100	:max="new Date().toISOString().substr(0, 10)"	100	:max="new Date().toISOString().substr(0, 10)"
101	min="1950-01-01"	101	min="1950-01-01"
102	@input="menu2 = false"	102	@input="menu2 = false"
103	></v-date-picker>	103	></v-date-picker>
104	</v-menu>	104	</v-menu>
105	</v-flex>	105	</v-flex>
106	</v-layout>	106	</v-layout>
107	</v-flex>	107	</v-flex>
108	<v-flex xs12 sm6>	108	<v-flex xs12 sm6>
109	<v-layout>	109	<v-layout>
110	<v-flex xs4 class="pt-4 subheading">	110	<v-flex xs4 class="pt-4 subheading">
111	<label class="right">City:</label>	111	<label class="right">City:</label>
112	</v-flex>	112	</v-flex>
113	<v-flex xs8 class="ml-3">	113	<v-flex xs8 class="ml-3">
114	<v-text-field	114	<v-text-field
115	v-model="editedItem.city"	115	v-model="editedItem.city"
116	placeholder="fill your City Name"	116	placeholder="fill your City Name"
117	type="text"	117	type="text"
118	required	118	required
119	></v-text-field>	119	></v-text-field>
120	</v-flex>	120	</v-flex>
121	</v-layout>	121	</v-layout>
122	</v-flex>	122	</v-flex>
123	</v-layout>	123	</v-layout>
124	<v-layout wrap>	124	<v-layout wrap>
125	<v-flex xs12 sm6>	125	<v-flex xs12 sm6>
126	<v-layout>	126	<v-layout>
127	<v-flex xs4 class="pt-4 subheading">	127	<v-flex xs4 class="pt-4 subheading">
128	<label class="right">State:</label>	128	<label class="right">State:</label>
129	</v-flex>	129	</v-flex>
130	<v-flex xs8 class="ml-3">	130	<v-flex xs8 class="ml-3">
131	<v-text-field	131	<v-text-field
132	v-model="editedItem.state"	132	v-model="editedItem.state"
133	placeholder="fill your State Name"	133	placeholder="fill your State Name"
134	type="text"	134	type="text"
135	required	135	required
136	></v-text-field>	136	></v-text-field>
137	</v-flex>	137	</v-flex>
138	</v-layout>	138	</v-layout>
139	</v-flex>	139	</v-flex>
140	<v-flex xs12 sm6>	140	<v-flex xs12 sm6>
141	<v-layout>	141	<v-layout>
142	<v-flex xs4 class="pt-4 subheading">	142	<v-flex xs4 class="pt-4 subheading">
143	<label class="right">PinCode:</label>	143	<label class="right">PinCode:</label>
144	</v-flex>	144	</v-flex>
145	<v-flex xs8 class="ml-3">	145	<v-flex xs8 class="ml-3">
146	<v-text-field	146	<v-text-field
147	v-model="editedItem.pincode"	147	v-model="editedItem.pincode"
148	placeholder="fill your pincode"	148	placeholder="fill your pincode"
149	type="number"	149	type="number"
150	required	150	required
151	></v-text-field>	151	></v-text-field>
152	</v-flex>	152	</v-flex>
153	</v-layout>	153	</v-layout>
154	</v-flex>	154	</v-flex>
155	</v-layout>	155	</v-layout>
156	<v-layout wrap>	156	<v-layout wrap>
157	<v-flex xs12 sm6>	157	<v-flex xs12 sm6>
158	<v-layout>	158	<v-layout>
159	<v-flex xs4 class="pt-4 subheading">	159	<v-flex xs4 class="pt-4 subheading">
160	<label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>	160	<label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>
161	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label>	161	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label>
162	</v-flex>	162	</v-flex>
163	<v-flex xs8 class="ml-3">	163	<v-flex xs8 class="ml-3">
164	<v-text-field	164	<v-text-field
165	v-model="editedItem.mobileNo"	165	v-model="editedItem.mobileNo"
166	placeholder="fill your MobileNo"	166	placeholder="fill your MobileNo"
167	type="number"	167	type="number"
168	required	168	required
169	></v-text-field>	169	></v-text-field>
170	</v-flex>	170	</v-flex>
171	</v-layout>	171	</v-layout>
172	</v-flex>	172	</v-flex>
173	<v-flex xs12 sm6>	173	<v-flex xs12 sm6>
174	<v-layout>	174	<v-layout>
175	<v-flex xs4 class="pt-4 subheading">	175	<v-flex xs4 class="pt-4 subheading">
176	<label class="right hidden-xs-only hidden-sm-only">Select Country:</label>	176	<label class="right hidden-xs-only hidden-sm-only">Select Country:</label>
177	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label>	177	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label>
178	</v-flex>	178	</v-flex>
179	<v-flex xs8 sm8 class="ml-3">	179	<v-flex xs8 sm8 class="ml-3">
180	<v-autocomplete	180	<v-autocomplete
181	v-model="editedItem.country"	181	v-model="editedItem.country"
182	:items="countries"	182	:items="countries"
183	placeholder="Select Country Name"	183	placeholder="Select Country Name"
184	required	184	required
185	></v-autocomplete>	185	></v-autocomplete>
186	</v-flex>	186	</v-flex>
187	</v-layout>	187	</v-layout>
188	</v-flex>	188	</v-flex>
189	</v-layout>	189	</v-layout>
190	<v-layout wrap>	190	<v-layout wrap>
191	<v-flex xs12 sm6>	191	<v-flex xs12 sm6>
192	<v-layout>	192	<v-layout>
193	<v-flex xs4 class="pt-4 subheading">	193	<v-flex xs4 class="pt-4 subheading">
194	<label class="right">Join Date:</label>	194	<label class="right">Join Date:</label>
195	</v-flex>	195	</v-flex>
196	<v-flex xs8 sm8 class="ml-3">	196	<v-flex xs8 sm8 class="ml-3">
197	<v-menu	197	<v-menu
198	ref="menu"	198	ref="menu"
199	:close-on-content-click="false"	199	:close-on-content-click="false"
200	v-model="menu3"	200	v-model="menu3"
201	:nudge-right="40"	201	:nudge-right="40"
202	lazy	202	lazy
203	transition="scale-transition"	203	transition="scale-transition"
204	offset-y	204	offset-y
205	full-width	205	full-width
206	min-width="290px"	206	min-width="290px"
207	>	207	>
208	<v-text-field	208	<v-text-field
209	slot="activator"	209	slot="activator"
210	v-model="editedItem.joinDate"	210	v-model="editedItem.joinDate"
211	placeholder="Select date"	211	placeholder="Select date"
212	></v-text-field>	212	></v-text-field>
213	<v-date-picker	213	<v-date-picker
214	ref="picker"	214	ref="picker"
215	v-model="editedItem.joinDate"	215	v-model="editedItem.joinDate"
216	:max="new Date().toISOString().substr(0, 10)"	216	:max="new Date().toISOString().substr(0, 10)"
217	min="1950-01-01"	217	min="1950-01-01"
218	@input="menu3 = false"	218	@input="menu3 = false"
219	></v-date-picker>	219	></v-date-picker>
220	</v-menu>	220	</v-menu>
221	</v-flex>	221	</v-flex>
222	</v-layout>	222	</v-layout>
223	</v-flex>	223	</v-flex>
224	<v-flex xs12 sm6>	224	<v-flex xs12 sm6>
225	<v-layout>	225	<v-layout>
226	<v-flex xs4 class="pt-4 subheading">	226	<v-flex xs4 class="pt-4 subheading">
227	<label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>	227	<label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
228	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label>	228	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label>
229	</v-flex>	229	</v-flex>
230	<v-flex xs8 sm8 class="ml-3">	230	<v-flex xs8 sm8 class="ml-3">
231	<v-text-field	231	<v-text-field
232	label="Select Image"	232	label="Select Image"
233	@click="pickFile"	233	@click="pickFile"
234	v-model="imageName"	234	v-model="imageName"
235	append-icon="attach_file"	235	append-icon="attach_file"
236	></v-text-field>	236	></v-text-field>
237	</v-flex>	237	</v-flex>
238	</v-layout>	238	</v-layout>
239	</v-flex>	239	</v-flex>
240	</v-layout>	240	</v-layout>
241	<v-layout class="hidden-xs-only hidden-sm-only" wrap>	241	<v-layout class="hidden-xs-only hidden-sm-only" wrap>
242	<v-flex xs12 sm6>	242	<v-flex xs12 sm6>
243	<v-layout>	243	<v-layout>
244	<v-flex xs4 sm4 class="pt-4 subheading">	244	<v-flex xs4 sm4 class="pt-4 subheading">
245	<label class="right">Present Address:</label>	245	<label class="right">Present Address:</label>
246	</v-flex>	246	</v-flex>
247	<v-flex xs8 sm8 class="ml-3">	247	<v-flex xs8 sm8 class="ml-3">
248	<v-text-field	248	<v-text-field
249	name="input-4-3"	249	name="input-4-3"
250	v-model="editedItem.presentAddress"	250	v-model="editedItem.presentAddress"
251	placeholder="fill Your present Address"	251	placeholder="fill Your present Address"
252	required	252	required
253	></v-text-field>	253	></v-text-field>
254	</v-flex>	254	</v-flex>
255	</v-layout>	255	</v-layout>
256	</v-flex>	256	</v-flex>
257	<v-flex xs12 sm6>	257	<v-flex xs12 sm6>
258	<v-layout>	258	<v-layout>
259	<v-flex xs4 sm4 class="pt-4 subheading">	259	<v-flex xs4 sm4 class="pt-4 subheading">
260	<label class="right">Permanent Address:</label>	260	<label class="right">Permanent Address:</label>
261	</v-flex>	261	</v-flex>
262	<v-flex xs12 sm8 class="ml-3">	262	<v-flex xs12 sm8 class="ml-3">
263	<v-text-field	263	<v-text-field
264	name="input-4-3"	264	name="input-4-3"
265	v-model="editedItem.permanentAddress"	265	v-model="editedItem.permanentAddress"
266	placeholder="fill Your Permanent Address"	266	placeholder="fill Your Permanent Address"
267	required	267	required
268	></v-text-field>	268	></v-text-field>
269	</v-flex>	269	</v-flex>
270	</v-layout>	270	</v-layout>
271	</v-flex>	271	</v-flex>
272	</v-layout>	272	</v-layout>
273	<v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap>	273	<v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap>
274	<v-flex xs12 sm12>	274	<v-flex xs12 sm12>
275	<v-layout>	275	<v-layout>
276	<v-flex xs12 sm3 class="pt-4 subheading text-xs-center">	276	<v-flex xs12 sm3 class="pt-4 subheading text-xs-center">
277	<label class>Present Address:</label>	277	<label class>Present Address:</label>
278	</v-flex>	278	</v-flex>
279	</v-layout>	279	</v-layout>
280	<v-layout>	280	<v-layout>
281	<v-flex xs12 sm12>	281	<v-flex xs12 sm12>
282	<v-textarea	282	<v-textarea
283	name="input-4-3"	283	name="input-4-3"
284	v-model="editedItem.presentAddress"	284	v-model="editedItem.presentAddress"
285	placeholder="fill Your present Address"	285	placeholder="fill Your present Address"
286	required	286	required
287	></v-textarea>	287	></v-textarea>
288	</v-flex>	288	</v-flex>
289	</v-layout>	289	</v-layout>
290	</v-flex>	290	</v-flex>
291	<v-flex xs12 sm12>	291	<v-flex xs12 sm12>
292	<v-layout>	292	<v-layout>
293	<v-flex xs12 sm3 class="pt-4 pr-4 subheading text-xs-center addressForm">	293	<v-flex xs12 sm3 class="pt-4 pr-4 subheading text-xs-center addressForm">
294	<label>Permanent Address:</label>	294	<label>Permanent Address:</label>
295	</v-flex>	295	</v-flex>
296	</v-layout>	296	</v-layout>
297	<v-layout>	297	<v-layout>
298	<v-flex xs12 sm12>	298	<v-flex xs12 sm12>
299	<v-textarea	299	<v-textarea
300	name="input-4-3"	300	name="input-4-3"
301	v-model="editedItem.permanentAddress"	301	v-model="editedItem.permanentAddress"
302	placeholder="fill Your Permanent Address"	302	placeholder="fill Your Permanent Address"
303	required	303	required
304	></v-textarea>	304	></v-textarea>
305	</v-flex>	305	</v-flex>
306	</v-layout>	306	</v-layout>
307	</v-flex>	307	</v-flex>
308	</v-layout>	308	</v-layout>
309	<v-layout>	309	<v-layout>
310	<v-flex xs12 sm12>	310	<v-flex xs12 sm12>
311	<v-flex xs12 sm12>	311	<v-flex xs12 sm12>
312	<v-layout class="right">	312	<v-layout class="right">
313	<v-btn @click="save" round dark :loading="loading" class="add-button">Save</v-btn>	313	<v-btn @click="save" round dark :loading="loading" class="add-button">Save</v-btn>
314	</v-layout>	314	</v-layout>
315	</v-flex>	315	</v-flex>
316	</v-flex>	316	</v-flex>
317	</v-layout>	317	</v-layout>
318	</v-container>	318	</v-container>
319	</v-card-text>	319	</v-card-text>
320	</v-card>	320	</v-card>
321	</v-dialog>	321	</v-dialog>
322		322
323	<!-- **** PROFILE VIEW TEACHERS DETAILS **** -->	323	<!-- **** PROFILE VIEW TEACHERS DETAILS **** -->
324		324
325	<v-dialog v-model="viewTeacherProfileDialog" max-width="500px" scrollable>	325	<v-dialog v-model="viewTeacherProfileDialog" max-width="500px" scrollable>
326	<v-card flat class="card-style pa-3" dark>	326	<v-card flat class="card-style pa-3" dark>
327	<v-layout>	327	<v-layout>
328	<v-flex xs12>	328	<v-flex xs12>
329	<label class="title text-xs-center">View Teacher</label>	329	<label class="title text-xs-center">View Teacher</label>
330	<v-icon size="24" class="right" @click="viewTeacherProfileDialog = false">cancel</v-icon>	330	<v-icon size="24" class="right" @click="viewTeacherProfileDialog = false">cancel</v-icon>
331	</v-flex>	331	</v-flex>
332	</v-layout>	332	</v-layout>
333	<v-card-text>	333	<v-card-text>
334	<v-container grid-list-md>	334	<v-container grid-list-md>
335	<v-layout wrap>	335	<v-layout wrap>
336	<v-flex>	336	<v-flex>
337	<v-flex align-center justify-center layout text-xs-center>	337	<v-flex align-center justify-center layout text-xs-center>
338	<v-avatar size="80">	338	<v-avatar size="80">
339	<img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" />	339	<img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" />
340	<img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" />	340	<img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" />
341	</v-avatar>	341	</v-avatar>
342	</v-flex>	342	</v-flex>
343	<v-layout>	343	<v-layout>
344	<v-flex xs5 sm6>	344	<v-flex xs5 sm6>
345	<h5 class="right my-1">	345	<h5 class="right my-1">
346	<b>Full Name:</b>	346	<b>Full Name:</b>
347	</h5>	347	</h5>
348	</v-flex>	348	</v-flex>
349	<v-flex sm6 xs8>	349	<v-flex sm6 xs8>
350	<h5 class="my-1">{{ editedItem.name }}</h5>	350	<h5 class="my-1">{{ editedItem.name }}</h5>
351	</v-flex>	351	</v-flex>
352	</v-layout>	352	</v-layout>
353	<v-layout>	353	<v-layout>
354	<v-flex xs5 sm6>	354	<v-flex xs5 sm6>
355	<h5 class="right my-1">	355	<h5 class="right my-1">
356	<b>Email:</b>	356	<b>Email:</b>
357	</h5>	357	</h5>
358	</v-flex>	358	</v-flex>
359	<v-flex sm6 xs8>	359	<v-flex sm6 xs8>
360	<h5 class="my-1">{{ editedItem.email }}</h5>	360	<h5 class="my-1">{{ editedItem.email }}</h5>
361	</v-flex>	361	</v-flex>
362	</v-layout>	362	</v-layout>
363	<v-layout>	363	<v-layout>
364	<v-flex xs5 sm6>	364	<v-flex xs5 sm6>
365	<h5 class="right my-1">	365	<h5 class="right my-1">
366	<b>City:</b>	366	<b>City:</b>
367	</h5>	367	</h5>
368	</v-flex>	368	</v-flex>
369	<v-flex sm6 xs8>	369	<v-flex sm6 xs8>
370	<h5 class="my-1">{{ editedItem.city }}</h5>	370	<h5 class="my-1">{{ editedItem.city }}</h5>
371	</v-flex>	371	</v-flex>
372	</v-layout>	372	</v-layout>
373	<v-layout>	373	<v-layout>
374	<v-flex xs5 sm6>	374	<v-flex xs5 sm6>
375	<h5 class="right my-1">	375	<h5 class="right my-1">
376	<b>State:</b>	376	<b>State:</b>
377	</h5>	377	</h5>
378	</v-flex>	378	</v-flex>
379	<v-flex sm6 xs8>	379	<v-flex sm6 xs8>
380	<h5 class="my-1">{{ editedItem.state }}</h5>	380	<h5 class="my-1">{{ editedItem.state }}</h5>
381	</v-flex>	381	</v-flex>
382	</v-layout>	382	</v-layout>
383	<v-layout>	383	<v-layout>
384	<v-flex xs5 sm6>	384	<v-flex xs5 sm6>
385	<h5 class="right my-1">	385	<h5 class="right my-1">
386	<b>Country:</b>	386	<b>Country:</b>
387	</h5>	387	</h5>
388	</v-flex>	388	</v-flex>
389	<v-flex sm6 xs8>	389	<v-flex sm6 xs8>
390	<h5 class="my-1">{{ editedItem.country }}</h5>	390	<h5 class="my-1">{{ editedItem.country }}</h5>
391	</v-flex>	391	</v-flex>
392	</v-layout>	392	</v-layout>
393	<v-layout>	393	<v-layout>
394	<v-flex xs5 sm6>	394	<v-flex xs5 sm6>
395	<h5 class="right my-1">	395	<h5 class="right my-1">
396	<b>Pincode:</b>	396	<b>Pincode:</b>
397	</h5>	397	</h5>
398	</v-flex>	398	</v-flex>
399	<v-flex sm6 xs8>	399	<v-flex sm6 xs8>
400	<h5 class="my-1">{{ editedItem.pincode }}</h5>	400	<h5 class="my-1">{{ editedItem.pincode }}</h5>
401	</v-flex>	401	</v-flex>
402	</v-layout>	402	</v-layout>
403	<v-layout>	403	<v-layout>
404	<v-flex xs5 sm6>	404	<v-flex xs5 sm6>
405	<h5 class="right my-1">	405	<h5 class="right my-1">
406	<b>Mobile No:</b>	406	<b>Mobile No:</b>
407	</h5>	407	</h5>
408	</v-flex>	408	</v-flex>
409	<v-flex sm6 xs8>	409	<v-flex sm6 xs8>
410	<h5 class="my-1">{{ editedItem.mobileNo }}</h5>	410	<h5 class="my-1">{{ editedItem.mobileNo }}</h5>
411	</v-flex>	411	</v-flex>
412	</v-layout>	412	</v-layout>
413	<v-layout>	413	<v-layout>
414	<v-flex xs5 sm6>	414	<v-flex xs5 sm6>
415	<h5 class="right my-1">	415	<h5 class="right my-1">
416	<b>Join Date:</b>	416	<b>Join Date:</b>
417	</h5>	417	</h5>
418	</v-flex>	418	</v-flex>
419	<v-flex sm6 xs8>	419	<v-flex sm6 xs8>
420	<h5 class="my-1">{{ dates(editedItem.joinDate) }}</h5>	420	<h5 class="my-1">{{ dates(editedItem.joinDate) }}</h5>
421	</v-flex>	421	</v-flex>
422	</v-layout>	422	</v-layout>
423	<v-layout>	423	<v-layout>
424	<v-flex xs5 sm6>	424	<v-flex xs5 sm6>
425	<h5 class="right my-1">	425	<h5 class="right my-1">
426	<b>D.O.B :</b>	426	<b>D.O.B :</b>
427	</h5>	427	</h5>
428	</v-flex>	428	</v-flex>
429	<v-flex sm6 xs8>	429	<v-flex sm6 xs8>
430	<h5 class="my-1">{{ dates(editedItem.dob) }}</h5>	430	<h5 class="my-1">{{ dates(editedItem.dob) }}</h5>
431	</v-flex>	431	</v-flex>
432	</v-layout>	432	</v-layout>
433	<v-layout>	433	<v-layout>
434	<v-flex xs6 sm6>	434	<v-flex xs6 sm6>
435	<h5 class="right my-1">	435	<h5 class="right my-1">
436	<b>Permanent Address:</b>	436	<b>Permanent Address:</b>
437	</h5>	437	</h5>
438	</v-flex>	438	</v-flex>
439	<v-flex sm6 xs8>	439	<v-flex sm6 xs8>
440	<h5 class="my-1">{{ editedItem.permanentAddress }}</h5>	440	<h5 class="my-1">{{ editedItem.permanentAddress }}</h5>
441	</v-flex>	441	</v-flex>
442	</v-layout>	442	</v-layout>
443	<v-layout>	443	<v-layout>
444	<v-flex xs6 sm6>	444	<v-flex xs6 sm6>
445	<h5 class="right my-1">	445	<h5 class="right my-1">
446	<b>present Address:</b>	446	<b>present Address:</b>
447	</h5>	447	</h5>
448	</v-flex>	448	</v-flex>
449	<v-flex sm6 xs8>	449	<v-flex sm6 xs8>
450	<h5 class="my-1">{{ editedItem.presentAddress }}</h5>	450	<h5 class="my-1">{{ editedItem.presentAddress }}</h5>
451	</v-flex>	451	</v-flex>
452	</v-layout>	452	</v-layout>
453	</v-flex>	453	</v-flex>
454	</v-layout>	454	</v-layout>
455	</v-container>	455	</v-container>
456	</v-card-text>	456	</v-card-text>
457	</v-card>	457	</v-card>
458	</v-dialog>	458	</v-dialog>
459	<!-- **** EXISTING-Teachers TABLE DATA**** -->	459	<!-- **** EXISTING-Teachers TABLE DATA**** -->
460	<v-toolbar color="transparent" flat>	460	<v-toolbar color="transparent" flat>
461	<v-btn	461	<v-btn
462	fab	462	fab
463	dark	463	dark
464	class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"	464	class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
465	small	465	small
466	@click="addTeacherDialog = true"	466	@click="addTeacherDialog = true"
467	>	467	>
468	<v-icon dark>add</v-icon>	468	<v-icon dark>add</v-icon>
469	</v-btn>	469	</v-btn>
470	<v-btn	470	<v-btn
471	v-if="role != 'TEACHER' "	471	v-if="role != 'TEACHER' "
472	round	472	round
473	class="open-dialog-button hidden-sm-only hidden-xs-only"	473	class="open-dialog-button hidden-sm-only hidden-xs-only"
474	dark	474	dark
475	@click="addTeacherDialog = true"	475	@click="addTeacherDialog = true"
476	>	476	>
477	<v-icon class="white--text pr-1" size="20">add</v-icon>Add Teacher	477	<v-icon class="white--text pr-1" size="20">add</v-icon>Add Teacher
478	</v-btn>	478	</v-btn>
479	<v-spacer></v-spacer>	479	<v-spacer></v-spacer>
480	<v-card-title class="body-1" v-show="show">	480	<v-card-title class="body-1" v-show="show">
481	<v-btn icon large flat @click="displaySearch">	481	<v-btn icon large flat @click="displaySearch">
482	<v-avatar size="27">	482	<v-avatar size="27">
483	<img src="/static/icon/search.png" alt="icon" />	483	<img src="/static/icon/search.png" alt="icon" />
484	</v-avatar>	484	</v-avatar>
485	</v-btn>	485	</v-btn>
486	</v-card-title>	486	</v-card-title>
487	<v-flex md2 lg2 sm6 xs8 v-if="showSearch">	487	<v-flex md2 lg2 sm6 xs8 v-if="showSearch">
488	<v-layout>	488	<v-layout>
489	<v-text-field autofocus v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>	489	<v-text-field autofocus v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>
490	<v-icon @click="closeSearch" color="error">close</v-icon>	490	<v-icon @click="closeSearch" color="error">close</v-icon>
491	</v-layout>	491	</v-layout>
492	</v-flex>	492	</v-flex>
493	</v-toolbar>	493	</v-toolbar>
494	<v-data-table	494	<v-data-table
495	:headers="headers"	495	:headers="headers"
496	:items="desserts"	496	:items="desserts"
497	:pagination.sync="pagination"	497	:pagination.sync="pagination"
498	:search="search"	498	:search="search"
499	>	499	>
500	<template slot="items" slot-scope="props">	500	<template slot="items" slot-scope="props">
501	<tr class="tr">	501	<tr class="tr">
502	<td class="td td-row">{{ props.index + 1}}</td>	502	<td class="td td-row">{{ props.index + 1}}</td>
503	<td class="td td-row text-xs-center">	503	<td class="td td-row text-xs-center">
504	<v-avatar size="40">	504	<v-avatar size="40">
505	<img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />	505	<img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
506	<img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />	506	<img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
507	</v-avatar>	507	</v-avatar>
508	</td>	508	</td>
509	<td class="td td-row text-xs-center">{{ props.item.name}}</td>	509	<td class="td td-row text-xs-center">{{ props.item.name}}</td>
510	<td class="td td-row text-xs-center">{{ props.item.email }}</td>	510	<td class="td td-row text-xs-center">{{ props.item.email }}</td>
511	<td class="td td-row text-xs-center">{{ dates(props.item.dob) }}</td>	511	<td class="td td-row text-xs-center">{{ dates(props.item.dob) }}</td>
512	<td class="td td-row text-xs-center">{{ dates(props.item.joinDate)}}</td>	512	<td class="td td-row text-xs-center">{{ dates(props.item.joinDate)}}</td>
513	<td class="td td-row text-xs-center">{{ props.item.mobileNo }}</td>	513	<td class="td td-row text-xs-center">{{ props.item.mobileNo }}</td>
514	<td class="td td-row text-xs-center">	514	<td class="td td-row text-xs-center">
515	<v-switch	515	<v-switch
516	class="pl-3"	516	class="pl-3"
517	v-model="props.item.status"	517	v-model="props.item.status"
518	@change="suspendStatus(props.item.status,props.item._id)"	518	@change="suspendStatus(props.item.status,props.item._id)"
519	></v-switch>	519	></v-switch>
520	</td>	520	</td>
521	<td class="text-xs-center td td-row">	521	<td class="text-xs-center td td-row">
522	<span>	522	<span>
523	<v-tooltip top>	523	<v-tooltip top>
524	<img	524	<img
525	slot="activator"	525	slot="activator"
526	style="cursor:pointer; width:25px; height:25px; "	526	style="cursor:pointer; width:25px; height:25px; "
527	class="mr-3"	527	class="mr-3"
528	@click="profile(props.item)"	528	@click="profile(props.item)"
529	src="/static/icon/view.png"	529	src="/static/icon/view.png"
530	/>	530	/>
531	<span>View</span>	531	<span>View</span>
532	</v-tooltip>	532	</v-tooltip>
533	<v-tooltip top v-if="role != 'TEACHER' ">	533	<v-tooltip top v-if="role != 'TEACHER' ">
534	<img	534	<img
535	slot="activator"	535	slot="activator"
536	style="cursor:pointer; width:20px; height:18px; "	536	style="cursor:pointer; width:20px; height:18px; "
537	class="mr-3"	537	class="mr-3"
538	@click="editItem(props.item)"	538	@click="editItem(props.item)"
539	src="/static/icon/edit.png"	539	src="/static/icon/edit.png"
540	/>	540	/>
541	<span>Edit</span>	541	<span>Edit</span>
542	</v-tooltip>	542	</v-tooltip>
543	<!-- <v-tooltip top v-if="role != 'TEACHER' ">	543	<!-- <v-tooltip top v-if="role != 'TEACHER' ">
544	<img	544	<img
545	slot="activator"	545	slot="activator"
546	style="cursor:pointer; width:20px; height:20px; "	546	style="cursor:pointer; width:20px; height:20px; "
547	@click="deleteItem(props.item)"	547	@click="deleteItem(props.item)"
548	src="/static/icon/delete.png"	548	src="/static/icon/delete.png"
549	class="mr-3"	549	class="mr-3"
550	/>	550	/>
551	<span>Delete</span>	551	<span>Delete</span>
552	</v-tooltip> -->	552	</v-tooltip> -->
553	</span>	553	</span>
554	</td>	554	</td>
555	</tr>	555	</tr>
556	</template>	556	</template>
557	<v-alert	557	<v-alert
558	slot="no-results"	558	slot="no-results"
559	:value="true"	559	:value="true"
560	color="error"	560	color="error"
561	icon="warning"	561	icon="warning"
562	>Your search for "{{ search }}" found no results.</v-alert>	562	>Your search for "{{ search }}" found no results.</v-alert>
563	</v-data-table>	563	</v-data-table>
564		564
565	<!-- **** Add Teachers Data**** -->	565	<!-- **** DIALOG BOX - Add Teachers Data**** -->
566	<v-dialog v-model="addTeacherDialog" max-width="1160">	566	<v-dialog v-model="addTeacherDialog" max-width="1160">
567	<v-card flat class="card-style pa-2" dark>	567	<v-card flat class="card-style pa-2" dark>
568	<v-layout>	568	<v-layout>
569	<v-flex xs12 class="pa-0">	569	<v-flex xs12 class="pa-0">
570	<label class="title text-xs-center">Add Teacher</label>	570	<label class="title text-xs-center">Add Teacher</label>
571	<v-icon size="24" class="right" @click="addTeacherDialog = false">cancel</v-icon>	571	<v-icon size="24" class="right" @click="$refs.form.reset();addTeacherDialog = false">cancel</v-icon>
572	</v-flex>	572	</v-flex>
573	</v-layout>	573	</v-layout>
574	<v-form ref="form" v-model="valid" lazy-validation>	574	<v-form ref="form" v-model="valid" lazy-validation>
575	<v-container fluid>	575	<v-container fluid>
576	<v-layout>	576	<v-layout>
577	<v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4">	577	<v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4">
578	<v-avatar size="120px">	578	<v-avatar size="120px">
579	<img src="/static/icon/user.png" v-if="!imageUrl" />	579	<img src="/static/icon/user.png" v-if="!imageUrl" />
580	</v-avatar>	580	</v-avatar>
581	<img	581	<img
582	:src="imageUrl"	582	:src="imageUrl"
583	height="150"	583	height="150"
584	v-if="imageUrl"	584	v-if="imageUrl"
585	style="border-radius:50%; width:150px"	585	style="border-radius:50%; width:150px"
586	/>	586	/>
587	</v-flex>	587	</v-flex>
588	</v-layout>	588	</v-layout>
589	<v-layout wrap>	589	<v-layout wrap>
590	<v-flex xs12 sm6>	590	<v-flex xs12 sm6>
591	<v-layout>	591	<v-layout>
592	<v-flex xs4 class="pt-4 subheading">	592	<v-flex xs4 class="pt-4 subheading">
593	<label class="right hidden-sm-only hidden-xs-only">Full Name:</label>	593	<label class="right hidden-sm-only hidden-xs-only">Full Name:</label>
594	<label class="right hidden-lg-only hidden-xl-only hidden-md-only">Full Name</label>	594	<label class="right hidden-lg-only hidden-xl-only hidden-md-only">Full Name</label>
595	</v-flex>	595	</v-flex>
596	<v-flex xs8 class="ml-3">	596	<v-flex xs8 class="ml-3">
597	<v-text-field	597	<v-text-field
598	v-model="addTeachers.name"	598	v-model="addTeachers.name"
599	placeholder="fill your full Name"	599	placeholder="fill your full Name"
600	name="name"	600	name="name"
601	type="text"	601	type="text"
602	:rules="nameRules"	602	:rules="nameRules"
603	required	603	required
604	></v-text-field>	604	></v-text-field>
605	</v-flex>	605	</v-flex>
606	</v-layout>	606	</v-layout>
607	</v-flex>	607	</v-flex>
608	<v-flex xs12 sm6>	608	<v-flex xs12 sm6>
609	<v-layout>	609	<v-layout>
610	<v-flex xs4 class="pt-4 subheading">	610	<v-flex xs4 class="pt-4 subheading">
611	<label class="right">Email ID:</label>	611	<label class="right">Email ID:</label>
612	</v-flex>	612	</v-flex>
613	<v-flex xs8 class="ml-3">	613	<v-flex xs8 class="ml-3">
614	<v-text-field	614	<v-text-field
615	placeholder="fill your email"	615	placeholder="fill your email"
616	v-model="addTeachers.email"	616	v-model="addTeachers.email"
617	type="text"	617	type="text"
618	name="email"	618	name="email"
619	required	619	required
620	></v-text-field>	620	></v-text-field>
621	</v-flex>	621	</v-flex>
622	</v-layout>	622	</v-layout>
623	</v-flex>	623	</v-flex>
624	</v-layout>	624	</v-layout>
625	<v-layout wrap>	625	<v-layout wrap>
626	<v-flex xs12 sm6>	626	<v-flex xs12 sm6>
627	<v-layout>	627	<v-layout>
628	<v-flex xs4 sm4 class="pt-4 subheading">	628	<v-flex xs4 sm4 class="pt-4 subheading">
629	<label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>	629	<label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>
630	<label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label>	630	<label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label>
631	</v-flex>	631	</v-flex>
632	<v-flex xs8 class="ml-3">	632	<v-flex xs8 class="ml-3">
633	<v-menu	633	<v-menu
634	ref="menu"	634	ref="menu"
635	:close-on-content-click="false"	635	:close-on-content-click="false"
636	v-model="menu"	636	v-model="menu"
637	:nudge-right="40"	637	:nudge-right="40"
638	lazy	638	lazy
639	transition="scale-transition"	639	transition="scale-transition"
640	offset-y	640	offset-y
641	full-width	641	full-width
642	min-width="290px"	642	min-width="290px"
643	>	643	>
644	<v-text-field	644	<v-text-field
645	slot="activator"	645	slot="activator"
646	:rules="dateRules"	646	:rules="dateRules"
647	v-model="addTeachers.date"	647	v-model="addTeachers.date"
648	placeholder="Select date"	648	placeholder="Select date"
649	></v-text-field>	649	></v-text-field>
650	<v-date-picker	650	<v-date-picker
651	ref="picker"	651	ref="picker"
652	v-model="addTeachers.date"	652	v-model="addTeachers.date"
653	:max="new Date().toISOString().substr(0, 10)"	653	:max="new Date().toISOString().substr(0, 10)"
654	min="1950-01-01"	654	min="1950-01-01"
655	@input="menu = false"	655	@input="menu = false"
656	></v-date-picker>	656	></v-date-picker>
657	</v-menu>	657	</v-menu>
658	</v-flex>	658	</v-flex>
659	</v-layout>	659	</v-layout>
660	</v-flex>	660	</v-flex>
661	<v-flex xs12 sm6>	661	<v-flex xs12 sm6>
662	<v-layout>	662	<v-layout>
663	<v-flex xs4 class="pt-4 subheading">	663	<v-flex xs4 class="pt-4 subheading">
664	<label class="right">City:</label>	664	<label class="right">City:</label>
665	</v-flex>	665	</v-flex>
666	<v-flex xs8 class="ml-3">	666	<v-flex xs8 class="ml-3">
667	<v-text-field	667	<v-text-field
668	v-model="addTeachers.city"	668	v-model="addTeachers.city"
669	placeholder="fill your City Name"	669	placeholder="fill your City Name"
670	name="City"	670	name="City"
671	type="text"	671	type="text"
672	:rules="cityRules"	672	:rules="cityRules"
673	required	673	required
674	></v-text-field>	674	></v-text-field>
675	</v-flex>	675	</v-flex>
676	</v-layout>	676	</v-layout>
677	</v-flex>	677	</v-flex>
678	</v-layout>	678	</v-layout>
679	<v-layout wrap>	679	<v-layout wrap>
680	<v-flex xs12 sm6>	680	<v-flex xs12 sm6>
681	<v-layout>	681	<v-layout>
682	<v-flex xs4 class="pt-4 subheading">	682	<v-flex xs4 class="pt-4 subheading">
683	<label class="right">State:</label>	683	<label class="right">State:</label>
684	</v-flex>	684	</v-flex>
685	<v-flex xs8 class="ml-3">	685	<v-flex xs8 class="ml-3">
686	<v-text-field	686	<v-text-field
687	v-model="addTeachers.state"	687	v-model="addTeachers.state"
688	placeholder="fill your State Name"	688	placeholder="fill your State Name"
689	name="state"	689	name="state"
690	type="text"	690	type="text"
691	:rules="stateRules"	691	:rules="stateRules"
692	required	692	required
693	></v-text-field>	693	></v-text-field>
694	</v-flex>	694	</v-flex>
695	</v-layout>	695	</v-layout>
696	</v-flex>	696	</v-flex>
697	<v-flex xs12 sm6>	697	<v-flex xs12 sm6>
698	<v-layout>	698	<v-layout>
699	<v-flex xs4 class="pt-4 subheading">	699	<v-flex xs4 class="pt-4 subheading">
700	<label class="right">PinCode:</label>	700	<label class="right">PinCode:</label>
701	</v-flex>	701	</v-flex>
702	<v-flex xs8 class="ml-3">	702	<v-flex xs8 class="ml-3">
703	<v-text-field	703	<v-text-field
704	v-model="addTeachers.pincode"	704	v-model="addTeachers.pincode"
705	placeholder="fill your pincode"	705	placeholder="fill your pincode"
706	name="pincode"	706	name="pincode"
707	type="number"	707	type="number"
708	:rules="pincode"	708	:rules="pincode"
709	required	709	required
710	></v-text-field>	710	></v-text-field>
711	</v-flex>	711	</v-flex>
712	</v-layout>	712	</v-layout>
713	</v-flex>	713	</v-flex>
714	</v-layout>	714	</v-layout>
715	<v-layout wrap>	715	<v-layout wrap>
716	<v-flex xs12 sm6>	716	<v-flex xs12 sm6>
717	<v-layout>	717	<v-layout>
718	<v-flex xs4 class="pt-4 subheading">	718	<v-flex xs4 class="pt-4 subheading">
719	<label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>	719	<label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>
720	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label>	720	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label>
721	</v-flex>	721	</v-flex>
722	<v-flex xs8 class="ml-3">	722	<v-flex xs8 class="ml-3">
723	<v-text-field	723	<v-text-field
724	v-model="addTeachers.mobileNo"	724	v-model="addTeachers.mobileNo"
725	placeholder="fill your Mobile No."	725	placeholder="fill your Mobile No."
726	name="mobileNo"	726	name="mobileNo"
727	type="number"	727	type="number"
728	:rules="mobileNoRules"	728	:rules="mobileNoRules"
729	required	729	required
730	></v-text-field>	730	></v-text-field>
731	</v-flex>	731	</v-flex>
732	</v-layout>	732	</v-layout>
733	</v-flex>	733	</v-flex>
734	<v-flex xs12 sm6>	734	<v-flex xs12 sm6>
735	<v-layout>	735	<v-layout>
736	<v-flex xs4 class="pt-4 subheading">	736	<v-flex xs4 class="pt-4 subheading">
737	<label class="right hidden-xs-only hidden-sm-only">Select Country:</label>	737	<label class="right hidden-xs-only hidden-sm-only">Select Country:</label>
738	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label>	738	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label>
739	</v-flex>	739	</v-flex>
740	<v-flex xs8 class="ml-3">	740	<v-flex xs8 class="ml-3">
741	<v-autocomplete	741	<v-autocomplete
742	v-model="addTeachers.country"	742	v-model="addTeachers.country"
743	:rules="country"	743	:rules="country"
744	:items="countries"	744	:items="countries"
745	placeholder="Select Country Name"	745	placeholder="Select Country Name"
746	required	746	required
747	></v-autocomplete>	747	></v-autocomplete>
748	</v-flex>	748	</v-flex>
749	</v-layout>	749	</v-layout>
750	</v-flex>	750	</v-flex>
751	</v-layout>	751	</v-layout>
752	<v-layout wrap>	752	<v-layout wrap>
753	<v-flex xs12 sm6>	753	<v-flex xs12 sm6>
754	<v-layout>	754	<v-layout>
755	<v-flex xs4 class="pt-4 subheading">	755	<v-flex xs4 class="pt-4 subheading">
756	<label class="right">Join Date:</label>	756	<label class="right">Join Date:</label>
757	</v-flex>	757	</v-flex>
758	<v-flex xs8 class="ml-3">	758	<v-flex xs8 class="ml-3">
759	<v-menu	759	<v-menu
760	ref="menu1"	760	ref="menu1"
761	:close-on-content-click="false"	761	:close-on-content-click="false"
762	v-model="menu1"	762	v-model="menu1"
763	:nudge-right="40"	763	:nudge-right="40"
764	lazy	764	lazy
765	transition="scale-transition"	765	transition="scale-transition"
766	offset-y	766	offset-y
767	full-width	767	full-width
768	min-width="290px"	768	min-width="290px"
769	>	769	>
770	<v-text-field	770	<v-text-field
771	slot="activator"	771	slot="activator"
772	:rules="joinDateRules"	772	:rules="joinDateRules"
773	v-model="addTeachers.joinDate"	773	v-model="addTeachers.joinDate"
774	placeholder="Select date"	774	placeholder="Select date"
775	></v-text-field>	775	></v-text-field>
776	<v-date-picker	776	<v-date-picker
777	ref="picker"	777	ref="picker"
778	v-model="addTeachers.joinDate"	778	v-model="addTeachers.joinDate"
779	:max="new Date().toISOString().substr(0, 10)"	779	:max="new Date().toISOString().substr(0, 10)"
780	min="1950-01-01"	780	min="1950-01-01"
781	@input="menu1 = false"	781	@input="menu1 = false"
782	></v-date-picker>	782	></v-date-picker>
783	</v-menu>	783	</v-menu>
784	</v-flex>	784	</v-flex>
785	</v-layout>	785	</v-layout>
786	</v-flex>	786	</v-flex>
787	<v-flex xs12 sm6>	787	<v-flex xs12 sm6>
788	<v-layout>	788	<v-layout>
789	<v-flex xs4 class="pt-4 subheading">	789	<v-flex xs4 class="pt-4 subheading">
790	<label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>	790	<label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
791	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label>	791	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label>
792	</v-flex>	792	</v-flex>
793	<v-flex xs8 class="ml-3">	793	<v-flex xs8 class="ml-3">
794	<v-text-field	794	<v-text-field
795	label="Select Image"	795	label="Select Image"
796	@click="pickFile"	796	@click="pickFile"
797	v-model="imageName"	797	v-model="imageName"
798	append-icon="attach_file"	798	append-icon="attach_file"
799	></v-text-field>	799	></v-text-field>
800	<input	800	<input
801	type="file"	801	type="file"
802	style="display:none"	802	style="display:none"
803	ref="image"	803	ref="image"
804	accept="image/*"	804	accept="image/*"
805	@change="onFilePicked"	805	@change="onFilePicked"
806	/>	806	/>
807	</v-flex>	807	</v-flex>
808	</v-layout>	808	</v-layout>
809	</v-flex>	809	</v-flex>
810	</v-layout>	810	</v-layout>
811	<v-layout class="hidden-xs-only hidden-sm-only">	811	<v-layout class="hidden-xs-only hidden-sm-only">
812	<v-flex xs12 sm6>	812	<v-flex xs12 sm6>
813	<v-layout>	813	<v-layout>
814	<v-flex xs4 md4 class="pt-4 subheading">	814	<v-flex xs4 md4 class="pt-4 subheading">
815	<label class="right">Present Address:</label>	815	<label class="right">Present Address:</label>
816	</v-flex>	816	</v-flex>
817	<v-flex xs8 md8 class="ml-3">	817	<v-flex xs8 md8 class="ml-3">
818	<v-text-field	818	<v-text-field
819	name="input-4-3"	819	name="input-4-3"
820	v-model="addTeachers.presentAddress"	820	v-model="addTeachers.presentAddress"
821	:rules="presentAddress"	821	:rules="presentAddress"
822	placeholder="fill Your present Address"	822	placeholder="fill Your present Address"
823	@keyup="copyData"	823	@keyup="copyData"
824	></v-text-field>	824	></v-text-field>
825	</v-flex>	825	</v-flex>
826	</v-layout>	826	</v-layout>
827	</v-flex>	827	</v-flex>
828	<v-flex xs12 sm6>	828	<v-flex xs12 sm6>
829	<v-layout>	829	<v-layout>
830	<v-flex xs4 md4 class="pt-4 subheading addressForm">	830	<v-flex xs4 md4 class="pt-4 subheading addressForm">
831	<label class="right">Permanent Address:</label>	831	<label class="right">Permanent Address:</label>
832	</v-flex>	832	</v-flex>
833	<v-flex xs12 md8 class="ml-3">	833	<v-flex xs12 md8 class="ml-3">
834	<v-switch	834	<v-switch
835	v-model="addTeachers.permanentAddress"	835	v-model="addTeachers.permanentAddress"
836	label="Select Permanent Address"	836	label="Select Permanent Address"
837	:value="addTeachers.presentAddress"	837	:value="addTeachers.presentAddress"
838	></v-switch>	838	></v-switch>
839	</v-flex>	839	</v-flex>
840	</v-layout>	840	</v-layout>
841	</v-flex>	841	</v-flex>
842	</v-layout>	842	</v-layout>
843	<v-layout class="hidden-xs-only hidden-sm-only">	843	<v-layout class="hidden-xs-only hidden-sm-only">
844	<v-flex xs12 sm6>	844	<v-flex xs12 sm6>
845	<v-layout>	845	<v-layout>
846	<v-flex xs4 md4 class="pt-4 subheading addressForm">	846	<v-flex xs4 md4 class="pt-4 subheading addressForm">
847	<label class="right">Permanent Address:</label>	847	<label class="right">Permanent Address:</label>
848	</v-flex>	848	</v-flex>
849	<v-flex xs12 md8 class="ml-3">	849	<v-flex xs12 md8 class="ml-3">
850	<v-text-field	850	<v-text-field
851	name="input-4-3"	851	name="input-4-3"
852	v-model="addTeachers.permanentAddress"	852	v-model="addTeachers.permanentAddress"
853	:rules="permanentAddress"	853	:rules="permanentAddress"
854	placeholder="fill Your Permanent Address"	854	placeholder="fill Your Permanent Address"
855	required	855	required
856	></v-text-field>	856	></v-text-field>
857	</v-flex>	857	</v-flex>
858	</v-layout>	858	</v-layout>
859	</v-flex>	859	</v-flex>
860	</v-layout>	860	</v-layout>
861	<v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap>	861	<v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap>
862	<v-flex xs12 sm12>	862	<v-flex xs12 sm12>
863	<v-layout>	863	<v-layout>
864	<v-flex xs12 sm12 class="pt-4 subheading text-xs-center">	864	<v-flex xs12 sm12 class="pt-4 subheading text-xs-center">
865	<label class>Present Addres:</label>	865	<label class>Present Addres:</label>
866	</v-flex>	866	</v-flex>
867	</v-layout>	867	</v-layout>
868	<v-layout>	868	<v-layout>
869	<v-flex xs12 sm12>	869	<v-flex xs12 sm12>
870	<v-textarea	870	<v-textarea
871	name="input-4-3"	871	name="input-4-3"
872	v-model="addTeachers.presentAddress"	872	v-model="addTeachers.presentAddress"
873	:rules="presentAddress"	873	:rules="presentAddress"
874	placeholder="fill Your present Address"	874	placeholder="fill Your present Address"
875	required	875	required
876	></v-textarea>	876	></v-textarea>
877	</v-flex>	877	</v-flex>
878	</v-layout>	878	</v-layout>
879	</v-flex>	879	</v-flex>
880	<v-flex xs12 sm12>	880	<v-flex xs12 sm12>
881	<v-layout>	881	<v-layout>
882	<v-flex xs12 sm12 class="pt-4 pr-4 subheading text-xs-center addressForm">	882	<v-flex xs12 sm12 class="pt-4 pr-4 subheading text-xs-center addressForm">
883	<label>Permanent Address:</label>	883	<label>Permanent Address:</label>
884	</v-flex>	884	</v-flex>
885	</v-layout>	885	</v-layout>
886	<v-layout>	886	<v-layout>
887	<v-flex xs12 sm12>	887	<v-flex xs12 sm12>
888	<v-textarea	888	<v-textarea
889	name="input-4-3"	889	name="input-4-3"
890	v-model="addTeachers.permanentAddress"	890	v-model="addTeachers.permanentAddress"
891	:rules="permanentAddress"	891	:rules="permanentAddress"
892	placeholder="fill Your Permanent Address"	892	placeholder="fill Your Permanent Address"
893	required	893	required
894	></v-textarea>	894	></v-textarea>
895	</v-flex>	895	</v-flex>
896	</v-layout>	896	</v-layout>
897	</v-flex>	897	</v-flex>
898	</v-layout>	898	</v-layout>
899	<v-layout>	899	<v-layout>
900	<v-flex xs12 sm12>	900	<v-flex xs12 sm12>
901	<v-layout class="right">	901	<v-layout class="right">
902	<v-btn @click="clear" round dark class="clear-button">Clear</v-btn>	902	<v-btn @click="clear" round dark class="clear-button">Clear</v-btn>
903	<v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>	903	<v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
904	</v-layout>	904	</v-layout>
905	</v-flex>	905	</v-flex>
906	</v-layout>	906	</v-layout>
907	</v-container>	907	</v-container>
908	</v-form>	908	</v-form>
909	</v-card>	909	</v-card>
910	</v-dialog>	910	</v-dialog>
911	<div class="loader" v-if="showLoader">	911	<div class="loader" v-if="showLoader">
912	<v-progress-circular indeterminate color="white"></v-progress-circular>	912	<v-progress-circular indeterminate color="white"></v-progress-circular>
913	</div>	913	</div>
914	</v-container>	914	</v-container>
915	</template>	915	</template>
916		916
917	<script>	917	<script>
918	import http from "@/Services/http.js";	918	import http from "@/Services/http.js";
919	import moment from "moment";	919	import moment from "moment";
920	import countryList from "@/script/country.js";	920	import countryList from "@/script/country.js";
921		921
922	export default {	922	export default {
923	data: () => ({	923	data: () => ({
924	component: "report-generate",	924	component: "report-generate",
925	snackbar: false,	925	snackbar: false,
926	y: "top",	926	y: "top",
927	x: "right",	927	x: "right",
928	role: "",	928	role: "",
929	mode: "",	929	mode: "",
930	timeout: 3000,	930	timeout: 3000,
931	text: "",	931	text: "",
932	color: "",	932	color: "",
933	showLoader: false,	933	showLoader: false,
934	loading: false,	934	loading: false,
935	date: null,	935	date: null,
936	search: "",	936	search: "",
937	show: true,	937	show: true,
938	showSearch: false,	938	showSearch: false,
939	menu: false,	939	menu: false,
940	menu1: false,	940	menu1: false,
941	menu2: false,	941	menu2: false,
942	menu3: false,	942	menu3: false,
943	editTeacherDialog: false,	943	editTeacherDialog: false,
944	viewTeacherProfileDialog: false,	944	viewTeacherProfileDialog: false,
945	addTeacherDialog: false,	945	addTeacherDialog: false,
946	valid: true,	946	valid: true,
947	pagination: {	947	pagination: {
948	rowsPerPage: 10	948	rowsPerPage: 10
949	},	949	},
950	imageData: {},	950	imageData: {},
951	imageName: "",	951	imageName: "",
952	imageUrl: "",	952	imageUrl: "",
953	imageFile: "",	953	imageFile: "",
954	nameRules: [v => !!v \|\| " Full Name is required"],	954	nameRules: [v => !!v \|\| " Full Name is required"],
955	dateRules: [v => !!v \|\| " DOB is required"],	955	dateRules: [v => !!v \|\| " DOB is required"],
956	cityRules: [v => !!v \|\| " City Name is required"],	956	cityRules: [v => !!v \|\| " City Name is required"],
957	pincode: [v => !!v \|\| " Pincode is required"],	957	pincode: [v => !!v \|\| " Pincode is required"],
958	country: [v => !!v \|\| " Country Name is required"],	958	country: [v => !!v \|\| " Country Name is required"],
959	permanentAddress: [v => !!v \|\| " Permanent Address is required"],	959	permanentAddress: [v => !!v \|\| " Permanent Address is required"],
960	presentAddress: [v => !!v \|\| " Present Address is required"],	960	presentAddress: [v => !!v \|\| " Present Address is required"],
961	mobileNoRules: [v => !!v \|\| "Mobile Number is required"],	961	mobileNoRules: [v => !!v \|\| "Mobile Number is required"],
962	stateRules: [v => !!v \|\| "State Name is required"],	962	stateRules: [v => !!v \|\| "State Name is required"],
963	joinDateRules: [v => !!v \|\| " Join Date is required"],	963	joinDateRules: [v => !!v \|\| " Join Date is required"],
964	errorMessages: "",	964	errorMessages: "",
965	switch1: true,	965	switch1: true,
966	countries: [],	966	countries: [],
967	headers: [	967	headers: [
968	{	968	{
969	text: "No",	969	text: "No",
970	align: "",	970	align: "",
971	sortable: false,	971	sortable: false,
972	value: "No"	972	value: "No"
973	},	973	},
974	{	974	{
975	text: "Profile Pic",	975	text: "Profile Pic",
976	value: "profilePicUrl",	976	value: "profilePicUrl",
977	sortable: false,	977	sortable: false,
978	align: "center"	978	align: "center"
979	},	979	},
980	{ text: "Name", value: "name", sortable: false, align: "center" },	980	{ text: "Name", value: "name", sortable: false, align: "center" },
981	{ text: "Email", value: "email", sortable: false, align: "center" },	981	{ text: "Email", value: "email", sortable: false, align: "center" },
982	{ text: "DOB", value: "dob", sortable: false, align: "center" },	982	{ text: "DOB", value: "dob", sortable: false, align: "center" },
983	{	983	{
984	text: "Join Date",	984	text: "Join Date",
985	value: "joinDate",	985	value: "joinDate",
986	sortable: false,	986	sortable: false,
987	align: "center"	987	align: "center"
988	},	988	},
989	{	989	{
990	text: "Mobile No",	990	text: "Mobile No",
991	value: "mobileNo",	991	value: "mobileNo",
992	sortable: false,	992	sortable: false,
993	align: "center"	993	align: "center"
994	},	994	},
995	{	995	{
996	text: "Status",	996	text: "Status",
997	value: "status",	997	value: "status",
998	sortable: false,	998	sortable: false,
999	align: "center"	999	align: "center"
1000	},	1000	},
1001	{ text: "Action", value: "", sortable: false, align: "center" }	1001	{ text: "Action", value: "", sortable: false, align: "center" }
1002	],	1002	],
1003	desserts: [],	1003	desserts: [],
1004	editedIndex: -1,	1004	editedIndex: -1,
1005	upload: "",	1005	upload: "",
1006	editedItem: {	1006	editedItem: {
1007	role: "TEACHER",	1007	role: "TEACHER",
1008	name: "",	1008	name: "",
1009	email: "",	1009	email: "",
1010	date: null,	1010	date: null,
1011	city: "",	1011	city: "",
1012	pincode: "",	1012	pincode: "",
1013	country: "",	1013	country: "",
1014	permanentAddress: "",	1014	permanentAddress: "",
1015	presentAddress: "",	1015	presentAddress: "",
1016	mobileNo: "",	1016	mobileNo: "",
1017	state: "",	1017	state: "",
1018	joinDate: null	1018	joinDate: null
1019	},	1019	},
1020	addTeachers: {	1020	addTeachers: {
1021	role: "TEACHER",	1021	role: "TEACHER",
1022	name: "",	1022	name: "",
1023	email: "",	1023	email: "",
1024	date: null,	1024	date: null,
1025	city: "",	1025	city: "",
1026	pincode: "",	1026	pincode: "",
1027	country: "",	1027	country: "",
1028	permanentAddress: "",	1028	permanentAddress: "",
1029	presentAddress: "",	1029	presentAddress: "",
1030	mobileNo: "",	1030	mobileNo: "",
1031	state: "",	1031	state: "",
1032	joinDate: null	1032	joinDate: null
1033	},	1033	},
1034	status: ""	1034	status: ""
1035	}),	1035	}),
1036	watch: {	1036	watch: {
1037	menu(val) {	1037	menu(val) {
1038	val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));	1038	val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
1039	},	1039	},
1040	menu1(val) {	1040	menu1(val) {
1041	val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));	1041	val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
1042	}	1042	}
1043	},	1043	},
1044	methods: {	1044	methods: {
1045	save(date) {	1045	save(date) {
1046	this.$refs.menu.save(date);	1046	this.$refs.menu.save(date);
1047	},	1047	},
1048	save(date) {	1048	save(date) {
1049	this.$refs.menu1.save(date);	1049	this.$refs.menu1.save(date);
1050	},	1050	},
1051	pickFile() {	1051	pickFile() {
1052	this.$refs.image.click();	1052	this.$refs.image.click();
1053	},	1053	},
1054	onFilePicked(e) {	1054	onFilePicked(e) {
1055	const files = e.target.files;	1055	const files = e.target.files;
1056	this.upload = e.target.files[0];	1056	this.upload = e.target.files[0];
1057	if (files[0] !== undefined) {	1057	if (files[0] !== undefined) {
1058	this.imageName = files[0].name;	1058	this.imageName = files[0].name;
1059	if (this.imageName.lastIndexOf(".") <= 0) {	1059	if (this.imageName.lastIndexOf(".") <= 0) {
1060	return;	1060	return;
1061	}	1061	}
1062	const fr = new FileReader();	1062	const fr = new FileReader();
1063	fr.readAsDataURL(files[0]);	1063	fr.readAsDataURL(files[0]);
1064	fr.addEventListener("load", () => {	1064	fr.addEventListener("load", () => {
1065	this.imageUrl = fr.result;	1065	this.imageUrl = fr.result;
1066	this.imageFile = files[0]; // this is an image file that can be sent to server...	1066	this.imageFile = files[0]; // this is an image file that can be sent to server...
1067	});	1067	});
1068	} else {	1068	} else {
1069	this.imageName = "";	1069	this.imageName = "";
1070	this.imageFile = "";	1070	this.imageFile = "";
1071	this.imageUrl = "";	1071	this.imageUrl = "";
1072	}	1072	}
1073	},	1073	},
1074	dates: function(date) {	1074	dates: function(date) {
1075	return moment(date).format("MMMM DD, YYYY");	1075	return moment(date).format("MMMM DD, YYYY");
1076	},	1076	},
1077	getTeacherList() {	1077	getTeacherList() {
1078	this.showLoader = true;	1078	this.showLoader = true;
1079	var token = this.$store.state.token;	1079	var token = this.$store.state.token;
1080	http()	1080	http()
1081	.get("/getTeachersList", {	1081	.get("/getTeachersList", {
1082	headers: { Authorization: "Bearer " + token }	1082	headers: { Authorization: "Bearer " + token }
1083	})	1083	})
1084	.then(response => {	1084	.then(response => {
1085	this.desserts = response.data.data;	1085	this.desserts = response.data.data;
1086	this.showLoader = false;	1086	this.showLoader = false;
1087	// console.log("getTeacherList=====>",this.desserts)	1087	// console.log("getTeacherList=====>",this.desserts)
1088	})	1088	})
1089	.catch(error => {	1089	.catch(error => {
1090	this.showLoader = false;	1090	this.showLoader = false;
1091	if (error.response.status === 401) {	1091	if (error.response.status === 401) {
1092	this.$router.replace({ path: "/" });	1092	this.$router.replace({ path: "/" });
1093	this.$store.dispatch("setToken", null);	1093	this.$store.dispatch("setToken", null);
1094	this.$store.dispatch("Id", null);	1094	this.$store.dispatch("Id", null);
1095	}	1095	}
1096	});	1096	});
1097	},	1097	},
1098	editItem(item) {	1098	editItem(item) {
1099	this.editedIndex = this.desserts.indexOf(item);	1099	this.editedIndex = this.desserts.indexOf(item);
1100	this.editedItem = Object.assign({}, item);	1100	this.editedItem = Object.assign({}, item);
1101	this.editedItem.dob =	1101	this.editedItem.dob =
1102	this.editedItem.dob != undefined	1102	this.editedItem.dob != undefined
1103	? (this.editedItem.dob = this.editedItem.dob.substring(0, 10))	1103	? (this.editedItem.dob = this.editedItem.dob.substring(0, 10))
1104	: (this.editedItem.dob = "");	1104	: (this.editedItem.dob = "");
1105	this.editedItem.joinDate =	1105	this.editedItem.joinDate =
1106	this.editedItem.joinDate != undefined	1106	this.editedItem.joinDate != undefined
1107	? (this.editedItem.joinDate = this.editedItem.joinDate.substring(	1107	? (this.editedItem.joinDate = this.editedItem.joinDate.substring(
1108	0,	1108	0,
1109	10	1109	10
1110	))	1110	))
1111	: (this.editedItem.joinDate = "");	1111	: (this.editedItem.joinDate = "");
1112		1112
1113	this.editTeacherDialog = true;	1113	this.editTeacherDialog = true;
1114	},	1114	},
1115	profile(item) {	1115	profile(item) {
1116	this.editedIndex = this.desserts.indexOf(item);	1116	this.editedIndex = this.desserts.indexOf(item);
1117	this.editedItem = Object.assign({}, item);	1117	this.editedItem = Object.assign({}, item);
1118	this.viewTeacherProfileDialog = true;	1118	this.viewTeacherProfileDialog = true;
1119	},	1119	},
1120	deleteItem(item) {	1120	deleteItem(item) {
1121	let deleteTeachers = {	1121	let deleteTeachers = {
1122	teacherId: item._id	1122	teacherId: item._id
1123	};	1123	};
1124	http()	1124	http()
1125	.delete(	1125	.delete(
1126	"/deleteTeacher",	1126	"/deleteTeacher",
1127	confirm("Are you sure you want to delete this?") && {	1127	confirm("Are you sure you want to delete this?") && {
1128	params: deleteTeachers	1128	params: deleteTeachers
1129	}	1129	}
1130	)	1130	)
1131	.then(response => {	1131	.then(response => {
1132	this.snackbar = true;	1132	this.snackbar = true;
1133	this.text = "Successfully delete Existing Teacher";	1133	this.text = "Successfully delete Existing Teacher";
1134	this.color = "green";	1134	this.color = "green";
1135	this.getTeacherList();	1135	this.getTeacherList();
1136	})	1136	})
1137	.catch(error => {	1137	.catch(error => {
1138	this.snackbar = true;	1138	this.snackbar = true;
1139	this.text = error.response.data.message;	1139	this.text = error.response.data.message;
1140	this.color = "error";	1140	this.color = "error";
1141	});	1141	});
1142	},	1142	},
1143	closeEditTeacherDialog() {	1143	closeEditTeacherDialog() {
1144	this.editTeacherDialog = false;	1144	this.editTeacherDialog = false;
1145	},	1145	},
1146	close1() {	1146	close1() {
1147	this.viewTeacherProfileDialog = false;	1147	this.viewTeacherProfileDialog = false;
1148	},	1148	},
1149	copyData() {	1149	copyData() {
1150	this.addTeachers.permanentAddress = this.addTeachers.presentAddress;	1150	this.addTeachers.permanentAddress = this.addTeachers.presentAddress;
1151	},	1151	},
1152	submit() {	1152	submit() {
1153	if (this.$refs.form.validate()) {	1153	if (this.$refs.form.validate()) {
1154	let addTeacher = {	1154	let addTeacher = {
1155	name: this.addTeachers.name,	1155	name: this.addTeachers.name,
1156	email: this.addTeachers.email,	1156	email: this.addTeachers.email,
1157	role: this.addTeachers.role,	1157	role: this.addTeachers.role,
1158	dob: this.addTeachers.date,	1158	dob: this.addTeachers.date,
1159	city: this.addTeachers.city,	1159	city: this.addTeachers.city,
1160	pincode: this.addTeachers.pincode,	1160	pincode: this.addTeachers.pincode,
1161	country: this.addTeachers.country,	1161	country: this.addTeachers.country,
1162	permanentAddress: this.addTeachers.permanentAddress,	1162	permanentAddress: this.addTeachers.permanentAddress,
1163	presentAddress: this.addTeachers.presentAddress,	1163	presentAddress: this.addTeachers.presentAddress,
1164	mobileNo: this.addTeachers.mobileNo,	1164	mobileNo: this.addTeachers.mobileNo,
1165	state: this.addTeachers.state,	1165	state: this.addTeachers.state,
1166	joinDate: this.addTeachers.joinDate	1166	joinDate: this.addTeachers.joinDate
1167	};	1167	};
1168	if (this.imageUrl) {	1168	if (this.imageUrl) {
1169	var str = this.imageUrl;	1169	var str = this.imageUrl;
1170	const [baseUrl, imageUrl] = str.split(/,/);	1170	const [baseUrl, imageUrl] = str.split(/,/);
1171	addTeacher.upload = imageUrl;	1171	addTeacher.upload = imageUrl;
1172	}	1172	}
1173	this.loading = true;	1173	this.loading = true;
1174	http()	1174	http()
1175	.post("/createTeacher", addTeacher)	1175	.post("/createTeacher", addTeacher)
1176	.then(response => {	1176	.then(response => {
1177	this.imageUrl = "";	1177	this.imageUrl = "";
1178	this.getTeacherList();	1178	this.getTeacherList();
1179	this.snackbar = true;	1179	this.snackbar = true;
1180	this.text = "New Teacher added successfully";	1180	this.text = "New Teacher added successfully";
1181	this.color = "green";	1181	this.color = "green";
1182	this.clear();	1182	this.clear();
1183	this.loading = false;	1183	this.loading = false;
1184	this.addTeacherDialog = false;	1184	this.addTeacherDialog = false;
1185	})	1185	})
1186	.catch(error => {	1186	.catch(error => {
1187	this.snackbar = true;	1187	this.snackbar = true;
1188	this.text = error.response.data.message;	1188	this.text = error.response.data.message;
1189	this.color = "error";	1189	this.color = "error";
1190	this.loading = false;	1190	this.loading = false;
1191	});	1191	});
1192	}	1192	}
1193	},	1193	},
1194	clear() {	1194	clear() {
1195	this.$refs.form.reset();	1195	this.$refs.form.reset();
1196	this.imageUrl = "";	1196	this.imageUrl = "";
1197	},	1197	},
1198	save() {	1198	save() {
1199	this.loading = true;	1199	this.loading = true;
1200	let editTeacher = {	1200	let editTeacher = {
1201	teacherId: this.editedItem._id,	1201	teacherId: this.editedItem._id,
1202	name: this.editedItem.name,	1202	name: this.editedItem.name,
1203	email: this.editedItem.email,	1203	email: this.editedItem.email,
1204	role: this.editedItem.role,	1204	role: this.editedItem.role,
1205	dob: this.editedItem.dob,	1205	dob: this.editedItem.dob,
1206	city: this.editedItem.city,	1206	city: this.editedItem.city,
1207	pincode: this.editedItem.pincode,	1207	pincode: this.editedItem.pincode,
1208	country: this.editedItem.country,	1208	country: this.editedItem.country,
1209	permanentAddress: this.editedItem.permanentAddress,	1209	permanentAddress: this.editedItem.permanentAddress,
1210	presentAddress: this.editedItem.presentAddress,	1210	presentAddress: this.editedItem.presentAddress,
1211	mobileNo: this.editedItem.mobileNo,	1211	mobileNo: this.editedItem.mobileNo,
1212	state: this.editedItem.state,	1212	state: this.editedItem.state,
1213	joinDate: this.editedItem.joinDate	1213	joinDate: this.editedItem.joinDate
1214	};	1214	};
1215	if (this.imageUrl) {	1215	if (this.imageUrl) {
1216	var str = this.imageUrl;	1216	var str = this.imageUrl;
1217	const [baseUrl, imageUrl] = str.split(/,/);	1217	const [baseUrl, imageUrl] = str.split(/,/);
1218	editTeacher.upload = imageUrl;	1218	editTeacher.upload = imageUrl;
1219	}	1219	}
1220	http()	1220	http()
1221	.put("/updateTeacher", editTeacher)	1221	.put("/updateTeacher", editTeacher)
1222	.then(response => {	1222	.then(response => {
1223	this.snackbar = true;	1223	this.snackbar = true;
1224	this.text = "Successfully Edit Existing Teacher";	1224	this.text = "Successfully Edit Existing Teacher";
1225	this.color = "green";	1225	this.color = "green";
1226	this.loading = false;	1226	this.loading = false;
1227	this.getTeacherList();	1227	this.getTeacherList();
1228	this.closeEditTeacherDialog();	1228	this.closeEditTeacherDialog();
1229	})	1229	})
1230	.catch(error => {	1230	.catch(error => {
1231	this.snackbar = true;	1231	this.snackbar = true;
1232	this.text = error.response.data.message;	1232	this.text = error.response.data.message;
1233	this.color = "error";	1233	this.color = "error";
1234	this.loading = false;	1234	this.loading = false;
1235	});	1235	});
1236	},	1236	},
1237	suspendStatus(suspendStatus, id) {	1237	suspendStatus(suspendStatus, id) {
1238	let suspendStatusData = {	1238	let suspendStatusData = {
1239	teacherId: id,	1239	teacherId: id,
1240	status: suspendStatus	1240	status: suspendStatus
1241	};	1241	};
1242	this.showLoader = true;	1242	this.showLoader = true;
1243	http()	1243	http()
1244	.put("/suspendAccount", suspendStatusData)	1244	.put("/suspendAccount", suspendStatusData)
1245	.then(response => {	1245	.then(response => {
1246	this.getTeacherList();	1246	this.getTeacherList();
1247	this.text = response.data.message;	1247	this.text = response.data.message;
1248	this.color = "green";	1248	this.color = "green";
1249	this.snackbar = true;	1249	this.snackbar = true;
1250	this.showLoader = false;	1250	this.showLoader = false;
1251	})	1251	})
1252	.catch(error => {	1252	.catch(error => {
1253	this.snackbar = true;	1253	this.snackbar = true;
1254	this.color = "error";	1254	this.color = "error";
1255	this.text = error.response.data.message;	1255	this.text = error.response.data.message;
1256	this.showLoader = false;	1256	this.showLoader = false;
1257	});	1257	});
1258	},	1258	},
1259	displaySearch() {	1259	displaySearch() {
1260	(this.show = false), (this.showSearch = true);	1260	(this.show = false), (this.showSearch = true);
1261	},	1261	},
1262	closeSearch() {	1262	closeSearch() {
1263	this.showSearch = false;	1263	this.showSearch = false;
1264	this.show = true;	1264	this.show = true;
1265	this.search = "";	1265	this.search = "";
1266	}	1266	}
1267	},	1267	},
1268	mounted() {	1268	mounted() {
1269	const getCountryList = countryList();	1269	const getCountryList = countryList();
1270	this.countries = getCountryList;	1270	this.countries = getCountryList;
1271	this.getTeacherList();	1271	this.getTeacherList();
1272	this.role = this.$store.state.role;	1272	this.role = this.$store.state.role;
1273	}	1273	}
1274	};	1274	};
1275	</script>	1275	</script>
1276	<style scoped>	1276	<style scoped>
1277	.active {	1277	.active {
1278	background-color: gray;	1278	background-color: gray;
1279	color: white !important;	1279	color: white !important;
1280	}	1280	}
1281	.activebtn {	1281	.activebtn {
1282	color: black !important;	1282	color: black !important;
1283	}	1283	}
1284	</style>	1284	</style>

src/pages/User/user.vue

Diff comments View file @7efe027

1	<template>	1	<template>
2	<v-container fluid class="body-color">	2	<v-container fluid class="body-color">
3	<!-- **** EDIT USERS DETAILS **** -->	3	<!-- **** EDIT USERS DETAILS **** -->
4	<v-dialog v-model="editUserDialog" max-width="1100px" scrollable>	4	<v-dialog v-model="editUserDialog" max-width="1100px" scrollable>
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 User</label>	8	<label class="title text-xs-center">Edit User</label>
9	<v-icon size="24" class="right" @click="editUserDialog = false">cancel</v-icon>	9	<v-icon size="24" class="right" @click="editUserDialog = 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>	13	<v-layout>
14	<v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4">	14	<v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4">
15	<v-avatar size="120px">	15	<v-avatar size="120px">
16	<img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl && !imageUrl" />	16	<img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl && !imageUrl" />
17	<img	17	<img
18	:src="editedItem.profilePicUrl"	18	:src="editedItem.profilePicUrl"
19	v-else-if="editedItem.profilePicUrl && !imageUrl"	19	v-else-if="editedItem.profilePicUrl && !imageUrl"
20	/>	20	/>
21	<img	21	<img
22	v-if="imageUrl"	22	v-if="imageUrl"
23	:src="imageUrl"	23	:src="imageUrl"
24	height="150"	24	height="150"
25	style="border-radius:50%; width:150px"	25	style="border-radius:50%; width:150px"
26	/>	26	/>
27	</v-avatar>	27	</v-avatar>
28	<input	28	<input
29	type="file"	29	type="file"
30	style="display:none"	30	style="display:none"
31	ref="image"	31	ref="image"
32	accept="image/*"	32	accept="image/*"
33	@change="onFilePicked"	33	@change="onFilePicked"
34	/>	34	/>
35	</v-flex>	35	</v-flex>
36	</v-layout>	36	</v-layout>
37	<v-layout wrap>	37	<v-layout wrap>
38	<v-flex xs12 sm6>	38	<v-flex xs12 sm6>
39	<v-layout>	39	<v-layout>
40	<v-flex xs4 class="pt-4 subheading">	40	<v-flex xs4 class="pt-4 subheading">
41	<label class="right">Name:</label>	41	<label class="right">Name:</label>
42	</v-flex>	42	</v-flex>
43	<v-flex xs8 class="ml-3">	43	<v-flex xs8 class="ml-3">
44	<v-text-field	44	<v-text-field
45	v-model="editedItem.name"	45	v-model="editedItem.name"
46	placeholder="fill your Name"	46	placeholder="fill your Name"
47	name="name"	47	name="name"
48	type="text"	48	type="text"
49	required	49	required
50	></v-text-field>	50	></v-text-field>
51	</v-flex>	51	</v-flex>
52	</v-layout>	52	</v-layout>
53	</v-flex>	53	</v-flex>
54	<v-flex xs12 sm6>	54	<v-flex xs12 sm6>
55	<v-layout>	55	<v-layout>
56	<v-flex xs4 class="pt-4 subheading">	56	<v-flex xs4 class="pt-4 subheading">
57	<label class="right">Email ID:</label>	57	<label class="right">Email ID:</label>
58	</v-flex>	58	</v-flex>
59	<v-flex xs8 class="ml-3">	59	<v-flex xs8 class="ml-3">
60	<v-text-field	60	<v-text-field
61	placeholder="fill your email"	61	placeholder="fill your email"
62	v-model="editedItem.email"	62	v-model="editedItem.email"
63	type="text"	63	type="text"
64	name="email"	64	name="email"
65	required	65	required
66	></v-text-field>	66	></v-text-field>
67	</v-flex>	67	</v-flex>
68	</v-layout>	68	</v-layout>
69	</v-flex>	69	</v-flex>
70	</v-layout>	70	</v-layout>
71	<v-layout wrap>	71	<v-layout wrap>
72	<v-flex xs12 sm6>	72	<v-flex xs12 sm6>
73	<v-layout>	73	<v-layout>
74	<v-flex xs4 class="pt-4 subheading">	74	<v-flex xs4 class="pt-4 subheading">
75	<label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>	75	<label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>
76	<label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label>	76	<label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label>
77	</v-flex>	77	</v-flex>
78	<v-flex xs8 class="ml-3">	78	<v-flex xs8 class="ml-3">
79	<v-menu	79	<v-menu
80	ref="menu"	80	ref="menu"
81	:close-on-content-click="false"	81	:close-on-content-click="false"
82	v-model="menu2"	82	v-model="menu2"
83	:nudge-right="40"	83	:nudge-right="40"
84	lazy	84	lazy
85	transition="scale-transition"	85	transition="scale-transition"
86	offset-y	86	offset-y
87	full-width	87	full-width
88	min-width="290px"	88	min-width="290px"
89	>	89	>
90	<v-text-field	90	<v-text-field
91	slot="activator"	91	slot="activator"
92	v-model="editedItem.dob"	92	v-model="editedItem.dob"
93	placeholder="Select date"	93	placeholder="Select date"
94	></v-text-field>	94	></v-text-field>
95	<v-date-picker	95	<v-date-picker
96	ref="picker"	96	ref="picker"
97	v-model="editedItem.dob"	97	v-model="editedItem.dob"
98	:max="new Date().toISOString().substr(0, 10)"	98	:max="new Date().toISOString().substr(0, 10)"
99	min="1950-01-01"	99	min="1950-01-01"
100	@input="menu2 = false"	100	@input="menu2 = false"
101	></v-date-picker>	101	></v-date-picker>
102	</v-menu>	102	</v-menu>
103	</v-flex>	103	</v-flex>
104	</v-layout>	104	</v-layout>
105	</v-flex>	105	</v-flex>
106	<v-flex xs12 sm6>	106	<v-flex xs12 sm6>
107	<v-layout>	107	<v-layout>
108	<v-flex xs4 class="pt-4 subheading">	108	<v-flex xs4 class="pt-4 subheading">
109	<label class="right">Gender:</label>	109	<label class="right">Gender:</label>
110	</v-flex>	110	</v-flex>
111	<v-flex xs8 class="ml-3">	111	<v-flex xs8 class="ml-3">
112	<v-select	112	<v-select
113	:items="gender"	113	:items="gender"
114	v-model="editedItem.gender"	114	v-model="editedItem.gender"
115	label="Select gender"	115	label="Select gender"
116	name="gender"	116	name="gender"
117	required	117	required
118	></v-select>	118	></v-select>
119	</v-flex>	119	</v-flex>
120	</v-layout>	120	</v-layout>
121	</v-flex>	121	</v-flex>
122	</v-layout>	122	</v-layout>
123	<v-layout wrap>	123	<v-layout wrap>
124	<v-flex xs12 sm6>	124	<v-flex xs12 sm6>
125	<v-layout>	125	<v-layout>
126	<v-flex xs4 class="pt-4 subheading">	126	<v-flex xs4 class="pt-4 subheading">
127	<label class="right">Religion:</label>	127	<label class="right">Religion:</label>
128	</v-flex>	128	</v-flex>
129	<v-flex xs8 class="ml-3">	129	<v-flex xs8 class="ml-3">
130	<v-text-field	130	<v-text-field
131	v-model="editedItem.religion"	131	v-model="editedItem.religion"
132	placeholder="fill your Religion"	132	placeholder="fill your Religion"
133	name="religion"	133	name="religion"
134	type="text"	134	type="text"
135	required	135	required
136	></v-text-field>	136	></v-text-field>
137	</v-flex>	137	</v-flex>
138	</v-layout>	138	</v-layout>
139	</v-flex>	139	</v-flex>
140	<v-flex xs12 sm6>	140	<v-flex xs12 sm6>
141	<v-layout>	141	<v-layout>
142	<v-flex xs4 class="pt-4 subheading">	142	<v-flex xs4 class="pt-4 subheading">
143	<label class="right">JoiningDate:</label>	143	<label class="right">JoiningDate:</label>
144	</v-flex>	144	</v-flex>
145	<v-flex xs8 class="ml-3">	145	<v-flex xs8 class="ml-3">
146	<v-menu	146	<v-menu
147	ref="menu"	147	ref="menu"
148	:close-on-content-click="false"	148	:close-on-content-click="false"
149	v-model="menu3"	149	v-model="menu3"
150	:nudge-right="40"	150	:nudge-right="40"
151	lazy	151	lazy
152	transition="scale-transition"	152	transition="scale-transition"
153	offset-y	153	offset-y
154	full-width	154	full-width
155	min-width="290px"	155	min-width="290px"
156	>	156	>
157	<v-text-field	157	<v-text-field
158	slot="activator"	158	slot="activator"
159	v-model="editedItem.joiningDate"	159	v-model="editedItem.joiningDate"
160	placeholder="Select date"	160	placeholder="Select date"
161	></v-text-field>	161	></v-text-field>
162	<v-date-picker	162	<v-date-picker
163	ref="picker"	163	ref="picker"
164	v-model="editedItem.joiningDate"	164	v-model="editedItem.joiningDate"
165	:max="new Date().toISOString().substr(0, 10)"	165	:max="new Date().toISOString().substr(0, 10)"
166	min="1950-01-01"	166	min="1950-01-01"
167	@input="menu3 = false"	167	@input="menu3 = false"
168	></v-date-picker>	168	></v-date-picker>
169	</v-menu>	169	</v-menu>
170	</v-flex>	170	</v-flex>
171	</v-layout>	171	</v-layout>
172	</v-flex>	172	</v-flex>
173	</v-layout>	173	</v-layout>
174	<v-layout wrap>	174	<v-layout wrap>
175	<v-flex xs12 sm6>	175	<v-flex xs12 sm6>
176	<v-layout>	176	<v-layout>
177	<v-flex xs4 class="pt-4 subheading">	177	<v-flex xs4 class="pt-4 subheading">
178	<label class="right">Phone:</label>	178	<label class="right">Phone:</label>
179	</v-flex>	179	</v-flex>
180	<v-flex xs8 class="ml-3">	180	<v-flex xs8 class="ml-3">
181	<v-text-field	181	<v-text-field
182	v-model="editedItem.phone"	182	v-model="editedItem.phone"
183	placeholder="fill your MobileNo"	183	placeholder="fill your MobileNo"
184	name="mobileNo"	184	name="mobileNo"
185	type="number"	185	type="number"
186	required	186	required
187	></v-text-field>	187	></v-text-field>
188	</v-flex>	188	</v-flex>
189	</v-layout>	189	</v-layout>
190	</v-flex>	190	</v-flex>
191	<v-flex xs12 sm6>	191	<v-flex xs12 sm6>
192	<v-layout>	192	<v-layout>
193	<v-flex xs4 class="pt-4 subheading">	193	<v-flex xs4 class="pt-4 subheading">
194	<label class="right hidden-sm-only hidden-xs-only">Select Role:</label>	194	<label class="right hidden-sm-only hidden-xs-only">Select Role:</label>
195	<label class="right hidden-lg-only hidden-xl-only hidden-md-only">Role:</label>	195	<label class="right hidden-lg-only hidden-xl-only hidden-md-only">Role:</label>
196	</v-flex>	196	</v-flex>
197	<v-flex xs8 class="ml-3">	197	<v-flex xs8 class="ml-3">
198	<v-autocomplete	198	<v-autocomplete
199	v-model="editedItem.role"	199	v-model="editedItem.role"
200	:label="editedItem.role"	200	:label="editedItem.role"
201	:items="userRole"	201	:items="userRole"
202	item-text="name"	202	item-text="name"
203	item-value="role"	203	item-value="role"
204	required	204	required
205	></v-autocomplete>	205	></v-autocomplete>
206	</v-flex>	206	</v-flex>
207	</v-layout>	207	</v-layout>
208	</v-flex>	208	</v-flex>
209	</v-layout>	209	</v-layout>
210	<v-layout wrap>	210	<v-layout wrap>
211	<v-flex xs12 sm6>	211	<v-flex xs12 sm6>
212	<v-layout>	212	<v-layout>
213	<v-flex xs4 class="pt-4 subheading">	213	<v-flex xs4 class="pt-4 subheading">
214	<label class="right hidden-sm-only hidden-xs-only">Uplaod Image:</label>	214	<label class="right hidden-sm-only hidden-xs-only">Uplaod Image:</label>
215	<label class="right hidden-lg-only hidden-xl-only hidden-md-only">Uplaod:</label>	215	<label class="right hidden-lg-only hidden-xl-only hidden-md-only">Uplaod:</label>
216	</v-flex>	216	</v-flex>
217	<v-flex xs8 class="ml-3">	217	<v-flex xs8 class="ml-3">
218	<v-text-field	218	<v-text-field
219	label="Select Image"	219	label="Select Image"
220	@click="pickFile"	220	@click="pickFile"
221	v-model="imageName"	221	v-model="imageName"
222	append-icon="attach_file"	222	append-icon="attach_file"
223	></v-text-field>	223	></v-text-field>
224	</v-flex>	224	</v-flex>
225	</v-layout>	225	</v-layout>
226	</v-flex>	226	</v-flex>
227	<v-flex xs12 sm6>	227	<v-flex xs12 sm6>
228	<v-layout>	228	<v-layout>
229	<v-flex xs4 class="pt-4 subheading">	229	<v-flex xs4 class="pt-4 subheading">
230	<label class="right">Address:</label>	230	<label class="right">Address:</label>
231	</v-flex>	231	</v-flex>
232	<v-flex xs8 class="ml-3">	232	<v-flex xs8 class="ml-3">
233	<v-text-field	233	<v-text-field
234	name="input-4-3"	234	name="input-4-3"
235	v-model="editedItem.address"	235	v-model="editedItem.address"
236	placeholder="fill Your Address"	236	placeholder="fill Your Address"
237	required	237	required
238	></v-text-field>	238	></v-text-field>
239	</v-flex>	239	</v-flex>
240	</v-layout>	240	</v-layout>
241	</v-flex>	241	</v-flex>
242	</v-layout>	242	</v-layout>
243	<v-layout>	243	<v-layout>
244	<v-flex xs12 sm12>	244	<v-flex xs12 sm12>
245	<v-card-actions class="hidden-sm-only hidden-xs-only">	245	<v-card-actions class="hidden-sm-only hidden-xs-only">
246	<v-spacer></v-spacer>	246	<v-spacer></v-spacer>
247	<v-btn round dark :loading="loading" @click="save" class="add-button">Save</v-btn>	247	<v-btn round dark :loading="loading" @click="save" class="add-button">Save</v-btn>
248	</v-card-actions>	248	</v-card-actions>
249	<v-card-actions class="hidden-lg-only hidden-xl-only hidden-md-only">	249	<v-card-actions class="hidden-lg-only hidden-xl-only hidden-md-only">
250	<v-spacer></v-spacer>	250	<v-spacer></v-spacer>
251	<v-btn round dark :loading="loading" @click="save" class="add-button">Save</v-btn>	251	<v-btn round dark :loading="loading" @click="save" class="add-button">Save</v-btn>
252	<v-spacer></v-spacer>	252	<v-spacer></v-spacer>
253	</v-card-actions>	253	</v-card-actions>
254	</v-flex>	254	</v-flex>
255	</v-layout>	255	</v-layout>
256	</v-card-text>	256	</v-card-text>
257	</v-card>	257	</v-card>
258	</v-dialog>	258	</v-dialog>
259	<!-- **** PROFILE User DETAILS **** -->	259	<!-- **** PROFILE User DETAILS **** -->
260	<v-dialog v-model="viewUserDialog" max-width="560px" scrollable>	260	<v-dialog v-model="viewUserDialog" max-width="560px" scrollable>
261	<v-card flat class="card-style pa-3" dark>	261	<v-card flat class="card-style pa-3" dark>
262	<v-layout>	262	<v-layout>
263	<v-flex xs12>	263	<v-flex xs12>
264	<label class="title text-xs-center">View User</label>	264	<label class="title text-xs-center">View User</label>
265	<v-icon size="24" class="right" @click="viewUserDialog = false">cancel</v-icon>	265	<v-icon size="24" class="right" @click="viewUserDialog = false">cancel</v-icon>
266	</v-flex>	266	</v-flex>
267	</v-layout>	267	</v-layout>
268	<v-card-text>	268	<v-card-text>
269	<v-container grid-list-md>	269	<v-container grid-list-md>
270	<v-layout wrap>	270	<v-layout wrap>
271	<v-flex>	271	<v-flex>
272	<v-flex align-center justify-center layout text-xs-center>	272	<v-flex align-center justify-center layout text-xs-center>
273	<v-avatar size="100px">	273	<v-avatar size="100px">
274	<img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" />	274	<img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" />
275	<img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" />	275	<img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" />
276	</v-avatar>	276	</v-avatar>
277	</v-flex>	277	</v-flex>
278	<v-layout>	278	<v-layout>
279	<v-flex xs4 sm6>	279	<v-flex xs4 sm6>
280	<h5 class="right my-1">	280	<h5 class="right my-1">
281	<b>Name:</b>	281	<b>Name:</b>
282	</h5>	282	</h5>
283	</v-flex>	283	</v-flex>
284	<v-flex sm6 xs8>	284	<v-flex sm6 xs8>
285	<h5 class="my-1">{{ editedItem.name }}</h5>	285	<h5 class="my-1">{{ editedItem.name }}</h5>
286	</v-flex>	286	</v-flex>
287	</v-layout>	287	</v-layout>
288	<v-layout>	288	<v-layout>
289	<v-flex xs4 sm6>	289	<v-flex xs4 sm6>
290	<h5 class="right my-1">	290	<h5 class="right my-1">
291	<b>Email:</b>	291	<b>Email:</b>
292	</h5>	292	</h5>
293	</v-flex>	293	</v-flex>
294	<v-flex sm6 xs8>	294	<v-flex sm6 xs8>
295	<h5 class="my-1">{{ editedItem.email }}</h5>	295	<h5 class="my-1">{{ editedItem.email }}</h5>
296	</v-flex>	296	</v-flex>
297	</v-layout>	297	</v-layout>
298	<v-layout>	298	<v-layout>
299	<v-flex xs4 sm6>	299	<v-flex xs4 sm6>
300	<h5 class="right my-1">	300	<h5 class="right my-1">
301	<b>Gender:</b>	301	<b>Gender:</b>
302	</h5>	302	</h5>
303	</v-flex>	303	</v-flex>
304	<v-flex sm6 xs8>	304	<v-flex sm6 xs8>
305	<h5 class="my-1">{{ editedItem.gender }}</h5>	305	<h5 class="my-1">{{ editedItem.gender }}</h5>
306	</v-flex>	306	</v-flex>
307	</v-layout>	307	</v-layout>
308	<v-layout>	308	<v-layout>
309	<v-flex xs4 sm6>	309	<v-flex xs4 sm6>
310	<h5 class="right my-1">	310	<h5 class="right my-1">
311	<b>Religion:</b>	311	<b>Religion:</b>
312	</h5>	312	</h5>
313	</v-flex>	313	</v-flex>
314	<v-flex sm6 xs8>	314	<v-flex sm6 xs8>
315	<h5 class="my-1">{{ editedItem.religion }}</h5>	315	<h5 class="my-1">{{ editedItem.religion }}</h5>
316	</v-flex>	316	</v-flex>
317	</v-layout>	317	</v-layout>
318	<v-layout>	318	<v-layout>
319	<v-flex xs4 sm6>	319	<v-flex xs4 sm6>
320	<h5 class="right my-1">	320	<h5 class="right my-1">
321	<b>Role:</b>	321	<b>Role:</b>
322	</h5>	322	</h5>
323	</v-flex>	323	</v-flex>
324	<v-flex sm6 xs8>	324	<v-flex sm6 xs8>
325	<h5 class="my-1">{{ editedItem.role }}</h5>	325	<h5 class="my-1">{{ editedItem.role }}</h5>
326	</v-flex>	326	</v-flex>
327	</v-layout>	327	</v-layout>
328	<v-layout>	328	<v-layout>
329	<v-flex xs4 sm6>	329	<v-flex xs4 sm6>
330	<h5 class="right my-1">	330	<h5 class="right my-1">
331	<b>Phone:</b>	331	<b>Phone:</b>
332	</h5>	332	</h5>
333	</v-flex>	333	</v-flex>
334	<v-flex sm6 xs8>	334	<v-flex sm6 xs8>
335	<h5 class="my-1">{{ editedItem.phone }}</h5>	335	<h5 class="my-1">{{ editedItem.phone }}</h5>
336	</v-flex>	336	</v-flex>
337	</v-layout>	337	</v-layout>
338	<v-layout>	338	<v-layout>
339	<v-flex xs4 sm6>	339	<v-flex xs4 sm6>
340	<h5 class="right my-1">	340	<h5 class="right my-1">
341	<b>JoiningDate:</b>	341	<b>JoiningDate:</b>
342	</h5>	342	</h5>
343	</v-flex>	343	</v-flex>
344	<v-flex sm6 xs8>	344	<v-flex sm6 xs8>
345	<h5 class="my-1">{{ dates(editedItem.joiningDate) }}</h5>	345	<h5 class="my-1">{{ dates(editedItem.joiningDate) }}</h5>
346	</v-flex>	346	</v-flex>
347	</v-layout>	347	</v-layout>
348	<v-layout>	348	<v-layout>
349	<v-flex xs4 sm6>	349	<v-flex xs4 sm6>
350	<h5 class="right my-1">	350	<h5 class="right my-1">
351	<label class="right hidden-sm-only hidden-xs-only">	351	<label class="right hidden-sm-only hidden-xs-only">
352	<b>Date of Birth:</b>	352	<b>Date of Birth:</b>
353	</label>	353	</label>
354	<label class="right hidden-lg-only hidden-xl-only hidden-md-only">	354	<label class="right hidden-lg-only hidden-xl-only hidden-md-only">
355	<b>D.O.B:</b>	355	<b>D.O.B:</b>
356	</label>	356	</label>
357	</h5>	357	</h5>
358	</v-flex>	358	</v-flex>
359	<v-flex sm6 xs8>	359	<v-flex sm6 xs8>
360	<h5 class="my-1">{{ dates(editedItem.dob) }}</h5>	360	<h5 class="my-1">{{ dates(editedItem.dob) }}</h5>
361	</v-flex>	361	</v-flex>
362	</v-layout>	362	</v-layout>
363	<v-layout>	363	<v-layout>
364	<v-flex xs4 sm6>	364	<v-flex xs4 sm6>
365	<h5 class="right my-1">	365	<h5 class="right my-1">
366	<b>Address:</b>	366	<b>Address:</b>
367	</h5>	367	</h5>
368	</v-flex>	368	</v-flex>
369	<v-flex sm6 xs8>	369	<v-flex sm6 xs8>
370	<h5 class="my-1">{{ editedItem.address }}</h5>	370	<h5 class="my-1">{{ editedItem.address }}</h5>
371	</v-flex>	371	</v-flex>
372	</v-layout>	372	</v-layout>
373	</v-flex>	373	</v-flex>
374	</v-layout>	374	</v-layout>
375	</v-container>	375	</v-container>
376	</v-card-text>	376	</v-card-text>
377	</v-card>	377	</v-card>
378	</v-dialog>	378	</v-dialog>
379		379
380	<!-- **** EXISTING-USER TABLE DATA**** -->	380	<!-- **** EXISTING-USER TABLE DATA**** -->
381	<v-toolbar color="transparent" flat>	381	<v-toolbar color="transparent" flat>
382	<v-btn	382	<v-btn
383	fab	383	fab
384	dark	384	dark
385	class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"	385	class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
386	small	386	small
387	@click="addUserDialog = true"	387	@click="addUserDialog = true"
388	>	388	>
389	<v-icon dark>add</v-icon>	389	<v-icon dark>add</v-icon>
390	</v-btn>	390	</v-btn>
391	<v-btn	391	<v-btn
392	round	392	round
393	class="open-dialog-button hidden-sm-only hidden-xs-only"	393	class="open-dialog-button hidden-sm-only hidden-xs-only"
394	dark	394	dark
395	@click="addUserDialog = true"	395	@click="addUserDialog = true"
396	>	396	>
397	<v-icon class="white--text pr-1" size="20">add</v-icon>Add User	397	<v-icon class="white--text pr-1" size="20">add</v-icon>Add User
398	</v-btn>	398	</v-btn>
399	<v-spacer></v-spacer>	399	<v-spacer></v-spacer>
400	<v-card-title class="body-1" v-show="show">	400	<v-card-title class="body-1" v-show="show">
401	<v-btn icon large flat @click="displaySearch">	401	<v-btn icon large flat @click="displaySearch">
402	<v-avatar size="27">	402	<v-avatar size="27">
403	<img src="/static/icon/search.png" alt="icon" />	403	<img src="/static/icon/search.png" alt="icon" />
404	</v-avatar>	404	</v-avatar>
405	</v-btn>	405	</v-btn>
406	</v-card-title>	406	</v-card-title>
407	<v-flex xs8 sm8 lg2 md3 v-if="showSearch">	407	<v-flex xs8 sm8 lg2 md3 v-if="showSearch">
408	<v-layout>	408	<v-layout>
409	<v-text-field autofocus v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>	409	<v-text-field autofocus v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>
410	<v-icon @click="closeSearch" color="error">close</v-icon>	410	<v-icon @click="closeSearch" color="error">close</v-icon>
411	</v-layout>	411	</v-layout>
412	</v-flex>	412	</v-flex>
413	</v-toolbar>	413	</v-toolbar>
414	<v-data-table :headers="headers" :items="Users" :pagination.sync="pagination" :search="search">	414	<v-data-table :headers="headers" :items="Users" :pagination.sync="pagination" :search="search">
415	<template slot="items" slot-scope="props">	415	<template slot="items" slot-scope="props">
416	<td class="td td-row">{{ props.index + 1 }}</td>	416	<td class="td td-row">{{ props.index + 1 }}</td>
417	<td class="td td-row text-xs-center">	417	<td class="td td-row text-xs-center">
418	<v-avatar size="40">	418	<v-avatar size="40">
419	<img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />	419	<img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
420	<img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />	420	<img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
421	</v-avatar>	421	</v-avatar>
422	</td>	422	</td>
423	<td class="text-xs-center td td-row">{{ props.item.name}}</td>	423	<td class="text-xs-center td td-row">{{ props.item.name}}</td>
424	<td class="text-xs-center td td-row">{{ props.item.email }}</td>	424	<td class="text-xs-center td td-row">{{ props.item.email }}</td>
425	<td class="text-xs-center td td-row">{{ dates(props.item.dob) }}</td>	425	<td class="text-xs-center td td-row">{{ dates(props.item.dob) }}</td>
426	<td class="text-xs-center td td-row">{{ dates(props.item.joiningDate)}}</td>	426	<td class="text-xs-center td td-row">{{ dates(props.item.joiningDate)}}</td>
427	<td class="text-xs-center td td-row">{{ props.item.phone }}</td>	427	<td class="text-xs-center td td-row">{{ props.item.phone }}</td>
428	<td class="text-xs-center td td-row">	428	<td class="text-xs-center td td-row">
429	<v-switch	429	<v-switch
430	class="pl-3"	430	class="pl-3"
431	v-model="props.item.status"	431	v-model="props.item.status"
432	@change="suspendStatus(props.item.status,props.item._id)"	432	@change="suspendStatus(props.item.status,props.item._id)"
433	></v-switch>	433	></v-switch>
434	</td>	434	</td>
435	<td class="text-xs-center td td-row">	435	<td class="text-xs-center td td-row">
436	<span>	436	<span>
437	<v-tooltip top>	437	<v-tooltip top>
438	<img	438	<img
439	slot="activator"	439	slot="activator"
440	style="cursor:pointer; width:25px; height:25px; "	440	style="cursor:pointer; width:25px; height:25px; "
441	class="mr-3"	441	class="mr-3"
442	@click="profile(props.item)"	442	@click="profile(props.item)"
443	src="/static/icon/view.png"	443	src="/static/icon/view.png"
444	/>	444	/>
445	<span>View</span>	445	<span>View</span>
446	</v-tooltip>	446	</v-tooltip>
447	<v-tooltip top>	447	<v-tooltip top>
448	<img	448	<img
449	slot="activator"	449	slot="activator"
450	style="cursor:pointer; width:20px; height:18px; "	450	style="cursor:pointer; width:20px; height:18px; "
451	class="mr-3"	451	class="mr-3"
452	@click="editItem(props.item)"	452	@click="editItem(props.item)"
453	src="/static/icon/edit.png"	453	src="/static/icon/edit.png"
454	/>	454	/>
455	<span>Edit</span>	455	<span>Edit</span>
456	</v-tooltip>	456	</v-tooltip>
457	<v-tooltip top>	457	<v-tooltip top>
458	<img	458	<img
459	slot="activator"	459	slot="activator"
460	style="cursor:pointer; width:20px; height:20px; "	460	style="cursor:pointer; width:20px; height:20px; "
461	class="mr-3"	461	class="mr-3"
462	@click="deleteItem(props.item)"	462	@click="deleteItem(props.item)"
463	src="/static/icon/delete.png"	463	src="/static/icon/delete.png"
464	/>	464	/>
465	<span>Delete</span>	465	<span>Delete</span>
466	</v-tooltip>	466	</v-tooltip>
467	</span>	467	</span>
468	</td>	468	</td>
469	</template>	469	</template>
470	<v-alert	470	<v-alert
471	slot="no-results"	471	slot="no-results"
472	:value="true"	472	:value="true"
473	color="error"	473	color="error"
474	icon="warning"	474	icon="warning"
475	>Your search for "{{ search }}" found no results.</v-alert>	475	>Your search for "{{ search }}" found no results.</v-alert>
476	</v-data-table>	476	</v-data-table>
477	<!-- **** Add User Data**** -->	477	<!-- DIALOG BOX - Add User Data -->
478	<v-dialog v-model="addUserDialog" max-width="900px">	478	<v-dialog v-model="addUserDialog" max-width="900px">
479	<v-card flat class="card-style pa-2" dark>	479	<v-card flat class="card-style pa-2" dark>
480	<v-layout>	480	<v-layout>
481	<v-flex xs12>	481	<v-flex xs12>
482	<label class="title text-xs-center">Add User</label>	482	<label class="title text-xs-center">Add User</label>
483	<v-icon size="24" class="right" @click="addUserDialog = false">cancel</v-icon>	483	<v-icon size="24" class="right" @click="$refs.form.reset();addUserDialog = false">cancel</v-icon>
484	</v-flex>	484	</v-flex>
485	</v-layout>	485	</v-layout>
486	<v-form ref="form" v-model="valid" lazy-validation>	486	<v-form ref="form" v-model="valid" lazy-validation>
487	<v-container fluid>	487	<v-container fluid>
488	<v-layout>	488	<v-layout>
489	<v-flex	489	<v-flex
490	xs12	490	xs12
491	class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"	491	class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
492	>	492	>
493	<v-avatar size="80px">	493	<v-avatar size="80px">
494	<img src="/static/icon/user.png" v-if="!imageUrl" />	494	<img src="/static/icon/user.png" v-if="!imageUrl" />
495	</v-avatar>	495	</v-avatar>
496	<img	496	<img
497	:src="imageUrl"	497	:src="imageUrl"
498	height="150"	498	height="150"
499	v-if="imageUrl"	499	v-if="imageUrl"
500	style="border-radius:50%; width:150px"	500	style="border-radius:50%; width:150px"
501	/>	501	/>
502	</v-flex>	502	</v-flex>
503	</v-layout>	503	</v-layout>
504	<v-layout>	504	<v-layout>
505	<v-flex xs12 sm6>	505	<v-flex xs12 sm6>
506	<v-layout>	506	<v-layout>
507	<v-flex xs4 class="pt-4 subheading">	507	<v-flex xs4 class="pt-4 subheading">
508	<label class="right">Name:</label>	508	<label class="right">Name:</label>
509	</v-flex>	509	</v-flex>
510	<v-flex xs8 class="ml-3">	510	<v-flex xs8 class="ml-3">
511	<v-text-field	511	<v-text-field
512	v-model="addUser.name"	512	v-model="addUser.name"
513	placeholder="fill your Name"	513	placeholder="fill your Name"
514	name="name"	514	name="name"
515	type="text"	515	type="text"
516	:rules="nameRules"	516	:rules="nameRules"
517	required	517	required
518	></v-text-field>	518	></v-text-field>
519	</v-flex>	519	</v-flex>
520	</v-layout>	520	</v-layout>
521	</v-flex>	521	</v-flex>
522	<v-flex xs12 sm6>	522	<v-flex xs12 sm6>
523	<v-layout>	523	<v-layout>
524	<v-flex xs4 class="pt-4 subheading">	524	<v-flex xs4 class="pt-4 subheading">
525	<label class="right">Email ID:</label>	525	<label class="right">Email ID:</label>
526	</v-flex>	526	</v-flex>
527	<v-flex xs8 class="ml-3">	527	<v-flex xs8 class="ml-3">
528	<v-text-field	528	<v-text-field
529	placeholder="fill your email"	529	placeholder="fill your email"
530	:rules="emailRules"	530	:rules="emailRules"
531	v-model="addUser.email"	531	v-model="addUser.email"
532	type="text"	532	type="text"
533	name="email"	533	name="email"
534	required	534	required
535	></v-text-field>	535	></v-text-field>
536	</v-flex>	536	</v-flex>
537	</v-layout>	537	</v-layout>
538	</v-flex>	538	</v-flex>
539	</v-layout>	539	</v-layout>
540	<v-layout>	540	<v-layout>
541	<v-flex xs12 sm6>	541	<v-flex xs12 sm6>
542	<v-layout>	542	<v-layout>
543	<v-flex xs4 class="pt-4 subheading">	543	<v-flex xs4 class="pt-4 subheading">
544	<label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>	544	<label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>
545	<label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label>	545	<label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label>
546	</v-flex>	546	</v-flex>
547	<v-flex xs8 class="ml-3">	547	<v-flex xs8 class="ml-3">
548	<v-menu	548	<v-menu
549	ref="menu"	549	ref="menu"
550	:close-on-content-click="false"	550	:close-on-content-click="false"
551	v-model="menu"	551	v-model="menu"
552	:nudge-right="40"	552	:nudge-right="40"
553	lazy	553	lazy
554	transition="scale-transition"	554	transition="scale-transition"
555	offset-y	555	offset-y
556	full-width	556	full-width
557	min-width="290px"	557	min-width="290px"
558	>	558	>
559	<v-text-field	559	<v-text-field
560	slot="activator"	560	slot="activator"
561	:rules="dateRules"	561	:rules="dateRules"
562	v-model="addUser.dob"	562	v-model="addUser.dob"
563	placeholder="Select DOB"	563	placeholder="Select DOB"
564	></v-text-field>	564	></v-text-field>
565	<v-date-picker	565	<v-date-picker
566	ref="picker"	566	ref="picker"
567	v-model="addUser.dob"	567	v-model="addUser.dob"
568	:max="new Date().toISOString().substr(0, 10)"	568	:max="new Date().toISOString().substr(0, 10)"
569	min="1950-01-01"	569	min="1950-01-01"
570	@input="menu = false"	570	@input="menu = false"
571	></v-date-picker>	571	></v-date-picker>
572	</v-menu>	572	</v-menu>
573	</v-flex>	573	</v-flex>
574	</v-layout>	574	</v-layout>
575	</v-flex>	575	</v-flex>
576	<v-flex xs12 sm6>	576	<v-flex xs12 sm6>
577	<v-layout>	577	<v-layout>
578	<v-flex xs4 class="pt-4 subheading">	578	<v-flex xs4 class="pt-4 subheading">
579	<label class="right">Gender:</label>	579	<label class="right">Gender:</label>
580	</v-flex>	580	</v-flex>
581	<v-flex xs8 class="ml-3">	581	<v-flex xs8 class="ml-3">
582	<v-select	582	<v-select
583	v-model="addUser.gender"	583	v-model="addUser.gender"
584	:items="gender"	584	:items="gender"
585	label="Selct Gender "	585	label="Selct Gender "
586	:rules="genderRules"	586	:rules="genderRules"
587	required	587	required
588	></v-select>	588	></v-select>
589	</v-flex>	589	</v-flex>
590	</v-layout>	590	</v-layout>
591	</v-flex>	591	</v-flex>
592	</v-layout>	592	</v-layout>
593	<v-layout>	593	<v-layout>
594	<v-flex xs12 sm6>	594	<v-flex xs12 sm6>
595	<v-layout>	595	<v-layout>
596	<v-flex xs4 class="pt-4 subheading">	596	<v-flex xs4 class="pt-4 subheading">
597	<label class="right">Religion:</label>	597	<label class="right">Religion:</label>
598	</v-flex>	598	</v-flex>
599	<v-flex xs8 class="ml-3">	599	<v-flex xs8 class="ml-3">
600	<v-text-field	600	<v-text-field
601	v-model="addUser.religion"	601	v-model="addUser.religion"
602	placeholder="fill your Religion"	602	placeholder="fill your Religion"
603	name="Religion"	603	name="Religion"
604	type="text"	604	type="text"
605	:rules="religionRules"	605	:rules="religionRules"
606	required	606	required
607	></v-text-field>	607	></v-text-field>
608	</v-flex>	608	</v-flex>
609	</v-layout>	609	</v-layout>
610	</v-flex>	610	</v-flex>
611	<v-flex xs12 sm6>	611	<v-flex xs12 sm6>
612	<v-layout>	612	<v-layout>
613	<v-flex xs4 class="pt-4 subheading">	613	<v-flex xs4 class="pt-4 subheading">
614	<label class="right">JoiningDate:</label>	614	<label class="right">JoiningDate:</label>
615	</v-flex>	615	</v-flex>
616	<v-flex xs8 class="ml-3">	616	<v-flex xs8 class="ml-3">
617	<v-menu	617	<v-menu
618	ref="menu1"	618	ref="menu1"
619	:close-on-content-click="false"	619	:close-on-content-click="false"
620	v-model="menu1"	620	v-model="menu1"
621	:nudge-right="40"	621	:nudge-right="40"
622	lazy	622	lazy
623	transition="scale-transition"	623	transition="scale-transition"
624	offset-y	624	offset-y
625	full-width	625	full-width
626	min-width="290px"	626	min-width="290px"
627	>	627	>
628	<v-text-field	628	<v-text-field
629	slot="activator"	629	slot="activator"
630	:rules="joinDateRules"	630	:rules="joinDateRules"
631	v-model="addUser.joinDate"	631	v-model="addUser.joinDate"
632	placeholder="Select date"	632	placeholder="Select date"
633	></v-text-field>	633	></v-text-field>
634	<v-date-picker	634	<v-date-picker
635	ref="picker"	635	ref="picker"
636	v-model="addUser.joinDate"	636	v-model="addUser.joinDate"
637	:max="new Date().toISOString().substr(0, 10)"	637	:max="new Date().toISOString().substr(0, 10)"
638	min="1950-01-01"	638	min="1950-01-01"
639	@input="menu1 = false"	639	@input="menu1 = false"
640	></v-date-picker>	640	></v-date-picker>
641	</v-menu>	641	</v-menu>
642	</v-flex>	642	</v-flex>
643	</v-layout>	643	</v-layout>
644	</v-flex>	644	</v-flex>
645	</v-layout>	645	</v-layout>
646	<v-layout>	646	<v-layout>
647	<v-flex xs12 sm6>	647	<v-flex xs12 sm6>
648	<v-layout>	648	<v-layout>
649	<v-flex xs4 class="pt-4 subheading">	649	<v-flex xs4 class="pt-4 subheading">
650	<label class="right">Phone :</label>	650	<label class="right">Phone :</label>
651	</v-flex>	651	</v-flex>
652	<v-flex xs8 class="ml-3">	652	<v-flex xs8 class="ml-3">
653	<v-text-field	653	<v-text-field
654	v-model="addUser.mobileNo"	654	v-model="addUser.mobileNo"
655	placeholder="fill your Phone Number"	655	placeholder="fill your Phone Number"
656	name="mobileNo"	656	name="mobileNo"
657	type="number"	657	type="number"
658	:rules="mobileNoRules"	658	:rules="mobileNoRules"
659	required	659	required
660	></v-text-field>	660	></v-text-field>
661	</v-flex>	661	</v-flex>
662	</v-layout>	662	</v-layout>
663	</v-flex>	663	</v-flex>
664	<v-flex xs12 sm6>	664	<v-flex xs12 sm6>
665	<v-layout>	665	<v-layout>
666	<v-flex xs4 class="pt-4 subheading">	666	<v-flex xs4 class="pt-4 subheading">
667	<label class="right hidden-sm-only hidden-xs-only">Select Role:</label>	667	<label class="right hidden-sm-only hidden-xs-only">Select Role:</label>
668	<label class="right hidden-lg-only hidden-xl-only hidden-md-only">Role:</label>	668	<label class="right hidden-lg-only hidden-xl-only hidden-md-only">Role:</label>
669	</v-flex>	669	</v-flex>
670	<v-flex xs8 class="ml-3">	670	<v-flex xs8 class="ml-3">
671	<v-autocomplete	671	<v-autocomplete
672	v-model="addUser.role"	672	v-model="addUser.role"
673	:rules="role"	673	:rules="role"
674	:items="userRole"	674	:items="userRole"
675	item-text="name"	675	item-text="name"
676	item-value="name"	676	item-value="name"
677	placeholder="Select Role Name"	677	placeholder="Select Role Name"
678	required	678	required
679	></v-autocomplete>	679	></v-autocomplete>
680	</v-flex>	680	</v-flex>
681	</v-layout>	681	</v-layout>
682	</v-flex>	682	</v-flex>
683	</v-layout>	683	</v-layout>
684	<v-layout wrap>	684	<v-layout wrap>
685	<!-- <v-flex xs12 sm6>	685	<!-- <v-flex xs12 sm6>
686	<v-layout>	686	<v-layout>
687	<v-flex xs4 class="pt-4 subheading">	687	<v-flex xs4 class="pt-4 subheading">
688	<label class="right">Username:</label>	688	<label class="right">Username:</label>
689	</v-flex>	689	</v-flex>
690	<v-flex xs8 class="ml-3">	690	<v-flex xs8 class="ml-3">
691	<v-text-field	691	<v-text-field
692	v-model="addUser.userName"	692	v-model="addUser.userName"
693	placeholder="fill your User Name"	693	placeholder="fill your User Name"
694	type="text"	694	type="text"
695	:rules="userNameRules"	695	:rules="userNameRules"
696	required	696	required
697	></v-text-field>	697	></v-text-field>
698	</v-flex>	698	</v-flex>
699	</v-layout>	699	</v-layout>
700	</v-flex> -->	700	</v-flex> -->
701	<v-flex xs12 sm6>	701	<v-flex xs12 sm6>
702	<v-layout>	702	<v-layout>
703	<v-flex xs4 class="pt-4 subheading">	703	<v-flex xs4 class="pt-4 subheading">
704	<label class="right hidden-sm-only hidden-xs-only">Uplaod Image:</label>	704	<label class="right hidden-sm-only hidden-xs-only">Uplaod Image:</label>
705	<label class="right hidden-lg-only hidden-xl-only hidden-md-only">Image:</label>	705	<label class="right hidden-lg-only hidden-xl-only hidden-md-only">Image:</label>
706	</v-flex>	706	</v-flex>
707	<v-flex xs8 class="ml-3">	707	<v-flex xs8 class="ml-3">
708	<v-text-field	708	<v-text-field
709	label="Select Image"	709	label="Select Image"
710	@click="pickFile"	710	@click="pickFile"
711	v-model="imageName"	711	v-model="imageName"
712	append-icon="attach_file"	712	append-icon="attach_file"
713	></v-text-field>	713	></v-text-field>
714	<input	714	<input
715	type="file"	715	type="file"
716	style="display:none"	716	style="display:none"
717	ref="image"	717	ref="image"
718	accept="image/*"	718	accept="image/*"
719	@change="onFilePicked"	719	@change="onFilePicked"
720	/>	720	/>
721	</v-flex>	721	</v-flex>
722	</v-layout>	722	</v-layout>
723	</v-flex>	723	</v-flex>
724	<v-flex xs12 sm6>	724	<v-flex xs12 sm6>
725	<v-layout>	725	<v-layout>
726	<v-flex xs4 class="pt-4 subheading">	726	<v-flex xs4 class="pt-4 subheading">
727	<label class="right">Address:</label>	727	<label class="right">Address:</label>
728	</v-flex>	728	</v-flex>
729	<v-flex xs8 class="ml-3">	729	<v-flex xs8 class="ml-3">
730	<v-text-field	730	<v-text-field
731	name="input-4-3"	731	name="input-4-3"
732	v-model="addUser.presentAddress"	732	v-model="addUser.presentAddress"
733	:rules="presentAddress"	733	:rules="presentAddress"
734	placeholder="fill Your present Address"	734	placeholder="fill Your present Address"
735	required	735	required
736	></v-text-field>	736	></v-text-field>
737	</v-flex>	737	</v-flex>
738	</v-layout>	738	</v-layout>
739	</v-flex>	739	</v-flex>
740	</v-layout>	740	</v-layout>
741	<v-layout>	741	<v-layout>
742	<v-flex xs12 sm12>	742	<v-flex xs12 sm12>
743	<v-layout class="right">	743	<v-layout class="right">
744	<v-btn @click="clear" round dark class="clear-button">Clear</v-btn>	744	<v-btn @click="clear" round dark class="clear-button">Clear</v-btn>
745	<v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>	745	<v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
746	</v-layout>	746	</v-layout>
747	</v-flex>	747	</v-flex>
748	</v-layout>	748	</v-layout>
749	</v-container>	749	</v-container>
750	</v-form>	750	</v-form>
751	</v-card>	751	</v-card>
752	</v-dialog>	752	</v-dialog>
753	<div class="loader" v-if="showLoader">	753	<div class="loader" v-if="showLoader">
754	<v-progress-circular indeterminate color="white"></v-progress-circular>	754	<v-progress-circular indeterminate color="white"></v-progress-circular>
755	</div>	755	</div>
756	<v-snackbar	756	<v-snackbar
757	:timeout="timeout"	757	:timeout="timeout"
758	:top="y === 'top'"	758	:top="y === 'top'"
759	:right="x === 'right'"	759	:right="x === 'right'"
760	:vertical="mode === 'vertical'"	760	:vertical="mode === 'vertical'"
761	v-model="snackbar"	761	v-model="snackbar"
762	:color="color"	762	:color="color"
763	>{{ text }}</v-snackbar>	763	>{{ text }}</v-snackbar>
764	</v-container>	764	</v-container>
765	</template>	765	</template>
766		766
767	<script>	767	<script>
768	import http from "@/Services/http.js";	768	import http from "@/Services/http.js";
769	import Util from "@/util";	769	import Util from "@/util";
770	import moment from "moment";	770	import moment from "moment";
771	import _ from 'lodash';	771	import _ from 'lodash';
772		772
773	export default {	773	export default {
774	data: () => ({	774	data: () => ({
775	component: "report-generate",	775	component: "report-generate",
776	snackbar: false,	776	snackbar: false,
777	y: "top",	777	y: "top",
778	x: "right",	778	x: "right",
779	mode: "",	779	mode: "",
780	timeout: 3000,	780	timeout: 3000,
781	color: "",	781	color: "",
782	text: "",	782	text: "",
783	show: true,	783	show: true,
784	showSearch: false,	784	showSearch: false,
785	showLoader: false,	785	showLoader: false,
786	loading: false,	786	loading: false,
787	addUserDialog: false,	787	addUserDialog: false,
788	date: null,	788	date: null,
789	search: "",	789	search: "",
790	menu: false,	790	menu: false,
791	menu1: false,	791	menu1: false,
792	menu2: false,	792	menu2: false,
793	menu3: false,	793	menu3: false,
794	viewUserDialog: false,	794	viewUserDialog: false,
795	editUserDialog: false,	795	editUserDialog: false,
796	valid: true,	796	valid: true,
797	isActive: true,	797	isActive: true,
798	newActive: false,	798	newActive: false,
799	pagination: {	799	pagination: {
800	rowsPerPage: 10	800	rowsPerPage: 10
801	},	801	},
802	imageData: {},	802	imageData: {},
803	imageName: "",	803	imageName: "",
804	imageUrl: "",	804	imageUrl: "",
805	imageFile: "",	805	imageFile: "",
806	nameRules: [v => !!v \|\| "Name is required"],	806	nameRules: [v => !!v \|\| "Name is required"],
807	dateRules: [v => !!v \|\| " DOB is required"],	807	dateRules: [v => !!v \|\| " DOB is required"],
808	genderRules: [v => !!v \|\| " Gender Name is required"],	808	genderRules: [v => !!v \|\| " Gender Name is required"],
809	pincode: [v => !!v \|\| " Pincode is required"],	809	pincode: [v => !!v \|\| " Pincode is required"],
810	role: [v => !!v \|\| "Role Name is required"],	810	role: [v => !!v \|\| "Role Name is required"],
811	permanentAddress: [v => !!v \|\| " Permanent Address is required"],	811	permanentAddress: [v => !!v \|\| " Permanent Address is required"],
812	presentAddress: [v => !!v \|\| " Present Address is required"],	812	presentAddress: [v => !!v \|\| " Present Address is required"],
813	mobileNoRules: [v => !!v \|\| "Phone Number is required"],	813	mobileNoRules: [v => !!v \|\| "Phone Number is required"],
814	religionRules: [v => !!v \|\| "Religion Name is required"],	814	religionRules: [v => !!v \|\| "Religion Name is required"],
815	joinDateRules: [v => !!v \|\| " Join Date is required"],	815	joinDateRules: [v => !!v \|\| " Join Date is required"],
816	userNameRules: [v => !!v \|\| " User Name is required"],	816	userNameRules: [v => !!v \|\| " User Name is required"],
817	passwordRules: [v => !!v \|\| " Password is required"],	817	passwordRules: [v => !!v \|\| " Password is required"],
818	errorMessages: "",	818	errorMessages: "",
819	userRole: [],	819	userRole: [],
820	emailRules: [	820	emailRules: [
821	v => !!v \|\| "E-mail is required",	821	v => !!v \|\| "E-mail is required",
822	v =>	822	v =>
823	/^\w+([.-]?\w+)@\w+([.-]?\w+)(\.\w{2,3})+$/.test(v) \|\|	823	/^\w+([.-]?\w+)@\w+([.-]?\w+)(\.\w{2,3})+$/.test(v) \|\|
824	"E-mail must be valid"	824	"E-mail must be valid"
825	],	825	],
826	gender: ["Male", "Female"],	826	gender: ["Male", "Female"],
827	headers: [	827	headers: [
828	{	828	{
829	text: "No",	829	text: "No",
830	align: "",	830	align: "",
831	sortable: false,	831	sortable: false,
832	value: "No"	832	value: "No"
833	},	833	},
834	{	834	{
835	text: "Profile Pic",	835	text: "Profile Pic",
836	value: "profilePicUrl",	836	value: "profilePicUrl",
837	sortable: false,	837	sortable: false,
838	align: "center"	838	align: "center"
839	},	839	},
840	{ text: "Name", value: "name", sortable: false, align: "center" },	840	{ text: "Name", value: "name", sortable: false, align: "center" },
841	{ text: "Email", value: "email", sortable: false, align: "center" },	841	{ text: "Email", value: "email", sortable: false, align: "center" },
842	{ text: "DOB", value: "dob", sortable: false, align: "center" },	842	{ text: "DOB", value: "dob", sortable: false, align: "center" },
843	{	843	{
844	text: "Joining Date",	844	text: "Joining Date",
845	value: "joiningDate",	845	value: "joiningDate",
846	sortable: false,	846	sortable: false,
847	align: "center"	847	align: "center"
848	},	848	},
849	{	849	{
850	text: "Phone",	850	text: "Phone",
851	value: "phone",	851	value: "phone",
852	sortable: false,	852	sortable: false,
853	align: "center"	853	align: "center"
854	},	854	},
855	{	855	{
856	text: "Status",	856	text: "Status",
857	value: "status",	857	value: "status",
858	sortable: false,	858	sortable: false,
859	align: "center"	859	align: "center"
860	},	860	},
861	{ text: "Action", value: "", sortable: false, align: "center" }	861	{ text: "Action", value: "", sortable: false, align: "center" }
862	],	862	],
863	Users: [],	863	Users: [],
864	editedIndex: -1,	864	editedIndex: -1,
865	upload: "",	865	upload: "",
866	editedItem: {	866	editedItem: {
867	role: "",	867	role: "",
868	name: "",	868	name: "",
869	email: "",	869	email: "",
870	dob: null,	870	dob: null,
871	gender: "",	871	gender: "",
872	role: "",	872	role: "",
873	address: "",	873	address: "",
874	phone: "",	874	phone: "",
875	religion: "",	875	religion: "",
876	joiningDate: null	876	joiningDate: null
877	},	877	},
878	addUser: {	878	addUser: {
879	role: "",	879	role: "",
880	name: "",	880	name: "",
881	email: "",	881	email: "",
882	dob: null,	882	dob: null,
883	gender: "",	883	gender: "",
884	pincode: "",	884	pincode: "",
885	role: "",	885	role: "",
886	permanentAddress: "",	886	permanentAddress: "",
887	presentAddress: "",	887	presentAddress: "",
888	mobileNo: "",	888	mobileNo: "",
889	religion: "",	889	religion: "",
890	joiningDate: null	890	joiningDate: null
891	}	891	}
892	}),	892	}),
893	watch: {	893	watch: {
894	menu(val) {	894	menu(val) {
895	val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));	895	val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
896	},	896	},
897	menu1(val) {	897	menu1(val) {
898	val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));	898	val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
899	}	899	}
900	},	900	},
901	methods: {	901	methods: {
902	save(date) {	902	save(date) {
903	this.$refs.menu.save(date);	903	this.$refs.menu.save(date);
904	},	904	},
905	save(date) {	905	save(date) {
906	this.$refs.menu1.save(date);	906	this.$refs.menu1.save(date);
907	},	907	},
908	pickFile() {	908	pickFile() {
909	this.$refs.image.click();	909	this.$refs.image.click();
910	},	910	},
911	onFilePicked(e) {	911	onFilePicked(e) {
912	// console.log(e)	912	// console.log(e)
913	const files = e.target.files;	913	const files = e.target.files;
914	this.upload = e.target.files[0];	914	this.upload = e.target.files[0];
915	console.log("imageData-upload========>", this.upload);	915	console.log("imageData-upload========>", this.upload);
916	if (files[0] !== undefined) {	916	if (files[0] !== undefined) {
917	this.imageName = files[0].name;	917	this.imageName = files[0].name;
918	if (this.imageName.lastIndexOf(".") <= 0) {	918	if (this.imageName.lastIndexOf(".") <= 0) {
919	return;	919	return;
920	}	920	}
921	const fr = new FileReader();	921	const fr = new FileReader();
922	fr.readAsDataURL(files[0]);	922	fr.readAsDataURL(files[0]);
923	fr.addEventListener("load", () => {	923	fr.addEventListener("load", () => {
924	this.imageUrl = fr.result;	924	this.imageUrl = fr.result;
925	this.imageFile = files[0]; // this is an image file that can be sent to server...	925	this.imageFile = files[0]; // this is an image file that can be sent to server...
926	// this.imageData.imageUrl = URL.createObjectURL(this.imageFile);	926	// this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
927	// console.log("upload=======>", this.imageData.imageUrl);	927	// console.log("upload=======>", this.imageData.imageUrl);
928	console.log("imageFile", this.imageUrl);	928	console.log("imageFile", this.imageUrl);
929	});	929	});
930	} else {	930	} else {
931	this.imageName = "";	931	this.imageName = "";
932	this.imageFile = "";	932	this.imageFile = "";
933	this.imageUrl = "";	933	this.imageUrl = "";
934	}	934	}
935	},	935	},
936	dates: function(date) {	936	dates: function(date) {
937	return moment(date).format("MMMM DD, YYYY");	937	return moment(date).format("MMMM DD, YYYY");
938	},	938	},
939	getUsersList() {	939	getUsersList() {
940	this.showLoader = true;	940	this.showLoader = true;
941	var token = this.$store.state.token;	941	var token = this.$store.state.token;
942	http()	942	http()
943	.get("/getUsersList", {	943	.get("/getUsersList", {
944	headers: { Authorization: "Bearer " + token }	944	headers: { Authorization: "Bearer " + token }
945	})	945	})
946	.then(response => {	946	.then(response => {
947	this.Users = response.data.data;	947	this.Users = response.data.data;
948	this.showLoader = false;	948	this.showLoader = false;
949	})	949	})
950	.catch(error => {	950	.catch(error => {
951	this.showLoader = false;	951	this.showLoader = false;
952	if (error.response.status === 401) {	952	if (error.response.status === 401) {
953	this.$router.replace({ path: "/" });	953	this.$router.replace({ path: "/" });
954	this.$store.dispatch("setToken", null);	954	this.$store.dispatch("setToken", null);
955	this.$store.dispatch("Id", null);	955	this.$store.dispatch("Id", null);
956	}	956	}
957	});	957	});
958	},	958	},
959	editItem(item) {	959	editItem(item) {
960	this.editedIndex = this.Users.indexOf(item);	960	this.editedIndex = this.Users.indexOf(item);
961	this.editedItem = Object.assign({}, item);	961	this.editedItem = Object.assign({}, item);
962	this.editedItem.dob =	962	this.editedItem.dob =
963	this.editedItem.dob != undefined	963	this.editedItem.dob != undefined
964	? (this.editedItem.dob = this.editedItem.dob.substring(0, 10))	964	? (this.editedItem.dob = this.editedItem.dob.substring(0, 10))
965	: (this.editedItem.dob = "");	965	: (this.editedItem.dob = "");
966	for (let i = 0; i < this.userRole.length; i++) {	966	for (let i = 0; i < this.userRole.length; i++) {
967	if (this.userRole[i].role === this.editedItem.role) {	967	if (this.userRole[i].role === this.editedItem.role) {
968	this.editedItem.role = this.userRole[i].name;	968	this.editedItem.role = this.userRole[i].name;
969	}	969	}
970	}	970	}
971	this.editUserDialog = true;	971	this.editUserDialog = true;
972	},	972	},
973	profile(item) {	973	profile(item) {
974	this.editedIndex = this.Users.indexOf(item);	974	this.editedIndex = this.Users.indexOf(item);
975	this.editedItem = Object.assign({}, item);	975	this.editedItem = Object.assign({}, item);
976	this.viewUserDialog = true;	976	this.viewUserDialog = true;
977	for (let i = 0; i < this.userRole.length; i++) {	977	for (let i = 0; i < this.userRole.length; i++) {
978	if (this.userRole[i].role === this.editedItem.role) {	978	if (this.userRole[i].role === this.editedItem.role) {
979	this.editedItem.role = this.userRole[i].name;	979	this.editedItem.role = this.userRole[i].name;
980	}	980	}
981	}	981	}
982	},	982	},
983	deleteItem(item) {	983	deleteItem(item) {
984	let deleteUser = {	984	let deleteUser = {
985	userId: item._id	985	userId: item._id
986	};	986	};
987	http()	987	http()
988	.delete(	988	.delete(
989	"/deleteUser",	989	"/deleteUser",
990	confirm("Are you sure you want to delete this?") && {	990	confirm("Are you sure you want to delete this?") && {
991	params: deleteUser	991	params: deleteUser
992	}	992	}
993	)	993	)
994	.then(response => {	994	.then(response => {
995	this.snackbar = true;	995	this.snackbar = true;
996	this.text = response.data.message;	996	this.text = response.data.message;
997	this.color = "green";	997	this.color = "green";
998	this.getUsersList();	998	this.getUsersList();
999	})	999	})
1000	.catch(error => {	1000	.catch(error => {
1001	this.snackbar = true;	1001	this.snackbar = true;
1002	this.color = "error";	1002	this.color = "error";
1003	this.text = error.response.data.message;	1003	this.text = error.response.data.message;
1004	});	1004	});
1005	},	1005	},
1006	close() {	1006	close() {
1007	this.editUserDialog = false;	1007	this.editUserDialog = false;
1008	},	1008	},
1009	closeProfileDialog() {	1009	closeProfileDialog() {
1010	this.viewUserDialog = false;	1010	this.viewUserDialog = false;
1011	},	1011	},
1012	submit() {	1012	submit() {
1013	if (this.$refs.form.validate()) {	1013	if (this.$refs.form.validate()) {
1014	let addUserData = {	1014	let addUserData = {
1015	name: this.addUser.name,	1015	name: this.addUser.name,
1016	email: this.addUser.email,	1016	email: this.addUser.email,
1017	dob: this.addUser.dob,	1017	dob: this.addUser.dob,
1018	gender: this.addUser.gender,	1018	gender: this.addUser.gender,
1019	religion: this.addUser.religion,	1019	religion: this.addUser.religion,
1020	role: this.addUser.role,	1020	role: this.addUser.role,
1021	address: this.addUser.presentAddress,	1021	address: this.addUser.presentAddress,
1022	phone: this.addUser.mobileNo,	1022	phone: this.addUser.mobileNo,
1023	religion: this.addUser.religion,	1023	religion: this.addUser.religion,
1024	joiningDate: this.addUser.joinDate	1024	joiningDate: this.addUser.joinDate
1025	};	1025	};
1026	if (this.imageUrl) {	1026	if (this.imageUrl) {
1027	var str = this.imageUrl;	1027	var str = this.imageUrl;
1028	const [baseUrl, imageUrl] = str.split(/,/);	1028	const [baseUrl, imageUrl] = str.split(/,/);
1029	addUserData.profilePicUrl = imageUrl;	1029	addUserData.profilePicUrl = imageUrl;
1030	}	1030	}
1031	this.loading = true;	1031	this.loading = true;
1032	http()	1032	http()
1033	.post("/createUser", addUserData)	1033	.post("/createUser", addUserData)
1034	.then(response => {	1034	.then(response => {
1035	this.imageUrl = "";	1035	this.imageUrl = "";
1036	this.getUsersList();	1036	this.getUsersList();
1037	this.snackbar = true;	1037	this.snackbar = true;
1038	this.addUserDialog = false;	1038	this.addUserDialog = false;
1039	this.text = response.data.message;	1039	this.text = response.data.message;
1040	this.color = "green";	1040	this.color = "green";
1041	this.clear();	1041	this.clear();
1042	this.loading = false;	1042	this.loading = false;
1043	})	1043	})
1044	.catch(error => {	1044	.catch(error => {
1045	this.loading = false;	1045	this.loading = false;
1046	this.snackbar = true;	1046	this.snackbar = true;
1047	this.color = "error";	1047	this.color = "error";
1048	this.text = error.response.data.message;	1048	this.text = error.response.data.message;
1049	});	1049	});
1050	}	1050	}
1051	},	1051	},
1052	clear() {	1052	clear() {
1053	this.$refs.form.reset();	1053	this.$refs.form.reset();
1054	this.imageUrl = "";	1054	this.imageUrl = "";
1055	},	1055	},
1056	save() {	1056	save() {
1057	this.loading = true;	1057	this.loading = true;
1058	for (let i = 0; i < this.userRole.length; i++) {	1058	for (let i = 0; i < this.userRole.length; i++) {
1059	if (this.userRole[i].name === this.editedItem.role) {	1059	if (this.userRole[i].name === this.editedItem.role) {
1060	this.editedItem.role = this.userRole[i].role;	1060	this.editedItem.role = this.userRole[i].role;
1061	}	1061	}
1062	}	1062	}
1063	this.editedItem.userId = this.editedItem._id;	1063	this.editedItem.userId = this.editedItem._id;
1064	if (this.imageUrl) {	1064	if (this.imageUrl) {
1065	var str = this.imageUrl;	1065	var str = this.imageUrl;
1066	const [baseUrl, imageUrl] = str.split(/,/);	1066	const [baseUrl, imageUrl] = str.split(/,/);
1067	this.editedItem.upload = imageUrl;	1067	this.editedItem.upload = imageUrl;
1068	}	1068	}
1069	http()	1069	http()
1070	.put("/updateUser", this.editedItem)	1070	.put("/updateUser", this.editedItem)
1071	.then(response => {	1071	.then(response => {
1072	this.snackbar = true;	1072	this.snackbar = true;
1073	this.text = response.data.message;	1073	this.text = response.data.message;
1074	this.color = "green";	1074	this.color = "green";
1075	this.loading = false;	1075	this.loading = false;
1076	this.getUsersList();	1076	this.getUsersList();
1077	this.close();	1077	this.close();
1078	})	1078	})
1079	.catch(error => {	1079	.catch(error => {
1080	this.loading = false;	1080	this.loading = false;
1081	this.snackbar = true;	1081	this.snackbar = true;
1082	this.text = error.response.data.message;	1082	this.text = error.response.data.message;
1083	this.color = "error";	1083	this.color = "error";
1084	});	1084	});
1085	},	1085	},
1086	getRole() {	1086	getRole() {
1087	this.showLoader = true;	1087	this.showLoader = true;
1088	var token = this.$store.state.token;	1088	var token = this.$store.state.token;
1089	http()	1089	http()
1090	.get("/getRolesList", {	1090	.get("/getRolesList", {
1091	headers: { Authorization: "Bearer " + token }	1091	headers: { Authorization: "Bearer " + token }
1092	})	1092	})
1093	.then(response => {	1093	.then(response => {
1094	this.userRole = response.data.data;	1094	this.userRole = response.data.data;
1095	this.showLoader = false;	1095	this.showLoader = false;
1096	this.userRole = response.data.data;	1096	this.userRole = response.data.data;
1097	var removedRoles = _.remove(this.userRole, function(c) {	1097	var removedRoles = _.remove(this.userRole, function(c) {
1098	//remove if color is green or yellow	1098	//remove if color is green or yellow
1099	return c.name === "ADMIN" \|\|c.name === "SUPERADMIN" \|\| c.name === "TEACHER" \|\| c.name === "STUDENT" \|\| c.name === "PARENT" ;	1099	return c.name === "ADMIN" \|\|c.name === "SUPERADMIN" \|\| c.name === "TEACHER" \|\| c.name === "STUDENT" \|\| c.name === "PARENT" ;
1100	});	1100	});
1101	})	1101	})
1102	.catch(error => {	1102	.catch(error => {
1103	this.showLoader = false;	1103	this.showLoader = false;
1104		1104
1105	});	1105	});
1106	},	1106	},
1107	suspendStatus(suspendStatus, id) {	1107	suspendStatus(suspendStatus, id) {
1108	let suspendStatusData = {	1108	let suspendStatusData = {
1109	userId: id,	1109	userId: id,
1110	status: suspendStatus	1110	status: suspendStatus
1111	};	1111	};
1112	this.showLoader = true;	1112	this.showLoader = true;
1113	http()	1113	http()
1114	.put("/suspendUserAccount", suspendStatusData)	1114	.put("/suspendUserAccount", suspendStatusData)
1115	.then(response => {	1115	.then(response => {
1116	this.getUsersList();	1116	this.getUsersList();
1117	this.text = response.data.message;	1117	this.text = response.data.message;
1118	this.snackbar = true;	1118	this.snackbar = true;
1119	this.showLoader = false;	1119	this.showLoader = false;
1120	})	1120	})
1121	.catch(error => {	1121	.catch(error => {
1122	// console.log(error.response.data.data);	1122	// console.log(error.response.data.data);
1123	this.snackbar = true;	1123	this.snackbar = true;
1124	this.text = error.response.data.message;	1124	this.text = error.response.data.message;
1125	this.showLoader = false;	1125	this.showLoader = false;
1126	});	1126	});
1127	},	1127	},
1128	displaySearch() {	1128	displaySearch() {
1129	(this.show = false), (this.showSearch = true);	1129	(this.show = false), (this.showSearch = true);
1130	},	1130	},
1131	closeSearch() {	1131	closeSearch() {
1132	this.showSearch = false;	1132	this.showSearch = false;
1133	this.show = true;	1133	this.show = true;
1134	this.search = "";	1134	this.search = "";
1135	}	1135	}
1136	},	1136	},
1137	mounted() {	1137	mounted() {
1138	this.getUsersList();	1138	this.getUsersList();
1139	this.getRole();	1139	this.getRole();
1140	}	1140	}
1141	};	1141	};
1142	</script>	1142	</script>