viithiisys / School-Management-dashboard

Commit 39a6d21a09a7e34f3563d641d8157b854a700ce6

Authored by Shikha Mishra 2020-08-13 10:01:08 -0400

Exists in master and in 2 other branches

improve add student fuctionality in students screen while admin login and hide p…

…pt option from course detail while teacher login

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

src/pages/Course/courseDetail.vue

Diff comments View file @39a6d21

1	<template>	1	<template>
2	<v-container fluid class="body-color">	2	<v-container fluid class="body-color">
3	<!-- **** Edit Chapter detail **** -->	3	<!-- **** Edit Chapter detail **** -->
4	<v-dialog v-model="editCourseDetailDialog" max-width="1000px" scrollable>	4	<v-dialog v-model="editCourseDetailDialog" max-width="1000px" scrollable>
5	<v-card class="card-style pa-2" dark>	5	<v-card 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 Chapter</label>	8	<label class="title text-xs-center">Edit Chapter</label>
9	<v-icon size="24" class="right" @click="editCourseDetailDialog = false">cancel</v-icon>	9	<v-icon size="24" class="right" @click="editCourseDetailDialog = false">cancel</v-icon>
10	</v-flex>	10	</v-flex>
11	</v-layout>	11	</v-layout>
12	<v-card-text>	12	<v-card-text>
13	<v-layout wrap>	13	<v-layout wrap>
14	<v-flex xs12 sm12>	14	<v-flex xs12 sm12>
15	<v-layout>	15	<v-layout>
16	<v-flex xs4 class="pt-4 subheading">	16	<v-flex xs4 class="pt-4 subheading">
17	<label class="right">Select Class:</label>	17	<label class="right">Select Class:</label>
18	</v-flex>	18	</v-flex>
19	<v-flex xs8 sm6 class="ml-3">	19	<v-flex xs8 sm6 class="ml-3">
20	<v-select	20	<v-select
21	small	21	small
22	:items="addclass"	22	:items="addclass"
23	label="Select Class"	23	label="Select Class"
24	v-model="editedCourse.classId"	24	v-model="editedCourse.classId"
25	item-text="classNum"	25	item-text="classNum"
26	item-value="_id"	26	item-value="_id"
27	name="Select Class"	27	name="Select Class"
28	@change="getCourses(editedCourse.classId)"	28	@change="getCourses(editedCourse.classId)"
29	class="mr-2"	29	class="mr-2"
30	required	30	required
31	></v-select>	31	></v-select>
32	</v-flex>	32	</v-flex>
33	</v-layout>	33	</v-layout>
34	</v-flex>	34	</v-flex>
35	<v-flex xs12 sm12>	35	<v-flex xs12 sm12>
36	<v-layout>	36	<v-layout>
37	<v-flex xs4 class="pt-4 subheading">	37	<v-flex xs4 class="pt-4 subheading">
38	<label class="right">Select Course:</label>	38	<label class="right">Select Course:</label>
39	</v-flex>	39	</v-flex>
40	<v-flex xs8 sm6 class="ml-3">	40	<v-flex xs8 sm6 class="ml-3">
41	<v-select	41	<v-select
42	:items="courseData"	42	:items="courseData"
43	label="Select Course"	43	label="Select Course"
44	v-model="editedCourse.courseId"	44	v-model="editedCourse.courseId"
45	item-text="courseName"	45	item-text="courseName"
46	item-value="_id"	46	item-value="_id"
47	required	47	required
48	class="ml-2"	48	class="ml-2"
49	></v-select>	49	></v-select>
50	</v-flex>	50	</v-flex>
51	</v-layout>	51	</v-layout>
52	</v-flex>	52	</v-flex>
53	</v-layout>	53	</v-layout>
54	<v-layout>	54	<v-layout>
55	<v-flex xs12 sm12 md11 lg11>	55	<v-flex xs12 sm12 md11 lg11>
56	<v-card-actions class="hidden-xs-only hidden-sm-only">	56	<v-card-actions class="hidden-xs-only hidden-sm-only">
57	<v-spacer></v-spacer>	57	<v-spacer></v-spacer>
58	<v-btn round dark @click="save" :loading="editLoading" class="add-button mr-4">Save</v-btn>	58	<v-btn round dark @click="save" :loading="editLoading" class="add-button mr-4">Save</v-btn>
59	</v-card-actions>	59	</v-card-actions>
60	<v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only">	60	<v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only">
61	<v-spacer></v-spacer>	61	<v-spacer></v-spacer>
62	<v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn>	62	<v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn>
63	<v-spacer></v-spacer>	63	<v-spacer></v-spacer>
64	</v-card-actions>	64	</v-card-actions>
65	</v-flex>	65	</v-flex>
66	</v-layout>	66	</v-layout>
67	</v-card-text>	67	</v-card-text>
68	</v-card>	68	</v-card>
69	</v-dialog>	69	</v-dialog>
70	<!-- DIALOG BOX - EDIT CHAPTER-->	70	<!-- DIALOG BOX - EDIT CHAPTER-->
71	<v-dialog v-model="editChapterDetailDialog" max-width="1000px" scrollable>	71	<v-dialog v-model="editChapterDetailDialog" max-width="1000px" scrollable>
72	<v-card class="card-style pa-2" dark>	72	<v-card class="card-style pa-2" dark>
73	<v-layout>	73	<v-layout>
74	<v-flex xs12>	74	<v-flex xs12>
75	<label class="title text-xs-center">Edit Chapter</label>	75	<label class="title text-xs-center">Edit Chapter</label>
76	<v-icon	76	<v-icon
77	size="24"	77	size="24"
78	class="right"	78	class="right"
79	@click="editChapterDetailDialog = false; trigger = 'reset'; emptyPdf = 'reset' "	79	@click="editChapterDetailDialog = false; trigger = 'reset'; emptyPdf = 'reset' "
80	>cancel</v-icon>	80	>cancel</v-icon>
81	</v-flex>	81	</v-flex>
82	</v-layout>	82	</v-layout>
83	<v-card-text>	83	<v-card-text>
84	<v-layout wrap>	84	<v-layout wrap>
85	<!-- CHAPTER NAME -->	85	<!-- CHAPTER NAME -->
86	<v-flex xs12 sm12>	86	<v-flex xs12 sm12>
87	<v-layout>	87	<v-layout>
88	<v-flex xs4 class="pt-4 subheading">	88	<v-flex xs4 class="pt-4 subheading">
89	<label class="right">Chapter Name:</label>	89	<label class="right">Chapter Name:</label>
90	</v-flex>	90	</v-flex>
91	<v-flex xs8 sm6 class="ml-3">	91	<v-flex xs8 sm6 class="ml-3">
92	<v-text-field	92	<v-text-field
93	v-model="editChapter.chapterName"	93	v-model="editChapter.chapterName"
94	placeholder="fill your Title"	94	placeholder="fill your Title"
95	type="text"	95	type="text"
96	required	96	required
97	></v-text-field>	97	></v-text-field>
98	</v-flex>	98	</v-flex>
99	</v-layout>	99	</v-layout>
100	</v-flex>	100	</v-flex>
101	<!-- DESCRIPTION -->	101	<!-- DESCRIPTION -->
102	<v-flex xs12 sm12>	102	<v-flex xs12 sm12>
103	<v-layout>	103	<v-layout>
104	<v-flex xs4 class="pt-4 subheading">	104	<v-flex xs4 class="pt-4 subheading">
105	<label class="right">Description:</label>	105	<label class="right">Description:</label>
106	</v-flex>	106	</v-flex>
107	<v-flex xs8 sm6 class="ml-3">	107	<v-flex xs8 sm6 class="ml-3">
108	<v-text-field	108	<v-text-field
109	placeholder="fill your Description"	109	placeholder="fill your Description"
110	v-model="editChapter.description"	110	v-model="editChapter.description"
111	type="text"	111	type="text"
112	required	112	required
113	></v-text-field>	113	></v-text-field>
114	</v-flex>	114	</v-flex>
115	</v-layout>	115	</v-layout>
116	</v-flex>	116	</v-flex>
117	<!-- UPLOAD PPT -->	117	<!-- UPLOAD PPT -->
118	<v-flex xs12>	118	<!-- <v-flex xs12>
119	<v-layout>	119	<v-layout>
120	<v-flex xs4 class="pt-4 subheading">	120	<v-flex xs4 class="pt-4 subheading">
121	<label class="right">Upload PPT:</label>	121	<label class="right">Upload PPT:</label>
122	</v-flex>	122	</v-flex>
123	<v-flex xs8 sm6 class="ml-3">	123	<v-flex xs8 sm6 class="ml-3">
124	<UploadFiles	124	<UploadFiles
125	@fileSelected="fileSelected($event,'uploadPPT')"	125	@fileSelected="fileSelected($event,'uploadPPT')"
126	label="Add PPT"	126	label="Add PPT"
127	reference="EditPpt"	127	reference="EditPpt"
128	id="editPptInput"	128	id="editPptInput"
129	:trigger="trigger"	129	:trigger="trigger"
130	></UploadFiles>	130	></UploadFiles>
131	</v-flex>	131	</v-flex>
132	</v-layout>	132	</v-layout>
133	</v-flex>	133	</v-flex>-->
134	<!-- UPLOAD PDF -->	134	<!-- UPLOAD PDF -->
135	<v-flex xs12>	135	<v-flex xs12>
136	<v-layout>	136	<v-layout>
137	<v-flex xs4 class="pt-4 subheading">	137	<v-flex xs4 class="pt-4 subheading">
138	<label class="right">Upload PDF:</label>	138	<label class="right">Upload PDF:</label>
139	</v-flex>	139	</v-flex>
140	<v-flex xs8 sm6 class="ml-3">	140	<v-flex xs8 sm6 class="ml-3">
141	<UploadPdf	141	<UploadPdf
142	@pdfFileSelected="pdfFileSelected($event,'uploadPDF')"	142	@pdfFileSelected="pdfFileSelected($event,'uploadPDF')"
143	label="Add PDF"	143	label="Add PDF"
144	reference="editPdf"	144	reference="editPdf"
145	id="editPdfInput"	145	id="editPdfInput"
146	:emptyPdf="emptyPdf"	146	:emptyPdf="emptyPdf"
147	></UploadPdf>	147	></UploadPdf>
148	</v-flex>	148	</v-flex>
149	</v-layout>	149	</v-layout>
150	</v-flex>	150	</v-flex>
151	</v-layout>	151	</v-layout>
152	<!-- <v-flex xs12 v-if="editChapter.chapterPoints.length != 0">	152	<!-- <v-flex xs12 v-if="editChapter.chapterPoints.length != 0">
153	<v-layout	153	<v-layout
154	wrap	154	wrap
155	v-for="(editChapterPoint,index) in editChapter.chapterPoints"	155	v-for="(editChapterPoint,index) in editChapter.chapterPoints"
156	:key="index"	156	:key="index"
157	>	157	>
158	<v-flex xs12 sm12 md4 class="pt-4 subheading">	158	<v-flex xs12 sm12 md4 class="pt-4 subheading">
159	<label class="right hidden-xs-only hidden-sm-only">Chapter Points:</label>	159	<label class="right hidden-xs-only hidden-sm-only">Chapter Points:</label>
160	<label class="hidden-md-only hidden-lg-only hidden-xl-only">Chapter Points:</label>	160	<label class="hidden-md-only hidden-lg-only hidden-xl-only">Chapter Points:</label>
161	</v-flex>	161	</v-flex>
162	<v-layout>	162	<v-layout>
163	<v-flex xs10 sm10 sm5 md9 class="ml-3">	163	<v-flex xs10 sm10 sm5 md9 class="ml-3">
164	<v-text-field :value="editChapterPoint" type="text" required></v-text-field>	164	<v-text-field :value="editChapterPoint" type="text" required></v-text-field>
165	</v-flex>	165	</v-flex>
166	<v-flex xs2 class="pt-4">	166	<v-flex xs2 class="pt-4">
167	<v-icon @click="deleteUrl(index)">cancel</v-icon>	167	<v-icon @click="deleteUrl(index)">cancel</v-icon>
168	</v-flex>	168	</v-flex>
169	</v-layout>	169	</v-layout>
170	</v-layout>	170	</v-layout>
171	</v-flex>-->	171	</v-flex>-->
172	<v-flex xs12>	172	<v-flex xs12>
173	<div v-for="(updateImage,index) in updates" :key="index">	173	<div v-for="(updateImage,index) in updates" :key="index">
174	<v-layout wrap>	174	<v-layout wrap>
175	<v-flex xs12 sm12 md4 class="pt-4 subheading">	175	<v-flex xs12 sm12 md4 class="pt-4 subheading">
176	<label class="right hidden-xs-only hidden-sm-only">Chapter Points:</label>	176	<label class="right hidden-xs-only hidden-sm-only">Chapter Points:</label>
177	<label class="hidden-md-only hidden-lg-only hidden-xl-only">Chapter Points:</label>	177	<label class="hidden-md-only hidden-lg-only hidden-xl-only">Chapter Points:</label>
178	</v-flex>	178	</v-flex>
179	<v-layout>	179	<v-layout>
180	<v-flex xs10 sm12 md9 class="ml-3">	180	<v-flex xs10 sm12 md9 class="ml-3">
181	<v-text-field	181	<v-text-field
182	v-model="updateImage.value"	182	v-model="updateImage.value"
183	placeholder="Upload new Chapter Points"	183	placeholder="Upload new Chapter Points"
184	required	184	required
185	></v-text-field>	185	></v-text-field>
186	</v-flex>	186	</v-flex>
187	<v-flex xs2 class="pt-4">	187	<v-flex xs2 class="pt-4">
188	<v-icon @click="deleteUpdate(index)" v-if="index !=0">cancel</v-icon>	188	<v-icon @click="deleteUpdate(index)" v-if="index !=0">cancel</v-icon>
189	<v-icon @click="update">add_circle</v-icon>	189	<v-icon @click="update">add_circle</v-icon>
190	</v-flex>	190	</v-flex>
191	</v-layout>	191	</v-layout>
192	</v-layout>	192	</v-layout>
193	</div>	193	</div>
194	</v-flex>	194	</v-flex>
195	<v-layout>	195	<v-layout>
196	<v-flex xs12 sm12 md11 lg11>	196	<v-flex xs12 sm12 md11 lg11>
197	<v-card-actions class="hidden-xs-only hidden-sm-only">	197	<v-card-actions class="hidden-xs-only hidden-sm-only">
198	<v-spacer></v-spacer>	198	<v-spacer></v-spacer>
199	<v-btn	199	<v-btn
200	round	200	round
201	dark	201	dark
202	@click="saveChapter"	202	@click="saveChapter"
203	:loading="editLoading"	203	:loading="editLoading"
204	class="add-button mr-4"	204	class="add-button mr-4"
205	>Save</v-btn>	205	>Save</v-btn>
206	</v-card-actions>	206	</v-card-actions>
207	<v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only">	207	<v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only">
208	<v-spacer></v-spacer>	208	<v-spacer></v-spacer>
209	<v-btn	209	<v-btn
210	round	210	round
211	dark	211	dark
212	@click="saveChapter"	212	@click="saveChapter"
213	:loading="editLoading"	213	:loading="editLoading"
214	class="add-button"	214	class="add-button"
215	>Save</v-btn>	215	>Save</v-btn>
216	<v-spacer></v-spacer>	216	<v-spacer></v-spacer>
217	</v-card-actions>	217	</v-card-actions>
218	</v-flex>	218	</v-flex>
219	</v-layout>	219	</v-layout>
220	</v-card-text>	220	</v-card-text>
221	</v-card>	221	</v-card>
222	</v-dialog>	222	</v-dialog>
223	<!-- ADD NEW CHAPTER-->	223	<!-- ADD NEW CHAPTER-->
224	<v-dialog v-model="addChapterDialog" max-width="1000px" scrollable>	224	<v-dialog v-model="addChapterDialog" max-width="1000px" scrollable>
225	<v-card class="card-style pa-2" dark>	225	<v-card class="card-style pa-2" dark>
226	<v-layout>	226	<v-layout>
227	<v-flex xs12>	227	<v-flex xs12>
228	<label class="title text-xs-center">Add Chapter Detail</label>	228	<label class="title text-xs-center">Add Chapter Detail</label>
229	<v-icon	229	<v-icon
230	size="24"	230	size="24"
231	class="right"	231	class="right"
232	@click="addChapterDialog = false; trigger = 'reset'; emptyPdf = 'reset' "	232	@click="addChapterDialog = false; trigger = 'reset'; emptyPdf = 'reset' "
233	>cancel</v-icon>	233	>cancel</v-icon>
234	</v-flex>	234	</v-flex>
235	</v-layout>	235	</v-layout>
236	<v-card-text>	236	<v-card-text>
237	<v-layout wrap>	237	<v-layout wrap>
238	<v-flex xs12 sm12>	238	<v-flex xs12 sm12>
239	<v-layout>	239	<v-layout>
240	<v-flex xs4 class="pt-4 subheading">	240	<v-flex xs4 class="pt-4 subheading">
241	<label class="right">Chapter Name:</label>	241	<label class="right">Chapter Name:</label>
242	</v-flex>	242	</v-flex>
243	<v-flex xs8 sm6 class="ml-3">	243	<v-flex xs8 sm6 class="ml-3">
244	<v-text-field	244	<v-text-field
245	v-model="addChapterItem.chapterName"	245	v-model="addChapterItem.chapterName"
246	placeholder="fill your Title"	246	placeholder="fill your Title"
247	type="text"	247	type="text"
248	required	248	required
249	></v-text-field>	249	></v-text-field>
250	</v-flex>	250	</v-flex>
251	</v-layout>	251	</v-layout>
252	</v-flex>	252	</v-flex>
253	<v-flex xs12 sm12>	253	<v-flex xs12 sm12>
254	<v-layout>	254	<v-layout>
255	<v-flex xs4 class="pt-4 subheading">	255	<v-flex xs4 class="pt-4 subheading">
256	<label class="right">Description:</label>	256	<label class="right">Description:</label>
257	</v-flex>	257	</v-flex>
258	<v-flex xs8 sm6 class="ml-3">	258	<v-flex xs8 sm6 class="ml-3">
259	<v-text-field	259	<v-text-field
260	placeholder="fill your Description"	260	placeholder="fill your Description"
261	v-model="addChapterItem.description"	261	v-model="addChapterItem.description"
262	type="text"	262	type="text"
263	required	263	required
264	></v-text-field>	264	></v-text-field>
265	</v-flex>	265	</v-flex>
266	</v-layout>	266	</v-layout>
267	</v-flex>	267	</v-flex>
268	<!-- UPLOAD PPT -->	268	<!-- UPLOAD PPT -->
269	<v-flex xs12>	269	<!-- <v-flex xs12>
270	<v-layout>	270	<v-layout>
271	<v-flex xs4 class="pt-4 subheading">	271	<v-flex xs4 class="pt-4 subheading">
272	<label class="right">Upload PPT:</label>	272	<label class="right">Upload PPT:</label>
273	</v-flex>	273	</v-flex>
274	<v-flex xs8 sm6 class="ml-3">	274	<v-flex xs8 sm6 class="ml-3">
275	<UploadFiles	275	<UploadFiles
276	@fileSelected="fileSelected($event,'uploadPPT')"	276	@fileSelected="fileSelected($event,'uploadPPT')"
277	label="Add PPT"	277	label="Add PPT"
278	reference="newChapterPpt"	278	reference="newChapterPpt"
279	id="newChapterPptInput"	279	id="newChapterPptInput"
280	:trigger="trigger"	280	:trigger="trigger"
281	></UploadFiles>	281	></UploadFiles>
282	</v-flex>	282	</v-flex>
283	</v-layout>	283	</v-layout>
284	</v-flex>	284	</v-flex>-->
285	<!-- UPLOAD PDF -->	285	<!-- UPLOAD PDF -->
286	<v-flex xs12>	286	<v-flex xs12>
287	<v-layout>	287	<v-layout>
288	<v-flex xs4 class="pt-4 subheading">	288	<v-flex xs4 class="pt-4 subheading">
289	<label class="right">Upload PDF:</label>	289	<label class="right">Upload PDF:</label>
290	</v-flex>	290	</v-flex>
291	<v-flex xs8 sm6 class="ml-3">	291	<v-flex xs8 sm6 class="ml-3">
292	<UploadPdf	292	<UploadPdf
293	@pdfFileSelected="pdfFileSelected($event,'uploadPDF')"	293	@pdfFileSelected="pdfFileSelected($event,'uploadPDF')"
294	label="Add PDF"	294	label="Add PDF"
295	reference="newChapterPdf"	295	reference="newChapterPdf"
296	id="newChapterPdfInput"	296	id="newChapterPdfInput"
297	:emptyPdf="emptyPdf"	297	:emptyPdf="emptyPdf"
298	></UploadPdf>	298	></UploadPdf>
299	</v-flex>	299	</v-flex>
300	</v-layout>	300	</v-layout>
301	</v-flex>	301	</v-flex>
302	</v-layout>	302	</v-layout>
303	<v-flex xs12>	303	<v-flex xs12>
304	<div v-for="(chapterPoints,index) in findsChapterPoint" :key="index">	304	<div v-for="(chapterPoints,index) in findsChapterPoint" :key="index">
305	<v-layout>	305	<v-layout>
306	<v-flex xs4 class="pt-4 subheading">	306	<v-flex xs4 class="pt-4 subheading">
307	<label class="right">Chapter Points:</label>	307	<label class="right">Chapter Points:</label>
308	</v-flex>	308	</v-flex>
309	<v-flex xs8 sm8 md6 class="ml-3">	309	<v-flex xs8 sm8 md6 class="ml-3">
310	<v-text-field	310	<v-text-field
311	placeholder="fill your Chapter Points"	311	placeholder="fill your Chapter Points"
312	v-model="chapterPoints.value"	312	v-model="chapterPoints.value"
313	type="text"	313	type="text"
314	name="link"	314	name="link"
315	required	315	required
316	></v-text-field>	316	></v-text-field>
317	</v-flex>	317	</v-flex>
318	<v-flex xs2 class="pt-4">	318	<v-flex xs2 class="pt-4">
319	<v-icon @click="deleteChapterPoint(index)" v-if="index !=0 ">cancel</v-icon>	319	<v-icon @click="deleteChapterPoint(index)" v-if="index !=0 ">cancel</v-icon>
320	<v-icon @click="addChapterPoint()">add_circle</v-icon>	320	<v-icon @click="addChapterPoint()">add_circle</v-icon>
321	</v-flex>	321	</v-flex>
322	</v-layout>	322	</v-layout>
323	</div>	323	</div>
324	</v-flex>	324	</v-flex>
325	<v-layout>	325	<v-layout>
326	<v-flex xs12 sm12 md11 lg11>	326	<v-flex xs12 sm12 md11 lg11>
327	<v-card-actions class="hidden-xs-only hidden-sm-only">	327	<v-card-actions class="hidden-xs-only hidden-sm-only">
328	<v-spacer></v-spacer>	328	<v-spacer></v-spacer>
329	<v-btn	329	<v-btn
330	round	330	round
331	dark	331	dark
332	@click="submitChapter"	332	@click="submitChapter"
333	:loading="editLoading"	333	:loading="editLoading"
334	class="add-button mr-4"	334	class="add-button mr-4"
335	>Submit</v-btn>	335	>Submit</v-btn>
336	</v-card-actions>	336	</v-card-actions>
337	<v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only">	337	<v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only">
338	<v-spacer></v-spacer>	338	<v-spacer></v-spacer>
339	<v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn>	339	<v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn>
340	<v-spacer></v-spacer>	340	<v-spacer></v-spacer>
341	</v-card-actions>	341	</v-card-actions>
342	</v-flex>	342	</v-flex>
343	</v-layout>	343	</v-layout>
344	</v-card-text>	344	</v-card-text>
345	</v-card>	345	</v-card>
346	</v-dialog>	346	</v-dialog>
347		347
348	<!-- **** PROFILE Gallery **** -->	348	<!-- **** PROFILE Gallery **** -->
349		349
350	<v-dialog v-model="viewProfileGallery" max-width="1000" scrollable>	350	<v-dialog v-model="viewProfileGallery" max-width="1000" scrollable>
351	<v-card flat class="card-style pa-3" dark>	351	<v-card flat class="card-style pa-3" dark>
352	<v-layout>	352	<v-layout>
353	<v-flex xs12>	353	<v-flex xs12>
354	<label class="title text-xs-center">View Course Detail</label>	354	<label class="title text-xs-center">View Course Detail</label>
355	<v-icon size="24" class="right" @click="closeProfileGallery">cancel</v-icon>	355	<v-icon size="24" class="right" @click="closeProfileGallery">cancel</v-icon>
356	</v-flex>	356	</v-flex>
357	</v-layout>	357	</v-layout>
358	<v-card-text>	358	<v-card-text>
359	<v-container grid-list-md>	359	<v-container grid-list-md>
360	<v-layout wrap>	360	<v-layout wrap>
361	<v-flex xs12>	361	<v-flex xs12>
362	<v-layout>	362	<v-layout>
363	<v-flex xs4 sm6>	363	<v-flex xs4 sm6>
364	<h5 class="right my-1">	364	<h5 class="right my-1">
365	<b>Chapter Name:</b>	365	<b>Chapter Name:</b>
366	</h5>	366	</h5>
367	</v-flex>	367	</v-flex>
368	<v-flex sm6 xs8>	368	<v-flex sm6 xs8>
369	<h5 class="my-1">{{ editedItem.chapterName }}</h5>	369	<h5 class="my-1">{{ editedItem.chapterName }}</h5>
370	</v-flex>	370	</v-flex>
371	</v-layout>	371	</v-layout>
372	<v-layout>	372	<v-layout>
373	<v-flex xs4 sm6>	373	<v-flex xs4 sm6>
374	<h5 class="right my-1">	374	<h5 class="right my-1">
375	<b>Description:</b>	375	<b>Description:</b>
376	</h5>	376	</h5>
377	</v-flex>	377	</v-flex>
378	<v-flex sm6 xs8>	378	<v-flex sm6 xs8>
379	<h5 class="my-1">{{ editedItem.description }}</h5>	379	<h5 class="my-1">{{ editedItem.description }}</h5>
380	</v-flex>	380	</v-flex>
381	</v-layout>	381	</v-layout>
382	<v-layout>	382	<v-layout>
383	<v-flex xs5 sm6>	383	<v-flex xs5 sm6>
384	<h5 class="right my-1">	384	<h5 class="right my-1">
385	<b>Chapter Points:</b>	385	<b>Chapter Points:</b>
386	</h5>	386	</h5>
387	</v-flex>	387	</v-flex>
388	<v-flex sm6 xs8>	388	<v-flex sm6 xs8>
389	<h5 class="my-1">	389	<h5 class="my-1">
390	<ul v-for="chapterPoint in editedItem.chapterPoints" :key="chapterPoint">	390	<ul v-for="chapterPoint in editedItem.chapterPoints" :key="chapterPoint">
391	<li>{{ chapterPoint}}</li>	391	<li>{{ chapterPoint}}</li>
392	</ul>	392	</ul>
393	</h5>	393	</h5>
394	</v-flex>	394	</v-flex>
395	</v-layout>	395	</v-layout>
396	<!-- LINK TO PDF -->	396	<!-- LINK TO PDF -->
397	<v-layout row justify-center>	397	<v-layout row justify-center>
398	<v-flex xs6>	398	<v-flex xs6>
399	<div style="width: 100%;">	399	<div style="width: 100%;">
400	<a	400	<a
401	:href="editedItem.pdfFileUrl"	401	:href="editedItem.pdfFileUrl"
402	target="_blank"	402	target="_blank"
403	style="text-decoration: none!important;"	403	style="text-decoration: none!important;"
404	>	404	>
405	<v-btn flat block>	405	<v-btn flat block>
406	<span>	406	<span>
407	<h5>	407	<h5>
408	<b>Open PDF</b>	408	<b>Open PDF</b>
409	</h5>	409	</h5>
410	</span>	410	</span>
411	</v-btn>	411	</v-btn>
412	</a>	412	</a>
413	</div>	413	</div>
414	</v-flex>	414	</v-flex>
415	</v-layout>	415	</v-layout>
416	</v-flex>	416	</v-flex>
417	</v-layout>	417	</v-layout>
418	</v-container>	418	</v-container>
419	</v-card-text>	419	</v-card-text>
420	</v-card>	420	</v-card>
421	</v-dialog>	421	</v-dialog>
422		422
423	<!-- **** Course Detail TABLE **** -->	423	<!-- **** Course Detail TABLE **** -->
424	<v-container grid-list-lg class="pa-0">	424	<v-container grid-list-lg class="pa-0">
425	<v-layout row wrap>	425	<v-layout row wrap>
426	<!-- <v-btn	426	<!-- <v-btn
427	fab	427	fab
428	dark	428	dark
429	class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"	429	class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
430	small	430	small
431	@click="addCourseDetailDialog = true"	431	@click="addCourseDetailDialog = true"
432	>	432	>
433	<v-icon dark>add</v-icon>	433	<v-icon dark>add</v-icon>
434	</v-btn>-->	434	</v-btn>-->
435	<v-flex xs12 sm4>	435	<v-flex xs12 sm4>
436	<v-btn block round class="open-dialog-button" dark @click="addCourseDetailDialog = true">	436	<v-btn block round class="open-dialog-button" dark @click="addCourseDetailDialog = true">
437	<v-icon class="white--text pr-1" size="20">add</v-icon>	437	<v-icon class="white--text pr-1" size="20">add</v-icon>
438	<span class="hidden-sm-and-down">Add Course Detail</span>	438	<span class="hidden-sm-and-down">Add Course Detail</span>
439	<span class="hidden-md-and-up">Add</span>	439	<span class="hidden-md-and-up">Add</span>
440	</v-btn>	440	</v-btn>
441	</v-flex>	441	</v-flex>
442		442
443	<v-flex xs12 sm4 md2>	443	<v-flex xs12 sm4 md2>
444	<v-select	444	<v-select
445	:items="addclass"	445	:items="addclass"
446	label="Select Class"	446	label="Select Class"
447	v-model="getCourse.classId"	447	v-model="getCourse.classId"
448	item-text="classNum"	448	item-text="classNum"
449	item-value="_id"	449	item-value="_id"
450	name="Select Class"	450	name="Select Class"
451	@change="getCourses(getCourse.classId)"	451	@change="getCourses(getCourse.classId)"
452	required	452	required
453	></v-select>	453	></v-select>
454	</v-flex>	454	</v-flex>
455	<v-flex xs12 sm4 md2>	455	<v-flex xs12 sm4 md2>
456	<v-select	456	<v-select
457	:items="courseData"	457	:items="courseData"
458	label="Select Course"	458	label="Select Course"
459	v-model="getCourse.courseId"	459	v-model="getCourse.courseId"
460	item-text="courseName"	460	item-text="courseName"
461	item-value="_id"	461	item-value="_id"
462	required	462	required
463	@change="getCourseDetailsList(getCourse.courseId)"	463	@change="getCourseDetailsList(getCourse.courseId)"
464	></v-select>	464	></v-select>
465	</v-flex>	465	</v-flex>
466		466
467	<v-flex xs12 sm1 v-if="show">	467	<v-flex xs12 sm1 v-if="show">
468	<v-btn icon large flat @click="show = false;showSearch = true;">	468	<v-btn icon large flat @click="show = false;showSearch = true;">
469	<v-avatar size="27">	469	<v-avatar size="27">
470	<img src="/static/icon/search.png" alt="icon" />	470	<img src="/static/icon/search.png" alt="icon" />
471	</v-avatar>	471	</v-avatar>
472	</v-btn>	472	</v-btn>
473	</v-flex>	473	</v-flex>
474		474
475	<v-flex xs12 sm3 md3 v-if="showSearch">	475	<v-flex xs12 sm3 md3 v-if="showSearch">
476	<div style="display: inline-block;width: 70%;">	476	<div style="display: inline-block;width: 70%;">
477	<v-text-field	477	<v-text-field
478	autofocus	478	autofocus
479	v-model="search"	479	v-model="search"
480	label="Search"	480	label="Search"
481	prepend-inner-icon="search"	481	prepend-inner-icon="search"
482	color="primary"	482	color="primary"
483	></v-text-field>	483	></v-text-field>
484	</div>	484	</div>
485	<div style="display: inline-block;">	485	<div style="display: inline-block;">
486	<v-icon @click="closeSearch" color="error">close</v-icon>	486	<v-icon @click="closeSearch" color="error">close</v-icon>
487	</div>	487	</div>
488	</v-flex>	488	</v-flex>
489	</v-layout>	489	</v-layout>
490	</v-container>	490	</v-container>
491	<v-data-table	491	<v-data-table
492	:headers="headers"	492	:headers="headers"
493	:items="CourseDetailsList"	493	:items="CourseDetailsList"
494	:pagination.sync="pagination"	494	:pagination.sync="pagination"
495	:search="search"	495	:search="search"
496	item-key="_id"	496	item-key="_id"
497	>	497	>
498	<template slot="items" slot-scope="props">	498	<template slot="items" slot-scope="props">
499	<tr class="tr" @click="courseTableRow(props.item._id)">	499	<tr class="tr" @click="courseTableRow(props.item._id)">
500	<td class="td td-row">{{ props.index + 1}}</td>	500	<td class="td td-row">{{ props.index + 1}}</td>
501	<td class="td td-row text-xs-center">{{ props.item.classId.classNum }}</td>	501	<td class="td td-row text-xs-center">{{ props.item.classId.classNum }}</td>
502	<td class="td td-row text-xs-center">{{ props.item.courseId.courseName }}</td>	502	<td class="td td-row text-xs-center">{{ props.item.courseId.courseName }}</td>
503	<td class="td td-row text-xs-center">	503	<td class="td td-row text-xs-center">
504	<div style="vertical-align: top;">	504	<div style="vertical-align: top;">
505	<v-tooltip top>	505	<v-tooltip top>
506	<v-icon	506	<v-icon
507	slot="activator"	507	slot="activator"
508	style="cursor:pointer;font-size:22px;position: relative;top: -4px; "	508	style="cursor:pointer;font-size:22px;position: relative;top: -4px; "
509	class="mr-3"	509	class="mr-3"
510	@click="addChapters(props.item)"	510	@click="addChapters(props.item)"
511	>add_circle_outline</v-icon>	511	>add_circle_outline</v-icon>
512	<span>Add</span>	512	<span>Add</span>
513	</v-tooltip>	513	</v-tooltip>
514	<v-tooltip top>	514	<v-tooltip top>
515	<img	515	<img
516	slot="activator"	516	slot="activator"
517	style="cursor:pointer; width:25px; height:25px; "	517	style="cursor:pointer; width:25px; height:25px; "
518	class="mr-3"	518	class="mr-3"
519	@click="props.expanded = !props.expanded"	519	@click="props.expanded = !props.expanded"
520	src="/static/icon/view.png"	520	src="/static/icon/view.png"
521	/>	521	/>
522	<span>View</span>	522	<span>View</span>
523	</v-tooltip>	523	</v-tooltip>
524	<v-tooltip top>	524	<v-tooltip top>
525	<img	525	<img
526	slot="activator"	526	slot="activator"
527	style="cursor:pointer; width:20px; height:18px; "	527	style="cursor:pointer; width:20px; height:18px; "
528	class="mr-3"	528	class="mr-3"
529	@click="editItem(props.item)"	529	@click="editItem(props.item)"
530	src="/static/icon/edit.png"	530	src="/static/icon/edit.png"
531	/>	531	/>
532	<span>Edit</span>	532	<span>Edit</span>
533	</v-tooltip>	533	</v-tooltip>
534	<v-tooltip top>	534	<v-tooltip top>
535	<img	535	<img
536	slot="activator"	536	slot="activator"
537	style="cursor:pointer; width:20px; height:20px; "	537	style="cursor:pointer; width:20px; height:20px; "
538	class="mr-3"	538	class="mr-3"
539	@click="deleteItem(props.item)"	539	@click="deleteItem(props.item)"
540	src="/static/icon/delete.png"	540	src="/static/icon/delete.png"
541	/>	541	/>
542	<span>Delete</span>	542	<span>Delete</span>
543	</v-tooltip>	543	</v-tooltip>
544	</div>	544	</div>
545	</td>	545	</td>
546	</tr>	546	</tr>
547	</template>	547	</template>
548	<!-- CHAPTERS IN A COURSE -->	548	<!-- CHAPTERS IN A COURSE -->
549	<template slot="expand">	549	<template slot="expand">
550	<v-data-table :items="chapters" hide-actions item-key="chapterName" style="width: auto;">	550	<v-data-table :items="chapters" hide-actions item-key="chapterName" style="width: auto;">
551	<template slot="items" slot-scope="props">	551	<template slot="items" slot-scope="props">
552	<tr class="tr" @click="props.expanded = !props.expanded">	552	<tr class="tr" @click="props.expanded = !props.expanded">
553	<td class="td td-row">{{ props.index + 1}}</td>	553	<td class="td td-row">{{ props.index + 1}}</td>
554	<td class="text-xs-center td td-row">{{ props.item.chapterName}}</td>	554	<td class="text-xs-center td td-row">{{ props.item.chapterName}}</td>
555	<td class="text-xs-center td td-row">{{ props.item.description }}</td>	555	<td class="text-xs-center td td-row">{{ props.item.description }}</td>
556	<td class="text-xs-center td td-row">	556	<td class="text-xs-center td td-row">
557	<v-tooltip top>	557	<v-tooltip top>
558	<v-icon	558	<v-icon
559	slot="activator"	559	slot="activator"
560	style="cursor:pointer;font-size:22px;position: relative;top: -4px; "	560	style="cursor:pointer;font-size:22px;position: relative;top: -4px; "
561	class="mr-3"	561	class="mr-3"
562	@click="$router.push({name: 'Live Online Class', query: {chapterId: props.item._id, chapterName: props.item.chapterName, courseId: getCourse.courseId, classId: getCourse.classId }})"	562	@click="$router.push({name: 'Live Online Class', query: {chapterId: props.item._id, chapterName: props.item.chapterName, courseId: getCourse.courseId, classId: getCourse.classId }})"
563	>video_call</v-icon>	563	>video_call</v-icon>
564	<span>Live Session</span>	564	<span>Live Session</span>
565	</v-tooltip>	565	</v-tooltip>
566	<v-tooltip top>	566	<v-tooltip top>
567	<img	567	<img
568	slot="activator"	568	slot="activator"
569	style="cursor:pointer; width:25px; height:25px; "	569	style="cursor:pointer; width:25px; height:25px; "
570	class="mr-3"	570	class="mr-3"
571	@click="profile(props.item)"	571	@click="profile(props.item)"
572	src="/static/icon/view.png"	572	src="/static/icon/view.png"
573	/>	573	/>
574	<span>View</span>	574	<span>View</span>
575	</v-tooltip>	575	</v-tooltip>
576	<v-tooltip top>	576	<v-tooltip top>
577	<img	577	<img
578	slot="activator"	578	slot="activator"
579	style="cursor:pointer; width:20px; height:18px; "	579	style="cursor:pointer; width:20px; height:18px; "
580	class="mr-3"	580	class="mr-3"
581	@click="editChapterItem(props.item)"	581	@click="editChapterItem(props.item)"
582	src="/static/icon/edit.png"	582	src="/static/icon/edit.png"
583	/>	583	/>
584	<span>Edit</span>	584	<span>Edit</span>
585	</v-tooltip>	585	</v-tooltip>
586	<v-tooltip top>	586	<v-tooltip top>
587	<img	587	<img
588	slot="activator"	588	slot="activator"
589	style="cursor:pointer; width:20px; height:20px; "	589	style="cursor:pointer; width:20px; height:20px; "
590	class="mr-3"	590	class="mr-3"
591	@click="deleteChapters(props.item)"	591	@click="deleteChapters(props.item)"
592	src="/static/icon/delete.png"	592	src="/static/icon/delete.png"
593	/>	593	/>
594	<span>Delete Chapter</span>	594	<span>Delete Chapter</span>
595	</v-tooltip>	595	</v-tooltip>
596	</td>	596	</td>
597	</tr>	597	</tr>
598	</template>	598	</template>
599	</v-data-table>	599	</v-data-table>
600	</template>	600	</template>
601		601
602	<v-alert	602	<v-alert
603	slot="no-results"	603	slot="no-results"
604	:value="true"	604	:value="true"
605	color="error"	605	color="error"
606	icon="warning"	606	icon="warning"
607	>Your search for "{{ search }}" found no results.</v-alert>	607	>Your search for "{{ search }}" found no results.</v-alert>
608	</v-data-table>	608	</v-data-table>
609	<!-- **** ADD Course Detail **** -->	609	<!-- **** ADD Course Detail **** -->
610	<v-dialog v-model="addCourseDetailDialog" max-width="600px" persistent>	610	<v-dialog v-model="addCourseDetailDialog" max-width="600px" persistent>
611	<v-card flat class="card-style pa-2" dark>	611	<v-card flat class="card-style pa-2" dark>
612	<v-layout>	612	<v-layout>
613	<v-flex xs12>	613	<v-flex xs12>
614	<label class="title text-xs-center">Add Course Details</label>	614	<label class="title text-xs-center">Add Course Details</label>
615	<v-icon	615	<v-icon
616	size="24"	616	size="24"
617	class="right"	617	class="right"
618	@click="addCourseDetailDialog = false; clear() ; trigger = 'reset' ; emptyPdf = 'reset' "	618	@click="addCourseDetailDialog = false; clear() ; trigger = 'reset' ; emptyPdf = 'reset' "
619	>cancel</v-icon>	619	>cancel</v-icon>
620	</v-flex>	620	</v-flex>
621	</v-layout>	621	</v-layout>
622	<v-form ref="form" v-model="valid" lazy-validation>	622	<v-form ref="form" v-model="valid" lazy-validation>
623	<v-container fluid>	623	<v-container fluid>
624	<v-flex xs12>	624	<v-flex xs12>
625	<v-layout>	625	<v-layout>
626	<v-flex xs4 class="pt-4 subheading">	626	<v-flex xs4 class="pt-4 subheading">
627	<label class="right hidden-xs-only hidden-sm-only">Select Class:</label>	627	<label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
628	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>	628	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
629	</v-flex>	629	</v-flex>
630	<v-flex xs8 sm8 md7 class="ml-3">	630	<v-flex xs8 sm8 md7 class="ml-3">
631	<v-select	631	<v-select
632	:items="addclass"	632	:items="addclass"
633	label="Select Class"	633	label="Select Class"
634	v-model="addCourseDetail.classId"	634	v-model="addCourseDetail.classId"
635	item-text="classNum"	635	item-text="classNum"
636	item-value="_id"	636	item-value="_id"
637	name="Select Class"	637	name="Select Class"
638	:rules="clsssRules"	638	:rules="clsssRules"
639	@change="getCourses(addCourseDetail.classId)"	639	@change="getCourses(addCourseDetail.classId)"
640	required	640	required
641	></v-select>	641	></v-select>
642	</v-flex>	642	</v-flex>
643	</v-layout>	643	</v-layout>
644	</v-flex>	644	</v-flex>
645	<v-flex xs12>	645	<v-flex xs12>
646	<v-layout>	646	<v-layout>
647	<v-flex xs4 class="pt-4 subheading">	647	<v-flex xs4 class="pt-4 subheading">
648	<label class="right hidden-xs-only hidden-sm-only">Select Course:</label>	648	<label class="right hidden-xs-only hidden-sm-only">Select Course:</label>
649	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Course:</label>	649	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Course:</label>
650	</v-flex>	650	</v-flex>
651	<v-flex xs8 sm8 md7 class="ml-3">	651	<v-flex xs8 sm8 md7 class="ml-3">
652	<v-select	652	<v-select
653	:items="courseData"	653	:items="courseData"
654	label="Select Course"	654	label="Select Course"
655	v-model="addCourseDetail.courseId"	655	v-model="addCourseDetail.courseId"
656	item-text="courseName"	656	item-text="courseName"
657	item-value="_id"	657	item-value="_id"
658	:rules="courseRules"	658	:rules="courseRules"
659	required	659	required
660	></v-select>	660	></v-select>
661	</v-flex>	661	</v-flex>
662	</v-layout>	662	</v-layout>
663	</v-flex>	663	</v-flex>
664	<v-flex xs12>	664	<v-flex xs12>
665	<v-layout>	665	<v-layout>
666	<v-flex xs4 class="pt-4 subheading">	666	<v-flex xs4 class="pt-4 subheading">
667	<label class="right">Chapter Name:</label>	667	<label class="right">Chapter Name:</label>
668	</v-flex>	668	</v-flex>
669	<v-flex xs8 sm8 md7 class="ml-3">	669	<v-flex xs8 sm8 md7 class="ml-3">
670	<v-text-field	670	<v-text-field
671	v-model="addCourseDetail.chapterName"	671	v-model="addCourseDetail.chapterName"
672	placeholder="fill your Title"	672	placeholder="fill your Title"
673	name="name"	673	name="name"
674	type="text"	674	type="text"
675	:rules="chapterNameRules"	675	:rules="chapterNameRules"
676	required	676	required
677	></v-text-field>	677	></v-text-field>
678	</v-flex>	678	</v-flex>
679	</v-layout>	679	</v-layout>
680	</v-flex>	680	</v-flex>
681	<!-- DESCRIPTION -->	681	<!-- DESCRIPTION -->
682	<v-flex xs12>	682	<v-flex xs12>
683	<v-layout>	683	<v-layout>
684	<v-flex xs4 class="pt-4 subheading">	684	<v-flex xs4 class="pt-4 subheading">
685	<label class="right">Description:</label>	685	<label class="right">Description:</label>
686	</v-flex>	686	</v-flex>
687	<v-flex xs8 sm8 md7 class="ml-3">	687	<v-flex xs8 sm8 md7 class="ml-3">
688	<v-text-field	688	<v-text-field
689	placeholder="fill your Description"	689	placeholder="fill your Description"
690	:rules="descriptionRules"	690	:rules="descriptionRules"
691	v-model="addCourseDetail.description"	691	v-model="addCourseDetail.description"
692	type="text"	692	type="text"
693	name="email"	693	name="email"
694	required	694	required
695	></v-text-field>	695	></v-text-field>
696	</v-flex>	696	</v-flex>
697	</v-layout>	697	</v-layout>
698	</v-flex>	698	</v-flex>
699	<!-- UPLOAD PPT -->	699	<!-- UPLOAD PPT -->
700	<v-flex xs12>	700	<!-- <v-flex xs12>
701	<v-layout>	701	<v-layout>
702	<v-flex xs4 class="pt-4 subheading">	702	<v-flex xs4 class="pt-4 subheading">
703	<label class="right">Upload PPT:</label>	703	<label class="right">Upload PPT:</label>
704	</v-flex>	704	</v-flex>
705	<v-flex xs8 sm8 md7 class="ml-3">	705	<v-flex xs8 sm8 md7 class="ml-3">
706	<UploadFiles	706	<UploadFiles
707	@fileSelected="fileSelected($event,'uploadPPT')"	707	@fileSelected="fileSelected($event,'uploadPPT')"
708	label="Add PPT"	708	label="Add PPT"
709	reference="newCoursePpt"	709	reference="newCoursePpt"
710	id="newCoursePptInput"	710	id="newCoursePptInput"
711	:trigger="trigger"	711	:trigger="trigger"
712	></UploadFiles>	712	></UploadFiles>
713	</v-flex>	713	</v-flex>
714	</v-layout>	714	</v-layout>
715	</v-flex>	715	</v-flex>-->
716	<!-- UPLOAD PDF -->	716	<!-- UPLOAD PDF -->
717	<v-flex xs12>	717	<v-flex xs12>
718	<v-layout>	718	<v-layout>
719	<v-flex xs4 class="pt-4 subheading">	719	<v-flex xs4 class="pt-4 subheading">
720	<label class="right">Upload PDF:</label>	720	<label class="right">Upload PDF:</label>
721	</v-flex>	721	</v-flex>
722	<v-flex xs8 sm8 md7 class="ml-3">	722	<v-flex xs8 sm8 md7 class="ml-3">
723	<UploadPdf	723	<UploadPdf
724	@pdfFileSelected="pdfFileSelected($event,'uploadPDF')"	724	@pdfFileSelected="pdfFileSelected($event,'uploadPDF')"
725	label="Add PDF"	725	label="Add PDF"
726	reference="newCoursePdf"	726	reference="newCoursePdf"
727	id="newCoursePdfInput"	727	id="newCoursePdfInput"
728	:emptyPdf="emptyPdf"	728	:emptyPdf="emptyPdf"
729	></UploadPdf>	729	></UploadPdf>
730	</v-flex>	730	</v-flex>
731	</v-layout>	731	</v-layout>
732	</v-flex>	732	</v-flex>
733	<v-layout>	733	<v-layout>
734	<v-flex xs12>	734	<v-flex xs12>
735	<div v-for="(chapterPoints,index) in finds" :key="index">	735	<div v-for="(chapterPoints,index) in finds" :key="index">
736	<v-layout>	736	<v-layout>
737	<v-flex xs4 class="pt-4 subheading">	737	<v-flex xs4 class="pt-4 subheading">
738	<label class="right">Chapter Points:</label>	738	<label class="right">Chapter Points:</label>
739	</v-flex>	739	</v-flex>
740	<v-flex xs8 sm8 md6 class="ml-3">	740	<v-flex xs8 sm8 md6 class="ml-3">
741	<v-text-field	741	<v-text-field
742	placeholder="fill your Chapter Points"	742	placeholder="fill your Chapter Points"
743	v-model="chapterPoints.value"	743	v-model="chapterPoints.value"
744	type="text"	744	type="text"
745	required	745	required
746	></v-text-field>	746	></v-text-field>
747	</v-flex>	747	</v-flex>
748	<v-flex xs2 class="pt-4">	748	<v-flex xs2 class="pt-4">
749	<v-icon @click="deleteFind(index)" v-if="index !=0 ">cancel</v-icon>	749	<v-icon @click="deleteFind(index)" v-if="index !=0 ">cancel</v-icon>
750	<v-icon @click="addFind">add_circle</v-icon>	750	<v-icon @click="addFind">add_circle</v-icon>
751	</v-flex>	751	</v-flex>
752	</v-layout>	752	</v-layout>
753	</div>	753	</div>
754	</v-flex>	754	</v-flex>
755	</v-layout>	755	</v-layout>
756	<v-layout>	756	<v-layout>
757	<v-flex xs12 sm12>	757	<v-flex xs12 sm12>
758	<v-layout class="right">	758	<v-layout class="right">
759	<v-btn @click="clear();" round dark class="clear-button">Clear</v-btn>	759	<v-btn @click="clear();" round dark class="clear-button">Clear</v-btn>
760	<v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>	760	<v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
761	</v-layout>	761	</v-layout>
762	</v-flex>	762	</v-flex>
763	</v-layout>	763	</v-layout>
764	</v-container>	764	</v-container>
765	</v-form>	765	</v-form>
766	</v-card>	766	</v-card>
767	</v-dialog>	767	</v-dialog>
768	<v-snackbar	768	<v-snackbar
769	:timeout="timeout"	769	:timeout="timeout"
770	:top="y === 'top'"	770	:top="y === 'top'"
771	:right="x === 'right'"	771	:right="x === 'right'"
772	:vertical="mode === 'vertical'"	772	:vertical="mode === 'vertical'"
773	v-model="snackbar"	773	v-model="snackbar"
774	:color="color"	774	:color="color"
775	>{{ text }}</v-snackbar>	775	>{{ text }}</v-snackbar>
776	<div class="loader" v-if="showLoader">	776	<div class="loader" v-if="showLoader">
777	<v-progress-circular indeterminate color="white"></v-progress-circular>	777	<v-progress-circular indeterminate color="white"></v-progress-circular>
778	</div>	778	</div>
779	</v-container>	779	</v-container>
780	</template>	780	</template>
781		781
782	<script>	782	<script>
783	import http from "@/Services/http.js";	783	import http from "@/Services/http.js";
784	import UploadFiles from "@/pages/Common/UploadFiles.vue";	784	import UploadFiles from "@/pages/Common/UploadFiles.vue";
785	import UploadPdf from "@/pages/Common/UploadPdf.vue";	785	import UploadPdf from "@/pages/Common/UploadPdf.vue";
786	import AllApiCalls from "@/Services/AllApiCalls.js";	786	import AllApiCalls from "@/Services/AllApiCalls.js";
787		787
788	export default {	788	export default {
789	mixins: [AllApiCalls],	789	mixins: [AllApiCalls],
790	components: {	790	components: {
791	UploadFiles,	791	UploadFiles,
792	UploadPdf,	792	UploadPdf,
793	},	793	},
794	data: () => ({	794	data: () => ({
795	snackbar: false,	795	snackbar: false,
796	y: "top",	796	y: "top",
797	x: "right",	797	x: "right",
798	mode: "",	798	mode: "",
799	timeout: 3000,	799	timeout: 3000,
800	text: "",	800	text: "",
801	loading: false,	801	loading: false,
802	color: "",	802	color: "",
803	date: null,	803	date: null,
804	search: "",	804	search: "",
805	show: true,	805	show: true,
806	addCourseDetailDialog: false,	806	addCourseDetailDialog: false,
807	showSearch: false,	807	showSearch: false,
808	showLoader: false,	808	showLoader: false,
809	editCourseDetailDialog: false,	809	editCourseDetailDialog: false,
810	editChapterDetailDialog: false,	810	editChapterDetailDialog: false,
811	viewProfileGallery: false,	811	viewProfileGallery: false,
812	valid: true,	812	valid: true,
813	editLoading: false,	813	editLoading: false,
814	addclass: [],	814	addclass: [],
815	courseData: [],	815	courseData: [],
816	addSection: [],	816	addSection: [],
817	getCourse: {},	817	getCourse: {},
818	finds: [{ value: "" }],	818	finds: [{ value: "" }],
819	findsChapterPoint: [{ value: "" }],	819	findsChapterPoint: [{ value: "" }],
820	updates: [],	820	updates: [],
821	youTubeLink: {},	821	youTubeLink: {},
822	addCourseDetail: {	822	addCourseDetail: {
823	chapters: [	823	chapters: [
824	{	824	{
825	chapterName: "",	825	chapterName: "",
826	description: "",	826	description: "",
827	chapterPoints: [],	827	chapterPoints: [],
828	},	828	},
829	],	829	],
830	},	830	},
831	chapters: [],	831	chapters: [],
832	pagination: {	832	pagination: {
833	rowsPerPage: 10,	833	rowsPerPage: 10,
834	},	834	},
835	editFiles: [],	835	editFiles: [],
836	files: [],	836	files: [],
837	courseData: [],	837	courseData: [],
838	token: "",	838	token: "",
839	courseId: "",	839	courseId: "",
840	clsssRules: [(v) => !!v \|\| " Class is required"],	840	clsssRules: [(v) => !!v \|\| " Class is required"],
841	courseRules: [(v) => !!v \|\| " Course is required"],	841	courseRules: [(v) => !!v \|\| " Course is required"],
842	chapterNameRules: [(v) => !!v \|\| " Tilte is required"],	842	chapterNameRules: [(v) => !!v \|\| " Tilte is required"],
843	descriptionRules: [(v) => !!v \|\| " Description is required"],	843	descriptionRules: [(v) => !!v \|\| " Description is required"],
844	headers: [	844	headers: [
845	{	845	{
846	align: "",	846	align: "",
847	text: "No",	847	text: "No",
848	sortable: false,	848	sortable: false,
849	value: "index",	849	value: "index",
850	},	850	},
851	{	851	{
852	text: "Class Name",	852	text: "Class Name",
853	value: "classNum",	853	value: "classNum",
854	sortable: false,	854	sortable: false,
855	align: "center",	855	align: "center",
856	},	856	},
857	{	857	{
858	text: "Course Name",	858	text: "Course Name",
859	value: "courseName",	859	value: "courseName",
860	sortable: false,	860	sortable: false,
861	align: "center",	861	align: "center",
862	},	862	},
863	{ text: "Action", value: "", sortable: false, align: "center" },	863	{ text: "Action", value: "", sortable: false, align: "center" },
864	],	864	],
865	CourseDetailsList: [],	865	CourseDetailsList: [],
866	editedIndex: -1,	866	editedIndex: -1,
867	editedItem: {},	867	editedItem: {},
868	editedCourse: {},	868	editedCourse: {},
869	editChapter: {	869	editChapter: {
870	chapterPoints: [],	870	chapterPoints: [],
871	},	871	},
872	index: "",	872	index: "",
873	addChapterItem: {},	873	addChapterItem: {},
874	addChapterItemObj: {},	874	addChapterItemObj: {},
875	addChapterDialog: false,	875	addChapterDialog: false,
876	}),	876	}),
877	methods: {	877	methods: {
878	getCourses(classId) {	878	getCourses(classId) {
879	this.showLoader = true;	879	this.showLoader = true;
880	http()	880	http()
881	.get("/getCourseesList", {	881	.get("/getCourseesList", {
882	params: {	882	params: {
883	classId: classId,	883	classId: classId,
884	},	884	},
885	})	885	})
886	.then((response) => {	886	.then((response) => {
887	this.editChapter.courseId = "";	887	this.editChapter.courseId = "";
888	this.courseData = response.data.data;	888	this.courseData = response.data.data;
889	// console.log("this.courseData", this.courseData);	889	// console.log("this.courseData", this.courseData);
890	this.showLoader = false;	890	this.showLoader = false;
891	})	891	})
892	.catch((err) => {	892	.catch((err) => {
893	console.log("err====>", err);	893	console.log("err====>", err);
894	this.showLoader = false;	894	this.showLoader = false;
895	});	895	});
896	},	896	},
897	getCourseDetailsList() {	897	getCourseDetailsList() {
898	this.showLoader = true;	898	this.showLoader = true;
899	http()	899	http()
900	.get("/getParticularCourseDetail", {	900	.get("/getParticularCourseDetail", {
901	params: {	901	params: {
902	courseId: this.getCourse.courseId,	902	courseId: this.getCourse.courseId,
903	},	903	},
904	})	904	})
905	.then((response) => {	905	.then((response) => {
906	this.CourseDetailsList = response.data.data;	906	this.CourseDetailsList = response.data.data;
907	if (response.data.data[0]) {	907	if (response.data.data[0]) {
908	this.chapters = response.data.data[0].chapters;	908	this.chapters = response.data.data[0].chapters;
909	}	909	}
910	this.showLoader = false;	910	this.showLoader = false;
911	})	911	})
912	.catch((error) => {	912	.catch((error) => {
913	// console.log("err====>", err);	913	// console.log("err====>", err);
914	this.showLoader = false;	914	this.showLoader = false;
915	if (error.response.status === 401) {	915	if (error.response.status === 401) {
916	this.$router.replace({ path: "/" });	916	this.$router.replace({ path: "/" });
917	this.$store.dispatch("setToken", null);	917	this.$store.dispatch("setToken", null);
918	this.$store.dispatch("Id", null);	918	this.$store.dispatch("Id", null);
919	}	919	}
920	});	920	});
921	},	921	},
922	courseTableRow(id) {	922	courseTableRow(id) {
923	this.courseId = id;	923	this.courseId = id;
924	},	924	},
925	addChapters(item) {	925	addChapters(item) {
926	this.editedIndex = this.CourseDetailsList.indexOf(item);	926	this.editedIndex = this.CourseDetailsList.indexOf(item);
927	this.addChapterItemObj = Object.assign({}, item);	927	this.addChapterItemObj = Object.assign({}, item);
928	this.addChapterItem.courseDetailId = this.addChapterItemObj._id;	928	this.addChapterItem.courseDetailId = this.addChapterItemObj._id;
929	this.addChapterDialog = true;	929	this.addChapterDialog = true;
930	},	930	},
931	submitChapter() {	931	submitChapter() {
932	this.addChapterItem.chapterPoints = [];	932	this.addChapterItem.chapterPoints = [];
933	for (let i = 0; i < this.findsChapterPoint.length; i++) {	933	for (let i = 0; i < this.findsChapterPoint.length; i++) {
934	this.addChapterItem.chapterPoints.push(this.findsChapterPoint[i].value);	934	this.addChapterItem.chapterPoints.push(this.findsChapterPoint[i].value);
935	}	935	}
936	this.loading = true;	936	this.loading = true;
937	http()	937	http()
938	.put("/addChapters", this.addChapterItem)	938	.put("/addChapters", this.addChapterItem)
939	.then((response) => {	939	.then((response) => {
940	this.addChapterDialog = false;	940	this.addChapterDialog = false;
941	this.loading = false;	941	this.loading = false;
942	this.snackbar = true;	942	this.snackbar = true;
943	this.text = response.data.message;	943	this.text = response.data.message;
944	this.color = "green";	944	this.color = "green";
945	this.addChapterItem = {};	945	this.addChapterItem = {};
946	this.removeChapterPoint();	946	this.removeChapterPoint();
947	this.getCourseDetailsList();	947	this.getCourseDetailsList();
948	})	948	})
949	.catch((error) => {	949	.catch((error) => {
950	this.snackbar = true;	950	this.snackbar = true;
951	this.text = error.response.data.message;	951	this.text = error.response.data.message;
952	this.color = "error";	952	this.color = "error";
953	this.loading = false;	953	this.loading = false;
954	});	954	});
955	},	955	},
956	profile(item) {	956	profile(item) {
957	console.log("chaper - ", item);	957	console.log("chaper - ", item);
958	this.editedIndex = this.chapters.indexOf(item);	958	this.editedIndex = this.chapters.indexOf(item);
959	this.editedItem = Object.assign({}, item);	959	this.editedItem = Object.assign({}, item);
960	this.viewProfileGallery = true;	960	this.viewProfileGallery = true;
961	},	961	},
962	editItem(item) {	962	editItem(item) {
963	this.editedIndex = this.CourseDetailsList.indexOf(item);	963	this.editedIndex = this.CourseDetailsList.indexOf(item);
964	this.editedCourse = Object.assign({}, item);	964	this.editedCourse = Object.assign({}, item);
965	this.editCourseDetailDialog = true;	965	this.editCourseDetailDialog = true;
966	},	966	},
967	editChapterItem(item) {	967	editChapterItem(item) {
968	this.editedIndex = this.chapters.indexOf(item);	968	this.editedIndex = this.chapters.indexOf(item);
969	this.editChapter = Object.assign({}, item);	969	this.editChapter = Object.assign({}, item);
970	this.updates = [];	970	this.updates = [];
971	for (let i = 0; i < this.editChapter.chapterPoints.length; i++) {	971	for (let i = 0; i < this.editChapter.chapterPoints.length; i++) {
972	this.updates.push({ value: this.editChapter.chapterPoints[i] });	972	this.updates.push({ value: this.editChapter.chapterPoints[i] });
973	}	973	}
974	this.editChapterDetailDialog = true;	974	this.editChapterDetailDialog = true;
975	},	975	},
976	deleteItem(item) {	976	deleteItem(item) {
977	let deleteGallery = {	977	let deleteGallery = {
978	courseDetailId: item._id,	978	courseDetailId: item._id,
979	};	979	};
980	http()	980	http()
981	.delete(	981	.delete(
982	"/deleteCourseDetail",	982	"/deleteCourseDetail",
983	confirm("Are you sure you want to delete this?") && {	983	confirm("Are you sure you want to delete this?") && {
984	params: deleteGallery,	984	params: deleteGallery,
985	headers: {	985	headers: {
986	Authorization: "Bearer " + this.token,	986	Authorization: "Bearer " + this.token,
987	},	987	},
988	}	988	}
989	)	989	)
990	.then((response) => {	990	.then((response) => {
991	this.snackbar = true;	991	this.snackbar = true;
992	this.text = "Successfully delete Course Details";	992	this.text = "Successfully delete Course Details";
993	this.color = "green";	993	this.color = "green";
994	this.getCourseDetailsList();	994	this.getCourseDetailsList();
995	})	995	})
996	.catch((error) => {	996	.catch((error) => {
997	// console.log(error);	997	// console.log(error);
998	this.snackbar = true;	998	this.snackbar = true;
999	this.text = error.response.data.message;	999	this.text = error.response.data.message;
1000	this.color = "error";	1000	this.color = "error";
1001	});	1001	});
1002	},	1002	},
1003	deleteChapters(item) {	1003	deleteChapters(item) {
1004	// console.log("item", item);	1004	// console.log("item", item);
1005	let deleteChapters = {	1005	let deleteChapters = {
1006	courseDetailId: this.courseId,	1006	courseDetailId: this.courseId,
1007	chapterId: item._id,	1007	chapterId: item._id,
1008	};	1008	};
1009	http()	1009	http()
1010	.put(	1010	.put(
1011	"/deleteChapters",	1011	"/deleteChapters",
1012	confirm("Are you sure you want to delete this?") && deleteChapters	1012	confirm("Are you sure you want to delete this?") && deleteChapters
1013	)	1013	)
1014	.then((response) => {	1014	.then((response) => {
1015	this.snackbar = true;	1015	this.snackbar = true;
1016	this.text = "Successfully delete Chapters";	1016	this.text = "Successfully delete Chapters";
1017	this.color = "green";	1017	this.color = "green";
1018	this.getCourseDetailsList();	1018	this.getCourseDetailsList();
1019	})	1019	})
1020	.catch((error) => {	1020	.catch((error) => {
1021	// console.log(error);	1021	// console.log(error);
1022	this.snackbar = true;	1022	this.snackbar = true;
1023	this.text = error.response.data.message;	1023	this.text = error.response.data.message;
1024	this.color = "error";	1024	this.color = "error";
1025	});	1025	});
1026	},	1026	},
1027	close() {	1027	close() {
1028	this.editCourseDetailDialog = false;	1028	this.editCourseDetailDialog = false;
1029	},	1029	},
1030	closeProfileGallery() {	1030	closeProfileGallery() {
1031	this.viewProfileGallery = false;	1031	this.viewProfileGallery = false;
1032	},	1032	},
1033	submit() {	1033	submit() {
1034	let chapters = [];	1034	let chapters = [];
1035	var chapterPoints = [];	1035	var chapterPoints = [];
1036	for (let i = 0; i < this.finds.length; i++) {	1036	for (let i = 0; i < this.finds.length; i++) {
1037	chapterPoints.push(this.finds[i].value);	1037	chapterPoints.push(this.finds[i].value);
1038	// console.log("this.finds[i].value", this.finds[i].value);	1038	// console.log("this.finds[i].value", this.finds[i].value);
1039	chapters = [	1039	chapters = [
1040	{	1040	{
1041	chapterName: this.addCourseDetail.chapterName,	1041	chapterName: this.addCourseDetail.chapterName,
1042	description: this.addCourseDetail.description,	1042	description: this.addCourseDetail.description,
1043	chapterPoints: chapterPoints,	1043	chapterPoints: chapterPoints,
1044	uploadPdf: this.pdfFile,	1044	uploadPdf: this.pdfFile,
1045	uploadPpt: this.pptFile,	1045	uploadPpt: this.pptFile,
1046	},	1046	},
1047	];	1047	];
1048	}	1048	}
1049	if (this.$refs.form.validate()) {	1049	if (this.$refs.form.validate()) {
1050	// console.log("this.addCourseDetail", this.addCourseDetail);	1050	// console.log("this.addCourseDetail", this.addCourseDetail);
1051	var courseDetailsData = {	1051	var courseDetailsData = {
1052	classId: this.addCourseDetail.classId,	1052	classId: this.addCourseDetail.classId,
1053	courseId: this.addCourseDetail.courseId,	1053	courseId: this.addCourseDetail.courseId,
1054	chapters: chapters,	1054	chapters: chapters,
1055	};	1055	};
1056	this.loading = true;	1056	this.loading = true;
1057	http()	1057	http()
1058	.post("/createCourseDetail", courseDetailsData)	1058	.post("/createCourseDetail", courseDetailsData)
1059	.then((response) => {	1059	.then((response) => {
1060	this.addCourseDetailDialog = false;	1060	this.addCourseDetailDialog = false;
1061	this.loading = false;	1061	this.loading = false;
1062	this.snackbar = true;	1062	this.snackbar = true;
1063	this.text = response.data.message;	1063	this.text = response.data.message;
1064	this.color = "green";	1064	this.color = "green";
1065	this.clear();	1065	this.clear();
1066	this.trigger = "reset";	1066	this.trigger = "reset";
1067	this.emptyPdf = "reset";	1067	this.emptyPdf = "reset";
1068	this.removeAddFind();	1068	this.removeAddFind();
1069	})	1069	})
1070	.catch((error) => {	1070	.catch((error) => {
1071	this.snackbar = true;	1071	this.snackbar = true;
1072	this.text = error.response.data.message;	1072	this.text = error.response.data.message;
1073	this.color = "error";	1073	this.color = "error";
1074	this.loading = false;	1074	this.loading = false;
1075	});	1075	});
1076	}	1076	}
1077	},	1077	},
1078	clear() {	1078	clear() {
1079	this.$refs.form.reset();	1079	this.$refs.form.reset();
1080	},	1080	},
1081	saveChapter() {	1081	saveChapter() {
1082	this.editedItem.courseDetailId = this.editedItem._id;	1082	this.editedItem.courseDetailId = this.editedItem._id;
1083	// console.log("this.updates", this.updates);	1083	// console.log("this.updates", this.updates);
1084	var chapterPoints = [];	1084	var chapterPoints = [];
1085	for (let i = 0; i < this.updates.length; i++) {	1085	for (let i = 0; i < this.updates.length; i++) {
1086	chapterPoints.push(this.updates[i].value);	1086	chapterPoints.push(this.updates[i].value);
1087	}	1087	}
1088	var updateData = {	1088	var updateData = {
1089	courseDetailId: this.courseId,	1089	courseDetailId: this.courseId,
1090	chapterId: this.editChapter._id,	1090	chapterId: this.editChapter._id,
1091	chapterName: this.editChapter.chapterName,	1091	chapterName: this.editChapter.chapterName,
1092	description: this.editChapter.description,	1092	description: this.editChapter.description,
1093	chapterPoints: chapterPoints,	1093	chapterPoints: chapterPoints,
1094	uploadPdf: this.pdfFile,	1094	uploadPdf: this.pdfFile,
1095	uploadPpt: this.pptFile,	1095	uploadPpt: this.pptFile,
1096	};	1096	};
1097	this.editLoading = true;	1097	this.editLoading = true;
1098	http()	1098	http()
1099	.put("/updateChapters", updateData)	1099	.put("/updateChapters", updateData)
1100	.then((response) => {	1100	.then((response) => {
1101	this.editChapterDetailDialog = false;	1101	this.editChapterDetailDialog = false;
1102	this.snackbar = true;	1102	this.snackbar = true;
1103	this.text = response.data.message;	1103	this.text = response.data.message;
1104	this.color = "green";	1104	this.color = "green";
1105	this.editLoading = false;	1105	this.editLoading = false;
1106	// this.removeUpdatePoints();	1106	// this.removeUpdatePoints();
1107	this.trigger = "reset";	1107	this.trigger = "reset";
1108	this.emptyPdf = "reset";	1108	this.emptyPdf = "reset";
1109	this.getCourseDetailsList();	1109	this.getCourseDetailsList();
1110	})	1110	})
1111	.catch((error) => {	1111	.catch((error) => {
1112	this.editLoading = false;	1112	this.editLoading = false;
1113	this.snackbar = true;	1113	this.snackbar = true;
1114	this.text = error.response.data.message;	1114	this.text = error.response.data.message;
1115	this.color = "error";	1115	this.color = "error";
1116	});	1116	});
1117	},	1117	},
1118	save() {	1118	save() {
1119	var updateData = {	1119	var updateData = {
1120	courseDetailId: this.editedCourse._id,	1120	courseDetailId: this.editedCourse._id,
1121	courseId: this.editedCourse.courseId,	1121	courseId: this.editedCourse.courseId,
1122	classId: this.editedCourse.classId,	1122	classId: this.editedCourse.classId,
1123	};	1123	};
1124	this.editLoading = true;	1124	this.editLoading = true;
1125	http()	1125	http()
1126	.put("/updateCourseDetail", updateData)	1126	.put("/updateCourseDetail", updateData)
1127	.then((response) => {	1127	.then((response) => {
1128	this.getCourseDetailsList();	1128	this.getCourseDetailsList();
1129	this.editCourseDetailDialog = false;	1129	this.editCourseDetailDialog = false;
1130	this.snackbar = true;	1130	this.snackbar = true;
1131	this.text = response.data.message;	1131	this.text = response.data.message;
1132	this.color = "green";	1132	this.color = "green";
1133	this.editLoading = false;	1133	this.editLoading = false;
1134	// this.editChapterPointName = "";	1134	// this.editChapterPointName = "";
1135	this.editFiles = [];	1135	this.editFiles = [];
1136	})	1136	})
1137	.catch((error) => {	1137	.catch((error) => {
1138	this.editLoading = false;	1138	this.editLoading = false;
1139	this.snackbar = true;	1139	this.snackbar = true;
1140	this.text = error.response.data.message;	1140	this.text = error.response.data.message;
1141	this.color = "error";	1141	this.color = "error";
1142	});	1142	});
1143	},	1143	},
1144	getAllClasses() {	1144	getAllClasses() {
1145	http()	1145	http()
1146	.get("/getClassesList", {	1146	.get("/getClassesList", {
1147	headers: { Authorization: "Bearer " + this.token },	1147	headers: { Authorization: "Bearer " + this.token },
1148	})	1148	})
1149	.then((response) => {	1149	.then((response) => {
1150	this.addclass = response.data.data;	1150	this.addclass = response.data.data;
1151	})	1151	})
1152	.catch((err) => {	1152	.catch((err) => {
1153	// console.log("err====>", err);	1153	// console.log("err====>", err);
1154	});	1154	});
1155	},	1155	},
1156	removeChapterPoint: function () {	1156	removeChapterPoint: function () {
1157	this.findsChapterPoint = [{ value: "" }];	1157	this.findsChapterPoint = [{ value: "" }];
1158	},	1158	},
1159	removeAddFind: function () {	1159	removeAddFind: function () {
1160	this.finds = [{ value: "" }];	1160	this.finds = [{ value: "" }];
1161	},	1161	},
1162	addFind: function () {	1162	addFind: function () {
1163	this.finds.push({ value: "" });	1163	this.finds.push({ value: "" });
1164	},	1164	},
1165	addChapterPoint: function () {	1165	addChapterPoint: function () {
1166	this.findsChapterPoint.push({ value: "" });	1166	this.findsChapterPoint.push({ value: "" });
1167	},	1167	},
1168	update: function () {	1168	update: function () {
1169	this.updates.push({ value: "" });	1169	this.updates.push({ value: "" });
1170	},	1170	},
1171	// removeUpdatePoints: function() {	1171	// removeUpdatePoints: function() {
1172	// this.updates = [{ value: "" }];	1172	// this.updates = [{ value: "" }];
1173	// },	1173	// },
1174	deleteFind: function (index) {	1174	deleteFind: function (index) {
1175	this.finds.splice(index, 1);	1175	this.finds.splice(index, 1);
1176	if (index === 0) this.addFind();	1176	if (index === 0) this.addFind();
1177	},	1177	},
1178	deleteChapterPoint: function (index) {	1178	deleteChapterPoint: function (index) {
1179	this.findsChapterPoint.splice(index, 1);	1179	this.findsChapterPoint.splice(index, 1);
1180	if (index === 0) this.addChapterPoint();	1180	if (index === 0) this.addChapterPoint();
1181	},	1181	},
1182	deleteUpdate: function (index) {	1182	deleteUpdate: function (index) {
1183	this.updates.splice(index, 1);	1183	this.updates.splice(index, 1);
1184	if (index === 0) this.update();	1184	if (index === 0) this.update();
1185	},	1185	},
1186	deleteUrl: function (index, youTubelinkId, id) {	1186	deleteUrl: function (index, youTubelinkId, id) {
1187	this.editChapter.chapterPoints.splice(index, 1);	1187	this.editChapter.chapterPoints.splice(index, 1);
1188	if (index === 0) this.update();	1188	if (index === 0) this.update();
1189	},	1189	},
1190	displaySearch() {	1190	displaySearch() {
1191	this.show = false;	1191	this.show = false;
1192	this.showSearch = true;	1192	this.showSearch = true;
1193	},	1193	},
1194	closeSearch() {	1194	closeSearch() {
1195	this.showSearch = false;	1195	this.showSearch = false;
1196	this.show = true;	1196	this.show = true;
1197	this.search = "";	1197	this.search = "";
1198	},	1198	},
1199	},	1199	},
1200	mounted() {	1200	mounted() {
1201	this.token = this.$store.state.token;	1201	this.token = this.$store.state.token;
1202	this.getAllClasses();	1202	this.getAllClasses();
1203	},	1203	},
1204	};	1204	};
1205	</script>	1205	</script>

src/pages/Students/students.vue

Diff comments View file @39a6d21

 <template>
   <v-container fluid class="body-color">
     <!-- ****** EDITS  STUDENTS DETAILS ****** -->
     <v-dialog v-model="editStudentDialog" max-width="1700px" scrollable>
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Student Details</label>
             <v-icon size="24" class="right" @click="editStudentDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-card-text>
           <v-form ref="form">
             <v-container fluid>
               <v-layout>
                 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center">
                   <v-avatar size="100px" v-if="!editedItem.profilePicUrl && !editImageUrl">
                     <img src="/static/icon/user.png" />
                   </v-avatar>
                   <img
                     :src="editedItem.profilePicUrl"
                     v-else-if="editedItem.profilePicUrl && !editImageUrl"
                     height="150"
                     style="border-radius:50%; width:150px"
                   />
                   <img
                     v-if="editImageUrl"
                     :src="editImageUrl"
                     style="border-radius:50%; width:150px;height:150px"
                   />
                   <input
                     type="file"
                     style="display: none"
                     ref="editDataImage"
                     accept="image/*"
                     @change="onEditFilePicked"
                   />
                 </v-flex>
               </v-layout>
               <v-layout wrap>
                 <v-flex xs12 sm4>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right hidden-xs-only hidden-sm-only">Select 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-select
                         :items="addclass"
                         label="Select Class"
                         v-model="editedItem.select"
                         item-text="classNum"
                         item-value="_id"
                         name="Select Class"
                         @change="getSections(editedItem.select)"
                         required
                       ></v-select>
                     </v-flex>
                   </v-layout>
                 </v-flex>
                 <v-flex xs12 sm4>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right hidden-xs-only hidden-sm-only">Select Section:</label>
                       <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Section:</label>
                     </v-flex>
                     <v-flex xs8 class="ml-3">
                       <v-select
                         :items="addSection"
                         label="Select Section"
                         v-model="editedItem.selectSection"
                         item-text="name"
                         item-value="_id"
                         name="Select Section"
                         required
                       ></v-select>
                     </v-flex>
                   </v-layout>
                 </v-flex>
                 <v-flex xs12 sm4>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right hidden-xs-only hidden-sm-only">Full 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-layout>
               <v-layout wrap>
                 <v-flex xs12 sm4>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right hidden-xs-only hidden-sm-only">Email Id:</label>
                       <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Email:</label>
                     </v-flex>
                     <v-flex xs8 class="ml-3">
                       <v-text-field
                         placeholder="fill your email"
                         v-model="editedItem.email"
                         type="text"
                         name="email"
                         required
                       ></v-text-field>
                     </v-flex>
                   </v-layout>
                 </v-flex>
                 <v-flex xs12 sm4>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>
                       <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label>
                     </v-flex>
                     <v-flex xs8 class="ml-3">
                       <v-menu
                         ref="menu"
                         :close-on-content-click="false"
                         v-model="menu1"
                         :nudge-right="40"
                         lazy
                         transition="scale-transition"
                         offset-y
                         full-width
                         min-width="290px"
                       >
                         <v-text-field
                           slot="activator"
                           v-model="editedItem.dob"
                           placeholder="Select Dob"
                         ></v-text-field>
                         <v-date-picker
                           ref="picker"
                           v-model="editedItem.dob"
                           :max="new Date().toISOString().substr(0, 10)"
                           min="1950-01-01"
                           @input="menu1 = false"
                         ></v-date-picker>
                       </v-menu>
                     </v-flex>
                   </v-layout>
                 </v-flex>
                 <v-flex xs12 sm4>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right">City:</label>
                     </v-flex>
                     <v-flex xs8 class="ml-3">
                       <v-text-field
                         v-model="editedItem.city"
                         placeholder="fill your City Name"
                         name="City"
                         type="text"
                         required
                       ></v-text-field>
                     </v-flex>
                   </v-layout>
                 </v-flex>
               </v-layout>
               <v-layout wrap>
                 <v-flex xs12 sm4>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right hidden-xs-only hidden-sm-only">Blood Group:</label>
                       <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Blood:</label>
                     </v-flex>
                     <v-flex xs8 class="ml-3">
                       <v-text-field
                         v-model="editedItem.bloodGroup"
                         placeholder="fill your BloodGroup"
                         name="state"
                         type="text"
                         required
                       ></v-text-field>
                     </v-flex>
                   </v-layout>
                 </v-flex>
                 <v-flex xs12 sm4>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right">Gender:</label>
                     </v-flex>
                     <v-flex xs8 class="ml-3">
                       <v-select
                         :items="gender"
                         v-model="editedItem.gender"
                         placeholder="Select Gender"
                         required
                       ></v-select>
                     </v-flex>
                   </v-layout>
                 </v-flex>
                 <v-flex xs12 sm4>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right">Medical Notes:</label>
                     </v-flex>
                     <v-flex xs8 class="ml-3">
                       <v-text-field
                         v-model="editedItem.medicalNotes"
                         placeholder="fill your medicalNotes"
                         required
                       ></v-text-field>
                     </v-flex>
                   </v-layout>
                 </v-flex>
               </v-layout>
               <v-layout wrap>
                 <v-flex xs12 sm4>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right">Height:</label>
                     </v-flex>
                     <v-flex xs8 class="ml-3">
                       <v-text-field
                         v-model="editedItem.height"
                         placeholder="fill your Height"
                         name="state"
                         type="text"
                         required
                       ></v-text-field>
                     </v-flex>
                   </v-layout>
                 </v-flex>
                 <v-flex xs12 sm4>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right">Weight:</label>
                     </v-flex>
                     <v-flex xs8 class="ml-3">
                       <v-text-field
                         v-model="editedItem.weight"
                         placeholder="fill your Weight"
                         name="pincode"
                         required
                       ></v-text-field>
                     </v-flex>
                   </v-layout>
                 </v-flex>
                 <v-flex xs12 sm4>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
                       <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label>
                     </v-flex>
                     <v-flex xs8 class="ml-3">
                       <v-text-field
                         label="Select Image"
                         @click="pickEditFile"
                         v-model="editImageName"
                         append-icon="attach_file"
                       ></v-text-field>
                     </v-flex>
                   </v-layout>
                 </v-flex>
               </v-layout>
               <v-layout wrap>
                 <v-flex xs12 sm4>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right">State:</label>
                     </v-flex>
                     <v-flex xs8 class="ml-3">
                       <v-text-field
                         v-model="editedItem.state"
                         placeholder="fill your State Name"
                         name="state"
                         type="text"
                         required
                       ></v-text-field>
                     </v-flex>
                   </v-layout>
                 </v-flex>
                 <v-flex xs12 sm4>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right">Pincode:</label>
                     </v-flex>
                     <v-flex xs8 class="ml-3">
                       <v-text-field
                         v-model="editedItem.pincode"
                         placeholder="fill your pincode"
                         name="pincode"
                         type="number"
                         required
                       ></v-text-field>
                     </v-flex>
                   </v-layout>
                 </v-flex>
                 <v-flex xs12 sm4>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>
                       <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label>
                     </v-flex>
                     <v-flex xs8 class="ml-3">
                       <v-text-field
                         v-model="editedItem.mobile"
                         placeholder="fill your MobileNo"
                         name="mobileNo"
                         type="number"
                         required
                       ></v-text-field>
                     </v-flex>
                   </v-layout>
                 </v-flex>
               </v-layout>
               <v-layout wrap>
                 <v-flex xs12 sm4>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right hidden-xs-only hidden-sm-only">Select Country:</label>
                       <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label>
                     </v-flex>
                     <v-flex xs8 class="ml-3">
                       <v-autocomplete
                         v-model="editedItem.country"
                         :items="countries"
                         placeholder="Select Country Name"
                         required
                       ></v-autocomplete>
                     </v-flex>
                   </v-layout>
                 </v-flex>
                 <v-flex xs12 sm4 class="hidden-xs-only hidden-sm-only">
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label>
                       <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Roll No:</label>
                     </v-flex>
                     <v-flex xs8 class="ml-3">
                       <v-text-field
                         v-model="editedItem.rollNo"
                         placeholder="fill roll number"
                         required
                       ></v-text-field>
                     </v-flex>
                   </v-layout>
                 </v-flex>
                 <v-flex xs12 sm4 class="hidden-xs-only hidden-sm-only">
                   <v-layout>
                     <v-flex xs4 sm4 class="pt-4 subheading">
                       <label class="right hidden-xs-only hidden-sm-only">Permanent Address:</label>
                       <label
                         class="right hidden-lg-only hidden-md-only hidden-xl-only"
                       >Permanent Address:</label>
                     </v-flex>
                     <v-flex xs12 sm8 class="ml-3">
                       <v-text-field
                         v-model="editedItem.permanentAddress"
                         placeholder="fill Your Permanent Address"
                         required
                       ></v-text-field>
                     </v-flex>
                   </v-layout>
                 </v-flex>
               </v-layout>
               <v-layout class="hidden-xs-only hidden-sm-only">
                 <v-flex xs12 sm4>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right hidden-xs-only hidden-sm-only">Present Address:</label>
                       <label
                         class="right hidden-lg-only hidden-md-only hidden-xl-only"
                       >Present Address:</label>
                     </v-flex>
                     <v-flex xs8 class="ml-3">
                       <v-text-field
                         v-model="editedItem.presentAddress"
                         placeholder="Select Country Name"
                         required
                       ></v-text-field>
                     </v-flex>
                   </v-layout>
                 </v-flex>
               </v-layout>
               <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap>
                 <v-flex xs12 sm12>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label>
                       <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Roll No:</label>
                     </v-flex>
                     <v-flex xs8 class="ml-3">
                       <v-text-field
                         v-model="editedItem.rollNo"
                         placeholder="fill roll number"
                         required
                       ></v-text-field>
                     </v-flex>
                   </v-layout>
                 </v-flex>
               </v-layout>
               <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap>
                 <v-flex xs12 sm12>
                   <v-layout>
                     <v-flex xs12 sm3 class="pt-4 subheading text-xs-center">
                       <label class>Present Address :</label>
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs12 sm12>
                       <v-textarea
                         v-model="editedItem.presentAddress"
                         placeholder="fill Your present Address"
                         required
                       ></v-textarea>
                     </v-flex>
                   </v-layout>
                 </v-flex>
                 <v-flex xs12 sm12>
                   <v-layout>
                     <v-flex xs12 sm3 class="pt-4 pr-4 subheading text-xs-center addressForm">
                       <label>Permanent addr:</label>
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs12 sm12>
                       <v-textarea
                         name="input-4-3"
                         v-model="editedItem.permanentAddress"
                         placeholder="fill Your Permanent Address"
                         required
                       ></v-textarea>
                     </v-flex>
                   </v-layout>
                 </v-flex>
               </v-layout>
               <v-layout>
                 <v-flex xs12 sm12>
                   <v-layout class="right">
                     <v-btn @click="save" round dark :loading="editLoading" class="add-button">Save</v-btn>
                   </v-layout>
                 </v-flex>
               </v-layout>
             </v-container>
           </v-form>
         </v-card-text>
       </v-card>
     </v-dialog>
     <!-- ****** PROFILE VIEW STUDENTS DEATILS ******  -->
     <v-dialog v-model="profileStudentDialog" max-width="1000px" scrollable>
       <v-card flat class="card-style pa-3" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View Student Details</label>
             <v-icon size="24" class="right" @click="profileStudentDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-card-text>
           <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.profilePicUrl" />
               <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" />
             </v-avatar>
           </v-flex>
           <v-container grid-list-md>
             <v-layout wrap>
               <v-flex xs12 sm5>
                 <v-layout>
                   <v-flex xs6 sm6>
                     <h5 class="right my-1">
                       <b>Full 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>Email:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm8 xs6>
                     <h5 class="my-1 left">{{ editedItem.email }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
             <v-layout wrap>
               <v-flex xs12 sm5>
                 <v-layout>
                   <v-flex xs6 sm6>
                     <b>
                       <h5 class="right my-1">
                         <b>Gender:</b>
                       </h5>
                     </b>
                   </v-flex>
                   <v-flex sm6 xs6>
                     <h5 class="my-1 left">{{ editedItem.gender }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
               <v-flex xs12 sm7>
                 <v-layout>
                   <v-flex xs6 sm4>
                     <b>
                       <h5 class="right my-1">
                         <b>D.O.B:</b>
                       </h5>
                     </b>
                   </v-flex>
                   <v-flex sm8 xs6>
                     <h5 class="my-1">{{ dates(editedItem.dob) }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
             <v-layout wrap>
               <v-flex xs12 sm5>
                 <v-layout>
                   <v-flex xs6 sm6>
                     <b>
                       <h5 class="right my-1">
                         <b>BloodGroup:</b>
                       </h5>
                     </b>
                   </v-flex>
                   <v-flex sm6 xs6>
                     <h5 class="my-1 left">{{ editedItem.bloodGroup }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
               <v-flex xs12 sm7>
                 <v-layout>
                   <v-flex xs6 sm4>
                     <b>
                       <h5 class="right my-1">
                         <b>Roll No. :</b>
                       </h5>
                     </b>
                   </v-flex>
                   <v-flex sm8 xs6>
                     <h5 class="my-1">{{ editedItem.rollNo }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
             <v-layout wrap>
               <v-flex xs12 sm5>
                 <v-layout>
                   <v-flex xs6 sm6>
                     <b>
                       <h5 class="right my-1">
                         <b>Height:</b>
                       </h5>
                     </b>
                   </v-flex>
                   <v-flex sm6 xs6>
                     <h5 class="my-1 left">{{ editedItem.height }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
               <v-flex xs12 sm7>
                 <v-layout>
                   <v-flex xs6 sm4>
                     <b>
                       <h5 class="right my-1">
                         <b>Weight:</b>
                       </h5>
                     </b>
                   </v-flex>
                   <v-flex sm8 xs6>
                     <h5 class="my-1">{{ editedItem.weight }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
             <v-layout wrap>
               <v-flex xs12 sm5>
                 <v-layout>
                   <v-flex xs6 sm6>
                     <b>
                       <h5 class="right my-1">
                         <b>City:</b>
                       </h5>
                     </b>
                   </v-flex>
                   <v-flex sm6 xs6>
                     <h5 class="my-1 left">{{ editedItem.city }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
               <v-flex xs12 sm7>
                 <v-layout>
                   <v-flex xs6 sm4>
                     <b>
                       <h5 class="right my-1">
                         <b>State:</b>
                       </h5>
                     </b>
                   </v-flex>
                   <v-flex sm8 xs6>
                     <h5 class="my-1">{{ editedItem.state }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
             <v-layout wrap>
               <v-flex xs12 sm5>
                 <v-layout>
                   <v-flex xs6 sm6>
                     <b>
                       <h5 class="right my-1">
                         <b>Pincode:</b>
                       </h5>
                     </b>
                   </v-flex>
                   <v-flex sm6 xs6>
                     <h5 class="my-1">{{ editedItem.pincode }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
               <v-flex xs12 sm7>
                 <v-layout>
                   <v-flex xs6 sm4>
                     <b>
                       <h5 class="right my-1">
                         <b>Country:</b>
                       </h5>
                     </b>
                   </v-flex>
                   <v-flex sm7 xs6>
                     <h5 class="my-1">{{ editedItem.country }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
             <v-layout wrap>
               <v-flex xs12 sm5>
                 <v-layout>
                   <v-flex sm6 xs6>
                     <b>
                       <h5 class="right my-1">
                         <b>Mobile No:</b>
                       </h5>
                     </b>
                   </v-flex>
                   <v-flex sm6 xs6>
                     <h5 class="my-1">{{ editedItem.mobile }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
               <v-flex xs12 sm7>
                 <v-layout>
                   <v-flex xs6 sm4>
                     <b>
                       <h5 class="right my-1">
                         <b>FahterName:</b>
                       </h5>
                     </b>
                   </v-flex>
                   <v-flex sm8 xs6>
                     <h5 class="my-1">{{ editedItem.fatherName }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
             <v-layout wrap>
               <v-flex xs12 sm5>
                 <v-layout>
                   <v-flex xs6 sm6>
                     <b>
                       <h5 class="right my-1">
                         <b>MotherName:</b>
                       </h5>
                     </b>
                   </v-flex>
                   <v-flex sm6 xs6>
                     <h5 class="my-1">{{ editedItem.motherName }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
               <v-flex xs12 sm7>
                 <v-layout>
                   <v-flex xs6 sm4>
                     <b>
                       <h5 class="right my-1">
                         <b>FatherCellNo:</b>
                       </h5>
                     </b>
                   </v-flex>
                   <v-flex sm6 xs6>
                     <h5 class="my-1">{{ editedItem.fatherCellNo }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
             <v-layout wrap>
               <v-flex xs12 sm5>
                 <v-layout>
                   <v-flex xs6 sm6>
                     <b>
                       <h5 class="right my-1">
                         <b>MotherCellNo:</b>
                       </h5>
                     </b>
                   </v-flex>
                   <v-flex sm6 xs6>
                     <h5 class="my-1">{{ editedItem.motherCellNo }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
               <v-flex xs12 sm7>
                 <v-layout>
                   <v-flex xs6 sm4>
                     <b>
                       <h5 class="my-1 right">
                         <b>AcademicYear:</b>
                       </h5>
                     </b>
                   </v-flex>
                   <v-flex sm5 xs8>
                     <h5 class="my-1">{{ editedItem.establishmentYear }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
             <v-layout wrap>
               <v-flex xs12 sm5>
                 <v-layout>
                   <v-flex xs6 sm6>
                     <b>
                       <h5 class="my-1 right">
                         <b>MedicalNotes:</b>
                       </h5>
                     </b>
                   </v-flex>
                   <v-flex sm5 xs6>
                     <h5 class="my-1">{{ editedItem.medicalNotes }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
               <v-flex xs12 sm7 class="hidden-xs-only">
                 <v-layout wrap>
                   <v-flex sm4>
                     <b>
                       <h5 class="my-1 right">
                         <b>present Address:</b>
                       </h5>
                     </b>
                   </v-flex>
                   <v-flex sm8>
                     <h5 class="my-1">{{ editedItem.presentAddress }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
               <v-flex sm6 class="hidden-xs-only">
                 <v-layout wrap>
                   <v-flex sm5>
                     <b>
                       <h5 class="my-1 right">
                         <b>Permanent Address:</b>
                       </h5>
                     </b>
                   </v-flex>
                   <v-flex sm7>
                     <h5 class="my-1">{{ editedItem.permanentAddress }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
             <v-layout wrap class="hidden-sm-only hidden-md-only hidden-lg-only hidden-xl-only">
               <v-flex xs12 sm5>
                 <v-layout wrap>
                   <v-flex xs12 sm6>
                     <b>
                       <h5 class="my-1">
                         <b>present Address:-</b>
                       </h5>
                     </b>
                   </v-flex>
                   <v-flex sm5 xs12>
                     <h5 class="my-1">{{ editedItem.presentAddress }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
               <v-flex xs12 sm6>
                 <v-layout wrap>
                   <v-flex xs12 sm6>
                     <b>
                       <h5 class="my-1">
                         <b>Permanent Address:-</b>
                       </h5>
                     </b>
                   </v-flex>
                   <v-flex sm6 xs12>
                     <h5 class="my-1">{{ editedItem.permanentAddress }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
           </v-container>
         </v-card-text>
       </v-card>
     </v-dialog>
     <!-- ****** STUDENTS 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="addStudentDialog = true"
       >
         <v-icon dark>add</v-icon>
       </v-btn>
       <v-btn
         v-if="role != 'TEACHER' "
         round
         class="open-dialog-button hidden-sm-only hidden-xs-only"
         dark
         @click="addStudentDialog = true"
       >
         <v-icon class="white--text pr-1" size="20">add</v-icon>Add Student
       </v-btn>
       <v-card-actions class="hidden-xs-only hidden-sm-only">
         <v-flex md13 lg12>
           <v-layout>
             <v-flex lg3 md4>
               <v-select
                 :items="addclass"
                 label="Select Class"
                 v-model="selectStudents.select"
                 item-text="classNum"
                 item-value="_id"
                 name="Select Class"
                 :rules="classRules"
                 @change="getSections(selectStudents.select)"
                 required
                 class="ml-2"
               ></v-select>
             </v-flex>
             <v-flex lg3 md4 class="ml-2">
               <v-layout>
                 <v-select
                   :items="addSection"
                   label="Select Section"
                   v-model="selectStudents.selectSection"
                   item-text="name"
                   item-value="_id"
                   name="Select Section"
                   :rules="sectionRules"
                   required
                 ></v-select>
               </v-layout>
             </v-flex>
           </v-layout>
         </v-flex>
       </v-card-actions>
       <v-spacer></v-spacer>
       <v-btn
         @click="findStudents()"
         round
         dark
         :loading="loading"
         class="open-dialog-button hidden-xs-only hidden-sm-only"
       >Find</v-btn>
       <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 sm7 lg2 md3 v-if="showSearch">
         <v-layout>
           <v-text-field
             autofocus
             v-model="search"
             label="Search"
             prepend-inner-icon="search"
             color="primary"
           ></v-text-field>
           <v-icon @click="closeSearch" color="error">close</v-icon>
         </v-layout>
       </v-flex>
     </v-toolbar>
     <v-card flat class="elevation-0 transparent">
       <v-flex class="hidden-xl-only hidden-lg-only hidden-md-only">
         <v-layout>
           <v-flex xs4>
             <label class="right mt-4">Select Class:</label>
           </v-flex>
           <v-flex xs8>
             <v-select
               :items="addclass"
               label="Select Class"
               v-model="selectStudents.select"
               item-text="classNum"
               item-value="_id"
               name="Select Class"
               :rules="classRules"
               @change="getSections(selectStudents.select)"
               class="px-2"
             ></v-select>
           </v-flex>
         </v-layout>
         <v-layout>
           <v-flex xs4>
             <label class="right mt-4">Select Section:</label>
           </v-flex>
           <v-flex xs8>
             <v-select
               :items="addSection"
               label="Select Section"
               v-model="selectStudents.selectSection"
               item-text="name"
               item-value="_id"
               name="Select Section"
               :rules="sectionRules"
               class="px-2"
               required
             ></v-select>
           </v-flex>
         </v-layout>
         <v-layout>
           <v-flex xs5 class="mx-auto mb-2">
             <v-btn
               @click="findStudents()"
               block
               round
               dark
               :loading="loading"
               class="add-button"
             >Find</v-btn>
           </v-flex>
         </v-layout>
       </v-flex>
     </v-card>
     <v-data-table
       :headers="headers"
       :items="studentsData"
       :pagination.sync="pagination"
       :search="search"
     >
       <template slot="items" slot-scope="props">
         <tr class="tr">
           <td class="text-xs-center td td-row">{{ props.item.rollNo}}</td>
           <td class="text-xs-center td td-row">
             <v-avatar size="40">
               <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
               <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
             </v-avatar>
           </td>
           <td class="text-xs-center td td-row">{{ props.item.name}}</td>
           <td class="text-xs-center td td-row">{{ props.item.gender }}</td>
           <td class="text-xs-center td td-row">{{ props.item.parentId.fatherName }}</td>
           <td class="text-xs-center td td-row">{{ props.item.parentId.motherName }}</td>
           <td class="text-xs-center td td-row">{{ props.item.establishmentYear }}</td>
           <!-- <td class="text-xs-center td td-row">{{ props.item.mobile}}</td> -->
           <td class="text-xs-center td td-row">
             <v-switch
               class="pl-3"
               :disabled="role === 'TEACHER'"
               v-model="props.item.status"
               @change="suspendStudentStatus(props.item.status,props.item._id)"
             ></v-switch>
           </td>
           <td class="text-xs-center td td-row">
             <span>
               <v-tooltip top>
                 <img
                   slot="activator"
                   style="cursor:pointer; width:25px; height:25px; "
                   class="mr-3"
                   @click="profile(props.item)"
                   src="/static/icon/view.png"
                 />
                 <span>View</span>
               </v-tooltip>
               <v-tooltip top v-if="role != 'TEACHER' ">
                 <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 v-if="role != 'TEACHER' ">
                 <img
                   slot="activator"
                   style="cursor:pointer; width:20px; height:20px; "
                   class="mr-3"
                   @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>
     <!-- DIALOG -- ADD STUDENTS DETAILS -->
     <v-dialog v-model="addStudentDialog" max-width="1280" v-if="addStudentDialog">
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Student</label>
             <v-icon
               size="24"
               class="right"
               @click="$refs.parentForm.reset();$refs.parentFormLgScr.reset();$refs.form.reset();e2 = 1;addStudentDialog = false"
             >cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-container fluid>
           <v-layout align-center>
             <v-flex xs12>
               <v-stepper v-model="e2" flat class="card-style elevation-0" dark>
                 <v-stepper-header>
                   <v-stepper-step :complete="e2 > 1" step="1">Fill parent Details</v-stepper-step>
                   <v-divider></v-divider>
                   <v-stepper-step step="2">Fill Student Details</v-stepper-step>
                 </v-stepper-header>
                 <v-stepper-items>
                   <v-stepper-content step="1">
                     <v-container fluid class>
                       <v-flex xs12 sm12 class="hidden-md-only hidden-lg-only hidden-xl-only">
                         <v-form ref="parentForm" v-model="valid" lazy-validation>
                           <v-layout wrap>
                             <v-flex xs12 sm6>
                               <v-layout wrap>
                                 <v-flex xs12 class="pt-4 subheading">
                                   <label>Father Cell No:</label>
                                 </v-flex>
                                 <v-flex xs12>
                                   <v-text-field
                                     v-model.trim="parentData.fatherCellNo"
                                     placeholder="fill your father Cell Number"
                                     type="number"
                                     :rules="fatheCellNoRules"
                                     counter="10"
                                     v-on:keyup="getParentDetails()"
                                     required
                                   ></v-text-field>
                                 </v-flex>
                               </v-layout>
                             </v-flex>
                             <v-flex xs12 sm6>
                               <v-layout wrap>
                                 <v-flex xs12 class="pt-4 subheading">
                                   <label>Parent Email Id:</label>
                                 </v-flex>
                                 <v-flex xs12>
                                   <v-text-field
                                     placeholder="fill Parent email"
                                     v-model="parentData.email"
                                     type="text"
                                     required
                                   ></v-text-field>
                                 </v-flex>
                               </v-layout>
                             </v-flex>
                           </v-layout>
                           <v-layout wrap>
                             <v-flex xs12 sm6>
                               <v-layout wrap>
                                 <v-flex xs12 class="pt-4 subheading">
                                   <label>Father Name:</label>
                                 </v-flex>
                                 <v-flex xs12>
                                   <v-text-field
                                     v-model="parentData.fatherName"
                                     placeholder="Fill your father Name"
                                     required
                                   ></v-text-field>
                                 </v-flex>
                               </v-layout>
                             </v-flex>
                             <v-flex xs12 sm6>
                               <v-layout wrap>
                                 <v-flex xs12 class="pt-4 subheading">
                                   <label>Mother Name:</label>
                                 </v-flex>
                                 <v-flex xs12>
                                   <v-text-field
                                     v-model="parentData.motherName"
                                     placeholder="fill your Mother Name"
                                     type="text"
                                     required
                                   ></v-text-field>
                                 </v-flex>
                               </v-layout>
                             </v-flex>
                           </v-layout>
                           <v-layout wrap>
                             <v-flex xs12 sm6>
                               <v-layout wrap>
                                 <v-flex xs12 class="pt-4 subheading">
                                   <label>Mother Cell No:</label>
                                 </v-flex>
                                 <v-flex xs12>
                                   <v-text-field
                                     v-model="parentData.motherCellNo"
                                     placeholder="fill your  Mother Cell Number"
                                     type="number"
                                     required
                                   ></v-text-field>
                                 </v-flex>
                               </v-layout>
                             </v-flex>
                             <v-flex xs12 sm6>
                               <v-layout wrap>
                                 <v-flex xs12 class="pt-4 subheading">
                                   <label>Father Profession:</label>
                                 </v-flex>
                                 <v-flex xs12>
                                   <v-text-field
                                     v-model="parentData.fatherProfession"
                                     placeholder="fill your father profession"
                                   ></v-text-field>
                                 </v-flex>
                               </v-layout>
                             </v-flex>
                           </v-layout>
                           <v-layout wrap>
                             <v-flex xs12 sm6>
                               <v-layout wrap>
                                 <v-flex xs12 class="pt-4 subheading">
                                   <label>Mother Profession:</label>
                                 </v-flex>
                                 <v-flex xs12>
                                   <v-text-field
                                     v-model="parentData.motherProfession"
                                     placeholder="fill your mother profession"
                                   ></v-text-field>
                                 </v-flex>
                               </v-layout>
                             </v-flex>
                             <v-flex xs12 sm6>
                               <v-layout wrap>
                                 <v-flex xs12 class="pt-4 subheading">
                                   <label>Password:</label>
                                 </v-flex>
                                 <v-flex xs12>
                                   <v-text-field
                                     v-model="parentData.password"
                                     placeholder="Enter Your Password"
                                   ></v-text-field>
                                 </v-flex>
                               </v-layout>
                             </v-flex>
                           </v-layout>
                           <v-flex sm12 class="hidden-xs-only">
                             <v-card-actions>
                               <v-spacer></v-spacer>
                               <v-btn
                                 @click="submitParentDetails"
                                 round
                                 dark
                                 :loading="loading"
                                 v-show="showParent"
                                 class="add-button"
                               >Add</v-btn>
                               <v-btn
                                 v-show="showNext"
                                 @click="e2 = 2"
                                 round
                                 dark
                                 class="add-button"
                               >Next</v-btn>
                             </v-card-actions>
                           </v-flex>
                           <v-flex
                             xs6
                             class="hidden-md-only hidden-sm-only hidden-lg-only hidden-xl-only mx-auto mt-2"
                           >
                             <v-btn
                               @click="submitParentDetails"
                               round
                               dark
                               :loading="loading"
                               v-show="showParent"
                               class="add-button"
                             >Add</v-btn>
                             <v-btn
                               v-show="showNext"
                               @click="e2 = 2"
                               round
                               dark
                               class="add-button"
                             >Next</v-btn>
                           </v-flex>
                         </v-form>
                       </v-flex>
                       <v-flex xs12 sm12 class="hidden-xs-only hidden-sm-only">
                         <v-form ref="parentFormLgScr" v-model="valid" lazy-validation>
                           <v-layout wrap>
                             <v-flex xs12 sm6>
                               <v-layout>
                                 <v-flex xs4 class="pt-4 subheading">
                                   <label class="right">Father Cell No:</label>
                                 </v-flex>
                                 <v-flex xs8 class="ml-3">
                                   <v-text-field
                                     v-model.trim="parentData.fatherCellNo"
                                     placeholder="fill your father Cell Number"
                                     type="number"
                                     :rules="fatheCellNoRules"
                                     counter="10"
                                     required
                                     v-on:keyup="getParentDetails()"
                                   ></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">Parent Email Id:</label>
                                 </v-flex>
                                 <v-flex xs8 class="ml-3">
                                   <v-text-field
                                     placeholder="fill Parent email"
                                     v-model="parentData.email"
                                     type="text"
                                     required
                                   ></v-text-field>
                                 </v-flex>
                               </v-layout>
                             </v-flex>
                           </v-layout>
                           <v-layout wrap>
                             <v-flex xs12 sm6>
                               <v-layout>
                                 <v-flex xs4 class="pt-4 subheading">
                                   <label class="right">Father Name:</label>
                                 </v-flex>
                                 <v-flex xs8 class="ml-3">
                                   <v-text-field
                                     v-model="parentData.fatherName"
                                     placeholder="Fill your father Name"
                                     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">Mother Name:</label>
                                 </v-flex>
                                 <v-flex xs8 class="ml-3">
                                   <v-text-field
                                     v-model="parentData.motherName"
                                     placeholder="fill your Mother Name"
                                     type="text"
                                     required
                                   ></v-text-field>
                                 </v-flex>
                               </v-layout>
                             </v-flex>
                           </v-layout>
                           <v-layout wrap>
                             <v-flex xs12 sm6>
                               <v-layout>
                                 <v-flex xs4 class="pt-4 subheading">
                                   <label class="right">Mother Cell No:</label>
                                 </v-flex>
                                 <v-flex xs8 class="ml-3">
                                   <v-text-field
                                     v-model="parentData.motherCellNo"
                                     placeholder="fill your  Mother Cell Number"
                                     type="number"
                                     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">Father Profession:</label>
                                 </v-flex>
                                 <v-flex xs8 class="ml-3">
                                   <v-text-field
                                     v-model="parentData.fatherProfession"
                                     placeholder="fill your father profession"
                                   ></v-text-field>
                                 </v-flex>
                               </v-layout>
                             </v-flex>
                           </v-layout>
                           <v-layout wrap>
                             <v-flex xs12 sm6>
                               <v-layout>
                                 <v-flex xs4 class="pt-4 subheading">
                                   <label class="right">Mother Profession:</label>
                                 </v-flex>
                                 <v-flex xs8 class="ml-3">
                                   <v-text-field
                                     v-model="parentData.motherProfession"
                                     placeholder="fill your mother profession"
                                   ></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">Password:</label>
                                 </v-flex>
                                 <v-flex xs8 class="ml-3">
                                   <v-text-field
                                     :append-icon="e1 ? 'visibility_off' : 'visibility'"
                                     :append-icon-cb="() => (e1 = !e1)"
                                     :type="e1 ? 'password' : 'text'"
                                     :rules="password"
                                     v-model="parentData.password"
                                     placeholder="Enter Your Password"
                                     :disabled="isFatherCellExists"
                                     required
                                   ></v-text-field>
                                 </v-flex>
                               </v-layout>
                             </v-flex>
                           </v-layout>
                           <v-flex sm12 class="hidden-xs-only">
                             <v-card-actions>
                               <v-spacer></v-spacer>
                               <v-btn
                                 @click="submitParentDetails"
                                 round
                                 dark
                                 :loading="loading"
                                 v-show="showParent"
                                 class="add-button"
                               >Add</v-btn>
                               <v-btn
                                 v-show="showNext"
                                 @click="e2 = 2"
                                 round
                                 dark
                                 class="add-button"
                               >Next</v-btn>
                             </v-card-actions>
                           </v-flex>
                           <v-flex
                             xs6
                             class="hidden-md-only hidden-sm-only hidden-lg-only hidden-xl-only mx-auto mt-2"
                           >
                             <v-btn
                               @click="submitParentDetails"
                               round
                               dark
                               :loading="loading"
                               v-show="showParent"
                               class="add-button"
                             >Add</v-btn>
                             <v-btn
                               v-show="showNext"
                               @click="e2 = 2"
                               round
                               dark
                               class="add-button"
                             >Next</v-btn>
                           </v-flex>
                         </v-form>
                       </v-flex>
                     </v-container>
                   </v-stepper-content>
                   <v-stepper-content step="2">
                     <v-flex xs12 sm12>
                       <v-form ref="form" v-model="valid" lazy-validation>
                         <v-layout>
                           <v-flex
                             xs12
                             class="text-xs-center text-sm-center text-md-center text-lg-center"
                           >
                             <v-avatar size="100px">
                               <img src="/static/icon/user.png" v-if="!imageUrl" />
                             </v-avatar>
                             <input
                               type="file"
                               style="display: none"
                               ref="image"
                               accept="image/*"
                               @change="onFilePicked"
                             />
                             <img
                               :src="imageData.imageUrl"
                               height="150"
                               v-if="imageUrl"
                               style="border-radius:50%; width:200px"
                             />
                           </v-flex>
                         </v-layout>
                         <v-layout wrap>
                           <v-flex xs12 sm6>
                             <v-layout>
                               <v-flex x4 sm4 class="pt-4 subheading">
                                 <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
                                 <label
                                   class="right hidden-lg-only hidden-md-only hidden-xl-only"
                                 >Class:</label>
                               </v-flex>
                               <v-flex xs8 sm8 class="ml-3">
                                 <v-select
                                   :items="addclass"
                                   label="Select Class"
                                   v-model="addStudents.select"
                                   item-text="classNum"
                                   item-value="_id"
                                   name="Select Class"
                                   :rules="classRules"
                                   @change="getSection(addStudents.select)"
                                   required
                                 ></v-select>
                               </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">Select Section:</label>
                                 <label
                                   class="right hidden-lg-only hidden-md-only hidden-xl-only"
                                 >Section:</label>
                               </v-flex>
                               <v-flex xs8 class="ml-3">
                                 <v-select
                                   :items="addSection"
                                   label="Select Section"
                                   v-model="addStudents.selectSection"
                                   item-text="name"
                                   item-value="_id"
                                   name="Select Section"
                                   :rules="sectionRules"
                                   required
                                 ></v-select>
                               </v-flex>
                             </v-layout>
                           </v-flex>
                         </v-layout>
                         <v-layout wrap>
                           <v-flex xs12 sm6>
                             <v-layout>
                               <v-flex xs4 sm4 class="pt-4 subheading">
                                 <label class="right hidden-xs-only hidden-sm-only">Full Name:</label>
                                 <label
                                   class="right hidden-lg-only hidden-md-only hidden-xl-only"
                                 >Name:</label>
                               </v-flex>
                               <v-flex xs8 sm8 class="ml-3">
                                 <v-text-field
                                   v-model="addStudents.name"
                                   placeholder="fill your full Name"
                                   name="name"
                                   type="text"
                                   :rules="nameRules"
                                   required
                                 ></v-text-field>
                               </v-flex>
                             </v-layout>
                           </v-flex>
                           <v-flex xs12 sm6>
                             <v-layout>
                               <v-flex xs4 sm4 class="pt-4 subheading">
                                 <label class="right">Email:</label>
                               </v-flex>
                               <v-flex xs8 sm8 class="ml-3">
                                 <v-text-field
                                   placeholder="fill your email"
                                   v-model="addStudents.email"
                                   type="text"
                                   name="email"
                                   required
                                 ></v-text-field>
                               </v-flex>
                             </v-layout>
                           </v-flex>
                         </v-layout>
                         <v-layout wrap>
                           <v-flex xs12 sm6>
                             <v-layout>
                               <v-flex xs4 sm4 class="pt-4 subheading">
                                 <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>
                                 <label
                                   class="right hidden-lg-only hidden-xl-only hidden-md-only"
                                 >D.O.B:</label>
                               </v-flex>
                               <v-flex xs8 sm8 class="ml-3">
                                 <v-menu
                                   ref="menu"
                                   :close-on-content-click="false"
                                   v-model="menu"
                                   :nudge-right="40"
                                   lazy
                                   transition="scale-transition"
                                   offset-y
                                   full-width
                                   min-width="290px"
                                 >
                                   <v-text-field
                                     slot="activator"
                                     :rules="dateRules"
                                     v-model="addStudents.date"
                                     placeholder="Select date"
                                   ></v-text-field>
                                   <v-date-picker
                                     ref="picker"
                                     v-model="addStudents.date"
                                     :max="new Date().toISOString().substr(0, 10)"
                                     min="1950-01-01"
                                     @input="menu = false"
                                   ></v-date-picker>
                                 </v-menu>
                               </v-flex>
                             </v-layout>
                           </v-flex>
                           <v-flex xs12 sm6>
                             <v-layout>
                               <v-flex xs4 class="pt-4 subheading">
                                 <label class="right">City:</label>
                               </v-flex>
                               <v-flex xs8 class="ml-3">
                                 <v-text-field
                                   v-model="addStudents.city"
                                   placeholder="fill your City Name"
                                   name="City"
                                   type="text"
                                   :rules="cityRules"
                                   required
                                 ></v-text-field>
                               </v-flex>
                             </v-layout>
                           </v-flex>
                         </v-layout>
                         <v-layout wrap>
                           <v-flex xs12 sm6>
                             <v-layout>
                               <v-flex xs4 class="pt-4 subheading">
                                 <label class="right">State:</label>
                               </v-flex>
                               <v-flex xs8 class="ml-3">
                                 <v-text-field
                                   v-model="addStudents.state"
                                   placeholder="fill your State Name"
                                   name="state"
                                   type="text"
                                   :rules="stateRules"
                                   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">Pincode:</label>
                               </v-flex>
                               <v-flex xs8 class="ml-3">
                                 <v-text-field
                                   v-model="addStudents.pincode"
                                   placeholder="fill your pincode"
                                   name="pincode"
                                   type="number"
                                   :rules="pincode"
                                   required
                                 ></v-text-field>
                               </v-flex>
                             </v-layout>
                           </v-flex>
                         </v-layout>
                         <v-layout wrap>
                           <v-flex xs12 sm6>
                             <v-layout>
                               <v-flex xs4 class="pt-4 subheading">
                                 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>
                                 <label
                                   class="right hidden-lg-only hidden-md-only hidden-xl-only"
                                 >Mobile:</label>
                               </v-flex>
                               <v-flex xs8 class="ml-3">
                                 <v-text-field
                                   v-model="addStudents.mobile"
                                   placeholder="fill your MobileNo"
                                   name="mobileNo"
                                   type="number"
                                 ></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">Select Country:</label>
                                 <label
                                   class="right hidden-lg-only hidden-md-only hidden-xl-only"
                                 >Country:</label>
                               </v-flex>
                               <v-flex xs8 class="ml-3">
                                 <v-autocomplete
                                   v-model="addStudents.country"
                                   :rules="country"
                                   :items="countries"
                                   placeholder="Select Country Name"
                                   required
                                 ></v-autocomplete>
                               </v-flex>
                             </v-layout>
                           </v-flex>
                         </v-layout>
                         <v-layout wrap>
                           <v-flex xs12 sm6>
                             <v-layout>
                               <v-flex xs4 class="pt-4 subheading">
                                 <label class="right">Gender:</label>
                               </v-flex>
                               <v-flex xs8 class="ml-3">
                                 <v-select
                                   :items="gender"
                                   v-model="addStudents.gender"
                                   :rules="genderRules"
                                   label="Select Gender"
                                   required
                                 ></v-select>
                               </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">Blood Group:</label>
                                 <label
                                   class="right hidden-lg-only hidden-md-only hidden-xl-only"
                                 >Blood:</label>
                               </v-flex>
                               <v-flex xs8 class="ml-3">
                                 <v-text-field
                                   v-model="addStudents.bloodGroup"
                                   placeholder="Fill your Blood Group"
                                   required
                                 ></v-text-field>
                               </v-flex>
                             </v-layout>
                           </v-flex>
                         </v-layout>
                         <v-layout wrap>
                           <v-flex xs12 sm6>
                             <v-layout>
                               <v-flex xs4 class="pt-4 subheading">
                                 <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label>
                                 <label
                                   class="right hidden-lg-only hidden-md-only hidden-xl-only"
                                 >Roll No:</label>
                               </v-flex>
                               <v-flex xs8 class="ml-3">
                                 <v-text-field
                                   v-model="addStudents.rollNo"
                                   placeholder="Fill your Roll Number"
                                   :rules="rollNo"
                                   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">Medical Notes:</label>
                                 <label
                                   class="right hidden-lg-only hidden-md-only hidden-xl-only"
                                 >Medical:</label>
                               </v-flex>
                               <v-flex xs8 class="ml-3">
                                 <v-text-field
                                   v-model="addStudents.medicalNotes"
                                   placeholder="Fill your Medical Notes"
                                   required
                                 ></v-text-field>
                               </v-flex>
                             </v-layout>
                           </v-flex>
                         </v-layout>
                         <v-layout wrap>
                           <v-flex xs12 sm6>
                             <v-layout>
                               <v-flex xs4 class="pt-4 subheading">
                                 <label class="right">Height:</label>
                               </v-flex>
                               <v-flex xs8 class="ml-3">
                                 <v-text-field
                                   v-model="addStudents.height"
                                   placeholder="Fill your Height"
                                   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">Weight:</label>
                               </v-flex>
                               <v-flex xs8 class="ml-3">
                                 <v-text-field
                                   v-model="addStudents.weight"
                                   placeholder="Fill your Weight"
                                   required
                                 ></v-text-field>
                               </v-flex>
                             </v-layout>
                           </v-flex>
                         </v-layout>
                         <v-layout wrap>
                           <v-flex xs12 sm6>
                             <v-layout>
                               <v-flex xs4 class="pt-4 subheading">
                                 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
                                 <label
                                   class="right hidden-lg-only hidden-md-only hidden-xl-only"
                                 >Uplaod :</label>
                               </v-flex>
                               <v-flex xs8 class="ml-3">
                                 <v-text-field
                                   label="Select Image"
                                   @click="pickFile"
                                   v-model="imageName"
                                   append-icon="attach_file"
                                 ></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">Academic Year:</label>
                                 <label
                                   class="right hidden-lg-only hidden-md-only hidden-xl-only"
                                 >Year:</label>
                               </v-flex>
                               <v-flex xs8 class="ml-3">
                                 <v-text-field
                                   v-model="addStudents.establishmentYear"
                                   placeholder="fill your Academic Year"
                                   name="state"
                                   type="number"
                                   :rules="establishmentYearRules"
                                   required
                                 ></v-text-field>
                               </v-flex>
                             </v-layout>
                           </v-flex>
                         </v-layout>
                         <v-layout wrap class="hidden-xs-only hidden-sm-only">
                           <v-flex xs12 sm6>
                             <v-layout>
                               <v-flex xs4 sm4 class="pt-4 subheading">
                                 <label class="right">Present Address:</label>
                               </v-flex>
                               <v-flex xs8 sm8 class="ml-3">
                                 <v-text-field
                                   v-model="addStudents.presentAddress"
                                   :rules="presentAddress"
                                   placeholder="fill Your present Address"
                                   @keyup="copyData"
                                 ></v-text-field>
                               </v-flex>
                             </v-layout>
                           </v-flex>
                           <v-flex xs12 sm6>
                             <v-layout>
                               <v-flex xs4 sm4 class="pt-4 subheading addressForm">
                                 <label class="right">Permanent Address:</label>
                               </v-flex>
                               <v-flex xs12 sm8 class="ml-3">
                                 <v-switch
                                   v-model="addStudents.permanentAddress"
                                   label="Select Permanent Address"
                                   :value="addStudents.presentAddress"
                                 ></v-switch>
                               </v-flex>
                             </v-layout>
                           </v-flex>
                         </v-layout>
                         <v-layout class="hidden-xs-only hidden-sm-only">
                           <v-flex xs12 sm6>
                             <v-layout>
                               <v-flex xs4 sm4 class="pt-4 subheading addressForm">
                                 <label class="right">Permanent Address:</label>
                               </v-flex>
                               <v-flex xs12 sm8 class="ml-3">
                                 <v-text-field
                                   v-model="addStudents.permanentAddress"
                                   :rules="permanentAddress"
                                   placeholder="fill Your Permanent Address"
                                 ></v-text-field>
                               </v-flex>
                             </v-layout>
                           </v-flex>
                         </v-layout>
                         <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap>
                           <v-flex xs12 sm12>
                             <v-layout>
                               <v-flex xs12 sm12 class="pt-4 subheading text-xs-center">
                                 <label class>Present Address:</label>
                               </v-flex>
                             </v-layout>
                             <v-layout>
                               <v-flex xs12 sm12>
                                 <v-textarea
                                   name="input-4-3"
                                   v-model="addStudents.presentAddress"
                                   :rules="presentAddress"
                                   placeholder="fill Your present Address"
                                   required
                                 ></v-textarea>
                               </v-flex>
                             </v-layout>
                           </v-flex>
                           <v-flex xs12 sm12>
                             <v-layout>
                               <v-flex
                                 xs12
                                 sm12
                                 class="pt-4 pr-4 subheading text-xs-center addressForm"
                               >
                                 <label>Permanent Address:</label>
                               </v-flex>
                             </v-layout>
                             <v-layout>
                               <v-flex xs12 sm12>
                                 <v-textarea
                                   name="input-4-3"
                                   v-model="addStudents.permanentAddress"
                                   :rules="permanentAddress"
                                   placeholder="fill Your Permanent Address"
                                   required
                                 ></v-textarea>
                               </v-flex>
                             </v-layout>
                           </v-flex>
                         </v-layout>
                         <v-layout>
                           <v-flex xs12 sm12>
                             <v-layout class="right">
                               <!-- <v-flex xs6> -->
                               <v-btn round dark @click="e2 = 1" class="clear-button">Back</v-btn>
                               <!-- </v-flex>
                               <v-flex xs6>-->
                               <v-btn
                                 @click="submit"
                                 round
                                 dark
                                 :loading="loading"
                                 class="add-button"
                               >Add</v-btn>
                               <!-- </v-flex> -->
                             </v-layout>
                           </v-flex>
                         </v-layout>
                       </v-form>
                     </v-flex>
                   </v-stepper-content>
                 </v-stepper-items>
               </v-stepper>
             </v-flex>
           </v-layout>
         </v-container>
       </v-card>
     </v-dialog>
     <v-snackbar
       :timeout="timeout"
       :top="y === 'top'"
       :right="x === 'right'"
       :vertical="mode === 'vertical'"
       v-model="snackbar"
       :color="color"
     >{{ text }}</v-snackbar>
     <div class="loader" v-if="showLoader">
       <v-progress-circular indeterminate color="white"></v-progress-circular>
     </div>
   </v-container>
 </template>
 <script>
 import http from "@/Services/http.js";
 import moment from "moment";
 import countryList from "@/script/country.js";
 import parent from "@/script/parents.js";
 export default {
   data: () => ({
     e1: true,
     e2: 0,
     showParent: true,
     showNext: false,
     snackbar: false,
     y: "top",
     x: "right",
     role: "",
     mode: "",
     append: "",
     timeout: 3000,
     text: "",
     show: true,
     color: "",
     showSearch: false,
     showLoader: false,
     loading: false,
     editLoading: false,
     date: null,
     search: "",
     password: "",
     menu: false,
     menu1: false,
     editStudentDialog: false,
     profileStudentDialog: false,
     addStudentDialog: false,
     valid: true,
     addclass: [],
     addSection: [],
     gender: ["Male", "Female"],
     pagination: {
       rowsPerPage: 10,
     },
     imageData: {},
     imageName: "",
     imageUrl: "",
     imageFile: "",
     editImageName: "",
     editImageUrl: "",
     nameRules: [(v) => !!v || " Full Name is required"],
     dateRules: [(v) => !!v || " DOB is required"],
     cityRules: [(v) => !!v || " City Name is required"],
     pincode: [(v) => !!v || " Pincode is required"],
     country: [(v) => !!v || " Country Name is required"],
     rollNo: [(v) => !!v || "Roll No is required"],
     permanentAddress: [(v) => !!v || " Permanent Address is required"],
     presentAddress: [(v) => !!v || " Present Address  is required"],
     stateRules: [(v) => !!v || "State Name is required"],
     classRules: [(v) => !!v || " Class Name is required"],
     sectionRules: [(v) => !!v || " Section Name is required"],
     genderRules: [(v) => !!v || " Select Gender is required"],
     fatheCellNoRules: [
       (v) => !!v || " father Cell Number  is required",
       (v) => v <= 10000000000 || "Max 10 characters is required",
     ],
     password: [
       (v) => !!v || "Password field is Required.",
       // v => (/^(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/).test(v) && v.length >= 8
     ],
     mobileNoRule: [(v) => !!v || " Mobile Number is required"],
     establishmentYearRules: [(v) => !!v || " Academic Year  is required"],
     errorMessages: "",
     countries: [],
     headers: [
       {
         text: "Roll No.",
         align: "center",
         sortable: false,
         value: "rollNo",
       },
       {
         text: "Profile Pic",
         value: "profilePicUrl",
         sortable: false,
         align: "center",
       },
       { text: "Name", value: "name", sortable: false, align: "center" },
       { text: "Gender", value: "gender", sortable: false, align: "center" },
       {
         text: "Father Name",
         value: "fatherName",
         sortable: false,
         align: "center",
       },
       {
         text: "Mother Name",
         value: "motherName",
         sortable: false,
         align: "center",
       },
       {
         text: "Academic Year",
         value: "establishmentYear",
         sortable: false,
         align: "center",
       },
       // { text: "Mobile No", value: "mobile", sortable: false, align: "center" },
       {
         text: "Status",
         value: "status",
         sortable: false,
         align: "center",
       },
       { text: "Action", value: "", sortable: false, align: "center" },
     ],
     studentsData: [],
     parentId: "",
     editedIndex: -1,
     parentData: {},
     addStudents: {
       role: "STUDENT",
       name: "",
       email: "",
       date: "",
       city: "",
       pincode: "",
       country: "",
       permanentAddress: "",
       presentAddress: "",
       mobile: "",
       state: "",
       gender: "",
       select: "",
       selectSection: "",
       bloodGroup: "",
       allergies: "",
       medicalNotes: "",
       height: "",
       weight: "",
       rollNo: "",
       establishmentYear: new Date().getFullYear(),
     },
     selectStudents: {
       select: "",
       selectSection: "",
     },
     editedItem: {
       role: "STUDENT",
       name: "",
       email: "",
       dob: "",
       city: "",
       pincode: "",
       country: "",
       permanentAddress: "",
       presentAddress: "",
       mobile: "",
       state: "",
       gender: "",
       select: "",
       selectSection: "",
       bloodGroup: "",
       allergies: "",
       medicalNotes: "",
       height: "",
       weight: "",
       rollNo: "",
       establishmentYear: new Date().getFullYear(),
     },
     isFatherCellExists: false,
   }),
   watch: {
     menu(val) {
       val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
     },
     menu1(val) {
       val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
     },
     addStudentDialog: function (val) {
       if (!val) {
         this.parentData = [];
         this.addStudents = [];
         this.imageName = "";
         this.imageFile = "";
         this.imageUrl = "";
+        this.e2 = 1;
       }
     },
   },
   methods: {
     findStudents() {
       this.showLoader = true;
       http()
         .get("/getStudentWithClass", {
           params: {
             classId: this.selectStudents.select,
             sectionId: this.selectStudents.selectSection,
           },
         })
         .then((response) => {
           this.studentsData = response.data.data;
           this.showLoader = false;
         })
         .catch((err) => {
           console.log("err====>", err);
           this.showLoader = false;
         });
     },
     getSections(_id) {
       var token = this.$store.state.token;
       this.showLoader = true;
       http()
         .get(
           "/getSectionsList",
           { params: { classId: _id } },
           {
             headers: { Authorization: "Bearer " + token },
           }
         )
         .then((response) => {
           this.addSection = response.data.data;
           this.showLoader = false;
         })
         .catch((err) => {
           this.showLoader = false;
         });
     },
     getSection(_id) {
       var token = this.$store.state.token;
       this.showLoader = true;
       http()
         .get(
           "/getSectionsList",
           { params: { classId: _id } },
           {
             headers: { Authorization: "Bearer " + token },
           }
         )
         .then((response) => {
           this.addSection = response.data.data;
           this.showLoader = false;
         })
         .catch((err) => {
           this.showLoader = false;
         });
     },
     pickFile() {
       this.$refs.image.click();
     },
     pickEditFile() {
       this.$refs.editDataImage.click();
     },
     dates: function (date) {
       return moment(date).format("MMMM DD, YYYY");
       return date;
     },
     onFilePicked(e) {
       // console.log(e)
       const files = e.target.files;
       this.imageData.upload = e.target.files[0];
       if (files[0] !== undefined) {
         this.imageName = files[0].name;
         if (this.imageName.lastIndexOf(".") <= 0) {
           return;
         }
         const fr = new FileReader();
         fr.readAsDataURL(files[0]);
         fr.addEventListener("load", () => {
           this.imageUrl = fr.result;
           this.imageFile = files[0]; // this is an image file that can be sent to server...
           this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
         });
       } else {
         this.imageName = "";
         this.imageFile = "";
         this.imageUrl = "";
       }
     },
     onEditFilePicked(e) {
       console.log(e);
       const files = e.target.files;
       if (files[0] !== undefined) {
         this.editImageName = files[0].name;
         console.log("this.editImageName", this.editImageName);
         if (this.editImageName.lastIndexOf(".") <= 0) {
           return;
         }
         const fr = new FileReader();
         fr.readAsDataURL(files[0]);
         fr.addEventListener("load", () => {
           this.editImageUrl = fr.result;
           this.editiImageFile = files[0]; // this is an image file that can be sent to server...
         });
       } else {
         this.editImageName = "";
         this.editiImageFile = "";
       }
     },
     editItem(item) {
       this.editedIndex = this.studentsData.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.editedItem.fatherName = item.parentId.fatherName;
       this.editedItem.fatherCellNo = item.parentId.fatherCellNo;
       this.editedItem.motherName = item.parentId.motherName;
       this.editedItem.motherCellNo = item.parentId.motherCellNo;
       this.editedItem.dob =
         this.editedItem.dob != undefined
           ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10))
           : (this.editedItem.dob = "");
       this.editStudentDialog = true;
     },
     profile(item) {
       this.editedIndex = this.studentsData.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.editedItem.fatherName = item.parentId.fatherName;
       this.editedItem.fatherCellNo = item.parentId.fatherCellNo;
       this.editedItem.motherName = item.parentId.motherName;
       this.editedItem.motherCellNo = item.parentId.motherCellNo;
       this.profileStudentDialog = true;
     },
     deleteItem(item) {
       let deleteStudent = {
         studentId: item._id,
       };
       http()
         .delete(
           "/deleteStudent",
           confirm("Are you sure you want to delete this?") && {
             params: deleteStudent,
           }
         )
         .then((response) => {
           this.snackbar = true;
           this.text = response.data.message;
           this.color = "green";
           this.findStudents();
         })
         .catch((error) => {
           this.snackbar = true;
           this.text = error.response.data.message;
           this.color = "error";
         });
     },
     close() {
       this.editStudentDialog = false;
     },
     closeStudentProfile() {
       this.profileStudentDialog = false;
     },
     copyData() {
       this.addStudents.permanentAddress = this.addStudents.presentAddress;
     },
     submit() {
       if (this.$refs.form.validate()) {
         let addStudent = {
           parentId: this.parentId,
           name: this.addStudents.name,
           email: this.addStudents.email,
           role: this.addStudents.role,
           dob: this.addStudents.date,
           city: this.addStudents.city,
           pincode: this.addStudents.pincode,
           country: this.addStudents.country,
           permanentAddress: this.addStudents.permanentAddress,
           presentAddress: this.addStudents.presentAddress,
           mobile: this.addStudents.mobile,
           state: this.addStudents.state,
           gender: this.addStudents.gender,
           establishmentYear: this.addStudents.establishmentYear,
           classId: this.addStudents.select,
           sectionId: this.addStudents.selectSection,
           bloodGroup: this.addStudents.bloodGroup,
           medicalNotes: this.addStudents.medicalNotes,
           height: this.addStudents.height,
           weight: this.addStudents.weight,
           rollNo: this.addStudents.rollNo,
         };
         if (this.imageUrl) {
           var str = this.imageUrl;
           const [baseUrl, imageUrl] = str.split(/,/);
           addStudent.upload = imageUrl;
         }
         this.loading = true;
         http()
           .post("/createStudent", addStudent)
           .then((response) => {
             this.snackbar = true;
             this.text = "New Student added successfully";
             this.color = "green";
             this.addStudentDialog = false;
             this.$refs.parentForm.reset();
             this.$refs.parentFormLgScr.reset();
             this.$refs.form.reset();
             this.e2 = 1;
             // this.clear();
             // this.clearParents();
             this.loading = false;
           })
           .catch((error) => {
             this.snackbar = true;
             this.text = error.response.data.message;
             this.color = "error";
             this.loading = false;
           });
       }
     },
     clear() {
       this.$refs.form.reset();
       this.imageUrl = "";
     },
     clearParents() {
       this.$refs.parentForm.reset();
     },
     save() {
       let editStudent = {
         studentId: this.editedItem._id,
         name: this.editedItem.name,
         email: this.editedItem.email,
         role: this.editedItem.role,
         dob: this.editedItem.dob,
         city: this.editedItem.city,
         pincode: this.editedItem.pincode,
         country: this.editedItem.country,
         permanentAddress: this.editedItem.permanentAddress,
         presentAddress: this.editedItem.presentAddress,
         mobile: this.editedItem.mobile,
         state: this.editedItem.state,
         gender: this.editedItem.gender,
         establishmentYear: this.editedItem.establishmentYear,
         classId: this.editedItem.select,
         sectionId: this.editedItem.selectSection,
         bloodGroup: this.editedItem.bloodGroup,
         medicalNotes: this.editedItem.medicalNotes,
         height: this.editedItem.height,
         weight: this.editedItem.weight,
         rollNo: this.editedItem.rollNo,
       };
       if (this.editImageUrl) {
         var str = this.editImageUrl;
         const [baseUrl, editImageUrl] = str.split(/,/);
         editStudent.upload = editImageUrl;
       }
       this.editLoading = true;
       http()
         .put("/updateStudent", editStudent)
         .then((response) => {
           this.snackbar = true;
           this.text = response.data.message;
           this.color = "green";
           this.imageUrl = "";
           this.findStudents();
           this.close();
           this.editLoading = false;
         })
         .catch((error) => {
           this.snackbar = true;
           this.text = error.response.data.statusText;
           this.color = "error";
           this.editLoading = false;
         });
     },
     submitParentDetails() {
       if (this.$refs.parentForm.validate()) {
         this.parentData.fatherCellNo = this.parentData.fatherCellNo;
         this.parentData.motherCellNo = this.parentData.motherCellNo;
         let addparentDetails = {
           email: this.parentData.email,
           fatherName: this.parentData.fatherName,
           fatherCellNo: this.parentData.fatherCellNo,
           motherName: this.parentData.motherName,
           motherCellNo: this.parentData.motherCellNo,
           fatherProfession: this.parentData.fatherProfession,
           motherProfession: this.parentData.motherProfession,
           password: this.parentData.password,
           role: "PARENT",
         };
         this.loading = true;
         http()
           .post("/createParent", addparentDetails)
           .then((response) => {
             this.parentId = response.data.data.id;
             this.e2 = 2;
             this.snackbar = true;
             this.text = response.data.message;
             this.color = "green";
             // this.getStudentList();
             this.clear();
             this.loading = false;
           })
           .catch((error) => {
             this.snackbar = true;
             this.text = error.response.data.message;
             this.color = "error";
             if (error.response.data.statusText) {
               this.text = error.response.data.statusText;
             }
             this.loading = false;
           });
       }
     },
     getParentDetails() {
       if (this.parentData.fatherCellNo.length > 9) {
         this.showLoader = true;
         this.isFatherCellExists = false;
         http()
           .get("getParticularParent", {
             params: { fatherCellNo: this.parentData.fatherCellNo },
             headers: {
               Authorization: "Bearer " + this.$store.state.token,
             },
           })
           .then((response) => {
             this.showNext = true;
             this.showParent = false;
             this.parentData = response.data.data;
             this.parentId = response.data.data._id;
             this.showLoader = false;
             this.isFatherCellExists = true;
           })
           .catch((error) => {
             console.log("err====>", error.response.data.message);
             this.text = error.response.data.message;
             this.snackbar = true;
             this.color = "error";
             if (this.text === "Data not found!") {
               this.showNext = false;
               this.showParent = true;
               this.parentData.email = "";
               this.parentData.fatherName = "";
               this.parentData.motherName = "";
               this.parentData.motherCellNo = "";
               this.parentData.fatherProfession = "";
               this.parentData.motherProfession = "";
               this.parentData.password = "";
             }
             this.showLoader = false;
           });
       }
     },
     suspendStudentStatus(status, id) {
       let suspendStudentData = {
         studentId: id,
         status: status,
       };
       http()
         .put("/suspendStudentAccount", suspendStudentData)
         .then((response) => {
           this.findStudents();
           this.text = response.data.message;
           this.color = "green";
           this.snackbar = true;
         })
         .catch((error) => {
           this.snackbar = true;
           this.color = "error";
           this.text = error.response.data.message;
         });
     },
     displaySearch() {
       (this.show = false), (this.showSearch = true);
     },
     closeSearch() {
       this.showSearch = false;
       this.show = true;
       this.search = "";
     },
   },
   mounted() {
     const getCountryList = countryList();
     this.role = this.$store.state.role;
     this.countries = getCountryList;
     var token = this.$store.state.token;
     http()
       .get("/getClassesList", {
         headers: { Authorization: "Bearer " + token },
       })
       .then((response) => {
         this.addclass = response.data.data;
       })
       .catch((error) => {
         this.showLoader = false;
         if (error.response.status === 401) {
           this.$router.replace({ path: "/" });
           this.$store.dispatch("setToken", null);
           this.$store.dispatch("Id", null);
           this.$store.dispatch("Role", null);
         }
       });
   },
 };
 </script>
 <style scoped>
 .active {
   background-color: gray;
   color: white !important;
 }
 .activebtn {
   color: black !important;
 }
 </style>