viithiisys / School-Management-dashboard

Commit b0f5f6684c54d1e33b9ac01ac5228c77470c3f1a

Authored by Shikha Mishra 2020-07-30 08:48:24 -0400

Exists in master and in 2 other branches

Conditionally show drop-down menu in meeting event page, Solved responsive issue…

… on dashboard, Resolved multi selecter issue,Build the inner logic to enroll or withdraw and Refactor exixting code in enroll student page

Showing 3 changed files with 86 additions and 46 deletions Show diff stats

src/pages/Course/enrollStudents.vue

Diff comments View file @b0f5f66

1	<template>	1	<template>
2	<v-container fluid class="body-color">	2	<v-container fluid class="body-color">
3	<!-- **** STUDENTS TABLE **** -->	3	<!-- **** STUDENTS TABLE **** -->
4	<v-toolbar color="transparent" flat>	4	<v-toolbar color="transparent" flat>
5	<v-spacer></v-spacer>	5	<v-spacer></v-spacer>
6	<v-flex xs12 sm4 md2>	6	<v-flex xs12 sm4 md2>
7	<v-select	7	<v-select
8	small	8	small
9	:items="addclass"	9	:items="addclass"
10	label="Select Class"	10	label="Select Class"
11	v-model="getReport.classId"	11	v-model="getReport.classId"
12	item-text="classNum"	12	item-text="classNum"
13	item-value="_id"	13	item-value="_id"
14	name="Select Class"	14	name="Select Class"
15	@change="getCourses(getReport.classId)"	15	@change="getCourses(getReport.classId)"
16	class="mr-2"	16	class="mr-2"
17	required	17	required
18	></v-select>	18	></v-select>
19	</v-flex>	19	</v-flex>
20	<v-flex xs12 sm4 md2>	20	<v-flex xs12 sm4 md2>
21	<v-select	21	<v-select
22	:items="courseData"	22	:items="courseData"
23	label="Select Course"	23	label="Select Course"
24	v-model="getReport.courseId"	24	v-model="getReport.courseId"
25	item-text="courseName"	25	item-text="courseName"
26	item-value="_id"	26	item-value="_id"
27	required	27	required
28	class="ml-2"	28	class="ml-2"
29	@change="getStudentTable(getReport.courseId)"	29	@change="getStudentTable(getReport.courseId)"
30	></v-select>	30	></v-select>
31	</v-flex>	31	</v-flex>
32	<v-card-title class="body-1" v-show="show">	32	<v-card-title class="body-1" v-show="show">
33	<v-btn icon large flat @click="displaySearch">	33	<v-btn icon large flat @click="displaySearch">
34	<v-avatar size="27">	34	<v-avatar size="27">
35	<img src="/static/icon/search.png" alt="icon" />	35	<img src="/static/icon/search.png" alt="icon" />
36	</v-avatar>	36	</v-avatar>
37	</v-btn>	37	</v-btn>
38	</v-card-title>	38	</v-card-title>
39	<v-flex xs8 sm8 md3 lg2 v-show="showSearch">	39	<v-flex xs8 sm8 md3 lg2 v-show="showSearch">
40	<v-layout>	40	<v-layout>
41	<v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>	41	<v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>
42	<v-icon @click="closeSearch" color="error">close</v-icon>	42	<v-icon @click="closeSearch" color="error">close</v-icon>
43	</v-layout>	43	</v-layout>
44	</v-flex>	44	</v-flex>
45	</v-toolbar>	45	</v-toolbar>
46	<v-data-table	46	<v-data-table
47	:headers="headers"	47	:headers="headers"
48	:items="studentsData"	48	:items="studentsData"
49	:pagination.sync="pagination"	49	:pagination.sync="pagination"
50	:search="search"	50	:search="search"
51	select-all	51	select-all
52	v-model="selected"	52	v-model="selected"
53	item-key="name"	53	item-key="_id"
54	>	54	>
55	<template slot="items" slot-scope="props">	55	<template slot="items" slot-scope="props">
56	<tr class="tr" :active="props.selected" @click="props.selected = !props.selected">	56	<tr class="tr" :active="props.selected" @click="props.selected = !props.selected">
57	<td class="text-xs-center td td-row">	57	<td class="text-xs-center td td-row">
58	<v-checkbox	58	<v-checkbox
59	v-model="props.item.enroll"	59	v-model="props.item.enroll"
60	@change="selectParticularStudent(props.item)"	60	@change="selectParticularStudent(props.item)"
61	primary	61	primary
62	hide-details	62	hide-details
63	></v-checkbox>	63	></v-checkbox>
64	</td>	64	</td>
65	<td class="text-xs-center td td-row">	65	<td class="text-xs-center td td-row">
66	<v-avatar size="40">	66	<v-avatar size="40">
67	<img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />	67	<img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
68	<img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />	68	<img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
69	</v-avatar>	69	</v-avatar>
70	</td>	70	</td>
71	<td class="text-xs-center td td-row">{{ props.item.name}}</td>	71	<td class="text-xs-center td td-row">{{ props.item.name}}</td>
72	<td class="text-xs-center td td-row">{{ props.item.fatherCellNo}}</td>	72	<td class="text-xs-center td td-row">{{ props.item.fatherCellNo}}</td>
73	<td class="text-xs-center td td-row">{{ props.item.email }}</td>	73	<td class="text-xs-center td td-row">{{ props.item.email }}</td>
74	</tr>	74	</tr>
75	</template>	75	</template>
76	<template slot="headers" slot-scope="props">	76	<template slot="headers" slot-scope="props">
77	<tr>	77	<tr>
78	<th>	78	<th>
79	<v-checkbox	79	<v-checkbox
80	:input-value="props.all"	80	:input-value="props.all"
81	:indeterminate="props.indeterminate"	81	:indeterminate="props.indeterminate"
82	primary	82	primary
83	hide-details	83	hide-details
84	@click.native="toggleAll"	84	@click.native="toggleAll"
85	></v-checkbox>	85	></v-checkbox>
86	</th>	86	</th>
87	<th	87	<th
88	v-for="header in props.headers"	88	v-for="header in props.headers"
89	:key="header.text"	89	:key="header.text"
90	:class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination.sortBy ? 'active' : '']"	90	:class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination.sortBy ? 'active' : '']"
91	@click="changeSort(header.value)"	91	@click="changeSort(header.value)"
92	>	92	>
93	<v-icon small>arrow_upward</v-icon>	93	<v-icon small>arrow_upward</v-icon>
94	{{ header.text }}	94	{{ header.text }}
95	</th>	95	</th>
96	</tr>	96	</tr>
97	</template>	97	</template>
98	<v-alert	98	<v-alert
99	slot="no-results"	99	slot="no-results"
100	:value="true"	100	:value="true"
101	color="error"	101	color="error"
102	icon="warning"	102	icon="warning"
103	>Your search for "{{ search }}" found no results.</v-alert>	103	>Your search for "{{ search }}" found no results.</v-alert>
104	</v-data-table>	104	</v-data-table>
105	<v-snackbar	105	<v-snackbar
106	:timeout="timeout"	106	:timeout="timeout"
107	:top="y === 'top'"	107	:top="y === 'top'"
108	:right="x === 'right'"	108	:right="x === 'right'"
109	:vertical="mode === 'vertical'"	109	:vertical="mode === 'vertical'"
110	v-model="snackbar"	110	v-model="snackbar"
111	color="success"	111	color="success"
112	>{{ text }}</v-snackbar>	112	>{{ text }}</v-snackbar>
113	<div class="loader" v-if="showLoader">	113	<div class="loader" v-if="showLoader">
114	<v-progress-circular indeterminate color="white"></v-progress-circular>	114	<v-progress-circular indeterminate color="white"></v-progress-circular>
115	</div>	115	</div>
116	</v-container>	116	</v-container>
117	</template>	117	</template>
118		118
119	<script>	119	<script>
120	import http from "@/Services/http.js";	120	import http from "@/Services/http.js";
121	import moment from "moment";	121	import moment from "moment";
122		122
123	export default {	123	export default {
124	data: () => ({	124	data: () => ({
125	snackbar: false,	125	snackbar: false,
126	y: "top",	126	y: "top",
127	x: "right",	127	x: "right",
128	mode: "",	128	mode: "",
129	timeout: 3000,	129	timeout: 3000,
130	text: "",	130	text: "",
131	show: true,	131	show: true,
132	showSearch: false,	132	showSearch: false,
133	showLoader: false,	133	showLoader: false,
134	loading: false,	134	loading: false,
135	date: null,	135	date: null,
136	search: "",	136	search: "",
137	addclass: [],	137	addclass: [],
138	pagination: {	138	pagination: {
139	rowsPerPage: 10	139	rowsPerPage: 10
140	},	140	},
141	headers: [	141	headers: [
142	{	142	{
143	text: "Profile Pic",	143	text: "Profile Pic",
144	value: "profilprofilePicUrlePicUrl",	144	value: "profilprofilePicUrlePicUrl",
145	sortable: false,	145	sortable: false,
146	align: "center"	146	align: "center"
147	},	147	},
148	{ text: "Name", value: "name", sortable: false, align: "center" },	148	{ text: "Name", value: "name", sortable: false, align: "center" },
149	{	149	{
150	text: "Mobile No",	150	text: "Mobile No",
151	value: "fatherCellNo",	151	value: "fatherCellNo",
152	sortable: false,	152	sortable: false,
153	align: "center"	153	align: "center"
154	},	154	},
155	{ text: "Email", value: "email", sortable: false, align: "center" }	155	{ text: "Email", value: "email", sortable: false, align: "center" }
156	// { text: "Action", value: "", sortable: false, align: "center" }	156	// { text: "Action", value: "", sortable: false, align: "center" }
157	],	157	],
158	token: "",	158	token: "",
159	selectStudents: {	159	selectStudents: {
160	select: "",	160	select: "",
161	selectSection: ""	161	selectSection: ""
162	},	162	},
163		163
164	role: "",	164	role: "",
165	schoolRole: "",	165	schoolRole: "",
166	menu: false,	166	menu: false,
167	valid: true,	167	valid: true,
168		168
169	getReport: {},	169	getReport: {},
170	studentsData: [],	170	studentsData: [],
171	courseData: [],	171	courseData: [],
172	addSection: [],	172	addSection: [],
173	selected: []	173	selected: []
174	}),	174	}),
175	methods: {	175	methods: {
176	save(date) {	176	save(date) {
177	this.$refs.menu.save(date);	177	this.$refs.menu.save(date);
178	},	178	},
179	getAllClass() {	179	getAllClass() {
180	http()	180	http()
181	.get("/getClassesList", {	181	.get("/getClassesList", {
182	headers: { Authorization: "Bearer " + this.token }	182	headers: { Authorization: "Bearer " + this.token }
183	})	183	})
184	.then(response => {	184	.then(response => {
185	this.addclass = response.data.data;	185	this.addclass = response.data.data;
186	})	186	})
187	.catch(error => {	187	.catch(error => {
188	// console.log("err====>", err);	188	// console.log("err====>", err);
189	// this.$router.replace({ path: "/" });	189	// this.$router.replace({ path: "/" });
190	});	190	});
191	},	191	},
192	getCourses(classId) {	192	getCourses(classId) {
193	this.showLoader = true;	193	this.showLoader = true;
194	http()	194	http()
195	.get("/getCourseesList", {	195	.get("/getCourseesList", {
196	params: {	196	params: {
197	classId: classId	197	classId: classId
198	}	198	}
199	})	199	})
200	.then(response => {	200	.then(response => {
201	this.courseData = response.data.data;	201	this.courseData = response.data.data;
202	this.showLoader = false;	202	this.showLoader = false;
203	})	203	})
204	.catch(err => {	204	.catch(err => {
205	console.log("err====>", err);	205	console.log("err====>", err);
206	this.showLoader = false;	206	this.showLoader = false;
207	});	207	});
208	},	208	},
209	getStudents() {	209	getStudents() {
210	this.showLoader = true;	210	this.showLoader = true;
211	http()	211	http()
212	.get("/getStudentsList", {	212	.get("/getStudentsList", {
213	params: {	213	params: {
214	classId: this.getReport.classId	214	classId: this.getReport.classId
215	}	215	}
216	})	216	})
217	.then(response => {	217	.then(response => {
218	this.studentsData = response.data.data;	218	this.studentsData = response.data.data;
219	this.showLoader = false;	219	this.showLoader = false;
220	// this.addStudentAttendenceDialog = false;	220	// this.addStudentAttendenceDialog = false;
221	var attendence = "";	221	var attendence = "";
222	for (let i = 0; i < this.studentsData.length; i++) {	222	for (let i = 0; i < this.studentsData.length; i++) {
223	this.studentsData[i].attendence = true;	223	this.studentsData[i].attendence = true;
224	}	224	}
225	this.getParticularCourse();	225	this.getParticularCourse();
226	})	226	})
227	.catch(error => {	227	.catch(error => {
228	console.log("err====>", error);	228	console.log("err====>", error);
229	this.showLoader = false;	229	this.showLoader = false;
230	});	230	});
231	},	231	},
232	getStudentTable(id) {	232	getStudentTable(id) {
233	// console.log("id", this.getReport.courseId);	233	// console.log("id", this.getReport.courseId);
234	this.getStudents();	234	this.getStudents();
235	},	235	},
236	update() {	236	update() {
237	var studentsAttendence = [];	237	var studentsAttendence = [];
238	for (var j = 0; j < this.studentsData.length; j++) {	238	for (var j = 0; j < this.studentsData.length; j++) {
239	studentsAttendence.push({	239	studentsAttendence.push({
240	studentId: this.studentsData[j]._id,	240	studentId: this.studentsData[j]._id,
241	isPresent: this.studentsData[j].attendence	241	isPresent: this.studentsData[j].attendence
242	});	242	});
243	}	243	}
244	if (this.$refs.form.validate()) {	244	if (this.$refs.form.validate()) {
245	let attendanceData = {	245	let attendanceData = {
246	sectionId: this.getReport.sectionId,	246	sectionId: this.getReport.sectionId,
247	date: this.date,	247	date: this.date,
248	students: studentsAttendence	248	students: studentsAttendence
249	};	249	};
250	http()	250	http()
251	.put("/updateAttendance", attendanceData)	251	.put("/updateAttendance", attendanceData)
252	.then(response => {	252	.then(response => {
253	this.snackbar = true;	253	this.snackbar = true;
254	this.text = response.data.message;	254	this.text = response.data.message;
255	this.addStudentAttendenceDialog = false;	255	this.addStudentAttendenceDialog = false;
256	})	256	})
257	.catch(error => {	257	.catch(error => {
258	this.snackbar = true;	258	this.snackbar = true;
259	this.text = error.response.data.message;	259	this.text = error.response.data.message;
260	});	260	});
261	}	261	}
262	},	262	},
263	toggleAll() {	263	toggleAll() {
264	if (this.selected.length) this.selected = [];	264	let withdraw = false;
265	else this.selected = this.studentsData.slice();	265	if (this.selected.length === this.studentsData.length) withdraw = true;
266	let selectedStudentsArray = [];	266
267	for (let i = 0; i < this.selected.length; i++) {	267	if (withdraw) {
268	selectedStudentsArray.push({ studentId: this.selected[i]._id });	268	var payload = {
		269	courseId: this.getReport.courseId,
		270	enrollStudents: []
		271	};
		272	http()
		273	.put("/enrollStudents", payload)
		274	.then(response => {
		275	this.snackbar = true;
		276	this.text = response.data.message;
		277	this.selected = [];
		278	for (let i = 0; i < this.studentsData.length; i++) {
		279	this.studentsData[i].enroll = false;
		280	}
		281	this.getParticularCourse();
		282	})
		283	.catch(error => {
		284	this.snackbar = true;
		285	this.text = error.response.data.message;
		286	});
		287	} else {
		288	let selectedStudentsArray = [];
		289	for (let item of this.studentsData) {
		290	if(item.enroll === false \|\| !item.enroll) {
		291	selectedStudentsArray.push({ studentId: item._id });
		292	}
		293	}
		294
		295	var payload = {
		296	courseId: this.getReport.courseId,
		297	enrollStudents: selectedStudentsArray
		298	};
		299	http()
		300	.put("/enrollStudents", payload)
		301	.then(response => {
		302	this.snackbar = true;
		303	this.text = response.data.message;
		304	for (let i = 0; i < this.studentsData.length; i++) {
		305	this.studentsData[i].enroll = true;
		306	}
		307	this.getParticularCourse();
		308	})
		309	.catch(error => {
		310	this.snackbar = true;
		311	this.text = error.response.data.message;
		312	});
269	}	313	}
270	// console.log("selectedStudentsArray", selectedStudentsArray);
271	var payload = {
272	courseId: this.getReport.courseId,
273	enrollStudents: selectedStudentsArray
274	};
275	http()
276	.put("/enrollStudents", payload)
277	.then(response => {
278	this.snackbar = true;
279	this.text = response.data.message;
280	this.getParticularCourse();
281	})
282	.catch(error => {
283	this.snackbar = true;
284	this.text = error.response.data.message;
285	});
286	},	314	},
		315
287	selectParticularStudent(selected) {	316	selectParticularStudent(selected) {
288	console.log("selected", selected);	317	console.log("selected", selected);
289	let selectedStudentsArray = [];	318	let selectedStudentsArray = [];
290	selectedStudentsArray.push({ studentId: selected._id });	319	selectedStudentsArray.push({ studentId: selected._id });
291	// console.log("selected.enroll", selected.enroll);	320
		321	let isExists = false;
		322	for(let item of this.selected) {
		323	if(item._id === selected._id) {
		324	isExists = true;
		325	break;
		326	}
		327	}
		328
292	if (selected.enroll === true) {	329	if (selected.enroll === true) {
		330	if (!isExists) this.selected.push(selected);
293	var payload = {	331	var payload = {
294	courseId: this.getReport.courseId,	332	courseId: this.getReport.courseId,
295	enrollStudents: selectedStudentsArray	333	enrollStudents: selectedStudentsArray
296	};	334	};
297	http()	335	http()
298	.put("/enrollStudents", payload)	336	.put("/enrollStudents", payload)
299	.then(response => {	337	.then(response => {
300	this.snackbar = true;	338	this.snackbar = true;
301	this.text = response.data.message;	339	this.text = response.data.message;
302	this.getParticularCourse();	340	this.getParticularCourse();
303	})	341	})
304	.catch(error => {	342	.catch(error => {
305	this.snackbar = true;	343	this.snackbar = true;
306	this.text = error.response.data.message;	344	this.text = error.response.data.message;
307	});	345	});
308	}	346	}
309	if (	347	if (
310	selected.enroll == false &&	348	selected.enroll == false &&
311	selected.enroll != undefined &&	349	selected.enroll != undefined &&
312	selected.enroll != null	350	selected.enroll != null
313	) {	351	) {
314	var payloadDeleteStudents = {	352	var payloadDeleteStudents = {
315	courseId: this.getReport.courseId,	353	courseId: this.getReport.courseId,
316	enrollStudentsId: selected.enrollId	354	enrollStudentsId: selected.enrollId
317	};	355	};
318	http()	356	http()
319	.put("/deleteStudents", payloadDeleteStudents)	357	.put("/deleteStudents", payloadDeleteStudents)
320	.then(response => {	358	.then(response => {
321	this.snackbar = true;	359	this.snackbar = true;
322	this.text = response.data.message;	360	this.text = response.data.message;
323	this.getParticularCourse();	361	this.getParticularCourse();
324	})	362	})
325	.catch(error => {	363	.catch(error => {
326	this.snackbar = true;	364	this.snackbar = true;
327	this.text = error.response.data.message;	365	this.text = error.response.data.message;
328	});	366	});
329	}	367	}
330	},	368	},
331	getParticularCourse() {	369	getParticularCourse() {
		370	this.selected = [];
332	var payload = {	371	var payload = {
333	courseId: this.getReport.courseId	372	courseId: this.getReport.courseId
334	};	373	};
335	http()	374	http()
336	.get("/getParticularCourse", {	375	.get("/getParticularCourse", {
337	params: payload	376	params: payload
338	})	377	})
339	.then(response => {	378	.then(response => {
340	for (let i = 0; i < response.data.data.enrollStudents.length; i++) {	379	for (let i = 0; i < response.data.data.enrollStudents.length; i++) {
341	var studentId = {};	380	var studentId = {};
342	studentId = response.data.data.enrollStudents[i];	381	studentId = response.data.data.enrollStudents[i];
343	for (let j = 0; j < this.studentsData.length; j++) {	382	for (let j = 0; j < this.studentsData.length; j++) {
344	if (studentId.studentId == this.studentsData[j]._id) {	383	if (studentId.studentId == this.studentsData[j]._id) {
345	// console.log("studentId._id", studentId._id);
346	this.studentsData[j].enroll = true;	384	this.studentsData[j].enroll = true;
347	this.studentsData[j].enrollId = studentId._id;	385	this.studentsData[j].enrollId = studentId._id;
		386	this.selected.push(this.studentsData[j]);
		387	break;
348	}	388	}
349	}	389	}
350	}	390	}
351	this.snackbar = true;	391	this.snackbar = true;
352	this.text = response.data.message;	392	this.text = response.data.message;
353	})	393	})
354	.catch(error => {	394	.catch(error => {
355	this.snackbar = true;	395	this.snackbar = true;
356	this.text = error.response.data.message;	396	this.text = error.response.data.message;
357	});	397	});
358	},	398	},
359	changeSort(column) {	399	changeSort(column) {
360	if (this.pagination.sortBy === column) {	400	if (this.pagination.sortBy === column) {
361	this.pagination.descending = !this.pagination.descending;	401	this.pagination.descending = !this.pagination.descending;
362	} else {	402	} else {
363	this.pagination.sortBy = column;	403	this.pagination.sortBy = column;
364	this.pagination.descending = false;	404	this.pagination.descending = false;
365	}	405	}
366	},	406	},
367	displaySearch() {	407	displaySearch() {

src/pages/Dashboard/dashboard.vue

Diff comments View file @b0f5f66

1	<template>	1	<template>
2	<v-app id="pages-dasboard">	2	<v-app id="pages-dasboard">
3	<!-- **** VIEW PROFIL NOTICE BOARD **** -->	3	<!-- **** VIEW PROFIL NOTICE BOARD **** -->
4	<!-- <v-dialog v-model="dialogNotice" max-width="940px" scrollable>	4	<!-- <v-dialog v-model="dialogNotice" max-width="940px" scrollable>
5	<v-card>	5	<v-card>
6	<v-toolbar color="grey lighten-2" flat>	6	<v-toolbar color="grey lighten-2" flat>
7	<v-spacer></v-spacer>	7	<v-spacer></v-spacer>
8	<v-toolbar-title>	8	<v-toolbar-title>
9	<h3>Notice Board</h3>	9	<h3>Notice Board</h3>
10	</v-toolbar-title>	10	</v-toolbar-title>
11	<v-spacer></v-spacer>	11	<v-spacer></v-spacer>
12	<v-icon @click="closeNotice">close</v-icon>	12	<v-icon @click="closeNotice">close</v-icon>
13	</v-toolbar>	13	</v-toolbar>
14	<v-card-text>	14	<v-card-text>
15	<v-layout>	15	<v-layout>
16	<v-flex align-center justify-center layout text-xs-center class="mt-2">	16	<v-flex align-center justify-center layout text-xs-center class="mt-2">
17	<img src="/static/icon/user.png" width="70px" v-if="!notice.eventImageUrl" />	17	<img src="/static/icon/user.png" width="70px" v-if="!notice.eventImageUrl" />
18	<img :src="notice.eventImageUrl" width="280px" v-else-if="notice.eventImageUrl" />	18	<img :src="notice.eventImageUrl" width="280px" v-else-if="notice.eventImageUrl" />
19	</v-flex>	19	</v-flex>
20	</v-layout>	20	</v-layout>
21	<v-container grid-list-md>	21	<v-container grid-list-md>
22	<v-layout wrap>	22	<v-layout wrap>
23	<v-flex>	23	<v-flex>
24	<v-layout>	24	<v-layout>
25	<v-flex xs5 sm6>	25	<v-flex xs5 sm6>
26	<h5 class="right my-1">	26	<h5 class="right my-1">
27	<b>Title:</b>	27	<b>Title:</b>
28	</h5>	28	</h5>
29	</v-flex>	29	</v-flex>
30	<v-flex sm6 xs8>	30	<v-flex sm6 xs8>
31	<h5 class="my-1">{{ notice.title }}</h5>	31	<h5 class="my-1">{{ notice.title }}</h5>
32	</v-flex>	32	</v-flex>
33	</v-layout>	33	</v-layout>
34	<v-layout>	34	<v-layout>
35	<v-flex xs5 sm6>	35	<v-flex xs5 sm6>
36	<h5 class="right my-1">	36	<h5 class="right my-1">
37	<b>Description:</b>	37	<b>Description:</b>
38	</h5>	38	</h5>
39	</v-flex>	39	</v-flex>
40	<v-flex sm6 xs8>	40	<v-flex sm6 xs8>
41	<h5 class="my-1">{{ notice.description }}</h5>	41	<h5 class="my-1">{{ notice.description }}</h5>
42	</v-flex>	42	</v-flex>
43	</v-layout>	43	</v-layout>
44	</v-flex>	44	</v-flex>
45	</v-layout>	45	</v-layout>
46	</v-container>	46	</v-container>
47	</v-card-text>	47	</v-card-text>
48	</v-card>	48	</v-card>
49	</v-dialog>-->	49	</v-dialog>-->
50	<!-- <v-container fluid grid-list-xl> -->	50	<!-- <v-container fluid grid-list-xl> -->
51		51
52	<!-- LOADER -->	52	<!-- LOADER -->
53	<div class="loader" v-if="showLoader">	53	<div class="loader" v-if="showLoader">
54	<v-progress-circular indeterminate color="white"></v-progress-circular>	54	<v-progress-circular indeterminate color="white"></v-progress-circular>
55	</div>	55	</div>
56		56
57	<!-- SNACKBAR -->	57	<!-- SNACKBAR -->
58	<v-snackbar	58	<v-snackbar
59	:timeout="timeout"	59	:timeout="timeout"
60	:top="y === 'top'"	60	:top="y === 'top'"
61	:right="x === 'right'"	61	:right="x === 'right'"
62	:vertical="mode === 'vertical'"	62	:vertical="mode === 'vertical'"
63	v-model="snackbar"	63	v-model="snackbar"
64	:color="snackbarColor"	64	:color="snackbarColor"
65	>	65	>
66	{{ text }}	66	{{ text }}
67	<v-spacer></v-spacer>	67	<v-spacer></v-spacer>
68	<v-btn flat text @click="snackbar = false">X</v-btn>	68	<v-btn flat text @click="snackbar = false">X</v-btn>
69	</v-snackbar>	69	</v-snackbar>
70		70
71	<!-- DIALOG BOX EVENT DETAILS -->	71	<!-- DIALOG BOX EVENT DETAILS -->
72	<v-dialog v-model="viewEventDetails" max-width="500">	72	<v-dialog v-model="viewEventDetails" max-width="500">
73	<v-card flat class="card-style pa-2" dark>	73	<v-card flat class="card-style pa-2" dark>
74	<!-- TITLE -->	74	<!-- TITLE -->
75	<v-layout>	75	<v-layout>
76	<v-layout>	76	<v-layout>
77	<v-flex xs12>	77	<v-flex xs12>
78	<label class="title text-xs-center">{{particularEvent.title}}</label>	78	<label class="title text-xs-center">{{particularEvent.title}}</label>
79	<v-icon size="24" class="right" @click="viewEventDetails = false">cancel</v-icon>	79	<v-icon size="24" class="right" @click="viewEventDetails = false">cancel</v-icon>
80	</v-flex>	80	</v-flex>
81	</v-layout>	81	</v-layout>
82	</v-layout>	82	</v-layout>
83		83
84	<v-card-text>	84	<v-card-text>
85	<v-list dark class="card-style">	85	<v-list dark class="card-style">
86	<v-list-tile>	86	<v-list-tile>
87	<v-list-tile-content>	87	<v-list-tile-content>
88	<v-list-tile-title>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</v-list-tile-title>	88	<v-list-tile-title>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</v-list-tile-title>
89	</v-list-tile-content>	89	</v-list-tile-content>
90	</v-list-tile>	90	</v-list-tile>
91	<v-list-tile>	91	<v-list-tile>
92	<v-list-tile-content>	92	<v-list-tile-content>
93	<v-list-tile-title>Start Time : {{particularEvent.startTime}}</v-list-tile-title>	93	<v-list-tile-title>Start Time : {{particularEvent.startTime}}</v-list-tile-title>
94	</v-list-tile-content>	94	</v-list-tile-content>
95	</v-list-tile>	95	</v-list-tile>
96	<v-list-tile>	96	<v-list-tile>
97	<v-list-tile-content>	97	<v-list-tile-content>
98	<v-list-tile-title>Duration : {{particularEvent.duration}}</v-list-tile-title>	98	<v-list-tile-title>Duration : {{particularEvent.duration}}</v-list-tile-title>
99	</v-list-tile-content>	99	</v-list-tile-content>
100	</v-list-tile>	100	</v-list-tile>
101	<v-list-tile>	101	<v-list-tile>
102	<v-list-tile-content>	102	<v-list-tile-content>
103	<v-list-tile-title>Link : <a :href="particularEvent.link">{{particularEvent.link}}</a></v-list-tile-title>	103	<v-list-tile-title>Link : <a :href="particularEvent.link">{{particularEvent.link}}</a></v-list-tile-title>
104	</v-list-tile-content>	104	</v-list-tile-content>
105	</v-list-tile>	105	</v-list-tile>
106	</v-list>	106	</v-list>
107	</v-card-text>	107	</v-card-text>
108	</v-card>	108	</v-card>
109	</v-dialog>	109	</v-dialog>
110		110
111	<v-layout wrap row>	111	<v-layout wrap row>
112	<v-flex xs12 sm12 md9>	112	<v-flex xs12 sm12 md9>
113	<v-container fluid grid-list-xl>	113	<v-container fluid grid-list-xl>
114	<!-- *** Total Students *** -->	114	<!-- *** Total Students *** -->
115	<v-layout wrap class v-if="$store.state.role != 'PARENT' ">	115	<v-layout wrap class v-if="$store.state.role != 'PARENT' ">
116	<v-flex xs12 sm12 md3>	116	<v-flex xs12 sm12 md3>
117	<router-link :to="{ name:'Students' }">	117	<router-link :to="{ name:'Students' }">
118	<v-card class="card pink-bgcolor">	118	<v-card class="card pink-bgcolor">
119	<v-card-title primary-title class="titleCard white--text py-3">Students</v-card-title>	119	<v-card-title primary-title class="titleCard white--text py-3">Students</v-card-title>
120	<img src="/static/icon/student.png" class="ml-2" width="40" alt="icons" />	120	<img src="/static/icon/student.png" class="ml-2" width="40" alt="icons" />
121	<v-card-title class="headline py-1 white--text">{{ students.length }}</v-card-title>	121	<v-card-title class="headline py-1 white--text">{{ students.length }}</v-card-title>
122	</v-card>	122	</v-card>
123	</router-link>	123	</router-link>
124	</v-flex>	124	</v-flex>
125	<!-- *** Total Teachers*** -->	125	<!-- *** Total Teachers*** -->
126	<v-flex xs12 sm12 md3>	126	<v-flex xs12 sm12 md3>
127	<router-link :to="{ name:'Teachers' }">	127	<router-link :to="{ name:'Teachers' }">
128	<v-card flat class="card elevation-2 firozi-bgcolor">	128	<v-card flat class="card elevation-2 firozi-bgcolor">
129	<v-card-title primary-title class="titleCard white--text py-3">Teachers</v-card-title>	129	<v-card-title primary-title class="titleCard white--text py-3">Teachers</v-card-title>
130	<img src="/static/icon/teacher.png" class="ml-2" width="40" alt="icons" />	130	<img src="/static/icon/teacher.png" class="ml-2" width="40" alt="icons" />
131		131
132	<v-card-title class="headline py-1 white--text">{{ teachers.length }}</v-card-title>	132	<v-card-title class="headline py-1 white--text">{{ teachers.length }}</v-card-title>
133	</v-card>	133	</v-card>
134	</router-link>	134	</router-link>
135	</v-flex>	135	</v-flex>
136	<!-- *** Total Parents *** -->	136	<!-- *** Total Parents *** -->
137	<v-flex xs12 sm12 md3>	137	<v-flex xs12 sm12 md3>
138	<router-link :to="{ name:'Parents' }">	138	<router-link :to="{ name:'Parents' }">
139	<v-card flat class="card yellow darken-3">	139	<v-card flat class="card yellow darken-3">
140	<v-card-title primary-title class="titleCard white--text py-3">Parents</v-card-title>	140	<v-card-title primary-title class="titleCard white--text py-3">Parents</v-card-title>
141	<img src="/static/icon/parents.png" class="ml-3" width="40px" alt="icons" />	141	<img src="/static/icon/parents.png" class="ml-3" width="40px" alt="icons" />
142	<v-card-title class="headline py-1 white--text">{{ parents.length }}</v-card-title>	142	<v-card-title class="headline py-1 white--text">{{ parents.length }}</v-card-title>
143	</v-card>	143	</v-card>
144	</router-link>	144	</router-link>
145	</v-flex>	145	</v-flex>
146	<!-- *** Total Class*** -->	146	<!-- *** Total Class*** -->
147	<v-flex xs12 sm12 md3>	147	<v-flex xs12 sm12 md3>
148	<router-link :to="{ name:'Class' }">	148	<router-link :to="{ name:'Class' }">
149	<v-card flat class="card darkBlue-bgcolor">	149	<v-card flat class="card darkBlue-bgcolor">
150	<v-card-title primary-title class="titleCard white--text py-3">Class</v-card-title>	150	<v-card-title primary-title class="titleCard white--text py-3">Class</v-card-title>
151	<img src="/static/icon/class.png" width="40" alt="icons" class="ml-2" />	151	<img src="/static/icon/class.png" width="40" alt="icons" class="ml-2" />
152	<v-card-title class="headline py-1 white--text">{{ classes.length }}</v-card-title>	152	<v-card-title class="headline py-1 white--text">{{ classes.length }}</v-card-title>
153	</v-card>	153	</v-card>
154	</router-link>	154	</router-link>
155	</v-flex>	155	</v-flex>
156	</v-layout>	156	</v-layout>
157		157
158	<p	158	<p
159	v-if="studentsData.length === 0 && role == 'PARENT'"	159	v-if="studentsData.length === 0 && role == 'PARENT'"
160	class="text-center title grey lighten-4 error--text"	160	class="text-center title grey lighten-4 error--text"
161	>You have no student registered with school</p>	161	>You have no student registered with school</p>
162	<!-- ACCOUNT -->	162	<!-- ACCOUNT -->
163	<v-layout v-if="role == 'SUPERADMIN'\|\| role == 'ADMIN'">	163	<v-layout v-if="role == 'SUPERADMIN'\|\| role == 'ADMIN'">
164	<v-flex xs12>	164	<v-flex xs12>
165	<v-card class="card mt-2 account-Card">	165	<v-card class="card mt-2 account-Card">
166	<h4>	166	<h4>
167	<b>Account</b>	167	<b>Account</b>
168	</h4>	168	</h4>
169	<v-layout wrap>	169	<v-layout wrap>
170	<v-flex xs12 sm12 md3>	170	<v-flex xs12 sm12 md3>
171	<v-list two-line>	171	<v-list two-line>
172	<template>	172	<template>
173	<v-list-tile>	173	<v-list-tile>
174	<v-list-tile-avatar>	174	<v-list-tile-avatar>
175	<v-icon class="account-circle darkBlue-color">panorama_fish_eye</v-icon>	175	<v-icon class="account-circle darkBlue-color">panorama_fish_eye</v-icon>
176	</v-list-tile-avatar>	176	</v-list-tile-avatar>
177	<v-list-tile-content>	177	<v-list-tile-content>
178	<v-list-tile-title class="mt-2">	178	<v-list-tile-title class="mt-2">
179	<p class="subheading font-color">Fees</p>	179	<p class="subheading font-color">Fees</p>
180	</v-list-tile-title>	180	</v-list-tile-title>
181	<v-list-tile-title>Rs. {{ feeData.totalFees }}</v-list-tile-title>	181	<v-list-tile-title>Rs. {{ feeData.totalFees }}</v-list-tile-title>
182	</v-list-tile-content>	182	</v-list-tile-content>
183	</v-list-tile>	183	</v-list-tile>
184	<v-list-tile>	184	<v-list-tile>
185	<v-list-tile-avatar>	185	<v-list-tile-avatar>
186	<v-icon class="account-circle yellowDark-color">panorama_fish_eye</v-icon>	186	<v-icon class="account-circle yellowDark-color">panorama_fish_eye</v-icon>
187	</v-list-tile-avatar>	187	</v-list-tile-avatar>
188	<v-list-tile-content>	188	<v-list-tile-content>
189	<v-list-tile-title class="mt-2">	189	<v-list-tile-title class="mt-2">
190	<p class="subheading font-color">Collection</p>	190	<p class="subheading font-color">Collection</p>
191	</v-list-tile-title>	191	</v-list-tile-title>
192	<v-list-tile-title>Rs. {{ feeData.totalCollection }}</v-list-tile-title>	192	<v-list-tile-title>Rs. {{ feeData.totalCollection }}</v-list-tile-title>
193	</v-list-tile-content>	193	</v-list-tile-content>
194	</v-list-tile>	194	</v-list-tile>
195	<v-list-tile>	195	<v-list-tile>
196	<v-list-tile-avatar>	196	<v-list-tile-avatar>
197	<v-icon class="account-circle pink-color">panorama_fish_eye</v-icon>	197	<v-icon class="account-circle pink-color">panorama_fish_eye</v-icon>
198	</v-list-tile-avatar>	198	</v-list-tile-avatar>
199	<v-list-tile-content>	199	<v-list-tile-content>
200	<v-list-tile-title class="mt-2">	200	<v-list-tile-title class="mt-2">
201	<p class="subheading font-color">Expences</p>	201	<p class="subheading font-color">Expences</p>
202	</v-list-tile-title>	202	</v-list-tile-title>
203	<v-list-tile-title>Rs. {{ expenseData.sum }}</v-list-tile-title>	203	<v-list-tile-title>Rs. {{ expenseData.sum }}</v-list-tile-title>
204	</v-list-tile-content>	204	</v-list-tile-content>
205	</v-list-tile>	205	</v-list-tile>
206	</template>	206	</template>
207	</v-list>	207	</v-list>
208	</v-flex>	208	</v-flex>
209	<v-flex xs12 sm12 md9 lg9>	209	<v-flex xs12 sm12 md9 lg9>
210	<div id="chart">	210	<div id="chart">
211	<div v-if="this.series">	211	<div v-if="this.series">
212	<apexchart	212	<apexchart
213	type="bar"	213	type="bar"
214	height="250"	214	height="250"
215	style="max-width: 800px !important"	215	style="max-width: 800px !important"
216	:options="chartOptions"	216	:options="chartOptions"
217	:series="series"	217	:series="series"
218	v-show="true"	218	v-show="true"
219	></apexchart>	219	></apexchart>
220	</div>	220	</div>
221	</div>	221	</div>
222	</v-flex>	222	</v-flex>
223	</v-layout>	223	</v-layout>
224	</v-card>	224	</v-card>
225	</v-flex>	225	</v-flex>
226	</v-layout>	226	</v-layout>
227		227
228	<!-- FOR ADMIN ROLE -->	228	<!-- FOR ADMIN ROLE -->
229	<v-card class="mt-2 card" v-if="role == 'ADMIN'">	229	<v-card class="mt-2 card" v-if="role == 'ADMIN'">
230	<!-- <full-calendar	230	<!-- <full-calendar
231	ref="calendar"	231	ref="calendar"
232	defaultView="month"	232	defaultView="month"
233	droppable="false"	233	droppable="false"
234	:events="events"	234	:events="events"
235	:config="config"	235	:config="config"
236	></full-calendar>-->	236	></full-calendar>-->
237	<h4 class="pa-3">	237	<h4 class="pa-3">
238	<b>Notice</b>	238	<b>Notice</b>
239	</h4>	239	</h4>
240		240
241	<v-data-table	241	<v-data-table
242	:items="noticeData"	242	:items="noticeData"
243	class="elevation-0"	243	class="elevation-0"
244	flat	244	flat
245	hide-actions	245	hide-actions
246	hide-headers	246	hide-headers
247	style="border-spacing: 0 !important;"	247	style="border-spacing: 0 !important;"
248	>	248	>
249	<template	249	<template
250	slot="items"	250	slot="items"
251	slot-scope="props"	251	slot-scope="props"
252	v-if="props.index < 5"	252	v-if="props.index < 5"
253	style="border-spacing: 0 !important;"	253	style="border-spacing: 0 !important;"
254	>	254	>
255	<tr class="td-notice">	255	<tr class="td-notice">
256	<td class="grey--text" style="width:18px">{{ props.index + 1}}</td>	256	<td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
257	<td>	257	<td>
258	<span class="grey--text caption">{{ date(props.item.created) }}</span>	258	<span class="grey--text caption">{{ date(props.item.created) }}</span>
259	<br />	259	<br />
260	<span class="body-2">{{ props.item.title}}</span>	260	<span class="body-2">{{ props.item.title}}</span>
261	</td>	261	</td>
262	<td class="noticeDecritpion grey--text mt-2">{{ props.item.description}}</td>	262	<td class="grey--text mt-2">{{ props.item.description}}</td>
263		263
264	<td class="text-xs-center">	264	<td class="text-xs-center">
265	<span>	265	<span>
266	<v-tooltip top>	266	<v-tooltip top>
267	<img	267	<img
268	slot="activator"	268	slot="activator"
269	style="cursor:pointer; width:25px; height:25px; "	269	style="cursor:pointer; width:25px; height:25px; "
270	@click="profile"	270	@click="profile"
271	src="/static/icon/view.png"	271	src="/static/icon/view.png"
272	/>	272	/>
273	<span>View</span>	273	<span>View</span>
274	</v-tooltip>	274	</v-tooltip>
275	</span>	275	</span>
276	</td>	276	</td>
277	</tr>	277	</tr>
278	</template>	278	</template>
279	</v-data-table>	279	</v-data-table>
280	</v-card>	280	</v-card>
281		281
282	<!-- FOR TEACHER ROLE -->	282	<!-- FOR TEACHER ROLE -->
283	<v-card class="mt-2 card" v-if="role == 'TEACHER'">	283	<v-card class="mt-2 card" v-if="role == 'TEACHER'">
284	<v-layout>	284	<v-layout>
285	<v-flex xs6 sm6 md6>	285	<v-flex xs6 sm6 md6>
286	<h4 class="pa-3">	286	<h4 class="pa-3">
287	<b>Notice</b>	287	<b>Notice</b>
288	</h4>	288	</h4>
289	<v-data-table	289	<v-data-table
290	:items="noticeData"	290	:items="noticeData"
291	class="elevation-0"	291	class="elevation-0"
292	flat	292	flat
293	hide-actions	293	hide-actions
294	hide-headers	294	hide-headers
295	style="border-spacing: 0 !important;"	295	style="border-spacing: 0 !important;"
296	>	296	>
297	<template	297	<template
298	slot="items"	298	slot="items"
299	slot-scope="props"	299	slot-scope="props"
300	v-if="props.index < 5"	300	v-if="props.index < 5"
301	style="border-spacing: 0 !important;"	301	style="border-spacing: 0 !important;"
302	>	302	>
303	<tr class="td-notice">	303	<tr class="td-notice">
304	<td class="grey--text" style="width:18px">{{ props.index + 1}}</td>	304	<td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
305	<td>	305	<td>
306	<span class="grey--text caption">{{ date(props.item.created) }}</span>	306	<span class="grey--text caption">{{ date(props.item.created) }}</span>
307	<br />	307	<br />
308	<span class="body-2">{{ props.item.title}}</span>	308	<span class="body-2">{{ props.item.title}}</span>
309	</td>	309	</td>
310	<td class="noticeDecritpion grey--text mt-2">{{ props.item.description}}</td>	310	<td class="grey--text mt-2">{{ props.item.description}}</td>
311		311
312	<td class="text-xs-center">	312	<td class="text-xs-center">
313	<span>	313	<span>
314	<v-tooltip top>	314	<v-tooltip top>
315	<img	315	<img
316	slot="activator"	316	slot="activator"
317	style="cursor:pointer; width:25px; height:25px; "	317	style="cursor:pointer; width:25px; height:25px; "
318	@click="profile"	318	@click="profile"
319	src="/static/icon/view.png"	319	src="/static/icon/view.png"
320	/>	320	/>
321	<span>View</span>	321	<span>View</span>
322	</v-tooltip>	322	</v-tooltip>
323	</span>	323	</span>
324	</td>	324	</td>
325	</tr>	325	</tr>
326	</template>	326	</template>
327	</v-data-table>	327	</v-data-table>
328	</v-flex>	328	</v-flex>
329		329
330	<v-flex xs6 sm6 md6>	330	<v-flex xs6 sm6 md6>
331	<v-card-text>	331	<v-card-text>
332	<v-card-title class="justify-center subheading font-weight-bold">Latest Events</v-card-title>	332	<v-card-title class="justify-center subheading font-weight-bold">Latest Events</v-card-title>
333	<div	333	<div
334	v-for="(activity,index) in activityList"	334	v-for="(activity,index) in activityList"
335	:key="index"	335	:key="index"
336	class="mt-2"	336	class="mt-2"
337	style="cursor: pointer;"	337	style="cursor: pointer;"
338	@click="seeEventDetails(activity)"	338	@click="seeEventDetails(activity)"
339	>	339	>
340	<span	340	<span
341	:style="{ 'background-color': colorsArray[index%colorsArray.length] }"	341	:style="{ 'background-color': colorsArray[index%colorsArray.length] }"
342	style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"	342	style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
343	></span>	343	></span>
344	<div style="display: inline-block;" class="ml-2">	344	<div style="display: inline-block;" class="ml-2">
345	<div>	345	<div>
346	<div	346	<div
347	class="grey--text lighten-1 caption"	347	class="grey--text lighten-1 caption"
348	v-if="activity.dateOfEvent"	348	v-if="activity.dateOfEvent"
349	>{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div>	349	>{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div>
350	<div class="body-2" v-if="activity.title">{{activity.title}}</div>	350	<div class="body-2" v-if="activity.title">{{activity.title}}</div>
351	</div>	351	</div>
352	</div>	352	</div>
353	</div>	353	</div>
354	<div v-if="activityList.length == 0">	354	<div v-if="activityList.length == 0">
355	<p class="text-center title grey lighten-4 error--text">No Data Found!</p>	355	<p class="text-center title grey lighten-4 error--text">No Data Found!</p>
356	</div>	356	</div>
357	</v-card-text>	357	</v-card-text>
358	</v-flex>	358	</v-flex>
359	</v-layout>	359	</v-layout>
360	</v-card>	360	</v-card>
361		361
362	<!-- COURSES -->	362	<!-- COURSES -->
363	<v-layout v-if="role == 'PARENT'">	363	<v-layout v-if="role == 'PARENT'">
364	<v-flex xs12>	364	<v-flex xs12>
365	<v-card class="card mt-2 account-Card">	365	<v-card class="card mt-2 account-Card">
366	<h4>	366	<h4>
367	<b>My Courses</b>	367	<b>My Courses</b>
368	</h4>	368	</h4>
369	<v-layout wrap>	369	<v-layout wrap>
370	<v-flex xs12 sm12>	370	<v-flex xs12 sm12>
371	<v-list two-line>	371	<v-list two-line>
372	<template>	372	<template>
373	<v-list-tile v-for="(course,i) in courseData" :key="i">	373	<v-list-tile v-for="(course,i) in courseData" :key="i">
374	<v-list-tile-avatar>	374	<v-list-tile-avatar>
375	<v-icon	375	<v-icon
376	class="account-circle darkBlue-color"	376	class="account-circle darkBlue-color"
377	style="cursor: pointer;"	377	style="cursor: pointer;"
378	>panorama_fish_eye</v-icon>	378	>panorama_fish_eye</v-icon>
379	</v-list-tile-avatar>	379	</v-list-tile-avatar>
380	<v-list-tile-content>	380	<v-list-tile-content>
381	<v-list-tile-title	381	<v-list-tile-title
382	style="cursor: pointer;"	382	style="cursor: pointer;"
383	@click="routeToCourseDetails(course._id)"	383	@click="routeToCourseDetails(course._id)"
384	>{{ course.courseName }}</v-list-tile-title>	384	>{{ course.courseName }}</v-list-tile-title>
385	</v-list-tile-content>	385	</v-list-tile-content>
386	</v-list-tile>	386	</v-list-tile>
387	</template>	387	</template>
388	</v-list>	388	</v-list>
389	</v-flex>	389	</v-flex>
390	</v-layout>	390	</v-layout>
391	</v-card>	391	</v-card>
392	</v-flex>	392	</v-flex>
393	</v-layout>	393	</v-layout>
394	<v-layout v-if="role == 'PARENT'">	394	<v-layout v-if="role == 'PARENT'">
395	<v-flex xs6>	395	<v-flex xs6>
396	<v-card class="mt-2 card">	396	<v-card class="mt-2 card">
397	<h4 class="pa-3">	397	<h4 class="pa-3">
398	<b>Latest Annoucements</b>	398	<b>Latest Annoucements</b>
399	</h4>	399	</h4>
400		400
401	<v-data-table	401	<v-data-table
402	:items="annoucementData"	402	:items="annoucementData"
403	class="elevation-0"	403	class="elevation-0"
404	flat	404	flat
405	hide-actions	405	hide-actions
406	hide-headers	406	hide-headers
407	style="border-spacing: 0 !important;"	407	style="border-spacing: 0 !important;"
408	>	408	>
409	<template	409	<template
410	slot="items"	410	slot="items"
411	slot-scope="props"	411	slot-scope="props"
412	v-if="props.index < 5"	412	v-if="props.index < 5"
413	style="border-spacing: 0 !important;"	413	style="border-spacing: 0 !important;"
414	>	414	>
415	<tr class="td-notice">	415	<tr class="td-notice">
416	<td class="grey--text" style="width:18px">{{ props.index + 1}}</td>	416	<td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
417	<td>	417	<td>
418	<span class="grey--text caption">{{ date(props.item.created) }}</span>	418	<span class="grey--text caption">{{ date(props.item.created) }}</span>
419	<br />	419	<br />
420	<span class="body-2">{{ props.item.discussionType}}</span>	420	<span class="body-2">{{ props.item.discussionType}}</span>
421	</td>	421	</td>
422	<td class="text-xs-center">	422	<td class="text-xs-center">
423	<span>	423	<span>
424	<v-tooltip top>	424	<v-tooltip top>
425	<img	425	<img
426	slot="activator"	426	slot="activator"
427	style="cursor:pointer; width:25px; height:25px; "	427	style="cursor:pointer; width:25px; height:25px; "
428	src="/static/icon/view.png"	428	src="/static/icon/view.png"
429	/>	429	/>
430	<span>View</span>	430	<span>View</span>
431	</v-tooltip>	431	</v-tooltip>
432	</span>	432	</span>
433	</td>	433	</td>
434	</tr>	434	</tr>
435	</template>	435	</template>
436	</v-data-table>	436	</v-data-table>
437	</v-card>	437	</v-card>
438	</v-flex>	438	</v-flex>
439	<v-flex xs6>	439	<v-flex xs6>
440	<v-card class="mt-2 card">	440	<v-card class="mt-2 card">
441	<h4 class="pa-3">	441	<h4 class="pa-3">
442	<b>Online User</b>	442	<b>Online User</b>
443	</h4>	443	</h4>
444		444
445	<v-data-table	445	<v-data-table
446	:items="onlineUser"	446	:items="onlineUser"
447	class="elevation-0"	447	class="elevation-0"
448	flat	448	flat
449	hide-actions	449	hide-actions
450	hide-headers	450	hide-headers
451	style="border-spacing: 0 !important;"	451	style="border-spacing: 0 !important;"
452	>	452	>
453	<template	453	<template
454	slot="items"	454	slot="items"
455	slot-scope="props"	455	slot-scope="props"
456	v-if="props.index < 5"	456	v-if="props.index < 5"
457	style="border-spacing: 0 !important;"	457	style="border-spacing: 0 !important;"
458	>	458	>
459	<tr class="td-notice">	459	<tr class="td-notice">
460	<td class="grey--text" style="width:18px">{{ props.index + 1}}</td>	460	<td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
461	<td>	461	<td>
462	<span class="body-2">{{ props.item.user }}</span>	462	<span class="body-2">{{ props.item.user }}</span>
463	</td>	463	</td>
464	<td class="text-xs-center">	464	<td class="text-xs-center">
465	<span>	465	<span>
466	<v-tooltip top>	466	<v-tooltip top>
467	<img	467	<img
468	slot="activator"	468	slot="activator"
469	style="cursor:pointer; width:25px; height:25px; "	469	style="cursor:pointer; width:25px; height:25px; "
470	src="/static/icon/view.png"	470	src="/static/icon/view.png"
471	/>	471	/>
472	<span>View</span>	472	<span>View</span>
473	</v-tooltip>	473	</v-tooltip>
474	</span>	474	</span>
475	</td>	475	</td>
476	</tr>	476	</tr>
477	</template>	477	</template>
478	</v-data-table>	478	</v-data-table>
479	</v-card>	479	</v-card>
480	</v-flex>	480	</v-flex>
481	</v-layout>	481	</v-layout>
482	</v-container>	482	</v-container>
483	</v-flex>	483	</v-flex>
484	<v-spacer></v-spacer>	484	<v-spacer></v-spacer>
485	<!-- SIDE BAR -->	485	<!-- SIDE BAR -->
486	<v-flex xs12 sm12 md3>	486	<v-flex xs12 sm12 md3>
487	<v-card height="100%" class="elevation-0 mt-3 profileDasboard">	487	<v-card height="100%" class="elevation-0 mt-3 profileDasboard">
488	<v-card-text class="px-2">	488	<v-card-text class="px-2">
489	<h4 class="text-xs-center py-3">	489	<h4 class="text-xs-center py-3">
490	<b>Profile</b>	490	<b>Profile</b>
491	</h4>	491	</h4>
492	<v-flex xs12 class="py-3">	492	<v-flex xs12 class="py-3">
493	<v-layout wrap>	493	<v-layout wrap>
494	<v-flex xs12 sm12 md4>	494	<v-flex xs12 sm12 md4>
495	<img src="/static/icon/user.png" v-if="!userData.profilePicUrl && !userData.schoolLogoUrl" width="80" />	495	<img src="/static/icon/user.png" v-if="!userData.profilePicUrl && !userData.schoolLogoUrl" width="80" />
496	<img :src="userData.profilePicUrl" onerror="this.src='/static/icon/user.png';" v-if="userData.profilePicUrl" width="80" />	496	<img :src="userData.profilePicUrl" onerror="this.src='/static/icon/user.png';" v-if="userData.profilePicUrl" width="80" />
497	<img :src="userData.schoolLogoUrl" onerror="this.src='/static/icon/user.png';" v-if="userData.schoolLogoUrl" width="80" />	497	<img :src="userData.schoolLogoUrl" onerror="this.src='/static/icon/user.png';" v-if="userData.schoolLogoUrl" width="80" />
498	</v-flex>	498	</v-flex>
499	<v-flex xs12 sm12 md6>	499	<v-flex xs12 sm12 md6>
500	<p class="mb-0 body-1">	500	<p class="mb-0 body-1">
501	<i>{{ userData.name }}</i>	501	<i>{{ userData.name }}</i>
502	</p>	502	</p>
503	<p class="mb-0 caption grey--text">{{ userData.email }}</p>	503	<p class="mb-0 caption grey--text">{{ userData.email }}</p>
504	<p class="mb-0 caption grey--text">{{ userData.mobile }}</p>	504	<p class="mb-0 caption grey--text">{{ userData.mobile }}</p>
505	<address class="caption grey--text mb-3">{{ userData.address }}</address>	505	<address class="caption grey--text mb-3">{{ userData.address }}</address>
506	</v-flex>	506	</v-flex>
507	</v-layout>	507	</v-layout>
508	</v-flex>	508	</v-flex>
509	<hr />	509	<hr />
510	<div class="text-xs-center py-3 subheading font-weight-bold">Calender</div>	510	<div class="text-xs-center py-3 subheading font-weight-bold">Calender</div>
511		511
512	<vue-event-calendar :events="activityEvents" @day-changed="handleDayChanged($event)"></vue-event-calendar>	512	<vue-event-calendar :events="activityEvents" @day-changed="handleDayChanged($event)"></vue-event-calendar>
513		513
514	<!-- LATEST EVENTS -->	514	<!-- LATEST EVENTS -->
515	<v-card class="my-3 elevation-0" v-if="role != 'TEACHER'">	515	<v-card class="my-3 elevation-0" v-if="role != 'TEACHER'">
516	<v-card-text>	516	<v-card-text>
517	<v-card-title class="justify-center subheading font-weight-bold">Latest Events</v-card-title>	517	<v-card-title class="justify-center subheading font-weight-bold">Latest Events</v-card-title>
518	<div	518	<div
519	v-for="(activity,index) in activityList"	519	v-for="(activity,index) in activityList"
520	:key="index"	520	:key="index"
521	class="mt-2"	521	class="mt-2"
522	style="cursor: pointer;"	522	style="cursor: pointer;"
523	@click="seeEventDetails(activity)"	523	@click="seeEventDetails(activity)"
524	>	524	>
525	<span	525	<span
526	:style="{ 'background-color': colorsArray[index%colorsArray.length] }"	526	:style="{ 'background-color': colorsArray[index%colorsArray.length] }"
527	style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"	527	style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
528	></span>	528	></span>
529	<div style="display: inline-block;" class="ml-2">	529	<div style="display: inline-block;" class="ml-2">
530	<!-- LATEST EVENTS FOR PARENT -->	530	<!-- LATEST EVENTS FOR PARENT -->
531	<div v-if="$store.state.role === 'PARENT' ">	531	<div v-if="$store.state.role === 'PARENT' ">
532	<div	532	<div
533	class="grey--text lighten-1 caption"	533	class="grey--text lighten-1 caption"
534	v-if="activity.meetingEvent"	534	v-if="activity.meetingEvent"
535	>{{moment(activity.meetingEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>	535	>{{moment(activity.meetingEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
536	<div	536	<div
537	class="body-2"	537	class="body-2"
538	v-if="activity.meetingEvent"	538	v-if="activity.meetingEvent"
539	>{{activity.meetingEvent.title}}</div>	539	>{{activity.meetingEvent.title}}</div>
540	</div>	540	</div>
541		541
542	<!-- LATEST EVENTS FOR TEACHER -->	542	<!-- LATEST EVENTS FOR TEACHER -->
543	<div v-if="role == 'TEACHER'">	543	<div v-if="role == 'TEACHER'">
544	<div	544	<div
545	class="grey--text lighten-1 caption"	545	class="grey--text lighten-1 caption"
546	v-if="activity.dateOfEvent"	546	v-if="activity.dateOfEvent"
547	>{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div>	547	>{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div>
548	<div class="body-2" v-if="activity.title">{{activity.title}}</div>	548	<div class="body-2" v-if="activity.title">{{activity.title}}</div>
549	</div>	549	</div>
550	</div>	550	</div>
551	</div>	551	</div>
552	<div v-if="activityList.length == 0">	552	<div v-if="activityList.length == 0">
553	<p class="text-center title grey lighten-4 error--text">No Data Found!</p>	553	<p class="text-center title grey lighten-4 error--text">No Data Found!</p>
554	</div>	554	</div>
555	</v-card-text>	555	</v-card-text>
556	</v-card>	556	</v-card>
557	</v-card-text>	557	</v-card-text>
558	</v-card>	558	</v-card>
559	</v-flex>	559	</v-flex>
560	</v-layout>	560	</v-layout>
561		561
562	<v-dialog v-model="dialog" max-width="500">	562	<v-dialog v-model="dialog" max-width="500">
563	<v-card color="grey lighten-4" flat>	563	<v-card color="grey lighten-4" flat>
564	<v-toolbar dark color="fixcolors">	564	<v-toolbar dark color="fixcolors">
565	<v-spacer></v-spacer>	565	<v-spacer></v-spacer>
566	<v-btn icon @click="dialog= false">	566	<v-btn icon @click="dialog= false">
567	<v-icon>close</v-icon>	567	<v-icon>close</v-icon>
568	</v-btn>	568	</v-btn>
569	</v-toolbar>	569	</v-toolbar>
570	<v-flex class="py-4">	570	<v-flex class="py-4">
571	<v-list-tile>	571	<v-list-tile>
572	<v-list-tile-action>	572	<v-list-tile-action>
573	<v-icon>edit</v-icon>	573	<v-icon>edit</v-icon>
574	</v-list-tile-action>	574	</v-list-tile-action>
575	<v-list-tile-content>	575	<v-list-tile-content>
576	<v-list-tile-title>{{ selected.title }}</v-list-tile-title>	576	<v-list-tile-title>{{ selected.title }}</v-list-tile-title>
577	</v-list-tile-content>	577	</v-list-tile-content>
578	</v-list-tile>	578	</v-list-tile>
579	<v-list-tile>	579	<v-list-tile>
580	<v-list-tile-action>	580	<v-list-tile-action>
581	<v-icon>access_time</v-icon>	581	<v-icon>access_time</v-icon>
582	</v-list-tile-action>	582	</v-list-tile-action>
583	<v-list-tile-content>	583	<v-list-tile-content>
584	<v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title>	584	<v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title>
585	</v-list-tile-content>	585	</v-list-tile-content>
586	</v-list-tile>	586	</v-list-tile>
587	</v-flex>	587	</v-flex>
588	</v-card>	588	</v-card>
589	</v-dialog>	589	</v-dialog>
590	</v-app>	590	</v-app>
591	</template>	591	</template>
592		592
593	<script>	593	<script>
594	import http from "@/Services/http.js";	594	import http from "@/Services/http.js";
595	import moment from "moment";	595	import moment from "moment";
596	import AllApiCalls from "@/Services/AllApiCalls.js";	596	import AllApiCalls from "@/Services/AllApiCalls.js";
597	// import { FunctionalCalendar } from "vue-functional-calendar";	597	// import { FunctionalCalendar } from "vue-functional-calendar";
598		598
599	export default {	599	export default {
600	components: {	600	components: {
601	// FunctionalCalendar	601	// FunctionalCalendar
602	},	602	},
603	mixins: [AllApiCalls],	603	mixins: [AllApiCalls],
604	data() {	604	data() {
605	return {	605	return {
606	// data: {	606	// data: {
607	// clieckedToday: false	607	// clieckedToday: false
608	// },	608	// },
609	// markedDates: ["16/4/2019", "18/4/2019", "20/4/2019", "21/4/2019"],	609	// markedDates: ["16/4/2019", "18/4/2019", "20/4/2019", "21/4/2019"],
610	// calendarData: {},	610	// calendarData: {},
611	// calendar: {},	611	// calendar: {},
612		612
613	// DIALOG BOX EVENT DETAILS	613	// DIALOG BOX EVENT DETAILS
614	viewEventDetails: false,	614	viewEventDetails: false,
615		615
616	// CALENDER	616	// CALENDER
617	moment: moment,	617	moment: moment,
618	activityEvents: [],	618	activityEvents: [],
619	onlineUser: [	619	onlineUser: [
620	{	620	{
621	user: "Student Demo"	621	user: "Student Demo"
622	},	622	},
623	{	623	{
624	user: "Teacher Demo"	624	user: "Teacher Demo"
625	},	625	},
626	{	626	{
627	user: "Priyansh Gupta"	627	user: "Priyansh Gupta"
628	},	628	},
629	{	629	{
630	user: "Gaurav Aggarwal"	630	user: "Gaurav Aggarwal"
631	},	631	},
632	{	632	{
633	user: "Approve Arorra"	633	user: "Approve Arorra"
634	}	634	}
635	],	635	],
636	showLoader: false,	636	showLoader: false,
637	calendarData: {},	637	calendarData: {},
638	dialog: false,	638	dialog: false,
639	dialogNotice: false,	639	dialogNotice: false,
640	HolidaysList: [],	640	HolidaysList: [],
641	EventsList: [],	641	EventsList: [],
642	events: [],	642	events: [],
643	config: {	643	config: {
644	eventClick: event => {	644	eventClick: event => {
645	this.selected = event;	645	this.selected = event;
646	this.dialog = true;	646	this.dialog = true;
647	}	647	}
648	},	648	},
649	selected: {},	649	selected: {},
650	barGraph: [],	650	barGraph: [],
651	// notice: {},	651	// notice: {},
652	userData: {},	652	userData: {},
653	dated: new Date(2018, 0, 9),	653	dated: new Date(2018, 0, 9),
654	userList: [],	654	userList: [],
655	sectionList: [],	655	sectionList: [],
656	students: "",	656	students: "",
657	parents: "",	657	parents: "",
658	teachers: "",	658	teachers: "",
659	classes: "",	659	classes: "",
660	noticeData: [],	660	noticeData: [],
661	expenseData: [],	661	expenseData: [],
662	feeData: [],	662	feeData: [],
663	collectionData: [],	663	collectionData: [],
664	courseData: [],	664	courseData: [],
665	studentsData: [],	665	studentsData: [],
666	annoucementData: [],	666	annoucementData: [],
667	role: "",	667	role: "",
668	attrs: [	668	attrs: [
669	{	669	{
670	key: "today",	670	key: "today",
671	highlight: true,	671	highlight: true,
672	dates: new Date()	672	dates: new Date()
673	}	673	}
674	],	674	],
675	drawer: true,	675	drawer: true,
676	items: [	676	items: [
677	{ title: "Home", icon: "dashboard" },	677	{ title: "Home", icon: "dashboard" },
678	{ title: "About", icon: "question_answer" }	678	{ title: "About", icon: "question_answer" }
679	],	679	],
680	right: null,	680	right: null,
681		681
682	series: [	682	series: [
683	{	683	{
684	name: "Total",	684	name: "Total",
685	data: []	685	data: []
686	}	686	}
687	],	687	],
688	chartOptions: {	688	chartOptions: {
689	chart: {	689	chart: {
690	type: "bar",	690	type: "bar",
691	height: 150,	691	height: 150,
692	stacked: true	692	stacked: true
693	// animations: {	693	// animations: {
694	// enabled: true,	694	// enabled: true,
695	// easing: "easeinout",	695	// easing: "easeinout",
696	// speed: 1200,	696	// speed: 1200,
697	// animateGradually: {	697	// animateGradually: {
698	// enabled: true,	698	// enabled: true,
699	// delay: 450	699	// delay: 450
700	// },	700	// },
701	// dynamicAnimation: {	701	// dynamicAnimation: {
702	// enabled: true,	702	// enabled: true,
703	// speed: 450	703	// speed: 450
704	// }	704	// }
705	// }	705	// }
706	},	706	},
707	plotOptions: {	707	plotOptions: {
708	bar: {	708	bar: {
709	horizontal: false,	709	horizontal: false,
710	columnWidth: "25%",	710	columnWidth: "25%",
711	// endingShape: "rounded",	711	// endingShape: "rounded",
712	distributed: true	712	distributed: true
713	}	713	}
714	},	714	},
715	responsive: [	715	responsive: [
716	{	716	{
717	breakpoint: 480,	717	breakpoint: 480,
718	options: {	718	options: {
719	legend: {	719	legend: {
720	position: "bottom",	720	position: "bottom",
721	offsetX: -10,	721	offsetX: -10,
722	offsetY: 0	722	offsetY: 0
723	}	723	}
724	}	724	}
725	}	725	}
726	],	726	],
727	legend: {	727	legend: {
728	show: false	728	show: false
729	},	729	},
730	colors: ["#7852cc", "#f9a825", "#ff8a89"],	730	colors: ["#7852cc", "#f9a825", "#ff8a89"],
731	dataLabels: {	731	dataLabels: {
732	enabled: false	732	enabled: false
733	},	733	},
734	stroke: {	734	stroke: {
735	show: true,	735	show: true,
736	width: 2,	736	width: 2,
737	colors: ["transparent"]	737	colors: ["transparent"]
738	},	738	},
739	xaxis: {	739	xaxis: {
740	categories: ["Fee", "Collections", "Expences"]	740	categories: ["Fee", "Collections", "Expences"]
741	},	741	},
742	yaxis: {	742	yaxis: {
743	title: {	743	title: {
744	text: ""	744	text: ""
745	}	745	}
746	},	746	},
747	fill: {	747	fill: {
748	opacity: 1	748	opacity: 1
749	},	749	},
750	tooltip: {	750	tooltip: {
751	y: {	751	y: {
752	formatter: function(val, opts) {	752	formatter: function(val, opts) {
753	return "" + val + " ";	753	return "" + val + " ";
754	}	754	}
755	}	755	}
756	}	756	}
757	},	757	},
758		758
759	// LATEST ACTIVITY	759	// LATEST ACTIVITY
760	colorsArray: ["#ff8a89", "#71d9ea", "#7852cc", "#F9A825"],	760	colorsArray: ["#ff8a89", "#71d9ea", "#7852cc", "#F9A825"],
761	activityList: []	761	activityList: []
762	};	762	};
763	},	763	},
764	methods: {	764	methods: {
765	test(e) {	765	test(e) {
766	console.log(" test - ", e);	766	console.log(" test - ", e);
767	},	767	},
768	async handleDayChanged(e) {	768	async handleDayChanged(e) {
769	await this.getParticularMeetingEvent({	769	await this.getParticularMeetingEvent({
770	meetingEventId: e.events[0]._id	770	meetingEventId: e.events[0]._id
771	});	771	});
772	this.viewEventDetails = true;	772	this.viewEventDetails = true;
773	},	773	},
774	async seeEventDetails(activity) {	774	async seeEventDetails(activity) {
775	if (this.$store.state.role === "TEACHER") {	775	if (this.$store.state.role === "TEACHER") {
776	await this.getParticularMeetingEvent({ meetingEventId: activity._id });	776	await this.getParticularMeetingEvent({ meetingEventId: activity._id });
777	this.viewEventDetails = true;	777	this.viewEventDetails = true;
778	}	778	}
779	if (this.$store.state.role === "PARENT") {	779	if (this.$store.state.role === "PARENT") {
780	await this.getParticularMeetingEvent({	780	await this.getParticularMeetingEvent({
781	meetingEventId: activity.meetingEvent._id	781	meetingEventId: activity.meetingEvent._id
782	});	782	});
783	this.viewEventDetails = true;	783	this.viewEventDetails = true;
784	}	784	}
785	},	785	},
786	async routeToCourseDetails(courseId) {	786	async routeToCourseDetails(courseId) {
787	/* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/	787	/* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/
788	let response = await this.getParticularCourseDetail(courseId);	788	let response = await this.getParticularCourseDetail(courseId);
789		789
790	/* If the response is null then dont route */	790	/* If the response is null then dont route */
791	if (response.data.data.length > 0) {	791	if (response.data.data.length > 0) {
792	this.$router.push({	792	this.$router.push({
793	name: "Course Details",	793	name: "Course Details",
794	query: { courseId: courseId }	794	query: { courseId: courseId }
795	});	795	});
796	} else {	796	} else {
797	this.seeSnackbar("No Data Available", "warning");	797	this.seeSnackbar("No Data Available", "warning");
798	}	798	}
799	},	799	},
800		800
801	closeNotice() {	801	closeNotice() {
802	this.dialogNotice = false;	802	this.dialogNotice = false;
803	},	803	},
804	profile() {	804	profile() {
805	// this.editedIndex = this.desserts.indexOf(item);	805	// this.editedIndex = this.desserts.indexOf(item);
806	// this.notice = Object.assign({}, item);	806	// this.notice = Object.assign({}, item);
807	// this.dialogNotice = true;	807	// this.dialogNotice = true;
808	this.$router.push("/noticeBoard");	808	this.$router.push("/noticeBoard");
809	},	809	},
810	date: function(date) {	810	date: function(date) {
811	return moment(date).format("MMMM DD, YYYY HH:mm");	811	return moment(date).format("MMMM DD, YYYY HH:mm");
812	},	812	},
813	activityDate(date) {	813	activityDate(date) {
814	return moment(date).format("MMMM DD, YYYY");	814	return moment(date).format("MMMM DD, YYYY");
815	},	815	},
816	refreshEvents() {	816	refreshEvents() {
817	this.$refs.calendar.$emit("refetch-events");	817	this.$refs.calendar.$emit("refetch-events");
818	},	818	},
819	removeEvent() {	819	removeEvent() {
820	this.$refs.calendar.$emit("remove-event", this.selected);	820	this.$refs.calendar.$emit("remove-event", this.selected);
821	this.selected = {};	821	this.selected = {};
822	},	822	},
823	eventSelected(event) {	823	eventSelected(event) {
824	this.selected = event;	824	this.selected = event;
825	},	825	},
826	// eventDropStart: function(event) {	826	// eventDropStart: function(event) {
827	// event.editable = false;	827	// event.editable = false;
828	// },	828	// },
829	eventCreated(...test) {	829	eventCreated(...test) {
830	console.log(test);	830	console.log(test);
831	},	831	},
832	getStudents() {	832	getStudents() {
833	http()	833	http()
834	.get("/getStudentsList", {	834	.get("/getStudentsList", {
835	headers: {	835	headers: {
836	Authorization: "Bearer " + this.token	836	Authorization: "Bearer " + this.token
837	}	837	}
838	})	838	})
839	.then(response => {	839	.then(response => {
840	this.students = response.data.data;	840	this.students = response.data.data;
841	this.showLoader = false;	841	this.showLoader = false;
842	})	842	})
843	.catch(error => {	843	.catch(error => {
844	// console.log("err====>", err);	844	// console.log("err====>", err);
845	this.showLoader = false;	845	this.showLoader = false;
846	// if (error.response.status === 401) {	846	if (error.response.status === 401) {
847	// this.$router.replace({ path: "/" });	847	this.$router.replace({ path: "/" });
848	// this.$store.dispatch("setToken", null);	848	this.$store.dispatch("setToken", null);
849	// this.$store.dispatch("Id", null);	849	this.$store.dispatch("Id", null);
850	// }	850	}
851	});	851	});
852	},	852	},
853	getParents() {	853	getParents() {
854	http()	854	http()
855	.get("/getParentsList", {	855	.get("/getParentsList", {
856	headers: {	856	headers: {
857	Authorization: "Bearer " + this.token	857	Authorization: "Bearer " + this.token
858	}	858	}
859	})	859	})
860	.then(response => {	860	.then(response => {
861	this.parents = response.data.data;	861	this.parents = response.data.data;
862	this.showLoader = false;	862	this.showLoader = false;
863	})	863	})
864	.catch(error => {	864	.catch(error => {
865	// console.log("err====>", err);	865	// console.log("err====>", err);
866	this.showLoader = false;	866	this.showLoader = false;
867	});	867	});
868	},	868	},
869	getTeachers() {	869	getTeachers() {
870	http()	870	http()
871	.get("/getTeachersList", {	871	.get("/getTeachersList", {
872	headers: {	872	headers: {
873	Authorization: "Bearer " + this.token	873	Authorization: "Bearer " + this.token
874	}	874	}
875	})	875	})
876	.then(response => {	876	.then(response => {
877	this.teachers = response.data.data;	877	this.teachers = response.data.data;
878	this.showLoader = false;	878	this.showLoader = false;
879	})	879	})
880	.catch(error => {	880	.catch(error => {
881	// console.log("err====>", err);	881	// console.log("err====>", err);
882	this.showLoader = false;	882	this.showLoader = false;
883	});	883	});
884	},	884	},
885	getClasses() {	885	getClasses() {
886	http()	886	http()
887	.get("/getClassesList", {	887	.get("/getClassesList", {
888	headers: {	888	headers: {
889	Authorization: "Bearer " + this.token	889	Authorization: "Bearer " + this.token
890	}	890	}
891	})	891	})
892	.then(response => {	892	.then(response => {
893	this.classes = response.data.data;	893	this.classes = response.data.data;
894	this.showLoader = false;	894	this.showLoader = false;
895	})	895	})
896	.catch(error => {	896	.catch(error => {
897	this.showLoader = false;	897	this.showLoader = false;
898	});	898	});
899	},	899	},
900	getNoticeData() {	900	getNoticeData() {
901	this.showLoader = true;	901	this.showLoader = true;
902	http()	902	http()
903	.get("/getEventsList", {	903	.get("/getEventsList", {
904	headers: {	904	headers: {
905	Authorization: "Bearer " + this.token	905	Authorization: "Bearer " + this.token
906	}	906	}
907	})	907	})
908	.then(response => {	908	.then(response => {
909	this.noticeData = response.data.data;	909	this.noticeData = response.data.data;
910	this.showLoader = false;	910	this.showLoader = false;
911	})	911	})
912	.catch(error => {	912	.catch(error => {
913	this.showLoader = false;	913	this.showLoader = false;
914	});	914	});
915	},	915	},
916	getUserData() {	916	getUserData() {
917	// this.showLoader = true;	917	// this.showLoader = true;
918	if (this.$store.state.role === "PARENT") {	918	if (this.$store.state.role === "PARENT") {
919	http()	919	http()
920	.get("/getParticularUserDetail", {	920	.get("/getParticularUserDetail", {
921	headers: {	921	headers: {
922	Authorization: "Bearer " + this.token	922	Authorization: "Bearer " + this.token
923	},	923	},
924	params: {	924	params: {
925	studentId: localStorage.getItem("parentStudentId")	925	studentId: localStorage.getItem("parentStudentId")
926	}	926	}
927	})	927	})
928	.then(response => {	928	.then(response => {
929	this.userData = response.data.data;	929	this.userData = response.data.data;
930	this.showLoader = false;	930	this.showLoader = false;
931	})	931	})
932	.catch(error => {	932	.catch(error => {
933	this.showLoader = false;	933	this.showLoader = false;
934	});	934	});
935	} else {	935	} else {
936	http()	936	http()
937	.get("/getParticularUserDetail", {	937	.get("/getParticularUserDetail", {
938	headers: {	938	headers: {
939	Authorization: "Bearer " + this.token	939	Authorization: "Bearer " + this.token
940	}	940	}
941	})	941	})
942	.then(response => {	942	.then(response => {
943	this.userData = response.data.data;	943	this.userData = response.data.data;
944	this.showLoader = false;	944	this.showLoader = false;
945	})	945	})
946	.catch(error => {	946	.catch(error => {
947	this.showLoader = false;	947	this.showLoader = false;
948	});	948	});
949	}	949	}
950	},	950	},
951		951
952	getFeesAndCollectionsData() {	952	getFeesAndCollectionsData() {
953	http()	953	http()
954	.get("/getTotalFeesAndCollections", {	954	.get("/getTotalFeesAndCollections", {
955	headers: {	955	headers: {
956	Authorization: "Bearer " + this.token	956	Authorization: "Bearer " + this.token
957	}	957	}
958	})	958	})
959	.then(response => {	959	.then(response => {
960	this.feeData = response.data.data;	960	this.feeData = response.data.data;
961	// this.collectionData = response.data.data;	961	// this.collectionData = response.data.data;
962	this.series[0].data[0] = this.feeData.totalFees;	962	this.series[0].data[0] = this.feeData.totalFees;
963	this.series[0].data[1] = this.feeData.totalCollection;	963	this.series[0].data[1] = this.feeData.totalCollection;
964		964
965	this.showLoader = false;	965	this.showLoader = false;
966	})	966	})
967	.catch(error => {	967	.catch(error => {
968	this.showLoader = false;	968	this.showLoader = false;
969	});	969	});
970	},	970	},
971	getExpensesData() {	971	getExpensesData() {
972	http()	972	http()
973	.get("/getTotalExpenses", {	973	.get("/getTotalExpenses", {
974	headers: {	974	headers: {
975	Authorization: "Bearer " + this.token	975	Authorization: "Bearer " + this.token
976	}	976	}
977	})	977	})
978	.then(response => {	978	.then(response => {
979	this.expenseData = response.data.data;	979	this.expenseData = response.data.data;
980	// var array = response.data.data.sum;	980	// var array = response.data.data.sum;
981	this.series[0].data[2] = this.expenseData.sum;	981	this.series[0].data[2] = this.expenseData.sum;
982	// this.series = [	982	// this.series = [
983	// {	983	// {
984	// name: "Total",	984	// name: "Total",
985	// data: array	985	// data: array
986	// }	986	// }
987	// ];	987	// ];
988	this.showLoader = false;	988	this.showLoader = false;
989	})	989	})
990	.catch(error => {	990	.catch(error => {
991	this.showLoader = false;	991	this.showLoader = false;
992	});	992	});
993	},	993	},
994	async getparentStudents() {	994	async getparentStudents() {
995	this.showLoader = true;	995	this.showLoader = true;
996	var parentStudentsId;	996	var parentStudentsId;
997	var classId;	997	var classId;
998	await http()	998	await http()
999	.get("/parentStudentsList")	999	.get("/parentStudentsList")
1000	.then(response => {	1000	.then(response => {
1001	this.studentsData = response.data.data;	1001	this.studentsData = response.data.data;
1002	localStorage.setItem(	1002	localStorage.setItem(
1003	"parentStudentId",	1003	"parentStudentId",
1004	this.studentsData.students[0]._id	1004	this.studentsData.students[0]._id
1005	);	1005	);
1006	localStorage.setItem(	1006	localStorage.setItem(
1007	"parentClassId",	1007	"parentClassId",
1008	this.studentsData.students[0].classId	1008	this.studentsData.students[0].classId
1009	);	1009	);
1010		1010
1011	if (localStorage.getItem("parentStudentId") == null) {	1011	if (localStorage.getItem("parentStudentId") == null) {
1012	parentStudentsId = response.data.data.students[0].classId;	1012	parentStudentsId = response.data.data.students[0].classId;
1013	classId = response.data.data.students[0]._id;	1013	classId = response.data.data.students[0]._id;
1014	}	1014	}
1015	if (localStorage.getItem("parentStudentId")) {	1015	if (localStorage.getItem("parentStudentId")) {
1016	parentStudentsId = localStorage.getItem("parentStudentId");	1016	parentStudentsId = localStorage.getItem("parentStudentId");
1017	classId = localStorage.getItem("parentClassId");	1017	classId = localStorage.getItem("parentClassId");
1018	}	1018	}
1019		1019
1020	this.showLoader = false;	1020	this.showLoader = false;
1021	})	1021	})
1022	.catch(err => {	1022	.catch(err => {
1023	console.log("err====>", err);	1023	console.log("err====>", err);
1024	this.showLoader = false;	1024	this.showLoader = false;
1025	});	1025	});
1026	await this.getCourses(parentStudentsId, classId);	1026	await this.getCourses(parentStudentsId, classId);
1027	await this.getAnnoucementes(classId);	1027	await this.getAnnoucementes(classId);
1028	},	1028	},
1029	async getCourses(parentStudentsId, classId) {	1029	async getCourses(parentStudentsId, classId) {
1030	/* getStudentCourses - to get courseData - defined in GetApis.js*/	1030	/* getStudentCourses - to get courseData - defined in GetApis.js*/
1031	await this.getStudentCourses({	1031	await this.getStudentCourses({
1032	classId: classId,	1032	classId: classId,
1033	studentId: parentStudentsId	1033	studentId: parentStudentsId
1034	});	1034	});
1035	},	1035	},
1036	getAnnoucementes(classId) {	1036	getAnnoucementes(classId) {
1037	this.showLoader = true;	1037	this.showLoader = true;
1038	http()	1038	http()
1039	.get("/getAnnoucementesList", {	1039	.get("/getAnnoucementesList", {
1040	params: {	1040	params: {
1041	classId: classId	1041	classId: classId
1042	}	1042	}
1043	})	1043	})
1044	.then(response => {	1044	.then(response => {
1045	this.annoucementData = response.data.data;	1045	this.annoucementData = response.data.data;
1046	this.showLoader = false;	1046	this.showLoader = false;
1047	})	1047	})
1048	.catch(err => {	1048	.catch(err => {
1049	console.log("err====>", err);	1049	console.log("err====>", err);
1050	this.showLoader = false;	1050	this.showLoader = false;
1051	});	1051	});
1052	},	1052	},
1053	async getMeetingEventes() {	1053	async getMeetingEventes() {
1054	if (this.role == "TEACHER") {	1054	if (this.role == "TEACHER") {
1055	this.showLoader = true;	1055	this.showLoader = true;
1056	await http()	1056	await http()
1057	.get("/getMeetingEventesList", {	1057	.get("/getMeetingEventesList", {
1058	headers: {	1058	headers: {
1059	Authorization: "Bearer " + this.token	1059	Authorization: "Bearer " + this.token
1060	}	1060	}
1061	})	1061	})
1062	.then(response => {	1062	.then(response => {
1063	var activityList = response.data.data;	1063	var activityList = response.data.data;
1064	this.activityList = activityList;	1064	this.activityList = activityList;
1065	this.showLoader = false;	1065	this.showLoader = false;
1066		1066
1067	/* set activityEvents array to highlight event dates in calender */	1067	/* set activityEvents array to highlight event dates in calender */
1068	for (var i = 0; i < this.activityList.length; i++) {	1068	for (var i = 0; i < this.activityList.length; i++) {
1069	let obj = {};	1069	let obj = {};
1070	obj.date = moment(this.activityList[i].dateOfEvent).format(	1070	obj.date = moment(this.activityList[i].dateOfEvent).format(
1071	"YYYY/MM/DD"	1071	"YYYY/MM/DD"
1072	);	1072	);
1073	obj.title = this.activityList[i].title;	1073	obj.title = this.activityList[i].title;
1074	obj._id = this.activityList[i]._id;	1074	obj._id = this.activityList[i]._id;
1075	this.activityEvents.push(obj);	1075	this.activityEvents.push(obj);
1076	}	1076	}
1077	})	1077	})
1078	.catch(error => {	1078	.catch(error => {
1079	this.showLoader = false;	1079	this.showLoader = false;
1080	});	1080	});
1081	}	1081	}
1082	}	1082	}
1083	},	1083	},
1084		1084
1085	mounted() {	1085	mounted() {
1086	// = this.$store.state.schoolToken;	1086	// = this.$store.state.schoolToken;
1087	// console.log("this.$store.state.role", this.token);	1087	// console.log("this.$store.state.role", this.token);
1088	// this.getUsersList();	1088	// this.getUsersList();
1089	},	1089	},
1090		1090
1091	async created() {	1091	async created() {
1092	if (this.$store.state.role === "ADMIN") {	1092	if (this.$store.state.role === "ADMIN") {
1093	this.token = this.$store.state.token;	1093	this.token = this.$store.state.token;
1094	await this.getFeesAndCollectionsData();
1095	await this.getExpensesData();
1096	} else if (this.$store.state.schoolRole === "SUPERADMIN") {	1094	} else if (this.$store.state.schoolRole === "SUPERADMIN") {
1097	this.token = this.$store.state.schoolToken;	1095	this.token = this.$store.state.schoolToken;
1098	await this.getFeesAndCollectionsData();
1099	await this.getExpensesData();
1100	} else if (this.$store.state.role === "TEACHER") {	1096	} else if (this.$store.state.role === "TEACHER") {
1101	this.token = this.$store.state.token;	1097	this.token = this.$store.state.token;
1102	} else if (this.$store.state.role === "ACCOUNTANT") {	1098	} else if (this.$store.state.role === "ACCOUNTANT") {
1103	this.token = this.$store.state.token;	1099	this.token = this.$store.state.token;
1104	} else if (this.$store.state.role === "LIBRARIAN") {	1100	} else if (this.$store.state.role === "LIBRARIAN") {
1105	this.token = this.$store.state.token;	1101	this.token = this.$store.state.token;
1106	} else if (this.$store.state.role === "PARENT") {	1102	} else if (this.$store.state.role === "PARENT") {
1107	this.token = this.$store.state.token;	1103	this.token = this.$store.state.token;
1108	await this.getparentStudents();	1104	await this.getparentStudents();
1109	}	1105	}
1110	this.role = this.$store.state.role;	1106	this.role = this.$store.state.role;
1111	// console.log("role", this.$store.state.schoolRole,"tt",this.$store.state.schoolToken);	1107	// console.log("role", this.$store.state.schoolRole,"tt",this.$store.state.schoolToken);
1112	// this.getData();	1108	// this.getData();
1113	await this.getStudents();	1109	await this.getStudents();
1114	await this.getTeachers();	1110	await this.getTeachers();
1115	await this.getParents();	1111	await this.getParents();
1116	await this.getClasses();	1112	await this.getClasses();
1117	await this.getNoticeData();	1113	await this.getNoticeData();
1118	await this.getUserData();	1114	await this.getUserData();
1119		1115	await this.getFeesAndCollectionsData();
1120		1116	await this.getExpensesData();
1121		1117
1122	/* get Latest events list for student login*/	1118	/* get Latest events list for student login*/
1123	if (this.$store.state.role == "PARENT") {	1119	if (this.$store.state.role == "PARENT") {
1124	let response = await this.studentMeetingEvents({	1120	let response = await this.studentMeetingEvents({
1125	studentId: localStorage.getItem("parentStudentId")	1121	studentId: localStorage.getItem("parentStudentId")
1126	});	1122	});
1127	this.activityList = response.data.data;	1123	this.activityList = response.data.data;
1128		1124
1129	/* set activityEvents array to highlight event dates in calender */	1125	/* set activityEvents array to highlight event dates in calender */
1130	for (var i = 0; i < this.activityList.length; i++) {	1126	for (var i = 0; i < this.activityList.length; i++) {
1131	let obj = {};	1127	let obj = {};
1132	obj.date = moment(this.activityList[i].meetingEvent.dateOfEvent).format(	1128	obj.date = moment(this.activityList[i].meetingEvent.dateOfEvent).format(
1133	"YYYY/MM/DD"	1129	"YYYY/MM/DD"
1134	);	1130	);
1135	obj.title = this.activityList[i].meetingEvent.title;	1131	obj.title = this.activityList[i].meetingEvent.title;
1136	obj._id = this.activityList[i].meetingEvent._id;	1132	obj._id = this.activityList[i].meetingEvent._id;
1137	this.activityEvents.push(obj);	1133	this.activityEvents.push(obj);
1138	}	1134	}
1139	}	1135	}
1140		1136
1141	/* get Latest events list for teacher login*/	1137	/* get Latest events list for teacher login*/
1142	if (this.role == "TEACHER") {	1138	if (this.role == "TEACHER") {
1143	await this.getMeetingEventes();	1139	await this.getMeetingEventes();
1144	}	1140	}
1145	}	1141	}
1146	};	1142	};
1147	</script>	1143	</script>
1148		1144
1149	<style scoped>	1145	<style scoped>
1150	@import "fullcalendar/dist/fullcalendar.css";	1146	@import "fullcalendar/dist/fullcalendar.css";
1151		1147
1152	a {	1148	a {
1153	color: white;	1149	color: white;
1154	}	1150	}
1155	</style>	1151	</style>

src/pages/meetingEvent/meetingEvent.vue

Diff comments View file @b0f5f66

1	<template>	1	<template>
2	<v-container fluid class="body-color">	2	<v-container fluid class="body-color">
3	<!-- **** EDITS EVENT **** -->	3	<!-- **** EDITS EVENT **** -->
4	<v-dialog v-model="editEventdialog" max-width="500px">	4	<v-dialog v-model="editEventdialog" max-width="500px">
5	<v-card flat class="card-style pa-2" dark>	5	<v-card flat class="card-style pa-2" dark>
6	<v-layout>	6	<v-layout>
7	<v-flex xs12>	7	<v-flex xs12>
8	<label class="title text-xs-center">Edit Meeting Event</label>	8	<label class="title text-xs-center">Edit Meeting Event</label>
9	<v-icon size="24" class="right" @click="editEventdialog = false">cancel</v-icon>	9	<v-icon size="24" class="right" @click="editEventdialog = false">cancel</v-icon>
10	</v-flex>	10	</v-flex>
11	</v-layout>	11	</v-layout>
12	<v-container fluid>	12	<v-container fluid>
13	<v-flex xs12 sm12>	13	<v-flex xs12 sm12>
14	<v-layout>	14	<v-layout>
15	<v-flex xs4 class="pt-4 subheading">	15	<v-flex xs4 class="pt-4 subheading">
16	<label class="right">Title:</label>	16	<label class="right">Title:</label>
17	</v-flex>	17	</v-flex>
18	<v-flex xs7 class="ml-3">	18	<v-flex xs7 class="ml-3">
19	<v-text-field v-model="editedItem.title" type="text"></v-text-field>	19	<v-text-field v-model="editedItem.title" type="text"></v-text-field>
20	</v-flex>	20	</v-flex>
21	</v-layout>	21	</v-layout>
22	</v-flex>	22	</v-flex>
23	<v-flex xs12 sm12>	23	<v-flex xs12 sm12>
24	<v-layout>	24	<v-layout>
25	<v-flex xs4 class="pt-4 subheading">	25	<v-flex xs4 class="pt-4 subheading">
26	<label class="right">Date:</label>	26	<label class="right">Date:</label>
27	</v-flex>	27	</v-flex>
28	<v-flex xs7 class="ml-3">	28	<v-flex xs7 class="ml-3">
29	<v-menu	29	<v-menu
30	ref="menu"	30	ref="menu"
31	:close-on-content-click="false"	31	:close-on-content-click="false"
32	v-model="menuEditDate"	32	v-model="menuEditDate"
33	:nudge-right="40"	33	:nudge-right="40"
34	lazy	34	lazy
35	transition="scale-transition"	35	transition="scale-transition"
36	offset-y	36	offset-y
37	full-width	37	full-width
38	min-width="290px"	38	min-width="290px"
39	>	39	>
40	<v-text-field	40	<v-text-field
41	slot="activator"	41	slot="activator"
42	v-model="editedItem.dateOfEvent"	42	v-model="editedItem.dateOfEvent"
43	placeholder="Select date"	43	placeholder="Select date"
44	></v-text-field>	44	></v-text-field>
45	<v-date-picker	45	<v-date-picker
46	color="info"	46	color="info"
47	ref="picker"	47	ref="picker"
48	v-model="editedItem.dateOfEvent"	48	v-model="editedItem.dateOfEvent"
49	@input="$refs.menu.save(editedItem.dateOfEvent)"	49	@input="$refs.menu.save(editedItem.dateOfEvent)"
50	></v-date-picker>	50	></v-date-picker>
51	</v-menu>	51	</v-menu>
52	</v-flex>	52	</v-flex>
53	</v-layout>	53	</v-layout>
54	</v-flex>	54	</v-flex>
55	<v-flex xs12 sm12>	55	<v-flex xs12 sm12>
56	<v-layout>	56	<v-layout>
57	<v-flex xs4 class="pt-4 subheading">	57	<v-flex xs4 class="pt-4 subheading">
58	<label class="right">Start Time:</label>	58	<label class="right">Start Time:</label>
59	</v-flex>	59	</v-flex>
60	<v-flex xs7 class="ml-3">	60	<v-flex xs7 class="ml-3">
61	<v-menu	61	<v-menu
62	ref="menuEdit"	62	ref="menuEdit"
63	:close-on-content-click="false"	63	:close-on-content-click="false"
64	v-model="menuEditTime"	64	v-model="menuEditTime"
65	:nudge-right="40"	65	:nudge-right="40"
66	:return-value.sync="editedItem.startTime"	66	:return-value.sync="editedItem.startTime"
67	lazy	67	lazy
68	transition="scale-transition"	68	transition="scale-transition"
69	offset-y	69	offset-y
70	full-width	70	full-width
71	max-width="290px"	71	max-width="290px"
72	min-width="290px"	72	min-width="290px"
73	>	73	>
74	<v-text-field	74	<v-text-field
75	slot="activator"	75	slot="activator"
76	v-model="editedItem.startTime"	76	v-model="editedItem.startTime"
77	append-icon="access_time"	77	append-icon="access_time"
78	readonly	78	readonly
79	></v-text-field>	79	></v-text-field>
80	<v-time-picker	80	<v-time-picker
81	v-model="editedItem.startTime"	81	v-model="editedItem.startTime"
82	format="24hr"	82	format="24hr"
83	@change="$refs.menuEdit.save(editedItem.startTime)"	83	@change="$refs.menuEdit.save(editedItem.startTime)"
84	></v-time-picker>	84	></v-time-picker>
85	</v-menu>	85	</v-menu>
86	</v-flex>	86	</v-flex>
87	</v-layout>	87	</v-layout>
88	</v-flex>	88	</v-flex>
89	<v-flex xs12 sm12>	89	<v-flex xs12 sm12>
90	<v-layout>	90	<v-layout>
91	<v-flex xs4 class="pt-4 subheading">	91	<v-flex xs4 class="pt-4 subheading">
92	<label class="right">Duration:</label>	92	<label class="right">Duration:</label>
93	</v-flex>	93	</v-flex>
94	<v-flex xs7 class="ml-3">	94	<v-flex xs7 class="ml-3">
95	<v-text-field v-model="editedItem.duration" type="text"></v-text-field>	95	<v-text-field v-model="editedItem.duration" type="text"></v-text-field>
96	</v-flex>	96	</v-flex>
97	</v-layout>	97	</v-layout>
98	</v-flex>	98	</v-flex>
99	<v-layout>	99	<v-layout>
100	<v-flex xs12>	100	<v-flex xs12>
101	<v-card-actions class="hidden-xs-only hidden-sm-only">	101	<v-card-actions class="hidden-xs-only hidden-sm-only">
102	<v-spacer></v-spacer>	102	<v-spacer></v-spacer>
103	<v-btn round dark @click="save" class="add-button">Save</v-btn>	103	<v-btn round dark @click="save" class="add-button">Save</v-btn>
104	</v-card-actions>	104	</v-card-actions>
105	<v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only">	105	<v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only">
106	<v-spacer></v-spacer>	106	<v-spacer></v-spacer>
107	<v-btn round dark @click="save" class="add-button">Save</v-btn>	107	<v-btn round dark @click="save" class="add-button">Save</v-btn>
108	<v-spacer></v-spacer>	108	<v-spacer></v-spacer>
109	</v-card-actions>	109	</v-card-actions>
110	</v-flex>	110	</v-flex>
111	</v-layout>	111	</v-layout>
112	</v-container>	112	</v-container>
113	</v-card>	113	</v-card>
114	</v-dialog>	114	</v-dialog>
115	<!-- **** PROFILE VIEW EVENT **** -->	115	<!-- **** PROFILE VIEW EVENT **** -->
116	<v-dialog v-model="viewEventdialog" max-width="500px">	116	<v-dialog v-model="viewEventdialog" max-width="500px">
117	<v-card flat class="card-style pa-3" dark>	117	<v-card flat class="card-style pa-3" dark>
118	<v-layout>	118	<v-layout>
119	<v-flex xs12>	119	<v-flex xs12>
120	<label class="title text-xs-center">View Meeting Event</label>	120	<label class="title text-xs-center">View Meeting Event</label>
121	<v-icon size="24" class="right" @click="viewEventdialog = false">cancel</v-icon>	121	<v-icon size="24" class="right" @click="viewEventdialog = false">cancel</v-icon>
122	</v-flex>	122	</v-flex>
123	</v-layout>	123	</v-layout>
124	<v-card-text>	124	<v-card-text>
125	<v-container grid-list-md>	125	<v-container grid-list-md>
126	<v-layout wrap>	126	<v-layout wrap>
127	<v-flex>	127	<v-flex>
128	<v-layout>	128	<v-layout>
129	<v-flex xs4 sm6>	129	<v-flex xs4 sm6>
130	<h5 class="right my-1">	130	<h5 class="right my-1">
131	<b>Title:</b>	131	<b>Title:</b>
132	</h5>	132	</h5>
133	</v-flex>	133	</v-flex>
134	<v-flex sm6 xs8>	134	<v-flex sm6 xs8>
135	<h5 class="my-1">{{ editedItem.title }}</h5>	135	<h5 class="my-1">{{ editedItem.title }}</h5>
136	</v-flex>	136	</v-flex>
137	</v-layout>	137	</v-layout>
138	<v-layout>	138	<v-layout>
139	<v-flex xs4 sm6>	139	<v-flex xs4 sm6>
140	<h5 class="right my-1">	140	<h5 class="right my-1">
141	<b>Date:</b>	141	<b>Date:</b>
142	</h5>	142	</h5>
143	</v-flex>	143	</v-flex>
144	<v-flex sm6 xs8>	144	<v-flex sm6 xs8>
145	<h5 class="my-1">{{ dates(editedItem.dateOfEvent) }}</h5>	145	<h5 class="my-1">{{ dates(editedItem.dateOfEvent) }}</h5>
146	</v-flex>	146	</v-flex>
147	</v-layout>	147	</v-layout>
148	<v-layout>	148	<v-layout>
149	<v-flex xs4 sm6>	149	<v-flex xs4 sm6>
150	<h5 class="right my-1">	150	<h5 class="right my-1">
151	<b>Start Time:</b>	151	<b>Start Time:</b>
152	</h5>	152	</h5>
153	</v-flex>	153	</v-flex>
154	<v-flex sm6 xs8>	154	<v-flex sm6 xs8>
155	<h5 class="my-1">{{ editedItem.startTime }}</h5>	155	<h5 class="my-1">{{ editedItem.startTime }}</h5>
156	</v-flex>	156	</v-flex>
157	</v-layout>	157	</v-layout>
158	<v-layout>	158	<v-layout>
159	<v-flex xs4 sm6>	159	<v-flex xs4 sm6>
160	<h5 class="right my-1">	160	<h5 class="right my-1">
161	<b>Type Of Event:</b>	161	<b>Type Of Event:</b>
162	</h5>	162	</h5>
163	</v-flex>	163	</v-flex>
164	<v-flex sm6 xs8>	164	<v-flex sm6 xs8>
165	<h5 class="my-1">{{ editedItem.typeOfEvent }}</h5>	165	<h5 class="my-1">{{ editedItem.typeOfEvent }}</h5>
166	</v-flex>	166	</v-flex>
167	</v-layout>	167	</v-layout>
		168	<v-layout v-if="editedItem.courseId">
		169	<v-flex xs4 sm6>
		170	<h5 class="right my-1">
		171	<b>Course Name:</b>
		172	</h5>
		173	</v-flex>
		174	<v-flex sm6 xs8>
		175	<h5 class="my-1">{{ editedItem.courseId.courseName }}</h5>
		176	</v-flex>
		177	</v-layout>
168	<v-layout v-if="editedItem.classId">	178	<v-layout v-if="editedItem.classId">
169	<v-flex xs4 sm6>	179	<v-flex xs4 sm6>
170	<h5 class="right my-1">	180	<h5 class="right my-1">
171	<b>Class:</b>	181	<b>Class:</b>
172	</h5>	182	</h5>
173	</v-flex>	183	</v-flex>
174	<v-flex sm6 xs8>	184	<v-flex sm6 xs8>
175	<h5 class="my-1">{{ editedItem.classId.classNum }}</h5>	185	<h5 class="my-1">{{ editedItem.classId.classNum }}</h5>
176	</v-flex>	186	</v-flex>
177	</v-layout>	187	</v-layout>
178	<v-layout>	188	<v-layout>
179	<v-flex xs4 sm6>	189	<v-flex xs4 sm6>
180	<h5 class="right my-1">	190	<h5 class="right my-1">
181	<b>Duration:</b>	191	<b>Duration:</b>
182	</h5>	192	</h5>
183	</v-flex>	193	</v-flex>
184	<v-flex sm6 xs8>	194	<v-flex sm6 xs8>
185	<h5 class="my-1">{{ editedItem.duration }}</h5>	195	<h5 class="my-1">{{ editedItem.duration }}</h5>
186	</v-flex>	196	</v-flex>
187	</v-layout>	197	</v-layout>
188	</v-flex>	198	</v-flex>
189	</v-layout>	199	</v-layout>
190	</v-container>	200	</v-container>
191	</v-card-text>	201	</v-card-text>
192	</v-card>	202	</v-card>
193	</v-dialog>	203	</v-dialog>
194		204
195	<!-- **** EVENT TABLE **** -->	205	<!-- **** EVENT TABLE **** -->
196		206
197	<v-toolbar color="transparent" flat>	207	<v-toolbar color="transparent" flat>
198	<v-btn	208	<v-btn
199	fab	209	fab
200	dark	210	dark
201	class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"	211	class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
202	small	212	small
203	@click="meetEventDialog = true"	213	@click="meetEventDialog = true"
204	>	214	>
205	<v-icon dark>add</v-icon>	215	<v-icon dark>add</v-icon>
206	</v-btn>	216	</v-btn>
207	<v-btn	217	<v-btn
208	round	218	round
209	class="open-dialog-button hidden-sm-only hidden-xs-only"	219	class="open-dialog-button hidden-sm-only hidden-xs-only"
210	dark	220	dark
211	@click="meetEventDialog = true"	221	@click="meetEventDialog = true"
212	>	222	>
213	<v-icon class="white--text pr-1" size="20">add</v-icon>Add Event	223	<v-icon class="white--text pr-1" size="20">add</v-icon>Add Event
214	</v-btn>	224	</v-btn>
215	<v-spacer></v-spacer>	225	<v-spacer></v-spacer>
216	<v-card-title class="body-1" v-show="show">	226	<v-card-title class="body-1" v-show="show">
217	<v-btn icon large flat @click="displaySearch">	227	<v-btn icon large flat @click="displaySearch">
218	<v-avatar size="27">	228	<v-avatar size="27">
219	<img src="/static/icon/search.png" alt="icon" />	229	<img src="/static/icon/search.png" alt="icon" />
220	</v-avatar>	230	</v-avatar>
221	</v-btn>	231	</v-btn>
222	</v-card-title>	232	</v-card-title>
223	<v-flex xs8 sm8 md3 lg2 v-show="showSearch">	233	<v-flex xs8 sm8 md3 lg2 v-show="showSearch">
224	<v-layout>	234	<v-layout>
225	<v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>	235	<v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>
226	<v-icon @click="closeSearch" color="error">close</v-icon>	236	<v-icon @click="closeSearch" color="error">close</v-icon>
227	</v-layout>	237	</v-layout>
228	</v-flex>	238	</v-flex>
229	</v-toolbar>	239	</v-toolbar>
230	<v-data-table :headers="headers" :items="events" :pagination.sync="pagination" :search="search">	240	<v-data-table :headers="headers" :items="events" :pagination.sync="pagination" :search="search">
231	<template slot="items" slot-scope="props">	241	<template slot="items" slot-scope="props">
232	<tr class="tr">	242	<tr class="tr">
233	<td class="td td-row">{{ props.index + 1}}</td>	243	<td class="td td-row">{{ props.index + 1}}</td>
234	<td	244	<td
235	class="td td-row text-xs-center"	245	class="td td-row text-xs-center"
236	>{{ props.item.classId ? props.item.classId.classNum : "-" }}</td>	246	>{{ props.item.classId ? props.item.classId.classNum : "-" }}</td>
237	<td class="td td-row text-xs-center">{{ props.item.title }}</td>	247	<td class="td td-row text-xs-center">{{ props.item.title }}</td>
238	<td class="td td-row text-xs-center">{{ dates(props.item.dateOfEvent) }}</td>	248	<td class="td td-row text-xs-center">{{ dates(props.item.dateOfEvent) }}</td>
239	<td class="td td-row text-xs-center">{{ props.item.startTime }}</td>	249	<td class="td td-row text-xs-center">{{ props.item.startTime }}</td>
240	<td class="td td-row text-xs-center">	250	<td class="td td-row text-xs-center">
241	<span>	251	<span>
242	<v-tooltip top>	252	<v-tooltip top>
243	<img	253	<img
244	slot="activator"	254	slot="activator"
245	style="cursor:pointer; width:25px; height:25px; "	255	style="cursor:pointer; width:25px; height:25px; "
246	class="mr-3"	256	class="mr-3"
247	@click="profile(props.item)"	257	@click="profile(props.item)"
248	src="/static/icon/view.png"	258	src="/static/icon/view.png"
249	/>	259	/>
250	<span>View</span>	260	<span>View</span>
251	</v-tooltip>	261	</v-tooltip>
252	<v-tooltip top>	262	<v-tooltip top>
253	<img	263	<img
254	slot="activator"	264	slot="activator"
255	style="cursor:pointer; width:20px; height:18px; "	265	style="cursor:pointer; width:20px; height:18px; "
256	class="mr-3"	266	class="mr-3"
257	@click="editItem(props.item)"	267	@click="editItem(props.item)"
258	src="/static/icon/edit.png"	268	src="/static/icon/edit.png"
259	/>	269	/>
260	<span>Edit</span>	270	<span>Edit</span>
261	</v-tooltip>	271	</v-tooltip>
262	<v-tooltip top>	272	<v-tooltip top>
263	<img	273	<img
264	slot="activator"	274	slot="activator"
265	style="cursor:pointer; width:20px; height:20px; "	275	style="cursor:pointer; width:20px; height:20px; "
266	class="mr-3"	276	class="mr-3"
267	@click="deleteItem(props.item)"	277	@click="deleteItem(props.item)"
268	src="/static/icon/delete.png"	278	src="/static/icon/delete.png"
269	/>	279	/>
270	<span>Delete</span>	280	<span>Delete</span>
271	</v-tooltip>	281	</v-tooltip>
272	</span>	282	</span>
273	</td>	283	</td>
274	</tr>	284	</tr>
275	</template>	285	</template>
276	<v-alert	286	<v-alert
277	slot="no-results"	287	slot="no-results"
278	:value="true"	288	:value="true"
279	color="error"	289	color="error"
280	icon="warning"	290	icon="warning"
281	>Your search for "{{ search }}" found no results.</v-alert>	291	>Your search for "{{ search }}" found no results.</v-alert>
282	</v-data-table>	292	</v-data-table>
283	<!-- **** ADD MULTIPLE EVENT **** -->	293	<!-- **** ADD MULTIPLE EVENT **** -->
284	<v-dialog v-model="meetEventDialog" max-width="500px" persistent>	294	<v-dialog v-model="meetEventDialog" max-width="500px" persistent>
285	<v-card flat class="card-style pa-2" dark>	295	<v-card flat class="card-style pa-2" dark>
286	<v-layout>	296	<v-layout>
287	<v-flex xs12>	297	<v-flex xs12>
288	<label class="title text-xs-center">Add Meeting Event</label>	298	<label class="title text-xs-center">Add Meeting Event</label>
289	<v-icon size="24" class="right" @click="meetEventDialog = false; $refs.form.reset()">cancel</v-icon>	299	<v-icon size="24" class="right" @click="meetEventDialog = false; $refs.form.reset()">cancel</v-icon>
290	</v-flex>	300	</v-flex>
291	</v-layout>	301	</v-layout>
292	<v-form ref="form" v-model="valid" lazy-validation >	302	<v-form ref="form" v-model="valid" lazy-validation >
293	<v-container fluid>	303	<v-container fluid>
294	<v-flex xs12>	304	<v-flex xs12>
295	<v-layout>	305	<v-layout>
296	<v-flex xs4 class="pt-4 subheading">	306	<v-flex xs4 class="pt-4 subheading">
297	<label class="right">Title:</label>	307	<label class="right">Title:</label>
298	</v-flex>	308	</v-flex>
299	<v-flex xs8 sm8 class="ml-3">	309	<v-flex xs8 sm8 class="ml-3">
300	<v-text-field	310	<v-text-field
301	v-model="meetEvent.title"	311	v-model="meetEvent.title"
302	placeholder="fill your Title"	312	placeholder="fill your Title"
303	type="text"	313	type="text"
304	:rules="titleRules"	314	:rules="titleRules"
305	required	315	required
306	></v-text-field>	316	></v-text-field>
307	</v-flex>	317	</v-flex>
308	</v-layout>	318	</v-layout>
309	</v-flex>	319	</v-flex>
310	<v-flex xs12>	320	<v-flex xs12>
311	<v-layout>	321	<v-layout>
312	<v-flex xs4 class="pt-4 subheading">	322	<v-flex xs4 class="pt-4 subheading">
313	<label class="right">Date:</label>	323	<label class="right">Date:</label>
314	</v-flex>	324	</v-flex>
315	<v-flex xs8 sm8 class="ml-3">	325	<v-flex xs8 sm8 class="ml-3">
316	<v-menu	326	<v-menu
317	ref="menu1"	327	ref="menu1"
318	:close-on-content-click="false"	328	:close-on-content-click="false"
319	v-model="menu1"	329	v-model="menu1"
320	:nudge-right="40"	330	:nudge-right="40"
321	:return-value.sync="meetEvent.dateOfEvent"	331	:return-value.sync="meetEvent.dateOfEvent"
322	app	332	app
323	lazy	333	lazy
324	transition="scale-transition"	334	transition="scale-transition"
325	offset-y	335	offset-y
326	full-width	336	full-width
327	min-width="290px"	337	min-width="290px"
328	>	338	>
329	<v-text-field	339	<v-text-field
330	slot="activator"	340	slot="activator"
331	:rules="dateRules"	341	:rules="dateRules"
332	v-model="meetEvent.dateOfEvent"	342	v-model="meetEvent.dateOfEvent"
333	append-icon="event"	343	append-icon="event"
334	placeholder="Select date"	344	placeholder="Select date"
335	></v-text-field>	345	></v-text-field>
336	<v-date-picker	346	<v-date-picker
337	color="info"	347	color="info"
338	v-model="meetEvent.dateOfEvent"	348	v-model="meetEvent.dateOfEvent"
339	@input="$refs.menu1.save(meetEvent.dateOfEvent)"	349	@input="$refs.menu1.save(meetEvent.dateOfEvent)"
340	></v-date-picker>	350	></v-date-picker>
341	</v-menu>	351	</v-menu>
342	</v-flex>	352	</v-flex>
343	</v-layout>	353	</v-layout>
344	</v-flex>	354	</v-flex>
345	<v-flex xs12>	355	<v-flex xs12>
346	<v-layout>	356	<v-layout>
347	<v-flex xs4 class="pt-4 subheading">	357	<v-flex xs4 class="pt-4 subheading">
348	<label class="right">Start Time:</label>	358	<label class="right">Start Time:</label>
349	</v-flex>	359	</v-flex>
350	<v-flex xs8 sm8 class="ml-3">	360	<v-flex xs8 sm8 class="ml-3">
351	<v-menu	361	<v-menu
352	ref="menuA"	362	ref="menuA"
353	:close-on-content-click="false"	363	:close-on-content-click="false"
354	v-model="menu2"	364	v-model="menu2"
355	:nudge-right="40"	365	:nudge-right="40"
356	:return-value.sync="meetEvent.startTime"	366	:return-value.sync="meetEvent.startTime"
357	lazy	367	lazy
358	transition="scale-transition"	368	transition="scale-transition"
359	offset-y	369	offset-y
360	full-width	370	full-width
361	max-width="290px"	371	max-width="290px"
362	min-width="290px"	372	min-width="290px"
363	>	373	>
364	<v-text-field	374	<v-text-field
365	slot="activator"	375	slot="activator"
366	v-model="meetEvent.startTime"	376	v-model="meetEvent.startTime"
367	placeholder="Select Start time"	377	placeholder="Select Start time"
368	append-icon="access_time"	378	append-icon="access_time"
369	:rules="startTimeRules"	379	:rules="startTimeRules"
370	readonly	380	readonly
371	></v-text-field>	381	></v-text-field>
372	<v-time-picker	382	<v-time-picker
373	v-model="meetEvent.startTime"	383	v-model="meetEvent.startTime"
374	format="24hr"	384	format="24hr"
375	@change="$refs.menuA.save(meetEvent.startTime)"	385	@change="$refs.menuA.save(meetEvent.startTime)"
376	></v-time-picker>	386	></v-time-picker>
377	</v-menu>	387	</v-menu>
378	</v-flex>	388	</v-flex>
379	</v-layout>	389	</v-layout>
380	</v-flex>	390	</v-flex>
381	<v-flex xs12>	391	<v-flex xs12>
382	<v-layout>	392	<v-layout>
383	<v-flex xs4 class="pt-4 subheading">	393	<v-flex xs4 class="pt-4 subheading">
384	<label class="right">Type Of Event:</label>	394	<label class="right">Type Of Event:</label>
385	</v-flex>	395	</v-flex>
386	<v-flex xs8 sm8 class="ml-3">	396	<v-flex xs8 sm8 class="ml-3">
387	<v-select	397	<v-select
388	:items="typeOfEvent"	398	:items="typeOfEvent"
389	label="Select Type Of Event"	399	label="Select Type Of Event"
390	v-model="meetEvent.typeOfEvent"	400	v-model="meetEvent.typeOfEvent"
391	:rules="typeOfEventRules"	401	:rules="typeOfEventRules"
392	@change="getSelectOption(meetEvent.typeOfEvent)"	402
393	></v-select>	403	></v-select>
394	</v-flex>	404	</v-flex>
395	</v-layout>	405	</v-layout>
396	</v-flex>	406	</v-flex>
397	<v-flex xs12 v-show="classShow">	407	<v-flex xs12 v-show="meetEvent.typeOfEvent">
398	<v-layout>	408	<v-layout>
399	<v-flex xs4 class="pt-4 subheading">	409	<v-flex xs4 class="pt-4 subheading">
400	<label class="right">Class:</label>	410	<label class="right">Class:</label>
401	</v-flex>	411	</v-flex>
402	<v-flex xs8 sm8 class="ml-3">	412	<v-flex xs8 sm8 class="ml-3">
403	<v-select	413	<v-select
404	:items="addclass"	414	:items="addclass"
405	label="Select Class"	415	label="Select Class"
406	v-model="meetEvent.classId"	416	v-model="meetEvent.classId"
407	item-text="classNum"	417	item-text="classNum"
408	item-value="_id"	418	item-value="_id"
409	@change="getCourses(meetEvent.classId)"	419	@change="getCourses(meetEvent.classId)"
410	></v-select>	420	></v-select>
411	</v-flex>	421	</v-flex>
412	</v-layout>	422	</v-layout>
413	</v-flex>	423	</v-flex>
414	<v-flex xs12 v-show="courseShow">	424	<v-flex xs12 v-show="meetEvent.typeOfEvent === 'Course'">
415	<v-layout>	425	<v-layout>
416	<v-flex xs4 class="pt-4 subheading">	426	<v-flex xs4 class="pt-4 subheading">
417	<label class="right">Courses:</label>	427	<label class="right">Courses:</label>
418	</v-flex>	428	</v-flex>
419	<v-flex xs8 sm8 class="ml-3">	429	<v-flex xs8 sm8 class="ml-3">
420	<v-select	430	<v-select
421	:items="courseData"	431	:items="courseData"
422	label="Select Course"	432	label="Select Course"
423	v-model="meetEvent.courseId"	433	v-model="meetEvent.courseId"
424	item-text="courseName"	434	item-text="courseName"
425	item-value="_id"	435	item-value="_id"
426	required	436	required
427	></v-select>	437	></v-select>
428	</v-flex>	438	</v-flex>
429	</v-layout>	439	</v-layout>
430	</v-flex>	440	</v-flex>
431	<v-flex xs12>	441	<v-flex xs12>
432	<v-layout>	442	<v-layout>
433	<v-flex xs4 class="pt-4 subheading">	443	<v-flex xs4 class="pt-4 subheading">
434	<label class="right">Duration</label>	444	<label class="right">Duration</label>
435	</v-flex>	445	</v-flex>
436	<v-flex xs8 sm8 class="ml-3">	446	<v-flex xs8 sm8 class="ml-3">
437	<v-text-field	447	<v-text-field
438	placeholder="fill your Description"	448	placeholder="fill your Description"
439	:rules="descriptionRules"	449	:rules="descriptionRules"
440	v-model="meetEvent.duration"	450	v-model="meetEvent.duration"
441	type="text"	451	type="text"
442	required	452	required
443	></v-text-field>	453	></v-text-field>
444	</v-flex>	454	</v-flex>
445	</v-layout>	455	</v-layout>
446	</v-flex>	456	</v-flex>
447	<v-layout>	457	<v-layout>
448	<v-flex xs12>	458	<v-flex xs12>
449	<v-layout class="right">	459	<v-layout class="right">
450	<v-btn @click="clear" round class="clear-button" dark>clear</v-btn>	460	<v-btn @click="clear" round class="clear-button" dark>clear</v-btn>
451	<v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>	461	<v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
452	</v-layout>	462	</v-layout>
453	</v-flex>	463	</v-flex>
454	</v-layout>	464	</v-layout>
455	</v-container>	465	</v-container>
456	</v-form>	466	</v-form>
457	</v-card>	467	</v-card>
458	</v-dialog>	468	</v-dialog>
459	<v-snackbar	469	<v-snackbar
460	:timeout="timeout"	470	:timeout="timeout"
461	:top="y === 'top'"	471	:top="y === 'top'"
462	:right="x === 'right'"	472	:right="x === 'right'"
463	:vertical="mode === 'vertical'"	473	:vertical="mode === 'vertical'"
464	v-model="snackbar"	474	v-model="snackbar"
465	:color="color"	475	:color="color"
466	>{{ text }}</v-snackbar>	476	>{{ text }}</v-snackbar>
467	<div class="loader" v-if="showLoader">	477	<div class="loader" v-if="showLoader">
468	<v-progress-circular indeterminate color="white"></v-progress-circular>	478	<v-progress-circular indeterminate color="white"></v-progress-circular>
469	</div>	479	</div>
470	</v-container>	480	</v-container>
471	</template>	481	</template>
472		482
473	<script>	483	<script>
474	import http from "@/Services/http.js";	484	import http from "@/Services/http.js";
475	import moment from "moment";	485	import moment from "moment";
476		486
477	export default {	487	export default {
478	data: () => ({	488	data: () => ({
479	snackbar: false,	489	snackbar: false,
480	y: "top",	490	y: "top",
481	x: "right",	491	x: "right",
482	mode: "",	492	mode: "",
483	timeout: 5000,	493	timeout: 5000,
484	text: "",	494	text: "",
485	color: "",	495	color: "",
486	loading: false,	496	loading: false,
487	date: null,	497	date: null,
488	search: "",	498	search: "",
489	color: "",	499	color: "",
490	show: true,	500	show: true,
491	meetEventDialog: false,	501	meetEventDialog: false,
492	showSearch: false,	502	showSearch: false,
493	showLoader: false,	503	showLoader: false,
494	editEventdialog: false,	504	editEventdialog: false,
495	viewEventdialog: false,	505	viewEventdialog: false,
496	valid: true,	506	valid: true,
497	addclass: [],	507	addclass: [],
498	courseData: [],	508	courseData: [],
499	pagination: {	509	pagination: {
500	rowsPerPage: 10	510	rowsPerPage: 10
501	},	511	},
502	date: null,	512	date: null,
503	menu1: false,	513	menu1: false,
504	menu: false,	514	menu: false,
505	menuEditTime: false,	515	menuEditTime: false,
506	menuEditDate: false,	516	menuEditDate: false,
507	titleRules: [v => !!v \|\| " Tilte is required"],	517	titleRules: [v => !!v \|\| " Tilte is required"],
508	descriptionRules: [v => !!v \|\| " Discription is required"],	518	descriptionRules: [v => !!v \|\| " Discription is required"],
509	dateRules: [v => !!v \|\| "Date of event is required"],	519	dateRules: [v => !!v \|\| "Date of event is required"],
510	startTimeRules: [v => !!v \|\| "Start Time is required"],	520	startTimeRules: [v => !!v \|\| "Start Time is required"],
511	typeOfEventRules: [v => !!v \|\| "Type of event is required"],	521	typeOfEventRules: [v => !!v \|\| "Type of event is required"],
512	headers: [	522	headers: [
513	{	523	{
514	text: "No",	524	text: "No",
515	align: "",	525	align: "",
516	sortable: false,	526	sortable: false,
517	value: "No"	527	value: "No"
518	},	528	},
519	{	529	{
520	text: "Class",	530	text: "Class",
521	value: "classNum",	531	value: "classNum",
522	sortable: false,	532	sortable: false,
523	align: "center"	533	align: "center"
524	},	534	},
525	{ text: "Title", value: "title", sortable: false, align: "center" },	535	{ text: "Title", value: "title", sortable: false, align: "center" },
526	{	536	{
527	text: "Date Of Event",	537	text: "Date Of Event",
528	value: "dateOfEvent",	538	value: "dateOfEvent",
529	sortable: false,	539	sortable: false,
530	align: "center"	540	align: "center"
531	},	541	},
532	{	542	{
533	text: "Start Time",	543	text: "Start Time",
534	value: "startTime",	544	value: "startTime",
535	sortable: false,	545	sortable: false,
536	align: "center"	546	align: "center"
537	},	547	},
538	{ text: "Action", value: "", sortable: false, align: "center" }	548	{ text: "Action", value: "", sortable: false, align: "center" }
539	],	549	],
540	events: [],	550	events: [],
541	typeOfEvent: ["Class", "Course"],	551	typeOfEvent: ["Class", "Course"],
542	editedIndex: -1,	552	editedIndex: -1,
543	meetEvent: {	553	meetEvent: {
544	startTime: null	554	startTime: null
545	},	555	},
546	editedItem: {},	556	editedItem: {},
547	menu1: false,	557	menu1: false,
548	menu2: false,	558	menu2: false,
549	classShow: false,
550	courseShow: false,
551	loginId: ""	559	loginId: ""
552	}),	560	}),
553	methods: {	561	methods: {
554	dates: function(date) {	562	dates: function(date) {
555	return moment(date).format("MMMM DD, YYYY");	563	return moment(date).format("MMMM DD, YYYY");
556	},	564	},
557	getEvents() {	565	getEvents() {
558	this.showLoader = true;	566	this.showLoader = true;
559	var token = this.$store.state.token;	567	var token = this.$store.state.token;
560	http()	568	http()
561	.get("/getMeetingEventesList", {	569	.get("/getMeetingEventesList", {
562	params: { teacherId: this.loginId },	570	params: { teacherId: this.loginId },
563	headers: { Authorization: "Bearer " + token }	571	headers: { Authorization: "Bearer " + token }
564	})	572	})
565	.then(response => {	573	.then(response => {
566	this.events = response.data.data;	574	this.events = response.data.data;
567	this.showLoader = false;	575	this.showLoader = false;
568	})	576	})
569	.catch(error => {	577	.catch(error => {
570	// console.log("err====>", err);	578	// console.log("err====>", err);
571	this.showLoader = false;	579	this.showLoader = false;
572	if (error.response.status === 401) {	580	if (error.response.status === 401) {
573	this.$router.replace({ path: "/" });	581	this.$router.replace({ path: "/" });
574	this.$store.dispatch("setToken", null);	582	this.$store.dispatch("setToken", null);
575	this.$store.dispatch("Id", null);	583	this.$store.dispatch("Id", null);
576	}	584	}
577	});	585	});
578	},	586	},
579	editItem(item) {	587	editItem(item) {
580	this.editedIndex = this.events.indexOf(item);	588	this.editedIndex = this.events.indexOf(item);
581	this.editedItem = Object.assign({}, item);	589	this.editedItem = Object.assign({}, item);
582	this.editedItem.meetingEventId = item._id;	590	this.editedItem.meetingEventId = item._id;
583	this.editedItem.startTime = moment(this.editedItem.startTime, ["h:mm A"]).format("HH:mm");	591	this.editedItem.startTime = moment(this.editedItem.startTime, ["h:mm A"]).format("HH:mm");
584	this.editEventdialog = true;	592	this.editEventdialog = true;
585	},	593	},
586	profile(item) {	594	profile(item) {
587	this.editedIndex = this.events.indexOf(item);	595	this.editedIndex = this.events.indexOf(item);
588	this.editedItem = Object.assign({}, item);	596	this.editedItem = Object.assign({}, item);
589	this.viewEventdialog = true;	597	this.viewEventdialog = true;
590	},	598	},
591		599
592	deleteItem(item) {	600	deleteItem(item) {
593	let deleteEvent = {	601	let deleteEvent = {
594	meetingEventId: item._id	602	meetingEventId: item._id
595	};	603	};
596	http()	604	http()
597	.delete(	605	.delete(
598	"/deleteMeetingEvent",	606	"/deleteMeetingEvent",
599	confirm("Are you sure you want to delete this?") && {	607	confirm("Are you sure you want to delete this?") && {
600	params: deleteEvent	608	params: deleteEvent
601	}	609	}
602	)	610	)
603	.then(response => {	611	.then(response => {
604	this.snackbar = true;	612	this.snackbar = true;
605	this.text = response.data.message;	613	this.text = response.data.message;
606	this.getEvents();	614	this.getEvents();
607	this.snackbar = true;	615	this.snackbar = true;
608	this.color = "green";	616	this.color = "green";
609	this.text = response.data.message;	617	this.text = response.data.message;
610	})	618	})
611	.catch(error => {	619	.catch(error => {
612	this.snackbar = true;	620	this.snackbar = true;
613	this.text = error.response.data.message;	621	this.text = error.response.data.message;
614	this.color = "error";	622	this.color = "error";
615	this.loading = false;	623	this.loading = false;
616	});	624	});
617	},	625	},
618	getSelectOption(type) {
619	this.classShow = true;
620	this.courseShow = true;
621	},
622	getAllClass() {	626	getAllClass() {
623	http()	627	http()
624	.get("/getClassesList")	628	.get("/getClassesList")
625	.then(response => {	629	.then(response => {
626	this.addclass = response.data.data;	630	this.addclass = response.data.data;
627	})	631	})
628	.catch(error => {	632	.catch(error => {
629	// console.log("err====>", err);	633	// console.log("err====>", err);
630	// this.$router.replace({ path: "/" });	634	// this.$router.replace({ path: "/" });
631	});	635	});
632	},	636	},
633	getCourses(classId) {	637	getCourses(classId) {
634	this.showLoader = true;	638	this.showLoader = true;
635	http()	639	http()
636	.get("/getCourseesList", {	640	.get("/getCourseesList", {
637	params: {	641	params: {
638	classId: classId	642	classId: classId
639	}	643	}
640	})	644	})
641	.then(response => {	645	.then(response => {
642	this.courseData = response.data.data;	646	this.courseData = response.data.data;
643	this.showLoader = false;	647	this.showLoader = false;
644	})	648	})
645	.catch(err => {	649	.catch(err => {
646	console.log("err====>", err);	650	console.log("err====>", err);
647	this.showLoader = false;	651	this.showLoader = false;
648	});	652	});
649	},	653	},
650	close() {	654	close() {
651	this.editEventdialog = false;	655	this.editEventdialog = false;
652	},	656	},
653	submit() {	657	submit() {
654	if (this.$refs.form.validate()) {	658	if (this.$refs.form.validate()) {
655	this.loading = true;	659	this.loading = true;
656	this.meetEvent.startTime = moment(this.meetEvent.startTime, "hh:mm").format("LT");	660	this.meetEvent.startTime = moment(this.meetEvent.startTime, "hh:mm").format("LT");
657	http()	661	http()
658	.post("/createMeetingEvent", this.meetEvent)	662	.post("/createMeetingEvent", this.meetEvent)
659	.then(response => {	663	.then(response => {
660	this.snackbar = true;	664	this.snackbar = true;
661	this.text = response.data.message;	665	this.text = response.data.message;
662	this.color = "green";	666	this.color = "green";
663	this.getEvents();	667	this.getEvents();
664	this.clear();	668	this.clear();
665	this.loading = false;	669	this.loading = false;
666	this.meetEventDialog = false;	670	this.meetEventDialog = false;
667	})	671	})
668	.catch(error => {	672	.catch(error => {
669	this.snackbar = true;	673	this.snackbar = true;
670	this.text = error.response.data.message;	674	this.text = error.response.data.message;
671	this.color = "error";	675	this.color = "error";
672	this.loading = false;	676	this.loading = false;
673	});	677	});
674	}	678	}
675	},	679	},
676	clear() {	680	clear() {
677	this.$refs.form.reset();	681	this.$refs.form.reset();
678	},	682	},
679	save() {	683	save() {
680	delete this.editedItem.classId;	684	delete this.editedItem.classId;
681	this.editedItem.courseId = this.editedItem.courseId._id;	685	this.editedItem.courseId = this.editedItem.courseId._id;
682	this.editedItem.startTime = moment(this.editedItem.startTime, "hh:mm").format("LT");	686	this.editedItem.startTime = moment(this.editedItem.startTime, "hh:mm").format("LT");
683	http()	687	http()
684	.put("/updateMeetingEvent", this.editedItem)	688	.put("/updateMeetingEvent", this.editedItem)
685	.then(response => {	689	.then(response => {
686	this.snackbar = true;	690	this.snackbar = true;
687	this.text = response.data.message;	691	this.text = response.data.message;
688	this.color = "green";	692	this.color = "green";
689	this.getEvents();	693	this.getEvents();
690	this.close();	694	this.close();
691	})	695	})
692	.catch(error => {	696	.catch(error => {
693	this.snackbar = true;	697	this.snackbar = true;
694	this.text = error.response.data.message;	698	this.text = error.response.data.message;
695	this.color = "error";	699	this.color = "error";
696	});	700	});
697	},	701	},
698	displaySearch() {	702	displaySearch() {
699	(this.show = false), (this.showSearch = true);	703	(this.show = false), (this.showSearch = true);
700	},	704	},
701	closeSearch() {	705	closeSearch() {
702	this.showSearch = false;	706	this.showSearch = false;
703	this.show = true;	707	this.show = true;
704	this.search = "";	708	this.search = "";
705	}	709	}
706	},	710	},
707	mounted() {	711	mounted() {