viithiisys / School-Management-dashboard

Browse Code »

Commit 0721aca93505fe4576a52ff0b3cb6084b21726a8

Authored by Neeraj Sharma 2019-12-30 06:47:26 -0500

1 parent 9c887fee01

Exists in master and in 3 other branches

solve bugs in subject and create student

Showing 4 changed files with 57 additions and 74 deletions Show diff stats

src/pages/Account/globalPayment.vue

Diff comments View file @0721aca

1	<template>	1	<template>
2	<div>	2	<div>
3	<!-- **** EXISTING GLOBAL PAYMENT TABLE **** -->	3	<!-- **** EXISTING GLOBAL PAYMENT TABLE **** -->
4	<v-form ref="form" v-model="valid" lazy-validation>	4	<v-form ref="form" v-model="valid" lazy-validation>
5	<v-container fluid>	5	<v-container fluid>
6	<v-flex xs12 sm12 lg12>	6	<v-flex xs12 sm12 lg12>
7	<v-layout wrap>	7	<v-layout wrap>
8	<v-flex xs12 sm12 lg10>	8	<v-flex xs12 sm12 lg10>
9	<v-layout wrap>	9	<v-layout wrap>
10	<v-flex xs12 sm12 lg4>	10	<v-flex xs12 sm12 lg4>
11	<v-flex xs12 sm4 lg4 class="subheading">	11	<v-flex xs12 sm4 lg4 class="subheading">
12	<label class="mt-4">Class:</label>	12	<label class="mt-4">Class:</label>
13	</v-flex>	13	</v-flex>
14	<v-flex xs12 sm12 lg10>	14	<v-flex xs12 sm12 lg10>
15	<v-select	15	<v-select
16	:items="addclass"	16	:items="addclass"
17	label="Select Class"	17	label="Select Class"
18	v-model="selectStudents.selectClassId"	18	v-model="selectStudents.selectClassId"
19	item-text="classNum"	19	item-text="classNum"
20	item-value="_id"	20	item-value="_id"
21	name="Select Class"	21	name="Select Class"
22	:rules="classRules"	22	:rules="classRules"
23	@change="getSection()"	23	@change="getSection()"
24	required	24	required
25	></v-select>	25	></v-select>
26	</v-flex>	26	</v-flex>
27	</v-flex>	27	</v-flex>
28	<v-flex xs12 sm12 lg4>	28	<v-flex xs12 sm12 lg4>
29	<v-flex xs12 sm4 lg4 class="subheading">	29	<v-flex xs12 sm4 lg4 class="subheading">
30	<label class="mt-4">Section:</label>	30	<label class="mt-4">Section:</label>
31	</v-flex>	31	</v-flex>
32	<v-flex xs12 sm12 lg10 class>	32	<v-flex xs12 sm12 lg10 class>
33	<v-select	33	<v-select
34	:items="addSection"	34	:items="addSection"
35	label="Select Section"	35	label="Select Section"
36	v-model="selectStudents.selectSection"	36	v-model="selectStudents.selectSection"
37	item-text="name"	37	item-text="name"
38	item-value="_id"	38	item-value="_id"
39	name="Select Section"	39	name="Select Section"
40	:rules="sectionRules"	40	:rules="sectionRules"
41	@change="getStudents()"	41	@change="getStudents()"
42	required	42	required
43	></v-select>	43	></v-select>
44	</v-flex>	44	</v-flex>
45	</v-flex>	45	</v-flex>
46	<v-flex xs12 sm12 lg4>	46	<v-flex xs12 sm12 lg4>
47	<v-flex xs12 sm4 lg4 class="subheading">	47	<v-flex xs12 sm4 lg4 class="subheading">
48	<label class="mt-4">Student:</label>	48	<label class="mt-4">Student:</label>
49	</v-flex>	49	</v-flex>
50	<v-flex xs12 sm12 lg10 class>	50	<v-flex xs12 sm12 lg10 class>
51	<v-select	51	<v-select
52	:items="studentData"	52	:items="studentData"
53	label="Select Student"	53	label="Select Student"
54	v-model="selectStudents.selectId"	54	v-model="selectStudents.selectId"
55	item-text="name"	55	item-text="name"
56	item-value="_id"	56	item-value="_id"
57	:rules="studentRules"	57	:rules="studentRules"
58	required	58	required
59	></v-select>	59	></v-select>
60	</v-flex>	60	</v-flex>
61	</v-flex>	61	</v-flex>
62	</v-layout>	62	</v-layout>
63	</v-flex>	63	</v-flex>
64	<v-flex xs12 sm12 lg2>	64	<v-flex xs12 sm12 lg2>
65	<v-flex xs12 sm12 lg12>	65	<v-flex xs12 sm12 lg12>
66	<v-btn	66	<v-btn
67	@click="getInvoicesData()"	67	@click="getInvoicesData()"
68	round	68	round
69	dark	69	dark
70	:loading="loading"	70	:loading="loading"
71	class="right mt-4"	71	class="right mt-4"
72	>Search</v-btn>	72	>Search</v-btn>
73	</v-flex>	73	</v-flex>
74	</v-flex>	74	</v-flex>
75	</v-layout>	75	</v-layout>
76	</v-flex>	76	</v-flex>
77	</v-container>	77	</v-container>
78	</v-form>	78	</v-form>
79	<v-container fluid grid-list-md>	79	<v-container fluid grid-list-md>
80	<v-flex xs12>	80	<v-flex xs12>
81	<v-layout wrap>	81	<v-layout wrap>
82	<v-flex xs12 sm12 md4>	82	<v-flex xs12 sm12 md4>
83	<v-card	83	<v-card
84	flat	84	flat
85	class="pa-3"	85	class="pa-3"
86	v-for="(invoiceData,i) in studentInvoiceData"	86	v-for="(invoiceData,i) in studentInvoiceData"
87	:key="i"	87	:key="i"
88	v-if="i === 0"	88	v-if="i === 0"
89	>	89	>
90	<v-layout>	90	<v-layout>
91	<v-flex xs12>	91	<v-flex xs12>
92	<v-avatar	92	<v-avatar
93	size="80px"	93	size="80px"
94	style="margin: auto;display:block;margin-bottom:10px !important"	94	style="margin: auto;display:block;margin-bottom:10px !important"
95	>	95	>
96	<img src="/static/icon/user.png" v-if="!invoiceData.studentId.profilePicUrl" />	96	<img src="/static/icon/user.png" v-if="!invoiceData.studentId.profilePicUrl" />
97	<img	97	<img
98	:src="invoiceData.studentId.profilePicUrl"	98	:src="invoiceData.studentId.profilePicUrl"
99	v-else-if="invoiceData.studentId.profilePicUrl"	99	v-else-if="invoiceData.studentId.profilePicUrl"
100	/>	100	/>
101	</v-avatar>	101	</v-avatar>
102	</v-flex>	102	</v-flex>
103	</v-layout>	103	</v-layout>
104	<v-layout class="studentProfile">	104	<v-layout class="studentProfile">
105	<v-flex xs4 sm3 md3>	105	<v-flex xs4 sm3 md3>
106	<h4>	106	<h4>
107	<b>Name</b>	107	<b>Name</b>
108	</h4>	108	</h4>
109	</v-flex>	109	</v-flex>
110	<v-flex sm9 xs8 md9>	110	<v-flex sm9 xs8 md9>
111	<h4>: {{ invoiceData.studentId.name }}</h4>	111	<h4>: {{ invoiceData.studentId.name }}</h4>
112	</v-flex>	112	</v-flex>
113	</v-layout>	113	</v-layout>
114	<v-layout class="studentProfile">	114	<v-layout class="studentProfile">
115	<v-flex xs4 sm3 md3>	115	<v-flex xs4 sm3 md3>
116	<h4>	116	<h4>
117	<b>Class</b>	117	<b>Class</b>
118	</h4>	118	</h4>
119	</v-flex>	119	</v-flex>
120	<v-flex sm9 xs8 md9>	120	<v-flex sm9 xs8 md9>
121	<h4>: {{ invoiceData.classId.classNum }}</h4>	121	<h4>: {{ invoiceData.classId.classNum }}</h4>
122	</v-flex>	122	</v-flex>
123	</v-layout>	123	</v-layout>
124	<v-layout class="studentProfile">	124	<v-layout class="studentProfile">
125	<v-flex xs4 sm3 md3>	125	<v-flex xs4 sm3 md3>
126	<h4>	126	<h4>
127	<b>Roll No</b>	127	<b>Roll No</b>
128	</h4>	128	</h4>
129	</v-flex>	129	</v-flex>
130	<v-flex sm9 xs8 md9>	130	<v-flex sm9 xs8 md9>
131	<h4>: {{ invoiceData.studentId.rollNo }}</h4>	131	<h4>: {{ invoiceData.studentId.rollNo }}</h4>
132	</v-flex>	132	</v-flex>
133	</v-layout>	133	</v-layout>
134	</v-card>	134	</v-card>
135	</v-flex>	135	</v-flex>
136	<v-flex xs12 sm12 md8 v-show="showInvoiceTable">	136	<v-flex xs12 sm12 md8 v-show="showInvoiceTable">
137	<v-card>	137	<v-card>
138	<v-data-table	138	<v-data-table
139	:headers="headers"	139	:headers="headers"
140	:items="studentInvoiceData"	140	:items="studentInvoiceData"
141	:search="search"	141	:search="search"
142	hide-actions	142	hide-actions
143	>	143	>
144	<template slot="items" slot-scope="props">	144	<template slot="items" slot-scope="props">
145	<td id="td" class="text-xs-center">{{ props.item.invoiceNumber}}</td>	145	<td id="td" class="text-xs-center">{{ props.item.invoiceNumber }}</td>
146	<td id="td" class="text-xs-center">{{ props.item.totalAmount}}</td>	146	<td id="td" class="text-xs-center">{{ props.item.totalAmount }}</td>
147	<td id="td" class="text-xs-center">{{ props.item.totalDiscount }}</td>	147	<td id="td" class="text-xs-center">{{ props.item.totalDiscount }}</td>
148	<td id="td" class="text-xs-center">{{ props.item.totalSubTotal }}</td>	148	<td id="td" class="text-xs-center">{{ props.item.totalSubTotal }}</td>
149	<td id="td" class="text-xs-center">{{ props.item.paymentStatus}}</td>	149	<td id="td" class="text-xs-center">{{ props.item.paymentStatus}}</td>
150	<td id="td" class="text-xs-center">{{ dates(props.item.date) }}</td>	150	<td id="td" class="text-xs-center">{{ dates(props.item.date) }}</td>
151	<td class="text-xs-center">	151	<td class="text-xs-center">
152	<router-link	152	<router-link
153	:to="{ name:'ViewInvoice',params: { viewInvoiceId:props.item._id } }"	153	:to="{ name:'ViewInvoice',params: { viewInvoiceId:props.item._id } }"
154	>	154	>
155	<v-tooltip top>	155	<v-tooltip top>
156	<img	156	<img
157	slot="activator"	157	slot="activator"
158	style="cursor:pointer; width:25px; height:18px; "	158	style="cursor:pointer; width:25px; height:18px; "
159	@click="profile(props.item)"	159	@click="profile(props.item)"
160	src="/static/icon/eye1.png"	160	src="/static/icon/eye1.png"
161	/>	161	/>
162	<span>View</span>	162	<span>View</span>
163	</v-tooltip>	163	</v-tooltip>
164	</router-link>	164	</router-link>
165	</td>	165	</td>
166	</template>	166	</template>
167	<v-alert	167	<v-alert
168	slot="no-results"	168	slot="no-results"
169	:value="true"	169	:value="true"
170	color="error"	170	color="error"
171	icon="warning"	171	icon="warning"
172	>Your search for "{{ search }}" found no results.</v-alert>	172	>Your search for "{{ search }}" found no results.</v-alert>
173	</v-data-table>	173	</v-data-table>
174	</v-card>	174	</v-card>
175	</v-flex>	175	</v-flex>
176	</v-layout>	176	</v-layout>
177	</v-flex>	177	</v-flex>
178	</v-container>	178	</v-container>
179	<div class="loader" v-if="showLoader">	179	<div class="loader" v-if="showLoader">
180	<v-progress-circular indeterminate color="white"></v-progress-circular>	180	<v-progress-circular indeterminate color="white"></v-progress-circular>
181	</div>	181	</div>
182	</div>	182	</div>
183	</template>	183	</template>
184		184
185	<script>	185	<script>
186	import http from "@/Services/http.js";	186	import http from "@/Services/http.js";
187	import moment from "moment";	187	import moment from "moment";
188		188
189	export default {	189	export default {
190	data: () => ({	190	data: () => ({
191	snackbar: false,	191	snackbar: false,
192	showInvoiceTable: false,	192	showInvoiceTable: false,
193	y: "top",	193	y: "top",
194	x: "right",	194	x: "right",
195	mode: "",	195	mode: "",
196	timeout: 3000,	196	timeout: 3000,
197	text: "",	197	text: "",
198	showLoader: false,	198	showLoader: false,
199	loading: false,	199	loading: false,
200	search: "",	200	search: "",
201	valid: true,	201	valid: true,
202	addclass: [],	202	addclass: [],
203	selectStudents: {},	203	selectStudents: {},
204	addSection: [],	204	addSection: [],
205	classRules: [v => !!v \|\| " Class Name is required"],	205	classRules: [v => !!v \|\| " Class Name is required"],
206	sectionRules: [v => !!v \|\| " Section Name is required"],	206	sectionRules: [v => !!v \|\| " Section Name is required"],
207	studentRules: [v => !!v \|\| "Student Name is required"],	207	studentRules: [v => !!v \|\| "Student Name is required"],
208	headers: [	208	headers: [
209	{	209	{
210	text: "Invoice Number",	210	text: "Invoice Number",
211	align: "center",	211	align: "center",
212	sortable: false,	212	sortable: false,
213	value: "invoiceNumber"	213	value: "invoiceNumber"
214	},	214	},
215	{	215	{
216	text: "Total Pay",	216	text: "Total Pay",
217	value: "totalAmount",	217	value: "totalAmount",
218	sortable: false,	218	sortable: false,
219	align: "center"	219	align: "center"
220	},	220	},
221	{	221	{
222	text: "Weaver",	222	text: "Weaver",
223	value: "totalDiscount",	223	value: "totalDiscount",
224	sortable: false,	224	sortable: false,
225	align: "center"	225	align: "center"
226	},	226	},
227	{	227	{
228	text: " Total Collection",	228	text: " Total Collection",
229	value: "totalSubTotal",	229	value: "totalSubTotal",
230	sortable: false,	230	sortable: false,
231	align: "center"	231	align: "center"
232	},	232	},
233	{	233	{
234	text: "Clearance",	234	text: "Clearance",
235	value: "paymentStatus",	235	value: "paymentStatus",
236	sortable: false,	236	sortable: false,
237	align: "center"	237	align: "center"
238	},	238	},
239	{ text: "Payment Date", value: "date", sortable: false, align: "center" },	239	{ text: "Payment Date", value: "date", sortable: false, align: "center" },
240	{ text: "Action", value: "", sortable: false, align: "center" }	240	{ text: "Action", value: "", sortable: false, align: "center" }
241	],	241	],
242	studentData: [],	242	studentData: [],
243	studentInvoiceData: []	243	studentInvoiceData: []
244	}),	244	}),
245	methods: {	245	methods: {
246	dates: function(date) {	246	dates: function(date) {
247	return moment(date).format("MMMM DD, YYYY");	247	return moment(date).format("MMMM DD, YYYY");
248	},	248	},
249	getSection() {	249	getSection() {
250	var token = this.$store.state.token;	250	var token = this.$store.state.token;
251	this.showLoader = true;	251	this.showLoader = true;
252	http()	252	http()
253	.get(	253	.get(
254	"/getSectionsList",	254	"/getSectionsList",
255	{ params: { classId: this.selectStudents.selectClassId } },	255	{ params: { classId: this.selectStudents.selectClassId } },
256	{	256	{
257	headers: { Authorization: "Bearer " + token }	257	headers: { Authorization: "Bearer " + token }
258	}	258	}
259	)	259	)
260	.then(response => {	260	.then(response => {
261	this.addSection = response.data.data;	261	this.addSection = response.data.data;
262	this.showLoader = false;	262	this.showLoader = false;
263	// console.log("getSectionsList=====>", this.addSection);	263	// console.log("getSectionsList=====>", this.addSection);
264	})	264	})
265	.catch(error => {	265	.catch(error => {
266	this.showLoader = false;	266	this.showLoader = false;
267	// console.log("err====>", err);	267	// console.log("err====>", err);
268	// this.$router.replace({ path: '/' });	268	// this.$router.replace({ path: '/' });
269	});	269	});
270	},	270	},
271	getStudents() {	271	getStudents() {
272	this.showLoader = true;	272	this.showLoader = true;
273	http()	273	http()
274	.get("/getStudentWithClass", {	274	.get("/getStudentWithClass", {
275	params: {	275	params: {
276	classId: this.selectStudents.selectClassId,	276	classId: this.selectStudents.selectClassId,
277	sectionId: this.selectStudents.selectSection	277	sectionId: this.selectStudents.selectSection
278	}	278	}
279	})	279	})
280	.then(response => {	280	.then(response => {
281	this.studentData = response.data.data;	281	this.studentData = response.data.data;
282	this.showLoader = false;	282	this.showLoader = false;
283	})	283	})
284	.catch(err => {	284	.catch(err => {
285	console.log("err====>", err);	285	console.log("err====>", err);
286	this.showLoader = false;	286	this.showLoader = false;
287	});	287	});
288	},	288	},
289	getInvoicesData() {	289	getInvoicesData() {
290	this.showLoader = true;	290	this.showLoader = true;
291	this.showInvoiceTable = true;	291	this.showInvoiceTable = true;
292	http()	292	http()
293	.get("/getInvoicesList", {	293	.get("/getInvoicesList", {
294	params: {	294	params: {
295	classId: this.selectStudents.selectClassId,	295	classId: this.selectStudents.selectClassId,
296	studentId: this.selectStudents.selectId	296	studentId: this.selectStudents.selectId
297	}	297	}
298	})	298	})
299	.then(response => {	299	.then(response => {
300	this.studentInvoiceData = response.data.data;	300	this.studentInvoiceData = response.data.data;
301	// console.log("this.studentInvoiceData", this.studentInvoiceData);	301	// console.log("this.studentInvoiceData", this.studentInvoiceData);
302	this.showLoader = false;	302	this.showLoader = false;
303	})	303	})
304	.catch(err => {	304	.catch(err => {
305	console.log("err====>", err);	305	console.log("err====>", err);
306	this.showLoader = false;	306	this.showLoader = false;
307	});	307	});
308	}	308	}
309	},	309	},
310	mounted() {	310	mounted() {
311	var token = this.$store.state.token;	311	var token = this.$store.state.token;
312	http()	312	http()
313	.get("/getClassesList", {	313	.get("/getClassesList", {
314	headers: { Authorization: "Bearer " + token }	314	headers: { Authorization: "Bearer " + token }
315	})	315	})
316	.then(response => {	316	.then(response => {
317	this.addclass = response.data.data;	317	this.addclass = response.data.data;
318	})	318	})
319	.catch(error => {	319	.catch(error => {
320	this.showLoader = false;	320	this.showLoader = false;
321	if (error.response.status === 401) {	321	if (error.response.status === 401) {
322	this.$router.replace({ path: "/" });	322	this.$router.replace({ path: "/" });
323	this.$store.dispatch("setToken", null);	323	this.$store.dispatch("setToken", null);
324	this.$store.dispatch("Id", null);	324	this.$store.dispatch("Id", null);
325	this.$store.dispatch("Role", null);	325	this.$store.dispatch("Role", null);
326	}	326	}
327	});	327	});
328	},	328	},
329	created() {	329	created() {
330	this.$root.$on("app:search", search => {	330	this.$root.$on("app:search", search => {
331	this.search = search;	331	this.search = search;
332	});	332	});
333	},	333	},
334	beforeDestroy() {	334	beforeDestroy() {
335	// dont forget to remove the listener	335	// dont forget to remove the listener
336	this.$root.$off("app:search");	336	this.$root.$off("app:search");
337	}	337	}
338	};	338	};
339	</script>	339	</script>
340		340
341		341
342	<style scoped>	342	<style scoped>
343	.studentProfile {	343	.studentProfile {
344	border: 1px solid lightgrey;	344	border: 1px solid lightgrey;
345	}	345	}
346	</style>	346	</style>

src/pages/NoticeBoard/noticeBoard.vue

Diff comments View file @0721aca

1	<template>	1	<template>
2	<v-app id="pages-dasboard">	2	<v-app id="pages-dasboard">
3	<v-tabs grow slider-color="gray">	3	<v-tabs grow slider-color="gray">
4	<v-tab	4	<v-tab
5	ripple	5	ripple
6	@click="activeTab('existing')"	6	@click="activeTab('existing')"
7	v-bind:class="{ active: isActive }"	7	v-bind:class="{ active: isActive }"
8	id="tab"	8	id="tab"
9	class="subheading"	9	class="subheading"
10	>Existing Notice Board</v-tab>	10	>Existing Notice Board</v-tab>
11	<v-tab	11	<v-tab
12	ripple	12	ripple
13	@click="activeTab('new')"	13	@click="activeTab('new')"
14	v-bind:class="{ active: newActive }"	14	v-bind:class="{ active: newActive }"
15	id="tab1"	15	id="tab1"
16	User	16	User
17	class="subheading"	17	class="subheading"
18	>Add New Notice Board</v-tab>	18	>Add New Notice Board</v-tab>
19		19
20	<!-- **** Edit Notice Board **** -->	20	<!-- **** Edit Notice Board **** -->
21		21
22	<v-tab-item>	22	<v-tab-item>
23	<v-snackbar	23	<v-snackbar
24	:timeout="timeout"	24	:timeout="timeout"
25	:top="y === 'top'"	25	:top="y === 'top'"
26	:right="x === 'right'"	26	:right="x === 'right'"
27	:vertical="mode === 'vertical'"	27	:vertical="mode === 'vertical'"
28	v-model="snackbar"	28	v-model="snackbar"
29	color="success"	29	color="success"
30	>{{ text }}</v-snackbar>	30	>{{ text }}</v-snackbar>
31	<v-dialog v-model="dialog" max-width="940px" scrollable>	31	<v-dialog v-model="dialog" max-width="940px" scrollable>
32	<v-card>	32	<v-card>
33	<v-toolbar color="grey lighten-2" flat>	33	<v-toolbar color="grey lighten-2" flat>
34	<v-spacer></v-spacer>	34	<v-spacer></v-spacer>
35	<v-toolbar-title>	35	<v-toolbar-title>
36	<h3>Edit Notice Board</h3>	36	<h3>Edit Notice Board</h3>
37	</v-toolbar-title>	37	</v-toolbar-title>
38	<v-spacer></v-spacer>	38	<v-spacer></v-spacer>
39	</v-toolbar>	39	</v-toolbar>
40	<v-card-text>	40	<v-card-text>
41	<v-layout>	41	<v-layout>
42	<v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center">	42	<v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center">
43	<img	43	<img
44	src="/static/icon/user.png"	44	src="/static/icon/user.png"
45	v-if="!editedItem.eventImageUrl && !imageUrl"	45	v-if="!editedItem.eventImageUrl && !imageUrl"
46	width="150px"	46	width="150px"
47	/>	47	/>
48	<img	48	<img
49	:src="editedItem.eventImageUrl"	49	:src="editedItem.eventImageUrl"
50	height="150"	50	height="150"
51	v-else-if="editedItem.eventImageUrl && !imageUrl"	51	v-else-if="editedItem.eventImageUrl && !imageUrl"
52	width="180px"	52	width="180px"
53	/>	53	/>
54	<img	54	<img
55	v-if="imageUrl"	55	v-if="imageUrl"
56	:src="imageUrl"	56	:src="imageUrl"
57	height="150"	57	height="150"
58	style="border-radius:50%; width:200px"	58	style="border-radius:50%; width:200px"
59	/>	59	/>
60	<input	60	<input
61	type="file"	61	type="file"
62	style="display: none"	62	style="display: none"
63	ref="image"	63	ref="image"
64	accept="image/*"	64	accept="image/*"
65	@change="onFilePicked"	65	@change="onFilePicked"
66	/>	66	/>
67	</v-flex>	67	</v-flex>
68	</v-layout>	68	</v-layout>
69	<v-layout wrap>	69	<v-layout wrap>
70	<v-flex xs12>	70	<v-flex xs12>
71	<v-layout>	71	<v-layout>
72	<v-flex xs4 class="pt-4 subheading">	72	<v-flex xs4 class="pt-4 subheading">
73	<label class="right">Title:</label>	73	<label class="right">Title:</label>
74	</v-flex>	74	</v-flex>
75	<v-flex xs6 class="ml-3">	75	<v-flex xs6 class="ml-3">
76	<v-text-field	76	<v-text-field
77	v-model="editedItem.title"	77	v-model="editedItem.title"
78	placeholder="fill your Title"	78	placeholder="fill your Title"
79	name="name"	79	name="name"
80	type="text"	80	type="text"
81	required	81	required
82	></v-text-field>	82	></v-text-field>
83	</v-flex>	83	</v-flex>
84	</v-layout>	84	</v-layout>
85	</v-flex>	85	</v-flex>
86	<v-flex xs12>	86	<v-flex xs12>
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">Description:</label>	89	<label class="right">Description:</label>
90	</v-flex>	90	</v-flex>
91	<v-flex xs6 class="ml-3">	91	<v-flex xs6 class="ml-3">
92	<v-text-field	92	<v-text-field
93	placeholder="fill your Description"	93	placeholder="fill your Description"
94	v-model="editedItem.description"	94	v-model="editedItem.description"
95	type="text"	95	type="text"
96	name="email"	96	name="email"
97	required	97	required
98	></v-text-field>	98	></v-text-field>
99	</v-flex>	99	</v-flex>
100	</v-layout>	100	</v-layout>
101	</v-flex>	101	</v-flex>
102	<v-flex xs12>	102	<v-flex xs12>
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 hidden-xs-only hidden-sm-only">Uplaod Image:</label>	105	<label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
106	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label>	106	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label>
107	</v-flex>	107	</v-flex>
108	<v-flex xs6 class="ml-3">	108	<v-flex xs6 class="ml-3">
109	<v-text-field	109	<v-text-field
110	label="Select Image"	110	label="Select Image"
111	@click="pickFile"	111	@click="pickFile"
112	v-model="imageName"	112	v-model="imageName"
113	append-icon="attach_file"	113	append-icon="attach_file"
114	></v-text-field>	114	></v-text-field>
115	</v-flex>	115	</v-flex>
116	</v-layout>	116	</v-layout>
117	</v-flex>	117	</v-flex>
118	<v-flex xs12 sm9 offset-sm2>	118	<v-flex xs12 sm9 offset-sm2>
119	<v-card-actions>	119	<v-card-actions>
120	<v-btn round dark @click.native="close">Cancel</v-btn>	120	<v-btn round dark @click.native="close">Cancel</v-btn>
121	<v-spacer></v-spacer>	121	<v-spacer></v-spacer>
122	<v-btn round dark @click="save">Save</v-btn>	122	<v-btn round dark @click="save">Save</v-btn>
123	</v-card-actions>	123	</v-card-actions>
124	</v-flex>	124	</v-flex>
125	</v-layout>	125	</v-layout>
126	</v-card-text>	126	</v-card-text>
127	</v-card>	127	</v-card>
128	</v-dialog>	128	</v-dialog>
129		129
130	<!-- **** VIEW PROFIL NOTICE BOARD **** -->	130	<!-- **** VIEW PROFIL NOTICE BOARD **** -->
131		131
132	<v-dialog v-model="dialog1" max-width="640px" scrollable>	132	<v-dialog v-model="dialog1" max-width="940px" scrollable>
133	<v-card>	133	<v-card>
134	<v-toolbar color="grey lighten-2" flat>	134	<v-toolbar color="grey lighten-2" flat>
135	<v-spacer></v-spacer>	135	<v-spacer></v-spacer>
136	<v-toolbar-title>	136	<v-toolbar-title>
137	<h3>Notice Board</h3>	137	<h3>Notice Board</h3>
138	</v-toolbar-title>	138	</v-toolbar-title>
139	<v-spacer></v-spacer>	139	<v-spacer></v-spacer>
140	<v-icon @click="close1">close</v-icon>	140	<v-icon @click="close1">close</v-icon>
141	</v-toolbar>	141	</v-toolbar>
142	<v-card-text>	142	<v-card-text>
143	<v-layout>	143	<v-layout>
144	<v-flex align-center justify-center layout text-xs-center class="mt-2">	144	<v-flex align-center justify-center layout text-xs-center class="mt-2">
145	<img src="/static/icon/user.png" v-if="!editedItem.eventImageUrl" width="130px" />	145	<img src="/static/icon/user.png" v-if="!editedItem.eventImageUrl" width="130px" />
146	<img	146	<img
147	:src="editedItem.eventImageUrl"	147	:src="editedItem.eventImageUrl"
148	v-else-if="editedItem.eventImageUrl"	148	v-else-if="editedItem.eventImageUrl"
149	class="img"	149	class="img"
150	width="200"	150	width="200"
151	/>	151	/>
152	</v-flex>	152	</v-flex>
153	</v-layout>	153	</v-layout>
154	<v-container grid-list-md>	154	<v-container grid-list-md>
155	<v-layout wrap>	155	<v-layout wrap>
156	<v-flex>	156	<v-flex>
157	<v-layout>	157	<v-layout>
158	<v-flex xs5 sm6>	158	<v-flex xs5 sm6>
159	<h5 class="right my-1">	159	<h5 class="right my-1">
160	<b>Title:</b>	160	<b>Title:</b>
161	</h5>	161	</h5>
162	</v-flex>	162	</v-flex>
163	<v-flex sm6 xs8>	163	<v-flex sm6 xs8>
164	<h5 class="my-1">{{ editedItem.title }}</h5>	164	<h5 class="my-1">{{ editedItem.title }}</h5>
165	</v-flex>	165	</v-flex>
166	</v-layout>	166	</v-layout>
167	<v-layout>	167	<v-layout>
168	<v-flex xs5 sm6>	168	<v-flex xs5 sm6>
169	<h5 class="right my-1">	169	<h5 class="right my-1">
170	<b>Description:</b>	170	<b>Description:</b>
171	</h5>	171	</h5>
172	</v-flex>	172	</v-flex>
173	<v-flex sm6 xs8>	173	<v-flex sm6 xs8>
174	<h5 class="my-1">{{ editedItem.description }}</h5>	174	<h5 class="my-1">{{ editedItem.description }}</h5>
175	</v-flex>	175	</v-flex>
176	</v-layout>	176	</v-layout>
177	</v-flex>	177	</v-flex>
178	</v-layout>	178	</v-layout>
179	</v-container>	179	</v-container>
180	</v-card-text>	180	</v-card-text>
181	</v-card>	181	</v-card>
182	</v-dialog>	182	</v-dialog>
183		183
184	<v-snackbar	184	<v-snackbar
185	:timeout="timeout"	185	:timeout="timeout"
186	:top="y === 'top'"	186	:top="y === 'top'"
187	:right="x === 'right'"	187	:right="x === 'right'"
188	:vertical="mode === 'vertical'"	188	:vertical="mode === 'vertical'"
189	v-model="snackbar"	189	v-model="snackbar"
190	color="success"	190	color="success"
191	>{{ text }}</v-snackbar>	191	>{{ text }}</v-snackbar>
192		192
193	<!-- **** EXISTING Notice Board TABLE **** -->	193	<!-- **** EXISTING Notice Board TABLE **** -->
194		194
195	<v-data-table	195	<v-data-table
196	:headers="headers"	196	:headers="headers"
197	:items="desserts"	197	:items="desserts"
198	:pagination.sync="pagination"	198	:pagination.sync="pagination"
199	:search="search"	199	:search="search"
200	>	200	>
201	<template slot="items" slot-scope="props">	201	<template slot="items" slot-scope="props">
202	<td id="td" class="text-xs-center">{{ props.index + 1}}</td>	202	<td id="td" class="text-xs-center">{{ props.index + 1}}</td>
203	<td id="td" class="text-xs-center">{{ props.item.title}}</td>	203	<td id="td" class="text-xs-center">{{ props.item.title}}</td>
204	<td id="td" class="text-xs-center td-dec">{{ props.item.description}}</td>	204	<td id="td" class="text-xs-center td-dec">{{ props.item.description}}</td>
205		205
206	<td class="text-xs-center">	206	<td class="text-xs-center">
207	<span>	207	<span>
208	<v-tooltip top>	208	<v-tooltip top>
209	<img	209	<img
210	slot="activator"	210	slot="activator"
211	style="cursor:pointer; width:25px; height:18px; "	211	style="cursor:pointer; width:25px; height:18px; "
212	class="mr5"	212	class="mr5"
213	@click="profile(props.item)"	213	@click="profile(props.item)"
214	src="/static/icon/eye1.png"	214	src="/static/icon/eye1.png"
215	/>	215	/>
216	<span>View</span>	216	<span>View</span>
217	</v-tooltip>	217	</v-tooltip>
218	<v-tooltip top>	218	<v-tooltip top>
219	<img	219	<img
220	slot="activator"	220	slot="activator"
221	style="cursor:pointer; width:20px; height:18px; "	221	style="cursor:pointer; width:20px; height:18px; "
222	class="mr5"	222	class="mr5"
223	@click="editItem(props.item)"	223	@click="editItem(props.item)"
224	src="/static/icon/edit1.png"	224	src="/static/icon/edit1.png"
225	/>	225	/>
226	<span>Edit</span>	226	<span>Edit</span>
227	</v-tooltip>	227	</v-tooltip>
228	<v-tooltip top>	228	<v-tooltip top>
229	<img	229	<img
230	slot="activator"	230	slot="activator"
231	style="cursor:pointer; width:20px; height:20px; "	231	style="cursor:pointer; width:20px; height:20px; "
232	class="mr5"	232	class="mr5"
233	@click="deleteItem(props.item)"	233	@click="deleteItem(props.item)"
234	src="/static/icon/delete1.png"	234	src="/static/icon/delete1.png"
235	/>	235	/>
236	<span>Delete</span>	236	<span>Delete</span>
237	</v-tooltip>	237	</v-tooltip>
238	</span>	238	</span>
239	</td>	239	</td>
240	</template>	240	</template>
241	<v-alert	241	<v-alert
242	slot="no-results"	242	slot="no-results"
243	:value="true"	243	:value="true"
244	color="error"	244	color="error"
245	icon="warning"	245	icon="warning"
246	>Your search for "{{ search }}" found no results.</v-alert>	246	>Your search for "{{ search }}" found no results.</v-alert>
247	</v-data-table>	247	</v-data-table>
248	</v-tab-item>	248	</v-tab-item>
249		249
250	<!-- **** ADD MULTIPLE Notice Board **** -->	250	<!-- **** ADD MULTIPLE Notice Board **** -->
251		251
252	<v-tab-item>	252	<v-tab-item>
253	<v-container>	253	<v-container>
254	<v-snackbar	254	<v-snackbar
255	:timeout="timeout"	255	:timeout="timeout"
256	:top="y === 'top'"	256	:top="y === 'top'"
257	:right="x === 'right'"	257	:right="x === 'right'"
258	:vertical="mode === 'vertical'"	258	:vertical="mode === 'vertical'"
259	v-model="snackbar"	259	v-model="snackbar"
260	color="success"	260	color="success"
261	>{{ text }}</v-snackbar>	261	>{{ text }}</v-snackbar>
262	<v-flex xs12 sm8 offset-sm2 class="top">	262	<v-flex xs12 sm8 offset-sm2 class="top">
263	<v-card flat>	263	<v-card flat>
264	<v-container fluid fill-height>	264	<v-container fluid fill-height>
265	<v-layout align-center>	265	<v-layout align-center>
266	<v-flex xs12>	266	<v-flex xs12>
267	<v-form ref="form" v-model="valid" lazy-validation>	267	<v-form ref="form" v-model="valid" lazy-validation>
268	<v-layout>	268	<v-layout>
269	<v-flex	269	<v-flex
270	xs12	270	xs12
271	class="text-xs-center text-sm-center text-md-center text-lg-center my-4"	271	class="text-xs-center text-sm-center text-md-center text-lg-center my-4"
272	>	272	>
273	<v-avatar size="100px">	273	<v-avatar size="100px">
274	<img src="/static/icon/user.png" v-if="!imageUrl" />	274	<img src="/static/icon/user.png" v-if="!imageUrl" />
275	</v-avatar>	275	</v-avatar>
276	<input	276	<input
277	type="file"	277	type="file"
278	style="display: none"	278	style="display: none"
279	ref="image"	279	ref="image"
280	accept="image/*"	280	accept="image/*"
281	@change="onFilePicked"	281	@change="onFilePicked"
282	/>	282	/>
283	<img	283	<img
284	:src="imageUrl"	284	:src="imageUrl"
285	height="150"	285	height="150"
286	v-if="imageUrl"	286	v-if="imageUrl"
287	style="border-radius:50%; width:200px"	287	style="border-radius:50%; width:200px"
288	/>	288	/>
289	</v-flex>	289	</v-flex>
290	</v-layout>	290	</v-layout>
291	<v-layout>	291	<v-layout>
292	<v-flex xs4 class="pt-4 subheading">	292	<v-flex xs4 class="pt-4 subheading">
293	<label class="right">Title:</label>	293	<label class="right">Title:</label>
294	</v-flex>	294	</v-flex>
295	<v-flex xs6 class="ml-3">	295	<v-flex xs6 class="ml-3">
296	<v-text-field	296	<v-text-field
297	v-model="addNoticeBoard.title"	297	v-model="addNoticeBoard.title"
298	placeholder="fill your Title"	298	placeholder="fill your Title"
299	name="name"	299	name="name"
300	type="text"	300	type="text"
301	:rules="titleRules"	301	:rules="titleRules"
302	required	302	required
303	></v-text-field>	303	></v-text-field>
304	</v-flex>	304	</v-flex>
305	</v-layout>	305	</v-layout>
306	<v-layout>	306	<v-layout>
307	<v-flex xs4 class="pt-4 subheading">	307	<v-flex xs4 class="pt-4 subheading">
308	<label class="right">Description:</label>	308	<label class="right">Description:</label>
309	</v-flex>	309	</v-flex>
310	<v-flex xs6 class="ml-3">	310	<v-flex xs6 class="ml-3">
311	<v-text-field	311	<v-text-field
312	v-model="addNoticeBoard.description"	312	v-model="addNoticeBoard.description"
313	placeholder="fill your Description"	313	placeholder="fill your Description"
314	name="name"	314	name="name"
315	type="text"	315	type="text"
316	:rules="descriptionRules"	316	:rules="descriptionRules"
317	required	317	required
318	></v-text-field>	318	></v-text-field>
319	</v-flex>	319	</v-flex>
320	</v-layout>	320	</v-layout>
321	<v-layout>	321	<v-layout>
322	<v-flex xs4 class="pt-4 subheading">	322	<v-flex xs4 class="pt-4 subheading">
323	<label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>	323	<label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
324	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label>	324	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label>
325	</v-flex>	325	</v-flex>
326	<v-flex xs6 class="ml-3">	326	<v-flex xs6 class="ml-3">
327	<v-text-field	327	<v-text-field
328	label="Select Image"	328	label="Select Image"
329	@click="pickFile"	329	@click="pickFile"
330	v-model="imageName"	330	v-model="imageName"
331	append-icon="attach_file"	331	append-icon="attach_file"
332	></v-text-field>	332	></v-text-field>
333	</v-flex>	333	</v-flex>
334	</v-layout>	334	</v-layout>
335	<v-layout>	335	<v-layout>
336	<v-flex xs12 sm9 offset-sm2>	336	<v-flex xs12 sm9 offset-sm2>
337	<v-card-actions>	337	<v-card-actions>
338	<v-btn @click="clear" round dark>clear</v-btn>	338	<v-btn @click="clear" round dark>clear</v-btn>
339	<v-spacer></v-spacer>	339	<v-spacer></v-spacer>
340	<v-btn @click="submit" round dark :loading="loading">Add</v-btn>	340	<v-btn @click="submit" round dark :loading="loading">Add</v-btn>
341	</v-card-actions>	341	</v-card-actions>
342	</v-flex>	342	</v-flex>
343	</v-layout>	343	</v-layout>
344	</v-form>	344	</v-form>
345	</v-flex>	345	</v-flex>
346	</v-layout>	346	</v-layout>
347	</v-container>	347	</v-container>
348	</v-card>	348	</v-card>
349	</v-flex>	349	</v-flex>
350	</v-container>	350	</v-container>
351	</v-tab-item>	351	</v-tab-item>
352	</v-tabs>	352	</v-tabs>
353	<div class="loader" v-if="showLoader">	353	<div class="loader" v-if="showLoader">
354	<v-progress-circular indeterminate color="white"></v-progress-circular>	354	<v-progress-circular indeterminate color="white"></v-progress-circular>
355	</div>	355	</div>
356	</v-app>	356	</v-app>
357	</template>	357	</template>
358		358
359	<script>	359	<script>
360	import http from "@/Services/http.js";	360	import http from "@/Services/http.js";
361	import Util from "@/util";	361	import Util from "@/util";
362		362
363	export default {	363	export default {
364	data: () => ({	364	data: () => ({
365	snackbar: false,	365	snackbar: false,
366	y: "top",	366	y: "top",
367	x: "right",	367	x: "right",
368	mode: "",	368	mode: "",
369	timeout: 3000,	369	timeout: 3000,
370	text: "",	370	text: "",
371	showLoader: false,	371	showLoader: false,
372	loading: false,	372	loading: false,
373	date: null,	373	date: null,
374	search: "",	374	search: "",
375	dialog: false,	375	dialog: false,
376	dialog1: false,	376	dialog1: false,
377	valid: true,	377	valid: true,
378	isActive: true,	378	isActive: true,
379	newActive: false,	379	newActive: false,
380	addclass: [],	380	addclass: [],
381	addSection: [],	381	addSection: [],
382	gender: ["Male", "Female"],	382	gender: ["Male", "Female"],
383	AddUsercredentials: {},	383	AddUsercredentials: {},
384	pagination: {	384	pagination: {
385	rowsPerPage: 19	385	rowsPerPage: 19
386	},	386	},
387	imageName: "",	387	imageName: "",
388	imageUrl: "",	388	imageUrl: "",
389	imageFile: "",	389	imageFile: "",
390	upload: "",	390	upload: "",
391	titleRules: [v => !!v \|\| " Title is required"],	391	titleRules: [v => !!v \|\| " Title is required"],
392	descriptionRules: [v => !!v \|\| " Description is required"],	392	descriptionRules: [v => !!v \|\| " Description is required"],
393	headers: [	393	headers: [
394	{	394	{
395	text: "No",	395	text: "No",
396	align: "center",	396	align: "center",
397	sortable: false,	397	sortable: false,
398	value: "No"	398	value: "No"
399	},	399	},
400	{ text: "Title", value: "title", sortable: false, align: "center" },	400	{ text: "Title", value: "title", sortable: false, align: "center" },
401	{	401	{
402	text: "Description",	402	text: "Description",
403	value: "description",	403	value: "description",
404	sortable: false,	404	sortable: false,
405	align: "center"	405	align: "center"
406	},	406	},
407	{ text: "Action", value: "", sortable: false, align: "center" }	407	{ text: "Action", value: "", sortable: false, align: "center" }
408	],	408	],
409	desserts: [],	409	desserts: [],
410	editedIndex: -1,	410	editedIndex: -1,
411	addNoticeBoard: {},	411	addNoticeBoard: {},
412	editedItem: {	412	editedItem: {
413	title: "",	413	title: "",
414	description: ""	414	description: ""
415	},	415	},
416	defaultItem: {	416	defaultItem: {
417	title: "",	417	title: "",
418	description: ""	418	description: ""
419	}	419	}
420	}),	420	}),
421	methods: {	421	methods: {
422	pickFile() {	422	pickFile() {
423	this.$refs.image.click();	423	this.$refs.image.click();
424	},	424	},
425		425
426	onFilePicked(e) {	426	onFilePicked(e) {
427	// console.log(e)	427	// console.log(e)
428	const files = e.target.files;	428	const files = e.target.files;
429	this.upload = e.target.files[0];	429	this.upload = e.target.files[0];
430	console.log("thisupload==>", this.upload);	430	console.log("thisupload==>", this.upload);
431	if (files[0] !== undefined) {	431	if (files[0] !== undefined) {
432	this.imageName = files[0].name;	432	this.imageName = files[0].name;
433	if (this.imageName.lastIndexOf(".") <= 0) {	433	if (this.imageName.lastIndexOf(".") <= 0) {
434	return;	434	return;
435	}	435	}
436	const fr = new FileReader();	436	const fr = new FileReader();
437	fr.readAsDataURL(files[0]);	437	fr.readAsDataURL(files[0]);
438	fr.addEventListener("load", () => {	438	fr.addEventListener("load", () => {
439	this.imageUrl = fr.result;	439	this.imageUrl = fr.result;
440	this.imageFile = files[0]; // this is an image file that can be sent to server...	440	this.imageFile = files[0]; // this is an image file that can be sent to server...
441	});	441	});
442	} else {	442	} else {
443	this.imageName = "";	443	this.imageName = "";
444	this.imageFile = "";	444	this.imageFile = "";
445	this.imageUrl = "";	445	this.imageUrl = "";
446	}	446	}
447	},	447	},
448	getNoticeDataList() {	448	getNoticeDataList() {
449	this.showLoader = true;	449	this.showLoader = true;
450	var token = this.$store.state.token;	450	var token = this.$store.state.token;
451	http()	451	http()
452	.get("/getEventsList", {	452	.get("/getEventsList", {
453	headers: { Authorization: "Bearer " + token }	453	headers: { Authorization: "Bearer " + token }
454	})	454	})
455	.then(response => {	455	.then(response => {
456	this.desserts = response.data.data;	456	this.desserts = response.data.data;
457	this.showLoader = false;	457	this.showLoader = false;
458	})	458	})
459	.catch(error => {	459	.catch(error => {
460	this.showLoader = false;	460	this.showLoader = false;
461	if (error.response.status === 401) {	461	if (error.response.status === 401) {
462	this.$router.replace({ path: "/" });	462	this.$router.replace({ path: "/" });
463	this.$store.dispatch("setToken", null);	463	this.$store.dispatch("setToken", null);
464	this.$store.dispatch("Id", null);	464	this.$store.dispatch("Id", null);
465	}	465	}
466	});	466	});
467	},	467	},
468	editItem(item) {	468	editItem(item) {
469	this.editedIndex = this.desserts.indexOf(item);	469	this.editedIndex = this.desserts.indexOf(item);
470	this.editedItem = Object.assign({}, item);	470	this.editedItem = Object.assign({}, item);
471	this.dialog = true;	471	this.dialog = true;
472	},	472	},
473	profile(item) {	473	profile(item) {
474	this.editedIndex = this.desserts.indexOf(item);	474	this.editedIndex = this.desserts.indexOf(item);
475	this.editedItem = Object.assign({}, item);	475	this.editedItem = Object.assign({}, item);
476	this.dialog1 = true;	476	this.dialog1 = true;
477	},	477	},
478	deleteItem(item) {	478	deleteItem(item) {
479	let deleteEvent = {	479	let deleteEvent = {
480	eventId: item._id	480	eventId: item._id
481	};	481	};
482	http()	482	http()
483	.delete(	483	.delete(
484	"/deleteEvent",	484	"/deleteEvent",
485	confirm("Are you sure you want to delete this?") && {	485	confirm("Are you sure you want to delete this?") && {
486	params: deleteEvent	486	params: deleteEvent
487	}	487	}
488	)	488	)
489	.then(response => {	489	.then(response => {
490	// console.log("deleteUers",deleteEvent)	490	// console.log("deleteUers",deleteEvent)
491	if ((this.snackbar = true)) {	491	if ((this.snackbar = true)) {
492	this.text = "Successfully delete Existing Notice Data";	492	this.text = "Successfully delete Existing Notice Data";
493	}	493	}
494	this.getNoticeDataList();	494	this.getNoticeDataList();
495	})	495	})
496	.catch(error => {	496	.catch(error => {
497	// console.log(error);	497	// console.log(error);
498	});	498	});
499	},	499	},
500	activeTab(type) {	500	activeTab(type) {
501	switch (type) {	501	switch (type) {
502	case "existing":	502	case "existing":
503	this.newActive = false;	503	this.newActive = false;
504	this.isActive = true;	504	this.isActive = true;
505	break;	505	break;
506		506
507	default:	507	default:
508	this.newActive = true;	508	this.newActive = true;
509	this.isActive = false;	509	this.isActive = false;
510	break;	510	break;
511	}	511	}
512	},	512	},
513	close() {	513	close() {
514	this.dialog = false;	514	this.dialog = false;
515	setTimeout(() => {	515	setTimeout(() => {
516	this.editedItem = Object.assign({}, this.defaultItem);	516	this.editedItem = Object.assign({}, this.defaultItem);
517	this.editedIndex = -1;	517	this.editedIndex = -1;
518	}, 300);	518	}, 300);
519	},	519	},
520	close1() {	520	close1() {
521	this.dialog1 = false;	521	this.dialog1 = false;
522	},	522	},
523	submit() {	523	submit() {
524	if (this.$refs.form.validate()) {	524	if (this.$refs.form.validate()) {
525	if (this.imageUrl) {	525	if (this.imageUrl) {
526	var str = this.imageUrl;	526	var str = this.imageUrl;
527	const [baseUrl, imageUrl] = str.split(/,/);	527	const [baseUrl, imageUrl] = str.split(/,/);
528	this.addNoticeBoard.upload = imageUrl;	528	this.addNoticeBoard.upload = imageUrl;
529	}	529	}
530	http()	530	http()
531	.post("/createEvent", this.addNoticeBoard)	531	.post("/createEvent", this.addNoticeBoard)
532	.then(response => {	532	.then(response => {
533	this.imageUrl = "";	533	this.imageUrl = "";
534	this.snackbar = true;	534	this.snackbar = true;
535	this.text = "New Notice added successfully";	535	this.text = "New Notice added successfully";
536	this.getNoticeDataList();	536	this.getNoticeDataList();
537	this.clear();	537	this.clear();
538	})	538	})
539	.catch(error => {	539	.catch(error => {
540	// console.log(error);	540	// console.log(error);
541	this.snackbar = true;	541	this.snackbar = true;
542	this.text = error.response.data.message;	542	this.text = error.response.data.message;
543	});	543	});
544	}	544	}
545	},	545	},
546	clear() {	546	clear() {
547	this.$refs.form.reset();	547	this.$refs.form.reset();
548	this.imageUrl = "";	548	this.imageUrl = "";
549	},	549	},
550	save() {	550	save() {
551	let editNoticeBoard = {	551	let editNoticeBoard = {
552	eventId: this.editedItem._id,	552	eventId: this.editedItem._id,
553	title: this.editedItem.title,	553	title: this.editedItem.title,
554	description: this.editedItem.description	554	description: this.editedItem.description
555	};	555	};
556	if (this.imageUrl) {	556	if (this.imageUrl) {
557	var str = this.imageUrl;	557	var str = this.imageUrl;
558	const [baseUrl, imageUrl] = str.split(/,/);	558	const [baseUrl, imageUrl] = str.split(/,/);
559	editNoticeBoard.upload = imageUrl;	559	editNoticeBoard.upload = imageUrl;
560	}	560	}
561	http()	561	http()
562	.put("/updateEvent", editNoticeBoard)	562	.put("/updateEvent", editNoticeBoard)
563	.then(response => {	563	.then(response => {
564	if ((this.snackbar = true)) {	564	if ((this.snackbar = true)) {
565	this.text = "Successfully Edit Existing Notice Data";	565	this.text = "Successfully Edit Existing Notice Data";
566	}	566	}
567	this.getNoticeDataList();	567	this.getNoticeDataList();
568	this.close();	568	this.close();
569	})	569	})
570	.catch(error => {	570	.catch(error => {
571	// console.log(error);	571	// console.log(error);
572	});	572	});
573	}	573	}
574	},	574	},
575	mounted() {	575	mounted() {
576	this.getNoticeDataList();	576	this.getNoticeDataList();
577	},	577	},
578	created() {	578	created() {
579	this.$root.$on("app:search", search => {	579	this.$root.$on("app:search", search => {
580	this.search = search;	580	this.search = search;
581	});	581	});
582	},	582	},
583	beforeDestroy() {	583	beforeDestroy() {
584	// dont forget to remove the listener	584	// dont forget to remove the listener
585	this.$root.$off("app:search");	585	this.$root.$off("app:search");
586	}	586	}
587	};	587	};
588	</script>	588	</script>
589	<style scoped>	589	<style scoped>
590	.active {	590	.active {
591	background-color: gray;	591	background-color: gray;
592	color: white !important;	592	color: white !important;
593	}	593	}
594	.activebtn {	594	.activebtn {
595	color: black !important;	595	color: black !important;
596	}	596	}
597	.td-dec {	597	.td-dec {
598	max-width: 200px !important;	598	max-width: 200px !important;
599	}	599	}
600	</style>	600	</style>

src/pages/Students/students.vue

Diff comments View file @0721aca

 <template>
   <div>
     <v-tabs grow slider-color="gray">
       <v-tab
         ripple
         @click="activeTab('existing')"
         v-bind:class="{ active: isActive }"
         id="tab"
         class="subheading"
       >Existing Students</v-tab>
       <v-tab
         ripple
         @click="activeTab('new')"
         v-bind:class="{ active: newActive }"
         id="tab1"
         User
         class="subheading"
       >Add New Students</v-tab>
       <!-- ****** EDITS  STUDENTS DETAILS ****** -->
       <v-tab-item>
         <v-snackbar
           :timeout="timeout"
           :top="y === 'top'"
           :right="x === 'right'"
           :vertical="mode === 'vertical'"
           v-model="snackbar"
           color="success"
         >{{ text }}</v-snackbar>
         <v-dialog v-model="dialog" max-width="170 0px" scrollable>
           <v-card flat>
             <v-toolbar color="grey lighten-2" flat>
               <v-spacer></v-spacer>
               <v-toolbar-title>
                 <h3>Edit Student Profile</h3>
               </v-toolbar-title>
               <v-spacer></v-spacer>
             </v-toolbar>
             <v-card-text style="height: 680px;">
               <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="160px">
                         <img
                           src="/static/icon/user.png"
                           v-if="!editedItem.profilePicUrl && !imageUrl"
                         />
                         <img
                           :src="editedItem.profilePicUrl"
                           v-else-if="editedItem.profilePicUrl && !imageUrl"
                         />
                         <img
                           v-if="imageUrl"
                           :src="imageUrl"
                           height="150"
                           style="border-radius:50%; width:200px"
                         />
                       </v-avatar>
                       <input
                         type="file"
                         style="display: none"
                         ref="image"
                         accept="image/*"
                         @change="onFilePicked"
                       />
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <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>
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
-                          <label class="right">Email ID:</label>
+                          <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>
                     <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">Allergies:</label>
+                          <label class="right">Gender:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
-                          <v-text-field
+                          <v-select
-                            v-model="editedItem.allergies"
+                            :items="gender"
-                            placeholder="fill your Allergies"
+                            v-model="editedItem.gender"
-                            name="pincode"
+                            placeholder="Select Gender"
                             required
-                          ></v-text-field>
+                          ></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"
                             name="mobileNo"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <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="pickFile"
                             v-model="imageName"
                             append-icon="attach_file"
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <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>
                     <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>
                       <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 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
                             :items="gender"
                             v-model="editedItem.rollNo"
                             placeholder="fill roll number"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
-                  </v-layout>
+                    <v-flex xs12 sm4 class="hidden-xs-only hidden-sm-only">
-                  <v-layout class="hidden-xs-only hidden-sm-only">
-                    <v-flex xs12 sm4>
                       <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">
                     <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>
                         <v-flex xs6>
                           <v-btn round dark @click.native="close">Cancel</v-btn>
                         </v-flex>
                         <v-flex xs6>
                           <v-btn @click="save" round dark :loading="loading" class="right">Save</v-btn>
                         </v-flex>
                       </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="dialog1" max-width="1100px" scrollable>
           <v-card>
             <v-toolbar color="grey lighten-2" flat>
               <v-spacer></v-spacer>
               <v-toolbar-title>Student Profile</v-toolbar-title>
               <v-spacer></v-spacer>
               <v-icon @click="close1">close</v-icon>
             </v-toolbar>
             <v-card-text style="height: 700px;">
               <v-flex align-center justify-center layout text-xs-center class="mt-3">
                 <v-avatar size="160px">
                   <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 sm6>
                     <v-layout>
                       <v-flex xs6 sm5>
                         <h5 class="right my-1">
                           <b>Full Name:</b>
                         </h5>
                       </v-flex>
                       <v-flex sm7 xs6>
                         <h5 class="my-1 left">{{ editedItem.name }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                   <v-flex xs12 sm6>
                     <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 sm6>
                     <v-layout>
                       <v-flex xs6 sm5>
                         <b>
                           <h5 class="right my-1">
                             <b>Gender:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm7 xs6>
                         <h5 class="my-1 left">{{ editedItem.gender }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                   <v-flex xs12 sm6>
                     <v-layout>
                       <v-flex xs6 sm4>
                         <b>
                           <h5 class="right my-1">
                             <b>D.O.B:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm7 xs6>
                         <h5 class="my-1">{{ dates(editedItem.dob) }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                 </v-layout>
                 <v-layout wrap>
                   <v-flex xs12 sm6>
                     <v-layout>
                       <v-flex xs6 sm5>
                         <b>
                           <h5 class="right my-1">
                             <b>Blood Group:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm7 xs6>
                         <h5 class="my-1 left">{{ editedItem.bloodGroup }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
-                  <v-flex xs12 sm6>
+                  <!-- <v-flex xs12 sm6>
                     <v-layout>
                       <v-flex xs6 sm4>
                         <b>
                           <h5 class="right my-1">
                             <b>Allergies:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm8 xs6>
                         <h5 class="my-1">{{ editedItem.allergies }}</h5>
                       </v-flex>
                     </v-layout>
+                  </v-flex>-->
+                   <v-flex xs12 sm6>
+                    <v-layout>
+                      <v-flex xs6 sm4>
+                        <b>
+                          <h5 class="right my-1">
+                            <b>Roll No. :</b>
+                          </h5>
+                        </b>
+                      </v-flex>
+                      <v-flex sm6 xs6>
+                        <h5 class="my-1">{{ editedItem.rollNo }}</h5>
+                      </v-flex>
+                    </v-layout>
                   </v-flex>
                 </v-layout>
                 <v-layout wrap>
                   <v-flex xs12 sm6>
                     <v-layout>
                       <v-flex xs6 sm5>
                         <b>
                           <h5 class="right my-1">
                             <b>Height:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm7 xs6>
                         <h5 class="my-1 left">{{ editedItem.height }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                   <v-flex xs12 sm6>
                     <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 sm6>
                     <v-layout>
                       <v-flex xs6 sm5>
                         <b>
                           <h5 class="right my-1">
                             <b>City:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm7 xs6>
                         <h5 class="my-1 left">{{ editedItem.city }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                   <v-flex xs12 sm6>
                     <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 sm6>
                     <v-layout>
                       <v-flex xs6 sm5>
                         <b>
                           <h5 class="right my-1">
                             <b>Pincode:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm7 xs6>
                         <h5 class="my-1">{{ editedItem.pincode }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                   <v-flex xs12 sm5>
                     <v-layout>
                       <v-flex xs6 sm5>
                         <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 sm6>
                     <v-layout>
                       <v-flex sm5 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 sm6>
                     <v-layout>
                       <v-flex xs6 sm4>
                         <b>
                           <h5 class="right my-1">
-                            <b>Fahter Name:</b>
+                            <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>Mother Name:</b>
+                            <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 sm6>
                     <v-layout>
                       <v-flex xs6 sm6>
                         <b>
                           <h5 class="right my-1">
-                            <b>Father Cell No:</b>
+                            <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>Mother Cell No:</b>
+                            <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 sm6>
                     <v-layout>
                       <v-flex xs6 sm6>
                         <b>
                           <h5 class="my-1 right">
-                            <b>Academic Year:</b>
+                            <b>AcademicYear:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm5 xs6>
                         <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>Medical Notes:</b>
+                            <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 sm6>
+                  <v-flex xs12 sm5 class="hidden-xs-only">
-                    <v-layout>
-                      <v-flex xs6 sm6>
-                        <b>
-                          <h5 class="right my-1">
-                            <b>Roll No. :</b>
-                          </h5>
-                        </b>
-                      </v-flex>
-                      <v-flex sm6 xs6>
-                        <h5 class="my-1">{{ editedItem.rollNo }}</h5>
-                      </v-flex>
-                    </v-layout>
-                  </v-flex>
-                </v-layout>
-                <v-layout wrap class="hidden-xs-only">
-                  <v-flex xs12 sm5>
                     <v-layout wrap>
                       <v-flex sm6>
                         <b>
                           <h5 class="my-1 right">
                             <b>present Address:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm5>
                         <h5 class="my-1">{{ editedItem.presentAddress }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
-                  <v-flex sm6>
+                  <v-flex sm6 class="hidden-xs-only">
                     <v-layout wrap>
                       <v-flex sm6>
                         <b>
                           <h5 class="my-1 right">
                             <b>Permanent Address:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm6>
                         <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 xs8 sm6>
+                      <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 xs9 sm6>
+                      <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>
         <v-snackbar
           :timeout="timeout"
           :top="y === 'top'"
           :right="x === 'right'"
           :vertical="mode === 'vertical'"
           v-model="snackbar"
           color="success"
         >{{ text }}</v-snackbar>
         <!-- ****** EXISTING-USERS STUDENTS TABLE ****** -->
         <v-card flat>
           <v-card-actions class="hidden-xs-only hidden-sm-only">
             <v-layout>
               <label class="right mt-4 ml-5">Select Class:</label>
               <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-4"
                 required
               ></v-select>
               <label class="right mt-4">Select Section:</label>
               <v-select
                 :items="addSection"
                 label="Select Section"
                 v-model="selectStudents.selectSection"
                 item-text="name"
                 item-value="_id"
                 name="Select Section"
                 :rules="sectionRules"
                 class="pl-3"
                 required
               ></v-select>
             </v-layout>
             <v-spacer></v-spacer>
             <v-btn @click="findStudents()" round dark :loading="loading" class="left">Find</v-btn>
           </v-card-actions>
           <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"
                   required
                 ></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">Find</v-btn>
               </v-flex>
             </v-layout>
           </v-flex>
         </v-card>
         <v-data-table
           :headers="headers"
           :items="desserts"
           :pagination.sync="pagination"
           :search="search"
         >
           <template slot="items" slot-scope="props">
             <td id="td" class="text-xs-center">{{ props.item.rollNo}}</td>
             <td id="td" class="text-xs-center">
               <v-avatar>
                 <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 id="td" class="text-xs-center">{{ props.item.name}}</td>
             <td id="td" class="text-xs-center">{{ props.item.email }}</td>
             <td id="td" class="text-xs-center">{{ dates(props.item.dob) }}</td>
             <td id="td" class="text-xs-center">{{ props.item.gender }}</td>
             <td id="td" class="text-xs-center">{{ props.item.parentId.fatherName }}</td>
             <td id="td" class="text-xs-center">{{ props.item.parentId.motherName }}</td>
             <td id="td" class="text-xs-center">{{ props.item.establishmentYear }}</td>
             <td id="td" class="text-xs-center">{{ props.item.mobile}}</td>
             <td class="text-xs-center">
               <span>
                 <v-tooltip top>
                   <img
                     slot="activator"
                     style="cursor:pointer; width:25px; height:18px; "
                     class="mr5"
                     @click="profile(props.item)"
                     src="/static/icon/eye1.png"
                   />
                   <span>View</span>
                 </v-tooltip>
                 <v-tooltip top>
                   <img
                     slot="activator"
                     style="cursor:pointer; width:20px; height:18px; "
                     class="mr5"
                     @click="editItem(props.item)"
                     src="/static/icon/edit1.png"
                   />
                   <span>Edit</span>
                 </v-tooltip>
                 <v-tooltip top>
                   <img
                     slot="activator"
                     style="cursor:pointer; width:20px; height:20px; "
                     class="mr5"
                     @click="deleteItem(props.item)"
                     src="/static/icon/delete1.png"
                   />
                   <span>Delete</span>
                 </v-tooltip>
               </span>
             </td>
           </template>
           <v-alert
             slot="no-results"
             :value="true"
             color="error"
             icon="warning"
           >Your search for "{{ search }}" found no results.</v-alert>
         </v-data-table>
       </v-tab-item>
       <!-- ****** ADD STUDENTS DETAILS****** -->
       <v-tab-item>
         <v-container fluid>
           <v-layout align-center justify-center fill-height>
             <v-flex xs12 sm12 md10 lg11>
               <div>
                 <v-app>
                   <v-stepper v-model="e2">
                     <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-snackbar
                             :timeout="timeout"
                             :top="y === 'top'"
                             :right="x === 'right'"
                             :vertical="mode === 'vertical'"
                             v-model="snackbar"
                             color="success"
                           >{{ text }}</v-snackbar>
                           <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"
                                         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"
                                         name="state"
                                         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"
                                         name="state"
                                         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-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"
                                   >Add</v-btn>
                                   <v-btn v-show="showNext" @click="e2 = 2" round dark>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"
                                 >Add</v-btn>
                                 <v-btn v-show="showNext" @click="e2 = 2" round dark>Next</v-btn>
                               </v-flex>
                             </v-form>
                           </v-flex>
                           <v-flex xs12 sm12 class="hidden-xs-only hidden-sm-only">
                             <v-form ref="parentForm" 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"
                                         v-on:keyup="getParentDetails()"
                                         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">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"
                                         name="state"
                                         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"
                                         name="state"
                                         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-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"
                                   >Add</v-btn>
                                   <v-btn v-show="showNext" @click="e2 = 2" round dark>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"
                                 >Add</v-btn>
                                 <v-btn v-show="showNext" @click="e2 = 2" round dark>Next</v-btn>
                               </v-flex>
                             </v-form>
                           </v-flex>
                         </v-container>
                       </v-stepper-content>
                       <v-stepper-content step="2">
                         <v-snackbar
                           :timeout="timeout"
                           :top="y === 'top'"
                           :right="x === 'right'"
                           :vertical="mode === 'vertical'"
                           v-model="snackbar"
                           color="success"
                         >{{ text }}</v-snackbar>
                         <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 ID:</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"
                                       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"
                                     >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">Allergies:</label>
                                   </v-flex>
                                   <v-flex xs8 class="ml-3">
                                     <v-text-field
                                       v-model="addStudents.allergies"
                                       placeholder="Fill your Allergies"
                                       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">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"
                                       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 pr-4">Present Address:</label>
                                   </v-flex>
                                   <v-flex xs8 sm8 class="ml-3">
                                     <v-text-field
                                       name="input-4-3"
                                       v-model="addStudents.presentAddress"
                                       :rules="presentAddress"
                                       placeholder="fill Your present Address"
                                       required
                                     ></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-text-field
                                       name="input-4-3"
                                       v-model="addStudents.permanentAddress"
                                       :rules="permanentAddress"
                                       placeholder="fill Your Permanent Address"
                                       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 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 addr:</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 sm11 offset-sm1>
                                 <v-layout>
                                   <v-flex xs6>
                                     <v-btn round dark @click="e2 = 1">Back</v-btn>
                                   </v-flex>
                                   <v-flex xs6>
                                     <v-btn
                                       @click="submit"
                                       round
                                       dark
                                       :loading="loading"
                                       class="right"
                                     >Add</v-btn>
                                   </v-flex>
                                 </v-layout>
                               </v-flex>
                             </v-layout>
                           </v-form>
                         </v-flex>
                       </v-stepper-content>
                     </v-stepper-items>
                   </v-stepper>
                 </v-app>
               </div>
             </v-flex>
           </v-layout>
         </v-container>
       </v-tab-item>
     </v-tabs>
     <div class="loader" v-if="showLoader">
       <v-progress-circular indeterminate color="white"></v-progress-circular>
     </div>
   </div>
 </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: () => ({
     e2: 0,
     showParent: true,
     showNext: false,
     snackbar: false,
     y: "top",
     x: "right",
     mode: "",
     timeout: 3000,
     text: "",
     showLoader: false,
     loading: false,
     date: null,
     search: "",
     menu: false,
     menu1: false,
     dialog: false,
     dialog1: false,
     valid: true,
     isActive: true,
     newActive: false,
     addclass: [],
     addSection: [],
     gender: ["Male", "Female"],
     pagination: {
       rowsPerPage: 15
     },
     imageData: {},
     imageName: "",
     imageUrl: "",
     imageFile: "",
     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"],
     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"],
     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: "Email", value: "email", sortable: false, align: "center" },
       { text: "Dob", value: "dob", 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: "Action", value: "", sortable: false, align: "center" }
     ],
     desserts: [],
     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()
     }
   }),
   watch: {
     menu(val) {
       val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
     },
     menu1(val) {
       val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
     }
   },
   methods: {
     findStudents() {
       this.showLoader = true;
       http()
         .get("/getStudentWithClass", {
           params: {
             classId: this.selectStudents.select,
             sectionId: this.selectStudents.selectSection
           }
         })
         .then(response => {
           this.desserts = 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;
           // console.log("err====>", err);
           // this.$router.replace({ path: '/' });
         });
     },
     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;
           // console.log("getSectionsList=====>", this.addSection);
         })
         .catch(err => {
           this.showLoader = false;
           // console.log("err====>", err);
           // this.$router.replace({ path: '/' });
         });
     },
     pickFile() {
       this.$refs.image.click();
     },
     dates: function(date) {
       return moment(date).format("MMMM DD, YYYY");
     },
     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 = "";
       }
     },
     // getStudentList() {
     //   this.showLoader = true;
     //   var token = this.$store.state.token;
     //   http()
     //     .get("/getStudentsList", {
     //       headers: { Authorization: "Bearer " + token }
     //     })
     //     .then(response => {
     //       this.desserts = response.data.data;
     //       this.showLoader = false;
     //       // console.log("getStudentList=====>",this.desserts)
     //     })
     //     .catch(err => {
     //       // console.log("err====>", err);
     //       this.showLoader = false;
     //       this.$router.replace({ path: "/" });
     //     });
     // },
     editItem(item) {
       this.editedIndex = this.desserts.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.dialog = true;
     },
     profile(item) {
       // console.log("item", item);
       this.editedIndex = this.desserts.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.dialog1 = true;
     },
     deleteItem(item) {
       let deleteStudent = {
         studentId: item._id
       };
       http()
         .delete(
           "/deleteStudent",
           confirm("Are you sure you want to delete this?") && {
             params: deleteStudent
           }
         )
         .then(response => {
           // console.log("deleteUers",deleteStudent)
           this.snackbar = true;
           this.text = "Successfully delete Existing Student";
           this.getStudentList();
         })
         .catch(error => {
           // console.log(error);
         });
     },
     activeTab(type) {
       switch (type) {
         case "existing":
           this.newActive = false;
           this.isActive = true;
           break;
         default:
           this.newActive = true;
           this.isActive = false;
           break;
       }
     },
     close() {
       this.dialog = false;
       setTimeout(() => {
         this.editedItem = Object.assign({}, this.defaultItem);
         this.editedIndex = -1;
       }, 300);
     },
     close1() {
       this.dialog1 = false;
     },
     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,
-          allergies: this.addStudents.allergies,
           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 => {
             // console.log(addStudent);
             this.snackbar = true;
             this.text = "New Student added successfully";
             // this.getStudentList();
             this.clear();
             this.loading = false;
           })
           .catch(error => {
             // console.log(error);
             this.snackbar = true;
             this.text = error.response.data.message;
             this.loading = false;
           });
       }
     },
     clear() {
       this.$refs.form.reset();
       this.imageUrl = "";
     },
     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,
-        allergies: this.editedItem.allergies,
         medicalNotes: this.editedItem.medicalNotes,
         height: this.editedItem.height,
         weight: this.editedItem.weight,
         rollNo: this.editedItem.rollNo
       };
       if (this.imageUrl) {
         var str = this.imageUrl;
         const [baseUrl, imageUrl] = str.split(/,/);
         editStudent.upload = imageUrl;
       }
       http()
         .put("/updateStudent", editStudent)
         .then(response => {
           this.snackbar = true;
           this.text = response.data.message;
           this.imageUrl = "";
           this.findStudents();
           this.close();
         })
         .catch(error => {
           // console.log(error);
           this.snackbar = true;
           this.text = error.response.data.statusText;
         });
     },
     submitParentDetails() {
       if (this.$refs.parentForm.validate()) {
         let addparentDetails = {
           email: this.parentData.email,
           fatherName: this.parentData.fatherName,
           fatherCellNo: this.parentData.fatherCellNo,
           motherName: this.parentData.motherName,
           motherCellNo: this.parentData.motherCellNo,
           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 = "successfully";
             // this.getStudentList();
             this.clear();
             this.loading = false;
           })
           .catch(error => {
             this.snackbar = true;
             this.text = error.response.data.message;
             this.text = error.response.data.statusText;
             this.loading = false;
           });
       }
     },
     getParentDetails() {
       if (this.parentData.fatherCellNo.length > 9) {
         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;
           })
           .catch(error => {
             console.log("err====>", error.response.data.message);
           });
       }
     }
   },
   mounted() {
     const getCountryList = countryList();
     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);
         }
       });
   },
   created() {
     this.$root.$on("app:search", search => {
       this.search = search;

src/pages/Subjects/subjects.vue

Diff comments View file @0721aca

 <template>
   <v-app id="pages-dasboard">
     <v-tabs grow slider-color="gray">
       <v-tab
         ripple
         @click="activeTab('existing')"
         v-bind:class="{ active: isActive }"
         id="tab"
         class="subheading"
       >Existing Subjects</v-tab>
       <v-tab
         ripple
         @click="activeTab('new')"
         v-bind:class="{ active: newActive }"
         id="tab1"
         User
         class="subheading"
       >Add New Subject</v-tab>
       <!-- ****** EDIT  Subject ****** -->
       <v-tab-item>
         <v-snackbar
           :timeout="timeout"
           :top="y === 'top'"
           :right="x === 'right'"
           :vertical="mode === 'vertical'"
           v-model="snackbar"
           color="success"
         >{{ text }}</v-snackbar>
         <v-dialog v-model="dialog" max-width="600px">
           <v-flex xs12 sm12 class>
             <v-toolbar color="v-toolbar">
               <v-spacer></v-spacer>
               <v-toolbar-title>
                 <h3>Edit Subject</h3>
               </v-toolbar-title>
               <v-spacer></v-spacer>
             </v-toolbar>
             <v-card flat>
               <v-container fluid>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right">Class:</label>
                   </v-flex>
                   <v-flex xs6 class="ml-3">
                     <v-select
                       :items="classList"
                       label="Select Class"
                       v-model="addSubject.selectName"
                       item-text="classNum"
                       item-value="_id"
                       name="Select Class"
                       :rules="nameRules"
                       required
                     ></v-select>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right">Subject:</label>
                   </v-flex>
                   <v-flex xs6 class="ml-3">
                     <v-text-field
                       placeholder="fill your Subject"
                       v-model="editedItem.subjectName"
                       type="text"
                       name="email"
                       required
                     ></v-text-field>
                   </v-flex>
                 </v-layout>
                 <v-flex xs12 sm9 offset-sm2>
                   <v-card-actions>
                     <v-btn round dark @click.native="close">Cancel</v-btn>
                     <v-spacer></v-spacer>
                     <v-btn round dark @click="save">Save</v-btn>
                   </v-card-actions>
                 </v-flex>
               </v-container>
             </v-card>
           </v-flex>
         </v-dialog>
         <!-- ****** VIEW PROFIL NOTICE BOARD ******  -->
         <v-dialog v-model="dialog1" max-width="600px">
           <v-toolbar color="v-toolbar">
             <v-spacer></v-spacer>
             <v-toolbar-title>
               <h3>Subject</h3>
             </v-toolbar-title>
             <v-spacer></v-spacer>
             <v-icon @click="close1">close</v-icon>
           </v-toolbar>
           <v-card>
             <v-card-text>
               <v-container grid-list-md>
                 <v-layout wrap>
                   <v-flex>
                     <v-layout>
                       <v-flex xs7 sm6>
                         <h5 class="right my-1">
                           <b>Subject Name:</b>
                         </h5>
                       </v-flex>
                       <v-flex sm6 xs5>
                         <h5 class="my-1">{{ editedItem.subjectName }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                 </v-layout>
               </v-container>
             </v-card-text>
           </v-card>
         </v-dialog>
         <v-snackbar
           :timeout="timeout"
           :top="y === 'top'"
           :right="x === 'right'"
           :vertical="mode === 'vertical'"
           v-model="snackbar"
           color="success"
         >{{ text }}</v-snackbar>
         <!-- ****** EXISTING SUBJECTS TABLE ****** -->
         <v-card flat>
           <v-card-actions>
             <v-layout>
               <v-flex xs4 sm2 lg1>
                 <label class="right mt-4">Select Class:</label>
               </v-flex>
               <v-flex xs8 sm4 lg3>
                 <v-select
                   :items="classList"
                   label="Select Class"
-                  v-model="addSubject.selectName"
+                  v-model="selectClassId"
                   item-text="classNum"
                   item-value="_id"
                   name="Select Class"
                   :rules="nameRules"
-                  @change="getClassSubject(addSubject.selectName)"
+                  @change="getClassSubject"
                   class="px-4"
                   required
                 ></v-select>
               </v-flex>
             </v-layout>
           </v-card-actions>
         </v-card>
         <v-data-table
           :headers="headers"
           :items="subjectList.subjects"
           :pagination.sync="pagination"
           :search="search"
         >
           <template slot="items" slot-scope="props">
             <td id="td" class="text-xs-center">{{ props.index + 1}}</td>
             <td id="td" class="text-xs-center">{{ props.item.subjectName}}</td>
             <td class="text-xs-center">
               <span>
                 <v-tooltip top>
                   <img
                     slot="activator"
                     style="cursor:pointer; width:25px; height:18px; "
                     class="mr5"
                     @click="profile(props.item)"
                     src="/static/icon/eye1.png"
                   />
                   <span>View</span>
                 </v-tooltip>
                 <v-tooltip top>
                   <img
                     slot="activator"
                     style="cursor:pointer; width:20px; height:18px; "
                     class="mr5"
                     @click="editItem(props.item)"
                     src="/static/icon/edit1.png"
                   />
                   <span>Edit</span>
                 </v-tooltip>
                 <v-tooltip top>
                   <img
                     slot="activator"
                     style="cursor:pointer; width:20px; height:20px; "
                     class="mr5"
                     @click="deleteItem(props.item)"
                     src="/static/icon/delete1.png"
                   />
                   <span>Delete</span>
                 </v-tooltip>
               </span>
             </td>
           </template>
           <v-alert
             slot="no-results"
             :value="true"
             color="error"
             icon="warning"
           >Your search for "{{ search }}" found no results.</v-alert>
         </v-data-table>
       </v-tab-item>
       <!-- ****** ADD MULTIPLE Subject ****** -->
       <v-tab-item>
         <v-container>
           <v-snackbar
             :timeout="timeout"
             :top="y === 'top'"
             :right="x === 'right'"
             :vertical="mode === 'vertical'"
             v-model="snackbar"
-            color="success"
+            :color="color"
           >{{ text }}</v-snackbar>
           <v-flex xs12 sm8 offset-sm2 class="top">
             <v-card flat>
               <v-container fluid fill-height>
                 <v-layout align-center>
                   <v-flex xs12>
                     <v-form ref="form" v-model="valid" lazy-validation>
                       <v-layout>
                         <v-flex xs4 sm4 class="pt-4 subheading">
                           <label class="right">Class:</label>
                         </v-flex>
                         <v-flex xs8 sm6 class="ml-3">
                           <v-select
                             v-model="addSubject.classId"
                             label="Select your class"
                             type="text"
                             :items="classList"
                             item-text="classNum"
                             item-value="_id"
                             :rules="nameRules"
                             required
                           ></v-select>
                         </v-flex>
                       </v-layout>
                       <v-layout>
                         <v-flex xs4 sm4 class="pt-4 subheading">
                           <label class="right">Subject:</label>
                         </v-flex>
                         <v-flex xs8 sm6 class="ml-3">
                           <v-text-field
                             v-model="addSubject.subjectName"
                             placeholder="fill your Subject Name"
                             name="name"
                             type="text"
                             :rules="subjectRules"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                       <v-layout>
                         <v-flex xs12 sm9 offset-sm2>
                           <v-card-actions>
                             <v-btn @click="clear" round dark>clear</v-btn>
                             <v-spacer></v-spacer>
                             <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
                           </v-card-actions>
                         </v-flex>
                       </v-layout>
                     </v-form>
                   </v-flex>
                 </v-layout>
               </v-container>
             </v-card>
           </v-flex>
         </v-container>
       </v-tab-item>
     </v-tabs>
     <div class="loader" v-if="showLoader">
       <v-progress-circular indeterminate color="white"></v-progress-circular>
     </div>
   </v-app>
 </template>
 <script>
 import http from "@/Services/http.js";
 import Util from "@/util";
 export default {
   data: () => ({
     snackbar: false,
     y: "top",
     x: "right",
     mode: "",
     timeout: 3000,
     text: "",
+    color: "",
     showLoader: false,
     loading: false,
     date: null,
     search: "",
     dialog: false,
     dialog1: false,
     valid: true,
     isActive: true,
     newActive: false,
     gender: ["Male", "Female"],
     pagination: {
       rowsPerPage: 19
     },
     token: "",
     nameRules: [v => !!v || " Class Name is required"],
     subjectRules: [v => !!v || " Subject Name is required"],
     headers: [
       {
         text: "No",
         align: "center",
         sortable: false,
         value: "No"
       },
       {
         text: "Subject Name",
         value: "subjectName",
         sortable: false,
         align: "center"
       },
       { text: "Action", value: "", sortable: false, align: "center" }
     ],
     subjectList: [],
     classList: [],
     editedIndex: -1,
     addSubject: {},
     selectClassId: "",
+    selectClassId: "",
     editedItem: {
       subjectName: ""
     }
   }),
   methods: {
     pickFile() {
       this.$refs.image.click();
     },
     editItem(item) {
       this.editedItem = Object.assign({}, item);
-      console.log("this.editedItem._id", this.editedItem._id);
       this.dialog = true;
     },
     profile(item) {
       this.editedItem = Object.assign({}, item);
       this.dialog1 = true;
     },
     deleteItem(item) {
       let deleteSubject = {
-        classId: this.addSubject.selectName,
+        classId: this.selectClassId,
         subjectId: item._id
       };
       http()
         .delete(
           "/deleteSubject",
           confirm("Are you sure you want to delete this?") && {
             params: deleteSubject
           }
         )
         .then(response => {
-          if ((this.snackbar = true)) {
+          this.getClassSubject();
-            this.text = "Successfully delete Existing Subject";
+          this.snackbar = true;
-          }
+          this.text = "Successfully delete Existing Subject";
-          this.getEventList();
         })
         .catch(error => {
           // console.log(error);
         });
     },
     activeTab(type) {
       switch (type) {
         case "existing":
           this.newActive = false;
           this.isActive = true;
           break;
         default:
           this.newActive = true;
           this.isActive = false;
           break;
       }
     },
     close() {
       this.dialog = false;
       setTimeout(() => {
         this.editedItem = Object.assign({}, this.defaultItem);
         this.editedIndex = -1;
       }, 300);
     },
     close1() {
       this.dialog1 = false;
     },
     submit() {
       if (this.$refs.form.validate()) {
         http()
           .post("/addSubject", this.addSubject)
           .then(response => {
-            if ((this.snackbar = true)) {
+            this.getClassSubject();
-              this.text = "New Subject added successfully";
+            this.snackbar = true;
-            }
+            this.text = "New Subject added successfully";
             this.clear();
+            this.color = "green";
           })
           .catch(error => {
             // console.log(error);
-            if ((this.snackbar = true)) {
+            this.snackbar = true;
-              this.text = error.response.data.message;
+            this.text = error.response.data.message;
-            }
+            this.color = "error";
           });
       }
     },
     clear() {
       this.$refs.form.reset();
     },
     save() {
       let editSubject = {
         classId: this.addSubject.selectName,
         subjectId: this.editedItem._id,
         subjectName: this.editedItem.subjectName
       };
       http()
         .put("/updateSubject", editSubject)
         .then(response => {
           // console.log("editEvent",editEvent);
           if ((this.snackbar = true)) {
             this.text = "Successfully Edit Existing Subject";
           }
           //   this.getClassSubject();
           http()
             .get(
               "/getParticularClass",
               { params: { classId: this.selectClassId } },
               {
                 headers: { Authorization: "Bearer " + this.token }
               }
             )
             .then(response => {
               this.subjectList = response.data.data;
             })
             .catch(err => {
               console.log("err====>", err);
             });
         })
         .catch(error => {
           // console.log(error);
         });
       this.close();
     },
-    getClassSubject(id) {
+    getClassSubject() {
-      this.selectClassId = id;
+      this.selectClassId = this.selectClassId;
       http()
         .get(
           "/getParticularClass",
           { params: { classId: this.selectClassId } },
           {
             headers: { Authorization: "Bearer " + this.token }
           }
         )
         .then(response => {
           this.subjectList = response.data.data;
         })
         .catch(err => {
           console.log("err====>", err);
         });
     },
     getClass() {
       http()
         .get("/getClassesList", {
           headers: { Authorization: "Bearer " + this.token }
         })
         .then(response => {
           this.classList = response.data.data;
         })
         .catch(error => {
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
           }
         });
     }
   },
   mounted() {
     this.token = this.$store.state.token;
     // this.getNoticeDataList();
     this.getClass();
   },
   created() {
     this.$root.$on("app:search", search => {
       this.search = search;
     });
   },
   beforeDestroy() {
     // dont forget to remove the listener
     this.$root.$off("app:search");
   }
 };
 </script>
 <style scoped>
 .active {
   background-color: gray;
   color: white !important;
 }
 .activebtn {
   color: black !important;