viithiisys / School-Management-dashboard

Browse Code »

Commit 0a52566000dfa5c12fc7984880eaa33dd73665f1

Authored by Amber Dev 2020-07-11 08:43:54 -0400

1 parent 47a8dcd387

Exists in master and in 2 other branches

added events

Showing 13 changed files with 166 additions and 69 deletions Show diff stats

src/Services/ApiCalls.js

Diff comments View file @0a52566

1	import http from "@/Services/http.js";	1	import http from "@/Services/http.js";
2	import Rules from "@/pages/Common/rules.js"	2	import Rules from "@/pages/Common/rules.js"
3	export default {	3	export default {
4	mixins: [Rules],	4	mixins: [Rules],
5	data() {	5	data() {
6	return {	6	return {
7		7
8	// LOADER	8	// LOADER
9	showLoader: false,	9	showLoader: false,
10	loading: false,	10	loading: false,
11	// SNACKBAR	11	// SNACKBAR
12	snackbar: false,	12	snackbar: false,
13	snackbarColor: '',	13	snackbarColor: '',
14	text: '',	14	text: '',
15	timeout: 4000,	15	timeout: 4000,
16	y: "top",	16	y: "top",
17	x: "right",	17	x: "right",
18	mode: "",	18	mode: "",
19		19
20	// PAGINATION	20	// PAGINATION
21	size: 10,	21	size: 10,
22	elements: "",	22	elements: "",
23	pageCount: "",	23	pageCount: "",
24	pageNumber: 0	24	pageNumber: 0
25		25
26	}	26	}
27	},	27	},
28	methods: {	28	methods: {
29	// SNACKBAR	29	// SNACKBAR
30	seeSnackbar(message, color) {	30	seeSnackbar(message, color) {
31	this.text = message;	31	this.text = message;
32	this.showLoader = false;	32	this.showLoader = false;
33	this.snackbarColor = color;	33	this.snackbarColor = color;
34	this.snackbar = true;	34	this.snackbar = true;
35	},	35	},
36		36
37	// SET PAGINATION	37	// SET PAGINATION
38	setPagination(response) {	38	setPagination(response) {
39	this.elements = response.data.totalElements;	39	this.elements = response.data.totalElements;
40	var l = this.elements;	40	var l = this.elements;
41	var s = this.size;	41	var s = this.size;
42	var floor = (l / s);	42	var floor = (l / s);
43	this.pageCount = Math.floor(floor);	43	this.pageCount = Math.floor(floor);
44	if (this.pageCount == floor) {	44	if (this.pageCount == floor) {
45	this.pageCount -= 1	45	this.pageCount -= 1
46	}	46	}
47	this.showLoader = false;	47	this.showLoader = false;
48	this.loading = false;	48	this.loading = false;
49	},	49	},
50		50
51	generateError(error) {	51	generateError(error) {
52	var customError	52	var customError
53	const errorNo = error.response.status	53	const errorNo = error.response.status
54	// console.log("satus code errorNo", errorNo)	54	// console.log("satus code errorNo", errorNo)
55	switch (errorNo) {	55	switch (errorNo) {
56	case 400:	56	case 400:
57	let er = error	57	let er = error
58	if (er.response.data.error) {	58	if (er.response.data.error) {
59	customError = error.response.data.error	59	customError = error.response.data.error
60	}	60	}
61	if (er.response.data.errorMessage) {	61	if (er.response.data.errorMessage) {
62	customError = error.response.data.errorMessage	62	customError = error.response.data.errorMessage
63	}	63	}
64	if (er.response.data.message) {	64	if (er.response.data.message) {
65	customError = error.response.data.message	65	customError = error.response.data.message
66	}	66	}
67	return customError	67	return customError
68	break;	68	break;
69	case 401:	69	case 401:
70	customError = "Session expired"	70	customError = "Session expired"
71	return customError	71	return customError
72	break;	72	break;
73	case 404:	73	case 404:
74	customError = error.response.data.errorMessage	74	customError = error.response.data.errorMessage
75	return customError	75	return customError
76	break;	76	break;
77	case 409:	77	case 409:
78	customError = error.response.data.errorMessage	78	customError = error.response.data.errorMessage
79	return customError	79	return customError
80	break;	80	break;
81	case 500:	81	case 500:
82	customError = error.response.data.message	82	customError = error.response.data.message
83	return customError	83	return customError
84	break;	84	break;
85	default:	85	default:
86	customError = "unknown error"	86	customError = "unknown error"
87	return customError	87	return customError
88	}	88	}
89		89
90	},	90	},
91		91
92	// GET	92	// GET
93	getMethod(url, params) {	93	getMethod(url, params) {
94	this.showLoader = true	94	this.showLoader = true
95	return http()	95	return http()
96	.get(url, {	96	.get(url, {
97	params: params,	97	params: params,
98		98
99	headers: {	99	headers: {
100	// headers: { Authorization: "Bearer " + this.token }	100	// headers: { Authorization: "Bearer " + this.token }
101	}	101	}
102	})	102	})
103	.then(response => {	103	.then(response => {
104	this.showLoader = false	104	this.showLoader = false
105	return response	105	return response
106	})	106	})
107	.catch(error => {	107	.catch(error => {
108	this.showLoader = false	108	this.showLoader = false
109	// console.log("error in getMethod = ", error.response)	109	// console.log("error in getMethod = ", error.response)
110	const message = this.generateError(error)	110	const message = this.generateError(error)
111	if (message == "Session expired") {	111	if (message == "Session expired") {
112	this.$store.dispatch("setToken", null);	112	// this.$store.dispatch("setToken", null);
113	this.$router.push({	113	// this.$router.push({
114	name: 'Login'	114	// name: 'Login'
115	});	115	// });
116	} else {	116	} else {
117	throw new Error(message);	117	throw new Error(message);
118	}	118	}
119		119
120	});	120	});
121	},	121	},
122		122
123	// POST	123	// POST
124	postMethod(url, payload) {	124	postMethod(url, payload) {
125	this.showLoader = true	125	this.showLoader = true
126	return http()	126	return http()
127	.post(url, payload, {	127	.post(url, payload, {
128	// headers: { Authorization: "Bearer " + this.token }	128	// headers: { Authorization: "Bearer " + this.token }
129	})	129	})
130	.then(response => {	130	.then(response => {
131	this.showLoader = false	131	this.showLoader = false
132	return response	132	return response
133	})	133	})
134	.catch(error => {	134	.catch(error => {
135	this.showLoader = false	135	this.showLoader = false
136	console.log("error in postMethod = ", error.response)	136	console.log("error in postMethod = ", error.response)
137	const message = this.generateError(error)	137	const message = this.generateError(error)
138	if (message == "Session expired") {	138	if (message == "Session expired") {
139	this.$store.dispatch("setToken", null);	139	this.$store.dispatch("setToken", null);
140	this.$router.push({	140	this.$router.push({
141	name: 'Login'	141	name: 'Login'
142	});	142	});
143	} else {	143	} else {
144	throw new Error(message);	144	throw new Error(message);
145	}	145	}
146		146
147	});	147	});
148	},	148	},
149		149
150	// PUT	150	// PUT
151	putMethod(url, payload) {	151	putMethod(url, payload) {
152	return http()	152	return http()
153	.put(url, payload, {	153	.put(url, payload, {
154	// headers: {	154	// headers: {
155	// // Authorization: 'Bearer ' + this.token	155	// // Authorization: 'Bearer ' + this.token
156	// }	156	// }
157	})	157	})
158	.then(response => {	158	.then(response => {
159	return response	159	return response
160	})	160	})
161	.catch(error => {	161	.catch(error => {
162	console.log("error in putMethod = ", error.response)	162	console.log("error in putMethod = ", error.response)
163	const message = this.generateError(error)	163	const message = this.generateError(error)
164	if (message == "Session expired") {	164	if (message == "Session expired") {
165	this.$store.dispatch("setToken", null);	165	this.$store.dispatch("setToken", null);
166	this.$router.push({	166	this.$router.push({
167	name: 'Login'	167	name: 'Login'
168	});	168	});
169	} else {	169	} else {
170	throw new Error(message);	170	throw new Error(message);
171	}	171	}
172		172
173	})	173	})
174	}	174	}
175		175
176	},	176	},
177	computed: {	177	computed: {
178	displayedPageNumber() {	178	displayedPageNumber() {
179	return this.pageNumber + 1;	179	return this.pageNumber + 1;
180	},	180	},
181	// managerIsADMIN_VIEW: {	181	// managerIsADMIN_VIEW: {
182	// get() {	182	// get() {
183	// if (this.$store.state.roleName == "ADMIN_VIEW") {	183	// if (this.$store.state.roleName == "ADMIN_VIEW") {
184	// return true;	184	// return true;
185	// } else {	185	// } else {
186	// return false	186	// return false
187	// }	187	// }
188	// },	188	// },
189	// set(newValue) {	189	// set(newValue) {
190	// this.managerIsADMIN_VIEW = newValue;	190	// this.managerIsADMIN_VIEW = newValue;
191	// }	191	// }
192		192
193	// }	193	// }
194	},	194	},
195	}	195	}

src/Services/GetApis.js

Diff comments View file @0a52566

 import ApiCalls from "@/Services/ApiCalls.js";
 export default {
     mixins: [ApiCalls],
     data() {
         return {
             courseData: [],
         }
     },
     methods: {
         /* getParticularCourseDetail */
         async getParticularCourseDetail(courseId) {
             try {
                 let response = await this.getMethod("/getParticularCourseDetail", {
                     courseId: courseId
                 })
                 return response
             } catch (error) {
                 console.log("error in getParticularCourseDetail - ", error.message)
             }
         },
         /* getStudentCourses - to get courseData */
         async getStudentCourses(params) {
             try {
                 let response = await this.getMethod("/getStudentCourses", {
                     classId: params.classId,
                     studentId: params.studentId
                 })
                 this.courseData = response.data.data;
                 console.log("coursesData - ", this.courseData)
             } catch (error) {
                 console.log("error in getStudentCourses - ", error.message)
             }
-        }
+        },
+        /* getCourseDiscussionesList - used in courseDiscussionForum.vue */
+        async getCourseDiscussionesList(params) {
+            try {
+                let response = await this.getMethod("/getCourseDiscussionesList", {
+                    courseId: params.courseId,
+                    classId: params.classId,
+                })
+                this.courseDiscussionItems = response.data.data
+                // return response
+                console.log("response of getCourseDiscussionesList - ", response)
+            } catch (error) {
+                console.log("error in getCourseDiscussionesList - ", error.message)
+            }
+        },
+        /* studentMeetingEvents required in dashboard to display list of latest events */
+        async studentMeetingEvents(params) {
+            try {
+                let response = await this.getMethod("/studentMeetingEvents", {
+                    studentId: params.studentId
+                })
+                console.log("response of studentMeetingEvents - ", response);
+                return response
+            } catch (error) {
+                console.log("error in studentMeetingEvents - ", error.message)
+            }
+        },
     },
 }

src/pages/Annoucement/annoucement.vue

Diff comments View file @0a52566

1	<template>	1	<template>
2	<v-container fluid class="body-color">	2	<v-container fluid class="body-color">
3	<!-- **** EDITS COURSES DETAILS **** -->	3	<!-- **** EDITS COURSES DETAILS **** -->
4	<v-dialog v-model="editStudentDialog" max-width="600px" scrollable>	4	<v-dialog v-model="editStudentDialog" max-width="600px" scrollable>
5	<v-card flat class="card-style pa-2" dark>	5	<v-card flat class="card-style pa-2" dark>
6	<v-layout>	6	<v-layout>
7	<v-flex xs12>	7	<v-flex xs12>
8	<label class="title text-xs-center">Edit Annoucement</label>	8	<label class="title text-xs-center">Edit Annoucement</label>
9	<v-icon size="24" class="right" @click="editStudentDialog = false">cancel</v-icon>	9	<v-icon size="24" class="right" @click="editStudentDialog = false">cancel</v-icon>
10	</v-flex>	10	</v-flex>
11	</v-layout>	11	</v-layout>
12	<v-card-text>	12	<v-card-text>
13	<v-form ref="form">	13	<v-form ref="form">
14	<v-container fluid>	14	<v-container fluid>
15	<v-layout>	15	<v-layout>
16	<v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center">	16	<v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center">
17	<v-avatar size="100px" v-if="!editedItem.attachementUrl && !editImageUrl">	17	<v-avatar size="100px" v-if="!editedItem.attachementUrl && !editImageUrl">
18	<img src="/static/icon/user.png" />	18	<img src="/static/icon/user.png" />
19	</v-avatar>	19	</v-avatar>
20	<img	20	<img
21	:src="editedItem.attachementUrl"	21	:src="editedItem.attachementUrl"
22	v-else-if="editedItem.attachementUrl && !editImageUrl"	22	v-else-if="editedItem.attachementUrl && !editImageUrl"
23	height="150"	23	height="150"
24	style="border-radius:50%; width:150px"	24	style="border-radius:50%; width:150px"
25	/>	25	/>
26	<img	26	<img
27	v-if="editImageUrl"	27	v-if="editImageUrl"
28	:src="editImageUrl"	28	:src="editImageUrl"
29	style="border-radius:50%; width:150px;height:150px"	29	style="border-radius:50%; width:150px;height:150px"
30	/>	30	/>
31	<input	31	<input
32	type="file"	32	type="file"
33	style="display: none"	33	style="display: none"
34	ref="editDataImage"	34	ref="editDataImage"
35	accept="image/*"	35	accept="image/*"
36	@change="onEditFilePicked"	36	@change="onEditFilePicked"
37	/>	37	/>
38	</v-flex>	38	</v-flex>
39	</v-layout>	39	</v-layout>
40	<v-layout wrap>	40	<v-layout wrap>
41	<v-flex xs12 sm12>	41	<v-flex xs12 sm12>
42	<v-layout>	42	<v-layout>
43	<v-flex xs4 sm5 class="pt-4 subheading">	43	<v-flex xs4 sm5 class="pt-4 subheading">
44	<label class="right hidden-xs-only hidden-sm-only">Select Class:</label>	44	<label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
45	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>	45	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
46	</v-flex>	46	</v-flex>
47	<v-flex xs8 sm7 class="ml-3">	47	<v-flex xs8 sm7 class="ml-3">
48	<v-select	48	<v-select
49	:items="addclass"	49	:items="addclass"
50	label="Select Class"	50	label="Select Class"
51	v-model="editedItem.select"	51	v-model="editedItem.select"
52	item-text="classNum"	52	item-text="classNum"
53	item-value="_id"	53	item-value="_id"
54	name="Select Class"	54	name="Select Class"
55	required	55	required
56	></v-select>	56	></v-select>
57	</v-flex>	57	</v-flex>
58	</v-layout>	58	</v-layout>
59	<v-layout>	59	<v-layout>
60	<v-flex xs4 sm5 class="pt-4 subheading">	60	<v-flex xs4 sm5 class="pt-4 subheading">
61	<label class="right hidden-xs-only hidden-sm-only">Course Name:</label>	61	<label class="right hidden-xs-only hidden-sm-only">Course Name:</label>
62	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Course:</label>	62	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Course:</label>
63	</v-flex>	63	</v-flex>
64	<v-flex xs8 sm7 class="ml-3">	64	<v-flex xs8 sm7 class="ml-3">
65	<v-select	65	<v-select
66	:items="courseData"	66	:items="courseData"
67	item-text="coursrName"	67	item-text="courseName"
68	item-value="_id"	68	item-value="_id"
69	v-model="editedItem.coursrName"	69	v-model="editedItem.courseName"
70	placeholder="fill your Course name"	70	placeholder="fill your Course name"
71	type="text"	71	type="text"
72	:rules="courseRules"	72	:rules="courseRules"
73	required	73	required
74	></v-select>	74	></v-select>
75	</v-flex>	75	</v-flex>
76	</v-layout>	76	</v-layout>
77	<v-layout>	77	<v-layout>
78	<v-flex xs4 sm5 class="pt-4 subheading">	78	<v-flex xs4 sm5 class="pt-4 subheading">
79	<label class="right hidden-xs-only hidden-sm-only">Discussion Type:</label>	79	<label class="right hidden-xs-only hidden-sm-only">Discussion Type:</label>
80	<label	80	<label
81	class="right hidden-lg-only hidden-md-only hidden-xl-only"	81	class="right hidden-lg-only hidden-md-only hidden-xl-only"
82	>DiscussionType:</label>	82	>DiscussionType:</label>
83	</v-flex>	83	</v-flex>
84	<v-flex xs8 sm7 class="ml-3">	84	<v-flex xs8 sm7 class="ml-3">
85	<v-text-field	85	<v-text-field
86	v-model="editedItem.discussionType"	86	v-model="editedItem.discussionType"
87	placeholder="fill your Course Name"	87	placeholder="fill your Course Name"
88	type="text"	88	type="text"
89	required	89	required
90	></v-text-field>	90	></v-text-field>
91	</v-flex>	91	</v-flex>
92	</v-layout>	92	</v-layout>
93	<v-layout>	93	<v-layout>
94	<v-flex xs4 sm5 class="pt-4 subheading">	94	<v-flex xs4 sm5 class="pt-4 subheading">
95	<label class="right hidden-xs-only hidden-sm-only">Upload Image:</label>	95	<label class="right hidden-xs-only hidden-sm-only">Upload Image:</label>
96	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload:</label>	96	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload:</label>
97	</v-flex>	97	</v-flex>
98	<v-flex xs8 sm7 class="ml-3">	98	<v-flex xs8 sm7 class="ml-3">
99	<v-text-field	99	<v-text-field
100	label="Select Image"	100	label="Select Image"
101	@click="pickEditFile"	101	@click="pickEditFile"
102	v-model="editImageName"	102	v-model="editImageName"
103	append-icon="attach_file"	103	append-icon="attach_file"
104	></v-text-field>	104	></v-text-field>
105	</v-flex>	105	</v-flex>
106	</v-layout>	106	</v-layout>
107	</v-flex>	107	</v-flex>
108	</v-layout>	108	</v-layout>
109	<v-layout>	109	<v-layout>
110	<v-flex xs12 sm12 class="px-0 mx-0">	110	<v-flex xs12 sm12 class="px-0 mx-0">
111	<v-layout class="right">	111	<v-layout class="right">
112	<v-btn @click="save" round dark :loading="editLoading" class="add-button">Save</v-btn>	112	<v-btn @click="save" round dark :loading="editLoading" class="add-button">Save</v-btn>
113	</v-layout>	113	</v-layout>
114	</v-flex>	114	</v-flex>
115	</v-layout>	115	</v-layout>
116	</v-container>	116	</v-container>
117	</v-form>	117	</v-form>
118	</v-card-text>	118	</v-card-text>
119	</v-card>	119	</v-card>
120	</v-dialog>	120	</v-dialog>
121		121
122	<!-- **** PROFILE VIEW STUDENTS DEATILS **** -->	122	<!-- **** PROFILE VIEW STUDENTS DEATILS **** -->
123		123
124	<v-dialog v-model="profileStudentDialog" max-width="600px" scrollable>	124	<v-dialog v-model="profileStudentDialog" max-width="600px" scrollable>
125	<v-card flat class="card-style pa-3" dark>	125	<v-card flat class="card-style pa-3" dark>
126	<v-layout>	126	<v-layout>
127	<v-flex xs12>	127	<v-flex xs12>
128	<label class="title text-xs-center">View Annoucement</label>	128	<label class="title text-xs-center">View Annoucement</label>
129	<v-icon size="24" class="right" @click="profileStudentDialog = false">cancel</v-icon>	129	<v-icon size="24" class="right" @click="profileStudentDialog = false">cancel</v-icon>
130	</v-flex>	130	</v-flex>
131	</v-layout>	131	</v-layout>
132	<v-card-text>	132	<v-card-text>
133	<v-flex align-center justify-center layout text-xs-center class="mt-3">	133	<v-flex align-center justify-center layout text-xs-center class="mt-3">
134	<v-avatar size="100px">	134	<v-avatar size="100px">
135	<img src="/static/icon/user.png" v-if="!editedItem.attachementUrl" />	135	<img src="/static/icon/user.png" v-if="!editedItem.attachementUrl" />
136	<img :src="editedItem.attachementUrl" v-else-if="editedItem.attachementUrl" />	136	<img :src="editedItem.attachementUrl" v-else-if="editedItem.attachementUrl" />
137	</v-avatar>	137	</v-avatar>
138	</v-flex>	138	</v-flex>
139	<v-container grid-list-md>	139	<v-container grid-list-md>
140	<v-layout wrap>	140	<v-layout wrap>
141	<v-flex xs12>	141	<v-flex xs12>
142	<v-layout>	142	<v-layout>
143	<v-flex xs6 sm6>	143	<v-flex xs6 sm6>
144	<h5 class="right my-1">	144	<h5 class="right my-1">
145	<b>Discussion Type :</b>	145	<b>Discussion Type :</b>
146	</h5>	146	</h5>
147	</v-flex>	147	</v-flex>
148	<v-flex sm6 xs6>	148	<v-flex sm6 xs6>
149	<h5 class="my-1 left">{{ editedItem.discussionType }}</h5>	149	<h5 class="my-1 left">{{ editedItem.discussionType }}</h5>
150	</v-flex>	150	</v-flex>
151	</v-layout>	151	</v-layout>
152	</v-flex>	152	</v-flex>
153	</v-layout>	153	</v-layout>
154	</v-container>	154	</v-container>
155	</v-card-text>	155	</v-card-text>
156	</v-card>	156	</v-card>
157	</v-dialog>	157	</v-dialog>
158		158
159	<!-- **** Annoucement TABLE **** -->	159	<!-- **** Annoucement TABLE **** -->
160	<v-toolbar color="transparent" flat>	160	<v-toolbar color="transparent" flat>
161	<v-btn	161	<v-btn
162	fab	162	fab
163	dark	163	dark
164	class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"	164	class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
165	small	165	small
166	@click="addAnnoucementDialog = true"	166	@click="addAnnoucementDialog = true"
167	>	167	>
168	<v-icon dark>add</v-icon>	168	<v-icon dark>add</v-icon>
169	</v-btn>	169	</v-btn>
170	<v-btn	170	<v-btn
171	round	171	round
172	class="open-dialog-button hidden-sm-only hidden-xs-only"	172	class="open-dialog-button hidden-sm-only hidden-xs-only"
173	dark	173	dark
174	@click="addAnnoucementDialog = true"	174	@click="addAnnoucementDialog = true"
175	>	175	>
176	<v-icon class="white--text pr-1" size="20">add</v-icon>Add Annoucement	176	<v-icon class="white--text pr-1" size="20">add</v-icon>Add Annoucement
177	</v-btn>	177	</v-btn>
178	<v-card-actions class="hidden-xs-only hidden-sm-only">	178	<v-card-actions class="hidden-xs-only hidden-sm-only">
179	<v-flex md13 lg12>	179	<v-flex md13 lg12>
180	<v-layout>	180	<v-layout>
181	<v-flex lg6 md12>	181	<v-flex lg6 md12>
182	<v-layout>	182	<v-layout>
183	<v-select	183	<v-select
184	:items="addclass"	184	:items="addclass"
185	label="Select Class"	185	label="Select Class"
186	v-model="selectAnnoucement.classId"	186	v-model="selectAnnoucement.classId"
187	item-text="classNum"	187	item-text="classNum"
188	item-value="_id"	188	item-value="_id"
189	name="Select Class"	189	name="Select Class"
190	:rules="classRules"	190	:rules="classRules"
191	required	191	required
192	class="ml-2"	192	class="ml-2"
193	@change="getCourses(selectAnnoucement.classId)"	193	@change="getCourses(selectAnnoucement.classId)"
194	></v-select>	194	></v-select>
195	<v-select	195	<v-select
196	:items="courseData"	196	:items="courseData"
197	label="Select Course"	197	label="Select Course"
198	v-model="selectAnnoucement.courseId"	198	v-model="selectAnnoucement.courseId"
199	item-text="coursrName"	199	item-text="courseName"
200	item-value="_id"	200	item-value="_id"
201	:rules="courseRules"	201	:rules="courseRules"
202	required	202	required
203	class="ml-4"	203	class="ml-4"
204	></v-select>	204	></v-select>
205	</v-layout>	205	</v-layout>
206	</v-flex>	206	</v-flex>
207	</v-layout>	207	</v-layout>
208	</v-flex>	208	</v-flex>
209	</v-card-actions>	209	</v-card-actions>
210	<v-spacer></v-spacer>	210	<v-spacer></v-spacer>
211	<v-btn	211	<v-btn
212	@click="getAnnoucementes()"	212	@click="getAnnoucementes()"
213	round	213	round
214	dark	214	dark
215	:loading="loading"	215	:loading="loading"
216	class="add-button hidden-xs-only hidden-sm-only"	216	class="add-button hidden-xs-only hidden-sm-only"
217	>Find</v-btn>	217	>Find</v-btn>
218	<v-card-title class="body-1" v-show="show">	218	<v-card-title class="body-1" v-show="show">
219	<v-btn icon large flat @click="displaySearch">	219	<v-btn icon large flat @click="displaySearch">
220	<v-avatar size="27">	220	<v-avatar size="27">
221	<img src="/static/icon/search.png" alt="icon" />	221	<img src="/static/icon/search.png" alt="icon" />
222	</v-avatar>	222	</v-avatar>
223	</v-btn>	223	</v-btn>
224	</v-card-title>	224	</v-card-title>
225	<v-flex xs8 sm7 lg2 md3 v-show="showSearch">	225	<v-flex xs8 sm7 lg2 md3 v-show="showSearch">
226	<v-layout>	226	<v-layout>
227	<v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>	227	<v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>
228	<v-icon @click="closeSearch" color="error">close</v-icon>	228	<v-icon @click="closeSearch" color="error">close</v-icon>
229	</v-layout>	229	</v-layout>
230	</v-flex>	230	</v-flex>
231	</v-toolbar>	231	</v-toolbar>
232	<v-card flat class="elevation-0 transparent">	232	<v-card flat class="elevation-0 transparent">
233	<v-flex class="hidden-xl-only hidden-lg-only hidden-md-only">	233	<v-flex class="hidden-xl-only hidden-lg-only hidden-md-only">
234	<v-layout>	234	<v-layout>
235	<v-flex xs12>	235	<v-flex xs12>
236	<v-select	236	<v-select
237	:items="addclass"	237	:items="addclass"
238	label="Select Class"	238	label="Select Class"
239	v-model="selectAnnoucement.select"	239	v-model="selectAnnoucement.select"
240	item-text="classNum"	240	item-text="classNum"
241	item-value="_id"	241	item-value="_id"
242	name="Select Class"	242	name="Select Class"
243	:rules="classRules"	243	:rules="classRules"
244	class="px-2"	244	class="px-2"
245	></v-select>	245	></v-select>
246	</v-flex>	246	</v-flex>
247	</v-layout>	247	</v-layout>
248	<v-layout>	248	<v-layout>
249	<v-flex xs5 class="mx-auto mb-2">	249	<v-flex xs5 class="mx-auto mb-2">
250	<v-btn	250	<v-btn
251	@click="getAnnoucementes()"	251	@click="getAnnoucementes()"
252	block	252	block
253	round	253	round
254	dark	254	dark
255	:loading="loading"	255	:loading="loading"
256	class="add-button"	256	class="add-button"
257	>Find</v-btn>	257	>Find</v-btn>
258	</v-flex>	258	</v-flex>
259	</v-layout>	259	</v-layout>
260	</v-flex>	260	</v-flex>
261	</v-card>	261	</v-card>
262	<v-data-table	262	<v-data-table
263	:headers="headers"	263	:headers="headers"
264	:items="annoucementData"	264	:items="annoucementData"
265	:pagination.sync="pagination"	265	:pagination.sync="pagination"
266	:search="search"	266	:search="search"
267	>	267	>
268	<template slot="items" slot-scope="props">	268	<template slot="items" slot-scope="props">
269	<tr class="tr">	269	<tr class="tr">
270	<td class="text-xs-center td td-row">	270	<td class="text-xs-center td td-row">
271	<v-avatar size="40">	271	<v-avatar size="40">
272	<img :src="props.item.attachementUrl" v-if="props.item.attachementUrl" />	272	<img :src="props.item.attachementUrl" v-if="props.item.attachementUrl" />
273	<img src="/static/icon/user.png" v-else-if="!props.item.attachementUrl" />	273	<img src="/static/icon/user.png" v-else-if="!props.item.attachementUrl" />
274	</v-avatar>	274	</v-avatar>
275	</td>	275	</td>
276	<td class="text-xs-center td td-row">{{ props.item.discussionType}}</td>	276	<td class="text-xs-center td td-row">{{ props.item.discussionType}}</td>
277	<td class="text-xs-center td td-row">	277	<td class="text-xs-center td td-row">
278	<span>	278	<span>
279	<v-tooltip top>	279	<v-tooltip top>
280	<img	280	<img
281	slot="activator"	281	slot="activator"
282	style="cursor:pointer; width:25px; height:25px; "	282	style="cursor:pointer; width:25px; height:25px; "
283	class="mr-3"	283	class="mr-3"
284	@click="profile(props.item)"	284	@click="profile(props.item)"
285	src="/static/icon/view.png"	285	src="/static/icon/view.png"
286	/>	286	/>
287	<span>View</span>	287	<span>View</span>
288	</v-tooltip>	288	</v-tooltip>
289	<v-tooltip top>	289	<v-tooltip top>
290	<img	290	<img
291	slot="activator"	291	slot="activator"
292	style="cursor:pointer; width:20px; height:18px; "	292	style="cursor:pointer; width:20px; height:18px; "
293	class="mr-3"	293	class="mr-3"
294	@click="editItem(props.item)"	294	@click="editItem(props.item)"
295	src="/static/icon/edit.png"	295	src="/static/icon/edit.png"
296	/>	296	/>
297	<span>Edit</span>	297	<span>Edit</span>
298	</v-tooltip>	298	</v-tooltip>
299	<v-tooltip top>	299	<v-tooltip top>
300	<img	300	<img
301	slot="activator"	301	slot="activator"
302	style="cursor:pointer; width:20px; height:20px; "	302	style="cursor:pointer; width:20px; height:20px; "
303	class="mr-3"	303	class="mr-3"
304	@click="deleteItem(props.item)"	304	@click="deleteItem(props.item)"
305	src="/static/icon/delete.png"	305	src="/static/icon/delete.png"
306	/>	306	/>
307	<span>Delete</span>	307	<span>Delete</span>
308	</v-tooltip>	308	</v-tooltip>
309	</span>	309	</span>
310	</td>	310	</td>
311	</tr>	311	</tr>
312	</template>	312	</template>
313	<v-alert	313	<v-alert
314	slot="no-results"	314	slot="no-results"
315	:value="true"	315	:value="true"
316	color="error"	316	color="error"
317	icon="warning"	317	icon="warning"
318	>Your search for "{{ search }}" found no results.</v-alert>	318	>Your search for "{{ search }}" found no results.</v-alert>
319	</v-data-table>	319	</v-data-table>
320	<!-- **** Add Annoucement DETAILS****-->	320	<!-- **** Add Annoucement DETAILS****-->
321	<v-dialog v-model="addAnnoucementDialog" max-width="500">	321	<v-dialog v-model="addAnnoucementDialog" max-width="500">
322	<v-card flat class="card-style pa-2" dark>	322	<v-card flat class="card-style pa-2" dark>
323	<v-layout>	323	<v-layout>
324	<v-flex xs12>	324	<v-flex xs12>
325	<label class="title text-xs-center">Add Annoucement</label>	325	<label class="title text-xs-center">Add Annoucement</label>
326	<v-icon size="24" class="right" @click="addAnnoucementDialog = false">cancel</v-icon>	326	<v-icon size="24" class="right" @click="addAnnoucementDialog = false">cancel</v-icon>
327	</v-flex>	327	</v-flex>
328	</v-layout>	328	</v-layout>
329	<v-container fluid>	329	<v-container fluid>
330	<v-layout align-center>	330	<v-layout align-center>
331	<v-flex xs12>	331	<v-flex xs12>
332	<v-flex xs12 sm12>	332	<v-flex xs12 sm12>
333	<v-form ref="form" v-model="valid" lazy-validation>	333	<v-form ref="form" v-model="valid" lazy-validation>
334	<v-layout>	334	<v-layout>
335	<v-flex	335	<v-flex
336	xs12	336	xs12
337	class="text-xs-center text-sm-center text-md-center text-lg-center"	337	class="text-xs-center text-sm-center text-md-center text-lg-center"
338	>	338	>
339	<v-avatar size="100px" v-if="!imageUrl">	339	<v-avatar size="100px" v-if="!imageUrl">
340	<img src="/static/icon/user.png" />	340	<img src="/static/icon/user.png" />
341	</v-avatar>	341	</v-avatar>
342	<input	342	<input
343	type="file"	343	type="file"
344	style="display: none"	344	style="display: none"
345	ref="image"	345	ref="image"
346	accept="image/*"	346	accept="image/*"
347	@change="onFilePicked"	347	@change="onFilePicked"
348	/>	348	/>
349	<img	349	<img
350	:src="imageData.imageUrl"	350	:src="imageData.imageUrl"
351	height="150"	351	height="150"
352	width="150"	352	width="150"
353	v-if="imageUrl"	353	v-if="imageUrl"
354	style="border-radius:50%; width:200px"	354	style="border-radius:50%; width:200px"
355	/>	355	/>
356	</v-flex>	356	</v-flex>
357	</v-layout>	357	</v-layout>
358	<v-layout wrap>	358	<v-layout wrap>
359	<v-flex xs12 sm12>	359	<v-flex xs12 sm12>
360	<v-layout>	360	<v-layout>
361	<v-flex x4 sm4 class="pt-4 subheading">	361	<v-flex x4 sm4 class="pt-4 subheading">
362	<label class="right hidden-xs-only hidden-sm-only">Select Class:</label>	362	<label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
363	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>	363	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
364	</v-flex>	364	</v-flex>
365	<v-flex xs8 sm8 class="ml-3">	365	<v-flex xs8 sm8 class="ml-3">
366	<v-select	366	<v-select
367	:items="addclass"	367	:items="addclass"
368	label="Select Class"	368	label="Select Class"
369	v-model="addAnnoucement.select"	369	v-model="addAnnoucement.select"
370	item-text="classNum"	370	item-text="classNum"
371	item-value="_id"	371	item-value="_id"
372	name="Select Class"	372	name="Select Class"
373	:rules="classRules"	373	:rules="classRules"
374	@change="getCourses(addAnnoucement.select)"	374	@change="getCourses(addAnnoucement.select)"
375	required	375	required
376	></v-select>	376	></v-select>
377	</v-flex>	377	</v-flex>
378	</v-layout>	378	</v-layout>
379	</v-flex>	379	</v-flex>
380	</v-layout>	380	</v-layout>
381	<v-layout wrap>	381	<v-layout wrap>
382	<v-flex xs12 sm12>	382	<v-flex xs12 sm12>
383	<v-layout>	383	<v-layout>
384	<v-flex xs4 sm4 class="pt-4 subheading">	384	<v-flex xs4 sm4 class="pt-4 subheading">
385	<label class="right hidden-xs-only hidden-sm-only">Course Name:</label>	385	<label class="right hidden-xs-only hidden-sm-only">Course Name:</label>
386	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Course:</label>	386	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Course:</label>
387	</v-flex>	387	</v-flex>
388	<v-flex xs8 sm8 class="ml-3">	388	<v-flex xs8 sm8 class="ml-3">
389	<v-select	389	<v-select
390	:items="courseData"	390	:items="courseData"
391	item-text="coursrName"	391	item-text="courseName"
392	item-value="_id"	392	item-value="_id"
393	v-model="addAnnoucement.coursrName"	393	v-model="addAnnoucement.courseName"
394	placeholder="fill your Course name"	394	placeholder="fill your Course name"
395	type="text"	395	type="text"
396	:rules="courseRules"	396	:rules="courseRules"
397	required	397	required
398	></v-select>	398	></v-select>
399	</v-flex>	399	</v-flex>
400	</v-layout>	400	</v-layout>
401	</v-flex>	401	</v-flex>
402	<v-flex xs12 sm12>	402	<v-flex xs12 sm12>
403	<v-layout>	403	<v-layout>
404	<v-flex xs4 sm4 class="pt-4 subheading">	404	<v-flex xs4 sm4 class="pt-4 subheading">
405	<label class="right hidden-xs-only hidden-sm-only">Discussion Type:</label>	405	<label class="right hidden-xs-only hidden-sm-only">Discussion Type:</label>
406	<label	406	<label
407	class="right hidden-lg-only hidden-md-only hidden-xl-only"	407	class="right hidden-lg-only hidden-md-only hidden-xl-only"
408	>DiscussionType:</label>	408	>DiscussionType:</label>
409	</v-flex>	409	</v-flex>
410	<v-flex xs8 sm8 class="ml-3">	410	<v-flex xs8 sm8 class="ml-3">
411	<v-text-field	411	<v-text-field
412	v-model="addAnnoucement.discussionType"	412	v-model="addAnnoucement.discussionType"
413	placeholder="fill your Course name"	413	placeholder="fill your Course name"
414	type="text"	414	type="text"
415	:rules="courseRules"	415	:rules="courseRules"
416	required	416	required
417	></v-text-field>	417	></v-text-field>
418	</v-flex>	418	</v-flex>
419	</v-layout>	419	</v-layout>
420	</v-flex>	420	</v-flex>
421	<v-flex xs12 sm12>	421	<v-flex xs12 sm12>
422	<v-layout>	422	<v-layout>
423	<v-flex xs4 class="pt-4 subheading">	423	<v-flex xs4 class="pt-4 subheading">
424	<label class="right hidden-xs-only hidden-sm-only">Upload Image:</label>	424	<label class="right hidden-xs-only hidden-sm-only">Upload Image:</label>
425	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload :</label>	425	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload :</label>
426	</v-flex>	426	</v-flex>
427	<v-flex xs8 class="ml-3">	427	<v-flex xs8 class="ml-3">
428	<v-text-field	428	<v-text-field
429	label="Select Image"	429	label="Select Image"
430	@click="pickFile"	430	@click="pickFile"
431	v-model="imageName"	431	v-model="imageName"
432	append-icon="attach_file"	432	append-icon="attach_file"
433	></v-text-field>	433	></v-text-field>
434	</v-flex>	434	</v-flex>
435	</v-layout>	435	</v-layout>
436	</v-flex>	436	</v-flex>
437	</v-layout>	437	</v-layout>
438	<v-layout>	438	<v-layout>
439	<v-flex xs12 sm12>	439	<v-flex xs12 sm12>
440	<v-layout class="right">	440	<v-layout class="right">
441	<v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>	441	<v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
442	</v-layout>	442	</v-layout>
443	</v-flex>	443	</v-flex>
444	</v-layout>	444	</v-layout>
445	</v-form>	445	</v-form>
446	</v-flex>	446	</v-flex>
447	</v-flex>	447	</v-flex>
448	</v-layout>	448	</v-layout>
449	</v-container>	449	</v-container>
450	</v-card>	450	</v-card>
451	</v-dialog>	451	</v-dialog>
452	<v-snackbar	452	<v-snackbar
453	:timeout="timeout"	453	:timeout="timeout"
454	:top="y === 'top'"	454	:top="y === 'top'"
455	:right="x === 'right'"	455	:right="x === 'right'"
456	:vertical="mode === 'vertical'"	456	:vertical="mode === 'vertical'"
457	v-model="snackbar"	457	v-model="snackbar"
458	:color="color"	458	:color="color"
459	>{{ text }}</v-snackbar>	459	>{{ text }}</v-snackbar>
460	<div class="loader" v-if="showLoader">	460	<div class="loader" v-if="showLoader">
461	<v-progress-circular indeterminate color="white"></v-progress-circular>	461	<v-progress-circular indeterminate color="white"></v-progress-circular>
462	</div>	462	</div>
463	</v-container>	463	</v-container>
464	</template>	464	</template>
465		465
466	<script>	466	<script>
467	import http from "@/Services/http.js";	467	import http from "@/Services/http.js";
468	import moment from "moment";	468	import moment from "moment";
469	import countryList from "@/script/country.js";	469	import countryList from "@/script/country.js";
470	import parent from "@/script/parents.js";	470	import parent from "@/script/parents.js";
471		471
472	export default {	472	export default {
473	data: () => ({	473	data: () => ({
474	showNext: false,	474	showNext: false,
475	snackbar: false,	475	snackbar: false,
476	y: "top",	476	y: "top",
477	x: "right",	477	x: "right",
478	role: "",	478	role: "",
479	mode: "",	479	mode: "",
480	append: "",	480	append: "",
481	timeout: 3000,	481	timeout: 3000,
482	text: "",	482	text: "",
483	show: true,	483	show: true,
484	color: "",	484	color: "",
485	showSearch: false,	485	showSearch: false,
486	showLoader: false,	486	showLoader: false,
487	loading: false,	487	loading: false,
488	editLoading: false,	488	editLoading: false,
489	date: null,	489	date: null,
490	search: "",	490	search: "",
491	menu: false,	491	menu: false,
492	menu1: false,	492	menu1: false,
493	editStudentDialog: false,	493	editStudentDialog: false,
494	profileStudentDialog: false,	494	profileStudentDialog: false,
495	addAnnoucementDialog: false,	495	addAnnoucementDialog: false,
496	valid: true,	496	valid: true,
497	addclass: [],	497	addclass: [],
498	addSection: [],	498	addSection: [],
499	pagination: {	499	pagination: {
500	rowsPerPage: 10	500	rowsPerPage: 10
501	},	501	},
502	imageData: {},	502	imageData: {},
503	imageName: "",	503	imageName: "",
504	imageUrl: "",	504	imageUrl: "",
505	imageFile: "",	505	imageFile: "",
506	editImageName: "",	506	editImageName: "",
507	editImageUrl: "",	507	editImageUrl: "",
508	courseRules: [v => !!v \|\| " Course Name is required"],	508	courseRules: [v => !!v \|\| " Course Name is required"],
509	classRules: [v => !!v \|\| " Class Name is required"],	509	classRules: [v => !!v \|\| " Class Name is required"],
510	sectionRules: [v => !!v \|\| "Section Name is required"],	510	sectionRules: [v => !!v \|\| "Section Name is required"],
511	errorMessages: "",	511	errorMessages: "",
512	headers: [	512	headers: [
513	{	513	{
514	text: "Image",	514	text: "Image",
515	value: "attachementUrl",	515	value: "attachementUrl",
516	sortable: false,	516	sortable: false,
517	align: "center"	517	align: "center"
518	},	518	},
519	{	519	{
520	text: "Discussion Type",	520	text: "Discussion Type",
521	value: "discussionType",	521	value: "discussionType",
522	sortable: false,	522	sortable: false,
523	align: "center"	523	align: "center"
524	},	524	},
525	{ text: "Action", value: "", sortable: false, align: "center" }	525	{ text: "Action", value: "", sortable: false, align: "center" }
526	],	526	],
527	courseData: [],	527	courseData: [],
528	editedIndex: -1,	528	editedIndex: -1,
529	addAnnoucement: {	529	addAnnoucement: {
530	select: ""	530	select: ""
531	},	531	},
532	selectAnnoucement: {},	532	selectAnnoucement: {},
533	editedItem: {},	533	editedItem: {},
534	annoucementData: []	534	annoucementData: []
535	}),	535	}),
536	methods: {	536	methods: {
537	getCourses(selectCourseId) {	537	getCourses(selectCourseId) {
538	this.showLoader = true;	538	this.showLoader = true;
539	http()	539	http()
540	.get("/getCourseesList", {	540	.get("/getCourseesList", {
541	params: {	541	params: {
542	classId: selectCourseId	542	classId: selectCourseId
543	}	543	}
544	})	544	})
545	.then(response => {	545	.then(response => {
546	this.courseData = response.data.data;	546	this.courseData = response.data.data;
547	this.showLoader = false;	547	this.showLoader = false;
548	})	548	})
549	.catch(err => {	549	.catch(err => {
550	console.log("err====>", err);	550	console.log("err====>", err);
551	this.showLoader = false;	551	this.showLoader = false;
552	});	552	});
553	},	553	},
554	getAnnoucementes() {	554	getAnnoucementes() {
555	this.showLoader = true;	555	this.showLoader = true;
556	http()	556	http()
557	.get("/getAnnoucementesList", {	557	.get("/getAnnoucementesList", {
558	params: {	558	params: {
559	courseId: this.selectAnnoucement.courseId	559	courseId: this.selectAnnoucement.courseId
560	}	560	}
561	})	561	})
562	.then(response => {	562	.then(response => {
563	this.annoucementData = response.data.data;	563	this.annoucementData = response.data.data;
564	this.showLoader = false;	564	this.showLoader = false;
565	})	565	})
566	.catch(err => {	566	.catch(err => {
567	console.log("err====>", err);	567	console.log("err====>", err);
568	this.showLoader = false;	568	this.showLoader = false;
569	});	569	});
570	},	570	},
571	// getSections(_id) {	571	// getSections(_id) {
572	// var token = this.$store.state.token;	572	// var token = this.$store.state.token;
573	// this.showLoader = true;	573	// this.showLoader = true;
574	// http()	574	// http()
575	// .get(	575	// .get(
576	// "/getSectionsList",	576	// "/getSectionsList",
577	// { params: { classId: _id } },	577	// { params: { classId: _id } },
578	// {	578	// {
579	// headers: { Authorization: "Bearer " + token }	579	// headers: { Authorization: "Bearer " + token }
580	// }	580	// }
581	// )	581	// )
582	// .then(response => {	582	// .then(response => {
583	// this.addSection = response.data.data;	583	// this.addSection = response.data.data;
584	// this.showLoader = false;	584	// this.showLoader = false;
585	// })	585	// })
586	// .catch(err => {	586	// .catch(err => {
587	// this.showLoader = false;	587	// this.showLoader = false;
588	// });	588	// });
589	// },	589	// },
590	pickFile() {	590	pickFile() {
591	this.$refs.image.click();	591	this.$refs.image.click();
592	},	592	},
593	pickEditFile() {	593	pickEditFile() {
594	this.$refs.editDataImage.click();	594	this.$refs.editDataImage.click();
595	},	595	},
596	dates: function(date) {	596	dates: function(date) {
597	return moment(date).format("MMMM DD, YYYY");	597	return moment(date).format("MMMM DD, YYYY");
598	return date;	598	return date;
599	},	599	},
600	onFilePicked(e) {	600	onFilePicked(e) {
601	// console.log(e)	601	// console.log(e)
602	const files = e.target.files;	602	const files = e.target.files;
603	this.imageData.upload = e.target.files[0];	603	this.imageData.upload = e.target.files[0];
604	if (files[0] !== undefined) {	604	if (files[0] !== undefined) {
605	this.imageName = files[0].name;	605	this.imageName = files[0].name;
606	if (this.imageName.lastIndexOf(".") <= 0) {	606	if (this.imageName.lastIndexOf(".") <= 0) {
607	return;	607	return;
608	}	608	}
609	const fr = new FileReader();	609	const fr = new FileReader();
610	fr.readAsDataURL(files[0]);	610	fr.readAsDataURL(files[0]);
611	fr.addEventListener("load", () => {	611	fr.addEventListener("load", () => {
612	this.imageUrl = fr.result;	612	this.imageUrl = fr.result;
613	this.imageFile = files[0]; // this is an image file that can be sent to server...	613	this.imageFile = files[0]; // this is an image file that can be sent to server...
614	this.imageData.imageUrl = URL.createObjectURL(this.imageFile);	614	this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
615	});	615	});
616	} else {	616	} else {
617	this.imageName = "";	617	this.imageName = "";
618	this.imageFile = "";	618	this.imageFile = "";
619	this.imageUrl = "";	619	this.imageUrl = "";
620	}	620	}
621	},	621	},
622	onEditFilePicked(e) {	622	onEditFilePicked(e) {
623	console.log(e);	623	console.log(e);
624	const files = e.target.files;	624	const files = e.target.files;
625	if (files[0] !== undefined) {	625	if (files[0] !== undefined) {
626	this.editImageName = files[0].name;	626	this.editImageName = files[0].name;
627	console.log("this.editImageName", this.editImageName);	627	console.log("this.editImageName", this.editImageName);
628		628
629	if (this.editImageName.lastIndexOf(".") <= 0) {	629	if (this.editImageName.lastIndexOf(".") <= 0) {
630	return;	630	return;
631	}	631	}
632	const fr = new FileReader();	632	const fr = new FileReader();
633	fr.readAsDataURL(files[0]);	633	fr.readAsDataURL(files[0]);
634	fr.addEventListener("load", () => {	634	fr.addEventListener("load", () => {
635	this.editImageUrl = fr.result;	635	this.editImageUrl = fr.result;
636	this.editiImageFile = files[0]; // this is an image file that can be sent to server...	636	this.editiImageFile = files[0]; // this is an image file that can be sent to server...
637	});	637	});
638	} else {	638	} else {
639	this.editImageName = "";	639	this.editImageName = "";
640	this.editiImageFile = "";	640	this.editiImageFile = "";
641	}	641	}
642	},	642	},
643	editItem(item) {	643	editItem(item) {
644	this.editedIndex = this.courseData.indexOf(item);	644	this.editedIndex = this.courseData.indexOf(item);
645	this.editedItem = Object.assign({}, item);	645	this.editedItem = Object.assign({}, item);
646	this.editStudentDialog = true;	646	this.editStudentDialog = true;
647	},	647	},
648	profile(item) {	648	profile(item) {
649	this.editedIndex = this.courseData.indexOf(item);	649	this.editedIndex = this.courseData.indexOf(item);
650	this.editedItem = Object.assign({}, item);	650	this.editedItem = Object.assign({}, item);
651	this.profileStudentDialog = true;	651	this.profileStudentDialog = true;
652	},	652	},
653	deleteItem(item) {	653	deleteItem(item) {
654	let deleteAnnoucement = {	654	let deleteAnnoucement = {
655	annoucementId: item._id	655	annoucementId: item._id
656	};	656	};
657	http()	657	http()
658	.delete(	658	.delete(
659	"/deleteAnnoucement",	659	"/deleteAnnoucement",
660	confirm("Are you sure you want to delete this?") && {	660	confirm("Are you sure you want to delete this?") && {
661	params: deleteAnnoucement	661	params: deleteAnnoucement
662	}	662	}
663	)	663	)
664	.then(response => {	664	.then(response => {
665	this.snackbar = true;	665	this.snackbar = true;
666	this.text = response.data.message;	666	this.text = response.data.message;
667	this.color = "green";	667	this.color = "green";
668	this.getAnnoucementes();	668	this.getAnnoucementes();
669	})	669	})
670	.catch(error => {	670	.catch(error => {
671	this.snackbar = true;	671	this.snackbar = true;
672	this.text = error.response.data.message;	672	this.text = error.response.data.message;
673	this.color = "error";	673	this.color = "error";
674	});	674	});
675	},	675	},
676	close() {	676	close() {
677	this.editStudentDialog = false;	677	this.editStudentDialog = false;
678	},	678	},
679	closeStudentProfile() {	679	closeStudentProfile() {
680	this.profileStudentDialog = false;	680	this.profileStudentDialog = false;
681	},	681	},
682	submit() {	682	submit() {
683	if (this.$refs.form.validate()) {	683	if (this.$refs.form.validate()) {
684	let addCourse = {	684	let addCourse = {
685	classId: this.addAnnoucement.select,	685	classId: this.addAnnoucement.select,
686	sectionId: this.addAnnoucement.selectSection,	686	sectionId: this.addAnnoucement.selectSection,
687	discussionType: this.addAnnoucement.discussionType,	687	discussionType: this.addAnnoucement.discussionType,
688	courseId: this.addAnnoucement.coursrName	688	courseId: this.addAnnoucement.courseName
689	};	689	};
690	if (this.imageUrl) {	690	if (this.imageUrl) {
691	var str = this.imageUrl;	691	var str = this.imageUrl;
692	const [baseUrl, imageUrl] = str.split(/,/);	692	const [baseUrl, imageUrl] = str.split(/,/);
693	addCourse.upload = imageUrl;	693	addCourse.upload = imageUrl;
694	}	694	}
695	this.loading = true;	695	this.loading = true;
696	http()	696	http()
697	.post("/createAnnoucement", addCourse)	697	.post("/createAnnoucement", addCourse)
698	.then(response => {	698	.then(response => {
699	this.snackbar = true;	699	this.snackbar = true;
700	this.text = "New Annoucement added successfully";	700	this.text = "New Annoucement added successfully";
701	this.color = "green";	701	this.color = "green";
702	this.addAnnoucementDialog = false;	702	this.addAnnoucementDialog = false;
703	this.clear();	703	this.clear();
704	this.loading = false;	704	this.loading = false;
705	})	705	})
706	.catch(error => {	706	.catch(error => {
707	this.snackbar = true;	707	this.snackbar = true;
708	this.text = error.response.data.message;	708	this.text = error.response.data.message;
709	this.color = "error";	709	this.color = "error";
710	this.loading = false;	710	this.loading = false;
711	});	711	});
712	}	712	}
713	},	713	},
714	clear() {	714	clear() {
715	this.$refs.form.reset();	715	this.$refs.form.reset();
716	this.imageUrl = "";	716	this.imageUrl = "";
717	},	717	},
718	save() {	718	save() {
719	let editAnnoucement = {	719	let editAnnoucement = {
720	annoucementId: this.editedItem._id,	720	annoucementId: this.editedItem._id,
721	discussionType: this.editedItem.discussionType,	721	discussionType: this.editedItem.discussionType,
722	classId: this.editedItem.select,	722	classId: this.editedItem.select,
723	courseId: this.editedItem.coursrName	723	courseId: this.editedItem.courseName
724	};	724	};
725	if (this.editImageUrl) {	725	if (this.editImageUrl) {
726	var str = this.editImageUrl;	726	var str = this.editImageUrl;
727	const [baseUrl, editImageUrl] = str.split(/,/);	727	const [baseUrl, editImageUrl] = str.split(/,/);
728	editAnnoucement.upload = editImageUrl;	728	editAnnoucement.upload = editImageUrl;
729	}	729	}
730	this.editLoading = true;	730	this.editLoading = true;
731	http()	731	http()
732	.put("/updateAnnoucement", editAnnoucement)	732	.put("/updateAnnoucement", editAnnoucement)
733	.then(response => {	733	.then(response => {
734	this.snackbar = true;	734	this.snackbar = true;
735	this.text = response.data.message;	735	this.text = response.data.message;
736	this.color = "green";	736	this.color = "green";
737	this.imageUrl = "";	737	this.imageUrl = "";
738	this.getAnnoucementes();	738	this.getAnnoucementes();
739	this.close();	739	this.close();
740	this.editLoading = false;	740	this.editLoading = false;
741	})	741	})
742	.catch(error => {	742	.catch(error => {
743	this.snackbar = true;	743	this.snackbar = true;
744	this.text = error.response.data.statusText;	744	this.text = error.response.data.statusText;
745	this.color = "error";	745	this.color = "error";
746	this.editLoading = false;	746	this.editLoading = false;
747	});	747	});
748	},	748	},
749	displaySearch() {	749	displaySearch() {
750	this.show = false;	750	this.show = false;
751	this.showSearch = true;	751	this.showSearch = true;
752	},	752	},
753	closeSearch() {	753	closeSearch() {
754	this.showSearch = false;	754	this.showSearch = false;
755	this.show = true;	755	this.show = true;
756	this.search = "";	756	this.search = "";
757	}	757	}
758	},	758	},
759	mounted() {	759	mounted() {
760	var token = this.$store.state.token;	760	var token = this.$store.state.token;
761	http()	761	http()
762	.get("/getClassesList", {	762	.get("/getClassesList", {
763	headers: { Authorization: "Bearer " + token }	763	headers: { Authorization: "Bearer " + token }
764	})	764	})
765	.then(response => {	765	.then(response => {
766	this.addclass = response.data.data;	766	this.addclass = response.data.data;
767	})	767	})
768	.catch(error => {	768	.catch(error => {
769	this.showLoader = false;	769	this.showLoader = false;
770	if (error.response.status === 401) {	770	if (error.response.status === 401) {
771	this.$router.replace({ path: "/" });	771	this.$router.replace({ path: "/" });
772	this.$store.dispatch("setToken", null);	772	this.$store.dispatch("setToken", null);
773	this.$store.dispatch("Id", null);	773	this.$store.dispatch("Id", null);
774	this.$store.dispatch("Role", null);	774	this.$store.dispatch("Role", null);
775	}	775	}
776	});	776	});
777	}	777	}
778	};	778	};
779	</script>	779	</script>
780	<style scoped>	780	<style scoped>
781	.active {	781	.active {
782	background-color: gray;	782	background-color: gray;
783	color: white !important;	783	color: white !important;
784	}	784	}
785	.activebtn {	785	.activebtn {
786	color: black !important;	786	color: black !important;
787	}	787	}
788	</style>	788	</style>

src/pages/Course/course.vue

Diff comments View file @0a52566

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

src/pages/Course/courseDetail.vue

Diff comments View file @0a52566

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

src/pages/Course/enrollStudents.vue

Diff comments View file @0a52566

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="coursrName"	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="name"
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	if (this.selected.length) this.selected = [];
265	else this.selected = this.studentsData.slice();	265	else this.selected = this.studentsData.slice();
266	let selectedStudentsArray = [];	266	let selectedStudentsArray = [];
267	for (let i = 0; i < this.selected.length; i++) {	267	for (let i = 0; i < this.selected.length; i++) {
268	selectedStudentsArray.push({ studentId: this.selected[i]._id });	268	selectedStudentsArray.push({ studentId: this.selected[i]._id });
269	}	269	}
270	// console.log("selectedStudentsArray", selectedStudentsArray);	270	// console.log("selectedStudentsArray", selectedStudentsArray);
271	var payload = {	271	var payload = {
272	courseId: this.getReport.courseId,	272	courseId: this.getReport.courseId,
273	enrollStudents: selectedStudentsArray	273	enrollStudents: selectedStudentsArray
274	};	274	};
275	http()	275	http()
276	.put("/enrollStudents", payload)	276	.put("/enrollStudents", payload)
277	.then(response => {	277	.then(response => {
278	this.snackbar = true;	278	this.snackbar = true;
279	this.text = response.data.message;	279	this.text = response.data.message;
280	this.getParticularCourse()	280	this.getParticularCourse()
281	})	281	})
282	.catch(error => {	282	.catch(error => {
283	this.snackbar = true;	283	this.snackbar = true;
284	this.text = error.response.data.message;	284	this.text = error.response.data.message;
285	});	285	});
286	},	286	},
287	selectParticularStudent(selected) {	287	selectParticularStudent(selected) {
288	console.log("selected", selected);	288	console.log("selected", selected);
289	let selectedStudentsArray = [];	289	let selectedStudentsArray = [];
290	selectedStudentsArray.push({ studentId: selected._id });	290	selectedStudentsArray.push({ studentId: selected._id });
291	if (	291	if (
292	selected.enroll === true &&	292	selected.enroll === true &&
293	selected.enroll === undefined &&	293	selected.enroll === undefined &&
294	selected.enroll === null	294	selected.enroll === null
295	) {	295	) {
296	var payload = {	296	var payload = {
297	courseId: this.getReport.courseId,	297	courseId: this.getReport.courseId,
298	enrollStudents: selectedStudentsArray	298	enrollStudents: selectedStudentsArray
299	};	299	};
300	http()	300	http()
301	.put("/enrollStudents", payload)	301	.put("/enrollStudents", payload)
302	.then(response => {	302	.then(response => {
303	this.snackbar = true;	303	this.snackbar = true;
304	this.text = response.data.message;	304	this.text = response.data.message;
305	})	305	})
306	.catch(error => {	306	.catch(error => {
307	this.snackbar = true;	307	this.snackbar = true;
308	this.text = error.response.data.message;	308	this.text = error.response.data.message;
309	});	309	});
310	}	310	}
311	if (	311	if (
312	selected.enroll == false &&	312	selected.enroll == false &&
313	selected.enroll != undefined &&	313	selected.enroll != undefined &&
314	selected.enroll != null	314	selected.enroll != null
315	) {	315	) {
316	var payloadDeleteStudents = {	316	var payloadDeleteStudents = {
317	courseId: this.getReport.courseId,	317	courseId: this.getReport.courseId,
318	enrollStudentsId: selected.enrollId	318	enrollStudentsId: selected.enrollId
319	};	319	};
320	http()	320	http()
321	.put("/deleteStudents", payloadDeleteStudents)	321	.put("/deleteStudents", payloadDeleteStudents)
322	.then(response => {	322	.then(response => {
323	this.snackbar = true;	323	this.snackbar = true;
324	this.text = response.data.message;	324	this.text = response.data.message;
325	})	325	})
326	.catch(error => {	326	.catch(error => {
327	this.snackbar = true;	327	this.snackbar = true;
328	this.text = error.response.data.message;	328	this.text = error.response.data.message;
329	});	329	});
330	}	330	}
331	},	331	},
332	getParticularCourse() {	332	getParticularCourse() {
333	var payload = {	333	var payload = {
334	courseId: this.getReport.courseId	334	courseId: this.getReport.courseId
335	};	335	};
336	http()	336	http()
337	.get("/getParticularCourse", {	337	.get("/getParticularCourse", {
338	params: payload	338	params: payload
339	})	339	})
340	.then(response => {	340	.then(response => {
341	for (let i = 0; i < response.data.data.enrollStudents.length; i++) {	341	for (let i = 0; i < response.data.data.enrollStudents.length; i++) {
342	var studentId = {};	342	var studentId = {};
343	studentId = response.data.data.enrollStudents[i];	343	studentId = response.data.data.enrollStudents[i];
344	for (let j = 0; j < this.studentsData.length; j++) {	344	for (let j = 0; j < this.studentsData.length; j++) {
345	if (studentId.studentId == this.studentsData[j]._id) {	345	if (studentId.studentId == this.studentsData[j]._id) {
346	console.log("studentId._id", studentId._id);	346	console.log("studentId._id", studentId._id);
347	this.studentsData[j].enroll = true;	347	this.studentsData[j].enroll = true;
348	this.studentsData[j].enrollId = studentId._id;	348	this.studentsData[j].enrollId = studentId._id;
349	}	349	}
350	}	350	}
351	}	351	}
352	this.snackbar = true;	352	this.snackbar = true;
353	this.text = response.data.message;	353	this.text = response.data.message;
354	})	354	})
355	.catch(error => {	355	.catch(error => {
356	this.snackbar = true;	356	this.snackbar = true;
357	this.text = error.response.data.message;	357	this.text = error.response.data.message;
358	});	358	});
359	},	359	},
360	changeSort(column) {	360	changeSort(column) {
361	if (this.pagination.sortBy === column) {	361	if (this.pagination.sortBy === column) {
362	this.pagination.descending = !this.pagination.descending;	362	this.pagination.descending = !this.pagination.descending;
363	} else {	363	} else {
364	this.pagination.sortBy = column;	364	this.pagination.sortBy = column;
365	this.pagination.descending = false;	365	this.pagination.descending = false;
366	}	366	}
367	},	367	},
368	displaySearch() {	368	displaySearch() {
369	this.show = false;	369	this.show = false;
370	this.showSearch = true;	370	this.showSearch = true;
371	},	371	},
372	closeSearch() {	372	closeSearch() {
373	this.showSearch = false;	373	this.showSearch = false;
374	this.show = true;	374	this.show = true;
375	this.search = "";	375	this.search = "";
376	}	376	}
377	},	377	},
378	mounted() {	378	mounted() {
379	// this.getStudentList();	379	// this.getStudentList();
380	this.token = this.$store.state.token;	380	this.token = this.$store.state.token;
381	this.role = this.$store.state.role;	381	this.role = this.$store.state.role;
382	this.getAllClass();	382	this.getAllClass();
383	}	383	}
384	};	384	};
385	</script>	385	</script>

src/pages/Dashboard/Announcement.vue

Diff comments View file @0a52566

src/pages/Dashboard/ChapterInfo.vue

Diff comments View file @0a52566

1	<template>	1	<template>
2	<div>	2	<div>
3	<!-- LOADER -->	3	<!-- LOADER -->
4	<div class="loader" v-if="showLoader">	4	<div class="loader" v-if="showLoader">
5	<v-progress-circular indeterminate color="white"></v-progress-circular>	5	<v-progress-circular indeterminate color="white"></v-progress-circular>
6	</div>	6	</div>
7		7
8	<!-- SNACKBAR -->	8	<!-- SNACKBAR -->
9	<v-snackbar	9	<v-snackbar
10	:timeout="timeout"	10	:timeout="timeout"
11	:top="y === 'top'"	11	:top="y === 'top'"
12	:right="x === 'right'"	12	:right="x === 'right'"
13	:vertical="mode === 'vertical'"	13	:vertical="mode === 'vertical'"
14	v-model="snackbar"	14	v-model="snackbar"
15	:color="snackbarColor"	15	:color="snackbarColor"
16	>	16	>
17	{{ text }}	17	{{ text }}
18	<v-spacer></v-spacer>	18	<v-spacer></v-spacer>
19	<v-btn flat text @click="snackbar = false">X</v-btn>	19	<v-btn flat text @click="snackbar = false">X</v-btn>
20	</v-snackbar>	20	</v-snackbar>
21		21
22	<v-container class="pt-0">	22	<v-container class="pt-0">
23	<v-layout row class="mt-1">	23	<v-layout row class="mt-1">
24	<v-flex xs8>	24	<v-flex xs8>
25	<!-- CHAPTER INFO -->	25	<!-- CHAPTER INFO -->
26	<div class="title side-bar-color font-weight-bold">{{chapter.chapters[0].chapterName}}</div>	26	<div class="title side-bar-color font-weight-bold">{{chapter.chapters[0].chapterName}}</div>
27	<div class="subheading grey--text lighten-1">{{chapter.chapters[0].description}}</div>	27	<div class="subheading grey--text lighten-1">{{chapter.chapters[0].description}}</div>
28	<div	28	<div
29	v-for="(point,index) in chapter.chapters[0].chapterPoints"	29	v-for="(point,index) in chapter.chapters[0].chapterPoints"
30	:key="index"	30	:key="index"
31	class="ml-2 mt-2"	31	class="ml-2 mt-2"
32	>	32	>
33	<span class="subheading grey--text lighten-1">{{index +1}}. {{point}}</span>	33	<span class="subheading grey--text lighten-1">{{index +1}}. {{point}}</span>
34	</div>	34	</div>
35	<!-- ACTIVITIES -->	35	<!-- ACTIVITIES -->
36	<div class="mt-5">	36	<div class="mt-5">
37	<v-icon>library_books</v-icon>	37	<v-icon>library_books</v-icon>
38	<span class="subheading font-weight-bold">Activities</span>	38	<span class="subheading font-weight-bold">Activities</span>
39	</div>	39	</div>
40	<!-- OTHER OPTIONS -->	40	<!-- OTHER OPTIONS -->
41	<div class="mt-5">	41	<div class="mt-5">
42	<ul class="subheading">	42	<ul class="subheading">
43	<li>Live online classes solution</li>	43	<li>Live online classes solution</li>
44	<li>Tutorial-pharmacetutical</li>	44	<li>Tutorial-pharmacetutical</li>
45	<li>HSP Interactive content</li>	45	<li>HSP Interactive content</li>
46	<li>Assessment</li>	46	<li>Assessment</li>
47	</ul>	47	</ul>
48	</div>	48	</div>
49		49
50	<!-- SELECT CHAPTERS -->	50	<!-- SELECT CHAPTERS -->
51	<v-layout row class="mt-5">	51	<v-layout row class="mt-5">
52	<!-- PREVIOUS CHAPTER -->	52	<!-- PREVIOUS CHAPTER -->
53	<v-flex	53	<v-flex
54	style="cursor: pointer;"	54	style="cursor: pointer;"
55	class="subheading font-weight-bold text-xs-left"	55	class="subheading font-weight-bold text-xs-left"
56	v-if="indexSelectedChapter > 0"	56	v-if="indexSelectedChapter > 0"
57	@click="showSelectedChapter('back')"	57	@click="showSelectedChapter('back')"
58	>	58	>
59	<v-icon class="black--text" style="position:relative; top: 4px;">chevron_left</v-icon>	59	<v-icon class="black--text" style="position:relative; top: 4px;">chevron_left</v-icon>
60	{{chapterNames[indexSelectedChapter - 1]}}	60	{{chapterNames[indexSelectedChapter - 1]}}
61	</v-flex>	61	</v-flex>
62	<v-spacer></v-spacer>	62	<v-spacer></v-spacer>
63	<!-- NEXT CHAPTER -->	63	<!-- NEXT CHAPTER -->
64	<v-flex	64	<v-flex
65	style="cursor: pointer;"	65	style="cursor: pointer;"
66	class="subheading font-weight-bold text-xs-right"	66	class="subheading font-weight-bold text-xs-right"
67	v-if="indexSelectedChapter < chapterNames.length -1"	67	v-if="indexSelectedChapter < chapterNames.length -1"
68	@click="showSelectedChapter('forward')"	68	@click="showSelectedChapter('forward')"
69	>	69	>
70	{{chapterNames[indexSelectedChapter + 1]}}	70	{{chapterNames[indexSelectedChapter + 1]}}
71	<v-icon class="black--text" style="position:relative; top: 4px;">chevron_right</v-icon>	71	<v-icon class="black--text" style="position:relative; top: 4px;">chevron_right</v-icon>
72	</v-flex>	72	</v-flex>
73	</v-layout>	73	</v-layout>
74	<!-- <v-flex class="text-xs-right mt-5" v-else>	74	<!-- <v-flex class="text-xs-right mt-5" v-else>
75	<span class="subheading font-weight-bold">Return to chapter one</span>	75	<span class="subheading font-weight-bold">Return to chapter one</span>
76	</v-flex>-->	76	</v-flex>-->
77	</v-flex>	77	</v-flex>
78		78
79	<v-spacer></v-spacer>	79	<v-spacer></v-spacer>
80		80
81	<!-- COURSES - positioned to the right of the page -->	81	<!-- COURSES - positioned to the right of the page -->
82	<v-flex xs3>	82	<v-flex xs3>
83	<v-card class="elevation-0 card-border" height="100%">	83	<v-card class="elevation-0 card-border" height="100%">
84	<v-container class="pt-0">	84	<v-container class="pt-0">
85	<div class="side-bar-color font-weight-bold title">Courses</div>	85	<div class="side-bar-color font-weight-bold title">Courses</div>
86		86
87	<div v-for="(course,index) in courseData" :key="index">	87	<div v-for="(course,index) in courseData" :key="index">
88	<v-btn	88	<v-btn
89	flat	89	flat
90	class="subheading text-xs-start justify-left"	90	class="subheading text-xs-start justify-left"
91	style="cursor: pointer;"	91	style="cursor: pointer;"
92	block	92	block
93	@click="routeToCourseDetails(course._id)"	93	@click="routeToCourseDetails(course._id)"
94	>	94	>
95	<div style="width: 100%;text-align: left;">	95	<div style="width: 100%;text-align: left;">
96	<v-icon style="color: red;padding-bottom: 3px;" size="15">play_arrow</v-icon>	96	<v-icon style="color: red;padding-bottom: 3px;" size="15">play_arrow</v-icon>
97	{{course.coursrName}}	97	{{course.courseName}}
98	</div>	98	</div>
99	</v-btn>	99	</v-btn>
100	</div>	100	</div>
101	</v-container>	101	</v-container>
102	</v-card>	102	</v-card>
103	</v-flex>	103	</v-flex>
104	</v-layout>	104	</v-layout>
105	</v-container>	105	</v-container>
106	</div>	106	</div>
107	</template>	107	</template>
108	<script>	108	<script>
109	import http from "@/Services/http.js";	109	import http from "@/Services/http.js";
110	import AllApiCalls from "@/Services/AllApiCalls.js";	110	import AllApiCalls from "@/Services/AllApiCalls.js";
111	export default {	111	export default {
112	mixins: [AllApiCalls],	112	mixins: [AllApiCalls],
113	data() {	113	data() {
114	return {	114	return {
115	// courseData: [],	115	// courseData: [],
116	showLoader: false,	116	showLoader: false,
117	chapter: { chapters: [{}] },	117	chapter: { chapters: [{}] },
118	chapterNames: [],	118	chapterNames: [],
119	chapterIds: [],	119	chapterIds: [],
120	selectedChapterId: "",	120	selectedChapterId: "",
121	indexSelectedChapter: ""	121	indexSelectedChapter: ""
122	};	122	};
123	},	123	},
124	methods: {	124	methods: {
125	showSelectedChapter(newChapter) {	125	showSelectedChapter(newChapter) {
126	if (newChapter == "forward") {	126	if (newChapter == "forward") {
127	this.indexSelectedChapter += 1;	127	this.indexSelectedChapter += 1;
128	this.selectedChapterId = this.chapterIds[this.indexSelectedChapter];	128	this.selectedChapterId = this.chapterIds[this.indexSelectedChapter];
129	this.getParticularChapterDetail();	129	this.getParticularChapterDetail();
130	}	130	}
131	if (newChapter == "back") {	131	if (newChapter == "back") {
132	this.indexSelectedChapter -= 1;	132	this.indexSelectedChapter -= 1;
133	this.selectedChapterId = this.chapterIds[this.indexSelectedChapter];	133	this.selectedChapterId = this.chapterIds[this.indexSelectedChapter];
134	this.getParticularChapterDetail();	134	this.getParticularChapterDetail();
135	}	135	}
136	},	136	},
137	getParticularChapterDetail() {	137	getParticularChapterDetail() {
138	http()	138	http()
139	.get("/getParticularChapterDetail", {	139	.get("/getParticularChapterDetail", {
140	params: {	140	params: {
141	courseDetailId: this.$route.query.courseDetailId,	141	courseDetailId: this.$route.query.courseDetailId,
142	chapterId: this.selectedChapterId	142	chapterId: this.selectedChapterId
143	}	143	}
144	})	144	})
145	.then(response => {	145	.then(response => {
146	this.chapter = response.data.data;	146	this.chapter = response.data.data;
147	console.log(" chapter data - ", this.chapter);	147	console.log(" chapter data - ", this.chapter);
148	this.showLoader = false;	148	this.showLoader = false;
149	})	149	})
150	.catch(err => {	150	.catch(err => {
151	console.log("err====>", err);	151	console.log("err====>", err);
152	this.showLoader = false;	152	this.showLoader = false;
153	});	153	});
154	},	154	},
155	async routeToCourseDetails(courseId) {	155	async routeToCourseDetails(courseId) {
156	/* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/	156	/* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/
157	let response = await this.getParticularCourseDetail(courseId);	157	let response = await this.getParticularCourseDetail(courseId);
158		158
159	/* If the response is null then dont route */	159	/* If the response is null then dont route */
160	if (response.data.data.length > 0) {	160	if (response.data.data.length > 0) {
161	this.$router.push({	161	this.$router.push({
162	name: "Course Details",	162	name: "Course Details",
163	query: { courseId: courseId }	163	query: { courseId: courseId }
164	});	164	});
165	} else {	165	} else {
166	this.seeSnackbar("No Data Available", "warning");	166	this.seeSnackbar("No Data Available", "warning");
167	}	167	}
168	}	168	}
169	},	169	},
170	// computed:{	170	// computed:{
171	// nextChapterIndex(){	171	// nextChapterIndex(){
172		172
173	// }	173	// }
174	// }	174	// }
175	async created() {	175	async created() {
176	console.log("route query - ", this.$route.query);	176	console.log("route query - ", this.$route.query);
177		177
178	this.selectedChapterId = this.$route.query.chapterId;	178	this.selectedChapterId = this.$route.query.chapterId;
179		179
180	/* set chapterNames array */	180	/* set chapterNames array */
181	this.chapterNames = Object.keys(this.$route.query);	181	this.chapterNames = Object.keys(this.$route.query);
182	this.chapterNames.pop();	182	this.chapterNames.pop();
183	this.chapterNames.pop();	183	this.chapterNames.pop();
184	console.log("chapter names - ", this.chapterNames);	184	console.log("chapter names - ", this.chapterNames);
185		185
186	/* set chapter Ids */	186	/* set chapter Ids */
187	this.chapterIds = Object.values(this.$route.query);	187	this.chapterIds = Object.values(this.$route.query);
188	this.chapterIds.pop();	188	this.chapterIds.pop();
189	this.chapterIds.pop();	189	this.chapterIds.pop();
190	console.log("chapter Ids - ", this.chapterIds);	190	console.log("chapter Ids - ", this.chapterIds);
191		191
192	this.indexSelectedChapter = this.chapterIds.findIndex(id => {	192	this.indexSelectedChapter = this.chapterIds.findIndex(id => {
193	return id == this.selectedChapterId;	193	return id == this.selectedChapterId;
194	});	194	});
195	console.log(" index of selected chapter - ", this.indexSelectedChapter);	195	console.log(" index of selected chapter - ", this.indexSelectedChapter);
196		196
197	/* get chapter clicked on using the id */	197	/* get chapter clicked on using the id */
198	await this.getParticularChapterDetail(this.selectedChapterId);	198	await this.getParticularChapterDetail(this.selectedChapterId);
199		199
200	/* getStudentCourses - to get courseData - defined in GetApis.js*/	200	/* getStudentCourses - to get courseData - defined in GetApis.js*/
201	await this.getStudentCourses({	201	await this.getStudentCourses({
202	classId: localStorage.getItem("parentClassId"),	202	classId: localStorage.getItem("parentClassId"),
203	studentId: localStorage.getItem("parentStudentId")	203	studentId: localStorage.getItem("parentStudentId")
204	});	204	});
205	}	205	}
206	};	206	};
207	</script>	207	</script>
208	<style scoped>	208	<style scoped>
209	.side-bar-color {	209	.side-bar-color {
210	color: #827bfa !important;	210	color: #827bfa !important;
211	/* border-top-right-radius: 74px !important; */	211	/* border-top-right-radius: 74px !important; */
212	}	212	}
213	.card-border {	213	.card-border {
214	border: 1px #bdbdbd solid;	214	border: 1px #bdbdbd solid;
215	border-radius: 3px;	215	border-radius: 3px;
216	}	216	}
217	</style>	217	</style>
218		218

src/pages/Dashboard/CourseDetails.vue

Diff comments View file @0a52566

 <template>
   <div>
     <!-- LOADER -->
     <div class="loader" v-if="showLoader">
       <v-progress-circular indeterminate color="white"></v-progress-circular>
     </div>
     <!-- SNACKBAR -->
     <v-snackbar
       :timeout="timeout"
       :top="y === 'top'"
       :right="x === 'right'"
       :vertical="mode === 'vertical'"
       v-model="snackbar"
       :color="snackbarColor"
     >
       {{ text }}
       <v-spacer></v-spacer>
       <v-btn flat text @click="snackbar = false">X</v-btn>
     </v-snackbar>
     <v-container class="pt-0">
       <v-layout row class="mt-1">
         <v-flex xs8>
           <div
             class="title side-bar-color font-weight-bold"
-          >Welcome to the {{courseDetails[0].courseId.coursrName}} Course for {{courseDetails[0].classId.classNum}} class</div>
+          >Welcome to the {{courseDetails[0].courseId.courseName}} Course for {{courseDetails[0].classId.classNum}} class</div>
           <v-flex xs12 class="subheading mt-2">
             Lorem Ipsum sdjjkhsdf sdklfjs dkfjskdjfk fjsdklf sdjfksljf sdfkls fljlkj kl
             jkhjkfhjksd sdfjkhsdjk fsdjkl sfkljkl ldkfjkl kjlfs dlkjlskd fljsldk fklj
             lksjdfljklsdj flkjs dflkjsd flkjsd lfkjsd lfjsdjf lkj kl
           </v-flex>
           <div class="mt-5">
-            <span class="grey--text lighten-1">
+            <span
+              class="grey--text lighten-1"
+              @click="$router.push({name: 'Announcement', query:{courseId: $route.query.courseId}})"
+            >
               <v-icon>question_answer</v-icon>
               <span class="ml-2">Announcement</span>
             </span>
           </div>
           <div>
             <span
               style="cursor: pointer;"
               @click="$router.push({name: 'Course Discussion Forum', query:{courseId: $route.query.courseId}})"
               class="grey--text lighten-1"
             >
               <v-icon>question_answer</v-icon>
               <span class="ml-2">Course discussion forum</span>
             </span>
           </div>
           <!-- CHAPTERS -->
           <v-layout column class="mt-5">
             <v-flex
               v-for="(chapter,index) in courseDetails[0].chapters"
               :key="index"
               style="cursor: pointer;"
               @click="routeToChapterInfo(chapter._id)"
             >
               <v-card class="mt-2 elevation-0 card-border">
                 <v-container class="pt-0">
                   <div class="title side-bar-color font-weight-bold">{{chapter.chapterName}}</div>
                   <div class="grey--text lighten-1 subheading">{{chapter.description}}</div>
                   <div
                     v-for="(point,index) in chapter.chapterPoints"
                     :key="index"
                     class="ml-2 mt-2"
                   >
                     <span class="grey--text lighten-1 subheading">{{index +1}}. {{point}}</span>
                   </div>
                 </v-container>
               </v-card>
             </v-flex>
           </v-layout>
         </v-flex>
         <v-spacer></v-spacer>
         <!-- COURSES -->
         <v-flex xs3>
           <v-card class="elevation-0 card-border" height="100%">
             <v-container class="pt-0">
               <div class="side-bar-color font-weight-bold title">Courses</div>
               <div v-for="(course,index) in courseData">
                 <v-btn
                   flat
                   class="subheading text-xs-start justify-left"
                   style="cursor: pointer;"
                   block
                   @click="routeToCourseDetails(course._id)"
                 >
                   <div style="width: 100%;text-align: left;">
                     <v-icon style="color: red;padding-bottom: 3px;" size="15">play_arrow</v-icon>
-                    {{course.coursrName}}
+                    {{course.courseName}}
                   </div>
                 </v-btn>
               </div>
               <!-- <v-expansion-panel focusable class="elevation-0">
                 <v-expansion-panel-content v-for="(item,i) in courseData" :key="i">
                   <template v-slot:header>
-                    <div class="subheading">{{item.coursrName}}</div>
+                    <div class="subheading">{{item.courseName}}</div>
                   </template>
                 </v-expansion-panel-content>
               </v-expansion-panel>-->
             </v-container>
           </v-card>
         </v-flex>
       </v-layout>
     </v-container>
   </div>
 </template>
 <script>
 import AllApiCalls from "@/Services/AllApiCalls.js";
 import http from "@/Services/http.js";
 import moment from "moment";
 export default {
   mixins: [AllApiCalls],
   data() {
     return {
       showLoader: false,
       courseDetails: [{ courseId: {}, classId: {} }],
       chapterIds: [],
       // courseData: [],
       courseDataTree: []
     };
   },
   methods: {
     routeToChapterInfo(chapterId) {
       /* set value of present chapter selected, and other chapters ids in the obj */
       let obj = {};
       for (var i = 0; i < this.courseDetails[0].chapters.length; i++) {
         obj[
           this.courseDetails[0].chapters[i].chapterName
         ] = this.courseDetails[0].chapters[i]._id;
       }
       obj.chapterId = chapterId;
       obj.courseDetailId = this.courseDetails[0]._id;
       this.$router.push({
         name: "Chapter Info",
         query: obj
       });
     },
     async routeToCourseDetails(courseId) {
       /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/
       let response = await this.getParticularCourseDetail(courseId);
       /* If the response is null then dont route */
       if (response.data.data.length > 0) {
         this.$router.push({
           name: "Course Details",
           query: { courseId: courseId }
         });
       } else {
         this.seeSnackbar("No Data Available", "warning");
       }
     }
   },
   async created() {
     /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/
     let response = await this.getParticularCourseDetail(
       this.$route.query.courseId
     );
     this.courseDetails = response.data.data;
     /* getStudentCourses - to get courseData - defined in GetApis.js*/
     await this.getStudentCourses({
       classId: localStorage.getItem("parentClassId"),
       studentId: localStorage.getItem("parentStudentId")
     });
   }
 };
 </script>
 <style scoped>
 .side-bar-color {
   color: #827bfa !important;
   /* border-top-right-radius: 74px !important; */
 }
 .card-border {
   border: 1px #bdbdbd solid;
   border-radius: 3px;
 }
 /* .v-treeview-node__toggle {
   color: red !important;
 } */
 </style>

src/pages/Dashboard/CourseDiscussionForum.vue

Diff comments View file @0a52566

 <template>
   <div class="body-color">
     <!-- LOADER -->
     <div class="loader" v-if="showLoader">
       <v-progress-circular indeterminate color="white"></v-progress-circular>
     </div>
     <!-- SNACKBAR -->
     <v-snackbar
       :timeout="timeout"
       :top="y === 'top'"
       :right="x === 'right'"
       :vertical="mode === 'vertical'"
       v-model="snackbar"
       :color="snackbarColor"
     >
       {{ text }}
       <v-spacer></v-spacer>
       <v-btn flat text @click="snackbar = false">X</v-btn>
     </v-snackbar>
     <!-- DIALOG TO ADD COURSE DISCUSSION FORUM -->
     <v-dialog v-model="addForumDialog" max-width="500" persistent>
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Forum</label>
             <v-icon size="24" class="right" @click="addForumDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-container fluid>
           <v-layout align-center>
             <v-flex xs12>
               <v-flex xs12 sm12>
                 <v-form ref="form" v-model="valid" lazy-validation>
                   <v-layout>
                     <v-flex
                       xs12
                       class="text-xs-center text-sm-center text-md-center text-lg-center"
                     >
                       <v-avatar size="100px" v-if="!imageUrl">
                         <img src="/static/icon/user.png" />
                       </v-avatar>
                       <input
                         type="file"
                         style="display: none"
                         ref="image"
                         accept="image/*"
                         @change="onFilePicked"
                       />
                       <img
                         :src="imageData.imageUrl"
                         height="150"
                         width="150"
                         v-if="imageUrl"
                         style="border-radius:50%; width:200px"
                       />
                     </v-flex>
                   </v-layout>
                   <v-layout wrap>
                     <!-- SUBJECT -->
                     <v-flex xs12 sm12>
                       <v-layout>
                         <v-flex xs4 sm4 class="pt-4 subheading">
                           <label class="right hidden-xs-only hidden-sm-only">Subject:</label>
                           <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Subject:</label>
                         </v-flex>
                         <v-flex xs8 sm8 class="ml-3">
                           <v-text-field
                             v-model="addForumParams.subject"
                             placeholder="subject"
                             type="text"
                             :rules="cantBeEmpty"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                     <!-- DESCRIPTION -->
                     <v-flex xs12 sm12>
                       <v-layout>
                         <v-flex xs4 sm4 class="pt-4 subheading">
                           <label class="right hidden-xs-only hidden-sm-only">Description:</label>
                           <label
                             class="right hidden-lg-only hidden-md-only hidden-xl-only"
                           >Description:</label>
                         </v-flex>
                         <v-flex xs8 sm8 class="ml-3">
                           <v-text-field
                             v-model="addForumParams.description"
                             placeholder="Description"
                             type="text"
                             :rules="cantBeEmpty"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                     <!-- UPLOAD IMAGE -->
                     <v-flex xs12 sm12>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right hidden-xs-only hidden-sm-only">Upload Image:</label>
                           <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload :</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             label="Select Image"
                             @click="pickFile"
                             v-model="imageName"
                             append-icon="attach_file"
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs12 sm12>
                       <v-layout class="right">
                         <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
                       </v-layout>
                     </v-flex>
                   </v-layout>
                 </v-form>
               </v-flex>
             </v-flex>
           </v-layout>
         </v-container>
       </v-card>
     </v-dialog>
     <v-container grid-list-xl class="pt-0">
       <v-layout row class="mt-1">
         <v-flex xs8>
           <v-layout column>
             <!-- HEADING -->
             <v-flex>
               <div class="title side-bar-color font-weight-bold">Course Discussion Forum</div>
               <div class="subheading grey--text lighten-1">General news and announcements</div>
             </v-flex>
             <!-- ADD DISCUSSION FORUM BUTTON -->
             <v-flex>
               <div>
                 <v-btn
                   fab
                   dark
                   class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
                   small
                   @click="addForumDialog = true"
                 >
                   <v-icon dark>add</v-icon>
                 </v-btn>
                 <v-btn
                   round
                   class="open-dialog-button hidden-sm-only hidden-xs-only"
                   dark
                   @click="addForumDialog = true"
                 >
                   <v-icon class="white--text pr-1" size="20">add</v-icon>Add A New Discussion Topic
                 </v-btn>
               </div>
             </v-flex>
             <!-- DATA TABLE -->
-            <v-flex></v-flex>
+            <v-flex>
+              <v-data-table
+                :headers="courseDiscussionHeaders"
+                :items="courseDiscussionItems"
+                :pagination.sync="pagination"
+                :search="search"
+              >
+                <template slot="items" slot-scope="props">
+                  <tr class="tr">
+                    <td class="td td-row text-xs-center">{{ props.item.courseId.courseName}}</td>
+                    <td class="td td-row text-xs-center">{{ props.item.studentId.name }}</td>
+                    <td class="td td-row text-xs-center">{{ props.item.courseId.courseName}}</td>
+                    <td class="td td-row text-xs-center">{{ props.item.studentId.name }}</td>
+                  </tr>
+                </template>
+                <v-alert
+                  slot="no-results"
+                  :value="true"
+                  color="error"
+                  icon="warning"
+                >Your search for "{{ search }}" found no results.</v-alert>
+              </v-data-table>
+            </v-flex>
           </v-layout>
           <!-- NEXT CHAPTER -->
           <!-- <v-flex
             class="text-xs-right mt-5"
             v-if="indexSelectedChapter < chapterNames.length -1"
             @click="showSelectedChapter()"
           >
             <span style="cursor: pointer;" class="subheading font-weight-bold">
               {{chapterNames[indexSelectedChapter + 1]}}
               <v-icon class="black--text" style="position:relative; top: 4px;">chevron_right</v-icon>
             </span>
           </v-flex>-->
           <!-- <v-flex class="text-xs-right mt-5" v-else>
             <span class="subheading font-weight-bold">Return to chapter one</span>
           </v-flex>-->
         </v-flex>
         <v-spacer></v-spacer>
         <!-- COURSES - positioned to the right of the page -->
         <v-flex xs3>
           <v-card class="elevation-0 card-border" height="100%">
             <v-container class="pt-0">
               <div class="side-bar-color font-weight-bold title">Courses</div>
               <div v-for="(course,index) in courseData">
                 <v-btn
                   flat
                   class="subheading text-xs-start justify-left"
                   style="cursor: pointer;"
                   block
                   @click="routeToCourseDetails(course._id)"
                 >
                   <div style="width: 100%;text-align: left;">
                     <v-icon style="color: red;padding-bottom: 3px;" size="15">play_arrow</v-icon>
-                    {{course.coursrName}}
+                    {{course.courseName}}
                   </div>
                 </v-btn>
               </div>
             </v-container>
           </v-card>
         </v-flex>
       </v-layout>
     </v-container>
   </div>
 </template>
 <script>
 import AllApiCalls from "@/Services/AllApiCalls.js";
 import http from "@/Services/http.js";
 export default {
   mixins: [AllApiCalls],
   data() {
     return {
       valid: true,
       addForumDialog: false,
       addForumParams: {},
       // UPLOAD IMAGE
       imageName: "",
       imageUrl: "",
       imageFile: "",
-      imageData: {}
+      imageData: {},
+      // DATA TABLE
+      search: "",
+      pagination: {
+        rowsPerPage: 10
+      },
+      courseDiscussionHeaders: [
+        {
+          text: "Discussion",
+          align: "",
+          sortable: false,
+          value: ""
+        },
+        {
+          text: "Started",
+          value: "",
+          sortable: false,
+          align: "center"
+        },
+        { text: "Last Pot", value: "", sortable: false, align: "center" },
+        { text: "Replies", value: "", sortable: false, align: "center" }
+      ],
+      courseDiscussionItems: []
     };
   },
   methods: {
     /* UPLOAD IMAGE */
     pickFile() {
       this.$refs.image.click();
     },
     onFilePicked(e) {
       // console.log(e)
       const files = e.target.files;
       this.imageData.upload = e.target.files[0];
       if (files[0] !== undefined) {
         this.imageName = files[0].name;
         if (this.imageName.lastIndexOf(".") <= 0) {
           return;
         }
         const fr = new FileReader();
         fr.readAsDataURL(files[0]);
         fr.addEventListener("load", () => {
           this.imageUrl = fr.result;
           this.imageFile = files[0]; // this is an image file that can be sent to server...
           this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
         });
       } else {
         this.imageName = "";
         this.imageFile = "";
         this.imageUrl = "";
       }
     },
     submit() {
       if (this.$refs.form.validate()) {
         this.addForumParams.classId = localStorage.getItem("parentClassId");
         this.addForumParams.courseId = this.$route.query.courseId;
         this.addForumParams.studentId = localStorage.getItem("parentStudentId");
         if (this.imageUrl) {
           var str = this.imageUrl;
           const [baseUrl, imageUrl] = str.split(/,/);
           this.addForumParams.upload = imageUrl;
         }
         this.loading = true;
         http()
           .post("/createCourseDiscussion", this.addForumParams)
           .then(response => {
             this.snackbar = true;
             this.text = "Discussion added successfully";
             this.snackbarColor = "green";
             this.addForumDialog = false;
             this.clear();
             this.loading = false;
             console.log("response of createCourseDiscussion - ", response);
           })
           .catch(error => {
             this.snackbar = true;
             this.text = error.response.data.message;
             this.color = "error";
             this.loading = false;
           });
       }
     },
     clear() {
       this.$refs.form.reset();
       this.imageUrl = "";
     },
     async routeToCourseDetails(courseId) {
       /* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/
       let response = await this.getParticularCourseDetail(courseId);
       /* If the response is null then dont route */
       if (response.data.data.length > 0) {
         this.$router.push({
           name: "Course Details",
           query: { courseId: courseId }
         });
       } else {
         this.seeSnackbar("No Data Available", "warning");
       }
     }
   },
   async created() {
     /* getStudentCourses - to get courseData - defined in GetApis.js*/
     await this.getStudentCourses({
       classId: localStorage.getItem("parentClassId"),
       studentId: localStorage.getItem("parentStudentId")
     });
+    /* getCourseDiscussionesList - to populate the data table */
+    await this.getCourseDiscussionesList({
+      courseId: this.$route.query.courseId,
+      classId: localStorage.getItem("parentClassId")
+    });
   }
 };
 </script>
 <style scoped>
 .side-bar-color {
   color: #827bfa !important;
   /* border-top-right-radius: 74px !important; */
 }
 .card-border {
   border: 1px #bdbdbd solid;
   border-radius: 3px;
 }
 </style>

src/pages/Dashboard/dashboard.vue

Diff comments View file @0a52566

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	<v-layout wrap>	71	<v-layout wrap>
72	<v-flex xs12>	72	<v-flex xs12>
73	<v-layout wrap row>	73	<v-layout wrap row>
74	<!-- *** Total Students *** -->	74	<!-- *** Total Students *** -->
75	<v-flex xs12 sm12 md9>	75	<v-flex xs12 sm12 md9>
76	<v-container fluid grid-list-xl>	76	<v-container fluid grid-list-xl>
77	<v-flex xs12 sm12 md12>	77	<v-flex xs12 sm12 md12>
78	<v-layout wrap class>	78	<v-layout wrap class>
79	<v-flex xs12 sm12 md3>	79	<v-flex xs12 sm12 md3>
80	<router-link :to="{ name:'Students' }">	80	<router-link :to="{ name:'Students' }">
81	<v-card class="card pink-bgcolor">	81	<v-card class="card pink-bgcolor">
82	<v-card-title primary-title class="titleCard white--text py-3">Students</v-card-title>	82	<v-card-title primary-title class="titleCard white--text py-3">Students</v-card-title>
83	<img src="/static/icon/student.png" class="ml-2" width="40" alt="icons" />	83	<img src="/static/icon/student.png" class="ml-2" width="40" alt="icons" />
84	<v-card-title class="headline py-1 white--text">{{ students.length }}</v-card-title>	84	<v-card-title class="headline py-1 white--text">{{ students.length }}</v-card-title>
85	</v-card>	85	</v-card>
86	</router-link>	86	</router-link>
87	</v-flex>	87	</v-flex>
88	<!-- *** Total Teachers*** -->	88	<!-- *** Total Teachers*** -->
89	<v-flex xs12 sm12 md3>	89	<v-flex xs12 sm12 md3>
90	<router-link :to="{ name:'Teachers' }">	90	<router-link :to="{ name:'Teachers' }">
91	<v-card flat class="card elevation-2 firozi-bgcolor">	91	<v-card flat class="card elevation-2 firozi-bgcolor">
92	<v-card-title primary-title class="titleCard white--text py-3">Teachers</v-card-title>	92	<v-card-title primary-title class="titleCard white--text py-3">Teachers</v-card-title>
93	<img src="/static/icon/teacher.png" class="ml-2" width="40" alt="icons" />	93	<img src="/static/icon/teacher.png" class="ml-2" width="40" alt="icons" />
94		94
95	<v-card-title class="headline py-1 white--text">{{ teachers.length }}</v-card-title>	95	<v-card-title class="headline py-1 white--text">{{ teachers.length }}</v-card-title>
96	</v-card>	96	</v-card>
97	</router-link>	97	</router-link>
98	</v-flex>	98	</v-flex>
99	<!-- *** Total Parents *** -->	99	<!-- *** Total Parents *** -->
100	<v-flex xs12 sm12 md3>	100	<v-flex xs12 sm12 md3>
101	<router-link :to="{ name:'Parents' }">	101	<router-link :to="{ name:'Parents' }">
102	<v-card flat class="card yellow darken-3">	102	<v-card flat class="card yellow darken-3">
103	<v-card-title primary-title class="titleCard white--text py-3">Parents</v-card-title>	103	<v-card-title primary-title class="titleCard white--text py-3">Parents</v-card-title>
104	<img src="/static/icon/parents.png" class="ml-3" width="40px" alt="icons" />	104	<img src="/static/icon/parents.png" class="ml-3" width="40px" alt="icons" />
105	<v-card-title class="headline py-1 white--text">{{ parents.length }}</v-card-title>	105	<v-card-title class="headline py-1 white--text">{{ parents.length }}</v-card-title>
106	</v-card>	106	</v-card>
107	</router-link>	107	</router-link>
108	</v-flex>	108	</v-flex>
109	<!-- *** Total Class*** -->	109	<!-- *** Total Class*** -->
110	<v-flex xs12 sm12 md3>	110	<v-flex xs12 sm12 md3>
111	<router-link :to="{ name:'Class' }">	111	<router-link :to="{ name:'Class' }">
112	<v-card flat class="card darkBlue-bgcolor">	112	<v-card flat class="card darkBlue-bgcolor">
113	<v-card-title primary-title class="titleCard white--text py-3">Class</v-card-title>	113	<v-card-title primary-title class="titleCard white--text py-3">Class</v-card-title>
114	<img src="/static/icon/class.png" width="40" alt="icons" class="ml-2" />	114	<img src="/static/icon/class.png" width="40" alt="icons" class="ml-2" />
115	<v-card-title class="headline py-1 white--text">{{ classes.length }}</v-card-title>	115	<v-card-title class="headline py-1 white--text">{{ classes.length }}</v-card-title>
116	</v-card>	116	</v-card>
117	</router-link>	117	</router-link>
118	</v-flex>	118	</v-flex>
119	</v-layout>	119	</v-layout>
120	</v-flex>	120	</v-flex>
121	<p	121	<p
122	v-if="studentsData.length === 0 && role == 'PARENT'"	122	v-if="studentsData.length === 0 && role == 'PARENT'"
123	class="text-center title grey lighten-4 error--text"	123	class="text-center title grey lighten-4 error--text"
124	>You have no student registered with scholl</p>	124	>You have no student registered with scholl</p>
125	<v-layout v-if="role != 'PARENT'">	125	<v-layout v-if="role != 'PARENT'">
126	<v-flex xs12>	126	<v-flex xs12>
127	<v-card class="card mt-2 account-Card">	127	<v-card class="card mt-2 account-Card">
128	<h4>	128	<h4>
129	<b>Account</b>	129	<b>Account</b>
130	</h4>	130	</h4>
131	<v-layout wrap>	131	<v-layout wrap>
132	<v-flex xs12 sm12 md3>	132	<v-flex xs12 sm12 md3>
133	<v-list two-line>	133	<v-list two-line>
134	<template>	134	<template>
135	<v-list-tile>	135	<v-list-tile>
136	<v-list-tile-avatar>	136	<v-list-tile-avatar>
137	<v-icon class="account-circle darkBlue-color">panorama_fish_eye</v-icon>	137	<v-icon class="account-circle darkBlue-color">panorama_fish_eye</v-icon>
138	</v-list-tile-avatar>	138	</v-list-tile-avatar>
139	<v-list-tile-content>	139	<v-list-tile-content>
140	<v-list-tile-title class="mt-2">	140	<v-list-tile-title class="mt-2">
141	<p class="subheading font-color">Fees</p>	141	<p class="subheading font-color">Fees</p>
142	</v-list-tile-title>	142	</v-list-tile-title>
143	<v-list-tile-title>Rs. {{ feeData.totalFees }}</v-list-tile-title>	143	<v-list-tile-title>Rs. {{ feeData.totalFees }}</v-list-tile-title>
144	</v-list-tile-content>	144	</v-list-tile-content>
145	</v-list-tile>	145	</v-list-tile>
146	<v-list-tile>	146	<v-list-tile>
147	<v-list-tile-avatar>	147	<v-list-tile-avatar>
148	<v-icon class="account-circle yellowDark-color">panorama_fish_eye</v-icon>	148	<v-icon class="account-circle yellowDark-color">panorama_fish_eye</v-icon>
149	</v-list-tile-avatar>	149	</v-list-tile-avatar>
150	<v-list-tile-content>	150	<v-list-tile-content>
151	<v-list-tile-title class="mt-2">	151	<v-list-tile-title class="mt-2">
152	<p class="subheading font-color">Collection</p>	152	<p class="subheading font-color">Collection</p>
153	</v-list-tile-title>	153	</v-list-tile-title>
154	<v-list-tile-title>Rs. {{ feeData.totalCollection }}</v-list-tile-title>	154	<v-list-tile-title>Rs. {{ feeData.totalCollection }}</v-list-tile-title>
155	</v-list-tile-content>	155	</v-list-tile-content>
156	</v-list-tile>	156	</v-list-tile>
157	<v-list-tile>	157	<v-list-tile>
158	<v-list-tile-avatar>	158	<v-list-tile-avatar>
159	<v-icon class="account-circle pink-color">panorama_fish_eye</v-icon>	159	<v-icon class="account-circle pink-color">panorama_fish_eye</v-icon>
160	</v-list-tile-avatar>	160	</v-list-tile-avatar>
161	<v-list-tile-content>	161	<v-list-tile-content>
162	<v-list-tile-title class="mt-2">	162	<v-list-tile-title class="mt-2">
163	<p class="subheading font-color">Expences</p>	163	<p class="subheading font-color">Expences</p>
164	</v-list-tile-title>	164	</v-list-tile-title>
165	<v-list-tile-title>Rs. {{ expenseData.sum }}</v-list-tile-title>	165	<v-list-tile-title>Rs. {{ expenseData.sum }}</v-list-tile-title>
166	</v-list-tile-content>	166	</v-list-tile-content>
167	</v-list-tile>	167	</v-list-tile>
168	</template>	168	</template>
169	</v-list>	169	</v-list>
170	</v-flex>	170	</v-flex>
171	<v-flex xs12 sm12 md9 lg9>	171	<v-flex xs12 sm12 md9 lg9>
172	<div id="chart">	172	<div id="chart">
173	<div v-if="this.series">	173	<div v-if="this.series">
174	<apexchart	174	<apexchart
175	type="bar"	175	type="bar"
176	height="250"	176	height="250"
177	style="max-width: 800px !important"	177	style="max-width: 800px !important"
178	:options="chartOptions"	178	:options="chartOptions"
179	:series="series"	179	:series="series"
180	v-show="true"	180	v-show="true"
181	></apexchart>	181	></apexchart>
182	</div>	182	</div>
183	</div>	183	</div>
184	</v-flex>	184	</v-flex>
185	</v-layout>	185	</v-layout>
186	</v-card>	186	</v-card>
187	</v-flex>	187	</v-flex>
188	</v-layout>	188	</v-layout>
189	<v-card class="mt-2 card" v-if="role != 'PARENT'">	189	<v-card class="mt-2 card" v-if="role != 'PARENT'">
190	<!-- <full-calendar	190	<!-- <full-calendar
191	ref="calendar"	191	ref="calendar"
192	defaultView="month"	192	defaultView="month"
193	droppable="false"	193	droppable="false"
194	:events="events"	194	:events="events"
195	:config="config"	195	:config="config"
196	></full-calendar>-->	196	></full-calendar>-->
197	<h4 class="pa-3">	197	<h4 class="pa-3">
198	<b>Notice</b>	198	<b>Notice</b>
199	</h4>	199	</h4>
200		200
201	<v-data-table	201	<v-data-table
202	:items="noticeData"	202	:items="noticeData"
203	class="elevation-0"	203	class="elevation-0"
204	flat	204	flat
205	hide-actions	205	hide-actions
206	hide-headers	206	hide-headers
207	style="border-spacing: 0 !important;"	207	style="border-spacing: 0 !important;"
208	>	208	>
209	<template	209	<template
210	slot="items"	210	slot="items"
211	slot-scope="props"	211	slot-scope="props"
212	v-if="props.index < 5"	212	v-if="props.index < 5"
213	style="border-spacing: 0 !important;"	213	style="border-spacing: 0 !important;"
214	>	214	>
215	<tr class="td-notice">	215	<tr class="td-notice">
216	<td class="grey--text" style="width:18px">{{ props.index + 1}}</td>	216	<td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
217	<td>	217	<td>
218	<span class="grey--text caption">{{ date(props.item.created) }}</span>	218	<span class="grey--text caption">{{ date(props.item.created) }}</span>
219	<br />	219	<br />
220	<span class="body-2">{{ props.item.title}}</span>	220	<span class="body-2">{{ props.item.title}}</span>
221	</td>	221	</td>
222	<td class="noticeDecritpion grey--text mt-2">{{ props.item.description}}</td>	222	<td class="noticeDecritpion grey--text mt-2">{{ props.item.description}}</td>
223		223
224	<td class="text-xs-center">	224	<td class="text-xs-center">
225	<span>	225	<span>
226	<v-tooltip top>	226	<v-tooltip top>
227	<img	227	<img
228	slot="activator"	228	slot="activator"
229	style="cursor:pointer; width:25px; height:25px; "	229	style="cursor:pointer; width:25px; height:25px; "
230	@click="profile"	230	@click="profile"
231	src="/static/icon/view.png"	231	src="/static/icon/view.png"
232	/>	232	/>
233	<span>View</span>	233	<span>View</span>
234	</v-tooltip>	234	</v-tooltip>
235	</span>	235	</span>
236	</td>	236	</td>
237	</tr>	237	</tr>
238	</template>	238	</template>
239	</v-data-table>	239	</v-data-table>
240	</v-card>	240	</v-card>
241	<!-- COURSES -->	241	<!-- COURSES -->
242	<v-layout v-if="role == 'PARENT'">	242	<v-layout v-if="role == 'PARENT'">
243	<v-flex xs12>	243	<v-flex xs12>
244	<v-card class="card mt-2 account-Card">	244	<v-card class="card mt-2 account-Card">
245	<h4>	245	<h4>
246	<b>My Courses</b>	246	<b>My Courses</b>
247	</h4>	247	</h4>
248	<v-layout wrap>	248	<v-layout wrap>
249	<v-flex xs12 sm12>	249	<v-flex xs12 sm12>
250	<v-list two-line>	250	<v-list two-line>
251	<template>	251	<template>
252	<v-list-tile v-for="(course,i) in courseData" :key="i">	252	<v-list-tile v-for="(course,i) in courseData" :key="i">
253	<v-list-tile-avatar>	253	<v-list-tile-avatar>
254	<v-icon	254	<v-icon
255	class="account-circle darkBlue-color"	255	class="account-circle darkBlue-color"
256	style="cursor: pointer;"	256	style="cursor: pointer;"
257	>panorama_fish_eye</v-icon>	257	>panorama_fish_eye</v-icon>
258	</v-list-tile-avatar>	258	</v-list-tile-avatar>
259	<v-list-tile-content>	259	<v-list-tile-content>
260	<v-list-tile-title	260	<v-list-tile-title
261	style="cursor: pointer;"	261	style="cursor: pointer;"
262	@click="routeToCourseDetails(course._id)"	262	@click="routeToCourseDetails(course._id)"
263	>{{ course.coursrName }}</v-list-tile-title>	263	>{{ course.courseName }}</v-list-tile-title>
264	</v-list-tile-content>	264	</v-list-tile-content>
265	</v-list-tile>	265	</v-list-tile>
266	</template>	266	</template>
267	</v-list>	267	</v-list>
268	</v-flex>	268	</v-flex>
269	</v-layout>	269	</v-layout>
270	</v-card>	270	</v-card>
271	</v-flex>	271	</v-flex>
272	</v-layout>	272	</v-layout>
273	<v-layout v-if="role == 'PARENT'">	273	<v-layout v-if="role == 'PARENT'">
274	<v-flex xs6>	274	<v-flex xs6>
275	<v-card class="mt-2 card">	275	<v-card class="mt-2 card">
276	<h4 class="pa-3">	276	<h4 class="pa-3">
277	<b>Latest Annoucements</b>	277	<b>Latest Annoucements</b>
278	</h4>	278	</h4>
279		279
280	<v-data-table	280	<v-data-table
281	:items="annoucementData"	281	:items="annoucementData"
282	class="elevation-0"	282	class="elevation-0"
283	flat	283	flat
284	hide-actions	284	hide-actions
285	hide-headers	285	hide-headers
286	style="border-spacing: 0 !important;"	286	style="border-spacing: 0 !important;"
287	>	287	>
288	<template	288	<template
289	slot="items"	289	slot="items"
290	slot-scope="props"	290	slot-scope="props"
291	v-if="props.index < 5"	291	v-if="props.index < 5"
292	style="border-spacing: 0 !important;"	292	style="border-spacing: 0 !important;"
293	>	293	>
294	<tr class="td-notice">	294	<tr class="td-notice">
295	<td class="grey--text" style="width:18px">{{ props.index + 1}}</td>	295	<td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
296	<td>	296	<td>
297	<span class="grey--text caption">{{ date(props.item.created) }}</span>	297	<span class="grey--text caption">{{ date(props.item.created) }}</span>
298	<br />	298	<br />
299	<span class="body-2">{{ props.item.discussionType}}</span>	299	<span class="body-2">{{ props.item.discussionType}}</span>
300	</td>	300	</td>
301	<td class="text-xs-center">	301	<td class="text-xs-center">
302	<span>	302	<span>
303	<v-tooltip top>	303	<v-tooltip top>
304	<img	304	<img
305	slot="activator"	305	slot="activator"
306	style="cursor:pointer; width:25px; height:25px; "	306	style="cursor:pointer; width:25px; height:25px; "
307	src="/static/icon/view.png"	307	src="/static/icon/view.png"
308	/>	308	/>
309	<span>View</span>	309	<span>View</span>
310	</v-tooltip>	310	</v-tooltip>
311	</span>	311	</span>
312	</td>	312	</td>
313	</tr>	313	</tr>
314	</template>	314	</template>
315	</v-data-table>	315	</v-data-table>
316	</v-card>	316	</v-card>
317	</v-flex>	317	</v-flex>
318	<v-flex xs6>	318	<v-flex xs6>
319	<v-card class="mt-2 card">	319	<v-card class="mt-2 card">
320	<h4 class="pa-3">	320	<h4 class="pa-3">
321	<b>Online User</b>	321	<b>Online User</b>
322	</h4>	322	</h4>
323		323
324	<v-data-table	324	<v-data-table
325	:items="onlineUser"	325	:items="onlineUser"
326	class="elevation-0"	326	class="elevation-0"
327	flat	327	flat
328	hide-actions	328	hide-actions
329	hide-headers	329	hide-headers
330	style="border-spacing: 0 !important;"	330	style="border-spacing: 0 !important;"
331	>	331	>
332	<template	332	<template
333	slot="items"	333	slot="items"
334	slot-scope="props"	334	slot-scope="props"
335	v-if="props.index < 5"	335	v-if="props.index < 5"
336	style="border-spacing: 0 !important;"	336	style="border-spacing: 0 !important;"
337	>	337	>
338	<tr class="td-notice">	338	<tr class="td-notice">
339	<td class="grey--text" style="width:18px">{{ props.index + 1}}</td>	339	<td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
340	<td>	340	<td>
341	<span class="body-2">{{ props.item.user }}</span>	341	<span class="body-2">{{ props.item.user }}</span>
342	</td>	342	</td>
343	<td class="text-xs-center">	343	<td class="text-xs-center">
344	<span>	344	<span>
345	<v-tooltip top>	345	<v-tooltip top>
346	<img	346	<img
347	slot="activator"	347	slot="activator"
348	style="cursor:pointer; width:25px; height:25px; "	348	style="cursor:pointer; width:25px; height:25px; "
349	src="/static/icon/view.png"	349	src="/static/icon/view.png"
350	/>	350	/>
351	<span>View</span>	351	<span>View</span>
352	</v-tooltip>	352	</v-tooltip>
353	</span>	353	</span>
354	</td>	354	</td>
355	</tr>	355	</tr>
356	</template>	356	</template>
357	</v-data-table>	357	</v-data-table>
358	</v-card>	358	</v-card>
359	</v-flex>	359	</v-flex>
360	</v-layout>	360	</v-layout>
361	</v-container>	361	</v-container>
362	</v-flex>	362	</v-flex>
363	<v-flex xs12 sm12 md3>	363	<v-flex xs12 sm12 md3>
364	<v-card height="100%" class="elevation-0 mt-3 profileDasboard">	364	<v-card height="100%" class="elevation-0 mt-3 profileDasboard">
365	<v-card-text>	365	<v-card-text>
366	<h4 class="text-xs-center py-3">	366	<h4 class="text-xs-center py-3">
367	<b>Profile</b>	367	<b>Profile</b>
368	</h4>	368	</h4>
369	<v-flex xs12 class="py-3">	369	<v-flex xs12 class="py-3">
370	<v-layout wrap>	370	<v-layout wrap>
371	<v-flex xs12 sm12 md4>	371	<v-flex xs12 sm12 md4>
372	<img src="/static/icon/user.png" v-if="!userData.schoolLogoUrl" width="80" />	372	<img src="/static/icon/user.png" v-if="!userData.schoolLogoUrl" width="80" />
373	<img	373	<img
374	:src="userData.schoolLogoUrl"	374	:src="userData.schoolLogoUrl"
375	v-else-if="userData.schoolLogoUrl"	375	v-else-if="userData.schoolLogoUrl"
376	width="80"	376	width="80"
377	/>	377	/>
378	</v-flex>	378	</v-flex>
379	<v-flex xs12 sm12 md6>	379	<v-flex xs12 sm12 md6>
380	<p class="mb-0 body-1">	380	<p class="mb-0 body-1">
381	<i>{{ userData.name }}</i>	381	<i>{{ userData.name }}</i>
382	</p>	382	</p>
383	<p class="mb-0 caption grey--text">{{ userData.email }}</p>	383	<p class="mb-0 caption grey--text">{{ userData.email }}</p>
384	<p class="mb-0 caption grey--text">{{ userData.mobile }}</p>	384	<p class="mb-0 caption grey--text">{{ userData.mobile }}</p>
385	<address class="caption grey--text mb-3">{{ userData.address }}</address>	385	<address class="caption grey--text mb-3">{{ userData.address }}</address>
386	</v-flex>	386	</v-flex>
387	</v-layout>	387	</v-layout>
388	</v-flex>	388	</v-flex>
389	<hr />	389	<hr />
390	<div class="text-xs-center py-3 subheading font-weight-bold">Calender</div>	390	<div class="text-xs-center py-3 subheading font-weight-bold">Calender</div>
391	<vue-event-calendar :events="demoEvents"></vue-event-calendar>	391	<vue-event-calendar :events="activityEvents"></vue-event-calendar>
392	<!-- LATEST ACTIVITY -->	392	<!-- LATEST ACTIVITY -->
393	<v-card class="my-3 elevation-0">	393	<v-card class="my-3 elevation-0">
394	<v-card-text>	394	<v-card-text>
395	<div class="text-xs-center subheading font-weight-bold">Latest Activity</div>	395	<v-card-title class="justify-center subheading font-weight-bold">Latest Activity</v-card-title>
396	<div>	396	<div v-for="(activity,index) in activityList" :key="index" class="mt-2">
397	<span	397	<span
398	style="background-color:yellow ;height: 12px;width: 12px;border-radius: 50%;display: inline-block;"	398	:style="{ 'background-color': colorsArray[index%colorsArray.length] }"
		399	style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
399	></span>	400	></span>
		401	<div style="display: inline-block;" class="ml-2">
		402	<div
		403	class="grey--text lighten-1 caption"
		404	>{{moment(activity.meetingEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
		405	<div class="body-2">{{activity.meetingEvent.title}}</div>
		406	</div>
400	</div>	407	</div>
401	</v-card-text>	408	</v-card-text>
402	</v-card>	409	</v-card>
403	</v-card-text>	410	</v-card-text>
404	</v-card>	411	</v-card>
405	</v-flex>	412	</v-flex>
406	</v-layout>	413	</v-layout>
407	</v-flex>	414	</v-flex>
408	</v-layout>	415	</v-layout>
409	<v-dialog v-model="dialog" max-width="500">	416	<v-dialog v-model="dialog" max-width="500">
410	<v-card color="grey lighten-4" flat>	417	<v-card color="grey lighten-4" flat>
411	<v-toolbar dark color="fixcolors">	418	<v-toolbar dark color="fixcolors">
412	<v-spacer></v-spacer>	419	<v-spacer></v-spacer>
413	<v-btn icon @click="dialog= false">	420	<v-btn icon @click="dialog= false">
414	<v-icon>close</v-icon>	421	<v-icon>close</v-icon>
415	</v-btn>	422	</v-btn>
416	</v-toolbar>	423	</v-toolbar>
417	<v-flex class="py-4">	424	<v-flex class="py-4">
418	<v-list-tile>	425	<v-list-tile>
419	<v-list-tile-action>	426	<v-list-tile-action>
420	<v-icon>edit</v-icon>	427	<v-icon>edit</v-icon>
421	</v-list-tile-action>	428	</v-list-tile-action>
422	<v-list-tile-content>	429	<v-list-tile-content>
423	<v-list-tile-title>{{ selected.title }}</v-list-tile-title>	430	<v-list-tile-title>{{ selected.title }}</v-list-tile-title>
424	</v-list-tile-content>	431	</v-list-tile-content>
425	</v-list-tile>	432	</v-list-tile>
426	<v-list-tile>	433	<v-list-tile>
427	<v-list-tile-action>	434	<v-list-tile-action>
428	<v-icon>access_time</v-icon>	435	<v-icon>access_time</v-icon>
429	</v-list-tile-action>	436	</v-list-tile-action>
430	<v-list-tile-content>	437	<v-list-tile-content>
431	<v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title>	438	<v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title>
432	</v-list-tile-content>	439	</v-list-tile-content>
433	</v-list-tile>	440	</v-list-tile>
434	</v-flex>	441	</v-flex>
435	</v-card>	442	</v-card>
436	</v-dialog>	443	</v-dialog>
437	</v-app>	444	</v-app>
438	</template>	445	</template>
439		446
440	<script>	447	<script>
441	import http from "@/Services/http.js";	448	import http from "@/Services/http.js";
442	import moment from "moment";	449	import moment from "moment";
443	import AllApiCalls from "@/Services/AllApiCalls.js";	450	import AllApiCalls from "@/Services/AllApiCalls.js";
444	// import { FunctionalCalendar } from "vue-functional-calendar";	451	// import { FunctionalCalendar } from "vue-functional-calendar";
445		452
446	export default {	453	export default {
447	components: {	454	components: {
448	// FunctionalCalendar	455	// FunctionalCalendar
449	},	456	},
450	mixins: [AllApiCalls],	457	mixins: [AllApiCalls],
451	data() {	458	data() {
452	return {	459	return {
453	// data: {	460	// data: {
454	// clieckedToday: false	461	// clieckedToday: false
455	// },	462	// },
456	// markedDates: ["16/4/2019", "18/4/2019", "20/4/2019", "21/4/2019"],	463	// markedDates: ["16/4/2019", "18/4/2019", "20/4/2019", "21/4/2019"],
457	// calendarData: {},	464	// calendarData: {},
458	// calendar: {},	465	// calendar: {},
459		466
460	colorsArray: ["#ff8a89", "#71d9ea", "#7852cc", "#F9A825"],	467	// CALENDER
461	demoEvents: [	468	moment: moment,
462	{	469	activityEvents: [],
463	date: "2020/01/10", // Required
464	title: "Foo" // Required
465	},
466	{
467	date: "2020/01/12",
468	title: "Bar",
469	desc: "description",
470	customClass: "disabled highlight" // Custom classes to an calendar cell
471	}
472	],
473	onlineUser: [	470	onlineUser: [
474	{	471	{
475	user: "Student Demo"	472	user: "Student Demo"
476	},	473	},
477	{	474	{
478	user: "Teacher Demo"	475	user: "Teacher Demo"
479	},	476	},
480	{	477	{
481	user: "Priyansh Gupta"	478	user: "Priyansh Gupta"
482	},	479	},
483	{	480	{
484	user: "Gaurav Aggarwal"	481	user: "Gaurav Aggarwal"
485	},	482	},
486	{	483	{
487	user: "Approve Arorra"	484	user: "Approve Arorra"
488	}	485	}
489	],	486	],
490	showLoader: false,	487	showLoader: false,
491	calendarData: {},	488	calendarData: {},
492	dialog: false,	489	dialog: false,
493	dialogNotice: false,	490	dialogNotice: false,
494	HolidaysList: [],	491	HolidaysList: [],
495	EventsList: [],	492	EventsList: [],
496	events: [],	493	events: [],
497	config: {	494	config: {
498	eventClick: event => {	495	eventClick: event => {
499	this.selected = event;	496	this.selected = event;
500	this.dialog = true;	497	this.dialog = true;
501	}	498	}
502	},	499	},
503	selected: {},	500	selected: {},
504	barGraph: [],	501	barGraph: [],
505	// notice: {},	502	// notice: {},
506	userData: {},	503	userData: {},
507	dated: new Date(2018, 0, 9),	504	dated: new Date(2018, 0, 9),
508	userList: [],	505	userList: [],
509	sectionList: [],	506	sectionList: [],
510	students: "",	507	students: "",
511	parents: "",	508	parents: "",
512	teachers: "",	509	teachers: "",
513	classes: "",	510	classes: "",
514	noticeData: [],	511	noticeData: [],
515	expenseData: [],	512	expenseData: [],
516	feeData: [],	513	feeData: [],
517	collectionData: [],	514	collectionData: [],
518	courseData: [],	515	courseData: [],
519	studentsData: [],	516	studentsData: [],
520	annoucementData: [],	517	annoucementData: [],
521	role: "",	518	role: "",
522	attrs: [	519	attrs: [
523	{	520	{
524	key: "today",	521	key: "today",
525	highlight: true,	522	highlight: true,
526	dates: new Date()	523	dates: new Date()
527	}	524	}
528	],	525	],
529	drawer: true,	526	drawer: true,
530	items: [	527	items: [
531	{ title: "Home", icon: "dashboard" },	528	{ title: "Home", icon: "dashboard" },
532	{ title: "About", icon: "question_answer" }	529	{ title: "About", icon: "question_answer" }
533	],	530	],
534	right: null,	531	right: null,
535		532
536	series: [	533	series: [
537	{	534	{
538	name: "Total",	535	name: "Total",
539	data: []	536	data: []
540	}	537	}
541	],	538	],
542	chartOptions: {	539	chartOptions: {
543	chart: {	540	chart: {
544	type: "bar",	541	type: "bar",
545	height: 150,	542	height: 150,
546	stacked: true	543	stacked: true
547	// animations: {	544	// animations: {
548	// enabled: true,	545	// enabled: true,
549	// easing: "easeinout",	546	// easing: "easeinout",
550	// speed: 1200,	547	// speed: 1200,
551	// animateGradually: {	548	// animateGradually: {
552	// enabled: true,	549	// enabled: true,
553	// delay: 450	550	// delay: 450
554	// },	551	// },
555	// dynamicAnimation: {	552	// dynamicAnimation: {
556	// enabled: true,	553	// enabled: true,
557	// speed: 450	554	// speed: 450
558	// }	555	// }
559	// }	556	// }
560	},	557	},
561	plotOptions: {	558	plotOptions: {
562	bar: {	559	bar: {
563	horizontal: false,	560	horizontal: false,
564	columnWidth: "25%",	561	columnWidth: "25%",
565	// endingShape: "rounded",	562	// endingShape: "rounded",
566	distributed: true	563	distributed: true
567	}	564	}
568	},	565	},
569	responsive: [	566	responsive: [
570	{	567	{
571	breakpoint: 480,	568	breakpoint: 480,
572	options: {	569	options: {
573	legend: {	570	legend: {
574	position: "bottom",	571	position: "bottom",
575	offsetX: -10,	572	offsetX: -10,
576	offsetY: 0	573	offsetY: 0
577	}	574	}
578	}	575	}
579	}	576	}
580	],	577	],
581	legend: {	578	legend: {
582	show: false	579	show: false
583	},	580	},
584	colors: ["#7852cc", "#f9a825", "#ff8a89"],	581	colors: ["#7852cc", "#f9a825", "#ff8a89"],
585	dataLabels: {	582	dataLabels: {
586	enabled: false	583	enabled: false
587	},	584	},
588	stroke: {	585	stroke: {
589	show: true,	586	show: true,
590	width: 2,	587	width: 2,
591	colors: ["transparent"]	588	colors: ["transparent"]
592	},	589	},
593	xaxis: {	590	xaxis: {
594	categories: ["Fee", "Collections", "Expences"]	591	categories: ["Fee", "Collections", "Expences"]
595	},	592	},
596	yaxis: {	593	yaxis: {
597	title: {	594	title: {
598	text: ""	595	text: ""
599	}	596	}
600	},	597	},
601	fill: {	598	fill: {
602	opacity: 1	599	opacity: 1
603	},	600	},
604	tooltip: {	601	tooltip: {
605	y: {	602	y: {
606	formatter: function(val, opts) {	603	formatter: function(val, opts) {
607	// console.log("opts",opts.w.config.xaxis.categories)	604	// console.log("opts",opts.w.config.xaxis.categories)
608	return "" + val + " ";	605	return "" + val + " ";
609	}	606	}
610	}	607	}
611	}	608	}
612	}	609	},
		610
		611	// LATEST ACTIVITY
		612	colorsArray: ["#ff8a89", "#71d9ea", "#7852cc", "#F9A825"],
		613	activityList: []
613	};	614	};
614	},	615	},
615	mounted() {	616	mounted() {
616	// = this.$store.state.schoolToken;	617	// = this.$store.state.schoolToken;
617	// console.log("this.$store.state.role", this.token);	618	// console.log("this.$store.state.role", this.token);
618	if (this.$store.state.role === "ADMIN") {	619	if (this.$store.state.role === "ADMIN") {
619	this.token = this.$store.state.token;	620	this.token = this.$store.state.token;
620	} else if (this.$store.state.schoolRole === "SUPERADMIN") {	621	} else if (this.$store.state.schoolRole === "SUPERADMIN") {
621	this.token = this.$store.state.schoolToken;	622	this.token = this.$store.state.schoolToken;
622	} else if (this.$store.state.role === "TEACHER") {	623	} else if (this.$store.state.role === "TEACHER") {
623	this.token = this.$store.state.token;	624	this.token = this.$store.state.token;
624	} else if (this.$store.state.role === "ACCOUNTANT") {	625	} else if (this.$store.state.role === "ACCOUNTANT") {
625	this.token = this.$store.state.token;	626	this.token = this.$store.state.token;
626	} else if (this.$store.state.role === "LIBRARIAN") {	627	} else if (this.$store.state.role === "LIBRARIAN") {
627	this.token = this.$store.state.token;	628	this.token = this.$store.state.token;
628	} else if (this.$store.state.role === "PARENT") {	629	} else if (this.$store.state.role === "PARENT") {
629	this.token = this.$store.state.token;	630	this.token = this.$store.state.token;
630	}	631	}
631	this.role = this.$store.state.role;	632	this.role = this.$store.state.role;
632	// console.log("role", this.$store.state.schoolRole,"tt",this.$store.state.schoolToken);	633	// console.log("role", this.$store.state.schoolRole,"tt",this.$store.state.schoolToken);
633	// this.getData();	634	// this.getData();
634	this.getStudents();	635	this.getStudents();
635	this.getTeachers();	636	this.getTeachers();
636	this.getParents();	637	this.getParents();
637	this.getClasses();	638	this.getClasses();
638	this.getNoticeData();	639	this.getNoticeData();
639	this.getUserData();	640	this.getUserData();
640	this.getFeesAndCollectionsData();	641	this.getFeesAndCollectionsData();
641	this.getExpensesData();	642	this.getExpensesData();
642	this.getparentStudents();	643	this.getparentStudents();
643	// this.getUsersList();	644	// this.getUsersList();
644	},	645	},
645	methods: {	646	methods: {
646	async routeToCourseDetails(courseId) {	647	async routeToCourseDetails(courseId) {
647	/* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/	648	/* getParticularCourseDetail- To get courseDetail - defined in GetApis.js*/
648	let response = await this.getParticularCourseDetail(courseId);	649	let response = await this.getParticularCourseDetail(courseId);
649		650
650	/* If the response is null then dont route */	651	/* If the response is null then dont route */
651	if (response.data.data.length > 0) {	652	if (response.data.data.length > 0) {
652	this.$router.push({	653	this.$router.push({
653	name: "Course Details",	654	name: "Course Details",
654	query: { courseId: courseId }	655	query: { courseId: courseId }
655	});	656	});
656	} else {	657	} else {
657	this.seeSnackbar("No Data Available", "warning");	658	this.seeSnackbar("No Data Available", "warning");
658	}	659	}
659	},	660	},
660	studentMeetingEvents() {	661
661	http()
662	.get("/studentMeetingEvents", {
663	params: {
664	studentId: localStorage.getItem("parentStudentId")
665	}
666	})
667	.then(response => {
668	console.log("response of studentMeetingEvents - ", response);
669	this.showLoader = false;
670	})
671	.catch(err => {
672	console.log("err====>", err);
673	this.showLoader = false;
674	});
675	},
676	closeNotice() {	662	closeNotice() {
677	this.dialogNotice = false;	663	this.dialogNotice = false;
678	},	664	},
679	profile() {	665	profile() {
680	// this.editedIndex = this.desserts.indexOf(item);	666	// this.editedIndex = this.desserts.indexOf(item);
681	// this.notice = Object.assign({}, item);	667	// this.notice = Object.assign({}, item);
682	// this.dialogNotice = true;	668	// this.dialogNotice = true;
683	this.$router.push({ name: "NoticeBoard" });	669	this.$router.push({ name: "NoticeBoard" });
684	},	670	},
685	date: function(date) {	671	date: function(date) {
686	return moment(date).format("MMMM DD, YYYY HH:mm");	672	return moment(date).format("MMMM DD, YYYY HH:mm");
687	},	673	},
		674	activityDate(date) {
		675	return moment(date).format("MMMM DD, YYYY");
		676	},
688	refreshEvents() {	677	refreshEvents() {
689	this.$refs.calendar.$emit("refetch-events");	678	this.$refs.calendar.$emit("refetch-events");
690	},	679	},
691	removeEvent() {	680	removeEvent() {
692	this.$refs.calendar.$emit("remove-event", this.selected);	681	this.$refs.calendar.$emit("remove-event", this.selected);
693	this.selected = {};	682	this.selected = {};
694	},	683	},
695	eventSelected(event) {	684	eventSelected(event) {
696	this.selected = event;	685	this.selected = event;
697	console.log("this.selected", this.selected);	686	console.log("this.selected", this.selected);
698	},	687	},
699	// eventDropStart: function(event) {	688	// eventDropStart: function(event) {
700	// event.editable = false;	689	// event.editable = false;
701	// },	690	// },
702	eventCreated(...test) {	691	eventCreated(...test) {
703	console.log(test);	692	console.log(test);
704	},	693	},
705	getStudents() {	694	getStudents() {
706	http()	695	http()
707	.get("/getStudentsList", {	696	.get("/getStudentsList", {
708	headers: {	697	headers: {
709	Authorization: "Bearer " + this.token	698	Authorization: "Bearer " + this.token
710	}	699	}
711	})	700	})
712	.then(response => {	701	.then(response => {
713	this.students = response.data.data;	702	this.students = response.data.data;
714	this.showLoader = false;	703	this.showLoader = false;
715	})	704	})
716	.catch(error => {	705	.catch(error => {
717	// console.log("err====>", err);	706	// console.log("err====>", err);
718	this.showLoader = false;	707	this.showLoader = false;
719	if (error.response.status === 401) {	708	if (error.response.status === 401) {
720	this.$router.replace({ path: "/" });	709	this.$router.replace({ path: "/" });
721	this.$store.dispatch("setToken", null);	710	this.$store.dispatch("setToken", null);
722	this.$store.dispatch("Id", null);	711	this.$store.dispatch("Id", null);
723	}	712	}
724	});	713	});
725	},	714	},
726	getParents() {	715	getParents() {
727	http()	716	http()
728	.get("/getParentsList", {	717	.get("/getParentsList", {
729	headers: {	718	headers: {
730	Authorization: "Bearer " + this.token	719	Authorization: "Bearer " + this.token
731	}	720	}
732	})	721	})
733	.then(response => {	722	.then(response => {
734	this.parents = response.data.data;	723	this.parents = response.data.data;
735	this.showLoader = false;	724	this.showLoader = false;
736	})	725	})
737	.catch(error => {	726	.catch(error => {
738	// console.log("err====>", err);	727	// console.log("err====>", err);
739	this.showLoader = false;	728	this.showLoader = false;
740	});	729	});
741	},	730	},
742	getTeachers() {	731	getTeachers() {
743	http()	732	http()
744	.get("/getTeachersList", {	733	.get("/getTeachersList", {
745	headers: {	734	headers: {
746	Authorization: "Bearer " + this.token	735	Authorization: "Bearer " + this.token
747	}	736	}
748	})	737	})
749	.then(response => {	738	.then(response => {
750	this.teachers = response.data.data;	739	this.teachers = response.data.data;
751	this.showLoader = false;	740	this.showLoader = false;
752	})	741	})
753	.catch(error => {	742	.catch(error => {
754	// console.log("err====>", err);	743	// console.log("err====>", err);
755	this.showLoader = false;	744	this.showLoader = false;
756	});	745	});
757	},	746	},
758	getClasses() {	747	getClasses() {
759	http()	748	http()
760	.get("/getClassesList", {	749	.get("/getClassesList", {
761	headers: {	750	headers: {
762	Authorization: "Bearer " + this.token	751	Authorization: "Bearer " + this.token
763	}	752	}
764	})	753	})
765	.then(response => {	754	.then(response => {
766	this.classes = response.data.data;	755	this.classes = response.data.data;
767	this.showLoader = false;	756	this.showLoader = false;
768	})	757	})
769	.catch(error => {	758	.catch(error => {
770	this.showLoader = false;	759	this.showLoader = false;
771	});	760	});
772	},	761	},
773	getNoticeData() {	762	getNoticeData() {
774	this.showLoader = true;	763	this.showLoader = true;
775	http()	764	http()
776	.get("/getEventsList", {	765	.get("/getEventsList", {
777	headers: {	766	headers: {
778	Authorization: "Bearer " + this.token	767	Authorization: "Bearer " + this.token
779	}	768	}
780	})	769	})
781	.then(response => {	770	.then(response => {
782	this.noticeData = response.data.data;	771	this.noticeData = response.data.data;
783	this.showLoader = false;	772	this.showLoader = false;
784	})	773	})
785	.catch(error => {	774	.catch(error => {
786	this.showLoader = false;	775	this.showLoader = false;
787	});	776	});
788	},	777	},
789	getUserData() {	778	getUserData() {
790	// this.showLoader = true;	779	// this.showLoader = true;
791	http()	780	http()
792	.get("/getParticularUserDetail", {	781	.get("/getParticularUserDetail", {
793	headers: {	782	headers: {
794	Authorization: "Bearer " + this.token	783	Authorization: "Bearer " + this.token
795	}	784	}
796	})	785	})
797	.then(response => {	786	.then(response => {
798	this.userData = response.data.data;	787	this.userData = response.data.data;
799	this.showLoader = false;	788	this.showLoader = false;
800	})	789	})
801	.catch(error => {	790	.catch(error => {
802	this.showLoader = false;	791	this.showLoader = false;
803	});	792	});
804	},	793	},
805		794
806	getFeesAndCollectionsData() {	795	getFeesAndCollectionsData() {
807	http()	796	http()
808	.get("/getTotalFeesAndCollections", {	797	.get("/getTotalFeesAndCollections", {
809	headers: {	798	headers: {
810	Authorization: "Bearer " + this.token	799	Authorization: "Bearer " + this.token
811	}	800	}
812	})	801	})
813	.then(response => {	802	.then(response => {
814	this.feeData = response.data.data;	803	this.feeData = response.data.data;
815	// this.collectionData = response.data.data;	804	// this.collectionData = response.data.data;
816	this.series[0].data[0] = this.feeData.totalFees;	805	this.series[0].data[0] = this.feeData.totalFees;
817	this.series[0].data[1] = this.feeData.totalCollection;	806	this.series[0].data[1] = this.feeData.totalCollection;
818	// console.log("this.series====", this.series);	807	// console.log("this.series====", this.series);
819		808
820	this.showLoader = false;	809	this.showLoader = false;
821	})	810	})
822	.catch(error => {	811	.catch(error => {
823	this.showLoader = false;	812	this.showLoader = false;
824	});	813	});
825	},	814	},
826	getExpensesData() {	815	getExpensesData() {
827	http()	816	http()
828	.get("/getTotalExpenses", {	817	.get("/getTotalExpenses", {
829	headers: {	818	headers: {
830	Authorization: "Bearer " + this.token	819	Authorization: "Bearer " + this.token
831	}	820	}
832	})	821	})
833	.then(response => {	822	.then(response => {
834	this.expenseData = response.data.data;	823	this.expenseData = response.data.data;
835	// var array = response.data.data.sum;	824	// var array = response.data.data.sum;
836	this.series[0].data[2] = this.expenseData.sum;	825	this.series[0].data[2] = this.expenseData.sum;
837	// this.series = [	826	// this.series = [
838	// {	827	// {
839	// name: "Total",	828	// name: "Total",
840	// data: array	829	// data: array
841	// }	830	// }
842	// ];	831	// ];
843	// console.log("this.series====", this.series);	832	// console.log("this.series====", this.series);
844	this.showLoader = false;	833	this.showLoader = false;
845	})	834	})
846	.catch(error => {	835	.catch(error => {
847	this.showLoader = false;	836	this.showLoader = false;
848	});	837	});
849	},	838	},
850	getparentStudents() {	839	getparentStudents() {
851	this.showLoader = true;	840	this.showLoader = true;
852	http()	841	http()
853	.get("/parentStudentsList")	842	.get("/parentStudentsList")
854	.then(response => {	843	.then(response => {
855	// console.log("resssssss", response.data.data.students[0].classId);	844	// console.log("resssssss", response.data.data.students[0].classId);
856	this.studentsData = response.data.data;	845	this.studentsData = response.data.data;
857	// localStorage.setItem(	846	// localStorage.setItem(
858	// "parentStudentId",	847	// "parentStudentId",
859	// this.studentsData.students[0]._id	848	// this.studentsData.students[0]._id
860	// );	849	// );
861	// localStorage.setItem(	850	// localStorage.setItem(
862	// "parentClassId",	851	// "parentClassId",
863	// this.studentsData.students[0].classId	852	// this.studentsData.students[0].classId
864	// );	853	// );
865		854
866	if (localStorage.getItem("parentStudentId") == null) {	855	if (localStorage.getItem("parentStudentId") == null) {
867	var parentStudentsId = response.data.data.students[0].classId;	856	var parentStudentsId = response.data.data.students[0].classId;
868	var classId = response.data.data.students[0]._id;	857	var classId = response.data.data.students[0]._id;
869	}	858	}
870	if (localStorage.getItem("parentStudentId")) {	859	if (localStorage.getItem("parentStudentId")) {
871	var parentStudentsId = localStorage.getItem("parentStudentId");	860	var parentStudentsId = localStorage.getItem("parentStudentId");
872	var classId = localStorage.getItem("parentClassId");	861	var classId = localStorage.getItem("parentClassId");
873	}	862	}
874	this.getCourses(parentStudentsId, classId);	863	this.getCourses(parentStudentsId, classId);
875	this.getAnnoucementes(classId);	864	this.getAnnoucementes(classId);
876	this.showLoader = false;	865	this.showLoader = false;
877	})	866	})
878	.catch(err => {	867	.catch(err => {
879	console.log("err====>", err);	868	console.log("err====>", err);
880	this.showLoader = false;	869	this.showLoader = false;
881	});	870	});
882	},	871	},
883	async getCourses(parentStudentsId, classId) {	872	async getCourses(parentStudentsId, classId) {
884	/* getStudentCourses - to get courseData - defined in GetApis.js*/	873	/* getStudentCourses - to get courseData - defined in GetApis.js*/
885	await this.getStudentCourses({	874	await this.getStudentCourses({
886	classId: classId,	875	classId: classId,
887	studentId: parentStudentsId	876	studentId: parentStudentsId
888	});	877	});
889	// this.showLoader = true;	878	// this.showLoader = true;
890	// http()	879	// http()
891	// .get("/getStudentCourses", {	880	// .get("/getStudentCourses", {
892	// params: {	881	// params: {
893	// classId: classId,	882	// classId: classId,
894	// studentId: parentStudentsId	883	// studentId: parentStudentsId
895	// }	884	// }
896	// })	885	// })
897	// .then(response => {	886	// .then(response => {
898	// this.courseData = response.data.data;	887	// this.courseData = response.data.data;
899	// console.log("course data - ",this.courseData)	888	// console.log("course data - ",this.courseData)
900	// this.showLoader = false;	889	// this.showLoader = false;
901	// })	890	// })
902	// .catch(err => {	891	// .catch(err => {
903	// console.log("err====>", err);	892	// console.log("err====>", err);
904	// this.showLoader = false;	893	// this.showLoader = false;
905	// });	894	// });
906	},	895	},
907	getAnnoucementes(classId) {	896	getAnnoucementes(classId) {
908	this.showLoader = true;	897	this.showLoader = true;
909	http()	898	http()
910	.get("/getAnnoucementesList", {	899	.get("/getAnnoucementesList", {
911	params: {	900	params: {
912	classId: classId	901	classId: classId
913	}	902	}
914	})	903	})
915	.then(response => {	904	.then(response => {
916	this.annoucementData = response.data.data;	905	this.annoucementData = response.data.data;
917	this.showLoader = false;	906	this.showLoader = false;
918	})	907	})
919	.catch(err => {	908	.catch(err => {
920	console.log("err====>", err);	909	console.log("err====>", err);

src/pages/meetingEvent/meetingEvent.vue

Diff comments View file @0a52566

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

src/router/paths.js

Diff comments View file @0a52566

 export default [{
         path: '*',
         meta: {
             public: true,
         },
         redirect: {
             path: '/404'
         }
     },
     {
         path: '/404',
         meta: {
             public: true,
         },
         name: 'NotFound',
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/NotFound/NotFound.vue`
             )
     },
     {
         path: '*',
         meta: {},
         name: 'dashboardAdmin',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Dashboard/dashboard.vue`
             )
     },
     {
         path: '/500',
         meta: {
             public: true,
         },
         name: 'ServerError',
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/NotFound/Error.vue`
             )
     },
     {
         path: '/changepassword',
         meta: {},
         name: 'changepassword',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Authentication/changepassword.vue`
             )
     },
     {
         path: '/teachers',
         meta: {
             breadcrumb: false
         },
         name: 'Teachers',
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Teachers/teachers.vue`
             )
     },
     {
         path: '/',
         meta: {
             public: true,
         },
         name: 'Login',
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Authentication/Login.vue`
             )
     },
     {
         path: '/forgetpassword',
         meta: {
             public: true,
         },
         name: 'forgetpassword',
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Authentication/forgetpassword.vue`
             )
     },
     {
         path: '/students',
         meta: {},
         name: 'Students',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Students/students.vue`
             )
     },
     {
         path: '/class',
         meta: {},
         name: 'Class',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Class/addclass.vue`
             )
     },
     {
         path: '/section',
         meta: {},
         name: 'Section',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Section/section.vue`
             )
     },
     {
         path: '/noticeBoard',
         meta: {},
         name: 'Notice Board',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/NoticeBoard/noticeBoard.vue`
             )
     },
     {
         path: '/news',
         meta: {},
         name: 'News',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/News/news.vue`
             )
     },
     // {
     //   path: '/reminder',
     //   meta: { },
     //   name: 'reminder',
     //   props: (route) => ({ type: route.query.type }),
     //   component: () => import(
     //     /* webpackChunkName: "routes" */
     //     /* webpackMode: "lazy-once" */
     //     `@/pages/Reminder/reminder.vue`
     //   )
     // },
     {
         path: '/timeTable',
         meta: {},
         name: 'Time Table',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/TimeTable/timeTable.vue`
             )
     },
     {
         path: '/notification',
         meta: {},
         name: 'Notification',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Notification/notification.vue`
             )
     },
     {
         path: '/parents',
         meta: {},
         name: 'Parents',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Parent/parents.vue`
             )
     },
     // {
     //     path: '/subject',
     //     meta: {},
     //     name: 'Subject',
     //     props: (route) => ({ type: route.query.type }),
     //     component: () =>
     //         import (
     //             /* webpackChunkName: "routes" */
     //             /* webpackMode: "lazy-once" */
     //             `@/pages/Subjects/subjects.vue`
     //         )
     // },
     {
         path: '/dashboard',
         meta: {},
         name: 'Dashboard',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Dashboard/dashboard.vue`
             )
     },
     {
         path: '/CourseDetails',
         meta: {},
         name: 'Course Details',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Dashboard/CourseDetails.vue`
             )
     },
     {
         path: '/ChapterInfo',
         meta: {},
         name: 'Chapter Info',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Dashboard/ChapterInfo.vue`
             )
     },
     {
         path: '/CourseDiscussionForum',
         meta: {},
         name: 'Course Discussion Forum',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Dashboard/CourseDiscussionForum.vue`
             )
     },
     {
+        path: '/Announcement',
+        meta: {},
+        name: 'Announcement',
+        props: (route) => ({
+            type: route.query.type
+        }),
+        component: () =>
+            import(
+                /* webpackChunkName: "routes" */
+                /* webpackMode: "lazy-once" */
+                `@/pages/Dashboard/Announcement.vue`
+            )
+    },
+    {
         path: '/socialMedia',
         meta: {},
         name: 'Social Media',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/socialMedia/socialMedia.vue`
             )
     },
     {
         path: '/gallery',
         meta: {},
         name: 'Gallery',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Gallery/gallery.vue`
             )
     },
     {
         path: '/event',
         meta: {},
         name: 'Event',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Event/event.vue`
             )
     },
     {
         path: '/holiday',
         meta: {},
         name: 'Holiday',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Holiday/holiday.vue`
             )
     },
     {
         path: '/user',
         meta: {},
         name: 'User',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/User/user.vue`
             )
     },
     {
         path: '/AttendenceStudent',
         meta: {},
         name: 'Student Attendence',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Attendence/studentAttendence.vue`
             )
     },
     {
         path: '/AttendenceTeacher',
         meta: {},
         name: 'Teacher Attendence',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Attendence/teacherAttendence.vue`
             )
     },
     {
         path: '/salaryTemplate',
         meta: {},
         name: 'Salary Template',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 `@/pages/Payroll/salaryTemplate.vue`
             )
     },
     {
         path: '/hourlyTemplate',
         meta: {},
         name: 'Hourly Template',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 `@/pages/Payroll/hourlyTemplate.vue`
             )
     },
     {
         path: '/manageSalary',
         meta: {},
         name: 'Manage Salary',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 `@/pages/Payroll/manageSalary.vue`
             )
     },
     // {
     //     path: '/makePayment',
     //     meta: {},
     //     name: 'Make Payment',
     //     props: (route) => ({ type: route.query.type }),
     //     component: () =>
     //         import (
     //             `@/pages/Payroll/makePayment.vue`
     //         )
     // },
     {
         path: '/AttendenceUser',
         meta: {},
         name: 'User Attendence',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Attendence/userAttendence.vue`
             )
     },
     {
         path: '/feeTypes',
         meta: {},
         name: 'Fee Types',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Account/feeTypes.vue`
             )
     },
     {
         path: '/invoice',
         meta: {},
         name: 'Invoice',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Account/invoice.vue`
             )
     },
     {
         path: '/paymentHistory',
         meta: {},
         name: 'Payment History',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Account/paymentHistory.vue`
             )
     },
     {
         path: '/expense',
         meta: {},
         name: 'Expense',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Account/expense.vue`
             )
     },
     {
         path: '/income',
         meta: {},
         name: 'Income',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Account/income.vue`
             )
     },
     {
         path: '/libraryMember',
         meta: {},
         name: 'Library Member',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Library/member.vue`
             )
     },
     {
         path: '/books',
         meta: {},
         name: 'Books',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Library/books.vue`
             )
     },
     {
         path: '/issue',
         meta: {},
         name: 'Issue',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Library/issue.vue`
             )
     },
     {
         path: '/e-books',
         meta: {},
         name: 'E-Books',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Library/eBook.vue`
             )
     },
     {
         path: '/editInvoice/:invoiceid',
         meta: {},
         name: 'Edit Invoice',
         // props: (route) => ({ type: route.query.type }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Account/editInvoice.vue`
             )
     },
     {
         path: '/StudentsAttendence/:id',
         meta: {},
         name: 'View Students Attendence',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Attendence/viewStudentsAttendence.vue`
             )
     },
     {
         path: '/TeacherAttendence/:teacherId',
         meta: {},
         name: 'View Teacher Attendence',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Attendence/viewTeacherAttendence.vue`
             )
     },
     {
         path: '/viewInvoice/:viewInvoiceId',
         meta: {},
         name: 'View Invoice',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Account/viewInvoice.vue`
             )
     },
     {
         path: '/viewPaymentInvoice/:viewPaymentInvoiceId',
         meta: {},
         name: 'View Payment Invoice',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Account/viewPaymentInvoice.vue`
             )
     },
     {
         path: '/globalPayment',
         meta: {},
         name: 'Global Payment',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Account/globalPayment.vue`
             )
     },
     {
         path: '/exam',
         meta: {},
         name: 'Exam',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Exam/exam.vue`
             )
     },
     {
         path: '/grade',
         meta: {},
         name: 'Grade',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Exam/grade.vue`
             )
     },
     {
         path: '/examSchedule',
         meta: {},
         name: 'Exam Schedule',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Exam/examSchedule.vue`
             )
     },
     {
         path: '/examAttendence',
         meta: {},
         name: 'Exam Attendence',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Exam/examAttendence.vue`
             )
     },
     {
         path: '/mark',
         meta: {},
         name: 'Mark',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Mark/mark.vue`
             )
     },
     {
         path: '/viewMark/:markId',
         meta: {},
         name: 'view Mark',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Mark/viewMark.vue`
             )
     },
     {
         path: '/markDistribution',
         meta: {},
         name: 'Mark Distribution',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Mark/markDistribution.vue`
             )
     },
     {
         path: '/meet',
         meta: {},
         name: 'Meet',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Meet/meet.vue`
             )
     },
     {
         path: '/academicYear',
         meta: {},
         name: 'Academic Year',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Administrator/academicYear.vue`
             )
     },
     {
         path: '/systemAdmin',
         meta: {},
         name: 'System Admin',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Administrator/systemAdmin.vue`
             )
     },
     {
         path: '/resetPassword',
         meta: {},
         name: 'Change Password',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Administrator/resetPassword.vue`
             )
     },
     {
         path: '/role',
         meta: {},
         name: 'Role',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Administrator/role.vue`
             )
     },
     {
         path: '/bulkImport',
         meta: {},
         name: 'Bulk Import',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Administrator/bulkImport.vue`
             )
     },
     {
         path: '/studentReport',
         meta: {},
         name: 'Student Report',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Report/studentReport.vue`
             )
     },
     {
         path: '/progressCardReport',
         meta: {},
         name: 'Progress Card Report',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Report/progressCardReport.vue`
             )
     },
     {
         path: '/idCard',
         meta: {},
         name: 'Id Card Report',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 `@/pages/Report/idCard.vue`
             )
     },
     {
         path: '/admitCard',
         meta: {},
         name: 'Admit Card Report',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 `@/pages/Report/admitCard.vue`
             )
     },
     {
         path: '/generalSetting',
         meta: {},
         name: 'General Setting',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/generalSetting/generalSetting.vue`
             )
     },
     {
         path: '/assignment',
         meta: {},
         name: 'Assignment',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 `@/pages/Academic/assignment.vue`
             )
     },
     {
         path: '/routine',
         meta: {},
         name: 'Routine',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 `@/pages/Academic/routine.vue`
             )
     },
     {
         path: '/subject',
         meta: {},
         name: 'Subject',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 `@/pages/Academic/subject.vue`
             )
     },
     {
         path: '/syllabus',
         meta: {},
         name: 'Syllabus',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 `@/pages/Academic/syllabus.vue`
             )
     },
     {
         path: '/course',
         meta: {},
         name: 'Course',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Course/course.vue`
             )
     },
     {
         path: '/courseDetail',
         meta: {},
         name: 'Course Detail',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Course/courseDetail.vue`
             )
     },
     {
         path: '/enrollStudents',
         meta: {},
         name: 'Enroll Students',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Course/enrollStudents.vue`
             )
     },
     {
         path: '/changeStudents',
         meta: {},
         name: 'Change Students',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/changeStudents/changeStudents.vue`
             )
     },
     {
         path: '/annoucement',
         meta: {},
         name: 'Annoucement',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Annoucement/annoucement.vue`
             )
     },
     {
         path: '/meetingEvent',
         meta: {},
         name: 'Meeting Event',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/meetingEvent/meetingEvent.vue`
             )
     },
     //////SCHOOL
     {
         path: '/school',
         meta: {},
         name: 'School',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/School/school.vue`
             )
     },
     {
         path: '/schooldashboard',
         meta: {},
         name: 'View School Dashboard',
         props: (route) => ({
             type: route.query.type
         }),
         component: () =>
             import(
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/School/viewSchoolDashboard.vue`
             )
     }
 ];