viithiisys / School-Management-dashboard

Browse Code »

Commit ca81e3c3d301037ec141092842022d451a026c6f

Authored by Neeraj Sharma 2019-11-13 07:11:03 -0500

1 parent 0551a0f15e

Exists in master and in 3 other branches

fixed exam design

Showing 3 changed files with 42 additions and 39 deletions Show diff stats

src/pages/Exam/exam.vue

Diff comments View file @ca81e3c

 <template>
   <v-app id="pages-dasboard">
     <v-tabs grow slider-color="gray">
       <v-tab
         ripple
         @click="activeTab('existing')"
         v-bind:class="{ active: isActive }"
         id="tab"
         class="subheading"
       >Existing Exam</v-tab>
       <v-tab
         ripple
         @click="activeTab('new')"
         v-bind:class="{ active: newActive }"
         id="tab1"
         User
         class="subheading"
       >Add Exam</v-tab>
-      <!-- ****** EDIT EXAM  A BOOK ****** -->
+      <!-- ****** EDIT EXAM ****** -->
       <v-tab-item>
         <v-snackbar
           :timeout="timeout"
           :top="y === 'top'"
           :right="x === 'right'"
           :vertical="mode === 'vertical'"
           v-model="snackbar"
           color="success"
         >{{ text }}</v-snackbar>
-        <v-dialog v-model="dialog" max-width="1000px" scrollable>
+        <v-dialog v-model="dialog" max-width="600px" scrollable>
           <v-card flat>
             <v-toolbar class="grey lighten-2" flat>
               <v-spacer></v-spacer>
               <v-toolbar-title>
                 <h3>Edit Exam</h3>
               </v-toolbar-title>
               <v-spacer></v-spacer>
             </v-toolbar>
-            <v-card-text style="height:600px;">
+            <v-card-text style="height:360px;">
               <v-form ref="form">
                 <v-container fluid>
                   <v-layout>
                     <v-flex xs12 sm12>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right">Exam Name:</label>
                         </v-flex>
                         <v-flex xs5 class="ml-3">
                           <v-text-field
                             placeholder="fill your Serial Number"
                             v-model="editedItem.examName"
                             type="text"
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                     <v-flex xs12 sm12>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right">Date:</label>
                         </v-flex>
                         <v-flex xs5 class="ml-3">
                           <v-menu
                             ref="menu1"
                             :close-on-content-click="false"
                             v-model="menu1"
                             :nudge-right="40"
                             :return-value.sync="menu1"
                             lazy
                             transition="scale-transition"
                             offset-y
                             full-width
                             min-width="290px"
                           >
                             <v-text-field
                               slot="activator"
                               v-model="editedItem.date"
                               label="Select Date"
                               append-icon="event"
                               readonly
                             ></v-text-field>
                             <v-date-picker v-model="editedItem.date" @input="menu1 = false"></v-date-picker>
                           </v-menu>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                     <v-flex xs12 sm12>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right">Note:</label>
                         </v-flex>
                         <v-flex xs5 class="ml-3">
                           <v-text-field
                             placeholder="fill your Serial Number"
                             v-model="editedItem.note"
                             type="text"
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs12 sm8 offset-sm2>
                       <v-card-actions>
                         <v-btn round dark @click.native="close">Cancel</v-btn>
                         <v-spacer></v-spacer>
                         <v-btn round dark @click="save">Save</v-btn>
                       </v-card-actions>
                     </v-flex>
                   </v-layout>
                 </v-container>
               </v-form>
             </v-card-text>
           </v-card>
         </v-dialog>
         <!-- ****** PROFILE VIEW PARTICULAR EXAM DATA ******  -->
         <v-dialog v-model="dialog1" max-width="600px">
           <v-card>
             <v-toolbar color="grey lighten-2" flat>
               <v-spacer></v-spacer>
               <v-toolbar-title>
                 <h3>Exam</h3>
               </v-toolbar-title>
               <v-spacer></v-spacer>
               <v-icon @click="close1">close</v-icon>
             </v-toolbar>
             <v-card-text>
               <v-container grid-list-md>
                 <v-layout wrap>
                   <v-flex>
                     <v-layout>
                       <v-flex xs5 sm6>
                         <h5 class="right my-1">
                           <b>Exam Name:</b>
                         </h5>
                       </v-flex>
                       <v-flex sm6 xs8>
                         <h5 class="my-1">{{ editedItem.examName }}</h5>
                       </v-flex>
                     </v-layout>
                     <v-layout>
                       <v-flex xs5 sm6>
                         <h5 class="right my-1">
                           <b>Date:</b>
                         </h5>
                       </v-flex>
                       <v-flex sm6 xs8>
                         <h5 class="my-1">{{ dates(editedItem.date) }}</h5>
                       </v-flex>
                     </v-layout>
                     <v-layout>
                       <v-flex xs5 sm6>
                         <h5 class="right my-1">
                           <b>Note:</b>
                         </h5>
                       </v-flex>
                       <v-flex sm6 xs8>
                         <h5 class="my-1">{{ editedItem.note }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                 </v-layout>
               </v-container>
             </v-card-text>
           </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>
         <!-- ****** EXISTING EXAM TABLE****** -->
         <v-card></v-card>
         <v-data-table
           :headers="headers"
           :items="examData"
           :pagination.sync="pagination"
           :search="search"
         >
           <template slot="items" slot-scope="props">
             <td class="text-xs-center">{{ props.index + 1}}</td>
             <!-- <td id="td" class="text-xs-center">{{ props.item.bookId.name}}</td> -->
             <td id="td" class="text-xs-center">{{ props.item.examName}}</td>
             <td id="td" class="text-xs-center">{{ dates(props.item.date) }}</td>
             <td id="td" class="text-xs-center">{{ props.item.note}}</td>
             <td class="text-xs-center">
               <span>
                 <img
                   style="cursor:pointer; width:25px; height:18px; "
                   class="mr-5"
                   @click="profile(props.item)"
                   src="/static/icon/eye1.png"
                 />
                 <img
                   style="cursor:pointer; width:20px; height:18px; "
                   class="mr-5"
                   @click="editItem(props.item)"
                   src="/static/icon/edit1.png"
                 />
                 <img
                   style="cursor:pointer;width:20px; height:20px; "
                   class="mr-5"
                   @click="deleteExam(props.item)"
                   src="/static/icon/delete1.png"
                 />
               </span>
             </td>
           </template>
           <v-alert
             slot="no-results"
             :value="true"
             color="error"
             icon="warning"
           >Your search for "{{ search }}" found no results.</v-alert>
         </v-data-table>
       </v-tab-item>
       <!-- ****** ADD EXAM ****** -->
       <v-tab-item>
         <v-container>
           <v-snackbar
             :timeout="timeout"
             :top="y === 'top'"
             :right="x === 'right'"
             :vertical="mode === 'vertical'"
             v-model="snackbar"
             :color="color"
           >{{ text }}</v-snackbar>
           <v-flex xs12 sm12 class="my-4">
             <v-card flat>
               <v-form ref="form" v-model="valid" lazy-validation>
                 <v-container fluid>
                   <v-flex xs12>
                     <v-layout>
                       <v-flex xs4 class="pt-4 subheading">
-                        <label class="right">Exam Name:</label>
+                        <label class="right hidden-xs-only">Exam Name:</label>
+                        <label
+                          class="right hidden-sm-only hidden-md-only hidden-lg-only hidden-xl-only"
+                        >ExamName:</label>
                       </v-flex>
-                      <v-flex xs4 class="ml-3">
+                      <v-flex xs8 sm6 md4 class="ml-3">
                         <v-text-field
                           placeholder="fill your Exam Name"
                           :rules="authorRules"
                           v-model="addExam.examName"
                         ></v-text-field>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                   <v-flex xs12>
                     <v-layout>
                       <v-flex xs4 class="pt-4 subheading">
                         <label class="right">Date:</label>
                       </v-flex>
-                      <v-flex xs4 class="ml-3">
+                      <v-flex xs8 sm6 md4 class="ml-3">
                         <v-menu
                           ref="menu2"
                           :close-on-content-click="false"
                           v-model="menu2"
                           :nudge-right="40"
                           :return-value.sync="addExam.date"
                           lazy
                           transition="scale-transition"
                           offset-y
                           full-width
                           min-width="290px"
                         >
                           <v-text-field
                             slot="activator"
                             v-model="addExam.date"
                             label="Select Date"
                             append-icon="event"
                             readonly
                           ></v-text-field>
                           <v-date-picker
                             v-model="addExam.date"
                             @input="$refs.menu2.save(addExam.date)"
                           ></v-date-picker>
                         </v-menu>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                   <v-flex xs12>
                     <v-layout>
                       <v-flex xs4 class="pt-4 subheading">
                         <label class="right">Note:</label>
                       </v-flex>
-                      <v-flex xs4 class="ml-3">
+                      <v-flex xs8 sm6 md4 class="ml-3">
                         <v-text-field
                           placeholder="fill your Note"
                           :rules="noteRules"
                           v-model="addExam.note"
                         ></v-text-field>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                   <v-layout>
                     <v-flex xs12 sm6 offset-sm3>
                       <v-card-actions>
                         <v-btn @click="clear" round dark>clear</v-btn>
-                        <v-spacer></v-spacer>
+                          <v-spacer class="hidden-xs-only"></v-spacer>
                         <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
                       </v-card-actions>
                     </v-flex>
                   </v-layout>
                 </v-container>
               </v-form>
             </v-card>
           </v-flex>
         </v-container>
       </v-tab-item>
     </v-tabs>
     <div class="loader" v-if="showLoader">
       <v-progress-circular indeterminate color="white"></v-progress-circular>
     </div>
   </v-app>
 </template>
 <script>
 import http from "@/Services/http.js";
 import moment from "moment";
 export default {
   data: () => ({
     snackbar: false,
     date: null,
     menu1: false,
     menu2: false,
     color: "",
     y: "top",
     x: "right",
     mode: "",
     timeout: 10000,
     text: "",
     libraryId: "",
     loading: false,
     loadingSearch: false,
     date: null,
     search: "",
     showLoader: false,
     dialog: false,
     dialog1: false,
     valid: true,
     isActive: true,
     newActive: false,
     // addclass: [],
     // addSection: [],
     // AddUsercredentials: {},
     pagination: {
       rowsPerPage: 15
     },
     libraryIDRules: [v => !!v || " Library ID is required"],
     bookRules: [v => !!v || " book Name is required"],
     authorRules: [v => !!v || "Author Name is required"],
     subjectCodeRules: [v => !!v || "Subject Code is required"],
     authorRules: [v => !!v || "Author is required"],
     noteRules: [v => !!v || "Note is required"],
     headers: [
       {
         align: "justify-center",
         text: "No",
         sortable: false,
         value: "No"
       },
       { text: "Exam Name", vaue: "examName", sortable: false, align: "center" },
       {
         text: "Date",
         value: "date",
         sortable: false,
         align: "center"
       },
       {
         text: "Note",
         value: "note",
         sortable: false,
         align: "center"
       },
       { text: "Action", value: "", sortable: false, align: "center" }
     ],
     examData: [],
     addExam: {},
     editedItem: {},
     token: ""
   }),
   methods: {
     dates: function(date) {
       return moment(date).format("MMMM DD, YYYY");
     },
     pickFile() {
       this.$refs.image.click();
     },
     getExamList() {
       this.showLoader = true;
       this.loadingSearch = true;
       http()
         .get("/getExamsList", {
           headers: { Authorization: "Bearer " + this.token }
         })
         .then(response => {
           this.examData = response.data.data;
           this.showLoader = false;
           this.loadingSearch = false;
         })
         .catch(error => {
           // console.log("err====>", err);
           this.showLoader = false;
           this.loadingSearch = false;
           this.snackbar = true;
           this.text = error.response.data.message;
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
           }
         });
     },
     editItem(item) {
       console.log("item", item);
       this.editedIndex = this.examData.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.editedItem.date =
         this.editedItem.date != undefined
           ? (this.editedItem.date = this.editedItem.date.substring(0, 10))
           : (this.editedItem.date = "");
       this.dialog = true;
     },
     profile(item) {
       this.editedIndex = this.examData.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.dialog1 = true;
     },
     deleteExam(item) {
       let Exam = {
         examId: item._id
       };
       http()
         .delete(
           "/deleteExam",
           confirm("Are you sure you want to Delete this?") && {
             params: Exam
           }
         )
         .then(response => {
           this.snackbar = true;
           this.text = "Successfully Delete Exam ";
           this.getExamList();
         })
         .catch(error => {
           // console.log(error);
         });
     },
     activeTab(type) {
       switch (type) {
         case "existing":
           this.newActive = false;
           this.isActive = true;
           break;
         default:
           this.newActive = true;
           this.isActive = false;
           break;
       }
     },
     close() {
       this.dialog = false;
     },
     close1() {
       this.dialog1 = false;
     },
     submit() {
       this.loading = true;
       if (this.$refs.form.validate()) {
         http()
           .post("/createExam", this.addExam)
           .then(response => {
             this.snackbar = true;
             this.text = "New Exam added successfully";
             this.getExamList();
             this.color = "succses";
             this.loading = false;
             this.clear();
           })
           .catch(error => {
             if ((this.snackbar = true)) {
               this.text = error.response.data.message;
               this.color = "red";
             }
           });
       }
     },
     clear() {
       this.$refs.form.reset();
       this.disable = false;
     },
     save() {
       this.editedItem.examId = this.editedItem._id;
       http()
         .put("/updateExam", this.editedItem)
         .then(response => {
           this.snackbar = true;
           this.text = "Successfully Edit Exam";
           this.color = "green";
           this.getExamList();
           this.close();
         })
         .catch(error => {
           this.snackbar = true;
           this.text = error.response.data.message;
           this.color = "red";
         });
     }
   },
   mounted() {
     this.token = this.$store.state.token;
     this.getExamList();
   },
   created() {
     this.$root.$on("app:search", search => {
       this.search = search;
     });
   },
   beforeDestroy() {
     // dont forget to remove the listener
     this.$root.$off("app:search");
   }
 };
 </script>
 <style scoped>
 .active {
   background-color: gray;
   color: white !important;
 }
 .activebtn {
   color: black !important;
 }
 </style>

src/pages/Exam/examSchedule.vue

Diff comments View file @ca81e3c

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

src/pages/Exam/grade.vue

Diff comments View file @ca81e3c

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