viithiisys / School-Management-dashboard

Browse Code »

Commit 7281a47c4917fef34ee8a20fd9ae7458c90a865a

Authored by Shikha Mishra 2020-04-07 10:00:21 -0400

1 parent 8e9ce24f1b

Exists in master and in 3 other branches

show class name and added view method in exam module

Showing 3 changed files with 7 additions and 6 deletions Show diff stats

src/pages/Exam/examAttendence.vue

Diff comments View file @7281a47

1	<template>	1	<template>
2	<v-container fluid class="body-color">	2	<v-container fluid class="body-color">
3	<!-- *** Exam Schedule TABLE**** -->	3	<!-- *** Exam Schedule TABLE**** -->
4	<v-toolbar color="transparent" flat>	4	<v-toolbar color="transparent" flat>
5	<v-btn	5	<v-btn
6	fab	6	fab
7	dark	7	dark
8	class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"	8	class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
9	small	9	small
10	@click="addExamAttendenceDialog = true"	10	@click="addExamAttendenceDialog = true"
11	>	11	>
12	<v-icon dark>add</v-icon>	12	<v-icon dark>add</v-icon>
13	</v-btn>	13	</v-btn>
14	<v-btn	14	<v-btn
15	round	15	round
16	class="open-dialog-button hidden-sm-only hidden-xs-only"	16	class="open-dialog-button hidden-sm-only hidden-xs-only"
17	dark	17	dark
18	@click="addExamAttendenceDialog = true"	18	@click="addExamAttendenceDialog = true"
19	>	19	>
20	<v-icon class="white--text pr-1" size="20">add</v-icon>Add Exam Attendence	20	<v-icon class="white--text pr-1" size="20">add</v-icon>Add Exam Attendence
21	</v-btn>	21	</v-btn>
22	<v-spacer></v-spacer>	22	<v-spacer></v-spacer>
23	<v-flex xs8 sm3 md2 class="mr-3">	23	<v-flex xs8 sm3 md2 class="mr-3">
24	<v-select	24	<v-select
25	v-model="addAttendence.examId"	25	v-model="addAttendence.examId"
26	label="Select Exam"	26	label="Select Exam"
27	:rules="examRules"	27	:rules="examRules"
28	:items="examList"	28	:items="examList"
29	item-text="examName"	29	item-text="examName"
30	item-value="_id"	30	item-value="_id"
31	required	31	required
32	></v-select>	32	></v-select>
33	</v-flex>	33	</v-flex>
34	<v-flex xs8 sm3 md2 class="mr-3">	34	<v-flex xs8 sm3 md2 class="mr-3">
35	<v-select	35	<v-select
36	v-model="addAttendence.classId"	36	v-model="addAttendence.classId"
37	label="Select your class"	37	label="Select your class"
38	type="text"	38	type="text"
39	:items="classList"	39	:items="classList"
40	item-text="classNum"	40	item-text="classNum"
41	item-value="_id"	41	item-value="_id"
42	@change="getSections(addAttendence.classId)"	42	@change="getSections(addAttendence.classId)"
43	required	43	required
44	></v-select>	44	></v-select>
45	</v-flex>	45	</v-flex>
46	<v-flex xs8 sm3 md2 class="mr-3">	46	<v-flex xs8 sm3 md2 class="mr-3">
47	<v-select	47	<v-select
48	v-model="addAttendence.sectionId"	48	v-model="addAttendence.sectionId"
49	label="Select your section"	49	label="Select your section"
50	type="text"	50	type="text"
51	:items="addSection"	51	:items="addSection"
52	item-text="name"	52	item-text="name"
53	item-value="_id"	53	item-value="_id"
54	@change="getClassSubject(addAttendence.classId)"	54	@change="getClassSubject(addAttendence.classId)"
55	required	55	required
56	></v-select>	56	></v-select>
57	</v-flex>	57	</v-flex>
58	<v-flex xs8 sm3 md2 class="mr-3">	58	<v-flex xs8 sm3 md2 class="mr-3">
59	<v-select	59	<v-select
60	v-model="addAttendence.subjectId"	60	v-model="addAttendence.subjectId"
61	label="Select Subject"	61	label="Select Subject"
62	:rules="subjectRules"	62	:rules="subjectRules"
63	:items="subjectList.subjects"	63	:items="subjectList.subjects"
64	item-text="subjectName"	64	item-text="subjectName"
65	item-value="_id"	65	item-value="_id"
66	@change="getExamAttendenceList()"	66	@change="getExamAttendenceList()"
67	required	67	required
68	></v-select>	68	></v-select>
69	</v-flex>	69	</v-flex>
70		70
71	<v-card-title class="body-1" v-show="show">	71	<v-card-title class="body-1" v-show="show">
72	<v-btn icon large flat @click="displaySearch">	72	<v-btn icon large flat @click="displaySearch">
73	<v-avatar size="27">	73	<v-avatar size="27">
74	<img src="/static/icon/search.png" alt="icon" />	74	<img src="/static/icon/search.png" alt="icon" />
75	</v-avatar>	75	</v-avatar>
76	</v-btn>	76	</v-btn>
77	</v-card-title>	77	</v-card-title>
78	<v-flex xs8 sm8 md3 lg2 v-show="showSearch">	78	<v-flex xs8 sm8 md3 lg2 v-show="showSearch">
79	<v-layout>	79	<v-layout>
80	<v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>	80	<v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>
81	<v-icon @click="closeSearch" color="error">close</v-icon>	81	<v-icon @click="closeSearch" color="error">close</v-icon>
82	</v-layout>	82	</v-layout>
83	</v-flex>	83	</v-flex>
84	</v-toolbar>	84	</v-toolbar>
85		85
86	<v-data-table	86	<v-data-table
87	:headers="headers"	87	:headers="headers"
88	:items="examData.students"	88	:items="examData.students"
89	:pagination.sync="pagination"	89	:pagination.sync="pagination"
90	:search="search"	90	:search="search"
91	>	91	>
92	<template slot="items" slot-scope="props">	92	<template slot="items" slot-scope="props">
93	<tr class="tr">	93	<tr class="tr">
94	<td class="td td-row">{{ props.index + 1}}</td>	94	<td class="td td-row">{{ props.index + 1}}</td>
95	<td class="text-xs-center td td-row">	95	<td class="text-xs-center td td-row">
96	<v-avatar size="40">	96	<v-avatar size="40">
97	<img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />	97	<img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
98	<img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />	98	<img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
99	</v-avatar>	99	</v-avatar>
100	</td>	100	</td>
101	<td class="td td-row text-xs-center">{{ props.item.studentId.name}}</td>	101	<td class="td td-row text-xs-center">{{ props.item.studentId.name}}</td>
102	<td class="td td-row text-xs-center">{{ props.item.studentId.rollNo}}</td>	102	<td class="td td-row text-xs-center">{{ props.item.studentId.rollNo}}</td>
103	<td class="td td-row text-xs-center">{{ props.item.studentId.email }}</td>	103	<td class="td td-row text-xs-center">{{ props.item.studentId.email }}</td>
104	<td class="td td-row text-xs-center">	104	<td class="td td-row text-xs-center">
105	<v-radio-group v-model="isPresent" row readonly>	105	<v-radio-group v-model="isPresent" row readonly>
106	<v-radio	106	<v-radio
107	:value="props.item.isPresent"	107	:value="props.item.isPresent"
108	></v-radio>	108	></v-radio>
109	</v-radio-group>	109	</v-radio-group>
110	</td>	110	</td>
111	</tr>	111	</tr>
112	</template>	112	</template>
113	<v-alert	113	<v-alert
114	slot="no-results"	114	slot="no-results"
115	:value="true"	115	:value="true"
116	color="error"	116	color="error"
117	icon="warning"	117	icon="warning"
118	>Your search for "{{ search }}" found no results.</v-alert>	118	>Your search for "{{ search }}" found no results.</v-alert>
119	</v-data-table>	119	</v-data-table>
120		120
121	<!-- **** ADD Exam Attendence **** -->	121	<!-- **** ADD Exam Attendence **** -->
122	<v-dialog v-model="addExamAttendenceDialog" max-width="800px">	122	<v-dialog v-model="addExamAttendenceDialog" max-width="800px">
123	<v-card flat class="text-xs-center pa-2">	123	<v-card flat class="text-xs-center pa-2">
124	<v-layout>	124	<v-layout>
125	<v-flex xs12>	125	<v-flex xs12>
126	<label class="title text-xs-center">Add Exam Attendence</label>	126	<label class="title text-xs-center">Add Exam Attendence</label>
127	<v-icon size="24" class="right" @click="addExamAttendenceDialog = false">cancel</v-icon>	127	<v-icon size="24" class="right" @click="addExamAttendenceDialog = false">cancel</v-icon>
128	</v-flex>	128	</v-flex>
129	</v-layout>	129	</v-layout>
130	<v-form ref="form" v-model="valid" lazy-validation class="text-xs-center">	130	<v-form ref="form" v-model="valid" lazy-validation class="text-xs-center">
131	<v-container fluid>	131	<v-container fluid>
132	<v-flex xs12>	132	<v-flex xs12>
133	<v-layout>	133	<v-layout>
134	<v-flex xs5 class="pt-4 subheading">	134	<v-flex xs5 class="pt-4 subheading">
135	<label class="right">Exam Name:</label>	135	<label class="right">Exam Name:</label>
136	</v-flex>	136	</v-flex>
137	<v-flex xs7 sm7 md6 class="ml-3">	137	<v-flex xs7 sm7 md6 class="ml-3">
138	<v-select	138	<v-select
139	label="Select Exam"	139	label="Select Exam"
140	:rules="examRules"	140	:rules="examRules"
141	:items="examList"	141	:items="examList"
142	v-model="addAttendence.examId"	142	v-model="addAttendence.examId"
143	item-text="examName"	143	item-text="examName"
144	item-value="_id"	144	item-value="_id"
145	></v-select>	145	></v-select>
146	</v-flex>	146	</v-flex>
147	</v-layout>	147	</v-layout>
148	</v-flex>	148	</v-flex>
149	<v-flex xs12>	149	<v-flex xs12>
150	<v-layout>	150	<v-layout>
151	<v-flex xs5 class="pt-4 subheading">	151	<v-flex xs5 class="pt-4 subheading">
152	<label class="right">Class:</label>	152	<label class="right">Class:</label>
153	</v-flex>	153	</v-flex>
154	<v-flex xs7 sm7 md6 class="ml-3">	154	<v-flex xs7 sm7 md6 class="ml-3">
155	<v-select	155	<v-select
156	v-model="addAttendence.classId"	156	v-model="addAttendence.classId"
157	label="Select Class"	157	label="Select Class"
158	type="text"	158	type="text"
159	:items="classList"	159	:items="classList"
160	item-text="classNum"	160	item-text="classNum"
161	item-value="_id"	161	item-value="_id"
162	:rules="classRules"	162	:rules="classRules"
163	@change="getSections(addAttendence.classId)"	163	@change="getSections(addAttendence.classId)"
164	required	164	required
165	></v-select>	165	></v-select>
166	</v-flex>	166	</v-flex>
167	</v-layout>	167	</v-layout>
168	</v-flex>	168	</v-flex>
169	<v-flex xs12>	169	<v-flex xs12>
170	<v-layout>	170	<v-layout>
171	<v-flex xs5 class="pt-4 subheading">	171	<v-flex xs5 class="pt-4 subheading">
172	<label class="right">Section:</label>	172	<label class="right">Section:</label>
173	</v-flex>	173	</v-flex>
174	<v-flex xs7 sm7 md6 class="ml-3">	174	<v-flex xs7 sm7 md6 class="ml-3">
175	<v-select	175	<v-select
176	:items="addSection"	176	:items="addSection"
177	label="Select Section"	177	label="Select Section"
178	v-model="addAttendence.sectionId"	178	v-model="addAttendence.sectionId"
179	item-text="name"	179	item-text="name"
180	item-value="_id"	180	item-value="_id"
181	name="Select Section"	181	name="Select Section"
182	:rules="sectionRules"	182	:rules="sectionRules"
183	@change="getClassSubject(addAttendence.classId)"	183	@change="getClassSubject(addAttendence.classId)"
184	required	184	required
185	></v-select>	185	></v-select>
186	</v-flex>	186	</v-flex>
187	</v-layout>	187	</v-layout>
188	</v-flex>	188	</v-flex>
189	<v-flex xs12>	189	<v-flex xs12>
190	<v-layout>	190	<v-layout>
191	<v-flex xs5 class="pt-4 subheading">	191	<v-flex xs5 class="pt-4 subheading">
192	<label class="right">Subject Name:</label>	192	<label class="right">Subject Name:</label>
193	</v-flex>	193	</v-flex>
194	<v-flex xs7 sm7 md6 class="ml-3">	194	<v-flex xs7 sm7 md6 class="ml-3">
195	<v-select	195	<v-select
196	:items="subjectList.subjects"	196	:items="subjectList.subjects"
197	label="Select Subject"	197	label="Select Subject"
198	item-text="subjectName"	198	item-text="subjectName"
199	v-model="addAttendence.subjectId"	199	v-model="addAttendence.subjectId"
200	item-value="_id"	200	item-value="_id"
201	name="Select Subject"	201	name="Select Subject"
202	:rules="subjectRules"	202	:rules="subjectRules"
203	required	203	required
204	></v-select>	204	></v-select>
205	</v-flex>	205	</v-flex>
206	</v-layout>	206	</v-layout>
207	</v-flex>	207	</v-flex>
208	<v-layout>	208	<v-layout>
209	<v-flex xs12>	209	<v-flex xs12>
210	<v-card-actions>	210	<v-card-actions>
211	<v-spacer class="hidden-xs-only"></v-spacer>	211	<v-spacer class="hidden-xs-only"></v-spacer>
212	<v-btn	212	<v-btn
213	round	213	round
214	dark	214	dark
215	@click="showTable"	215	@click="showTable"
216	:loading="loading"	216	:loading="loading"
217	class="add-button"	217	class="add-button"
218	>Attendence</v-btn>	218	>Attendence</v-btn>
219	</v-card-actions>	219	</v-card-actions>
220	</v-flex>	220	</v-flex>
221	</v-layout>	221	</v-layout>
222	</v-container>	222	</v-container>
223	</v-form>	223	</v-form>
224	<v-flex xs12 v-show="attendeceTable" class>	224	<v-flex xs12 v-show="attendeceTable" class>
225	<v-data-table	225	<v-data-table
226	:headers="headers"	226	:headers="headers"
227	:items="studentsData"	227	:items="studentsData"
228	:pagination.sync="pagination"	228	:pagination.sync="pagination"
229	:search="search"	229	:search="search"
230	>	230	>
231	<template slot="items" slot-scope="props">	231	<template slot="items" slot-scope="props">
232	<tr class="tr">	232	<tr class="tr">
233	<td class="td td-row">{{ props.index + 1}}</td>	233	<td class="td td-row">{{ props.index + 1}}</td>
234	<td class="text-xs-center td td-row">	234	<td class="text-xs-center td td-row">
235	<v-avatar size="40">	235	<v-avatar size="40">
236	<img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />	236	<img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
237	<img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />	237	<img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
238	</v-avatar>	238	</v-avatar>
239	</td>	239	</td>
240	<td class="td td-row text-xs-center">{{ props.item.name}}</td>	240	<td class="td td-row text-xs-center">{{ props.item.name}}</td>
241	<td class="td td-row text-xs-center">{{ props.item.rollNo}}</td>	241	<td class="td td-row text-xs-center">{{ props.item.rollNo}}</td>
242	<td class="td td-row text-xs-center">{{ props.item.email }}</td>	242	<td class="td td-row text-xs-center">{{ props.item.email }}</td>
243	<td class="td td-row text-xs-center">	243	<td class="td td-row text-xs-center">
244	<v-radio-group v-model="props.item.attendence" :mandatory="false" row>	244	<v-radio-group v-model="props.item.attendence" :mandatory="false" row>
245	<v-radio	245	<v-radio
246	v-for="attendences in attendenceType"	246	v-for="attendences in attendenceType"
247	:key="attendences.value"	247	:key="attendences.value"
248	:label="`${attendences.label}`"	248	:label="`${attendences.label}`"
249	:value="attendences.value"	249	:value="attendences.value"
250	></v-radio>	250	></v-radio>
251	</v-radio-group>	251	</v-radio-group>
252	</td>	252	</td>
253	</tr>	253	</tr>
254	</template>	254	</template>
255	<v-alert	255	<v-alert
256	slot="no-results"	256	slot="no-results"
257	:value="true"	257	:value="true"
258	color="error"	258	color="error"
259	icon="warning"	259	icon="warning"
260	>Your search for "{{ search }}" found no results.</v-alert>	260	>Your search for "{{ search }}" found no results.</v-alert>
261	</v-data-table>	261	</v-data-table>
262	<v-flex xs12 sm12>	262	<v-flex xs12 sm12>
263	<v-card-actions>	263	<v-card-actions>
264	<v-spacer></v-spacer>	264	<v-spacer></v-spacer>
265	<v-btn @click="submit()" round dark :loading="loading" class="add-button">Submit</v-btn>	265	<v-btn @click="submit()" round dark :loading="loading" class="add-button">Submit</v-btn>
266	</v-card-actions>	266	</v-card-actions>
267	</v-flex>	267	</v-flex>
268	</v-flex>	268	</v-flex>
269	</v-card>	269	</v-card>
270	</v-dialog>	270	</v-dialog>
271	<v-snackbar	271	<v-snackbar
272	:timeout="timeout"	272	:timeout="timeout"
273	:top="y === 'top'"	273	:top="y === 'top'"
274	:right="x === 'right'"	274	:right="x === 'right'"
275	:vertical="mode === 'vertical'"	275	:vertical="mode === 'vertical'"
276	v-model="snackbar"	276	v-model="snackbar"
277	:color="color"	277	:color="color"
278	>{{ text }}</v-snackbar>	278	>{{ text }}</v-snackbar>
279	<div class="loader" v-if="showLoader">	279	<div class="loader" v-if="showLoader">
280	<v-progress-circular indeterminate color="white"></v-progress-circular>	280	<v-progress-circular indeterminate color="white"></v-progress-circular>
281	</div>	281	</div>
282	</v-container>	282	</v-container>
283	</template>	283	</template>
284		284
285	<script>	285	<script>
286	import http from "@/Services/http.js";	286	import http from "@/Services/http.js";
287	import Util from "@/util";	287	import Util from "@/util";
288	import moment from "moment";	288	import moment from "moment";
289		289
290	export default {	290	export default {
291	data: () => ({	291	data: () => ({
292	snackbar: false,	292	snackbar: false,
293	editDate: false,	293	editDate: false,
294	menu1: false,	294	menu1: false,
295	menuB: false,	295	menuB: false,
296	menu2: false,	296	menu2: false,
297	menuEdit: false,	297	menuEdit: false,
298	timeToEdit: false,	298	timeToEdit: false,
299	show: true,	299	show: true,
300	showSearch: false,	300	showSearch: false,
301	addExamAttendenceDialog: false,	301	addExamAttendenceDialog: false,
302	color: "",	302	color: "",
303	y: "top",	303	y: "top",
304	x: "right",	304	x: "right",
305	mode: "",	305	mode: "",
306	timeout: 10000,	306	timeout: 10000,
307	text: "",	307	text: "",
308	loading: false,	308	loading: false,
309	search: "",	309	search: "",
310	showLoader: false,	310	showLoader: false,
311	valid: true,	311	valid: true,
312	role: "",	312	role: "",
313	pagination: {	313	pagination: {
314	rowsPerPage: 10	314	rowsPerPage: 10
315	},	315	},
316	attendeceTable: false,	316	attendeceTable: false,
317	isPresent: true,	317	isPresent: true,
318		318
319	examRules: [v => !!v \|\| "Exam Name is required"],	319	examRules: [v => !!v \|\| "Exam Name is required"],
320	classRules: [v => !!v \|\| "Class Name is required"],	320	classRules: [v => !!v \|\| "Class Name is required"],
321	sectionRules: [v => !!v \|\| "section is required"],	321	sectionRules: [v => !!v \|\| "section is required"],
322	subjectRules: [v => !!v \|\| "Subject is required"],	322	subjectRules: [v => !!v \|\| "Subject is required"],
323	timeInRules: [v => !!v \|\| "Time In is required"],	323	timeInRules: [v => !!v \|\| "Time In is required"],
324	timeOutRules: [v => !!v \|\| "time Out s is required"],	324	timeOutRules: [v => !!v \|\| "time Out s is required"],
325	roomRules: [v => !!v \|\| "Room is required"],	325	roomRules: [v => !!v \|\| "Room is required"],
326	examScheduleDateRules: [v => !!v \|\| "Date is required"],	326	examScheduleDateRules: [v => !!v \|\| "Date is required"],
327	studentsData: [],	327	studentsData: [],
328	examData: [],	328	examData: [],
329	students: [],	329	students: [],
330		330
331	headers: [	331	headers: [
332	{	332	{
333	align: "",	333	align: "",
334	text: "No",	334	text: "No",
335	sortable: false,	335	sortable: false,
336	value: "No"	336	value: "No"
337	},	337	},
338	{	338	{
339	text: "Profile Pic",	339	text: "Profile Pic",
340	value: "profilprofilePicUrlePicUrl",	340	value: "profilprofilePicUrlePicUrl",
341	sortable: false,	341	sortable: false,
342	align: "center"	342	align: "center"
343	},	343	},
344	{	344	{
345	text: "Name",	345	text: "Name",
346	value: "name",	346	value: "name",
347	sortable: false,	347	sortable: false,
348	align: "center"	348	align: "center"
349	},	349	},
350	{	350	{
351	text: "Roll No",	351	text: "Roll No",
352	value: "rollNo",	352	value: "rollNo",
353	sortable: false,	353	sortable: false,
354	align: "center"	354	align: "center"
355	},	355	},
356	{	356	{
357	text: "Email",	357	text: "Email",
358	value: "email",	358	value: "email",
359	sortable: false,	359	sortable: false,
360	align: "center"	360	align: "center"
361	},	361	},
362	{	362	{
363	text: "Action",	363	text: "Action",
364	value: "",	364	value: "",
365	sortable: false,	365	sortable: false,
366	align: "center"	366	align: "center"
367	}	367	}
368	],	368	],
369	attendenceType: [	369	attendenceType: [
370	{	370	{
371	label: "",	371	label: "",
372	value: true	372	value: true
373	}	373	}
374	],	374	],
375	classList: [],	375	classList: [],
376	addSection: [],	376	addSection: [],
377	examList: [],	377	examList: [],
378	subjectList: [],	378	subjectList: [],
379	subjects: [],	379	subjects: [],
380	addAttendence: {},	380	addAttendence: {},
381	editedItem: {	381	editedItem: {
382	sectionId: {	382	sectionId: {
383	name: ""	383	name: ""
384	}	384	}
385	},	385	},
386	getScheduleData: {},	386	getScheduleData: {},
387	ScheduleData: [],	387	ScheduleData: [],
388	token: ""	388	token: ""
389	}),	389	}),
390	methods: {	390	methods: {
391	pickFile() {	391	pickFile() {
392	this.$refs.image.click();	392	this.$refs.image.click();
393	},	393	},
394	getSchedulesList() {	394	getSchedulesList() {
395	this.showLoader = true;	395	this.showLoader = true;
396	http()	396	http()
397	.get("/getSchedulesList", {	397	.get("/getSchedulesList", {
398	params: { classId: this.getScheduleData.classId },	398	params: { classId: this.getScheduleData.classId },
399	headers: { Authorization: "Bearer " + this.token }	399	headers: { Authorization: "Bearer " + this.token }
400	})	400	})
401	.then(response => {	401	.then(response => {
402	this.ScheduleData = response.data.data;	402	this.ScheduleData = response.data.data;
403	// console.log("this.ScheduleData", this.ScheduleData);	403	// console.log("this.ScheduleData", this.ScheduleData);
404	this.showLoader = false;	404	this.showLoader = false;
405	})	405	})
406	.catch(error => {	406	.catch(error => {
407	// console.log("err====>", err);	407	// console.log("err====>", err);
408	this.showLoader = false;	408	this.showLoader = false;
409	this.loadingSearch = false;	409	this.loadingSearch = false;
410	this.snackbar = true;	410	this.snackbar = true;
411	this.text = error.response.data.message;	411	this.text = error.response.data.message;
412	if (error.response.status === 401) {	412	if (error.response.status === 401) {
413	this.$router.replace({ path: "/" });	413	this.$router.replace({ path: "/" });
414	this.$store.dispatch("setToken", null);	414	this.$store.dispatch("setToken", null);
415	this.$store.dispatch("Id", null);	415	this.$store.dispatch("Id", null);
416	}	416	}
417	});	417	});
418	},	418	},
419	close() {	419	close() {
420	this.dialog = false;	420	this.dialog = false;
421	},	421	},
422	submit() {	422	submit() {
423	var examAttendence = {	423	var examAttendence = {
424	examId: this.addAttendence.examId,	424	examId: this.addAttendence.examId,
425	classId: this.addAttendence.classId,	425	classId: this.addAttendence.classId,
426	sectionId: this.addAttendence.sectionId,	426	sectionId: this.addAttendence.sectionId,
427	subjectId: this.addAttendence.subjectId,	427	subjectId: this.addAttendence.subjectId,
428	students: []	428	students: []
429	};	429	};
430	for (var j = 0; j < this.studentsData.length; j++) {	430	for (var j = 0; j < this.studentsData.length; j++) {
431	console.log("studentdata", this.studentsData);	431	console.log("studentdata", this.studentsData);
432	examAttendence.students.push({	432	examAttendence.students.push({
433	studentId: this.studentsData[j]._id,	433	studentId: this.studentsData[j]._id,
434	isPresent: this.studentsData[j].attendence	434	isPresent: this.studentsData[j].attendence
435	});	435	});
436	}	436	}
437	console.log("attendence", examAttendence);	437	console.log("attendence", examAttendence);
438	if (this.$refs.form.validate()) {	438	if (this.$refs.form.validate()) {
439	http()	439	http()
440	.post("/createExamAttendance", examAttendence)	440	.post("/createExamAttendance", examAttendence)
441	.then(response => {	441	.then(response => {
442	this.snackbar = true;	442	this.snackbar = true;
443	this.color = "success";	443	this.color = "success";
444	this.text = "Successfully created exam attendence";	444	this.text = "Successfully created exam attendence";
445	this.addExamAttendenceDialog = false;	445	this.addExamAttendenceDialog = false;
446	this.getExamAttendenceList();	446	// this.getExamAttendenceList();
447	})	447	})
448	.catch(error => {	448	.catch(error => {
449	this.snackbar = true;	449	this.snackbar = true;
450	this.text = error.response.data.message;	450	this.text = error.response.data.message;
451	});	451	});
452	}	452	}
453	},	453	},
454	clear() {	454	clear() {
455	this.$refs.form.reset();	455	this.$refs.form.reset();
456	this.disable = false;	456	this.disable = false;
457	this.loading = false;	457	this.loading = false;
458	},	458	},
459	getClass() {	459	getClass() {
460	http()	460	http()
461	.get("/getClassesList", {	461	.get("/getClassesList", {
462	headers: { Authorization: "Bearer " + this.token }	462	headers: { Authorization: "Bearer " + this.token }
463	})	463	})
464	.then(response => {	464	.then(response => {
465	this.classList = response.data.data;	465	this.classList = response.data.data;
466	})	466	})
467	.catch(err => {	467	.catch(err => {
468	// console.log("err====>", err);	468	// console.log("err====>", err);
469	});	469	});
470	},	470	},
471	getSections(_id) {	471	getSections(_id) {
472	for (let i = 0; i < this.classList.length; i++) {	472	for (let i = 0; i < this.classList.length; i++) {
473	if (_id == this.classList[i]._id) {	473	if (_id == this.classList[i]._id) {
474	// this.subjects = this.classList[i].subjects;	474	// this.subjects = this.classList[i].subjects;
475	}	475	}
476	}	476	}
477	http()	477	http()
478	.get(	478	.get(
479	"/getSectionsList",	479	"/getSectionsList",
480	{ params: { classId: _id } },	480	{ params: { classId: _id } },
481	{	481	{
482	headers: { Authorization: "Bearer " + this.token }	482	headers: { Authorization: "Bearer " + this.token }
483	}	483	}
484	)	484	)
485	.then(response => {	485	.then(response => {
486	this.addSection = response.data.data;	486	this.addSection = response.data.data;
487	})	487	})
488	.catch(err => {});	488	.catch(err => {});
489	},	489	},
490	getClassSubject(_id) {	490	getClassSubject(_id) {
491	this.showLoader = true;	491	this.showLoader = true;
492	// this.classId = this.classId;	492	// this.classId = this.classId;
493	http()	493	http()
494	.get(	494	.get(
495	"/getParticularClass",	495	"/getParticularClass",
496	{ params: { classId: _id } },	496	{ params: { classId: _id } },
497	{	497	{
498	headers: { Authorization: "Bearer " + this.token }	498	headers: { Authorization: "Bearer " + this.token }
499	}	499	}
500	)	500	)
501	.then(response => {	501	.then(response => {
502	this.subjectList = response.data.data;	502	this.subjectList = response.data.data;
503	this.showLoader = false;	503	this.showLoader = false;
504	})	504	})
505	.catch(err => {	505	.catch(err => {
506	this.showLoader = false;	506	this.showLoader = false;
507	});	507	});
508	},	508	},
509	getExamList() {	509	getExamList() {
510	this.showLoader = true;	510	this.showLoader = true;
511	this.loadingSearch = true;	511	this.loadingSearch = true;
512	http()	512	http()
513	.get("/getExamsList", {	513	.get("/getExamsList", {
514	headers: { Authorization: "Bearer " + this.token }	514	headers: { Authorization: "Bearer " + this.token }
515	})	515	})
516	.then(response => {	516	.then(response => {
517	this.examList = response.data.data;	517	this.examList = response.data.data;
518	this.showLoader = false;	518	this.showLoader = false;
519	this.loadingSearch = false;	519	this.loadingSearch = false;
520	})	520	})
521	.catch(error => {	521	.catch(error => {
522	this.showLoader = false;	522	this.showLoader = false;
523	this.loadingSearch = false;	523	this.loadingSearch = false;
524	this.snackbar = true;	524	this.snackbar = true;
525	this.text = error.response.data.message;	525	this.text = error.response.data.message;
526	if (error.response.status === 401) {	526	if (error.response.status === 401) {
527	this.$router.replace({ path: "/" });	527	this.$router.replace({ path: "/" });
528	this.$store.dispatch("setToken", null);	528	this.$store.dispatch("setToken", null);
529	this.$store.dispatch("Id", null);	529	this.$store.dispatch("Id", null);
530	}	530	}
531	});	531	});
532	},	532	},
533	showTable() {	533	showTable() {
534	this.attendeceTable = true;	534	this.attendeceTable = true;
535	this.getStudentList();	535	this.getStudentList();
536	},	536	},
537	getStudentList() {	537	getStudentList() {
538	this.showLoader = true;	538	this.showLoader = true;
539	http()	539	http()
540	.get("/getStudentWithClass", {	540	.get("/getStudentWithClass", {
541	params: {	541	params: {
542	classId: this.addAttendence.classId,	542	classId: this.addAttendence.classId,
543	sectionId: this.addAttendence.sectionId	543	sectionId: this.addAttendence.sectionId
544	}	544	}
545	})	545	})
546	.then(response => {	546	.then(response => {
547	this.studentsData = response.data.data;	547	this.studentsData = response.data.data;
548	this.showLoader = false;	548	this.showLoader = false;
549	// this.addExamAttendenceDialog = false;	549	// this.addExamAttendenceDialog = false;
550	var attendence = "";	550	var attendence = "";
551	for (let i = 0; i < this.studentsData.length; i++) {	551	for (let i = 0; i < this.studentsData.length; i++) {
552	this.studentsData[i].attendence = false;	552	this.studentsData[i].attendence = false;
553	}	553	}
554	})	554	})
555	.catch(err => {	555	.catch(err => {
556	console.log("err====>", err);	556	console.log("err====>", err);
557	this.showLoader = false;	557	this.showLoader = false;
558	});	558	});
559	},	559	},
560	getExamAttendenceList() {	560	getExamAttendenceList() {
561	this.showLoader = true;	561	this.showLoader = true;
562	http()	562	http()
563	.get("/getExamAttendenceList", {	563	.get("/getExamAttendenceList", {
564	params: {	564	params: {
565	examId: this.addAttendence.examId,	565	examId: this.addAttendence.examId,
566	classId: this.addAttendence.classId,	566	classId: this.addAttendence.classId,
567	sectionId: this.addAttendence.sectionId,	567	sectionId: this.addAttendence.sectionId,
568	subjectId: this.addAttendence.subjectId	568	subjectId: this.addAttendence.subjectId
569	}	569	}
570	})	570	})
571	.then(response => {	571	.then(response => {
572	this.examData = response.data.data[0];	572	this.examData = response.data.data[0];
573	this.showLoader = false;	573	this.showLoader = false;
574	})	574	})
575	.catch(error => {	575	.catch(error => {
576	console.log("error", error);	576	console.log("error", error);
577	this.showLoader = false;	577	this.showLoader = false;
578	});	578	});
579	},	579	},
580	displaySearch() {	580	displaySearch() {
581	(this.show = false), (this.showSearch = true);	581	(this.show = false), (this.showSearch = true);
582	},	582	},
583	closeSearch() {	583	closeSearch() {
584	this.showSearch = false;	584	this.showSearch = false;
585	this.show = true;	585	this.show = true;
586	this.search = "";	586	this.search = "";
587	}	587	}
588	},	588	},
589	mounted() {	589	mounted() {
590	this.token = this.$store.state.token;	590	this.token = this.$store.state.token;
591	this.getClass();	591	this.getClass();
592	this.getExamList();	592	this.getExamList();
593	this.role = this.$store.state.role;	593	this.role = this.$store.state.role;
594	}	594	}
595	};	595	};
596	</script>	596	</script>

src/pages/Exam/examSchedule.vue

Diff comments View file @7281a47

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

src/pages/Library/eBook.vue

Diff comments View file @7281a47

 <template>
   <v-container fluid class="body-color">
     <!-- ****** EDITS EBOOK DETAILS ****** -->
     <v-dialog v-model="editEbookDialog" max-width="600px">
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit E-Book</label>
             <v-icon size="24" class="right" @click="editEbookDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-card-text>
           <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4">
             <input
               type="file"
               style="display: none"
               ref="image"
               accept="image/*"
               multiple
               @change="onImagePicked"
             />
             <v-layout justify-center>
               <v-flex v-if="files != ''">
                 <img :src="files" height="200" width="160;" />
               </v-flex>
             </v-layout>
             <img
               v-if="editedItem.coverPhotoUrl && files == '' "
               :src="editedItem.coverPhotoUrl"
               height="200"
               width="160"
               alt="eBooks"
               class="pa-2"
             />
             <v-layout justify-center>
               <v-flex
                 xs3
                 v-for="Image in editedItem.newsImageUrl"
                 :key="Image._id"
                 class="profile-image-wrapper"
               >
                 <v-icon
                   class="red edit-profile-icon"
                   dark
                   @click="deleteImage(Image._id,editedItem._id)"
                 >close</v-icon>
               </v-flex>
               <v-flex v-for="(file, index) in files" :key="index">
                 <img :src="file" height="160" width="160" class="pa-2" />
               </v-flex>
             </v-layout>
             <img
               src="/static/icon/user.png"
               v-if="editedItem.coverPhotoUrl == ''"
               height="160"
               width="160"
               alt="Books"
             />
           </v-flex>
           <v-container grid-list-md>
             <v-flex xs12 sm6>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right hidden-xs-only hidden-sm-only">Name :</label>
                   <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name :</label>
                 </v-flex>
                 <v-flex xs8 class="ml-3">
                   <v-text-field
                     v-model="editedItem.name"
                     placeholder="fill your full Name"
                     name="name"
                     type="text"
                     required
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12 sm6>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right hidden-xs-only hidden-sm-only">Author :</label>
                   <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Author :</label>
                 </v-flex>
                 <v-flex xs8 class="ml-3">
                   <v-text-field
                     v-model="editedItem.author"
                     placeholder="fill your full author"
                     name="name"
                     type="text"
                     required
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12 sm6>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right hidden-xs-only hidden-sm-only">Class :</label>
                   <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class :</label>
                 </v-flex>
                 <v-flex xs8 class="ml-3">
                   <v-text-field
-                    v-model="editedItem.classId"
+                    v-model="editedItem.classId.classNum"
                     placeholder="fill your full class"
                     name="classNum"
                     type="_id"
                     required
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
           </v-container>
         </v-card-text>
       </v-card>
     </v-dialog>
     <!-- ****** PROFILE VIEW ALL NEWS DEATILS ******  -->
     <v-dialog v-model="viewEbookDialog" max-width="800px" scrollable>
       <v-card flat class="card-style pa-3" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View E-book Details</label>
             <v-icon size="24" class="right" @click="viewEbookDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-layout>
           <v-flex align-center justify-center layout text-xs-center class="mt-3">
             <v-avatar size="100px">
               <img src="/static/icon/user.png" v-if="!editedItem.fileUrl" />
               <img :src="editedItem.fileUrl" v-else-if="editedItem.fileUrl" />
             </v-avatar>
           </v-flex>
         </v-layout>
         <v-container grid-list-md>
           <v-layout wrap>
             <v-flex xs12 sm5>
               <v-layout>
                 <v-flex xs6 sm6>
                   <h5 class="right my-1">
                     <b>Name:</b>
                   </h5>
                 </v-flex>
                 <v-flex sm6 xs6>
                   <h5 class="my-1 left">{{ editedItem.name }}</h5>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12 sm7>
               <v-layout>
                 <v-flex xs6 sm4>
                   <h5 class="right my-1">
                     <b>Author:</b>
                   </h5>
                 </v-flex>
                 <v-flex sm8 xs6>
                   <h5 class="my-1 left">{{ editedItem.author }}</h5>
                 </v-flex>
               </v-layout>
             </v-flex>
           </v-layout>
           <v-layout wrap>
             <v-flex xs12 sm5>
               <v-layout>
                 <v-flex xs6 sm6>
                   <h5 class="right my-1">
                     <b>Class:</b>
                   </h5>
                 </v-flex>
                 <v-flex sm6 xs6>
-                  <h5 class="my-1 left">{{ editedItem.classId }}</h5>
+                  <h5 class="my-1 left">{{ editedItem.classId .classNum}}</h5>
                 </v-flex>
               </v-layout>
             </v-flex>
           </v-layout>
         </v-container>
       </v-card>
     </v-dialog>
     <!-- ****** EXISTING-USERS NEWS TABLE ****** -->
     <v-toolbar color="transparent" flat>
       <v-btn
         fab
         dark
         class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
         small
         @click="addEBookDialog = true"
       >
         <v-icon dark>add</v-icon>
       </v-btn>
       <v-btn
         round
         class="open-dialog-button hidden-sm-only hidden-xs-only"
         dark
         @click="addEBookDialog = true"
       >
         <v-icon class="white--text pr-1" size="20">add</v-icon>Add E-Book
       </v-btn>
       <v-spacer></v-spacer>
       <v-card-title class="body-1" v-show="show">
         <v-btn icon large flat @click="displaySearch">
           <v-avatar size="27">
             <img src="/static/icon/search.png" alt="icon" />
           </v-avatar>
         </v-btn>
       </v-card-title>
       <v-flex xs8 sm8 md3 lg2 v-show="showSearch">
         <v-layout>
           <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>
           <v-icon @click="closeSearch" color="error">close</v-icon>
         </v-layout>
       </v-flex>
     </v-toolbar>
     <v-data-table
       :headers="headers"
       :items="eBookData"
       :pagination.sync="pagination"
       :search="search"
     >
       <template slot="items" slot-scope="props">
         <tr class="tr">
           <td class="td td-row">{{ props.index + 1}}</td>
           <td class="td td-row text-xs-center">
             <img :src="props.item.coverPhotoUrl" alt="newsImage" width="100" height="70" />
           </td>
           <td class="td td-row text-xs-center">{{ props.item.name}}</td>
           <td class="td td-row text-xs-center">{{ props.item.author}}</td>
           <td class="td td-row text-xs-center">{{ props.item.classId.classNum}}</td>
           <td class="td td-row text-xs-center">
             <span>
               <v-tooltip top>
                 <img
                   slot="activator"
                   style="cursor:pointer; width:25px; height:25px; "
                   class="mr-3"
                   @click="profile(props.item)"
                   src="/static/icon/view.png"
                 />
                 <span>View</span>
               </v-tooltip>
               <v-tooltip top>
                 <img
                   slot="activator"
                   style="cursor:pointer; width:20px; height:18px; "
                   class="mr-3"
                   @click="editItem(props.item)"
                   src="/static/icon/edit.png"
                 />
                 <span>Edit</span>
               </v-tooltip>
               <v-tooltip top>
                 <img
                   slot="activator"
                   style="cursor:pointer; width:20px; height:20px; "
                   @click="deleteItem(props.item)"
                   src="/static/icon/delete.png"
                 />
                 <span>Delete</span>
               </v-tooltip>
             </span>
           </td>
         </tr>
       </template>
       <v-alert
         slot="no-results"
         :value="true"
         color="error"
         icon="warning"
       >Your search for "{{ search }}" found no results.</v-alert>
     </v-data-table>
     <!-- ****** ADD MULTIPLE E-BOOK ****** -->
     <v-dialog v-model="addEBookDialog" max-width="600px">
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add E-Book</label>
             <v-icon size="24" class="right" @click="addEBookDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-form ref="form" v-model="valid" lazy-validation>
           <v-container fluid>
             <v-layout>
               <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center">
                 <input
                   type="file"
                   style="display: none"
                   ref="image"
                   accept="image/*"
                   @change="onImagePicked"
                 />
                 <v-layout justify-center>
                   <v-flex v-if="files != ''">
                     <img :src="files" height="150" width="150" />
                   </v-flex>
                 </v-layout>
                 <img src="/static/icon/user.png" v-if="files ==''" height="80" width="80px;" />
               </v-flex>
             </v-layout>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Name:</label>
                 </v-flex>
                 <v-flex xs7 class="ml-3">
                   <v-text-field
                     v-model="addEBooks.name"
                     placeholder="fill name"
                     name="name"
                     type="text"
                     :rules="titleRules"
                     required
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Author:</label>
                 </v-flex>
                 <v-flex xs7 class="ml-3">
                   <v-text-field
                     v-model="addEBooks.author"
                     placeholder="fill your Author Name"
                     name="name"
                     type="text"
                     :rules="titleRules"
                     required
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Class:</label>
                 </v-flex>
                 <v-flex xs7 class="ml-3">
                   <v-select
                     v-model="addEBooks.classId"
                     :items="addClass"
                     label="Select Class"
                     item-text="classNum"
                     item-value="_id"
                     :rules="titleRules"
                     required
                   ></v-select>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Upload Image:</label>
                 </v-flex>
                 <v-flex xs7 class="ml-3">
                   <v-text-field
                     label="Select Image"
                     @click="pickImage"
                     v-model="addEBooks.uploadCover"
                     append-icon="attach_file"
                     multiple
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Upload File:</label>
                 </v-flex>
                 <v-flex xs7 class="ml-3">
                   <input type="file" style="display: none" ref="file" @change="onFilePicked" />
                   <v-text-field
                     label="Select File"
                     @click="pickFile"
                     v-model="addEBooks.uploadFile"
                     append-icon="attach_file"
                     multiple
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs4 class="pt-3 subheading">
                   <label class="right">Private:</label>
                 </v-flex>
                 <v-flex xs7 class="ml-3">
                   <v-checkbox v-model="addEBooks.private"></v-checkbox>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-layout>
               <v-flex xs12>
                 <v-card-actions>
                   <v-spacer></v-spacer>
                   <v-btn @click="clear" round dark class="clear-button">clear</v-btn>
                   <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
                 </v-card-actions>
               </v-flex>
             </v-layout>
           </v-container>
         </v-form>
       </v-card>
     </v-dialog>
     <div class="loader" v-if="showLoader">
       <v-progress-circular indeterminate color="white"></v-progress-circular>
     </div>
   </v-container>
 </template>
 <script>
 import http from "@/Services/http.js";
 import Util from "@/util";
 export default {
   data: () => ({
     snackbar: false,
     y: "top",
     x: "right",
     mode: "",
     timeout: 3000,
     text: "",
     show: true,
     showSearch: false,
     loading: false,
     loadingUpadte: false,
     date: null,
     search: "",
     showLoader: false,
     editEbookDialog: false,
     viewEbookDialog: false,
     valid: true,
     addEBookDialog: false,
     addClass: [],
     addSection: [],
     pagination: {
       rowsPerPage: 10
     },
     imageName: "",
     fileName: "",
     imageUrl: "",
     imageFile: "",
     image: [],
     upload: "",
     files: "",
     anyFile: "",
     titleRules: [v => !!v || " Tilte is required"],
     descriptionRules: [v => !!v || " Description is required"],
     headers: [
       {
         align: "justify-center",
         text: "No",
         sortable: false,
         value: "No"
       },
       { text: "Photo", vaue: "fileUrl", sortable: false, align: "center" },
       { text: "Name", vaue: "name", sortable: false, align: "center" },
       { text: "Author", value: "author", sortable: false, align: "center" },
       {
         text: "Class",
         value: "classId",
         sortable: false,
         align: "center"
       },
       { text: "Action", value: "", sortable: false, align: "center" }
     ],
     eBookData: [],
     editedIndex: -1,
     addEBooks: {
       private: false
     },
     editedItem: {},
     token: "",
     uploadCover: {}
   }),
   methods: {
     pickImage() {
       this.$refs.image.click();
     },
     pickFile() {
       this.$refs.file.click();
     },
     onImagePicked(e) {
       // console.log(e)
       const files = e.target.files;
       /** fetch Image Name **/
       if (files[0] !== undefined) {
         this.imageName = files[0].name;
         if (this.imageName.lastIndexOf(".") <= 0) {
           return;
         }
         /** Select many image and showing many image add to news card **/
         const fr = new FileReader();
         fr.readAsDataURL(files[0]);
         fr.addEventListener("load", () => {
           this.files = fr.result;
         });
       } else {
         this.imageName = "";
         this.imageFile = "";
         this.files = "";
         this.imageUrl = "";
       }
     },
     getEBooksList() {
       this.showLoader = true;
       http()
         .get("/getEBooksList", {
           params: { schoolId: this.$store.state.schoolId },
           headers: { Authorization: "Bearer " + this.token }
         })
         .then(response => {
           this.eBookData = response.data.data;
           this.showLoader = false;
         })
         .catch(error => {
           // console.log("err====>", err);
           this.showLoader = false;
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
           }
         });
     },
     onFilePicked(e) {
       // console.log(e)
       const files = e.target.files;
       /** fetch Image Name **/
       if (files[0] !== undefined) {
         this.fileName = files[0].name;
         if (this.fileName.lastIndexOf(".") <= 0) {
           return;
         }
         const fr = new FileReader();
         fr.readAsDataURL(files[0]);
         fr.addEventListener("load", () => {
           this.anyFile = fr.result;
           // console.log(" this.anyFile Url", this.anyFile )
         });
       } else {
         this.anyFile = "";
         this.fileName = "";
       }
     },
     editItem(item) {
       this.files = [];
       this.editedIndex = this.eBookData.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.editedItem.className = item.classId.classNum;
       this.editEbookDialog = true;
     },
     profile(item) {
       this.editedIndex = this.eBookData.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.viewEbookDialog = true;
     },
     deleteItem(item) {
       let deleteEBooks = {
         ebookId: item._id
       };
       http()
         .delete(
           "/deleteEBook",
           confirm("Are you sure you want to delete this?") && {
             params: deleteEBooks
           }
         )
         .then(response => {
           this.snackbar = true;
           this.text = "Successfully delete Existing News";
           this.getEBooksList();
         })
         .catch(error => {
           this.snackbar = true;
           this.text = error.response.data.message;
         });
     },
     close() {
       this.editEbookDialog = false;
     },
     close1() {
       this.viewEbookDialog = false;
     },
     submit() {
       if (this.$refs.form.validate()) {
         if (this.files) {
           const [baseUrl, imageUrl] = this.files.split(/,/);
           this.addEBooks.uploadCover = imageUrl;
           // console.log("anyFile.split(/,/)", this.addEBooks.uploadCover);
         }
         if (this.anyFile) {
           const [baseUrl, fileUrl] = this.anyFile.split(/,/);
           this.addEBooks.uploadFile = fileUrl;
           // console.log("anyFile.split(/,/)", this.addEBooks.uploadFile);
         }
         let data = {
           classId: this.addEBooks.classId,
           name: this.addEBooks.name,
           author: this.addEBooks.author,
           private: this.addEBooks.private,
           uploadCover: this.addEBooks.uploadCover,
           uploadFile: this.addEBooks.uploadFile
         };
         http()
           .post("/createEBook", data)
           .then(response => {
             this.getEBooksList = [];
             this.snackbar = true;
             this.addEBookDialog = false;
+            this.getEBooksList()
             this.text = response.data.message;
             this.color = "green";
             this.loading = false;
             this.addEBooks.uploadCover = "";
             this.addEBooks.uploadFile = "";
           })
           .catch(error => {
             this.snackbar = true;
             this.text = error.response.data.message;
             this.color = "red";
           });
       }
     },
     clear() {
       this.$refs.form.reset();
       this.addEBooks.uploadCover = "";
       this.files = "";
     },
     save() {
       this.loadingUpadte = true;
       if (this.files.length > 0) {
         const [baseUrl, imageUrl] = this.files.split(/,/);
         this.editedItem.uploadCover = imageUrl;
         // console.log("anyFile.split(/,/)", this.addEBooks.uploadCover);
       }
       if (this.anyFile) {
         const [baseUrl, fileUrl] = this.anyFile.split(/,/);
         this.editedItem.uploadFile = fileUrl;
         // console.log("anyFile.split(/,/)", this.addEBooks.uploadFile);
       }
       this.editedItem.ebookId = this.editedItem._id;
       http()
         .put("/updateEBook", this.editedItem)
         .then(response => {
           this.loadingUpadte = false;
           this.snackbar = true;
           this.text = "Successfully Edit Existing E-Book";
           this.getEBooksList();
           this.editedItem.uploadFile = "";
           this.editedItem.uploadCover = "";
           this.anyFile = "";
           this.files = "";
           this.close();
         })
         .catch(error => {
           this.loadingUpadte = false;
           this.snackbar = true;
           this.text = error.response.data.message;
           // console.log(error);
         });
     },
     getAllClass() {
       http()
         .get("/getClassesList", {
           headers: { Authorization: "Bearer " + this.token }
         })
         .then(response => {
           this.addClass = response.data.data;
         })
         .catch(err => {
           // console.log("err====>", err);
           // this.$router.replace({ path: "/" });
         });
     },
     displaySearch() {
       (this.show = false), (this.showSearch = true);
     },
     closeSearch() {
       this.showSearch = false;
       this.show = true;
       this.search = "";
     }
   },
   mounted() {
     this.token = this.$store.state.token;
     this.getEBooksList();
     this.getAllClass();
     // this.getBookData();
     // this.editItem;
   }
 };
 </script>