viithiisys / School-Management-dashboard

Browse Code »

Commit 1e1e364f193fd7b4e3a588fef38b89026916ff3f

Authored by Neeraj Sharma 2020-08-19 11:05:30 -0400

2 parents a690a86fb9 ab4a9d6ee4

Exists in master and in 2 other branches

implement meet functinlaity and id card issues

Showing 16 changed files Show diff stats

src/api/menu.js

Diff comments View file @1e1e364

1	const adminMenu = [	1	const adminMenu = [
2	// { header: 'Apps' },	2	// { header: 'Apps' },
3	{	3	{
4	title: 'Dashboard',	4	title: 'Dashboard',
5	// group: 'apps',	5	// group: 'apps',
6	name: 'Dashboard',	6	name: 'Dashboard',
7	icon: '/static/icon/dashboard.png',	7	icon: '/static/icon/dashboard.png',
8	},	8	},
9	{	9	{
10	title: 'Class',	10	title: 'Class',
11	// group: 'apps',	11	// group: 'apps',
12	name: 'Class',	12	name: 'Class',
13	icon: '/static/icon/class.png',	13	icon: '/static/icon/class.png',
14	},	14	},
15	{	15	{
16	title: 'Section',	16	title: 'Section',
17	// group: 'apps',	17	// group: 'apps',
18	name: 'Section',	18	name: 'Section',
19	icon: '/static/icon/section.png',	19	icon: '/static/icon/section.png',
20	},	20	},
21	// {	21	// {
22	// title: 'Subjects',	22	// title: 'Subjects',
23	// name: 'Subject',	23	// name: 'Subject',
24	// icon: '/static/icon/subject.png',	24	// icon: '/static/icon/subject.png',
25	// },	25	// },
26	{	26	{
27	title: 'Parents',	27	title: 'Parents',
28	// group: 'apps',	28	// group: 'apps',
29	name: 'Parents',	29	name: 'Parents',
30	icon: '/static/icon/parents.png',	30	icon: '/static/icon/parents.png',
31	},	31	},
32	{	32	{
33	title: 'Teachers',	33	title: 'Teachers',
34	// group: '',	34	// group: '',
35	name: 'Teachers',	35	name: 'Teachers',
36	icon: '/static/icon/teacher.png',	36	icon: '/static/icon/teacher.png',
37	},	37	},
38	{	38	{
39	title: 'Students',	39	title: 'Students',
40	// group: 'apps',	40	// group: 'apps',
41	name: 'Students',	41	name: 'Students',
42	icon: '/static/icon/student.png',	42	icon: '/static/icon/student.png',
43	},	43	},
44	{	44	{
45	title: 'User',	45	title: 'User',
46	name: 'User',	46	name: 'User',
47	icon: '/static/icon/users.png',	47	icon: '/static/icon/users.png',
48	},	48	},
49	{	49	{
50	title: 'Attendance',	50	title: 'Attendance',
51	group: 'Attendance',	51	group: 'Attendance',
52	component: 'Attendance',	52	component: 'Attendance',
53	icon: '/static/icon/attendence.png',	53	icon: '/static/icon/attendence.png',
54	items: [	54	items: [
55	{ name: 'StudentAttendence', title: 'Student Attendance', component: 'Student Attendence', action: '', },	55	{ name: 'StudentAttendence', title: 'Student Attendance', component: 'Student Attendence', action: '', },
56	{ name: 'TeacherAttendence', title: 'Teacher Attendance', component: 'Teacher Attendence', action: '', },	56	{ name: 'TeacherAttendence', title: 'Teacher Attendance', component: 'Teacher Attendence', action: '', },
57	// { name: 'userAttendence', title: 'User Attendance', component: 'User Attendence', action: '', },	57	// { name: 'userAttendence', title: 'User Attendance', component: 'User Attendence', action: '', },
58	]	58	]
59	},	59	},
60	{	60	{
61	title: 'Exam',	61	title: 'Exam',
62	group: 'Exam',	62	group: 'Exam',
63	component: 'Exam',	63	component: 'Exam',
64	icon: '/static/icon/exam.png',	64	icon: '/static/icon/exam.png',
65	items: [	65	items: [
66	{ name: 'Exam', title: 'Exam', component: 'Exam', action: '', },	66	{ name: 'Exam', title: 'Exam', component: 'Exam', action: '', },
67	{ name: 'ExamSchedule', title: 'Exam Schedule', component: 'Exam Schedule', action: '', },	67	{ name: 'ExamSchedule', title: 'Exam Schedule', component: 'Exam Schedule', action: '', },
68	{ name: 'Grade', title: 'Grade', component: 'Grade', action: '', },	68	{ name: 'Grade', title: 'Grade', component: 'Grade', action: '', },
69	// { name: 'userAttendence', title: 'User Attendance', component: 'userAttendence', action: '', },	69	// { name: 'userAttendence', title: 'User Attendance', component: 'userAttendence', action: '', },
70	]	70	]
71	},	71	},
72	{	72	{
73	title: 'Marks',	73	title: 'Marks',
74	group: 'Mark',	74	group: 'Mark',
75	component: 'Mark',	75	component: 'Mark',
76	icon: '/static/icon/marks.png',	76	icon: '/static/icon/marks.png',
77	items: [	77	items: [
78	{ name: 'Mark', title: 'Mark', component: 'Mark', action: '', },	78	{ name: 'Mark', title: 'Mark', component: 'Mark', action: '', },
79	{ name: 'MarkDistribution', title: 'Mark Distribution', component: 'Mark Distribution', action: '', },	79	{ name: 'MarkDistribution', title: 'Mark Distribution', component: 'Mark Distribution', action: '', },
80	// { name: 'Promotion', title: 'promotion', component: 'Promotion', action: '', },	80	// { name: 'Promotion', title: 'promotion', component: 'Promotion', action: '', },
81	// { name: 'userAttendence', title: 'User Attendance', component: 'userAttendence', action: '', },	81	// { name: 'userAttendence', title: 'User Attendance', component: 'userAttendence', action: '', },
82	]	82	]
83	},	83	},
84	{	84	{
85	title: 'Academic',	85	title: 'Academic',
86	group: 'Academic',	86	group: 'Academic',
87	component: 'Academic',	87	component: 'Academic',
88	icon: '/static/icon/school.png',	88	icon: '/static/icon/school.png',
89	items: [	89	items: [
90	{ name: 'Subject', title: 'Subject', component: 'Subject', action: '', },	90	{ name: 'Subject', title: 'Subject', component: 'Subject', action: '', },
91	{ name: 'Syllabus', title: 'Syllabus', component: 'Syllabus', action: '', },	91	{ name: 'Syllabus', title: 'Syllabus', component: 'Syllabus', action: '', },
92	{ name: 'Assignment', title: 'Assignment', component: 'Assignment', action: '', },	92	{ name: 'Assignment', title: 'Assignment', component: 'Assignment', action: '', },
93	{ name: 'Routine', title: 'Routine', component: 'Routine', action: '', },	93	{ name: 'Routine', title: 'Routine', component: 'Routine', action: '', },
94	]	94	]
95	},	95	},
96	{	96	{
97	title: 'Administrator',	97	title: 'Administrator',
98	group: 'Administrator',	98	group: 'Administrator',
99	component: 'Administrator',	99	component: 'Administrator',
100	icon: '/static/icon/adminstrator.png',	100	icon: '/static/icon/adminstrator.png',
101	items: [	101	items: [
102	{ name: 'AcademicYear', title: 'Academic Year', component: 'Academic Year', action: '', },	102	{ name: 'AcademicYear', title: 'Academic Year', component: 'Academic Year', action: '', },
103	// { name: 'systemAdmin', title: 'System Admin', component: 'systemAdmin', action: '', },	103	// { name: 'systemAdmin', title: 'System Admin', component: 'systemAdmin', action: '', },
104	{ name: 'resetPassword', title: 'Change Password', component: 'Change Password', action: '', },	104	{ name: 'resetPassword', title: 'Change Password', component: 'Change Password', action: '', },
105	{ name: 'Role', title: 'Role', component: 'Role', action: '', },	105	{ name: 'Role', title: 'Role', component: 'Role', action: '', },
106	{ name: 'BulkImport', title: 'Bulk Import', component: 'Bulk Import', action: '', },	106	{ name: 'BulkImport', title: 'Bulk Import', component: 'Bulk Import', action: '', },
107		107
108	]	108	]
109	},	109	},
110	{	110	{
111	title: 'Payroll',	111	title: 'Payroll',
112	group: 'Payroll',	112	group: 'Payroll',
113	component: 'Payroll',	113	component: 'Payroll',
114	icon: '/static/icon/dollar.png',	114	icon: '/static/icon/dollar.png',
115	items: [	115	items: [
116	{ name: 'salaryTemplate', title: 'Salary Template', component: 'Salary Template', action: '', },	116	{ name: 'salaryTemplate', title: 'Salary Template', component: 'Salary Template', action: '', },
117	{ name: 'hourlyTemplate', title: 'Hourly Template', component: 'Hourly Template', action: '', },	117	{ name: 'hourlyTemplate', title: 'Hourly Template', component: 'Hourly Template', action: '', },
118	{ name: 'manageSalary', title: 'Manage Salary', component: 'Manage Salary', action: '', },	118	{ name: 'manageSalary', title: 'Manage Salary', component: 'Manage Salary', action: '', },
119	// { name: 'makePayment', title: 'Make Payment', component: 'Make Payment', action: '', },	119	// { name: 'makePayment', title: 'Make Payment', component: 'Make Payment', action: '', },
120	]	120	]
121	},	121	},
122	{	122	{
123	title: 'Notice Board',	123	title: 'Notice Board',
124	name: 'Notice Board',	124	name: 'Notice Board',
125	icon: '/static/icon/notice board.png',	125	icon: '/static/icon/notice board.png',
126	},	126	},
127	{	127	{
128	title: 'News',	128	title: 'News',
129	name: 'News',	129	name: 'News',
130	icon: '/static/icon/news.png',	130	icon: '/static/icon/news.png',
131	},	131	},
132	// {	132	// {
133	// title: 'Reminder',	133	// title: 'Reminder',
134	// name: 'reminder',	134	// name: 'reminder',
135	// icon: 'alarm_add',	135	// icon: 'alarm_add',
136	// },	136	// },
137	{	137	{
138	title: 'Time Table',	138	title: 'Time Table',
139	name: 'Time Table',	139	name: 'Time Table',
140	icon: '/static/icon/time table.png',	140	icon: '/static/icon/time table.png',
141	},	141	},
142	{	142	{
143	title: 'Library',	143	title: 'Library',
144	group: 'Library',	144	group: 'Library',
145	component: 'Library',	145	component: 'Library',
146	icon: '/static/icon/library.png',	146	icon: '/static/icon/library.png',
147	items: [	147	items: [
148	{ name: 'LibraryMember', title: ' Library Member', component: 'Library Member', action: '', },	148	{ name: 'LibraryMember', title: ' Library Member', component: 'Library Member', action: '', },
149	{ name: 'Books', title: 'Books', component: 'Books', action: '', },	149	{ name: 'Books', title: 'Books', component: 'Books', action: '', },
150	{ name: 'Issue', title: ' Issue', component: 'Issue', action: '', },	150	{ name: 'Issue', title: ' Issue', component: 'Issue', action: '', },
151	{ name: 'E-Books', title: 'E-Books', component: 'E-Books', action: '', }	151	{ name: 'E-Books', title: 'E-Books', component: 'E-Books', action: '', }
152		152
153	]	153	]
154	},	154	},
155	{	155	{
156	title: 'Report',	156	title: 'Report',
157	group: 'Report',	157	group: 'Report',
158	component: 'Report',	158	component: 'Report',
159	icon: '/static/icon/reports.png',	159	icon: '/static/icon/reports.png',
160	items: [	160	items: [
161	{ name: 'studentReport', title: 'Student Report', component: 'Student Report', action: '', },	161	{ name: 'studentReport', title: 'Student Report', component: 'Student Report', action: '', },
162	{ name: 'ProgressCardReport', title: 'Progress Card Report', component: 'Progress Card Report', action: '', },	162	{ name: 'ProgressCardReport', title: 'Progress Card Report', component: 'Progress Card Report', action: '', },
163	{ name: 'idCard', title: 'Id Card Report', component: 'Id Card Report', action: '', },	163	{ name: 'idCard', title: 'Id Card Report', component: 'Id Card Report', action: '', },
164	{ name: 'admitCard', title: 'Admit Card Report', component: 'Admit Card Report', action: '', }	164	{ name: 'admitCard', title: 'Admit Card Report', component: 'Admit Card Report', action: '', }
165	]	165	]
166	},	166	},
167	{	167	{
168	title: 'Notification',	168	title: 'Notification',
169	name: 'Notification',	169	name: 'Notification',
170	icon: '/static/icon/notification.png',	170	icon: '/static/icon/notification.png',
171	},	171	},
172	{	172	{
173	title: 'Social Media',	173	title: 'Social Media',
174	name: 'Social Media',	174	name: 'Social Media',
175	icon: '/static/icon/events.png',	175	icon: '/static/icon/events.png',
176	},	176	},
177	{	177	{
178	title: 'Gallery',	178	title: 'Gallery',
179	name: 'Gallery',	179	name: 'Gallery',
180	icon: '/static/icon/gallery.png',	180	icon: '/static/icon/gallery.png',
181	},	181	},
182	{	182	{
183	title: 'Event',	183	title: 'Event',
184	name: 'Event',	184	name: 'Event',
185	icon: '/static/icon/events.png',	185	icon: '/static/icon/events.png',
186	},	186	},
187	{	187	{
188	title: 'Account',	188	title: 'Account',
189	group: 'Account',	189	group: 'Account',
190	component: 'Account',	190	component: 'Account',
191	icon: '/static/icon/accounts.png',	191	icon: '/static/icon/accounts.png',
192	items: [	192	items: [
193	{ name: 'feeTypes', title: 'Fee Types', component: 'Fee Types', action: '', },	193	{ name: 'feeTypes', title: 'Fee Types', component: 'Fee Types', action: '', },
194	{ name: 'Invoice', title: 'Invoice', component: 'Invoice', action: '', },	194	{ name: 'Invoice', title: 'Invoice', component: 'Invoice', action: '', },
195	{ name: 'PaymentHistory', title: 'Payment History', component: 'Payment History', action: '', },	195	{ name: 'PaymentHistory', title: 'Payment History', component: 'Payment History', action: '', },
196	{ name: 'Expense', title: 'Expense', component: 'Expense', action: '', },	196	{ name: 'Expense', title: 'Expense', component: 'Expense', action: '', },
197	{ name: 'Income', title: 'Income', component: 'Income', action: '', },	197	{ name: 'Income', title: 'Income', component: 'Income', action: '', },
198	{ name: 'GlobalPayment', title: 'Global Payment', component: 'Global Payment', action: '', }	198	{ name: 'GlobalPayment', title: 'Global Payment', component: 'Global Payment', action: '', }
199	]	199	]
200	},	200	},
201	{	201	{
202	title: 'Holiday',	202	title: 'Holiday',
203	name: 'Holiday',	203	name: 'Holiday',
204	icon: '/static/icon/holiday.png',	204	icon: '/static/icon/holiday.png',
205	},	205	},
206	{	206	{
207	title: 'General Setting',	207	title: 'General Setting',
208	name: 'General Setting',	208	name: 'General Setting',
209	icon: '/static/icon/settings.png',	209	icon: '/static/icon/settings.png',
210	}	210	}
211	];	211	];
212		212
213	const libraryMenu = [{	213	const libraryMenu = [{
214	title: 'Dashboard',	214	title: 'Dashboard',
215	name: 'Dashboard',	215	name: 'Dashboard',
216	icon: '/static/icon/dashboard.png',	216	icon: '/static/icon/dashboard.png',
217	},	217	},
218	{	218	{
219	title: 'Library',	219	title: 'Library',
220	group: 'Library',	220	group: 'Library',
221	component: 'Library',	221	component: 'Library',
222	icon: '/static/icon/library.png',	222	icon: '/static/icon/library.png',
223	items: [	223	items: [
224	{ name: 'LibraryMember', title: ' Library Member', component: 'Library Member', action: '', },	224	{ name: 'LibraryMember', title: ' Library Member', component: 'Library Member', action: '', },
225	{ name: 'Books', title: 'Books', component: 'Books', action: '', },	225	{ name: 'Books', title: 'Books', component: 'Books', action: '', },
226	{ name: 'Issue', title: ' Issue', component: 'Issue', action: '', },	226	{ name: 'Issue', title: ' Issue', component: 'Issue', action: '', },
227	{ name: 'E-Books', title: 'E-Books', component: 'E-Books', action: '', }	227	{ name: 'E-Books', title: 'E-Books', component: 'E-Books', action: '', }
228		228
229	]	229	]
230	},	230	},
231	];	231	];
232		232
233	const accountMenu = [{	233	const accountMenu = [{
234	title: 'Dashboard',	234	title: 'Dashboard',
235	name: 'Dashboard',	235	name: 'Dashboard',
236	icon: '/static/icon/dashboard.png',	236	icon: '/static/icon/dashboard.png',
237	},	237	},
238		238
239	{	239	{
240	title: 'Account',	240	title: 'Account',
241	group: 'Account',	241	group: 'Account',
242	component: 'Account',	242	component: 'Account',
243	icon: '/static/icon/accounts.png',	243	icon: '/static/icon/accounts.png',
244	items: [	244	items: [
245	{ name: 'feeTypes', title: 'Fee Types', component: 'Fee Types', action: '', },	245	{ name: 'feeTypes', title: 'Fee Types', component: 'Fee Types', action: '', },
246	{ name: 'Invoice', title: 'Invoice', component: 'Invoice', action: '', },	246	{ name: 'Invoice', title: 'Invoice', component: 'Invoice', action: '', },
247	{ name: 'PaymentHistory', title: 'Payment History', component: 'Payment History', action: '', },	247	{ name: 'PaymentHistory', title: 'Payment History', component: 'Payment History', action: '', },
248	{ name: 'Expense', title: 'Expense', component: 'Expense', action: '', },	248	{ name: 'Expense', title: 'Expense', component: 'Expense', action: '', },
249	{ name: 'Income', title: 'Income', component: 'Income', action: '', },	249	{ name: 'Income', title: 'Income', component: 'Income', action: '', },
250	{ name: 'GlobalPayment', title: 'Global Payment', component: 'Global Payment', action: '', }	250	{ name: 'GlobalPayment', title: 'Global Payment', component: 'Global Payment', action: '', }
251	]	251	]
252	},	252	},
253	];	253	];
254		254
255	const schoolMenu = [	255	const schoolMenu = [
256	// { header: 'Apps' },	256	// { header: 'Apps' },
257	{	257	{
258	title: 'Dashboard',	258	title: 'Dashboard',
259	// group: 'apps',	259	// group: 'apps',
260	name: 'View School Dashboard',	260	name: 'View School Dashboard',
261	icon: '/static/icon/dashboard.png',	261	icon: '/static/icon/dashboard.png',
262	},	262	},
263	{	263	{
264	title: 'School',	264	title: 'School',
265	// group: 'apps',	265	// group: 'apps',
266	name: 'School',	266	name: 'School',
267	icon: '/static/schoolIcons/Dashboard.png',	267	icon: '/static/icon/school.png',
268	}	268	},
		269	{
		270	title: 'App Version',
		271	name: 'App Version',
		272	icon: '/static/icon/phone.png',
		273	}
269	];	274	];
270		275
271	const teacherMenu = [{	276	const teacherMenu = [{
272	title: 'Dashboard',	277	title: 'Dashboard',
273	name: 'Dashboard',	278	name: 'Dashboard',
274	icon: '/static/icon/dashboard.png',	279	icon: '/static/icon/dashboard.png',
275	},	280	},
276	{	281	{
277	title: 'Parents',	282	title: 'Parents',
278	// group: 'apps',	283	// group: 'apps',
279	name: 'Parents',	284	name: 'Parents',
280	icon: '/static/icon/parents.png',	285	icon: '/static/icon/parents.png',
281	},	286	},
282	{	287	{
283	title: 'Teachers',	288	title: 'Teachers',
284	// group: '',	289	// group: '',
285	name: 'Teachers',	290	name: 'Teachers',
286	icon: '/static/icon/teacher.png',	291	icon: '/static/icon/teacher.png',
287	},	292	},
288	{	293	{
289	title: 'Students',	294	title: 'Students',
290	// group: 'apps',	295	// group: 'apps',
291	name: 'Students',	296	name: 'Students',
292	icon: '/static/icon/student.png',	297	icon: '/static/icon/student.png',
293	},	298	},
294	{	299	{
295	title: 'Academic',	300	title: 'Academic',
296	group: 'Academic',	301	group: 'Academic',
297	component: 'Academic',	302	component: 'Academic',
298	icon: '/static/icon/school.png',	303	icon: '/static/icon/school.png',
299	items: [	304	items: [
300	{ name: 'Subject', title: 'Subject', component: 'Subject', action: '', },	305	{ name: 'Subject', title: 'Subject', component: 'Subject', action: '', },
301	{ name: 'Syllabus', title: 'Syllabus', component: 'Syllabus', action: '', },	306	{ name: 'Syllabus', title: 'Syllabus', component: 'Syllabus', action: '', },
302	{ name: 'Assignment', title: 'Assignment', component: 'Assignment', action: '', },	307	{ name: 'Assignment', title: 'Assignment', component: 'Assignment', action: '', },
303	{ name: 'Routine', title: 'Routine', component: 'Routine', action: '', },	308	{ name: 'Routine', title: 'Routine', component: 'Routine', action: '', },
304	]	309	]
305	},	310	},
306	{	311	{
307	title: 'Course',	312	title: 'Course',
308	group: 'Course',	313	group: 'Course',
309	component: 'Course',	314	component: 'Course',
310	icon: '/static/icon/school.png',	315	icon: '/static/icon/school.png',
311	items: [	316	items: [
312	{ name: 'Course', title: 'Course', component: 'Course', action: '', },	317	{ name: 'Course', title: 'Course', component: 'Course', action: '', },
313	{ name: 'Enroll Students', title: 'Enroll Students', component: 'Enroll Students', action: '', },	318	{ name: 'Enroll Students', title: 'Enroll Students', component: 'Enroll Students', action: '', },
314	{ name: 'Course Detail', title: 'Course Detail', component: 'Course Detail', action: '', },	319	{ name: 'Course Detail', title: 'Course Detail', component: 'Course Detail', action: '', },
315	{ name: 'Course Discussion', title: 'Course Discussion', component: 'Course Discussion', action: '', },	320	{ name: 'Course Discussion', title: 'Course Discussion', component: 'Course Discussion', action: '', },
316	]	321	]
317	},	322	},
318	{	323	{
319	title: 'Annoucement',	324	title: 'Annoucement',
320	// group: 'apps',	325	// group: 'apps',
321	name: 'Annoucement',	326	name: 'Annoucement',
322	icon: '/static/icon/student.png',	327	icon: '/static/icon/student.png',
323	},	328	},
324	{	329	{
325	title: 'Meeting Event',	330	title: 'Meeting Event',
326	// group: 'apps',	331	// group: 'apps',
327	name: 'Meeting Event',	332	name: 'Meeting Event',
328	icon: '/static/icon/student.png',	333	icon: '/static/icon/student.png',
329	},	334	},
330	{	335	{
331	title: 'Attendance',	336	title: 'Attendance',
332	group: 'Attendance',	337	group: 'Attendance',
333	component: 'Attendance',	338	component: 'Attendance',
334	icon: '/static/icon/attendence.png',	339	icon: '/static/icon/attendence.png',
335	items: [	340	items: [
336	{ name: 'StudentAttendence', title: 'Student Attendance', component: 'Student Attendence', action: '', },	341	{ name: 'StudentAttendence', title: 'Student Attendance', component: 'Student Attendence', action: '', },
337	{ name: 'TeacherAttendence', title: 'Teacher Attendance', component: 'Teacher Attendence', action: '', },	342	{ name: 'TeacherAttendence', title: 'Teacher Attendance', component: 'Teacher Attendence', action: '', },
338	// { name: 'userAttendence', title: 'User Attendance', component: 'User Attendence', action: '', },	343	// { name: 'userAttendence', title: 'User Attendance', component: 'User Attendence', action: '', },
339	]	344	]
340	},	345	},
341	{	346	{
342	title: 'Exam',	347	title: 'Exam',
343	group: 'Exam',	348	group: 'Exam',
344	component: 'Exam',	349	component: 'Exam',
345	icon: '/static/icon/exam.png',	350	icon: '/static/icon/exam.png',
346	items: [	351	items: [
347	{ name: 'ExamSchedule', title: 'Exam Schedule', component: 'Exam Schedule', action: '', },	352	{ name: 'ExamSchedule', title: 'Exam Schedule', component: 'Exam Schedule', action: '', },
348	{ name: 'ExamAttendence', title: 'Exam Attendence', component: 'Exam Attendence', action: '', }	353	{ name: 'ExamAttendence', title: 'Exam Attendence', component: 'Exam Attendence', action: '', }
349	]	354	]
350	},	355	},
351	{	356	{
352	title: 'Marks',	357	title: 'Marks',
353	group: 'Mark',	358	group: 'Mark',
354	component: 'Mark',	359	component: 'Mark',
355	icon: '/static/icon/marks.png',	360	icon: '/static/icon/marks.png',
356	items: [	361	items: [
357	{ name: 'Mark', title: 'Mark', component: 'Mark', action: '', }	362	{ name: 'Mark', title: 'Mark', component: 'Mark', action: '', }
358	]	363	]
359	},	364	},
360	{	365	{
361	title: 'Report',	366	title: 'Report',
362	group: 'Report',	367	group: 'Report',
363	component: 'Report',	368	component: 'Report',
364	icon: '/static/icon/reports.png',	369	icon: '/static/icon/reports.png',
365	items: [	370	items: [
366	{ name: 'studentReport', title: 'Student Report', component: 'Student Report', action: '', },	371	{ name: 'studentReport', title: 'Student Report', component: 'Student Report', action: '', },
367	{ name: 'ProgressCardReport', title: 'Progress Card Report', component: 'Progress Card Report', action: '', },	372	{ name: 'ProgressCardReport', title: 'Progress Card Report', component: 'Progress Card Report', action: '', },
368	{ name: 'idCard', title: 'Id Card Report', component: 'Id Card Report', action: '', },	373	{ name: 'idCard', title: 'Id Card Report', component: 'Id Card Report', action: '', },
369	{ name: 'admitCard', title: 'Admit Card Report', component: 'Admit Card Report', action: '', }	374	{ name: 'admitCard', title: 'Admit Card Report', component: 'Admit Card Report', action: '', }
370	]	375	]
371	},	376	},
372	{	377	{
373	title: 'Library',	378	title: 'Library',
374	group: 'Library',	379	group: 'Library',
375	component: 'Library',	380	component: 'Library',
376	icon: '/static/icon/library.png',	381	icon: '/static/icon/library.png',
377	items: [	382	items: [
378	{ name: 'Books', title: 'Books', component: 'Books', action: '', },	383	{ name: 'Books', title: 'Books', component: 'Books', action: '', },
379	{ name: 'E-Books', title: 'E-Books', component: 'E-Books', action: '', }	384	{ name: 'E-Books', title: 'E-Books', component: 'E-Books', action: '', }
380		385
381	]	386	]
382	},	387	},
383	{	388	{
384	title: 'Meet',	389	title: 'Meet',
385	name: 'Meet',	390	name: 'Meet',
386	icon: '/static/icon/meet_icon_navigation.png',	391	icon: '/static/icon/meet_icon_navigation.png',
387	}	392	}
388	];	393	];
389		394
390	const parentMenu = [{	395	const parentMenu = [{
391	title: 'Dashboard',	396	title: 'Dashboard',
392	name: 'Dashboard',	397	name: 'Dashboard',
393	icon: '/static/icon/dashboard.png',	398	icon: '/static/icon/dashboard.png',
394	},	399	},
395	{	400	{
396	title: "Change Student",	401	title: "Change Student",
397	name: 'Change Students',	402	name: 'Change Students',
398	Vicon: "face",	403	Vicon: "face",
399	click: e => {	404	click: e => {
400	console.log(e);	405	console.log(e);
401	}	406	}
402	}];	407	}];
403	// reorder menu	408	// reorder menu
404	// Menu.forEach((item) => {	409	// Menu.forEach((item) => {
405	// if (item.items) {	410	// if (item.items) {
406	// item.items.sort((x, y) => {	411	// item.items.sort((x, y) => {
407	// let textA = x.title.toUpperCase();	412	// let textA = x.title.toUpperCase();
408	// let textB = y.title.toUpperCase();	413	// let textB = y.title.toUpperCase();
409	// return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;	414	// return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
410	// });	415	// });
411	// }	416	// }
412	// });	417	// });
413		418
414	export default { adminMenu, schoolMenu, teacherMenu, libraryMenu, accountMenu, parentMenu };	419	export default { adminMenu, schoolMenu, teacherMenu, libraryMenu, accountMenu, parentMenu };

src/components/pageHeader/AppDrawer.vue

Diff comments View file @1e1e364

1	<template>	1	<template>
2	<v-navigation-drawer	2	<v-navigation-drawer
3	id="appDrawer"	3	id="appDrawer"
4	app	4	app
5	fixed	5	fixed
6	:mini-variant.sync="mini"	6	:mini-variant.sync="mini"
7	:dark="$vuetify.dark"	7	:dark="$vuetify.dark"
8	v-model="drawer"	8	v-model="drawer"
9	hide-overlay	9	hide-overlay
10	width="260"	10	width="260"
11	class="white--text side-bar-color"	11	class="white--text side-bar-color"
12	style="height: 100%; overflow: scroll;"	12	style="height: 100%; overflow: scroll;"
13	>	13	>
14	<!-- <vue-perfect-scrollbar	14	<!-- <vue-perfect-scrollbar
15	class="drawer-menu--scroll side-bar-color mt-3"	15	class="drawer-menu--scroll side-bar-color mt-3"
16	:settings="scrollSettings"	16	:settings="scrollSettings"
17	>-->	17	>-->
18	<v-toolbar class="white" flat>	18	<v-toolbar class="white" flat>
19	<img	19	<img
20	v-bind:src="computeLogo"	20	v-bind:src="computeLogo"
21	height="40"	21	height="40"
22	width="130"	22	width="130"
23	class="imgLogo mb-3 mt-3"	23	class="imgLogo mb-3 mt-3"
24	alt="logo"	24	alt="logo"
25	style="margin: auto;	25	style="margin: auto;
26	display: block;"	26	display: block;"
27	/>	27	/>
28	</v-toolbar>	28	</v-toolbar>
29	<v-list dense dark>	29	<v-list dense dark>
30	<template v-for="(item, i) in menus" v-if="role === 'ADMIN'">	30	<template v-for="(item, i) in menus" v-if="role === 'ADMIN'">
31	<!-- {{menus}} -->	31	<!-- {{menus}} -->
32	<!--group with subitems-->	32	<!--group with subitems-->
33	<v-list-group v-if="item.items" :key="item.name" :group="item.group" no-action>	33	<v-list-group v-if="item.items" :key="item.name" :group="item.group" no-action>
34	<v-list-tile slot="activator" ripple="ripple">	34	<v-list-tile slot="activator" ripple="ripple">
35	<v-list-tile-action v-if="item.icon">	35	<v-list-tile-action v-if="item.icon">
36	<img :src="item.icon" width="22" alt="icons" />	36	<img :src="item.icon" width="22" alt="icons" />
37	</v-list-tile-action>	37	</v-list-tile-action>
38	<v-list-tile-content>	38	<v-list-tile-content>
39	<v-list-tile-title>{{ item.title }}</v-list-tile-title>	39	<v-list-tile-title>{{ item.title }}</v-list-tile-title>
40	</v-list-tile-content>	40	</v-list-tile-content>
41	</v-list-tile>	41	</v-list-tile>
42	<template v-for="(subItem, i) in item.items">	42	<template v-for="(subItem, i) in item.items">
43	<!--sub group-->	43	<!--sub group-->
44	<v-list-group	44	<v-list-group
45	v-if="subItem.items"	45	v-if="subItem.items"
46	:key="subItem.name"	46	:key="subItem.name"
47	:group="subItem.group"	47	:group="subItem.group"
48	sub-group="sub-group"	48	sub-group="sub-group"
49	>	49	>
50	<v-list-tile slot="activator" ripple="ripple">	50	<v-list-tile slot="activator" ripple="ripple">
51	<v-list-tile-content>	51	<v-list-tile-content>
52	<v-list-tile-title>{{ subItem.title }}</v-list-tile-title>	52	<v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
53	</v-list-tile-content>	53	</v-list-tile-content>
54	</v-list-tile>	54	</v-list-tile>
55	<v-list-tile	55	<v-list-tile
56	v-for="(grand, i) in subItem.children"	56	v-for="(grand, i) in subItem.children"
57	:key="i"	57	:key="i"
58	:to="genChildTarget(item, grand)"	58	:to="genChildTarget(item, grand)"
59	:href="grand.href"	59	:href="grand.href"
60	ripple="ripple"	60	ripple="ripple"
61	>	61	>
62	<v-list-tile-content>	62	<v-list-tile-content>
63	<v-list-tile-title>{{ grand.title }}</v-list-tile-title>	63	<v-list-tile-title>{{ grand.title }}</v-list-tile-title>
64	</v-list-tile-content>	64	</v-list-tile-content>
65	</v-list-tile>	65	</v-list-tile>
66	</v-list-group>	66	</v-list-group>
67	<!--child item-->	67	<!--child item-->
68	<v-list-tile	68	<v-list-tile
69	v-else	69	v-else
70	:key="i"	70	:key="i"
71	:to="genChildTarget(item, subItem)"	71	:to="genChildTarget(item, subItem)"
72	:href="subItem.href"	72	:href="subItem.href"
73	:disabled="subItem.disabled"	73	:disabled="subItem.disabled"
74	:target="subItem.target"	74	:target="subItem.target"
75	ripple="ripple"	75	ripple="ripple"
76	>	76	>
77	<v-list-tile-action v-if="subItem.action">	77	<v-list-tile-action v-if="subItem.action">
78	<img	78	<img
79	width="30"	79	width="30"
80	:src="subItem.action"	80	:src="subItem.action"
81	:class="[subItem.actionClass \|\| 'success--text']"	81	:class="[subItem.actionClass \|\| 'success--text']"
82	/>	82	/>
83	</v-list-tile-action>	83	</v-list-tile-action>
84	<v-list-tile-content>	84	<v-list-tile-content>
85	<v-list-tile-title class="body-2">	85	<v-list-tile-title class="body-2">
86	<span>{{ subItem.title }}</span>	86	<span>{{ subItem.title }}</span>
87	</v-list-tile-title>	87	</v-list-tile-title>
88	</v-list-tile-content>	88	</v-list-tile-content>
89	<!-- <v-circle class="white--text pa-0 circle-pill" v-if="subItem.badge" color="red" disabled="disabled">{{ subItem.badge }}</v-circle> -->	89	<!-- <v-circle class="white--text pa-0 circle-pill" v-if="subItem.badge" color="red" disabled="disabled">{{ subItem.badge }}</v-circle> -->
90	</v-list-tile>	90	</v-list-tile>
91	</template>	91	</template>
92	</v-list-group>	92	</v-list-group>
93	<v-subheader v-else-if="item.header" :key="i">{{ item.header }}</v-subheader>	93	<v-subheader v-else-if="item.header" :key="i">{{ item.header }}</v-subheader>
94	<v-divider v-else-if="item.divider" :key="i"></v-divider>	94	<v-divider v-else-if="item.divider" :key="i"></v-divider>
95	<!--top-level link-->	95	<!--top-level link-->
96	<v-list-tile	96	<v-list-tile
97	v-else	97	v-else
98	ripple="ripple"	98	ripple="ripple"
99	:disabled="item.disabled"	99	:disabled="item.disabled"
100	:target="item.target"	100	:target="item.target"
101	rel="noopener"	101	rel="noopener"
102	:key="item.name"	102	:key="item.name"
103	:to="!item.href ? { name: item.name } : null"	103	:to="!item.href ? { name: item.name } : null"
104	:href="item.href"	104	:href="item.href"
105	>	105	>
106	<!-- <a :href="item.path"> -->	106	<!-- <a :href="item.path"> -->
107	<v-list-tile-action v-if="item.icon">	107	<v-list-tile-action v-if="item.icon">
108	<img :src="item.icon" width="22" alt="icons" />	108	<img :src="item.icon" width="22" alt="icons" />
109	</v-list-tile-action>	109	</v-list-tile-action>
110	<v-list-tile-content class="pt-2">	110	<v-list-tile-content class="pt-2">
111	<v-list-tile-title>{{ item.title }}</v-list-tile-title>	111	<v-list-tile-title>{{ item.title }}</v-list-tile-title>
112	</v-list-tile-content>	112	</v-list-tile-content>
113	<!-- <v-circle class="white--text pa-0 chip--x-small" v-if="item.badge" :color="item.color \|\| 'primary'" disabled="disabled">{{ item.badge }}</v-circle> -->	113	<!-- <v-circle class="white--text pa-0 chip--x-small" v-if="item.badge" :color="item.color \|\| 'primary'" disabled="disabled">{{ item.badge }}</v-circle> -->
114	<v-list-tile-action v-if="item.subAction">	114	<v-list-tile-action v-if="item.subAction">
115	<!-- <v-icon class="success--text">{{ item.subAction }}</v-icon> -->	115	<!-- <v-icon class="success--text">{{ item.subAction }}</v-icon> -->
116	<!-- <img :src="item.icon" width="40" alt="icons" /> -->	116	<!-- <img :src="item.icon" width="40" alt="icons" /> -->
117	</v-list-tile-action>	117	</v-list-tile-action>
118	<!-- <v-circle class="caption blue lighten-2 white--text mx-0" v-else-if="item.chip" label="label" small="small">{{ item.chip }}</v-circle> -->	118	<!-- <v-circle class="caption blue lighten-2 white--text mx-0" v-else-if="item.chip" label="label" small="small">{{ item.chip }}</v-circle> -->
119	<!-- </a> -->	119	<!-- </a> -->
120	</v-list-tile>	120	</v-list-tile>
121	</template>	121	</template>
122	<template v-for="(item, i) in menuAccount" v-if="role === 'ACCOUNTANT'">	122	<template v-for="(item, i) in menuAccount" v-if="role === 'ACCOUNTANT'">
123	<!-- {{menus}} -->	123	<!-- {{menus}} -->
124	<!--group with subitems-->	124	<!--group with subitems-->
125	<v-list-group v-if="item.items" :key="item.name" :group="item.group" no-action="no-action">	125	<v-list-group v-if="item.items" :key="item.name" :group="item.group" no-action="no-action">
126	<v-list-tile slot="activator" ripple="ripple">	126	<v-list-tile slot="activator" ripple="ripple">
127	<v-list-tile-action v-if="item.icon">	127	<v-list-tile-action v-if="item.icon">
128	<img :src="item.icon" width="22" alt="icons" />	128	<img :src="item.icon" width="22" alt="icons" />
129	</v-list-tile-action>	129	</v-list-tile-action>
130	<v-list-tile-content>	130	<v-list-tile-content>
131	<v-list-tile-title>{{ item.title }}</v-list-tile-title>	131	<v-list-tile-title>{{ item.title }}</v-list-tile-title>
132	</v-list-tile-content>	132	</v-list-tile-content>
133	</v-list-tile>	133	</v-list-tile>
134	<template v-for="(subItem, i) in item.items">	134	<template v-for="(subItem, i) in item.items">
135	<!--sub group-->	135	<!--sub group-->
136	<v-list-group	136	<v-list-group
137	v-if="subItem.items"	137	v-if="subItem.items"
138	:key="subItem.name"	138	:key="subItem.name"
139	:group="subItem.group"	139	:group="subItem.group"
140	sub-group="sub-group"	140	sub-group="sub-group"
141	>	141	>
142	<v-list-tile slot="activator" ripple="ripple">	142	<v-list-tile slot="activator" ripple="ripple">
143	<v-list-tile-content>	143	<v-list-tile-content>
144	<v-list-tile-title>{{ subItem.title }}</v-list-tile-title>	144	<v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
145	</v-list-tile-content>	145	</v-list-tile-content>
146	</v-list-tile>	146	</v-list-tile>
147	<v-list-tile	147	<v-list-tile
148	v-for="(grand, i) in subItem.children"	148	v-for="(grand, i) in subItem.children"
149	:key="i"	149	:key="i"
150	:to="genChildTarget(item, grand)"	150	:to="genChildTarget(item, grand)"
151	:href="grand.href"	151	:href="grand.href"
152	ripple="ripple"	152	ripple="ripple"
153	>	153	>
154	<v-list-tile-content>	154	<v-list-tile-content>
155	<v-list-tile-title>{{ grand.title }}</v-list-tile-title>	155	<v-list-tile-title>{{ grand.title }}</v-list-tile-title>
156	</v-list-tile-content>	156	</v-list-tile-content>
157	</v-list-tile>	157	</v-list-tile>
158	</v-list-group>	158	</v-list-group>
159	<!--child item-->	159	<!--child item-->
160	<v-list-tile	160	<v-list-tile
161	v-else	161	v-else
162	:key="i"	162	:key="i"
163	:to="genChildTarget(item, subItem)"	163	:to="genChildTarget(item, subItem)"
164	:href="subItem.href"	164	:href="subItem.href"
165	:disabled="subItem.disabled"	165	:disabled="subItem.disabled"
166	:target="subItem.target"	166	:target="subItem.target"
167	ripple="ripple"	167	ripple="ripple"
168	>	168	>
169	<v-list-tile-action v-if="subItem.action">	169	<v-list-tile-action v-if="subItem.action">
170	<img	170	<img
171	width="30"	171	width="30"
172	:src="subItem.action"	172	:src="subItem.action"
173	:class="[subItem.actionClass \|\| 'success--text']"	173	:class="[subItem.actionClass \|\| 'success--text']"
174	/>	174	/>
175	</v-list-tile-action>	175	</v-list-tile-action>
176	<v-list-tile-content>	176	<v-list-tile-content>
177	<v-list-tile-title class="body-2">	177	<v-list-tile-title class="body-2">
178	<span>{{ subItem.title }}</span>	178	<span>{{ subItem.title }}</span>
179	</v-list-tile-title>	179	</v-list-tile-title>
180	</v-list-tile-content>	180	</v-list-tile-content>
181	<!-- <v-circle class="white--text pa-0 circle-pill" v-if="subItem.badge" color="red" disabled="disabled">{{ subItem.badge }}</v-circle> -->	181	<!-- <v-circle class="white--text pa-0 circle-pill" v-if="subItem.badge" color="red" disabled="disabled">{{ subItem.badge }}</v-circle> -->
182	</v-list-tile>	182	</v-list-tile>
183	</template>	183	</template>
184	</v-list-group>	184	</v-list-group>
185	<v-subheader v-else-if="item.header" :key="i">{{ item.header }}</v-subheader>	185	<v-subheader v-else-if="item.header" :key="i">{{ item.header }}</v-subheader>
186	<v-divider v-else-if="item.divider" :key="i"></v-divider>	186	<v-divider v-else-if="item.divider" :key="i"></v-divider>
187	<!--top-level link-->	187	<!--top-level link-->
188	<v-list-tile	188	<v-list-tile
189	v-else	189	v-else
190	ripple="ripple"	190	ripple="ripple"
191	:disabled="item.disabled"	191	:disabled="item.disabled"
192	:target="item.target"	192	:target="item.target"
193	rel="noopener"	193	rel="noopener"
194	:key="item.name"	194	:key="item.name"
195	:to="!item.href ? { name: item.name } : null"	195	:to="!item.href ? { name: item.name } : null"
196	:href="item.href"	196	:href="item.href"
197	>	197	>
198	<!-- <a :href="item.path"> -->	198	<!-- <a :href="item.path"> -->
199	<v-list-tile-action v-if="item.icon">	199	<v-list-tile-action v-if="item.icon">
200	<img :src="item.icon" width="22" alt="icons" />	200	<img :src="item.icon" width="22" alt="icons" />
201	</v-list-tile-action>	201	</v-list-tile-action>
202	<v-list-tile-content class="pt-2">	202	<v-list-tile-content class="pt-2">
203	<v-list-tile-title>{{ item.title }}</v-list-tile-title>	203	<v-list-tile-title>{{ item.title }}</v-list-tile-title>
204	</v-list-tile-content>	204	</v-list-tile-content>
205	<!-- <v-circle class="white--text pa-0 chip--x-small" v-if="item.badge" :color="item.color \|\| 'primary'" disabled="disabled">{{ item.badge }}</v-circle> -->	205	<!-- <v-circle class="white--text pa-0 chip--x-small" v-if="item.badge" :color="item.color \|\| 'primary'" disabled="disabled">{{ item.badge }}</v-circle> -->
206	<v-list-tile-action v-if="item.subAction">	206	<v-list-tile-action v-if="item.subAction">
207	<!-- <v-icon class="success--text">{{ item.subAction }}</v-icon> -->	207	<!-- <v-icon class="success--text">{{ item.subAction }}</v-icon> -->
208	<!-- <img :src="item.icon" width="40" alt="icons" /> -->	208	<!-- <img :src="item.icon" width="40" alt="icons" /> -->
209	</v-list-tile-action>	209	</v-list-tile-action>
210	<!-- <v-circle class="caption blue lighten-2 white--text mx-0" v-else-if="item.chip" label="label" small="small">{{ item.chip }}</v-circle> -->	210	<!-- <v-circle class="caption blue lighten-2 white--text mx-0" v-else-if="item.chip" label="label" small="small">{{ item.chip }}</v-circle> -->
211	<!-- </a> -->	211	<!-- </a> -->
212	</v-list-tile>	212	</v-list-tile>
213	</template>	213	</template>
214	<template v-for="(item, i) in menuLibrarian" v-if="role === 'LIBRARIAN'">	214	<template v-for="(item, i) in menuLibrarian" v-if="role === 'LIBRARIAN'">
215	<!-- {{menus}} -->	215	<!-- {{menus}} -->
216	<!--group with subitems-->	216	<!--group with subitems-->
217	<v-list-group v-if="item.items" :key="item.name" :group="item.group" no-action="no-action">	217	<v-list-group v-if="item.items" :key="item.name" :group="item.group" no-action="no-action">
218	<v-list-tile slot="activator" ripple="ripple">	218	<v-list-tile slot="activator" ripple="ripple">
219	<v-list-tile-action v-if="item.icon">	219	<v-list-tile-action v-if="item.icon">
220	<img :src="item.icon" width="22" alt="icons" />	220	<img :src="item.icon" width="22" alt="icons" />
221	</v-list-tile-action>	221	</v-list-tile-action>
222	<v-list-tile-content>	222	<v-list-tile-content>
223	<v-list-tile-title>{{ item.title }}</v-list-tile-title>	223	<v-list-tile-title>{{ item.title }}</v-list-tile-title>
224	</v-list-tile-content>	224	</v-list-tile-content>
225	</v-list-tile>	225	</v-list-tile>
226	<template v-for="(subItem, i) in item.items">	226	<template v-for="(subItem, i) in item.items">
227	<!--sub group-->	227	<!--sub group-->
228	<v-list-group	228	<v-list-group
229	v-if="subItem.items"	229	v-if="subItem.items"
230	:key="subItem.name"	230	:key="subItem.name"
231	:group="subItem.group"	231	:group="subItem.group"
232	sub-group="sub-group"	232	sub-group="sub-group"
233	>	233	>
234	<v-list-tile slot="activator" ripple="ripple">	234	<v-list-tile slot="activator" ripple="ripple">
235	<v-list-tile-content>	235	<v-list-tile-content>
236	<v-list-tile-title>{{ subItem.title }}</v-list-tile-title>	236	<v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
237	</v-list-tile-content>	237	</v-list-tile-content>
238	</v-list-tile>	238	</v-list-tile>
239	<v-list-tile	239	<v-list-tile
240	v-for="(grand, i) in subItem.children"	240	v-for="(grand, i) in subItem.children"
241	:key="i"	241	:key="i"
242	:to="genChildTarget(item, grand)"	242	:to="genChildTarget(item, grand)"
243	:href="grand.href"	243	:href="grand.href"
244	ripple="ripple"	244	ripple="ripple"
245	>	245	>
246	<v-list-tile-content>	246	<v-list-tile-content>
247	<v-list-tile-title>{{ grand.title }}</v-list-tile-title>	247	<v-list-tile-title>{{ grand.title }}</v-list-tile-title>
248	</v-list-tile-content>	248	</v-list-tile-content>
249	</v-list-tile>	249	</v-list-tile>
250	</v-list-group>	250	</v-list-group>
251	<!--child item-->	251	<!--child item-->
252	<v-list-tile	252	<v-list-tile
253	v-else	253	v-else
254	:key="i"	254	:key="i"
255	:to="genChildTarget(item, subItem)"	255	:to="genChildTarget(item, subItem)"
256	:href="subItem.href"	256	:href="subItem.href"
257	:disabled="subItem.disabled"	257	:disabled="subItem.disabled"
258	:target="subItem.target"	258	:target="subItem.target"
259	ripple="ripple"	259	ripple="ripple"
260	>	260	>
261	<v-list-tile-action v-if="subItem.action">	261	<v-list-tile-action v-if="subItem.action">
262	<img	262	<img
263	width="30"	263	width="30"
264	:src="subItem.action"	264	:src="subItem.action"
265	:class="[subItem.actionClass \|\| 'success--text']"	265	:class="[subItem.actionClass \|\| 'success--text']"
266	/>	266	/>
267	</v-list-tile-action>	267	</v-list-tile-action>
268	<v-list-tile-content>	268	<v-list-tile-content>
269	<v-list-tile-title class="body-2">	269	<v-list-tile-title class="body-2">
270	<span>{{ subItem.title }}</span>	270	<span>{{ subItem.title }}</span>
271	</v-list-tile-title>	271	</v-list-tile-title>
272	</v-list-tile-content>	272	</v-list-tile-content>
273	<!-- <v-circle class="white--text pa-0 circle-pill" v-if="subItem.badge" color="red" disabled="disabled">{{ subItem.badge }}</v-circle> -->	273	<!-- <v-circle class="white--text pa-0 circle-pill" v-if="subItem.badge" color="red" disabled="disabled">{{ subItem.badge }}</v-circle> -->
274	</v-list-tile>	274	</v-list-tile>
275	</template>	275	</template>
276	</v-list-group>	276	</v-list-group>
277	<v-subheader v-else-if="item.header" :key="i">{{ item.header }}</v-subheader>	277	<v-subheader v-else-if="item.header" :key="i">{{ item.header }}</v-subheader>
278	<v-divider v-else-if="item.divider" :key="i"></v-divider>	278	<v-divider v-else-if="item.divider" :key="i"></v-divider>
279	<!--top-level link-->	279	<!--top-level link-->
280	<v-list-tile	280	<v-list-tile
281	v-else	281	v-else
282	ripple="ripple"	282	ripple="ripple"
283	:disabled="item.disabled"	283	:disabled="item.disabled"
284	:target="item.target"	284	:target="item.target"
285	rel="noopener"	285	rel="noopener"
286	:key="item.name"	286	:key="item.name"
287	:to="!item.href ? { name: item.name } : null"	287	:to="!item.href ? { name: item.name } : null"
288	:href="item.href"	288	:href="item.href"
289	>	289	>
290	<!-- <a :href="item.path"> -->	290	<!-- <a :href="item.path"> -->
291	<v-list-tile-action v-if="item.icon">	291	<v-list-tile-action v-if="item.icon">
292	<img :src="item.icon" width="22" alt="icons" />	292	<img :src="item.icon" width="22" alt="icons" />
293	</v-list-tile-action>	293	</v-list-tile-action>
294	<v-list-tile-content class="pt-2">	294	<v-list-tile-content class="pt-2">
295	<v-list-tile-title>{{ item.title }}</v-list-tile-title>	295	<v-list-tile-title>{{ item.title }}</v-list-tile-title>
296	</v-list-tile-content>	296	</v-list-tile-content>
297	<!-- <v-circle class="white--text pa-0 chip--x-small" v-if="item.badge" :color="item.color \|\| 'primary'" disabled="disabled">{{ item.badge }}</v-circle> -->	297	<!-- <v-circle class="white--text pa-0 chip--x-small" v-if="item.badge" :color="item.color \|\| 'primary'" disabled="disabled">{{ item.badge }}</v-circle> -->
298	<v-list-tile-action v-if="item.subAction">	298	<v-list-tile-action v-if="item.subAction">
299	<!-- <v-icon class="success--text">{{ item.subAction }}</v-icon> -->	299	<!-- <v-icon class="success--text">{{ item.subAction }}</v-icon> -->
300	<!-- <img :src="item.icon" width="40" alt="icons" /> -->	300	<!-- <img :src="item.icon" width="40" alt="icons" /> -->
301	</v-list-tile-action>	301	</v-list-tile-action>
302	<!-- <v-circle class="caption blue lighten-2 white--text mx-0" v-else-if="item.chip" label="label" small="small">{{ item.chip }}</v-circle> -->	302	<!-- <v-circle class="caption blue lighten-2 white--text mx-0" v-else-if="item.chip" label="label" small="small">{{ item.chip }}</v-circle> -->
303	<!-- </a> -->	303	<!-- </a> -->
304	</v-list-tile>	304	</v-list-tile>
305	</template>	305	</template>
306	<template v-for="(item, i) in menuSchool" v-if="schoolRole === 'SUPERADMIN'">	306	<template v-for="(item, i) in menuSchool" v-if="schoolRole === 'SUPERADMIN'">
307	<!-- {{menus}} -->	307	<!-- {{menus}} -->
308	<!--group with subitems-->	308	<!--group with subitems-->
309	<v-list-group v-if="item.items" :key="item.name" :group="item.group" no-action="no-action">	309	<v-list-group v-if="item.items" :key="item.name" :group="item.group" no-action="no-action">
310	<v-list-tile slot="activator" ripple="ripple">	310	<v-list-tile slot="activator" ripple="ripple">
311	<v-list-tile-action v-if="item.icon">	311	<v-list-tile-action v-if="item.icon">
312	<img :src="item.icon" width="22" alt="icons" />	312	<img :src="item.icon" width="22" alt="icons" />
313	</v-list-tile-action>	313	</v-list-tile-action>
314	<v-list-tile-content>	314	<v-list-tile-content>
315	<v-list-tile-title>{{ item.title }}</v-list-tile-title>	315	<!-- <v-list-tile-title>{{ item.title }}</v-list-tile-title> -->
316	</v-list-tile-content>	316	</v-list-tile-content>
317	</v-list-tile>	317	</v-list-tile>
318	<template v-for="(subItem, i) in item.items">	318	<template v-for="(subItem, i) in item.items">
319	<!--sub group-->	319	<!--sub group-->
320	<v-list-group	320	<v-list-group
321	v-if="subItem.items"	321	v-if="subItem.items"
322	:key="subItem.name"	322	:key="subItem.name"
323	:group="subItem.group"	323	:group="subItem.group"
324	sub-group="sub-group"	324	sub-group="sub-group"
325	>	325	>
326	<v-list-tile slot="activator" ripple="ripple">	326	<v-list-tile slot="activator" ripple="ripple">
327	<v-list-tile-content>	327	<v-list-tile-content>
328	<v-list-tile-title>{{ subItem.title }}</v-list-tile-title>	328	<v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
329	</v-list-tile-content>	329	</v-list-tile-content>
330	</v-list-tile>	330	</v-list-tile>
331	<v-list-tile	331	<v-list-tile
332	v-for="(grand, i) in subItem.children"	332	v-for="(grand, i) in subItem.children"
333	:key="i"	333	:key="i"
334	:to="genChildTarget(item, grand)"	334	:to="genChildTarget(item, grand)"
335	:href="grand.href"	335	:href="grand.href"
336	ripple="ripple"	336	ripple="ripple"
337	>	337	>
338	<v-list-tile-content>	338	<v-list-tile-content>
339	<v-list-tile-title>{{ grand.title }}</v-list-tile-title>	339	<v-list-tile-title>{{ grand.title }}</v-list-tile-title>
340	</v-list-tile-content>	340	</v-list-tile-content>
341	</v-list-tile>	341	</v-list-tile>
342	</v-list-group>	342	</v-list-group>
343	<!--child item-->	343	<!--child item-->
344	<v-list-tile	344	<v-list-tile
345	v-else	345	v-else
346	:key="i"	346	:key="i"
347	:to="genChildTarget(item, subItem)"	347	:to="genChildTarget(item, subItem)"
348	:href="subItem.href"	348	:href="subItem.href"
349	:disabled="subItem.disabled"	349	:disabled="subItem.disabled"
350	:target="subItem.target"	350	:target="subItem.target"
351	ripple="ripple"	351	ripple="ripple"
352	>	352	>
353	<v-list-tile-action v-if="subItem.action">	353	<v-list-tile-action v-if="subItem.action">
354	<img	354	<img
355	width="30"	355	width="30"
356	:src="subItem.action"	356	:src="subItem.action"
357	:class="[subItem.actionClass \|\| 'success--text']"	357	:class="[subItem.actionClass \|\| 'success--text']"
358	/>	358	/>
359	</v-list-tile-action>	359	</v-list-tile-action>
360	<v-list-tile-content>	360	<v-list-tile-content>
361	<v-list-tile-title class="body-2">	361	<v-list-tile-title class="body-2">
362	<span>{{ subItem.title }}</span>	362	<span>{{ subItem.title }}</span>
363	</v-list-tile-title>	363	</v-list-tile-title>
364	</v-list-tile-content>	364	</v-list-tile-content>
365	<!-- <v-circle class="white--text pa-0 circle-pill" v-if="subItem.badge" color="red" disabled="disabled">{{ subItem.badge }}</v-circle> -->	365	<!-- <v-circle class="white--text pa-0 circle-pill" v-if="subItem.badge" color="red" disabled="disabled">{{ subItem.badge }}</v-circle> -->
366	</v-list-tile>	366	</v-list-tile>
367	</template>	367	</template>
368	</v-list-group>	368	</v-list-group>
369	<v-subheader v-else-if="item.header" :key="i">{{ item.header }}</v-subheader>	369	<v-subheader v-else-if="item.header" :key="i">{{ item.header }}</v-subheader>
370	<v-divider v-else-if="item.divider" :key="i"></v-divider>	370	<v-divider v-else-if="item.divider" :key="i"></v-divider>
371	<!--top-level link-->	371	<!--top-level link-->
372	<v-list-tile	372	<v-list-tile
373	v-else	373	v-else
374	ripple="ripple"	374	ripple="ripple"
375	:disabled="item.disabled"	375	:disabled="item.disabled"
376	:target="item.target"	376	:target="item.target"
377	rel="noopener"	377	rel="noopener"
378	:key="item.name"	378	:key="item.name"
379	:to="!item.href ? { name: item.name } : null"	379	:to="!item.href ? { name: item.name } : null"
380	:href="item.href"	380	:href="item.href"
381	>	381	>
382	<!-- <a :href="item.path"> -->	382	<!-- <a :href="item.path"> -->
383	<v-list-tile-action v-if="item.icon">	383	<v-list-tile-action v-if="item.icon">
384	<img :src="item.icon" width="22" alt="icons" />	384	<img :src="item.icon" width="22" alt="icons" />
385	</v-list-tile-action>	385	</v-list-tile-action>
386	<v-list-tile-content class="pt-2">	386	<v-list-tile-content class="pt-2">
387	<v-list-tile-title>{{ item.title }}</v-list-tile-title>	387	<v-list-tile-title>{{ item.title }}</v-list-tile-title>
388	</v-list-tile-content>	388	</v-list-tile-content>
389	<!-- <v-circle class="white--text pa-0 chip--x-small" v-if="item.badge" :color="item.color \|\| 'primary'" disabled="disabled">{{ item.badge }}</v-circle> -->	389	<!-- <v-circle class="white--text pa-0 chip--x-small" v-if="item.badge" :color="item.color \|\| 'primary'" disabled="disabled">{{ item.badge }}</v-circle> -->
390	<v-list-tile-action v-if="item.subAction">	390	<v-list-tile-action v-if="item.subAction">
391	<!-- <v-icon class="success--text">{{ item.subAction }}</v-icon> -->	391	<!-- <v-icon class="success--text">{{ item.subAction }}</v-icon> -->
392	<!-- <img :src="item.icon" width="40" alt="icons" /> -->	392	<!-- <img :src="item.icon" width="40" alt="icons" /> -->
393	</v-list-tile-action>	393	</v-list-tile-action>
394	<!-- <v-circle class="caption blue lighten-2 white--text mx-0" v-else-if="item.chip" label="label" small="small">{{ item.chip }}</v-circle> -->	394	<!-- <v-circle class="caption blue lighten-2 white--text mx-0" v-else-if="item.chip" label="label" small="small">{{ item.chip }}</v-circle> -->
395	<!-- </a> -->	395	<!-- </a> -->
396	</v-list-tile>	396	</v-list-tile>
397	</template>	397	</template>
398		398
399	<!-- NAVIGATION DRAWER IF ROLE IS TEACHER -->	399	<!-- NAVIGATION DRAWER IF ROLE IS TEACHER -->
400	<template v-for="(item, i) in menuTeacher" v-if="role === 'TEACHER'">	400	<template v-for="(item, i) in menuTeacher" v-if="role === 'TEACHER'">
401	<!-- {{menus}} -->	401	<!-- {{menus}} -->
402	<!--group with subitems-->	402	<!--group with subitems-->
403	<v-list-group v-if="item.items" :key="item.name" :group="item.group" no-action="no-action">	403	<v-list-group v-if="item.items" :key="item.name" :group="item.group" no-action="no-action">
404	<v-list-tile slot="activator" ripple="ripple">	404	<v-list-tile slot="activator" ripple="ripple">
405	<v-list-tile-action v-if="item.icon">	405	<v-list-tile-action v-if="item.icon">
406	<img :src="item.icon" width="22" alt="icons" />	406	<img :src="item.icon" width="22" alt="icons" />
407	</v-list-tile-action>	407	</v-list-tile-action>
408	<v-list-tile-content>	408	<v-list-tile-content>
409	<v-list-tile-title>{{ item.title }}</v-list-tile-title>	409	<v-list-tile-title>{{ item.title }}</v-list-tile-title>
410	</v-list-tile-content>	410	</v-list-tile-content>
411	</v-list-tile>	411	</v-list-tile>
412	<template v-for="(subItem, i) in item.items">	412	<template v-for="(subItem, i) in item.items">
413	<!--sub group-->	413	<!--sub group-->
414	<v-list-group	414	<v-list-group
415	v-if="subItem.items"	415	v-if="subItem.items"
416	:key="subItem.name"	416	:key="subItem.name"
417	:group="subItem.group"	417	:group="subItem.group"
418	sub-group="sub-group"	418	sub-group="sub-group"
419	>	419	>
420	<v-list-tile slot="activator" ripple="ripple">	420	<v-list-tile slot="activator" ripple="ripple">
421	<v-list-tile-content>	421	<v-list-tile-content>
422	<v-list-tile-title>{{ subItem.title }}</v-list-tile-title>	422	<v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
423	</v-list-tile-content>	423	</v-list-tile-content>
424	</v-list-tile>	424	</v-list-tile>
425	<v-list-tile	425	<v-list-tile
426	v-for="(grand, i) in subItem.children"	426	v-for="(grand, i) in subItem.children"
427	:key="i"	427	:key="i"
428	:to="genChildTarget(item, grand)"	428	:to="genChildTarget(item, grand)"
429	:href="grand.href"	429	:href="grand.href"
430	ripple="ripple"	430	ripple="ripple"
431	>	431	>
432	<v-list-tile-content>	432	<v-list-tile-content>
433	<v-list-tile-title>{{ grand.title }}</v-list-tile-title>	433	<v-list-tile-title>{{ grand.title }}</v-list-tile-title>
434	</v-list-tile-content>	434	</v-list-tile-content>
435	</v-list-tile>	435	</v-list-tile>
436	</v-list-group>	436	</v-list-group>
437	<!--child item-->	437	<!--child item-->
438	<v-list-tile	438	<v-list-tile
439	v-else	439	v-else
440	:key="i"	440	:key="i"
441	:to="genChildTarget(item, subItem)"	441	:to="genChildTarget(item, subItem)"
442	:href="subItem.href"	442	:href="subItem.href"
443	:disabled="subItem.disabled"	443	:disabled="subItem.disabled"
444	:target="subItem.target"	444	:target="subItem.target"
445	ripple="ripple"	445	ripple="ripple"
446	>	446	>
447	<v-list-tile-action v-if="subItem.action">	447	<v-list-tile-action v-if="subItem.action">
448	<img	448	<img
449	width="30"	449	width="30"
450	:src="subItem.action"	450	:src="subItem.action"
451	:class="[subItem.actionClass \|\| 'success--text']"	451	:class="[subItem.actionClass \|\| 'success--text']"
452	/>	452	/>
453	</v-list-tile-action>	453	</v-list-tile-action>
454	<v-list-tile-content>	454	<v-list-tile-content>
455	<v-list-tile-title class="body-2">	455	<v-list-tile-title class="body-2">
456	<span>{{ subItem.title }}</span>	456	<span>{{ subItem.title }}</span>
457	</v-list-tile-title>	457	</v-list-tile-title>
458	</v-list-tile-content>	458	</v-list-tile-content>
459	<!-- <v-circle class="white--text pa-0 circle-pill" v-if="subItem.badge" color="red" disabled="disabled">{{ subItem.badge }}</v-circle> -->	459	<!-- <v-circle class="white--text pa-0 circle-pill" v-if="subItem.badge" color="red" disabled="disabled">{{ subItem.badge }}</v-circle> -->
460	</v-list-tile>	460	</v-list-tile>
461	</template>	461	</template>
462	</v-list-group>	462	</v-list-group>
463	<v-subheader v-else-if="item.header" :key="i">{{ item.header }}</v-subheader>	463	<v-subheader v-else-if="item.header" :key="i">{{ item.header }}</v-subheader>
464	<v-divider v-else-if="item.divider" :key="i"></v-divider>	464	<v-divider v-else-if="item.divider" :key="i"></v-divider>
465	<!--top-level link-->	465	<!--top-level link-->
466	<v-list-tile	466	<v-list-tile
467	v-else	467	v-else
468	ripple="ripple"	468	ripple="ripple"
469	:disabled="item.disabled"	469	:disabled="item.disabled"
470	:target="item.target"	470	:target="item.target"
471	rel="noopener"	471	rel="noopener"
472	:key="item.name"	472	:key="item.name"
473	:to="!item.href ? { name: item.name } : null"	473	:to="!item.href ? { name: item.name } : null"
474	:href="item.href"	474	:href="item.href"
475	>	475	>
476	<!-- <a :href="item.path"> -->	476	<!-- <a :href="item.path"> -->
477	<v-list-tile-action v-if="item.icon">	477	<v-list-tile-action v-if="item.icon">
478	<img :src="item.icon" width="22" alt="icons" />	478	<img :src="item.icon" width="22" alt="icons" />
479	</v-list-tile-action>	479	</v-list-tile-action>
480	<v-list-tile-content class="pt-2">	480	<v-list-tile-content class="pt-2">
481	<v-list-tile-title>{{ item.title }}</v-list-tile-title>	481	<v-list-tile-title>{{ item.title }}</v-list-tile-title>
482	</v-list-tile-content>	482	</v-list-tile-content>
483	<!-- <v-circle class="white--text pa-0 chip--x-small" v-if="item.badge" :color="item.color \|\| 'primary'" disabled="disabled">{{ item.badge }}</v-circle> -->	483	<!-- <v-circle class="white--text pa-0 chip--x-small" v-if="item.badge" :color="item.color \|\| 'primary'" disabled="disabled">{{ item.badge }}</v-circle> -->
484	<v-list-tile-action v-if="item.subAction">	484	<v-list-tile-action v-if="item.subAction">
485	<!-- <v-icon class="success--text">{{ item.subAction }}</v-icon> -->	485	<!-- <v-icon class="success--text">{{ item.subAction }}</v-icon> -->
486	<!-- <img :src="item.icon" width="40" alt="icons" /> -->	486	<!-- <img :src="item.icon" width="40" alt="icons" /> -->
487	</v-list-tile-action>	487	</v-list-tile-action>
488	<!-- <v-circle class="caption blue lighten-2 white--text mx-0" v-else-if="item.chip" label="label" small="small">{{ item.chip }}</v-circle> -->	488	<!-- <v-circle class="caption blue lighten-2 white--text mx-0" v-else-if="item.chip" label="label" small="small">{{ item.chip }}</v-circle> -->
489	<!-- </a> -->	489	<!-- </a> -->
490	</v-list-tile>	490	</v-list-tile>
491	</template>	491	</template>
492		492
493	<!-- NAVIGATION DRAWER IF ROLE IS PARENT -->	493	<!-- NAVIGATION DRAWER IF ROLE IS PARENT -->
494	<template v-for="(item, i) in menuParent" v-if="role === 'PARENT'">	494	<template v-for="(item, i) in menuParent" v-if="role === 'PARENT'">
495	<!-- {{menus}} -->	495	<!-- {{menus}} -->
496	<!--group with subitems-->	496	<!--group with subitems-->
497	<v-list-group v-if="item.items" :key="item.name" :group="item.group" no-action="no-action">	497	<v-list-group v-if="item.items" :key="item.name" :group="item.group" no-action="no-action">
498	<v-list-tile slot="activator" ripple="ripple">	498	<v-list-tile slot="activator" ripple="ripple">
499	<v-list-tile-action v-if="item.icon">	499	<v-list-tile-action v-if="item.icon">
500	<img :src="item.icon" width="22" alt="icons" />	500	<img :src="item.icon" width="22" alt="icons" />
501	</v-list-tile-action>	501	</v-list-tile-action>
502	<v-list-tile-content>	502	<v-list-tile-content>
503	<v-list-tile-title>{{ item.title }}</v-list-tile-title>	503	<v-list-tile-title>{{ item.title }}</v-list-tile-title>
504	</v-list-tile-content>	504	</v-list-tile-content>
505	</v-list-tile>	505	</v-list-tile>
506	<template v-for="(subItem, i) in item.items">	506	<template v-for="(subItem, i) in item.items">
507	<!--sub group-->	507	<!--sub group-->
508	<v-list-group	508	<v-list-group
509	v-if="subItem.items"	509	v-if="subItem.items"
510	:key="subItem.name"	510	:key="subItem.name"
511	:group="subItem.group"	511	:group="subItem.group"
512	sub-group="sub-group"	512	sub-group="sub-group"
513	>	513	>
514	<v-list-tile slot="activator" ripple="ripple">	514	<v-list-tile slot="activator" ripple="ripple">
515	<v-list-tile-content>	515	<v-list-tile-content>
516	<v-list-tile-title>{{ subItem.title }}</v-list-tile-title>	516	<v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
517	</v-list-tile-content>	517	</v-list-tile-content>
518	</v-list-tile>	518	</v-list-tile>
519	<v-list-tile	519	<v-list-tile
520	v-for="(grand, i) in subItem.children"	520	v-for="(grand, i) in subItem.children"
521	:key="i"	521	:key="i"
522	:to="genChildTarget(item, grand)"	522	:to="genChildTarget(item, grand)"
523	:href="grand.href"	523	:href="grand.href"
524	ripple="ripple"	524	ripple="ripple"
525	>	525	>
526	<v-list-tile-content>	526	<v-list-tile-content>
527	<v-list-tile-title>{{ grand.title }}</v-list-tile-title>	527	<v-list-tile-title>{{ grand.title }}</v-list-tile-title>
528	</v-list-tile-content>	528	</v-list-tile-content>
529	</v-list-tile>	529	</v-list-tile>
530	</v-list-group>	530	</v-list-group>
531	<!--child item-->	531	<!--child item-->
532	<v-list-tile	532	<v-list-tile
533	v-else	533	v-else
534	:key="i"	534	:key="i"
535	:to="genChildTarget(item, subItem)"	535	:to="genChildTarget(item, subItem)"
536	:href="subItem.href"	536	:href="subItem.href"
537	:disabled="subItem.disabled"	537	:disabled="subItem.disabled"
538	:target="subItem.target"	538	:target="subItem.target"
539	ripple="ripple"	539	ripple="ripple"
540	>	540	>
541	<v-list-tile-action v-if="subItem.action">	541	<v-list-tile-action v-if="subItem.action">
542	<img	542	<img
543	width="30"	543	width="30"
544	:src="subItem.action"	544	:src="subItem.action"
545	:class="[subItem.actionClass \|\| 'success--text']"	545	:class="[subItem.actionClass \|\| 'success--text']"
546	/>	546	/>
547	</v-list-tile-action>	547	</v-list-tile-action>
548	<v-list-tile-content>	548	<v-list-tile-content>
549	<v-list-tile-title class="body-2">	549	<v-list-tile-title class="body-2">
550	<span>{{ subItem.title }}</span>	550	<span>{{ subItem.title }}</span>
551	</v-list-tile-title>	551	</v-list-tile-title>
552	</v-list-tile-content>	552	</v-list-tile-content>
553	<!-- <v-circle class="white--text pa-0 circle-pill" v-if="subItem.badge" color="red" disabled="disabled">{{ subItem.badge }}</v-circle> -->	553	<!-- <v-circle class="white--text pa-0 circle-pill" v-if="subItem.badge" color="red" disabled="disabled">{{ subItem.badge }}</v-circle> -->
554	</v-list-tile>	554	</v-list-tile>
555	</template>	555	</template>
556	</v-list-group>	556	</v-list-group>
557	<v-subheader v-else-if="item.header" :key="i">{{ item.header }}</v-subheader>	557	<v-subheader v-else-if="item.header" :key="i">{{ item.header }}</v-subheader>
558	<v-divider v-else-if="item.divider" :key="i"></v-divider>	558	<v-divider v-else-if="item.divider" :key="i"></v-divider>
559	<!--top-level link-->	559	<!--top-level link-->
560	<v-list-tile	560	<v-list-tile
561	v-else	561	v-else
562	ripple="ripple"	562	ripple="ripple"
563	:disabled="item.disabled"	563	:disabled="item.disabled"
564	:target="item.target"	564	:target="item.target"
565	rel="noopener"	565	rel="noopener"
566	:key="item.name"	566	:key="item.name"
567	:to="!item.href ? { name: item.name } : null"	567	:to="!item.href ? { name: item.name } : null"
568	:href="item.href"	568	:href="item.href"
569	>	569	>
570	<!-- <a :href="item.path"> -->	570	<!-- <a :href="item.path"> -->
571	<v-list-tile-action v-if="item.icon">	571	<v-list-tile-action v-if="item.icon">
572	<img :src="item.icon" width="22" alt="icons" />	572	<img :src="item.icon" width="22" alt="icons" />
573	</v-list-tile-action>	573	</v-list-tile-action>
574	<v-list-tile-action v-if="item.Vicon">	574	<v-list-tile-action v-if="item.Vicon">
575	<div style="position: relative; top: 3px;">	575	<div style="position: relative; top: 3px;">
576	<v-icon color="white" size="25">{{item.Vicon}}</v-icon>	576	<v-icon color="white" size="25">{{item.Vicon}}</v-icon>
577	</div>	577	</div>
578	</v-list-tile-action>	578	</v-list-tile-action>
579	<v-list-tile-content class="pt-2">	579	<v-list-tile-content class="pt-2">
580	<v-list-tile-title>{{ item.title }}</v-list-tile-title>	580	<v-list-tile-title>{{ item.title }}</v-list-tile-title>
581	</v-list-tile-content>	581	</v-list-tile-content>
582	<!-- <v-circle class="white--text pa-0 chip--x-small" v-if="item.badge" :color="item.color \|\| 'primary'" disabled="disabled">{{ item.badge }}</v-circle> -->	582	<!-- <v-circle class="white--text pa-0 chip--x-small" v-if="item.badge" :color="item.color \|\| 'primary'" disabled="disabled">{{ item.badge }}</v-circle> -->
583	<v-list-tile-action v-if="item.subAction">	583	<v-list-tile-action v-if="item.subAction">
584	<!-- <v-icon class="success--text">{{ item.subAction }}</v-icon> -->	584	<!-- <v-icon class="success--text">{{ item.subAction }}</v-icon> -->
585	<!-- <img :src="item.icon" width="40" alt="icons" /> -->	585	<!-- <img :src="item.icon" width="40" alt="icons" /> -->
586	</v-list-tile-action>	586	</v-list-tile-action>
587	<!-- <v-circle class="caption blue lighten-2 white--text mx-0" v-else-if="item.chip" label="label" small="small">{{ item.chip }}</v-circle> -->	587	<!-- <v-circle class="caption blue lighten-2 white--text mx-0" v-else-if="item.chip" label="label" small="small">{{ item.chip }}</v-circle> -->
588	<!-- </a> -->	588	<!-- </a> -->
589	</v-list-tile>	589	</v-list-tile>
590	</template>	590	</template>
591	</v-list>	591	</v-list>
592	<!-- </vue-perfect-scrollbar> -->	592	<!-- </vue-perfect-scrollbar> -->
593	</v-navigation-drawer>	593	</v-navigation-drawer>
594	</template>	594	</template>
595	<script>	595	<script>
596	import menu from "@/api/menu";	596	import menu from "@/api/menu";
597	import VuePerfectScrollbar from "vue-perfect-scrollbar";	597	import VuePerfectScrollbar from "vue-perfect-scrollbar";
598	export default {	598	export default {
599	name: "app-drawer",	599	name: "app-drawer",
600	components: {	600	components: {
601	VuePerfectScrollbar,	601	VuePerfectScrollbar,
602	},	602	},
603	props: {	603	props: {
604	expanded: {	604	expanded: {
605	type: Boolean,	605	type: Boolean,
606	default: true,	606	default: true,
607	},	607	},
608	},	608	},
609	data: () => ({	609	data: () => ({
610	mini: false,	610	mini: false,
611	drawer: true,	611	drawer: true,
612	menus: [],	612	menus: [],
613	menuSchool: [],	613	menuSchool: [],
614	menuTeacher: [],	614	menuTeacher: [],
615	menuAccount: [],	615	menuAccount: [],
616	menuLibrarian: [],	616	menuLibrarian: [],
617	menuParent: [],	617	menuParent: [],
618	schoolRole: "",	618	schoolRole: "",
619	role: "",	619	role: "",
620	scrollSettings: {	620	scrollSettings: {
621	maxScrollbarLength: 160,	621	maxScrollbarLength: 160,
622	},	622	},
623	}),	623	}),
624	computed: {	624	computed: {
625	computeGroupActive() {	625	computeGroupActive() {
626	return true;	626	return true;
627	},	627	},
628	computeLogo() {	628	computeLogo() {
629	return "/static/icon.png";	629	return "/static/icon.png";
630	},	630	},
631		631
632	sideToolbarColor() {	632	sideToolbarColor() {
633	return this.$vuetify.options.extra.sideNav;	633	return this.$vuetify.options.extra.sideNav;
634	},	634	},
635	},	635	},
636	created() {	636	created() {
637	this.schoolRole = this.$store.state.schoolRole;	637	this.schoolRole = this.$store.state.schoolRole;
638	this.role = this.$store.state.role;	638	this.role = this.$store.state.role;
639	this.menus = menu.adminMenu;	639	this.menus = menu.adminMenu;
640	this.menuSchool = menu.schoolMenu;	640	this.menuSchool = menu.schoolMenu;
641	this.menuTeacher = menu.teacherMenu;	641	this.menuTeacher = menu.teacherMenu;
642	this.menuAccount = menu.accountMenu;	642	this.menuAccount = menu.accountMenu;
643	this.menuLibrarian = menu.libraryMenu;	643	this.menuLibrarian = menu.libraryMenu;
644	this.menuParent = menu.parentMenu;	644	this.menuParent = menu.parentMenu;
645	// console.log("this.$route.name", this.$route.name);	645	// console.log("this.$route.name", this.$route.name);
646	// if (this.$route.name === "School") {	646	// if (this.$route.name === "School") {
647	// localStorage.setItem("SchoolName", this.$route.name);	647	// localStorage.setItem("SchoolName", this.$route.name);
648	// }	648	// }
649	// if (this.$route.name === "Dashboard") {	649	// if (this.$route.name === "Dashboard") {
650	// localStorage.setItem("AdminName", this.$route.name);	650	// localStorage.setItem("AdminName", this.$route.name);
651	// }	651	// }
652	// console.log("SN", localStorage.getItem("SchoolName"));	652	// console.log("SN", localStorage.getItem("SchoolName"));
653	// if (localStorage.getItem("SchoolName") === "School") {	653	// if (localStorage.getItem("SchoolName") === "School") {
654	// if (this.$store.state.schoolRole === "SUPERADMIN") {	654	// if (this.$store.state.schoolRole === "SUPERADMIN") {
655	// console.log("rolA", this.$store.state.schoolRole);	655	// console.log("rolA", this.$store.state.schoolRole);
656	// if (this.$store.state.schoolRole === "SUPERADMIN") {	656	// if (this.$store.state.schoolRole === "SUPERADMIN") {
657	// }	657	// }
658	// console.log("this.menus", this.menus);	658	// console.log("this.menus", this.menus);
659	// }	659	// }
660	// // }	660	// // }
661	// // console.log("AN", localStorage.getItem("AdminName"));	661	// // console.log("AN", localStorage.getItem("AdminName"));
662	// // if (localStorage.getItem("AdminName") === "Dashboard") {	662	// // if (localStorage.getItem("AdminName") === "Dashboard") {
663	// if (this.$store.state.role === "ADMIN") {	663	// if (this.$store.state.role === "ADMIN") {
664	// console.log("role", this.$store.state.role);	664	// console.log("role", this.$store.state.role);
665	// else if (this.$store.state.role === "ADMIN") {	665	// else if (this.$store.state.role === "ADMIN") {
666	// }	666	// }
667	// // }	667	// // }
668	// }	668	// }
669		669
670	// else if (this.$store.state.role === "LIBRARIAN") {	670	// else if (this.$store.state.role === "LIBRARIAN") {
671	// this.menus = menu.libraryMenu;	671	// this.menus = menu.libraryMenu;
672	// } else if (this.$store.state.role === "ACCOUNTANT") {	672	// } else if (this.$store.state.role === "ACCOUNTANT") {
673	// this.menus = menu.accountMenu;	673	// this.menus = menu.accountMenu;
674	// }	674	// }
675	window.getApp.$on("APP_DRAWER_TOGGLED", () => {	675	window.getApp.$on("APP_DRAWER_TOGGLED", () => {
676	this.drawer = !this.drawer;	676	this.drawer = !this.drawer;
677	});	677	});
678	},	678	},
679	methods: {	679	methods: {
680	genChildTarget(item, subItem) {	680	genChildTarget(item, subItem) {
681	if (subItem.href) return;	681	if (subItem.href) return;
682	if (subItem.component) {	682	if (subItem.component) {
683	return {	683	return {
684	name: subItem.component,	684	name: subItem.component,
685	};	685	};
686	}	686	}
687	return { name: `${item.group}/${subItem.name}` };	687	return { name: `${item.group}/${subItem.name}` };
688	},	688	},
689	},	689	},
690	mounted() {	690	mounted() {
691	if (this.$store.state.role === "ADMIN") {	691	if (this.$store.state.role === "ADMIN") {
692	this.token = this.$store.state.token;	692	this.token = this.$store.state.token;
693	}	693	}
694	if (this.$store.state.schoolRole === "SUPERADMIN") {	694	if (this.$store.state.schoolRole === "SUPERADMIN") {
695	this.token = this.$store.schoolToken;	695	this.token = this.$store.schoolToken;
696	}	696	}
697	if (this.$store.state.role === "TEACHER") {	697	if (this.$store.state.role === "TEACHER") {
698	this.token = this.$store.state.token;	698	this.token = this.$store.state.token;
699	}	699	}
700	if (this.$store.state.role === "ACCOUNTANT") {	700	if (this.$store.state.role === "ACCOUNTANT") {
701	this.token = this.$store.state.token;	701	this.token = this.$store.state.token;
702	}	702	}
703	if (this.$store.state.role === "LIBRARIAN") {	703	if (this.$store.state.role === "LIBRARIAN") {
704	this.token = this.$store.state.token;	704	this.token = this.$store.state.token;
705	}	705	}
706	if (this.$store.state.role === "PARENT") {	706	if (this.$store.state.role === "PARENT") {
707	this.token = this.$store.state.token;	707	this.token = this.$store.state.token;
708	}	708	}
709	},	709	},
710	};	710	};
711	</script>	711	</script>
712		712
713		713
714	<style lang="stylus">	714	<style lang="stylus">
715	// @import '../../node_modules/vuetify/src/stylus/settings/_elevations.styl';	715	// @import '../../node_modules/vuetify/src/stylus/settings/_elevations.styl';
716	#appDrawer {	716	#appDrawer {
717	overflow: hidden;	717	overflow: hidden;
718		718
719	.drawer-menu--scroll {	719	.drawer-menu--scroll {
720	height: calc(100vh - 48px);	720	height: calc(100vh - 48px);
721	overflow: auto;	721	overflow: auto;
722	}	722	}
723	}	723	}
724		724
725	.v-list__group__items--no-action .v-list__tile {	725	.v-list__group__items--no-action .v-list__tile {
726	padding-left: 72px !important;	726	padding-left: 72px !important;
727	}	727	}
728		728
729	.v-list--dense .v-list__tile:not(.v-list__tile--avatar) {	729	.v-list--dense .v-list__tile:not(.v-list__tile--avatar) {
730	height: 54px;	730	height: 54px;
731	font-size: 17px;	731	font-size: 17px;
732	}	732	}
733		733
734	.v-list__tile__action {	734	.v-list__tile__action {
735	min-width: 36px;	735	min-width: 36px;
736	}	736	}
737		737
738	// .theme--light .v-icon, .application .theme--light.v-icon {	738	// .theme--light .v-icon, .application .theme--light.v-icon {
739	// color: #f1f1f1;	739	// color: #f1f1f1;
740	// }	740	// }
741	.ps>.ps__scrollbar-y-rail>.ps__scrollbar-y {	741	.ps>.ps__scrollbar-y-rail>.ps__scrollbar-y {
742	background-color: #f5f5f5;	742	background-color: #f5f5f5;
743	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.44, rgb(122, 153, 217)), color-stop(0.72, rgb(73, 125, 189)), color-stop(0.86, rgb(28, 58, 148)));	743	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.44, rgb(122, 153, 217)), color-stop(0.72, rgb(73, 125, 189)), color-stop(0.86, rgb(28, 58, 148)));
744	width: 8px !important;	744	width: 8px !important;
745	}	745	}
746		746
747	.ps>.ps__scrollbar-y-rail {	747	.ps>.ps__scrollbar-y-rail {
748	width: 0px !important;	748	width: 0px !important;
749	}	749	}
750		750
751	.ps:hover > .ps__scrollbar-y-rail:hover {	751	.ps:hover > .ps__scrollbar-y-rail:hover {
752	background-color: #5f2171 !important;	752	background-color: #5f2171 !important;
753	opacity: 0.9;	753	opacity: 0.9;
754	}	754	}
755		755
756	.ps > .ps__scrollbar-y-rail:hover > .ps__scrollbar-y {	756	.ps > .ps__scrollbar-y-rail:hover > .ps__scrollbar-y {
757	width: 8px !important;	757	width: 8px !important;
758	background-color: #f5f5f5;	758	background-color: #f5f5f5;
759	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.44, rgb(122, 153, 217)), color-stop(0.72, rgb(73, 125, 189)), color-stop(0.86, rgb(28, 58, 148)));	759	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.44, rgb(122, 153, 217)), color-stop(0.72, rgb(73, 125, 189)), color-stop(0.86, rgb(28, 58, 148)));
760	}	760	}
761		761
762	.ps:hover > .ps__scrollbar-y-rail:hover > .ps__scrollbar-y {	762	.ps:hover > .ps__scrollbar-y-rail:hover > .ps__scrollbar-y {
763	// background-color: #5f2171 !important;	763	// background-color: #5f2171 !important;
764	width: 8px !important;	764	width: 8px !important;
765	background-color: #f5f5f5;	765	background-color: #f5f5f5;
766	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.44, rgb(122, 153, 217)), color-stop(0.72, rgb(73, 125, 189)), color-stop(0.86, rgb(28, 58, 148)));	766	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.44, rgb(122, 153, 217)), color-stop(0.72, rgb(73, 125, 189)), color-stop(0.86, rgb(28, 58, 148)));
767	}	767	}
768		768
769	.v-list__tile--active {	769	.v-list__tile--active {
770	color: #71d9ea !important;	770	color: #71d9ea !important;
771	}	771	}
772		772
773	.my-1 {	773	.my-1 {
774	text-align: left !important;	774	text-align: left !important;
775	}	775	}
776		776
777	.title {	777	.title {
778	line-height: 2 !important;	778	line-height: 2 !important;
779	}	779	}
780		780
781	// .v-list__tile--hover {	781	// .v-list__tile--hover {
782	// color: white !important;	782	// color: white !important;
783	// background: red !important;	783	// background: red !important;
784	// }	784	// }
785	.v-list .v-list__tile--link:hover, .v-list .v-list__tile--highlighted, .v-list .v-list__group__header:hover, .v-list .v-list__group--active:before, .v-list .v-list__group--active:after {	785	.v-list .v-list__tile--link:hover, .v-list .v-list__tile--highlighted, .v-list .v-list__group__header:hover, .v-list .v-list__group--active:before, .v-list .v-list__group--active:after {
786	background: #7f62f8 !important;	786	background: #7f62f8 !important;
787	color: #71d9ea !important;	787	color: #71d9ea !important;
788	box-shadow: 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 1px 8px 0 rgba(0, 0, 0, 0.12) !important;	788	box-shadow: 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 1px 8px 0 rgba(0, 0, 0, 0.12) !important;
789	// border-radius: 12px !important;	789	// border-radius: 12px !important;
790	}	790	}
791		791
792	@media screen and (max-width: 420px) {	792	@media screen and (max-width: 420px) {
793	.v-list--dense .v-list__tile:not(.v-list__tile--avatar) {	793	.v-list--dense .v-list__tile:not(.v-list__tile--avatar) {
794	font-size: 14px;	794	font-size: 14px;
795	}	795	}
796		796
797	.imgLogo {	797	.imgLogo {
798	height: 32px;	798	height: 32px;
799	width: 120px;	799	width: 120px;
800	}	800	}
801	}	801	}
802	</style>	802	</style>
803		803
804		804
805	<style scoped>	805	<style scoped>
806	.theme--light .v-icon,	806	.theme--light .v-icon,
807	.application .theme--light.v-icon {	807	.application .theme--light.v-icon {
808	color: #39b982;	808	color: #39b982;
809	}	809	}
810	.side-bar-color {	810	.side-bar-color {
811	background: #827bfa !important;	811	background: #827bfa !important;
812	/* border-top-right-radius: 74px !important; */	812	/* border-top-right-radius: 74px !important; */
813	}	813	}
814	.v-navigation-drawer--fixed {	814	.v-navigation-drawer--fixed {
815	/* position: absolute !important; */	815	/* position: absolute !important; */
816		816
817	/* min-height: calc(2000px - 64px - 50px - 81px) !important; */	817	/* min-height: calc(2000px - 64px - 50px - 81px) !important; */
818	/* max-height: inherit !important; */	818	/* max-height: inherit !important; */
819	}	819	}
820	.hover:hover {	820	.hover:hover {
821	color: red !important;	821	color: red !important;
822	background: red !important;	822	background: red !important;
823	}	823	}
824	</style>	824	</style>
825		825
826		826
827		827

src/pages/Academic/assignment.vue

Diff comments View file @1e1e364

 <template>
   <v-container fluid class="body-color">
     <!-- ****** EDIT  Assignment ****** -->
     <v-dialog v-model="editAssignmentDialog" max-width="400px">
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Assignment</label>
             <v-icon size="24" class="right" @click="editAssignmentDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-container fluid>
           <v-form ref="formEditAssignment" v-model="validEditAssignment" lazy-validation>
             <v-layout>
               <v-flex xs4 class="pt-4 subheading">
                 <label class="right">Title:</label>
               </v-flex>
               <v-flex xs8 class="ml-3">
                 <v-text-field v-model="editedItem.title" type="text" :rules="titleRules" required></v-text-field>
               </v-flex>
             </v-layout>
             <v-layout>
               <v-flex xs4 class="pt-4 subheading">
                 <label class="right">Description:</label>
               </v-flex>
               <v-flex xs8 class="ml-3">
                 <v-text-field
                   v-model="editedItem.description"
                   type="text"
                   :rules="deadlineRules"
                   required
                 ></v-text-field>
               </v-flex>
             </v-layout>
             <v-layout>
               <v-flex xs4 class="pt-4 subheading">
                 <label class="right">Deadline:</label>
               </v-flex>
               <v-flex xs8 class="ml-3">
                 <v-menu
                   ref="menu1"
                   :close-on-content-click="false"
                   v-model="menu1"
                   :nudge-right="40"
                   :return-value.sync="menu1"
                   lazy
                   transition="scale-transition"
                   offset-y
                   full-width
                   min-width="290px"
                 >
                   <v-text-field
                     slot="activator"
                     v-model="editedItem.deadline"
                     placeholder="Select Date"
                     :rules="deadlineRules"
                     append-icon="event"
                     required
                   ></v-text-field>
                   <v-date-picker v-model="editedItem.date" @input="menu1 = false"></v-date-picker>
                 </v-menu>
               </v-flex>
             </v-layout>
             <v-layout>
               <v-flex xs4 class="pt-4 subheading">
                 <label class="right">Class:</label>
               </v-flex>
               <v-flex xs8 class="ml-3">
                 <v-select
                   :items="classList"
                   item-text="classNum"
                   item-value="_id"
                   :rules="classRules"
                   v-model="editedItem.classId"
                   @change="getSections(editedItem.classId)"
                   required
                 ></v-select>
               </v-flex>
             </v-layout>
             <v-layout>
               <v-flex xs4 class="pt-4 subheading">
                 <label class="right">Section:</label>
               </v-flex>
               <v-flex xs8 class="ml-3">
                 <v-select
                   :items="addSection"
                   item-text="name"
                   item-value="_id"
                   v-model="editedItem.sectionId"
                   :rules="sectionRules"
                   @change="getClassSubject(editedItem.classId)"
                   required
                 ></v-select>
               </v-flex>
             </v-layout>
             <v-layout>
               <v-flex xs4 class="pt-4 subheading">
                 <label class="right">Subject</label>
               </v-flex>
               <v-flex xs8 class="ml-3">
                 <v-select
                   :items="subjectList.subjects"
                   v-model="editedItem.subjectName"
                   item-text="subjectName"
                   item-value="_id"
                   :rules="subjectRules"
                   required
                 ></v-select>
               </v-flex>
             </v-layout>
             <v-layout>
               <v-flex xs4 class="pt-4 subheading">
                 <label class="right hidden-xs-only hidden-sm-only">Uplaod File:</label>
                 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">File :</label>
               </v-flex>
               <v-flex xs8 sm8 class="ml-3">
                 <v-text-field
                   label="Select File"
                   @click="pickFile"
                   v-model="imageName"
                   append-icon="attach_file"
                 ></v-text-field>
                 <input
                   type="file"
                   style="display:none"
                   ref="image"
                   accept="image/*"
                   @change="onFilePicked"
                 />
               </v-flex>
             </v-layout>
             <v-flex xs12 sm12>
               <v-card-actions>
                 <v-spacer></v-spacer>
                 <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn>
               </v-card-actions>
             </v-flex>
           </v-form>
         </v-container>
       </v-card>
     </v-dialog>
     <!-- ****** VIEW PROFIL NOTICE BOARD ******  -->
     <v-dialog v-model="viewAssignmentDialog" max-width="500px">
       <v-card flat class="card-style pa-3" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View Attendence</label>
             <v-icon size="24" class="right" @click="viewAssignmentDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-card-text>
           <v-container grid-list-md>
             <v-layout wrap>
               <v-flex>
                 <v-layout>
                   <v-flex xs6 sm4>
                     <h5 class="right my-1">
                       <b>Title:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm8 xs6>
                     <h5 class="my-1">{{ editedItem.title }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs6 sm4>
                     <h5 class="right my-1">
                       <b>Description:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm8 xs6>
                     <h5 class="my-1">{{ editedItem.description }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs6 sm4>
                     <h5 class="right my-1">
                       <b>Deadline:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm8 xs6>
                     <h5 class="my-1">{{ dates(editedItem.deadline) }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
           </v-container>
         </v-card-text>
       </v-card>
     </v-dialog>
     <!-- ****** EXISTING ASSIGNMENT TABLE ****** -->
     <v-toolbar color="transparent" flat>
       <v-btn
         fab
         dark
         class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
         small
         @click="addAssignmentDialog = true"
       >
         <v-icon dark>add</v-icon>
       </v-btn>
       <v-flex xs1 class="hidden-sm-only hidden-xs-only">
         <v-btn round class="open-dialog-button" dark @click="addAssignmentDialog = true">
           <v-icon class="white--text pr-1" size="20">add</v-icon>Add Assignment
         </v-btn>
       </v-flex>
       <v-spacer></v-spacer>
       <v-flex lg2 md2 xs12 v-show="show">
         <v-select
           :items="classList"
           placeholder="Select Your Class"
           v-model="showAssignment.classId"
           item-text="classNum"
           item-value="_id"
           name="Select Class"
           :rules="classRules"
           @change="getAssignmentList()"
           class="pl-2"
           required
         ></v-select>
       </v-flex>
       <v-card-title class="body-1" v-show="show">
         <v-btn icon flat @click="displaySearch">
           <v-avatar size="27">
             <img src="/static/icon/search.png" alt="icon" />
           </v-avatar>
         </v-btn>
       </v-card-title>
       <v-flex xs9 sm9 md2 lg2 xl2 v-if="showSearch">
         <v-layout>
           <v-text-field
             v-model="search"
             placeholder="Search"
             prepend-inner-icon="search"
             color="primary"
             autofocus
             style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important"
           ></v-text-field>
           <v-icon @click="closeSearch" color="error">close</v-icon>
         </v-layout>
       </v-flex>
     </v-toolbar>
     <v-data-table
       :headers="headers"
       :items="assignmentData"
       :pagination.sync="pagination"
       :search="search"
     >
       <template slot="items" slot-scope="props">
         <tr class="tr">
           <td class="td-row td">{{ props.index + 1 }}</td>
           <td class="text-xs-center td td-row">{{ props.item.title }}</td>
           <td class="text-xs-center td td-row">{{ props.item.description }}</td>
           <td class="text-xs-center td td-row">{{ props.item.deadline }}</td>
           <td class="text-xs-center td td-row">{{ props.item.sectionId.name }}</td>
           <td
             class="text-xs-center td td-row"
-            v-if="role !=  'TEACHER' "
+            v-if="role === 'TEACHER'"
           >{{ props.item.teacherId.name }}</td>
           <td
             class="text-xs-center td td-row"
-            v-if="role !=  'ADMIN'"
+            v-if="role === 'ADMIN'"
-          >{{ props.item.schoolId .name }}</td>
+          >{{ props.item.schoolId.name }}</td>
           <td class="text-xs-center td td-row">
-            <v-btn
+            <a :href="props.item.fileName" target="_blank" style="text-decoration: none!important;">
-              class="add-button"
+              <v-btn flat block @click="generatePDF2Canvas(props.item)" :loading="loadingPdf">
-              @click="generatePDF2Canvas(props.item)"
+                <span>
-              :loading="loadingPdf"
+                  <h5>{{props.item.fileName}}</h5>
-              dark
+                </span>
-            >{{ props.item.fileType }}</v-btn>
+              </v-btn>
+            </a>
           </td>
           <td class="text-xs-center td td-row">
             <span>
               <v-tooltip top>
                 <img
                   slot="activator"
                   style="cursor:pointer; width:25px; height:25px; "
                   class="mr-3"
                   @click="profile(props.item)"
                   src="/static/icon/view.png"
                 />
                 <span>View</span>
               </v-tooltip>
               <v-tooltip top>
                 <img
                   slot="activator"
                   style="cursor:pointer; width:20px; height:18px; "
                   class="mr-3"
                   @click="editItem(props.item)"
                   src="/static/icon/edit.png"
                 />
                 <span>Edit</span>
               </v-tooltip>
               <v-tooltip top>
                 <img
                   slot="activator"
                   style="cursor:pointer; width:20px; height:20px; "
                   class="mr-3"
                   @click="deleteItem(props.item)"
                   src="/static/icon/delete.png"
                 />
                 <span>Delete</span>
               </v-tooltip>
             </span>
           </td>
         </tr>
       </template>
       <v-alert
         slot="no-results"
         :value="true"
         color="error"
         icon="warning"
       >Your search for "{{ search }}" found no results.</v-alert>
     </v-data-table>
     <!-- ****** ADD MULTIPLE Subject ****** -->
     <v-snackbar
       :timeout="timeout"
       :top="y === 'top'"
       :right="x === 'right'"
       :vertical="mode === 'vertical'"
       v-model="snackbar"
       :color="color"
     >{{ text }}</v-snackbar>
     <v-dialog v-model="addAssignmentDialog" max-width="400px" v-if="addAssignmentDialog">
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Assignment</label>
             <v-icon size="24" class="right" @click="closeAddAssignmentModel">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-container fluid fill-height>
           <v-layout align-center>
             <v-flex xs12>
               <v-form ref="form" v-model="valid" lazy-validation>
                 <v-layout>
                   <v-flex xs4 sm4 class="pt-4 subheading">
                     <label class="right">Title :</label>
                   </v-flex>
                   <v-flex xs8 sm8 class="ml-3">
                     <v-text-field
                       name="name"
                       type="text"
                       placeholder="Select Title"
                       :rules="titleRules"
                       v-model="addAssignment.title"
                       required
                     ></v-text-field>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 sm4 class="pt-4 subheading">
                     <label class="right">Description :</label>
                   </v-flex>
                   <v-flex xs8 sm8 class="ml-3">
                     <v-text-field
                       name="name"
                       type="text"
                       placeholder="Select Description"
                       :rules="descriptionRules"
                       v-model="addAssignment.description"
                       required
                     ></v-text-field>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 sm4 class="pt-4 subheading">
                     <label class="right">Deadline :</label>
                   </v-flex>
                   <v-flex xs8 sm7 class="ml-3">
                     <v-menu
                       ref="menu2"
                       :close-on-content-click="false"
                       v-model="menu2"
                       :nudge-right="40"
                       :return-value.sync="addAssignment.date"
                       lazy
                       transition="scale-transition"
                       offset-y
                       full-width
                       min-width="290px"
                     >
                       <v-text-field
                         slot="activator"
                         v-model="addAssignment.deadline"
                         :rules="deadlineRules"
                         placeholder="Select Date"
                         append-icon="event"
                         readonly
                       ></v-text-field>
                       <v-date-picker
                         v-model="addAssignment.deadline"
                         @input="$refs.menu2.save(addAssignment.date)"
                       ></v-date-picker>
                     </v-menu>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 sm4 class="pt-4 subheading">
                     <label class="right">Class :</label>
                   </v-flex>
                   <v-flex xs8 sm8 class="ml-3">
                     <v-select
                       :items="classList"
                       placeholder="Select Class"
                       item-text="classNum"
                       item-value="_id"
                       v-model="addAssignment.classId"
                       name="Select Class"
                       :rules="classRules"
                       @change="getSections(addAssignment.classId)"
                       class="pl-2"
                       required
                     ></v-select>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 sm4 class="pt-4 subheading">
                     <label class="right">Section :</label>
                   </v-flex>
                   <v-flex xs8 sm8 class="ml-3">
                     <v-select
                       :items="addSection"
                       placeholder="Select Section"
                       item-text="name"
                       item-value="_id"
                       v-model="addAssignment.sectionId"
                       name="Select Section"
                       :rules="sectionRules"
                       @change="getClassSubject(addAssignment.classId)"
                       class="px-2"
                       required
                     ></v-select>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs3 sm4 class="pt-4 subheading">
                     <label class="right">Subject :</label>
                   </v-flex>
                   <v-flex xs8 sm8 class="ml-2">
                     <v-select
                       :items="subjectList.subjects"
                       placeholder="Select your subject"
                       v-model="addAssignment.subjectName"
                       item-text="subjectName"
                       item-value="_id"
                       :rules="subjectRules"
                       required
                     ></v-select>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right hidden-xs-only hidden-sm-only">Uplaod File:</label>
                     <label class="right hidden-lg-only hidden-md-only hidden-xl-only">File:</label>
                   </v-flex>
                   <v-flex xs8 class="ml-3">
                     <v-text-field
                       placeholder="Select File"
                       @click="pickFile"
                       v-model="imageName"
                       append-icon="attach_file"
                     ></v-text-field>
                     <input
                       type="file"
                       style="display:none"
                       ref="image"
                       accept="image/*"
                       @change="onFilePicked"
                     />
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs12 sm12>
                     <v-card-actions>
                       <v-spacer></v-spacer>
                       <v-btn
                         @click="submit"
                         round
                         dark
                         :loading="loading"
                         class="add-button"
                       >Add Assignment</v-btn>
                     </v-card-actions>
                   </v-flex>
                 </v-layout>
               </v-form>
             </v-flex>
           </v-layout>
         </v-container>
       </v-card>
     </v-dialog>
     <div class="loader" v-if="showLoader">
       <v-progress-circular indeterminate color="white"></v-progress-circular>
     </div>
   </v-container>
 </template>
 <script>
 import http from "@/Services/http.js";
 import Util from "@/util";
 import moment from "moment";
 import jsPDF from "jspdf";
 import { saveAs } from "file-saver";
 export default {
   data: () => ({
     snackbar: false,
     role: "",
     menu1: false,
     menu2: false,
     y: "top",
     x: "right",
     mode: "",
     timeout: 3000,
     text: "",
     color: "",
     show: true,
     showSearch: false,
     showLoader: false,
     loading: false,
     editLoading: false,
     date: null,
     search: "",
     viewAssignmentDialog: false,
     editAssignmentDialog: false,
     valid: true,
     validEditAssignment: true,
     addAssignmentDialog: false,
     pagination: {
       rowsPerPage: 10,
     },
     token: "",
     headers: [
       {
         text: "No",
         align: "",
         sortable: false,
         value: "No",
       },
       {
         text: "Title",
         value: "title",
         sortable: false,
         align: "center",
       },
       {
         text: "Description",
         value: "description",
         sortable: false,
         align: "center",
       },
       {
         text: "Deadline",
         value: "deadline",
         sortable: false,
         align: "center",
       },
       {
         text: "Section",
         value: "name",
         sortable: false,
         align: "center",
       },
       {
         text: "Uploader",
         value: "name",
         sortable: false,
         align: "center",
       },
       {
         text: "File",
         value: "file",
         sortable: false,
         align: "center",
       },
       { text: "Action", value: "", sortable: false, align: "center" },
     ],
     showPdfData: false,
     loadingPdf: false,
     hideData: true,
     assignmentData: [],
     subjectList: [],
     classList: [],
     addSection: [],
     editedIndex: -1,
     addSubject: {},
     editedItem: {
       title: "",
       description: "",
       deadline: "",
       classId: "",
       sectionId: "",
       subjectName: "",
       fileType: "",
     },
     addAssignment: {},
     showAssignment: {},
     imageData: {},
     imageName: "",
     imageUrl: "",
     imageFile: "",
     titleRules: [(v) => !!v || " Title is required"],
     descriptionRules: [(v) => !!v || " Description is required"],
     deadlineRules: [(v) => !!v || " Deadline is required"],
     classRules: [(v) => !!v || "Class is required"],
     sectionRules: [(v) => !!v || "Section is required"],
     subjectRules: [(v) => !!v || "Student is required"],
     fileRules: [(v) => !!v || "File is required"],
   }),
   watch: {
     addAssignmentDialog: function (val) {
       if (!val) {
         this.addAssignment = [];
         this.imageName = "";
       }
     },
   },
   methods: {
     dates: function (date) {
       return moment(date).format("MMMM DD, YYYY");
     },
     pickFile() {
       this.$refs.image.click();
     },
     editItem(item) {
       this.editedIndex = this.assignmentData;
       this.editedItem = Object.assign({}, item);
       this.dialog = true;
       this.editAssignmentDialog = true;
     },
     profile(item) {
       this.editedIndex = this.assignmentData;
       this.editedItem = Object.assign({}, item);
       this.dialog1 = true;
       this.viewAssignmentDialog = true;
     },
     deleteItem(item) {
       let deleteAssignment = {
         assignmentId: item._id,
       };
       http()
         .delete(
           "/deleteAssignment",
           confirm("Are you sure you want to delete this?") && {
             params: deleteAssignment,
           },
           {
             headers: { Authorization: "Bearer " + this.token },
           }
         )
         .then((response) => {
           this.getAssignmentList();
           this.snackbar = true;
           this.text = "Successfully delete Existing Assignment";
           this.color = "green";
         })
         .catch((error) => {
           this.snackbar = true;
           this.text = error.response.data.message;
           this.color = "error";
         });
     },
     close() {
       this.editAssignmentDialog = false;
     },
     close1() {
       this.viewAssignmentDialog = false;
     },
     closeAddAssignmentModel() {
       this.addAssignmentDialog = false;
       //   this.assignmentData = [];
       this.addAssignment = [];
       this.imageName = "";
     },
     submit() {
       var addAssignment = {
         title: this.addAssignment.title,
         description: this.addAssignment.description,
         deadline: this.addAssignment.deadline,
         classId: this.addAssignment.classId,
         sectionId: this.addAssignment.sectionId,
         subjectName: this.addAssignment.subjectName,
         file: this.addAssignment.imageName,
         fileName: this.imageName,
       };
       var signatures = {
         JVBERi0: "other",
         iVBORw0KGgo: "image",
         UEsDBBQ: "other",
         "/": "image",
         AAABAA: "image",
         IywiV2hhdC: "other",
         bmFtZSxl: "other",
       };
       function detectMimeType(b64) {
         for (var s in signatures) {
           if (b64.indexOf(s) === 0) {
             return signatures[s];
           }
         }
       }
       if (this.$refs.form.validate()) {
         if (this.imageUrl) {
           var str = this.imageUrl;
           const [baseUrl, imageUrl] = str.split(/,/);
           addAssignment.upload = imageUrl;
           addAssignment.fileType = detectMimeType(imageUrl);
         }
-        console.log("data===>", addAssignment);
+        // console.log("data===>", addAssignment);
         http()
           .post("/createAssignment", addAssignment)
           .then((response) => {
             this.getAssignmentList();
             this.snackbar = true;
-            this.text = "Syllabus added successfully";
+            this.text = "Assignment added successfully";
             this.color = "green";
             this.addAssignmentDialog = false;
             this.clear();
           })
           .catch((error) => {
             // console.log(error);
             this.snackbar = true;
             this.text = error.response.data.message;
             this.color = "red";
           });
       }
     },
     getAssignmentList() {
       if (this.addAssignment.classId) {
         this.addAssignment.classId = this.addAssignment.classId;
       }
       this.showLoader = true;
       http()
         .get(
           "/getAssignmentList",
           {
             params: { classId: this.showAssignment.classId },
           },
           {
             headers: { Authorization: "Bearer " + this.token },
           }
         )
         .then((response) => {
           this.assignmentData = response.data.data;
           this.showLoader = false;
           this.loadingSearch = false;
         })
         .catch((error) => {
           // console.log("err====>", err);
           this.showLoader = false;
           this.loadingSearch = false;
           this.snackbar = true;
           this.text = error.response.data.message;
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
           }
         });
     },
     clear() {
       this.$refs.form.reset();
     },
     save() {
       if (this.$refs.formEditAssignment.validate()) {
         let editAssignment = {
           assignmentId: this.editedItem._id,
           title: this.addAssignment.title,
           description: this.addAssignment.description,
           deadline: this.addAssignment.deadline,
           classId: this.addAssignment.classId,
           sectionId: this.addAssignment.sectionId,
           subjectName: this.addAssignment.subjectName,
           file: this.addAssignment.imageName,
           fileName: this.imageName,
         };
         this.editLoading = true;
         var signatures = {
           JVBERi0: "other",
           iVBORw0KGgo: "image",
           UEsDBBQ: "other",
           "/": "image",
           AAABAA: "image",
           IywiV2hhdC: "other",
           bmFtZSxl: "other",
         };
         function detectMimeType(b64) {
           for (var s in signatures) {
             if (b64.indexOf(s) === 0) {
               return signatures[s];
             }
           }
         }
         if (this.imageUrl) {
           var str = this.imageUrl;
           const [baseUrl, imageUrl] = str.split(/,/);
           editAssignment.upload = imageUrl;
           editAssignment.fileType = detectMimeType(imageUrl);
         }
         http()
           .put("/updateAssignment", editAssignment)
           .then((response) => {
             this.snackbar = true;
             this.text = "Successfully Edit Existing Assignment";
             this.color = "green";
             this.getAssignmentList();
             this.editLoading = false;
             this.editAssignmentDialog = false;
           })
           .catch((error) => {
             this.editLoading = false;
             // console.log(error);
           });
       }
     },
     getClass() {
       http()
         .get("/getClassesList", {
           headers: { Authorization: "Bearer " + this.token },
         })
         .then((response) => {
           this.classList = response.data.data;
         })
         .catch((error) => {
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
           }
         });
     },
     getSections(_id) {
       var token = this.$store.state.token;
       this.showLoader = true;
       http()
         .get(
           "/getSectionsList",
           { params: { classId: _id } },
           {
             headers: { Authorization: "Bearer " + token },
           }
         )
         .then((response) => {
           this.addSection = response.data.data;
           this.showLoader = false;
         })
         .catch((err) => {
           this.showLoader = false;
         });
     },
     getClassSubject(_id) {
       this.showLoader = true;
       //   this.classId = this.classId;
       http()
         .get(
           "/getParticularClass",
           { params: { classId: _id } },
           {
             headers: { Authorization: "Bearer " + this.token },
           }
         )
         .then((response) => {
           this.subjectList = response.data.data;
           this.showLoader = false;
         })
         .catch((err) => {
           this.showLoader = false;
         });
     },
     onFilePicked(e) {
       const files = e.target.files;
       this.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);
         });
         // console.log("this.imageName", this.imageName);
       } else {
         this.imageName = "";
         this.imageFile = "";
         this.imageUrl = "";
       }
     },
     displaySearch() {
       (this.show = false), (this.showSearch = true);
     },
     closeSearch() {
       this.showSearch = false;
       this.show = true;
       this.search = "";
     },
     async generatePDF2Canvas(item) {
       var dataType = "";
       var type = "";
       if (item.fileType == "image") {
         dataType = "file.jpg";
       } else if (item.fileType == "other") {
         dataType = "file.pdf";
         type = "application/pdf";
       }
       var FileSaver = require("file-saver");
       FileSaver.saveAs(item.file, "image.jpg");
     },
   },
   mounted() {
     this.token = this.$store.state.token;
     this.role = this.$store.state.role;
     this.getClass();
   },
 };
 </script>

src/pages/Academic/syllabus.vue

Diff comments View file @1e1e364

 <template>
   <v-container fluid class="body-color">
     <!-- ****** EDIT  Syllabus ****** -->
     <v-dialog v-model="editSyllabusDialog" max-width="400px">
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Syllabus</label>
             <v-icon size="24" class="right" @click="editSyllabusDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-container fluid>
           <v-form ref="formEditSyllabus" v-model="validEditSyllabus" lazy-validation>
             <v-layout>
               <v-flex xs4 sm4 class="pt-4 subheading">
                 <label class="right">Title :</label>
               </v-flex>
               <v-flex xs8 sm8 class="ml-3">
                 <v-text-field v-model="editedItem.title"></v-text-field>
               </v-flex>
             </v-layout>
             <v-layout>
               <v-flex xs4 class="pt-4 subheading">
                 <label class="right">Description:</label>
               </v-flex>
               <v-flex xs8 class="ml-3">
                 <v-text-field v-model="editedItem.description"></v-text-field>
               </v-flex>
             </v-layout>
             <v-layout>
               <v-flex xs4 class="pt-4 subheading">
                 <label class="right">Class:</label>
               </v-flex>
               <v-flex xs8 class="ml-3">
                 <v-select
                   :items="classList"
                   v-model="editedItem.classId"
                   label="Select Class"
                   item-text="classNum"
                   item-value="_id"
                   name="Select Class"
                   @change="getSections(addSyllabus.classId)"
                   required
                 ></v-select>
               </v-flex>
             </v-layout>
             <!-- <v-layout>
               <v-flex xs4 sm4 class="pt-4 subheading">
                 <label class="right">Section :</label>
               </v-flex>
               <v-flex xs8 sm8 class="ml-3">
                 <v-select
                   :items="addSection"
                   label="Select Section"
                   item-text="name"
                   item-value="_id"
                   v-model="editedItem.sectionId"
                   name="Select Section"
                   class="px-2"
                   required
                 ></v-select>
               </v-flex>
             </v-layout>-->
             <v-layout>
               <v-flex xs4 class="pt-4 subheading">
                 <label class="right">File:</label>
               </v-flex>
               <v-flex xs8 sm6 class="ml-3">
                 <v-text-field
                   label="Select file"
                   @click="pickFile"
                   v-model="imageName"
                   append-icon="attach_file"
                 ></v-text-field>
               </v-flex>
               <input
                 type="file"
                 style="display:none"
                 ref="image"
                 accept="image/*"
                 @change="onFilePicked"
               />
             </v-layout>
             <v-flex xs12 sm12>
               <v-card-actions>
                 <v-spacer></v-spacer>
                 <v-btn
                   round
                   dark
                   @click="save"
                   :loading="editLoading"
                   class="add-button"
                 >Update Syllabus</v-btn>
               </v-card-actions>
             </v-flex>
           </v-form>
         </v-container>
       </v-card>
     </v-dialog>
     <!-- ****** VIEW PROFIL NOTICE BOARD ******  -->
     <!-- <v-dialog v-model="viewSubjectDialog" max-width="600px">
       <v-toolbar flat class="card-style pa-3" dark>
         <v-spacer></v-spacer>
         <v-toolbar-title>
           <h3>Subject</h3>
         </v-toolbar-title>
         <v-spacer></v-spacer>
         <v-icon @click="close1">close</v-icon>
       </v-toolbar>
       <v-card>
         <v-card-text>
           <v-container grid-list-md>
             <v-layout wrap>
               <v-flex>
                 <v-layout>
                   <v-flex xs7 sm6>
                     <h5 class="right my-1">
                       <b>Subject Name:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs5>
                     <h5 class="my-1">{{ editedItem.subjectName }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
           </v-container>
         </v-card-text>
       </v-card>
     </v-dialog>-->
     <!-- ****** EXISTING SYLLABUS TABLE ****** -->
     <v-toolbar color="transparent" flat>
       <v-btn
         fab
         dark
         class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
         small
         @click="addSyllabusDialog = true"
       >
         <v-icon dark>add</v-icon>
       </v-btn>
       <v-flex xs1 class="hidden-sm-only hidden-xs-only">
         <v-btn round class="open-dialog-button" dark @click="addSyllabusDialog = true">
           <v-icon class="white--text pr-1" size="20">add</v-icon>Add Syllabus
         </v-btn>
       </v-flex>
       <v-spacer></v-spacer>
       <v-flex lg2 md2 xs12 v-show="show">
         <v-select
           :items="classList"
           label="Select Class"
           v-model="showSyllabus.classId"
           item-text="classNum"
           item-value="_id"
           name="Select Class"
           :rules="classRules"
           @change="getSyallabusList"
           class="pl-2"
           required
         ></v-select>
       </v-flex>
       <v-card-title class="body-1" v-show="show">
         <v-btn icon flat @click="displaySearch">
           <v-avatar size="27">
             <img src="/static/icon/search.png" alt="icon" />
           </v-avatar>
         </v-btn>
       </v-card-title>
       <v-flex xs9 sm9 md2 lg2 xl2 v-if="showSearch">
         <v-layout>
           <v-text-field
             autofocus
             v-model="search"
             label="Search"
             prepend-inner-icon="search"
             color="primary"
             style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important"
           ></v-text-field>
           <v-icon @click="closeSearch" color="error">close</v-icon>
         </v-layout>
       </v-flex>
     </v-toolbar>
     <v-data-table
       :headers="headers"
       :items="syllabusList"
       :pagination.sync="pagination"
       :search="search"
     >
       <template slot="items" slot-scope="props">
         <tr class="tr">
           <td class="td-row td">{{ props.index + 1 }}</td>
           <td class="text-xs-center td td-row">{{ props.item.title }}</td>
           <td class="text-xs-center td td-row">{{ props.item.description }}</td>
           <td class="text-xs-center td td-row">{{ dates(props.item.created) }}</td>
           <td
             class="text-xs-center td td-row"
             v-if="props.item.teacherId"
           >{{ props.item.teacherId.name }}</td>
           <td class="text-xs-center td td-row" v-else>{{ props.item.schoolId.name }}</td>
           <td class="text-xs-center td td-row">
-            <v-btn
+            <!-- <v-btn
               class="add-button"
               @click="generatePDF2Canvas(props.item)"
               :loading="loadingPdf"
               dark
-            >{{ props.item.fileType }}</v-btn>
+            >{{ props.item.fileName }}</v-btn>-->
+            <a :href="props.item.fileName" target="_blank" style="text-decoration: none!important;">
+              <v-btn flat block @click="generatePDF2Canvas(props.item)" :loading="loadingPdf">
+                <span>
+                  <h5>{{props.item.fileName}}</h5>
+                </span>
+              </v-btn>
+            </a>
           </td>
           <td class="text-xs-center td td-row">
             <span>
               <v-tooltip top>
                 <img
                   slot="activator"
                   style="cursor:pointer; width:20px; height:18px; "
                   class="mr-3"
                   @click="editItem(props.item)"
                   src="/static/icon/edit.png"
                 />
                 <span>Edit</span>
               </v-tooltip>
               <v-tooltip top>
                 <img
                   slot="activator"
                   style="cursor:pointer; width:20px; height:20px; "
                   class="mr-3"
                   @click="deleteItem(props.item)"
                   src="/static/icon/delete.png"
                 />
                 <span>Delete</span>
               </v-tooltip>
             </span>
           </td>
         </tr>
       </template>
       <v-alert
         slot="no-results"
         :value="true"
         color="error"
         icon="warning"
       >Your search for "{{ search }}" found no results.</v-alert>
     </v-data-table>
     <!-- ****** ADD SYLLABUS ****** -->
     <v-snackbar
       :timeout="timeout"
       :top="y === 'top'"
       :right="x === 'right'"
       :vertical="mode === 'vertical'"
       v-model="snackbar"
       :color="color"
     >{{ text }}</v-snackbar>
     <v-dialog v-model="addSyllabusDialog" max-width="400px" v-if="addSyllabusDialog">
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Syllabus</label>
             <v-icon size="24" class="right" @click="closeAddStudentModel">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-container fluid fill-height>
           <v-layout align-center>
             <v-flex xs12>
               <v-form ref="form" v-model="valid" lazy-validation>
                 <v-layout>
                   <v-flex xs4 sm4 class="pt-4 subheading">
                     <label class="right">Title :</label>
                   </v-flex>
                   <v-flex xs8 sm8 class="ml-3">
                     <v-text-field
                       v-model="addSyllabus.title"
                       name="name"
                       type="text"
                       placeholder="Add Title"
                       :rules="titleRules"
                       required
                     ></v-text-field>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 sm4 class="pt-4 subheading">
                     <label class="right">Description :</label>
                   </v-flex>
                   <v-flex xs8 sm8 class="ml-3">
                     <v-text-field
                       v-model="addSyllabus.description"
                       name="name"
                       type="text"
                       placeholder="Add Description"
                       :rules="descriptionRules"
                       required
                     ></v-text-field>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right">Class:</label>
                   </v-flex>
                   <v-flex xs8 class="ml-3">
                     <v-select
                       :items="classList"
                       v-model="addSyllabus.classId"
                       label="Select Class"
                       item-text="classNum"
                       item-value="_id"
                       name="Select Class"
                       @change="getSections(addSyllabus.classId)"
                       required
                     ></v-select>
                   </v-flex>
                 </v-layout>
                 <!-- <v-layout>
                   <v-flex xs4 sm4 class="pt-4 subheading">
                     <label class="right">Section :</label>
                   </v-flex>
                   <v-flex xs8 sm8 class="ml-3">
                     <v-select
                       :items="addSection"
                       label="Select Section"
                       item-text="name"
                       item-value="_id"
                       v-model="addSyllabus.sectionId"
                       name="Select Section"
                       class="px-2"
                       required
                     ></v-select>
                   </v-flex>
                 </v-layout>-->
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right">File:</label>
                   </v-flex>
                   <v-flex xs8 sm6 class="ml-3">
                     <v-text-field
                       label="Select file"
                       @click="pickFile"
                       v-model="imageName"
                       append-icon="attach_file"
                     ></v-text-field>
                     <input
                       type="file"
                       style="display:none"
                       ref="image"
                       accept="image/*"
                       @change="onFilePicked"
                     />
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs12 sm12>
                     <v-card-actions>
                       <v-spacer></v-spacer>
                       <v-btn
                         @click="submit"
                         round
                         dark
                         :loading="loading"
                         class="add-button"
                       >Add Syllabus</v-btn>
                     </v-card-actions>
                   </v-flex>
                 </v-layout>
               </v-form>
             </v-flex>
           </v-layout>
         </v-container>
       </v-card>
     </v-dialog>
     <div class="loader" v-if="showLoader">
       <v-progress-circular indeterminate color="white"></v-progress-circular>
     </div>
   </v-container>
 </template>
 <script>
 import http from "@/Services/http.js";
 import Util from "@/util";
 import moment from "moment";
 import jsPDF from "jspdf";
 import { saveAs } from "file-saver";
 export default {
   data: () => ({
     snackbar: false,
     y: "top",
     x: "right",
     mode: "",
     timeout: 3000,
     text: "",
     color: "",
     show: true,
     showSearch: false,
     showLoader: false,
     loading: false,
     editLoading: false,
     date: null,
     search: "",
     editSyllabusDialog: false,
     valid: true,
     validEditSyllabus: true,
     addSyllabusDialog: false,
     loadingPdf: false,
     pagination: {
       rowsPerPage: 10,
     },
     token: "",
     upload: "",
     titleRules: [(v) => !!v || " Title is required"],
     descriptionRules: [(v) => !!v || " Description is required"],
     classRules: [(v) => !!v || " Class Name is required"],
     fileRules: [(v) => !!v || " File is required"],
     headers: [
       {
         text: "No",
         align: "",
         sortable: false,
         value: "No",
       },
       {
         text: "Title",
         value: "title",
         sortable: false,
         align: "center",
       },
       {
         text: "Description",
         value: "description",
         sortable: false,
         align: "center",
       },
       {
         text: "Date",
         value: "created",
         sortable: false,
         align: "center",
       },
       {
         text: "Uploader",
         value: "upload",
         sortable: false,
         align: "center",
       },
       {
         text: "File",
         value: "documentUrl",
         sortable: false,
         align: "center",
       },
       { text: "Action", value: "", sortable: false, align: "center" },
     ],
     syllabusList: [],
     classList: [],
     addSection: [],
     editedIndex: -1,
     addSyllabus: {},
     showSyllabus: {},
     editedItem: {
       subjectName: "",
     },
     imageData: {},
     imageName: "",
     imageUrl: "",
     imageFile: "",
   }),
   watch: {
     addSyllabusDialog: function (val) {
       if (!val) {
         this.addSyllabus = [];
         this.imageName = "";
       }
     },
   },
   methods: {
     pickFile() {
       this.$refs.image.click();
     },
     dates: function (date) {
       return moment(date).format("MMMM DD, YYYY");
     },
     editItem(item) {
       this.editedIndex = this.syllabusList;
       this.editedItem = Object.assign({}, item);
       this.dialog = true;
       this.editSyllabusDialog = true;
     },
     download(item) {
       this.editedIndex = this.syllabusList;
       this.editedItem = Object.assign({}, item);
       this.dialog1 = true;
     },
     deleteItem(item) {
       let deleteSyallabus = {
         syallabusId: item._id,
       };
       http()
         .delete(
           "/deleteSyallabus",
           confirm("Are you sure you want to delete this?") && {
             params: deleteSyallabus,
           }
         )
         .then((response) => {
           this.getSyallabusList();
           this.snackbar = true;
           this.color = "green";
           this.text = "Successfully delete Existing Syllabus";
         })
         .catch((error) => {
           this.snackbar = true;
           this.text = error.response.data.message;
           this.color = "error";
         });
     },
     close() {
       this.editSyllabusDialog = false;
     },
     closeAddStudentModel() {
       this.addSyllabusDialog = false;
       //   this.syllabusList = [];
       this.addSyllabus = [];
       this.imageName = "";
     },
     submit() {
       // var addSyllabus = {
       //   classId: this.addSyllabus.classId,
       //   title: this.addSyllabus.title,
       //   description: this.addSyllabus.description,
       //   upload: this.addSyllabus.upload,
       //   fileType: this.addSyllabus.fileType
       // };
       var signatures = {
-        JVBERi0: "other",
+        //   JVBERi0: "other",
-        iVBORw0KGgo: "image",
+        //   iVBORw0KGgo: "image",
-        UEsDBBQ: "other",
+        //   UEsDBBQ: "other",
-        "/": "image",
+        //   "/": "image",
-        AAABAA: "image",
+        //   AAABAA: "image",
-        IywiV2hhdC: "other",
+        //   IywiV2hhdC: "other",
-        bmFtZSxl: "other",
+        //   bmFtZSxl: "other",
       };
       function detectMimeType(b64) {
         for (var s in signatures) {
           if (b64.indexOf(s) === 0) {
             return signatures[s];
           }
         }
       }
       if (this.$refs.form.validate()) {
         if (this.imageUrl) {
           var str = this.imageUrl;
           const [baseUrl, imageUrl] = str.split(/,/);
           this.addSyllabus.upload = imageUrl;
           this.addSyllabus.fileType = detectMimeType(imageUrl);
           this.addSyllabus.fileName = this.imageName;
         }
         http()
           .post("/createSyallabus", this.addSyllabus)
           .then((response) => {
             this.getSyallabusList();
             this.snackbar = true;
             this.text = "Syllabus added successfully";
             this.clear();
             this.color = "green";
             this.addSyllabusDialog = false;
           })
           .catch((error) => {
             // console.log(error);
             this.snackbar = true;
             this.text = error.response.data.message;
             this.color = "error";
           });
       }
     },
     onFilePicked(e) {
       const files = e.target.files;
       this.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 = "";
       }
     },
     clear() {
       this.$refs.form.reset();
     },
     save() {
       if (this.$refs.formEditSyllabus.validate()) {
         let syllabusData = {
           syallabusId: this.editedItem._id,
           classId: this.editedItem.classId._id,
           // sectionId: this.editedItem.sectionId,
           title: this.editedItem.title,
           description: this.editedItem.description,
           upload: this.editedItem.upload,
           fileType: this.editedItem.fileType,
           fileName: this.imageName,
         };
         this.editLoading = true;
         var signatures = {
-          JVBERi0: "other",
+          //   JVBERi0: "other",
-          iVBORw0KGgo: "image",
+          //   iVBORw0KGgo: "image",
-          UEsDBBQ: "other",
+          //   UEsDBBQ: "other",
-          "/": "image",
+          //   "/": "image",
-          AAABAA: "image",
+          //   AAABAA: "image",
-          IywiV2hhdC: "other",
+          //   IywiV2hhdC: "other",
         };
         function detectMimeType(b64) {
           for (var s in signatures) {
             if (b64.indexOf(s) === 0) {
               return signatures[s];
             }
           }
         }
         if (this.imageUrl) {
           var str = this.imageUrl;
           const [baseUrl, imageUrl] = str.split(/,/);
           syllabusData.upload = imageUrl;
           syllabusData.fileType = detectMimeType(imageUrl);
         }
         http()
           .put("/updateSyallabus", syllabusData)
           .then((response) => {
             this.snackbar = true;
             this.text = "Successfully Edit Existing Syllabus";
             this.color = "green";
             this.editLoading = false;
             this.editSyllabusDialog = false;
             http()
               .get(
                 "/getSyallabusList",
                 { params: { classId: this.addSyllabus.classId } },
                 {
                   headers: { Authorization: "Bearer " + this.token },
                 }
               )
               .then((response) => {
                 this.syllabusList = response.data.data;
                 this.getSyallabusList();
                 this.snackbar = true;
                 this.color = "green";
                 this.close();
               })
               .catch((err) => {
                 console.log("err====>", err);
                 this.text = error.response.data.message;
                 this.color = "error";
               });
           })
           .catch((error) => {
             this.editLoading = false;
           });
       }
     },
     getSyallabusList() {
       this.showLoader = true;
       http()
         .get(
           "/getSyallabusList",
           { params: { classId: this.showSyllabus.classId } },
           {
             headers: { Authorization: "Bearer " + this.token },
           }
         )
         .then((response) => {
           this.syllabusList = response.data.data;
           this.showLoader = false;
         })
         .catch((err) => {
           this.showLoader = false;
         });
     },
     getClass() {
       http()
         .get("/getClassesList", {
           headers: { Authorization: "Bearer " + this.token },
         })
         .then((response) => {
           this.classList = response.data.data;
         })
         .catch((error) => {
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
           }
         });
     },
     getSections(_id) {
       var token = this.$store.state.token;
       this.showLoader = true;
       http()
         .get(
           "/getSectionsList",
           { params: { classId: _id } },
           {
             headers: { Authorization: "Bearer " + token },
           }
         )
         .then((response) => {
           this.addSection = response.data.data;
           this.showLoader = false;
         })
         .catch((err) => {
           this.showLoader = false;
         });
     },
     displaySearch() {
       (this.show = false), (this.showSearch = true);
     },
     closeSearch() {
       this.showSearch = false;
       this.show = true;
       this.search = "";
     },
     async generatePDF2Canvas(item) {
       // console.log("documentUrl", documentUrl);
       // this.loadingPdf = true;
       // const el = this.$refs.printMe;
       // add option type to get the image version
       // if not provided the promise will return
       // the canvas.
       // const options = {
       //   type: "dataURL"
       // };
       // this.output = await this.$html2canvas(el, options);
       // console.log("el,option", this.output);
       // if (this.output) {
       //   this.loadingPdf = false;
       // }
       // let doc = new jsPDF();
       // doc.addImage(this.output,"JPEG", 5, 10, 200, 280);
       // doc.save("File.pdf");
       // function download(documentUrl, filename) {
       //   fetch(documentUrl).then(function(t) {
       //     return t.blob().then(b => {
       //       var a = document.createElement("a");
       //       a.href = URL.createObjectURL(b);
       //       a.setAttribute("download", "filename");
       //       a.click();
       //     });
       //   });
       // }
       var dataType = "";
       var type = "";
       if (item.fileType == "image") {
         dataType = "file.jpg";
       } else if (item.fileType == "other") {
         dataType = "file.pdf";
         type = "application/pdf";
       }
       var FileSaver = require("file-saver");
       FileSaver.saveAs(item.documentUrl, "image.jpg");
       // var blob = new Blob([item.documentUrl], {
       //   type: type
       // });
       // FileSaver.saveAs(blob, dataType);
       // const url = window.URL.createObjectURL(new Blob([item.documentUrl],{ type: type } ));
       // console.log("document", item.documentUrl);
       // const link = document.createElement("a");
       // link.href = url;
       // link.setAttribute("download", dataType); //or any other extension
       // document.body.appendChild(link);
       // link.click();
       //  const blob = window.URL.createObjectURL(new Blob([item.documentUrl],{ type: type } ));
       //   const link = document.createElement('a')
       //   link.href = URL.createObjectURL(blob)
       //   link.download = dataType
       //   link.click()
       //   URL.revokeObjectURL(link.href)
     },
   },
   mounted() {
     this.token = this.$store.state.token;
     this.role = this.$store.state.role;
     this.getClass();
   },
 };
 </script>

src/pages/Account/editInvoice.vue

Diff comments View file @1e1e364

1	<template>	1	<template>
2	<v-app id="pages-dasboard">	2	<v-app id="pages-dasboard">
3	<!-- **** Edit multiple INVOICE **** -->	3	<!-- **** Edit multiple INVOICE **** -->
4		4
5	<v-snackbar	5	<v-snackbar
6	:timeout="timeout"	6	:timeout="timeout"
7	:top="y === 'top'"	7	:top="y === 'top'"
8	:right="x === 'right'"	8	:right="x === 'right'"
9	:vertical="mode === 'vertical'"	9	:vertical="mode === 'vertical'"
10	v-model="snackbar"	10	v-model="snackbar"
11	color="success"	11	color="success"
12	>{{ text }}</v-snackbar>	12	>{{ text }}</v-snackbar>
13	<v-flex xs12 sm12>	13	<v-flex xs12 sm12>
14	<v-container fluid grid-list-md>	14	<v-container fluid grid-list-md>
15	<v-layout wrap>	15	<v-layout wrap>
16	<v-flex xs12 sm12 md5 class="mt-4">	16	<v-flex xs12 sm12 md5 class="mt-4">
17	<v-card flat>	17	<v-card flat>
18	<v-toolbar dark class="card-styles" flat>	18	<v-toolbar dark class="card-styles" flat>
19	<v-spacer></v-spacer>	19	<v-spacer></v-spacer>
20	<v-toolbar-title>	20	<v-toolbar-title>
21	<h3>Invoice</h3>	21	<h3>Invoice</h3>
22	</v-toolbar-title>	22	</v-toolbar-title>
23	<v-spacer></v-spacer>	23	<v-spacer></v-spacer>
24	</v-toolbar>	24	</v-toolbar>
25	<v-form ref="form" v-model="valid" lazy-validation class="py-4">	25	<v-form ref="form" v-model="valid" lazy-validation class="py-4">
26	<v-layout>	26	<v-layout>
27	<v-flex xs4 class="pt-4 subheading">	27	<v-flex xs4 class="pt-4 subheading">
28	<label class="right hidden-xs-only hidden-sm-only">Select Class:</label>	28	<label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
29	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>	29	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
30	</v-flex>	30	</v-flex>
31	<v-flex xs6 class="ml-3">	31	<v-flex xs6 class="ml-3">
32	<v-select	32	<v-select
33	:items="addclass"	33	:items="addclass"
34	label="Select Class"	34	label="Select Class"
35	v-model="editData.classId"	35	v-model="editData.classId"
36	item-text="classNum"	36	item-text="classNum"
37	item-value="_id"	37	item-value="_id"
38	@change="getAllStudents(editData.classId)"	38	@change="getAllStudents(editData.classId)"
39	></v-select>	39	></v-select>
40	</v-flex>	40	</v-flex>
41	</v-layout>	41	</v-layout>
42	<v-layout>	42	<v-layout>
43	<v-flex xs4 class="pt-4 subheading">	43	<v-flex xs4 class="pt-4 subheading">
44	<label class="right hidden-xs-only hidden-sm-only">Select Student:</label>	44	<label class="right hidden-xs-only hidden-sm-only">Select Student:</label>
45	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Student:</label>	45	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Student:</label>
46	</v-flex>	46	</v-flex>
47	<v-flex xs6 class="ml-3">	47	<v-flex xs6 class="ml-3">
48	<v-select	48	<v-select
49	:items="studentList"	49	:items="studentList"
50	v-model="editData.studentId"	50	v-model="editData.studentId"
51	:label="editData.studentId.name"	51	:label="editData.studentId.name"
52	item-text="name"	52	item-text="name"
53	item-value="_id"	53	item-value="_id"
54	@change="getStudentId(editData.studentId)"	54	@change="getStudentId(editData.studentId)"
55	></v-select>	55	></v-select>
56	</v-flex>	56	</v-flex>
57	</v-layout>	57	</v-layout>
58	<v-layout>	58	<v-layout>
59	<v-flex xs4 class="pt-4 subheading">	59	<v-flex xs4 class="pt-4 subheading">
60	<label class="right">Date:</label>	60	<label class="right">Date:</label>
61	</v-flex>	61	</v-flex>
62	<v-flex xs6 class="ml-3">	62	<v-flex xs6 class="ml-3">
63	<v-menu	63	<v-menu
64	ref="menu1"	64	ref="menu1"
65	:close-on-content-click="false"	65	:close-on-content-click="false"
66	v-model="menu1"	66	v-model="menu1"
67	:nudge-right="40"	67	:nudge-right="40"
68	lazy	68	lazy
69	:return-value.sync="editData.date"	69	:return-value.sync="editData.date"
70	transition="scale-transition"	70	transition="scale-transition"
71	offset-y	71	offset-y
72	full-width	72	full-width
73	min-width="290px"	73	min-width="290px"
74	>	74	>
75	<v-text-field	75	<v-text-field
76	slot="activator"	76	slot="activator"
77	v-model="editData.date"	77	v-model="editData.date"
78	placeholder="Select date"	78	placeholder="Select date"
79	></v-text-field>	79	></v-text-field>
80	<v-date-picker	80	<v-date-picker
81	v-model="editData.date"	81	v-model="editData.date"
82	@input="$refs.menu1.save(editData.date)"	82	@input="$refs.menu1.save(editData.date)"
83	></v-date-picker>	83	></v-date-picker>
84	</v-menu>	84	</v-menu>
85	</v-flex>	85	</v-flex>
86	</v-layout>	86	</v-layout>
87	<v-layout>	87	<v-layout>
88	<v-flex xs4 class="pt-4 subheading">	88	<v-flex xs4 class="pt-4 subheading">
89	<label class="right hidden-xs-only hidden-sm-only">Payment Status:</label>	89	<label class="right hidden-xs-only hidden-sm-only">Payment Status:</label>
90	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Payment:</label>	90	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Payment:</label>
91	</v-flex>	91	</v-flex>
92	<v-flex xs6 class="ml-3">	92	<v-flex xs6 class="ml-3">
93	<v-select	93	<v-select
94	:items="paymentStatus"	94	:items="paymentStatus"
95	v-model="editData.paymentStatus"	95	v-model="editData.paymentStatus"
96	item-text="name"	96	item-text="name"
97	item-value="value"	97	item-value="value"
98	label="Select Payment Status"	98	label="Select Payment Status"
99	@change="getPayMethodList"	99	@change="getPayMethodList"
100	></v-select>	100	></v-select>
101	</v-flex>	101	</v-flex>
102	</v-layout>	102	</v-layout>
103	<v-layout v-show="showPayMethods">	103	<v-layout v-show="showPayMethods">
104	<v-flex xs4 class="pt-4 subheading">	104	<v-flex xs4 class="pt-4 subheading">
105	<label class="right">Payment Method:</label>	105	<label class="right">Payment Method:</label>
106	</v-flex>	106	</v-flex>
107	<v-flex xs6 class="ml-3">	107	<v-flex xs6 class="ml-3">
108	<v-select	108	<v-select
109	:items="paymentMethods"	109	:items="paymentMethods"
110	v-model="editData.paymentMethod"	110	v-model="editData.paymentMethod"
111	:rules="paymentMethodRules"	111	:rules="paymentMethodRules"
112	label="Select Payment Method"	112	label="Select Payment Method"
113	></v-select>	113	></v-select>
114	</v-flex>	114	</v-flex>
115	</v-layout>	115	</v-layout>
116	<v-layout>	116	<v-layout>
117	<v-flex xs12 sm11>	117	<v-flex xs12 sm11>
118	<v-card-actions>	118	<v-card-actions>
119	<v-spacer></v-spacer>	119	<v-spacer></v-spacer>
120	<v-btn	120	<v-btn
121	@click="update(editData)"	121	@click="update(editData)"
122	round	122	round
123	dark	123	dark
124	:loading="loading"	124	:loading="loading"
125	class="add-button"	125	class="add-button"
126	>Update</v-btn>	126	>Update</v-btn>
127	</v-card-actions>	127	</v-card-actions>
128	</v-flex>	128	</v-flex>
129	</v-layout>	129	</v-layout>
130	</v-form>	130	</v-form>
131	</v-card>	131	</v-card>
132	</v-flex>	132	</v-flex>
133	<v-flex xs12 sm12 md7 class="mt-4">	133	<v-flex xs12 sm12 md7 class="mt-4">
134	<v-card>	134	<v-card>
135	<v-toolbar dark class="card-styles" flat>	135	<v-toolbar dark class="card-styles" flat>
136	<v-spacer></v-spacer>	136	<v-spacer></v-spacer>
137	<v-toolbar-title>	137	<v-toolbar-title>
138	<h3>Fee Type List</h3>	138	<h3>Fee Type List</h3>
139	</v-toolbar-title>	139	</v-toolbar-title>
140	<v-spacer></v-spacer>	140	<v-spacer></v-spacer>
141	</v-toolbar>	141	</v-toolbar>
142	<v-layout wrap>	142	<v-layout wrap>
143	<v-flex xs12>	143	<v-flex xs12>
144	<v-layout wrap>	144	<v-layout wrap>
145	<v-flex xs12 sm2 class="mt-3">	145	<v-flex xs12 sm2 class="mt-3">
146	<label class="right title hidden-sm-only hidden-xs-only">Fee Type:</label>	146	<label class="right title hidden-sm-only hidden-xs-only">Fee Type:</label>
147	<label	147	<label
148	class="left pl-2 title hidden-xl-only hidden-lg-only hidden-md-only"	148	class="left pl-2 title hidden-xl-only hidden-lg-only hidden-md-only"
149	>Fee Type:</label>	149	>Fee Type:</label>
150	</v-flex>	150	</v-flex>
151	<v-flex xs12 sm4>	151	<v-flex xs12 sm4>
152	<v-select	152	<v-select
153	:items="feeTypes"	153	:items="feeTypes"
154	v-model="feeType.feeTypeName"	154	v-model="feeType.feeTypeName"
155	item-text="feeType"	155	item-text="feeType"
156	item-value="feeType"	156	item-value="feeType"
157	label="Select Fee Type"	157	label="Select Fee Type"
158	class="px-2"	158	class="px-2"
159	></v-select>	159	></v-select>
160	</v-flex>	160	</v-flex>
161	<v-flex xs12 sm6>	161	<v-flex xs12 sm6>
162	<v-btn	162	<v-btn
163	dark	163	dark
164	class="right mt-3 hidden-sm-only hidden-xs-only"	164	class="right add-button hidden-sm-only hidden-xs-only"
165	color="open-dialog-button"	165	color="open-dialog-button"
166	@click="selectFeeType"	166	@click="selectFeeType"
167	>ADD</v-btn>	167	>ADD</v-btn>
168	<v-btn	168	<v-btn
169	dark	169	dark
170	class="mt-3 hidden-xl-only hidden-lg-only hidden-md-only"	170	class="mt-3 hidden-xl-only hidden-lg-only hidden-md-only"
171	color="open-dialog-button"	171	color="open-dialog-button"
172	@click="selectFeeType"	172	@click="selectFeeType"
173	>ADD</v-btn>	173	>ADD</v-btn>
174	</v-flex>	174	</v-flex>
175	</v-layout>	175	</v-layout>
176	</v-flex>	176	</v-flex>
177	</v-layout>	177	</v-layout>
178	<table class="feeTypeTable tableRsponsive">	178	<table class="feeTypeTable tableRsponsive">
179	<tr class="info white--text">	179	<tr class="info white--text">
180	<th>#</th>	180	<th>#</th>
181	<th>Fee Type</th>	181	<th>Fee Type</th>
182	<th>Amount</th>	182	<th>Amount</th>
183	<th>Discount</th>	183	<th>Discount</th>
184	<th>Subtotal</th>	184	<th>Subtotal</th>
185	<th>Paid Amount</th>	185	<th>Paid Amount</th>
186	<th>Action</th>	186	<th>Action</th>
187	</tr>	187	</tr>
188	<tr	188	<tr
189	v-for="(feeType, index) in editData.feeType"	189	v-for="(feeType, index) in editData.feeType"
190	:key="index"	190	:key="index"
191	v-on:keyup="getAmmountDetails(feeType,editData.feeType)"	191	v-on:keyup="getAmmountDetails(feeType,editData.feeType)"
192	>	192	>
193	<td style="width:40px">{{ index + 1 }}</td>	193	<td style="width:40px">{{ index + 1 }}</td>
194	<td style="width:120px">{{ feeType.feeTypeName }}</td>	194	<td style="width:120px">{{ feeType.feeTypeName }}</td>
195	<td>	195	<td>
196	<v-text-field	196	<v-text-field
197	placeholder="fill your Amount"	197	placeholder="fill your Amount"
198	v-model="feeType.amount"	198	v-model="feeType.amount"
199	type="number"	199	type="number"
200	></v-text-field>	200	></v-text-field>
201	</td>	201	</td>
202	<td>	202	<td>
203	<v-text-field	203	<v-text-field
204	placeholder="fill your Discount"	204	placeholder="fill your Discount"
205	v-model="feeType.discount"	205	v-model="feeType.discount"
206	type="number"	206	type="number"
207	></v-text-field>	207	></v-text-field>
208	</td>	208	</td>
209	<td>{{ feeType.subTotal }}</td>	209	<td>{{ feeType.subTotal }}</td>
210	<td v-if="editData.paymentStatus === 'NOT_PAID'">	210	<td v-if="editData.paymentStatus === 'NOT_PAID'">
211	<v-text-field	211	<v-text-field
212	placeholder="fill your Paid Amount"	212	placeholder="fill your Paid Amount"
213	v-model="feeType.paidAmount"	213	v-model="feeType.paidAmount"
214	type="number"	214	type="number"
215	:disabled="disabled"	215	:disabled="disabled"
216	></v-text-field>	216	></v-text-field>
217	</td>	217	</td>
218	<td v-if="editData.paymentStatus != 'NOT_PAID'">	218	<td v-if="editData.paymentStatus != 'NOT_PAID'">
219	<v-text-field	219	<v-text-field
220	placeholder="fill your Paid Amount"	220	placeholder="fill your Paid Amount"
221	v-model="feeType.paidAmount"	221	v-model="feeType.paidAmount"
222	type="number"	222	type="number"
223	></v-text-field>	223	></v-text-field>
224	</td>	224	</td>
225	<td>	225	<td>
226	<v-icon	226	<v-icon
227	color="error"	227	color="error"
228	@click="deleteSelectFee(feeType,editData.feeType,index)"	228	@click="deleteSelectFee(feeType,editData.feeType,index)"
229	>delete</v-icon>	229	>delete</v-icon>
230	</td>	230	</td>
231	</tr>	231	</tr>
232	<tfoot v-if="feeType.amount != 0.00">	232	<tfoot v-if="feeType.amount != 0.00">
233	<tr>	233	<tr>
234	<td colspan="2">Total:</td>	234	<td colspan="2">Total:</td>
235	<td>{{ feeType.amount }}</td>	235	<td>{{ feeType.amount }}</td>
236	<td>{{ feeType.discount }}</td>	236	<td>{{ feeType.discount }}</td>
237	<td>{{ feeType.subTotal }}</td>	237	<td>{{ feeType.subTotal }}</td>
238	<td>{{ feeType.paidAmount }}</td>	238	<td>{{ feeType.paidAmount }}</td>
239	</tr>	239	</tr>
240	</tfoot>	240	</tfoot>
241	<tfoot v-else-if="feeType.amount == 0.00">	241	<tfoot v-else-if="feeType.amount == 0.00">
242	<tr>	242	<tr>
243	<td colspan="2">Total:</td>	243	<td colspan="2">Total:</td>
244	<td>{{ editData.totalAmount }}</td>	244	<td>{{ editData.totalAmount }}</td>
245	<td>{{ editData.totalDiscount }}</td>	245	<td>{{ editData.totalDiscount }}</td>
246	<td>{{ editData.totalSubTotal }}</td>	246	<td>{{ editData.totalSubTotal }}</td>
247	<td>{{ editData.totalPaidAmount }}</td>	247	<td>{{ editData.totalPaidAmount }}</td>
248	</tr>	248	</tr>
249	</tfoot>	249	</tfoot>
250	</table>	250	</table>
251	</v-card>	251	</v-card>
252	</v-flex>	252	</v-flex>
253	</v-layout>	253	</v-layout>
254	</v-container>	254	</v-container>
255	</v-flex>	255	</v-flex>
256	<div class="loader" v-if="showLoader">	256	<div class="loader" v-if="showLoader">
257	<v-progress-circular indeterminate color="white"></v-progress-circular>	257	<v-progress-circular indeterminate color="white"></v-progress-circular>
258	</div>	258	</div>
259	</v-app>	259	</v-app>
260	</template>	260	</template>
261		261
262	<script>	262	<script>
263	import http from "@/Services/http.js";	263	import http from "@/Services/http.js";
264	import moment from "moment";	264	import moment from "moment";
265		265
266	export default {	266	export default {
267	props: ["editData"],	267	props: ["editData"],
268	data: () => ({	268	data: () => ({
269	snackbar: false,	269	snackbar: false,
270	showPayMethods: false,	270	showPayMethods: false,
271	y: "top",	271	y: "top",
272	x: "right",	272	x: "right",
273	mode: "",	273	mode: "",
274	timeout: 3000,	274	timeout: 3000,
275	text: "",	275	text: "",
276	showLoader: false,	276	showLoader: false,
277	loading: false,	277	loading: false,
278	date: null,	278	date: null,
279	search: "",	279	search: "",
280	// dialog: false,	280	// dialog: false,
281	// dialog1: false,	281	// dialog1: false,
282	valid: true,	282	valid: true,
283	validEdit: true,	283	validEdit: true,
284	// isActive: true,	284	// isActive: true,
285	// newActive: false,	285	// newActive: false,
286	showFeeType: false,	286	showFeeType: false,
287	disabled: true,	287	disabled: true,
288	details: [],	288	details: [],
289	feeTypes: [],	289	feeTypes: [],
290	menu1: false,	290	menu1: false,
291	// invoiceData: {},	291	// invoiceData: {},
292	paymentMethods: ["Cash", "Cheque"],	292	paymentMethods: ["Cash", "Cheque"],
293	feeType: {	293	feeType: {
294	amount: "0.00",	294	amount: "0.00",
295	discount: "0.00",	295	discount: "0.00",
296	paidAmount: "0.00",	296	paidAmount: "0.00",
297	subTotal: "0.00",	297	subTotal: "0.00",
298	feeTypeName: ""	298	feeTypeName: "",
299	},	299	},
300	feeTypeData: [],	300	feeTypeData: [],
301	pagination: {	301	pagination: {
302	rowsPerPage: 15	302	rowsPerPage: 15,
303	},	303	},
304	token: "",	304	token: "",
305	editedItem: {},	305	editedItem: {},
306	invoiceParticularData: {},	306	invoiceParticularData: {},
307	addclass: [],	307	addclass: [],
308	studentList: [],	308	studentList: [],
309	paymentMethodRules: [],	309	paymentMethodRules: [],
310	paymentStatus: [	310	paymentStatus: [
311	{	311	{
312	name: "Not Paid",	312	name: "Not Paid",
313	value: "NOT_PAID"	313	value: "NOT_PAID",
314	},	314	},
315	{	315	{
316	name: "Partially Paid",	316	name: "Partially Paid",
317	value: "PARTIALLY_PAID"	317	value: "PARTIALLY_PAID",
318	},	318	},
319	{	319	{
320	name: "Fully Paid",	320	name: "Fully Paid",
321	value: "FULLY_PAID"	321	value: "FULLY_PAID",
322	}	322	},
323	],	323	],
324	editDataObj: {}	324	editDataObj: {},
325	}),	325	}),
326	// watch: {	326	// watch: {
327	// menu1(val) {	327	// menu1(val) {
328	// val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));	328	// val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
329	// }	329	// }
330	// },	330	// },
331	methods: {	331	methods: {
332	save(date) {	332	save(date) {
333	this.$refs.menu1.save(date);	333	this.$refs.menu1.save(date);
334	},	334	},
335	dates: function(date) {	335	dates: function (date) {
336	return moment(date).format("MMMM DD, YYYY");	336	return moment(date).format("MMMM DD, YYYY");
337	},	337	},
338	update(editData) {	338	update(editData) {
339	// console.log("editData-----------", editData);	339	// console.log("editData-----------", editData);
340	if (editData.classId._id) {	340	if (editData.classId._id) {
341	this.editDataObj.classNum = editData.classId._id;	341	this.editDataObj.classNum = editData.classId._id;
342	}	342	}
343	if (editData.studentId._id) {	343	if (editData.studentId._id) {
344	this.editDataObj.studentId = editData.studentId._id;	344	this.editDataObj.studentId = editData.studentId._id;
345	}	345	}
346	let feeTypeId = "";	346	let feeTypeId = "";
347	for (let i = 0; i < this.feeTypes.length; i++) {	347	for (let i = 0; i < this.feeTypes.length; i++) {
348	if (this.feeTypes[i].feeType === this.feeType.feeTypeName) {	348	if (this.feeTypes[i].feeType === this.feeType.feeTypeName) {
349	feeTypeId = this.feeTypes[i]._id;	349	feeTypeId = this.feeTypes[i]._id;
350	}	350	}
351	}	351	}
352	if (this.$refs.form.validate()) {	352	if (this.$refs.form.validate()) {
353	let editInvoiceData = {	353	let editInvoiceData = {
354	invoiceId: editData._id,	354	invoiceId: editData._id,
355	classId: this.editDataObj.classNum,	355	classId: this.editDataObj.classNum,
356	studentId: this.editDataObj.studentId,	356	studentId: this.editDataObj.studentId,
357	date: editData.date,	357	date: editData.date,
358	paymentStatus: editData.paymentStatus,	358	paymentStatus: editData.paymentStatus,
359	paymentMethod: editData.paymentMethod,	359	paymentMethod: editData.paymentMethod,
360	feeType: editData.feeType,	360	feeType: editData.feeType,
361	totalAmount: this.feeType.amount,	361	totalAmount: this.feeType.amount,
362	totalDiscount: this.feeType.discount,	362	totalDiscount: this.feeType.discount,
363	totalSubTotal: this.feeType.subTotal,	363	totalSubTotal: this.feeType.subTotal,
364	totalPaidAmount: this.feeType.paidAmount	364	totalPaidAmount: this.feeType.paidAmount,
365	};	365	};
366	// console.log(editInvoiceData, editInvoiceData);	366	// console.log(editInvoiceData, editInvoiceData);
367	if (feeTypeId == "") {	367	if (feeTypeId == "") {
368	delete editInvoiceData.feeType[0].feeTypeId;	368	delete editInvoiceData.feeType[0].feeTypeId;
369	}	369	}
370	if (editInvoiceData.paymentStatus == "NOT_PAID") {	370	if (editInvoiceData.paymentStatus == "NOT_PAID") {
371	delete editInvoiceData.paymentMethod;	371	delete editInvoiceData.paymentMethod;
372	}	372	}
373	if (this.feeType.paidAmount != "0.00") {	373	if (this.feeType.paidAmount != "0.00") {
374	if (this.feeType.subTotal == this.feeType.paidAmount) {	374	if (this.feeType.subTotal == this.feeType.paidAmount) {
375	editInvoiceData.paymentStatus = "FULLY_PAID";	375	editInvoiceData.paymentStatus = "FULLY_PAID";
376	// console.log("FULLY_PAID");	376	// console.log("FULLY_PAID");
377	}	377	}
378	if (editInvoiceData.totalPaidAmount) {	378	if (editInvoiceData.totalPaidAmount) {
379	if (this.feeType.subTotal != this.feeType.paidAmount) {	379	if (this.feeType.subTotal != this.feeType.paidAmount) {
380	editInvoiceData.paymentStatus = "PARTIALLY_PAID";	380	editInvoiceData.paymentStatus = "PARTIALLY_PAID";
381	// console.log("PARTIALLY_PAID");	381	// console.log("PARTIALLY_PAID");
382	}	382	}
383	}	383	}
384	}	384	}
385	if (editInvoiceData.totalSubTotal == "0.00") {	385	if (editInvoiceData.totalSubTotal == "0.00") {
386	editInvoiceData.paymentStatus = "FULLY_PAID";	386	editInvoiceData.paymentStatus = "FULLY_PAID";
387	} else if (editInvoiceData.totalSubTotal != "0.00") {	387	} else if (editInvoiceData.totalSubTotal != "0.00") {
388	if (this.feeType.paidAmount === "0.00") {	388	if (this.feeType.paidAmount === "0.00") {
389	editInvoiceData.paymentStatus = "NOT_PAID";	389	editInvoiceData.paymentStatus = "NOT_PAID";
390	}	390	}
391	}	391	}
392	// console.log("editInvoiceData", editInvoiceData);	392	// console.log("editInvoiceData", editInvoiceData);
393		393
394	http()	394	http()
395	.put("/updateInvoice", editInvoiceData)	395	.put("/updateInvoice", editInvoiceData)
396	.then(response => {	396	.then((response) => {
397	// this.getInvoiceList();	397	// this.getInvoiceList();
398	this.snackbar = true;	398	this.snackbar = true;
399	this.text = "Edit Invoice successfully";	399	this.text = "Edit Invoice successfully";
400	this.loading = false;	400	this.loading = false;
401	color: "red";	401	color: "red";
402	this.$emit("update-editInvoice");	402	this.$emit("update-editInvoice");
403	})	403	})
404	.catch(error => {	404	.catch((error) => {
405	console.log(error);	405	console.log(error);
406	this.snackbar = true;	406	this.snackbar = true;
407	this.text = error.response.data.message;	407	this.text = error.response.data.message;
408	color: "red";	408	color: "red";
409	this.loading = false;	409	this.loading = false;
410	});	410	});
411	}	411	}
412	},	412	},
413	clear() {	413	clear() {
414	this.$refs.form.reset();	414	this.$refs.form.reset();
415	},	415	},
416	selectFeeType() {	416	selectFeeType() {
417	this.showFeeType = true;	417	this.showFeeType = true;
418	this.editData.feeType.push({ feeTypeName: this.feeType.feeTypeName });	418	this.editData.feeType.push({ feeTypeName: this.feeType.feeTypeName });
419	},	419	},
420	deleteSelectFee: function(feeTyp, feeTypeList, index) {	420	deleteSelectFee: function (feeTyp, feeTypeList, index) {
421	this.editData.feeType.splice(index, 1);	421	this.editData.feeType.splice(index, 1);
422	this.getAmmountDetails(feeTyp, feeTypeList);	422	this.getAmmountDetails(feeTyp, feeTypeList);
423	if (this.feeTypeData.length == 0) {	423	if (this.feeTypeData.length == 0) {
424	this.feeType = {	424	this.feeType = {
425	amount: "0.00",	425	amount: "0.00",
426	discount: "0.00",	426	discount: "0.00",
427	paidAmount: "0.00",	427	paidAmount: "0.00",
428	subTotal: "0.00",	428	subTotal: "0.00",
429	feeTypeList: ""	429	feeTypeList: "",
430	};	430	};
431	}	431	}
432	},	432	},
433	getAllClasses() {	433	getAllClasses() {
434	http()	434	http()
435	.get("/getClassesList", {	435	.get("/getClassesList", {
436	headers: { Authorization: "Bearer " + this.token }	436	headers: { Authorization: "Bearer " + this.token },
437	})	437	})
438	.then(response => {	438	.then((response) => {
439	this.addclass = response.data.data;	439	this.addclass = response.data.data;
440	})	440	})
441	.catch(error => {	441	.catch((error) => {
442	// console.log("err====>", err);	442	// console.log("err====>", err);
443	this.showLoader = false;	443	this.showLoader = false;
444	if (error.response.status === 401) {	444	if (error.response.status === 401) {
445	this.$router.replace({ path: "/" });	445	this.$router.replace({ path: "/" });
446	this.$store.dispatch("setToken", null);	446	this.$store.dispatch("setToken", null);
447	this.$store.dispatch("Id", null);	447	this.$store.dispatch("Id", null);
448	this.$store.dispatch("Role", null);	448	this.$store.dispatch("Role", null);
449	}	449	}
450	});	450	});
451	},	451	},
452	getAllStudents(classId) {	452	getAllStudents(classId) {
453	// console.log("classId", classId);	453	// console.log("classId", classId);
454	this.editDataObj.classNum = classId;	454	this.editDataObj.classNum = classId;
455	this.editDataObj.studentId = "";	455	this.editDataObj.studentId = "";
456	this.studentList = [];	456	this.studentList = [];
457	this.showLoader = true;	457	this.showLoader = true;
458	http()	458	http()
459	.get("/getStudentsList", {	459	.get("/getStudentsList", {
460	params: { classId: classId },	460	params: { classId: classId },
461	headers: { Authorization: "Bearer " + this.token }	461	headers: { Authorization: "Bearer " + this.token },
462	})	462	})
463	.then(response => {	463	.then((response) => {
464	for (let i = 0; i < response.data.data.length; i++) {	464	for (let i = 0; i < response.data.data.length; i++) {
465	this.studentList.push({	465	this.studentList.push({
466	name: response.data.data[i].name,	466	name: response.data.data[i].name,
467	_id: response.data.data[i]._id	467	_id: response.data.data[i]._id,
468	});	468	});
469	}	469	}
470	this.showLoader = false;	470	this.showLoader = false;
471	})	471	})
472	.catch(err => {	472	.catch((err) => {
473	// console.log("err====>", err);	473	// console.log("err====>", err);
474	this.showLoader = false;	474	this.showLoader = false;
475	});	475	});
476	},	476	},
477	getStudentId(studentId) {	477	getStudentId(studentId) {
478	// console.log("studentId", studentId);	478	// console.log("studentId", studentId);
479	this.editDataObj.studentId = studentId;	479	this.editDataObj.studentId = studentId;
480	},	480	},
481	getfeeType() {	481	getfeeType() {
482	http()	482	http()
483	.get("/getFeesList", {	483	.get("/getFeesList", {
484	headers: { Authorization: "Bearer " + this.token }	484	headers: { Authorization: "Bearer " + this.token },
485	})	485	})
486	.then(response => {	486	.then((response) => {
487	this.feeTypes = response.data.data;	487	this.feeTypes = response.data.data;
488	})	488	})
489	.catch(err => {	489	.catch((err) => {
490	// console.log("err====>", err);	490	// console.log("err====>", err);
491	});	491	});
492	},	492	},
493	getAmmountDetails(feeTyp, feeTypeList) {	493	getAmmountDetails(feeTyp, feeTypeList) {
494	this.feeTypeData = feeTypeList;	494	this.feeTypeData = feeTypeList;
495	let feeType = {	495	let feeType = {
496	amount: "",	496	amount: "",
497	discount: "",	497	discount: "",
498	subTotal: "",	498	subTotal: "",
499	subParticularTotal: "",	499	subParticularTotal: "",
500	paidAmount: ""	500	paidAmount: "",
501	};	501	};
502	for (let i = 0; i < this.feeTypeData.length; i++) {	502	for (let i = 0; i < this.feeTypeData.length; i++) {
503	// ********* AMOUNT *********	503	// ********* AMOUNT *********
504	if (this.feeTypeData[i].amount) {	504	if (this.feeTypeData[i].amount) {
505	feeType.amount =	505	feeType.amount =
506	Number(feeType.amount) + Number(this.feeTypeData[i].amount);	506	Number(feeType.amount) + Number(this.feeTypeData[i].amount);
507	this.feeType.amount = feeType.amount;	507	this.feeType.amount = feeType.amount;
508	this.feeType.subTotal = feeType.amount;	508	this.feeType.subTotal = feeType.amount;
509	this.feeTypeData[i].subTotal = this.feeTypeData[i].amount;	509	this.feeTypeData[i].subTotal = this.feeTypeData[i].amount;
510	} else if (this.feeTypeData[0].amount == "") {	510	} else if (this.feeTypeData[0].amount == "") {
511	this.feeType.amount = "0.00";	511	this.feeType.amount = "0.00";
512	this.feeTypeData[i].subTotal = "0.00";	512	this.feeTypeData[i].subTotal = "0.00";
513	this.feeType.subTotal = "0.00";	513	this.feeType.subTotal = "0.00";
514	} else if (this.feeTypeData[i].amount == "") {	514	} else if (this.feeTypeData[i].amount == "") {
515	this.feeType.amount =	515	this.feeType.amount =
516	Number(feeType.amount) + Number(this.feeTypeData[i].amount);	516	Number(feeType.amount) + Number(this.feeTypeData[i].amount);
517	this.feeTypeData[i].subTotal =	517	this.feeTypeData[i].subTotal =
518	Number(feeType.amount) + Number(this.feeTypeData[i].amount);	518	Number(feeType.amount) + Number(this.feeTypeData[i].amount);
519	this.feeType.subTotal =	519	this.feeType.subTotal =
520	Number(feeType.amount) + Number(this.feeTypeData[i].amount);	520	Number(feeType.amount) + Number(this.feeTypeData[i].amount);
521	}	521	}
522	// ********* DISCOUNT *********	522	// ********* DISCOUNT *********
523	if (this.feeTypeData[i].discount) {	523	if (this.feeTypeData[i].discount) {
524	if (	524	if (
525	Number(this.feeTypeData[i].discount) < this.feeTypeData[i].amount	525	Number(this.feeTypeData[i].discount) < this.feeTypeData[i].amount
526	) {	526	) {
527	feeType.discount =	527	feeType.discount =
528	Number(feeType.discount) + Number(this.feeTypeData[i].discount);	528	Number(feeType.discount) + Number(this.feeTypeData[i].discount);
529	this.feeType.discount = feeType.discount;	529	this.feeType.discount = feeType.discount;
530	feeType.subParticularTotal =	530	feeType.subParticularTotal =
531	this.feeTypeData[i].amount - this.feeTypeData[i].discount;	531	this.feeTypeData[i].amount - this.feeTypeData[i].discount;
532	this.feeTypeData[i].subTotal = feeType.subParticularTotal.toFixed(	532	this.feeTypeData[i].subTotal = feeType.subParticularTotal.toFixed(
533	2	533	2
534	);	534	);
535	} else if (	535	} else if (
536	Number(this.feeTypeData[i].discount) >= this.feeTypeData[i].amount	536	Number(this.feeTypeData[i].discount) >= this.feeTypeData[i].amount
537	) {	537	) {
538	this.feeTypeData[i].discount = this.feeTypeData[i].amount;	538	this.feeTypeData[i].discount = this.feeTypeData[i].amount;
539	feeType.discount =	539	feeType.discount =
540	Number(feeType.discount) + Number(this.feeTypeData[i].discount);	540	Number(feeType.discount) + Number(this.feeTypeData[i].discount);
541	this.feeType.discount = feeType.discount.toString();	541	this.feeType.discount = feeType.discount.toString();
542	feeType.subParticularTotal =	542	feeType.subParticularTotal =
543	this.feeTypeData[i].amount - this.feeTypeData[i].discount;	543	this.feeTypeData[i].amount - this.feeTypeData[i].discount;
544	this.feeTypeData[	544	this.feeTypeData[
545	i	545	i
546	].subTotal = feeType.subParticularTotal.toString();	546	].subTotal = feeType.subParticularTotal.toString();
547	}	547	}
548	} else if (this.feeTypeData[0].discount == "") {	548	} else if (this.feeTypeData[0].discount == "") {
549	this.feeType.discount = "0.00";	549	this.feeType.discount = "0.00";
550	}	550	}
551		551
552	// ********* SUBTOTAL *********	552	// ********* SUBTOTAL *********
553	if (this.feeTypeData[i].subTotal) {	553	if (this.feeTypeData[i].subTotal) {
554	feeType.subTotal =	554	feeType.subTotal =
555	Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal);	555	Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal);
556	this.feeType.subTotal = feeType.subTotal.toFixed(2);	556	this.feeType.subTotal = feeType.subTotal.toFixed(2);
557	}	557	}
558		558
559	// ********* PAID-AMOUNT *********	559	// ********* PAID-AMOUNT *********
560	if (this.feeTypeData[i].paidAmount) {	560	if (this.feeTypeData[i].paidAmount) {
561	feeType.paidAmount =	561	feeType.paidAmount =
562	Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);	562	Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);
563	this.feeType.paidAmount = feeType.paidAmount.toFixed(2);	563	this.feeType.paidAmount = feeType.paidAmount.toFixed(2);
564	} else if (this.feeTypeData[0].paidAmount == "") {	564	} else if (this.feeTypeData[0].paidAmount == "") {
565	this.feeType.paidAmount = "0.00";	565	this.feeType.paidAmount = "0.00";
566	} else if (this.feeTypeData[i].paidAmount == "") {	566	} else if (this.feeTypeData[i].paidAmount == "") {
567	this.feeType.paidAmount = feeType.paidAmount =	567	this.feeType.paidAmount = feeType.paidAmount =
568	Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);	568	Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);
569	}	569	}
570		570
571	// if paid Amount fill large of subtotal value so this condition are fixed filled subtotal value.	571	// if paid Amount fill large of subtotal value so this condition are fixed filled subtotal value.
572	if (feeType.paidAmount > feeType.subTotal) {	572	if (feeType.paidAmount > feeType.subTotal) {
573	this.feeTypeData[i].paidAmount = this.feeTypeData[i].subTotal;	573	this.feeTypeData[i].paidAmount = this.feeTypeData[i].subTotal;
574	this.feeType.paidAmount = feeType.subTotal;	574	this.feeType.paidAmount = feeType.subTotal;
575	}	575	}
576	}	576	}
577	},	577	},
578	getPayMethodList() {	578	getPayMethodList() {
579	if (this.editData.paymentStatus == "PARTIALLY_PAID") {	579	if (this.editData.paymentStatus == "PARTIALLY_PAID") {
580	this.showPayMethods = true;	580	this.showPayMethods = true;
581	this.paymentMethodRules = [v => !!v \|\| "Payment Method is required"];	581	this.paymentMethodRules = [(v) => !!v \|\| "Payment Method is required"];
582	} else if (this.editData.paymentStatus == "FULLY_PAID") {	582	} else if (this.editData.paymentStatus == "FULLY_PAID") {
583	this.showPayMethods = true;	583	this.showPayMethods = true;
584	this.paymentMethodRules = [v => !!v \|\| "Payment Method is required"];	584	this.paymentMethodRules = [(v) => !!v \|\| "Payment Method is required"];
585	} else if (this.editData.paymentStatus == "NOT_PAID") {	585	} else if (this.editData.paymentStatus == "NOT_PAID") {
586	for (let i = 0; i < this.feeTypeData.length; i++) {	586	for (let i = 0; i < this.feeTypeData.length; i++) {
587	this.feeTypeData[i].paidAmount = "0.00";	587	this.feeTypeData[i].paidAmount = "0.00";
588	this.feeType.paidAmount = "0.00";	588	this.feeType.paidAmount = "0.00";
589	}	589	}
590	this.paymentMethodRules = "";	590	this.paymentMethodRules = "";
591	this.showPayMethods = false;	591	this.showPayMethods = false;
592	} else {	592	} else {
593	this.showPayMethods = false;	593	this.showPayMethods = false;
594	}	594	}
595	}	595	},
596	},	596	},
597	mounted() {	597	mounted() {
598	this.token = this.$store.state.token;	598	this.token = this.$store.state.token;
599	this.getAllClasses();	599	this.getAllClasses();
600	this.getfeeType();	600	this.getfeeType();
601	},	601	},
602	created() {	602	created() {
603	this.$root.$on("app:search", search => {	603	this.$root.$on("app:search", (search) => {
604	this.search = search;	604	this.search = search;
605	});	605	});
606	},	606	},
607	beforeDestroy() {	607	beforeDestroy() {
608	// dont forget to remove the listener	608	// dont forget to remove the listener
609	this.$root.$off("app:search");	609	this.$root.$off("app:search");
610	}	610	},
611	};	611	};
612	</script>	612	</script>
613		613
614		614
615	<style scoped>	615	<style scoped>
616	.active {	616	.active {
617	background-color: gray;	617	background-color: gray;
618	color: white !important;	618	color: white !important;
619	}	619	}
620	.activebtn {	620	.activebtn {
621	color: black !important;	621	color: black !important;
622	}	622	}
623	table {	623	table {
624	border-collapse: collapse;	624	border-collapse: collapse;
625	border: 1px solid #e2e7eb;	625	border: 1px solid #e2e7eb;
626	}	626	}
627		627
628	th,	628	th,
629	td {	629	td {
630	border: 1px solid #e2e7eb;	630	border: 1px solid #e2e7eb;
631	padding: 10px;	631	padding: 10px;
632	text-align: center;	632	text-align: center;
633	}	633	}
634	table.feeTypeTable {	634	table.feeTypeTable {
635	table-layout: auto !important;	635	table-layout: auto !important;
636	width: 100% !important;	636	width: 100% !important;
637	}	637	}
638	@media screen and (max-width: 380px) {	638	@media screen and (max-width: 380px) {
639	.tableRsponsive {	639	.tableRsponsive {
640	display: block;	640	display: block;
641	position: relative;	641	position: relative;
642	overflow: scroll;	642	overflow: scroll;
643	}	643	}
644	}	644	}
645	</style>	645	</style>

src/pages/Account/paymentTemplate.vue

Diff comments View file @1e1e364

1	<template>	1	<template>
2	<v-app id="pages-dasboard">	2	<v-app id="pages-dasboard">
3	<!-- **** Edit multiple INVOICE **** -->	3	<!-- **** Edit multiple INVOICE **** -->
4		4
5	<v-snackbar	5	<v-snackbar
6	:timeout="timeout"	6	:timeout="timeout"
7	:top="y === 'top'"	7	:top="y === 'top'"
8	:right="x === 'right'"	8	:right="x === 'right'"
9	:vertical="mode === 'vertical'"	9	:vertical="mode === 'vertical'"
10	v-model="snackbar"	10	v-model="snackbar"
11	color="success"	11	color="success"
12	>{{ text }}</v-snackbar>	12	>{{ text }}</v-snackbar>
13	<v-flex xs12 sm12>	13	<v-flex xs12 sm12>
14	<v-container fluid grid-list-md>	14	<v-container fluid grid-list-md>
15	<v-layout wrap>	15	<v-layout wrap>
16	<v-flex xs12 sm12 md4>	16	<v-flex xs12 sm12 md4>
17	<v-card flat class="mb-4">	17	<v-card flat class="mb-4">
18	<v-toolbar dark class="card-styles" flat>	18	<v-toolbar dark class="card-styles" flat>
19	<v-spacer></v-spacer>	19	<v-spacer></v-spacer>
20	<h3>Profile</h3>	20	<h3>Profile</h3>
21	<v-spacer></v-spacer>	21	<v-spacer></v-spacer>
22	</v-toolbar>	22	</v-toolbar>
23	<!-- Profile User-->	23	<!-- Profile User-->
24	<v-card-text>	24	<v-card-text>
25	<v-container>	25	<v-container>
26	<v-layout wrap>	26	<v-layout wrap>
27	<v-flex xs12>	27	<v-flex xs12>
28	<v-layout>	28	<v-layout>
29	<v-flex	29	<v-flex
30	xs12	30	xs12
31	class="text-xs-center text-sm-center text-md-center text-lg-center"	31	class="text-xs-center text-sm-center text-md-center text-lg-center"
32	>	32	>
33	<v-avatar size="80px">	33	<v-avatar size="80px">
34	<img src="/static/icon/user.png" v-if="!editPayment.profilePicUrl" />	34	<img src="/static/icon/user.png" v-if="!editPayment.profilePicUrl" />
35	<img	35	<img
36	:src="editPayment.profilePicUrl"	36	:src="editPayment.profilePicUrl"
37	v-else-if="editPayment.profilePicUrl"	37	v-else-if="editPayment.profilePicUrl"
38	/>	38	/>
39	</v-avatar>	39	</v-avatar>
40	</v-flex>	40	</v-flex>
41	</v-layout>	41	</v-layout>
42	<v-layout>	42	<v-layout>
43	<v-flex xs12 sm12>	43	<v-flex xs12 sm12>
44	<h3 class="text-xs-center">	44	<h3 class="text-xs-center">
45	<b>{{ editPayment.studentId.name }}</b>	45	<b>{{ editPayment.studentId.name }}</b>
46	</h3>	46	</h3>
47	<p class="text-xs-center grey--text">Student</p>	47	<p class="text-xs-center grey--text">Student</p>
48	</v-flex>	48	</v-flex>
49	</v-layout>	49	</v-layout>
50	<v-layout style="border: 1px solid lightgrey;">	50	<v-layout style="border: 1px solid lightgrey;">
51	<v-flex xs6 sm6 class="pa-0">	51	<v-flex xs6 sm6 class="pa-0">
52	<h4 class="right">	52	<h4 class="right">
53	<b>Roll No :</b>	53	<b>Roll No :</b>
54	</h4>	54	</h4>
55	</v-flex>	55	</v-flex>
56	<v-flex sm6 xs6 class="pa-0">	56	<v-flex sm6 xs6 class="pa-0">
57	<h4>{{ editPayment.studentId.rollNo }}</h4>	57	<h4>{{ editPayment.studentId.rollNo }}</h4>
58	</v-flex>	58	</v-flex>
59	</v-layout>	59	</v-layout>
60	<v-layout style="border: 1px solid lightgrey;">	60	<v-layout style="border: 1px solid lightgrey;">
61	<v-flex xs6 sm6 class="pa-0">	61	<v-flex xs6 sm6 class="pa-0">
62	<h4 class="right">	62	<h4 class="right">
63	<b>Class :</b>	63	<b>Class :</b>
64	</h4>	64	</h4>
65	</v-flex>	65	</v-flex>
66	<v-flex sm6 xs6 class="pa-0">	66	<v-flex sm6 xs6 class="pa-0">
67	<h4>{{ editPayment.classId.classNum }}</h4>	67	<h4>{{ editPayment.classId.classNum }}</h4>
68	</v-flex>	68	</v-flex>
69	</v-layout>	69	</v-layout>
70	</v-flex>	70	</v-flex>
71	</v-layout>	71	</v-layout>
72	</v-container>	72	</v-container>
73	</v-card-text>	73	</v-card-text>
74	</v-card>	74	</v-card>
75	<!-- Account Fee Type List User-->	75	<!-- Account Fee Type List User-->
76	<v-card flat>	76	<v-card flat>
77	<v-toolbar dark class="card-styles" flat>	77	<v-toolbar dark class="card-styles" flat>
78	<v-spacer></v-spacer>	78	<v-spacer></v-spacer>
79	<v-toolbar-title>	79	<v-toolbar-title>
80	<h3>Invoice</h3>	80	<h3>Invoice</h3>
81	</v-toolbar-title>	81	</v-toolbar-title>
82	<v-spacer></v-spacer>	82	<v-spacer></v-spacer>
83	</v-toolbar>	83	</v-toolbar>
84	<v-form ref="form" v-model="valid" lazy-validation class="py-4">	84	<v-form ref="form" v-model="valid" lazy-validation class="py-4">
85	<v-layout>	85	<v-layout>
86	<v-flex xs4 class="pt-4 subheading">	86	<v-flex xs4 class="pt-4 subheading">
87	<label class="right">Payment Method:</label>	87	<label class="right">Payment Method:</label>
88	</v-flex>	88	</v-flex>
89	<v-flex xs7 class="ml-3">	89	<v-flex xs7 class="ml-3">
90	<v-select	90	<v-select
91	:items="paymentMethods"	91	:items="paymentMethods"
92	v-model="editPayment.paymentMethod"	92	v-model="editPayment.paymentMethod"
93	label="Select Payment Method"	93	label="Select Payment Method"
94	></v-select>	94	></v-select>
95	</v-flex>	95	</v-flex>
96	</v-layout>	96	</v-layout>
97	<v-card-actions>	97	<v-card-actions>
98	<v-spacer class="hidden-xs-only"></v-spacer>	98	<v-spacer class="hidden-xs-only"></v-spacer>
99	<v-btn	99	<v-btn
100	color="open-dialog-button"	100	color="open-dialog-button"
101	dark	101	dark
102	class="right mt-3"	102	class="right add-button"
103	@click="update(editPayment)"	103	@click="update(editPayment)"
104	>Add Payment</v-btn>	104	>Add Payment</v-btn>
105	</v-card-actions>	105	</v-card-actions>
106	</v-form>	106	</v-form>
107	</v-card>	107	</v-card>
108	</v-flex>	108	</v-flex>
109	<v-flex xs12 sm12 md8>	109	<v-flex xs12 sm12 md8>
110	<v-card>	110	<v-card>
111	<v-toolbar dark class="card-styles" flat>	111	<v-toolbar dark class="card-styles" flat>
112	<v-spacer></v-spacer>	112	<v-spacer></v-spacer>
113	<v-toolbar-title>	113	<v-toolbar-title>
114	<h3>Fee Type List</h3>	114	<h3>Fee Type List</h3>
115	</v-toolbar-title>	115	</v-toolbar-title>
116	<v-spacer></v-spacer>	116	<v-spacer></v-spacer>
117	</v-toolbar>	117	</v-toolbar>
118	<table class="feeTypeTable tableRsponsive">	118	<table class="feeTypeTable tableRsponsive">
119	<tr class="info white--text">	119	<tr class="info white--text">
120	<th>#</th>	120	<th>#</th>
121	<th>Fee Type</th>	121	<th>Fee Type</th>
122	<th>Amount</th>	122	<th>Amount</th>
123	<th>Discount</th>	123	<th>Discount</th>
124	<th>Subtotal</th>	124	<th>Subtotal</th>
125	<th>Paid Amount</th>	125	<th>Paid Amount</th>
126	<th>Action</th>	126	<th>Action</th>
127	</tr>	127	</tr>
128	<tr	128	<tr
129	v-for="(feeType, index) in editPayment.feeType"	129	v-for="(feeType, index) in editPayment.feeType"
130	:key="index"	130	:key="index"
131	v-on:keyup="getAmmountDetails(feeType,editPayment.feeType)"	131	v-on:keyup="getAmmountDetails(feeType,editPayment.feeType)"
132	>	132	>
133	<td style="width:40px">{{ index + 1 }}</td>	133	<td style="width:40px">{{ index + 1 }}</td>
134	<td style="width:120px">{{ feeType.feeTypeName }}</td>	134	<td style="width:120px">{{ feeType.feeTypeName }}</td>
135	<td>	135	<td>
136	<v-text-field	136	<v-text-field
137	placeholder="fill your Amount"	137	placeholder="fill your Amount"
138	v-model="feeType.amount"	138	v-model="feeType.amount"
139	type="number"	139	type="number"
140	></v-text-field>	140	></v-text-field>
141	</td>	141	</td>
142	<td>	142	<td>
143	<v-text-field	143	<v-text-field
144	placeholder="fill your Discount"	144	placeholder="fill your Discount"
145	v-model="feeType.discount"	145	v-model="feeType.discount"
146	type="number"	146	type="number"
147	></v-text-field>	147	></v-text-field>
148	</td>	148	</td>
149	<td>{{ feeType.subTotal }}</td>	149	<td>{{ feeType.subTotal }}</td>
150	<td>	150	<td>
151	<v-text-field	151	<v-text-field
152	placeholder="fill your Paid Amount"	152	placeholder="fill your Paid Amount"
153	v-model="feeType.paidAmount"	153	v-model="feeType.paidAmount"
154	type="number"	154	type="number"
155	></v-text-field>	155	></v-text-field>
156	</td>	156	</td>
157	<td v-if="!editPayment.feeType">	157	<td v-if="!editPayment.feeType">
158	<v-icon	158	<v-icon
159	color="error"	159	color="error"
160	@click="deleteSelectFee(feeType,editPayment.feeType,index)"	160	@click="deleteSelectFee(feeType,editPayment.feeType,index)"
161	>delete</v-icon>	161	>delete</v-icon>
162	</td>	162	</td>
163	</tr>	163	</tr>
164	<tfoot v-if="feeType.amount != 0.00">	164	<tfoot v-if="feeType.amount != 0.00">
165	<tr>	165	<tr>
166	<td colspan="2">Total:</td>	166	<td colspan="2">Total:</td>
167	<td>{{ feeType.amount }}</td>	167	<td>{{ feeType.amount }}</td>
168	<td>{{ feeType.discount }}</td>	168	<td>{{ feeType.discount }}</td>
169	<td>{{ feeType.subTotal }}</td>	169	<td>{{ feeType.subTotal }}</td>
170	<td>{{ feeType.paidAmount }}</td>	170	<td>{{ feeType.paidAmount }}</td>
171	</tr>	171	</tr>
172	</tfoot>	172	</tfoot>
173	<tfoot v-else-if="feeType.amount == 0.00">	173	<tfoot v-else-if="feeType.amount == 0.00">
174	<tr>	174	<tr>
175	<td colspan="2">Total:</td>	175	<td colspan="2">Total:</td>
176	<td>{{ editPayment.totalAmount }}</td>	176	<td>{{ editPayment.totalAmount }}</td>
177	<td>{{ editPayment.totalDiscount }}</td>	177	<td>{{ editPayment.totalDiscount }}</td>
178	<td>{{ editPayment.totalSubTotal }}</td>	178	<td>{{ editPayment.totalSubTotal }}</td>
179	<td>{{ editPayment.totalPaidAmount }}</td>	179	<td>{{ editPayment.totalPaidAmount }}</td>
180	</tr>	180	</tr>
181	</tfoot>	181	</tfoot>
182	</table>	182	</table>
183	</v-card>	183	</v-card>
184	</v-flex>	184	</v-flex>
185	</v-layout>	185	</v-layout>
186	</v-container>	186	</v-container>
187	</v-flex>	187	</v-flex>
188	<div class="loader" v-if="showLoader">	188	<div class="loader" v-if="showLoader">
189	<v-progress-circular indeterminate color="white"></v-progress-circular>	189	<v-progress-circular indeterminate color="white"></v-progress-circular>
190	</div>	190	</div>
191	</v-app>	191	</v-app>
192	</template>	192	</template>
193		193
194	<script>	194	<script>
195	import http from "@/Services/http.js";	195	import http from "@/Services/http.js";
196	import moment from "moment";	196	import moment from "moment";
197		197
198	export default {	198	export default {
199	props: ["editPayment"],	199	props: ["editPayment"],
200	data: () => ({	200	data: () => ({
201	snackbar: false,	201	snackbar: false,
202	// showPayMethods: false,	202	// showPayMethods: false,
203	y: "top",	203	y: "top",
204	x: "right",	204	x: "right",
205	mode: "",	205	mode: "",
206	timeout: 3000,	206	timeout: 3000,
207	text: "",	207	text: "",
208	showLoader: false,	208	showLoader: false,
209	loading: false,	209	loading: false,
210	date: null,	210	date: null,
211	search: "",	211	search: "",
212	// dialog: false,	212	// dialog: false,
213	// dialog1: false,	213	// dialog1: false,
214	valid: true,	214	valid: true,
215	validEdit: true,	215	validEdit: true,
216	// isActive: true,	216	// isActive: true,
217	// newActive: false,	217	// newActive: false,
218	showFeeType: false,	218	showFeeType: false,
219	disabled: true,	219	disabled: true,
220	details: [],	220	details: [],
221	feeTypes: [],	221	feeTypes: [],
222	menu1: false,	222	menu1: false,
223	// invoiceData: {},	223	// invoiceData: {},
224	paymentMethods: ["Cash", "Cheque"],	224	paymentMethods: ["Cash", "Cheque"],
225	feeType: {	225	feeType: {
226	amount: "0.00",	226	amount: "0.00",
227	discount: "0.00",	227	discount: "0.00",
228	paidAmount: "0.00",	228	paidAmount: "0.00",
229	subTotal: "0.00",	229	subTotal: "0.00",
230	feeTypeName: ""	230	feeTypeName: "",
231	},	231	},
232	feeTypeData: [],	232	feeTypeData: [],
233	pagination: {	233	pagination: {
234	rowsPerPage: 15	234	rowsPerPage: 15,
235	},	235	},
236	token: "",	236	token: "",
237	editedItem: {},	237	editedItem: {},
238	invoiceParticularData: {},	238	invoiceParticularData: {},
239	addclass: [],	239	addclass: [],
240	studentList: [],	240	studentList: [],
241	paymentStatus: [	241	paymentStatus: [
242	{	242	{
243	name: "Not Paid",	243	name: "Not Paid",
244	value: "NOT_PAID"	244	value: "NOT_PAID",
245	},	245	},
246	{	246	{
247	name: "Partially Paid",	247	name: "Partially Paid",
248	value: "PARTIALLY_PAID"	248	value: "PARTIALLY_PAID",
249	},	249	},
250	{	250	{
251	name: "Fully Paid",	251	name: "Fully Paid",
252	value: "FULLY_PAID"	252	value: "FULLY_PAID",
253	}	253	},
254	]	254	],
255	}),	255	}),
256	// watch: {	256	// watch: {
257	// menu1(val) {	257	// menu1(val) {
258	// val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));	258	// val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
259	// }	259	// }
260	// },	260	// },
261	methods: {	261	methods: {
262	save(date) {	262	save(date) {
263	this.$refs.menu1.save(date);	263	this.$refs.menu1.save(date);
264	},	264	},
265	dates: function(date) {	265	dates: function (date) {
266	return moment(date).format("MMMM DD, YYYY");	266	return moment(date).format("MMMM DD, YYYY");
267	},	267	},
268	update(editPayment) {	268	update(editPayment) {
269	// console.log("editPayment-----------", editPayment);	269	// console.log("editPayment-----------", editPayment);
270	let feeTypeId = "";	270	let feeTypeId = "";
271	for (let i = 0; i < this.feeTypes.length; i++) {	271	for (let i = 0; i < this.feeTypes.length; i++) {
272	if (this.feeTypes[i].feeType === this.feeType.feeTypeName) {	272	if (this.feeTypes[i].feeType === this.feeType.feeTypeName) {
273	feeTypeId = this.feeTypes[i]._id;	273	feeTypeId = this.feeTypes[i]._id;
274	}	274	}
275	}	275	}
276	// console.log(editPayment);	276	// console.log(editPayment);
277	let editInvoiceData = {	277	let editInvoiceData = {
278	invoiceId: editPayment._id,	278	invoiceId: editPayment._id,
279	classId: editPayment.classNum,	279	classId: editPayment.classNum,
280	studentId: editPayment.sectionId,	280	studentId: editPayment.sectionId,
281	date: editPayment.date,	281	date: editPayment.date,
282	paymentStatus: editPayment.paymentStatus,	282	paymentStatus: editPayment.paymentStatus,
283	paymentMethod: editPayment.paymentMethod,	283	paymentMethod: editPayment.paymentMethod,
284	feeType: editPayment.feeType,	284	feeType: editPayment.feeType,
285	totalAmount: this.feeType.amount.toString(),	285	totalAmount: this.feeType.amount.toString(),
286	totalDiscount: this.feeType.discount.toString(),	286	totalDiscount: this.feeType.discount.toString(),
287	totalSubTotal: this.feeType.subTotal.toString(),	287	totalSubTotal: this.feeType.subTotal.toString(),
288	totalPaidAmount: this.feeType.paidAmount	288	totalPaidAmount: this.feeType.paidAmount,
289	};	289	};
290	if (feeTypeId == "") {	290	if (feeTypeId == "") {
291	delete editInvoiceData.feeType[0].feeTypeId;	291	delete editInvoiceData.feeType[0].feeTypeId;
292	}	292	}
293	if (editInvoiceData.paymentStatus == "NOT_PAID") {	293	if (editInvoiceData.paymentStatus == "NOT_PAID") {
294	delete editInvoiceData.paymentMethod;	294	delete editInvoiceData.paymentMethod;
295	}	295	}
296	if (editInvoiceData.totalPaidAmount == "0") {	296	if (editInvoiceData.totalPaidAmount == "0") {
297	if (editInvoiceData.paymentStatus == "NOT_PAID") {	297	if (editInvoiceData.paymentStatus == "NOT_PAID") {
298	delete editInvoiceData.totalPaidAmount;	298	delete editInvoiceData.totalPaidAmount;
299	}	299	}
300	}	300	}
301	if (editInvoiceData.totalPaidAmount != "0.00") {	301	if (editInvoiceData.totalPaidAmount != "0.00") {
302	if (this.feeType.subTotal == this.feeType.paidAmount) {	302	if (this.feeType.subTotal == this.feeType.paidAmount) {
303	editInvoiceData.paymentStatus = "FULLY_PAID";	303	editInvoiceData.paymentStatus = "FULLY_PAID";
304	}	304	}
305	if (editInvoiceData.totalPaidAmount) {	305	if (editInvoiceData.totalPaidAmount) {
306	if (this.feeType.subTotal != this.feeType.paidAmount) {	306	if (this.feeType.subTotal != this.feeType.paidAmount) {
307	editInvoiceData.paymentStatus = "PARTIALLY_PAID";	307	editInvoiceData.paymentStatus = "PARTIALLY_PAID";
308	// console.log("PARTIALLY_PAID");	308	// console.log("PARTIALLY_PAID");
309	}	309	}
310	}	310	}
311	}	311	}
312		312
313	if (editInvoiceData.totalSubTotal == "0.00") {	313	if (editInvoiceData.totalSubTotal == "0.00") {
314	editInvoiceData.paymentStatus = "FULLY_PAID";	314	editInvoiceData.paymentStatus = "FULLY_PAID";
315	} else if (editInvoiceData.totalSubTotal != "0.00") {	315	} else if (editInvoiceData.totalSubTotal != "0.00") {
316	if (this.feeType.paidAmount === "0.00") {	316	if (this.feeType.paidAmount === "0.00") {
317	editInvoiceData.paymentStatus = "NOT_PAID";	317	editInvoiceData.paymentStatus = "NOT_PAID";
318	}	318	}
319	}	319	}
320	http()	320	http()
321	.put("/updateInvoice", editInvoiceData)	321	.put("/updateInvoice", editInvoiceData)
322	.then(response => {	322	.then((response) => {
323	// this.getInvoiceList();	323	// this.getInvoiceList();
324	this.snackbar = true;	324	this.snackbar = true;
325	this.text = "Payment added successfully";	325	this.text = "Payment added successfully";
326	this.loading = false;	326	this.loading = false;
327	this.$emit("update-Payment");	327	this.$emit("update-Payment");
328	})	328	})
329	.catch(error => {	329	.catch((error) => {
330	console.log(error);	330	console.log(error);
331	this.snackbar = true;	331	this.snackbar = true;
332	this.text = error.response.data.message;	332	this.text = error.response.data.message;
333	this.loading = false;	333	this.loading = false;
334	});	334	});
335	},	335	},
336	clear() {	336	clear() {
337	this.$refs.form.reset();	337	this.$refs.form.reset();
338	},	338	},
339	deleteSelectFee: function(feeTyp, feeTypeList, index) {	339	deleteSelectFee: function (feeTyp, feeTypeList, index) {
340	this.editPayment.feeType.splice(index, 1);	340	this.editPayment.feeType.splice(index, 1);
341	this.getAmmountDetails(feeTyp, feeTypeList);	341	this.getAmmountDetails(feeTyp, feeTypeList);
342	if (this.feeTypeData.length == 0) {	342	if (this.feeTypeData.length == 0) {
343	this.feeType = {	343	this.feeType = {
344	amount: "0.00",	344	amount: "0.00",
345	discount: "0.00",	345	discount: "0.00",
346	paidAmount: "0.00",	346	paidAmount: "0.00",
347	subTotal: "0.00",	347	subTotal: "0.00",
348	feeTypeList: ""	348	feeTypeList: "",
349	};	349	};
350	}	350	}
351	},	351	},
352	getAllClasses() {	352	getAllClasses() {
353	http()	353	http()
354	.get("/getClassesList", {	354	.get("/getClassesList", {
355	headers: { Authorization: "Bearer " + this.token }	355	headers: { Authorization: "Bearer " + this.token },
356	})	356	})
357	.then(response => {	357	.then((response) => {
358	this.addclass = response.data.data;	358	this.addclass = response.data.data;
359	this.getAllStudents();	359	this.getAllStudents();
360	})	360	})
361	.catch(error => {	361	.catch((error) => {
362	// console.log("err====>", err);	362	// console.log("err====>", err);
363	this.showLoader = false;	363	this.showLoader = false;
364	if (error.response.status === 401) {	364	if (error.response.status === 401) {
365	this.$router.replace({ path: "/" });	365	this.$router.replace({ path: "/" });
366	this.$store.dispatch("setToken", null);	366	this.$store.dispatch("setToken", null);
367	this.$store.dispatch("Id", null);	367	this.$store.dispatch("Id", null);
368	this.$store.dispatch("Role", null);	368	this.$store.dispatch("Role", null);
369	}	369	}
370	});	370	});
371	},	371	},
372	getAllStudents() {	372	getAllStudents() {
373	http()	373	http()
374	.get("/getStudentsList", {	374	.get("/getStudentsList", {
375	params: { classId: this.editPayment.classNum },	375	params: { classId: this.editPayment.classNum },
376	headers: { Authorization: "Bearer " + this.token }	376	headers: { Authorization: "Bearer " + this.token },
377	})	377	})
378	.then(response => {	378	.then((response) => {
379	this.studentList = response.data.data;	379	this.studentList = response.data.data;
380	})	380	})
381	.catch(err => {	381	.catch((err) => {
382	// console.log("err====>", err);	382	// console.log("err====>", err);
383	});	383	});
384	},	384	},
385	getfeeType() {	385	getfeeType() {
386	http()	386	http()
387	.get("/getFeesList", {	387	.get("/getFeesList", {
388	headers: { Authorization: "Bearer " + this.token }	388	headers: { Authorization: "Bearer " + this.token },
389	})	389	})
390	.then(response => {	390	.then((response) => {
391	this.feeTypes = response.data.data;	391	this.feeTypes = response.data.data;
392	})	392	})
393	.catch(err => {	393	.catch((err) => {
394	// console.log("err====>", err);	394	// console.log("err====>", err);
395	});	395	});
396	},	396	},
397	getAmmountDetails(feeTyp, feeTypeList) {	397	getAmmountDetails(feeTyp, feeTypeList) {
398	this.feeTypeData = feeTypeList;	398	this.feeTypeData = feeTypeList;
399	let feeType = {	399	let feeType = {
400	amount: "",	400	amount: "",
401	discount: "",	401	discount: "",
402	subTotal: "",	402	subTotal: "",
403	subParticularTotal: "",	403	subParticularTotal: "",
404	paidAmount: ""	404	paidAmount: "",
405	};	405	};
406	for (let i = 0; i < this.feeTypeData.length; i++) {	406	for (let i = 0; i < this.feeTypeData.length; i++) {
407	// ********* AMOUNT *********	407	// ********* AMOUNT *********
408	if (this.feeTypeData[i].amount) {	408	if (this.feeTypeData[i].amount) {
409	feeType.amount =	409	feeType.amount =
410	Number(feeType.amount) + Number(this.feeTypeData[i].amount);	410	Number(feeType.amount) + Number(this.feeTypeData[i].amount);
411	this.feeType.amount = feeType.amount;	411	this.feeType.amount = feeType.amount;
412	this.feeType.subTotal = feeType.amount;	412	this.feeType.subTotal = feeType.amount;
413	this.feeTypeData[i].subTotal = this.feeTypeData[i].amount;	413	this.feeTypeData[i].subTotal = this.feeTypeData[i].amount;
414	} else if (this.feeTypeData[0].amount == "") {	414	} else if (this.feeTypeData[0].amount == "") {
415	this.feeType.amount = "0.00";	415	this.feeType.amount = "0.00";
416	this.feeTypeData[i].subTotal = "0.00";	416	this.feeTypeData[i].subTotal = "0.00";
417	this.feeType.subTotal = "0.00";	417	this.feeType.subTotal = "0.00";
418	} else if (this.feeTypeData[i].amount == "") {	418	} else if (this.feeTypeData[i].amount == "") {
419	this.feeType.amount =	419	this.feeType.amount =
420	Number(feeType.amount) + Number(this.feeTypeData[i].amount);	420	Number(feeType.amount) + Number(this.feeTypeData[i].amount);
421	this.feeTypeData[i].subTotal =	421	this.feeTypeData[i].subTotal =
422	Number(feeType.amount) + Number(this.feeTypeData[i].amount);	422	Number(feeType.amount) + Number(this.feeTypeData[i].amount);
423	this.feeType.subTotal =	423	this.feeType.subTotal =
424	Number(feeType.amount) + Number(this.feeTypeData[i].amount);	424	Number(feeType.amount) + Number(this.feeTypeData[i].amount);
425	}	425	}
426	// ********* DISCOUNT *********	426	// ********* DISCOUNT *********
427	if (this.feeTypeData[i].discount) {	427	if (this.feeTypeData[i].discount) {
428	if (	428	if (
429	Number(this.feeTypeData[i].discount) < this.feeTypeData[i].amount	429	Number(this.feeTypeData[i].discount) < this.feeTypeData[i].amount
430	) {	430	) {
431	feeType.discount =	431	feeType.discount =
432	Number(feeType.discount) + Number(this.feeTypeData[i].discount);	432	Number(feeType.discount) + Number(this.feeTypeData[i].discount);
433	this.feeType.discount = feeType.discount;	433	this.feeType.discount = feeType.discount;
434	feeType.subParticularTotal =	434	feeType.subParticularTotal =
435	this.feeTypeData[i].amount - this.feeTypeData[i].discount;	435	this.feeTypeData[i].amount - this.feeTypeData[i].discount;
436	this.feeTypeData[i].subTotal = feeType.subParticularTotal.toFixed(	436	this.feeTypeData[i].subTotal = feeType.subParticularTotal.toFixed(
437	2	437	2
438	);	438	);
439	} else if (	439	} else if (
440	Number(this.feeTypeData[i].discount) >= this.feeTypeData[i].amount	440	Number(this.feeTypeData[i].discount) >= this.feeTypeData[i].amount
441	) {	441	) {
442	this.feeTypeData[i].discount = this.feeTypeData[i].amount;	442	this.feeTypeData[i].discount = this.feeTypeData[i].amount;
443	feeType.discount =	443	feeType.discount =
444	Number(feeType.discount) + Number(this.feeTypeData[i].discount);	444	Number(feeType.discount) + Number(this.feeTypeData[i].discount);
445	this.feeType.discount = feeType.discount.toString();	445	this.feeType.discount = feeType.discount.toString();
446	feeType.subParticularTotal =	446	feeType.subParticularTotal =
447	this.feeTypeData[i].amount - this.feeTypeData[i].discount;	447	this.feeTypeData[i].amount - this.feeTypeData[i].discount;
448	this.feeTypeData[	448	this.feeTypeData[
449	i	449	i
450	].subTotal = feeType.subParticularTotal.toString();	450	].subTotal = feeType.subParticularTotal.toString();
451	}	451	}
452	} else if (this.feeTypeData[0].discount == "") {	452	} else if (this.feeTypeData[0].discount == "") {
453	this.feeType.discount = "0.00";	453	this.feeType.discount = "0.00";
454	}	454	}
455		455
456	// ********* SUBTOTAL *********	456	// ********* SUBTOTAL *********
457	if (this.feeTypeData[i].subTotal) {	457	if (this.feeTypeData[i].subTotal) {
458	feeType.subTotal =	458	feeType.subTotal =
459	Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal);	459	Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal);
460	this.feeType.subTotal = feeType.subTotal.toFixed(2);	460	this.feeType.subTotal = feeType.subTotal.toFixed(2);
461	}	461	}
462		462
463	// ********* PAID-AMOUNT *********	463	// ********* PAID-AMOUNT *********
464	if (this.feeTypeData[i].paidAmount) {	464	if (this.feeTypeData[i].paidAmount) {
465	feeType.paidAmount =	465	feeType.paidAmount =
466	Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);	466	Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);
467	this.feeType.paidAmount = feeType.paidAmount.toFixed(2);	467	this.feeType.paidAmount = feeType.paidAmount.toFixed(2);
468	} else if (this.feeTypeData[0].paidAmount == "") {	468	} else if (this.feeTypeData[0].paidAmount == "") {
469	this.feeType.paidAmount = "0.00";	469	this.feeType.paidAmount = "0.00";
470	} else if (this.feeTypeData[i].paidAmount == "") {	470	} else if (this.feeTypeData[i].paidAmount == "") {
471	this.feeType.paidAmount = feeType.paidAmount =	471	this.feeType.paidAmount = feeType.paidAmount =
472	Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);	472	Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);
473	}	473	}
474		474
475	// if paid Amount fill large of subtotal value so this condition are fixed filled subtotal value.	475	// if paid Amount fill large of subtotal value so this condition are fixed filled subtotal value.
476	if (feeType.paidAmount > feeType.subTotal) {	476	if (feeType.paidAmount > feeType.subTotal) {
477	this.feeTypeData[i].paidAmount = this.feeTypeData[i].subTotal;	477	this.feeTypeData[i].paidAmount = this.feeTypeData[i].subTotal;
478	this.feeType.paidAmount = feeType.subTotal;	478	this.feeType.paidAmount = feeType.subTotal;
479	}	479	}
480	}	480	}
481	}	481	},
482	// getPayMethodList() {	482	// getPayMethodList() {
483	// if (this.editPayment.paymentStatus == "PARTIALLY_PAID") {	483	// if (this.editPayment.paymentStatus == "PARTIALLY_PAID") {
484	// this.showPayMethods = true;	484	// this.showPayMethods = true;
485	// } else if (this.editPayment.paymentStatus == "FULLY_PAID") {	485	// } else if (this.editPayment.paymentStatus == "FULLY_PAID") {
486	// this.showPayMethods = true;	486	// this.showPayMethods = true;
487	// } else {	487	// } else {
488	// this.showPayMethods = false;	488	// this.showPayMethods = false;
489	// }	489	// }
490	// }	490	// }
491	},	491	},
492	mounted() {	492	mounted() {
493	this.token = this.$store.state.token;	493	this.token = this.$store.state.token;
494	this.getAllClasses();	494	this.getAllClasses();
495	this.getfeeType();	495	this.getfeeType();
496	},	496	},
497	created() {	497	created() {
498	this.$root.$on("app:search", search => {	498	this.$root.$on("app:search", (search) => {
499	this.search = search;	499	this.search = search;
500	});	500	});
501	},	501	},
502	beforeDestroy() {	502	beforeDestroy() {
503	// dont forget to remove the listener	503	// dont forget to remove the listener
504	this.$root.$off("app:search");	504	this.$root.$off("app:search");
505	}	505	},
506	};	506	};
507	</script>	507	</script>
508		508
509		509
510	<style scoped>	510	<style scoped>
511	.active {	511	.active {
512	background-color: gray;	512	background-color: gray;
513	color: white !important;	513	color: white !important;
514	}	514	}
515	.activebtn {	515	.activebtn {
516	color: black !important;	516	color: black !important;
517	}	517	}
518	table {	518	table {
519	border-collapse: collapse;	519	border-collapse: collapse;
520	border: 1px solid #e2e7eb;	520	border: 1px solid #e2e7eb;
521	}	521	}
522		522
523	th,	523	th,
524	td {	524	td {
525	border: 1px solid #e2e7eb;	525	border: 1px solid #e2e7eb;
526	padding: 10px;	526	padding: 10px;
527	text-align: center;	527	text-align: center;
528	}	528	}
529	table.feeTypeTable {	529	table.feeTypeTable {
530	table-layout: auto !important;	530	table-layout: auto !important;
531	width: 100% !important;	531	width: 100% !important;
532	}	532	}
533	@media screen and (max-width: 380px) {	533	@media screen and (max-width: 380px) {
534	.tableRsponsive {	534	.tableRsponsive {
535	display: block;	535	display: block;
536	position: relative;	536	position: relative;
537	overflow: scroll;	537	overflow: scroll;
538	}	538	}
539	}	539	}
540	</style>	540	</style>

src/pages/Course/courseDetail.vue

Diff comments View file @1e1e364

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

src/pages/Dashboard/LiveOnlineClass.vue

Diff comments View file @1e1e364

1	<template>	1	<template>
2	<div class="body-color">	2	<div class="body-color">
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 grid-list-xl class="pt-0">	22	<v-container grid-list-xl class="pt-0">
23	<v-layout row wrap class="mt-1">	23	<v-layout row wrap class="mt-1">
24	<!-- if logged in user is parent -->	24	<!-- if logged in user is parent -->
25	<v-flex xs12 sm12 md9 v-if=" $store.state.role === 'PARENT' ">	25	<v-flex xs12 sm12 md9 v-if=" $store.state.role === 'PARENT' ">
26	<v-layout column>	26	<v-layout column>
27	<!-- HEADING -->	27	<!-- HEADING -->
28	<v-flex>	28	<v-flex>
29	<div	29	<div
30	class="title side-bar-color font-weight-bold"	30	class="title side-bar-color font-weight-bold"
31	>Live Online Classes - {{$route.query.chapterName}}</div>	31	>Live Online Classes - {{$route.query.chapterName}}</div>
32	<!-- <div class="subheading grey--text lighten-1">{{liveLink}}</div> -->	32	<!-- <div class="subheading grey--text lighten-1">{{liveLink}}</div> -->
33	<!-- <div	33	<!-- <div
34	class="subheading grey--text lighten-1"	34	class="subheading grey--text lighten-1"
35	>The session started at 1:00 there is 1 moderator</div>-->	35	>The session started at 1:00 there is 1 moderator</div>-->
36	</v-flex>	36	</v-flex>
37		37
38	<!-- JOIN OR END SESSION -->	38	<!-- JOIN OR END SESSION -->
39	<v-flex>	39	<v-flex>
40	<div>	40	<div>
41	<v-btn	41	<v-btn
42	round	42	round
43	class="open-dialog-button"	43	class="open-dialog-button"
44	dark	44	dark
45	v-if="studentBtn"	45	v-if="studentBtn"
46	@click="startChat();"	46	@click="showLoader = true;startChat();"
47	>{{studentBtn}}</v-btn>	47	>{{studentBtn}}</v-btn>
48	<span class="subheading grey--twxt lighten-1" v-else>Session hasnt started yet</span>	48	<span class="subheading grey--twxt lighten-1" v-else>Session hasnt started yet</span>
49	</div>	49	</div>
50	</v-flex>	50	</v-flex>
51	<v-flex id="studentClone">	51	<v-flex id="studentClone">
52	<div id="jitsi-container"></div>	52	<div id="jitsi-container"></div>
53	</v-flex>	53	</v-flex>
54	</v-layout>	54	</v-layout>
55	</v-flex>	55	</v-flex>
56		56
57	<!-- if logged in user is teacher -->	57	<!-- if logged in user is teacher -->
58	<v-flex xs12 sm12 md12 v-else>	58	<v-flex xs12 sm12 md12 v-else>
59	<v-layout column>	59	<v-layout column>
60	<!-- HEADING -->	60	<!-- HEADING -->
61	<v-flex>	61	<v-flex>
62	<div	62	<div
63	class="title side-bar-color font-weight-bold"	63	class="title side-bar-color font-weight-bold"
64	>Live Online Classes - {{$route.query.chapterName}}</div>	64	>Live Online Classes - {{$route.query.chapterName}}</div>
65	<!-- <div class="subheading grey--text lighten-1"></div> -->	65	<!-- <div class="subheading grey--text lighten-1"></div> -->
66	<!-- <div	66	<!-- <div
67	class="subheading grey--text lighten-1"	67	class="subheading grey--text lighten-1"
68	>The session started at 1:00 there is 1 moderator</div>-->	68	>The session started at 1:00 there is 1 moderator</div>-->
69	</v-flex>	69	</v-flex>
70		70
71	<!-- JOIN OR END SESSION -->	71	<!-- JOIN OR END SESSION -->
72	<v-flex>	72	<v-flex>
73	<div>	73	<div>
74	<v-btn round class="open-dialog-button" dark @click="startChat()">Start Session</v-btn>	74	<v-btn round class="open-dialog-button" dark @click="showLoader = true;startChat()">Start Session</v-btn>
75	</div>	75	</div>
76	</v-flex>	76	</v-flex>
77	<v-flex id="teacherClone">	77	<v-flex id="teacherClone">
78	<div id="jitsi-container"></div>	78	<div id="jitsi-container"></div>
79	</v-flex>	79	</v-flex>
80	</v-layout>	80	</v-layout>
81	</v-flex>	81	</v-flex>
82		82
83	<v-spacer></v-spacer>	83	<v-spacer></v-spacer>
84		84
85	<!-- COURSES SIDE BAR- positioned to the right of the page -->	85	<!-- COURSES SIDE BAR- positioned to the right of the page -->
86	<!-- <v-flex xs3>	86	<!-- <v-flex xs3>
87	<v-card class="elevation-0 card-border" height="100%">	87	<v-card class="elevation-0 card-border" height="100%">
88	<CoursesSideBar></CoursesSideBar>	88	<CoursesSideBar></CoursesSideBar>
89	</v-card>	89	</v-card>
90	</v-flex>-->	90	</v-flex>-->
91	</v-layout>	91	</v-layout>
92	</v-container>	92	</v-container>
93	</div>	93	</div>
94	</template>	94	</template>
95	<script>	95	<script>
96	import AllApiCalls from "@/Services/AllApiCalls.js";	96	import AllApiCalls from "@/Services/AllApiCalls.js";
97	import http from "@/Services/http.js";	97	import http from "@/Services/http.js";
98	import moment from "moment";	98	import moment from "moment";
99	import Meet from "@/pages/Meet/meet.vue";	99	import Meet from "@/pages/Meet/meet.vue";
100	import CoursesSideBar from "@/pages/Common/CoursesSideBar.vue";	100	import CoursesSideBar from "@/pages/Common/CoursesSideBar.vue";
101	export default {	101	export default {
102	mixins: [AllApiCalls],	102	mixins: [AllApiCalls],
103	components: {	103	components: {
104	CoursesSideBar,	104	CoursesSideBar,
105	},	105	},
106	data() {	106	data() {
107	return {	107	return {
108	startLiveSession: "",	108	startLiveSession: "",
109	studentBtn: "",	109	studentBtn: "",
110		110
111	// DATA TABLE	111	// DATA TABLE
112	search: "",	112	search: "",
113	pagination: {	113	pagination: {
114	rowsPerPage: 10,	114	rowsPerPage: 10,
115	},	115	},
116	liveOnlineHeaders: [	116	liveOnlineHeaders: [
117	{	117	{
118	text: "Playback",	118	text: "Playback",
119	value: "attachementUrl",	119	value: "attachementUrl",
120	sortable: false,	120	sortable: false,
121	align: "center",	121	align: "center",
122	},	122	},
123	{	123	{
124	text: "Meeting",	124	text: "Meeting",
125	align: "center",	125	align: "center",
126	sortable: false,	126	sortable: false,
127	value: "",	127	value: "",
128	},	128	},
129	{	129	{
130	text: "Recording",	130	text: "Recording",
131	value: "",	131	value: "",
132	sortable: false,	132	sortable: false,
133	align: "center",	133	align: "center",
134	},	134	},
135	{	135	{
136	text: "Description Preview",	136	text: "Description Preview",
137	value: "",	137	value: "",
138	sortable: false,	138	sortable: false,
139	align: "center",	139	align: "center",
140	},	140	},
141	{ text: "Date", value: "", sortable: false, align: "center" },	141	{ text: "Date", value: "", sortable: false, align: "center" },
142	{ text: "Duration", value: "", sortable: false, align: "center" },	142	{ text: "Duration", value: "", sortable: false, align: "center" },
143	{ text: "Toolbar", value: "", sortable: false, align: "center" },	143	{ text: "Toolbar", value: "", sortable: false, align: "center" },
144	],	144	],
145	liveOnlineItems: [],	145	liveOnlineItems: [],
146		146
147	// JITSI CONTAINER	147	// JITSI CONTAINER
148	liveLink: "",	148	liveLink: "",
149	token: "",	149	token: "",
150	selectStudents: {},	150	selectStudents: {},
151	classRules: [(v) => !!v \|\| " Class Name is required"],	151	classRules: [(v) => !!v \|\| " Class Name is required"],
152	sectionRules: [(v) => !!v \|\| " Section Name is required"],	152	sectionRules: [(v) => !!v \|\| " Section Name is required"],
153	addclass: [],	153	addclass: [],
154	addSection: [],	154	addSection: [],
155	loading: false,	155	loading: false,
156	room: "",	156	room: "",
157	username: "",	157	username: "",
158	roomPassword: "",	158	roomPassword: "",
159	counter: 0,	159	counter: 0,
160	};	160	};
161	},	161	},
162	methods: {	162	methods: {
163	async startChat() {	163	async startChat() {
164	if (this.$store.state.role === "PARENT") {	164	if (this.$store.state.role === "PARENT") {
165	if (this.counter == 0) {	165	if (this.counter == 0) {
166	console.log("enter start chat");	166	console.log("enter start chat");
167	this.startConference();	167	this.startConference();
168	this.counter += 1;	168	this.counter += 1;
169	}	169	}
170	}	170	}
171	if (this.$store.state.role === "TEACHER") {	171	if (this.$store.state.role === "TEACHER") {
172	if (this.counter == 0) {	172	if (this.counter == 0) {
173	this.createRoom();	173	this.createRoom();
174	this.counter += 1;	174	this.counter += 1;
175	}	175	}
176	}	176	}
177	},	177	},
178	// JITSI CONTAINER	178	// JITSI CONTAINER
179	startConference() {	179	startConference() {
180	console.log("yes session started");	180	console.log("yes session started");
181	var _this = this;	181	var _this = this;
182	try {	182	try {
183	const domain = "meet.intrack.in";	183	const domain = "meet.intrack.in";
184	const options = {	184	const options = {
185	audioInput: "<deviceLabel>",	185	audioInput: "<deviceLabel>",
186	audioOutput: "<deviceLabel>",	186	audioOutput: "<deviceLabel>",
187	videoInput: "<deviceLabel>",	187	videoInput: "<deviceLabel>",
188	prejoinPageEnabled: false,	188	prejoinPageEnabled: false,
189	roomName: this.room,	189	roomName: this.room,
190	height: 500,	190	height: 500,
191	parentNode: document.getElementById("jitsi-container"),	191	parentNode: document.getElementById("jitsi-container"),
192	interfaceConfigOverwrite: {	192	interfaceConfigOverwrite: {
193	filmStripOnly: false,	193	filmStripOnly: false,
194	SHOW_PROMOTIONAL_CLOSE_PAGE: false,	194	SHOW_PROMOTIONAL_CLOSE_PAGE: false,
195	SHOW_POWERED_BY: false,	195	SHOW_POWERED_BY: false,
196	SHOW_JITSI_WATERMARK: false,	196	SHOW_JITSI_WATERMARK: false,
197	TOOLBAR_BUTTONS: [	197	TOOLBAR_BUTTONS: [
198	"microphone",	198	"microphone",
199	"camera",	199	"camera",
200	"closedcaptions",	200	"closedcaptions",
201	"desktop",	201	"desktop",
202	"fullscreen",	202	"fullscreen",
203	"fodeviceselection",	203	"fodeviceselection",
204	"hangup",	204	"hangup",
205	"profile",	205	"profile",
206	"info",	206	"info",
207	"chat",	207	"chat",
208	"recording",	208	"recording",
209	"livestreaming",	209	"livestreaming",
210	"etherpad",	210	"etherpad",
211	"sharedvideo",	211	"sharedvideo",
212	"settings",	212	"settings",
213	"raisehand",	213	"raisehand",
214	"videoquality",	214	"videoquality",
215	"filmstrip",	215	"filmstrip",
216	"invite",	216	"invite",
217	"feedback",	217	"feedback",
218	"stats",	218	"stats",
219	"shortcuts",	219	"shortcuts",
220	"tileview",	220	"tileview",
221	],	221	],
222	},	222	},
223	configOverwrite: {	223	configOverwrite: {
224	disableSimulcast: false,	224	disableSimulcast: false,
225	},	225	},
226	teacherName: "",	226	teacherName: "",
227	romm: "",	227	romm: "",
228	};	228	};
229	_this.api = new JitsiMeetExternalAPI(domain, options);	229	_this.api = new JitsiMeetExternalAPI(domain, options);
230	console.log("this.api ", this.api);	230	console.log("this.api ", this.api);
231	_this.api.addEventListener("videoConferenceJoined", () => {	231	_this.api.addEventListener("videoConferenceJoined", () => {
232	console.log("Local User Joined");	232	console.log("Local User Joined");
233		233
234	_this.api.executeCommand("displayName", _this.username);	234	_this.api.executeCommand("displayName", _this.username);
235	_this.api.executeCommand("password", this_.roomPassword);	235	_this.api.executeCommand("password", this_.roomPassword);
		236	});
236	});	237	_this.api.on("readyToClose", () => {
237	_this.api.on("readyToClose", () => {	238	this.$router.push({ name: "Refresh" });
238	this.$router.push({ name: "Refresh" });	239	});
239	});	240	} catch (error) {
240	} catch (error) {	241	console.error("Failed to load Jitsi API", error);
241	console.error("Failed to load Jitsi API", error);	242	}
242	}	243	},
243	},	244	openRoom() {
244	openRoom() {	245	// verify the JitsiMeetExternalAPI constructor is added to the global..
245	// verify the JitsiMeetExternalAPI constructor is added to the global..	246	// if (this.teacherName != "" \|\| this.room != "") {
246	// if (this.teacherName != "" \|\| this.room != "") {	247	// if (window.JitsiMeetExternalAPI) {
247	// if (window.JitsiMeetExternalAPI) {	248	// // var person = prompt("Please enter your name:", "Rabie");
248	// // var person = prompt("Please enter your name:", "Rabie");	249	// if (person != null \|\| person != "") this.username = this.teacherName;
249	// if (person != null \|\| person != "") this.username = this.teacherName;	250	// var room = prompt("Please enter your room:", "Test Room");
250	// var room = prompt("Please enter your room:", "Test Room");	251	// if (room != null \|\| room != "") this.room = this.room;
251	// if (room != null \|\| room != "") this.room = this.room;	252	// this.startConference();
252	// this.startConference();	253	// } else alert("Jitsi Meet API script not loaded");
253	// } else alert("Jitsi Meet API script not loaded");	254	// }
254	// }	255	},
255	},	256
256		257	createRoom(classId) {
257	createRoom(classId) {	258	this.showLoader = true;
258	this.showLoader = true;	259	var classId = {
259	var classId = {	260	classId: classId,
260	classId: classId,	261	};
261	};	262	http()
262	http()	263	.post("/createLiveClasses", {
263	.post("/createLiveClasses", {	264	classId: this.$route.query.classId,
264	classId: this.$route.query.classId,	265	courseId: this.$route.query.courseId,
265	courseId: this.$route.query.courseId,	266	chapterId: this.$route.query.chapterId,
266	chapterId: this.$route.query.chapterId,	267	})
267	})	268	.then((response) => {
268	.then((response) => {	269	// this.addSection = response.data.data;
269	// this.addSection = response.data.data;	270	console.log("CREATE___ROOOM", response.data);
270	console.log("CREATE___ROOOM", response.data);	271	var room = response.data.data.roomName;
271	var room = response.data.data.roomName;	272	var username = localStorage.getItem("teacherName")
272	var username = localStorage.getItem("teacherName")	273	var roomPassword = response.data.data.password;
273	var roomPassword = response.data.data.password;	274	console.log(
274	console.log(	275	"room",
275	"room",	276	room,
276	room,	277	"username",
277	"username",	278	username,
278	username,	279	"roomPassword",
279	"roomPassword",	280	roomPassword
280	roomPassword	281	);
281	);	282	var this_ = this;
282	var this_ = this;	283	if (username != "" \|\| room != "") {
283	if (username != "" \|\| room != "") {	284	if (window.JitsiMeetExternalAPI) {
284	if (window.JitsiMeetExternalAPI) {	285	// var person = prompt("Please enter your name:", "Rabie");
285	// var person = prompt("Please enter your name:", "Rabie");	286	if (username != null \|\| username != "") {
286	if (username != null \|\| username != "") {	287	this_.username = username;
287	this_.username = username;	288	}
288	}	289	// var room = prompt("Please enter your room:", "Test Room");
289	// var room = prompt("Please enter your room:", "Test Room");	290	if (room != null \|\| room != "") {
290	if (room != null \|\| room != "") {	291	this_.room = room;
291	this_.room = room;	292	}
292	}	293	if (roomPassword != null \|\| roomPassword != "") {
293	if (roomPassword != null \|\| roomPassword != "") {	294	this_.password = roomPassword;
294	this_.password = roomPassword;	295	}
295	}	296	} else alert("Jitsi Meet API script not loaded");
296	} else alert("Jitsi Meet API script not loaded");	297	this_.startConference();
297	this_.startConference();	298	}
298	}	299	this.showLoader = false;
299	this.showLoader = false;	300	})
300	})	301	.catch((err) => {
301	.catch((err) => {	302	this.showLoader = false;
302	this.showLoader = false;	303	});
303	});	304	},
304	},	305	async studentClasses() {
305	async studentClasses() {	306	this.liveLink = "";
306	this.liveLink = "";	307	this.room = "";
307	this.room = "";	308	this.username = "";
308	this.username = "";	309	this.roomPassword = "";
309	this.roomPassword = "";	310	/* getLiveClassesesList - To up date line under heading*/
310	/* getLiveClassesesList - To up date line under heading*/	311	let response = await this.getLiveClassesesList({
311	let response = await this.getLiveClassesesList({	312	classId: this.$route.query.classId,
312	classId: this.$route.query.classId,	313	courseId: this.$route.query.courseId,
313	courseId: this.$route.query.courseId,	314	chapterId: this.$route.query.chapterId,
314	chapterId: this.$route.query.chapterId,	315	});
315	});	316	console.log("response getLiveClassesesList- ", response);
316	console.log("response getLiveClassesesList- ", response);	317
317		318	/* CHECK RESPONSE TO ASSIGN MESSAGE INSIDE BUTTON */
318	/* CHECK RESPONSE TO ASSIGN MESSAGE INSIDE BUTTON */	319	if (response.data.data[0].sessionStatus == "ENDED") {
319	if (response.data.data[0].sessionStatus == "ENDED") {	320	// this.startLiveSession = "Start Session";
320	// this.startLiveSession = "Start Session";	321	this.studentBtn = "";
321	this.studentBtn = "";	322	}
322	}	323	if (response.data.data[0].sessionStatus == "STARTED") {
323	if (response.data.data[0].sessionStatus == "STARTED") {	324	// this.startLiveSession = "Join Session";
324	// this.startLiveSession = "Join Session";	325	this.studentBtn = "Join Session";
325	this.studentBtn = "Join Session";	326	}
326	}	327	if (response.data.data.length == 0) {
327	if (response.data.data.length == 0) {	328	this.startLiveSession = "Start Session";
328	this.startLiveSession = "Start Session";	329	this.studentBtn = "";
329	this.studentBtn = "";	330	} else {
330	} else {	331	this.liveLink = response.data.data[0].link;
331	this.liveLink = response.data.data[0].link;	332	var room = response.data.data[0].roomName;
332	var room = response.data.data[0].roomName;	333	var username = this.currentUser;
333	var username = this.currentUser;	334	var roomPassword = response.data.data[0].password;
334	var roomPassword = response.data.data[0].password;	335	var this_ = this;
335	var this_ = this;	336	// console.log(this.room, this.roomPassword, this.username);
336	// console.log(this.room, this.roomPassword, this.username);	337
337		338	if (username != "" \|\| room != "") {
338	if (username != "" \|\| room != "") {	339	if (window.JitsiMeetExternalAPI) {
339	if (window.JitsiMeetExternalAPI) {	340	// var person = prompt("Please enter your name:", "Rabie");
340	// var person = prompt("Please enter your name:", "Rabie");	341	if (username != null \|\| username != "") {
341	if (username != null \|\| username != "") {	342	this_.username = username;
342	this_.username = username;	343	}
343	}	344	if (roomPassword != null \|\| roomPassword != "") {
344	if (roomPassword != null \|\| roomPassword != "") {	345	this_.roomPassword = roomPassword;
345	this_.roomPassword = roomPassword;	346	}
346	}	347	// var room = prompt("Please enter your room:", "Test Room");
347	// var room = prompt("Please enter your room:", "Test Room");	348	if (room != null \|\| room != "") {
348	if (room != null \|\| room != "") {	349	this_.room = room;
349	this_.room = room;	350	}
350	}	351	// this.startConference();
351	// this.startConference();	352	}
352	}	353	}
353	}	354	}
354	}	355	},
355	},	356	},
356	},	357
357		358	async created() {
358	async created() {	359	console.log(
359	console.log(	360	"this.$store.state.studentsData",
360	"this.$store.state.studentsData",	361	this.$store.state.studentsData[0].name
361	this.$store.state.studentsData[0].name	362	);
362	);	363	this.currentUser = localStorage.getItem("studentName");
363	this.currentUser = localStorage.getItem("studentName");	364	this.token = this.$store.state.token;
364	this.token = this.$store.state.token;	365	if (this.$store.state.role === "PARENT") {
365	if (this.$store.state.role === "PARENT") {	366	await this.studentClasses();
366	await this.studentClasses();	367	}
367	}	368
368		369	/* getStudentCourses - to get courseData - defined in GetApis.js*/
369	/* getStudentCourses - to get courseData - defined in GetApis.js*/	370	if (this.$store.state.role === "PARENT") {
370	if (this.$store.state.role === "PARENT") {	371	await this.getStudentCourses({
371	await this.getStudentCourses({	372	classId: localStorage.getItem("parentClassId"),
372	classId: localStorage.getItem("parentClassId"),	373	studentId: localStorage.getItem("parentStudentId"),
373	studentId: localStorage.getItem("parentStudentId"),	374	});
374	});	375	}
375	}	376	},
376	},	377	};
377	};	378	</script>
378	</script>	379	<style scoped>
379	<style scoped>	380	.side-bar-color {
380	.side-bar-color {	381	color: #827bfa !important;
381	color: #827bfa !important;	382	/* border-top-right-radius: 74px !important; */
382	/* border-top-right-radius: 74px !important; */	383	}
383	}	384	.card-border {
384	.card-border {	385	border: 1px #bdbdbd solid;
385	border: 1px #bdbdbd solid;	386	border-radius: 3px;
386	border-radius: 3px;	387	}
387	}	388	.reply-desc {
388	.reply-desc {	389	border: 1px solid #f2f2f2;
389	border: 1px solid #f2f2f2;	390	}
390	}	391	.open-dialog-button {
391	.open-dialog-button {	392	background: #827bfa !important;
392	background: #827bfa !important;	393	border-color: #827bfa !important;
393	border-color: #827bfa !important;	394	text-transform: none !important;
394	text-transform: none !important;	395	}
395	}	396
396		397	.reply-btn {
397	.reply-btn {	398	background: #feb83c !important;
398	background: #feb83c !important;	399	border-color: #feb83c !important;
399	border-color: #feb83c !important;	400	text-transform: none !important;
400	text-transform: none !important;	401	-webkit-box-shadow: none !important;
401	-webkit-box-shadow: none !important;	402	box-shadow: none !important;
402	box-shadow: none !important;	403	}
403	}	404	#jitsi-container {
404	#jitsi-container {	405	height: 100vh;
405	height: 100vh;	406	}
406	}	407	</style>

src/pages/Dashboard/dashboard.vue

Diff comments View file @1e1e364

 <template>
   <v-app id="pages-dasboard">
     <!-- ****** VIEW PROFIL NOTICE BOARD ******  -->
     <!-- <v-dialog v-model="dialogNotice" max-width="940px" scrollable>
       <v-card>
         <v-toolbar color="grey lighten-2" flat>
           <v-spacer></v-spacer>
           <v-toolbar-title>
             <h3>Notice Board</h3>
           </v-toolbar-title>
           <v-spacer></v-spacer>
           <v-icon @click="closeNotice">close</v-icon>
         </v-toolbar>
         <v-card-text>
           <v-layout>
             <v-flex align-center justify-center layout text-xs-center class="mt-2">
               <img src="/static/icon/user.png" width="70px" v-if="!notice.eventImageUrl" />
               <img :src="notice.eventImageUrl" width="280px" v-else-if="notice.eventImageUrl" />
             </v-flex>
           </v-layout>
           <v-container grid-list-md>
             <v-layout wrap>
               <v-flex>
                 <v-layout>
                   <v-flex xs5 sm6>
                     <h5 class="right my-1">
                       <b>Title:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ notice.title }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs5 sm6>
                     <h5 class="right my-1">
                       <b>Description:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ notice.description }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
           </v-container>
         </v-card-text>
       </v-card>
     </v-dialog>-->
     <!-- <v-container fluid grid-list-xl> -->
     <!-- 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 BOX EVENT DETAILS -->
     <v-dialog v-model="viewEventDetails" max-width="500">
       <v-card flat class="card-style pa-2" dark>
         <!-- TITLE -->
         <v-layout>
           <v-layout>
             <v-flex xs12>
               <label class="title text-xs-center">{{particularEvent.title}}</label>
               <v-icon size="24" class="right" @click="viewEventDetails = false">cancel</v-icon>
             </v-flex>
           </v-layout>
         </v-layout>
         <v-card-text>
           <v-list dark class="card-style">
             <v-list-tile>
               <v-list-tile-content>
                 <v-list-tile-title>Date Of Event : {{moment(particularEvent.dateOfEvent).format("DD MMMM, YYYY")}}</v-list-tile-title>
               </v-list-tile-content>
             </v-list-tile>
             <v-list-tile>
               <v-list-tile-content>
                 <v-list-tile-title>Start Time : {{particularEvent.startTime}}</v-list-tile-title>
               </v-list-tile-content>
             </v-list-tile>
             <v-list-tile>
               <v-list-tile-content>
                 <v-list-tile-title>Duration : {{particularEvent.duration}}</v-list-tile-title>
               </v-list-tile-content>
             </v-list-tile>
             <v-list-tile>
               <v-list-tile-content>
                 <v-list-tile-title>
                   Link :
                   <a :href="particularEvent.link">{{particularEvent.link}}</a>
                 </v-list-tile-title>
               </v-list-tile-content>
             </v-list-tile>
           </v-list>
         </v-card-text>
       </v-card>
     </v-dialog>
     <v-layout wrap row>
       <v-flex xs12 sm12 md9>
         <v-container fluid grid-list-xl>
           <!-- ***** Total Students ***** -->
           <v-layout wrap class v-if="$store.state.role != 'PARENT' ">
             <v-flex xs12 sm12 md3>
               <router-link :to="{ name:'Students' }">
                 <v-card class="card pink-bgcolor">
                   <v-card-title primary-title class="titleCard white--text py-3">Students</v-card-title>
                   <img src="/static/icon/student.png" class="ml-2" width="40" alt="icons" />
                   <v-card-title class="headline py-1 white--text">{{ students.length }}</v-card-title>
                 </v-card>
               </router-link>
             </v-flex>
             <!-- ***** Total Teachers***** -->
             <v-flex xs12 sm12 md3>
               <router-link :to="{ name:'Teachers' }">
                 <v-card flat class="card elevation-2 firozi-bgcolor">
                   <v-card-title primary-title class="titleCard white--text py-3">Teachers</v-card-title>
                   <img src="/static/icon/teacher.png" class="ml-2" width="40" alt="icons" />
                   <v-card-title class="headline py-1 white--text">{{ teachers.length }}</v-card-title>
                 </v-card>
               </router-link>
             </v-flex>
             <!-- ***** Total Parents ***** -->
             <v-flex xs12 sm12 md3>
               <router-link :to="{ name:'Parents' }">
                 <v-card flat class="card yellow darken-3">
                   <v-card-title primary-title class="titleCard white--text py-3">Parents</v-card-title>
                   <img src="/static/icon/parents.png" class="ml-3" width="40px" alt="icons" />
                   <v-card-title class="headline py-1 white--text">{{ parents.length }}</v-card-title>
                 </v-card>
               </router-link>
             </v-flex>
             <!-- ***** Total Class***** -->
             <v-flex xs12 sm12 md3>
               <router-link :to="{ name:'Class' }">
                 <v-card flat class="card darkBlue-bgcolor">
                   <v-card-title primary-title class="titleCard white--text py-3">Class</v-card-title>
                   <img src="/static/icon/class.png" width="40" alt="icons" class="ml-2" />
                   <v-card-title class="headline py-1 white--text">{{ classes.length }}</v-card-title>
                 </v-card>
               </router-link>
             </v-flex>
           </v-layout>
           <p
             v-if="studentsData.length === 0 && role == 'PARENT'"
             class="text-center title grey lighten-4 error--text"
           >You have no student registered with school</p>
           <!-- ACCOUNT -->
           <v-layout v-if="role == 'SUPERADMIN'|| role == 'ADMIN'">
             <v-flex xs12>
               <v-card class="card mt-2 account-Card">
                 <h4>
                   <b>Account</b>
                 </h4>
                 <v-layout wrap>
                   <v-flex xs12 sm12 md3>
                     <v-list two-line>
                       <template>
                         <v-list-tile>
                           <v-list-tile-avatar>
                             <v-icon class="account-circle darkBlue-color">panorama_fish_eye</v-icon>
                           </v-list-tile-avatar>
                           <v-list-tile-content>
                             <v-list-tile-title class="mt-2">
                               <p class="subheading font-color">Fees</p>
                             </v-list-tile-title>
                             <v-list-tile-title>Rs. {{ feeData.totalFees }}</v-list-tile-title>
                           </v-list-tile-content>
                         </v-list-tile>
                         <v-list-tile>
                           <v-list-tile-avatar>
                             <v-icon class="account-circle yellowDark-color">panorama_fish_eye</v-icon>
                           </v-list-tile-avatar>
                           <v-list-tile-content>
                             <v-list-tile-title class="mt-2">
                               <p class="subheading font-color">Collection</p>
                             </v-list-tile-title>
                             <v-list-tile-title>Rs. {{ feeData.totalCollection }}</v-list-tile-title>
                           </v-list-tile-content>
                         </v-list-tile>
                         <v-list-tile>
                           <v-list-tile-avatar>
                             <v-icon class="account-circle pink-color">panorama_fish_eye</v-icon>
                           </v-list-tile-avatar>
                           <v-list-tile-content>
                             <v-list-tile-title class="mt-2">
                               <p class="subheading font-color">Expences</p>
                             </v-list-tile-title>
                             <v-list-tile-title>Rs. {{ expenseData.sum }}</v-list-tile-title>
                           </v-list-tile-content>
                         </v-list-tile>
                       </template>
                     </v-list>
                   </v-flex>
                   <v-flex xs12 sm12 md9 lg9>
                     <div id="chart">
                       <div v-if="showChart">
                         <apexchart
                           type="bar"
                           height="250"
                           style="max-width: 800px !important"
                           :options="chartOptions"
                           :series="series"
                         ></apexchart>
                       </div>
                     </div>
                   </v-flex>
                 </v-layout>
               </v-card>
             </v-flex>
           </v-layout>
           <!-- FOR ADMIN ROLE  -->
           <v-card class="mt-2 card" v-if="role == 'ADMIN'">
             <!-- <full-calendar
                   ref="calendar"
                   defaultView="month"
                   droppable="false"
                   :events="events"
                   :config="config"
             ></full-calendar>-->
             <h4 class="pa-3">
               <b>Notice</b>
             </h4>
             <v-data-table
               :items="noticeData"
               class="elevation-0"
               flat
               hide-actions
               hide-headers
               style="border-spacing: 0 !important;"
             >
               <template
                 slot="items"
                 slot-scope="props"
                 v-if="props.index < 5"
                 style="border-spacing: 0 !important;"
               >
                 <tr class="td-notice">
                   <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
                   <td>
                     <span class="grey--text caption">{{ date(props.item.created) }}</span>
                     <br />
                     <span class="body-2">{{ props.item.title}}</span>
                   </td>
                   <td class="grey--text mt-2">{{ props.item.description}}</td>
                   <td class="text-xs-center">
                     <span>
                       <v-tooltip top>
                         <img
                           slot="activator"
                           style="cursor:pointer; width:25px; height:25px; "
                           @click="profile"
                           src="/static/icon/view.png"
                         />
                         <span>View</span>
                       </v-tooltip>
                     </span>
                   </td>
                 </tr>
               </template>
             </v-data-table>
           </v-card>
           <!-- FOR TEACHER ROLE  -->
           <v-card class="mt-2 card" v-if="role == 'TEACHER'">
             <v-layout>
               <v-flex xs6 sm6 md6>
                 <h4 class="pa-3">
                   <b>Notice</b>
                 </h4>
                 <v-data-table
                   :items="noticeData"
                   class="elevation-0"
                   flat
                   hide-actions
                   hide-headers
                   style="border-spacing: 0 !important;"
                 >
                   <template
                     slot="items"
                     slot-scope="props"
                     v-if="props.index < 5"
                     style="border-spacing: 0 !important;"
                   >
                     <tr class="td-notice">
                       <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
                       <td>
                         <span class="grey--text caption">{{ date(props.item.created) }}</span>
                         <br />
                         <span class="body-2">{{ props.item.title}}</span>
                       </td>
                       <td class="grey--text mt-2">{{ props.item.description}}</td>
                       <td class="text-xs-center">
                         <span>
                           <v-tooltip top>
                             <img
                               slot="activator"
                               style="cursor:pointer; width:25px; height:25px; "
                               @click="profile"
                               src="/static/icon/view.png"
                             />
                             <span>View</span>
                           </v-tooltip>
                         </span>
                       </td>
                     </tr>
                   </template>
                 </v-data-table>
               </v-flex>
               <v-flex xs6 sm6 md6>
                 <v-card-text>
                   <v-card-title class="justify-center subheading font-weight-bold">Latest Events</v-card-title>
                   <div
                     v-for="(activity,index) in activityList"
                     :key="index"
                     class="mt-2"
                     style="cursor: pointer;"
                     @click="seeEventDetails(activity)"
                   >
                     <span
                       :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
                       style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
                     ></span>
                     <div style="display: inline-block;" class="ml-2">
                       <div>
                         <div
                           class="grey--text lighten-1 caption"
                           v-if="activity.dateOfEvent"
                         >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div>
                         <div class="body-2" v-if="activity.title">{{activity.title}}</div>
                       </div>
                     </div>
                   </div>
                   <div v-if="activityList.length == 0">
                     <p class="text-center title grey lighten-4 error--text">No Data Found!</p>
                   </div>
                 </v-card-text>
               </v-flex>
             </v-layout>
           </v-card>
           <!-- COURSES -->
           <v-layout v-if="role == 'PARENT'">
             <v-flex xs12>
               <v-card class="card mt-2 account-Card">
                 <h4>
                   <b>My Courses</b>
                 </h4>
                 <v-layout wrap>
                   <v-flex xs12 sm12>
                     <v-list two-line>
                       <template>
                         <v-list-tile v-for="(course,i) in courseData" :key="i">
                           <v-list-tile-avatar>
                             <v-icon
                               class="account-circle darkBlue-color"
                               style="cursor: pointer;"
                               @click="routeToCourseDetails(course._id)"
                             >panorama_fish_eye</v-icon>
                           </v-list-tile-avatar>
                           <v-list-tile-content>
                             <v-list-tile-title
                               style="cursor: pointer;"
                               @click="routeToCourseDetails(course._id)"
                             >{{ course.courseName }}</v-list-tile-title>
                           </v-list-tile-content>
                         </v-list-tile>
                       </template>
                     </v-list>
                   </v-flex>
                 </v-layout>
               </v-card>
             </v-flex>
           </v-layout>
           <v-layout v-if="role == 'PARENT'">
             <v-flex xs6>
               <v-card class="mt-2 card">
                 <h4 class="pa-3">
                   <b>Latest Annoucements</b>
                 </h4>
                 <v-data-table
                   :items="annoucementData"
                   class="elevation-0"
                   flat
                   hide-actions
                   hide-headers
                   style="border-spacing: 0 !important;"
                 >
                   <template
                     slot="items"
                     slot-scope="props"
                     v-if="props.index < 5"
                     style="border-spacing: 0 !important;"
                   >
                     <tr class="td-notice">
                       <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
                       <td>
                         <span class="grey--text caption">{{ date(props.item.created) }}</span>
                         <br />
                         <span class="body-2">{{ props.item.discussionType}}</span>
                       </td>
                       <td class="text-xs-center">
                         <span>
                           <v-tooltip top>
                             <img
                               slot="activator"
                               style="cursor:pointer; width:25px; height:25px; "
                               src="/static/icon/view.png"
                             />
                             <span>View</span>
                           </v-tooltip>
                         </span>
                       </td>
                     </tr>
                   </template>
                 </v-data-table>
               </v-card>
             </v-flex>
             <v-flex xs6>
               <v-card class="mt-2 card">
                 <h4 class="pa-3">
                   <b>Online User</b>
                 </h4>
                 <v-data-table
                   :items="onlineUser"
                   class="elevation-0"
                   flat
                   hide-actions
                   hide-headers
                   style="border-spacing: 0 !important;"
                 >
                   <template
                     slot="items"
                     slot-scope="props"
                     v-if="props.index < 5"
                     style="border-spacing: 0 !important;"
                   >
                     <tr class="td-notice">
                       <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
                       <td>
                         <span class="body-2">{{ props.item.user }}</span>
                       </td>
                       <td class="text-xs-center">
                         <span>
                           <v-tooltip top>
                             <img
                               slot="activator"
                               style="cursor:pointer; width:25px; height:25px; "
                               src="/static/icon/view.png"
                             />
                             <span>View</span>
                           </v-tooltip>
                         </span>
                       </td>
                     </tr>
                   </template>
                 </v-data-table>
               </v-card>
             </v-flex>
           </v-layout>
         </v-container>
       </v-flex>
       <v-spacer></v-spacer>
       <!-- SIDE BAR -->
       <v-flex xs12 sm12 md3>
         <v-card height="100%" class="elevation-0 mt-3 profileDasboard">
           <v-card-text class="px-2">
             <h4 class="text-xs-center py-3">
               <b>Profile</b>
             </h4>
             <v-flex xs12 class="py-3">
               <v-layout wrap>
                 <v-flex xs12 sm12 md4>
                   <img
                     src="/static/icon/user.png"
                     v-if="!userData.profilePicUrl && !userData.schoolLogoUrl"
                     width="80"
                   />
                   <img
                     :src="userData.profilePicUrl"
                     onerror="this.src='/static/icon/user.png';"
                     v-if="userData.profilePicUrl"
                     width="80"
                   />
                   <img
                     :src="userData.schoolLogoUrl"
                     onerror="this.src='/static/icon/user.png';"
                     v-if="userData.schoolLogoUrl"
                     width="80"
                   />
                 </v-flex>
                 <v-flex xs12 sm12 md6>
                   <p class="mb-0 body-1">
                     <i>{{ userData.name }}</i>
                   </p>
                   <p class="mb-0 caption grey--text">{{ userData.email }}</p>
                   <p class="mb-0 caption grey--text">{{ userData.mobile }}</p>
                   <address class="caption grey--text mb-3">{{ userData.address }}</address>
                 </v-flex>
               </v-layout>
             </v-flex>
             <hr />
             <div class="text-xs-center py-3 subheading font-weight-bold">Calender</div>
             <vue-event-calendar :events="activityEvents" @day-changed="handleDayChanged($event)"></vue-event-calendar>
             <!-- LATEST EVENTS -->
             <v-card class="my-3 elevation-0" v-if="role != 'TEACHER'">
-              <v-card-text>
+              <v-card-text v-if="$store.state.role === 'ADMIN' ">
                 <v-card-title class="justify-center subheading font-weight-bold">Latest Events</v-card-title>
                 <div
                   v-for="(activity,index) in activityList"
                   :key="index"
                   class="mt-2"
                   style="cursor: pointer;"
                   @click="seeEventDetails(activity)"
                 >
                   <span
                     :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
                     style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
                   ></span>
                   <div style="display: inline-block;" class="ml-2">
-                    <!-- LATEST EVENTS FOR PARENT -->
+                    <div>
-                    <div v-if="$store.state.role === 'PARENT' ">
-                      <div
-                        class="grey--text lighten-1 caption"
-                        v-if="activity.meetingEvent"
-                      >{{moment(activity.meetingEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
-                      <div
-                        class="body-2"
-                        v-if="activity.meetingEvent"
-                      >{{activity.meetingEvent.title}}</div>
-                    </div>
-                    <!-- LATEST EVENTS FOR TEACHER -->
-                    <div v-if="role == 'TEACHER'">
                       <div
                         class="grey--text lighten-1 caption"
                         v-if="activity.dateOfEvent"
                       >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div>
                       <div class="body-2" v-if="activity.title">{{activity.title}}</div>
                     </div>
                   </div>
                 </div>
                 <div v-if="activityList.length == 0">
                   <p class="text-center title grey lighten-4 error--text">No Data Found!</p>
                 </div>
               </v-card-text>
+              <v-card-text>
+                <!-- <v-card-title class="justify-center subheading font-weight-bold">Latest Events</v-card-title> -->
+                <!-- <div
+                  v-for="(activity,index) in activityList"
+                  :key="index"
+                  class="mt-2"
+                  style="cursor: pointer;"
+                  @click="seeEventDetails(activity)"
+                >
+                  <span
+                    :style="{ 'background-color': colorsArray[index%colorsArray.length] }"
+                    style="height: 12px;width: 12px;border-radius: 50%;display: inline-block;vertical-align: top;"
+                ></span>-->
+                <div style="display: inline-block;" class="ml-2">
+                  <!-- LATEST EVENTS FOR PARENT -->
+                  <div v-if="$store.state.role === 'PARENT' ">
+                    <div
+                      class="grey--text lighten-1 caption"
+                      v-if="activity.meetingEvent"
+                    >{{moment(activity.meetingEvent.dateOfEvent).format("DD MMMM, YYYY")}}</div>
+                    <div class="body-2" v-if="activity.meetingEvent">{{activity.meetingEvent.title}}</div>
+                  </div>
+                  <!-- LATEST EVENTS FOR TEACHER -->
+                  <div v-if="role === 'TEACHER'">
+                    <div
+                      class="grey--text lighten-1 caption"
+                      v-if="activity.dateOfEvent"
+                    >{{moment(activity.dateOfEvent).format("DD MMMM, YYYY")}}</div>
+                    <div class="body-2" v-if="activity.title">{{activity.title}}</div>
+                  </div>
+                </div>
+                <div v-if="activityList.length == 0">
+                  <p class="text-center title grey lighten-4 error--text">No Data Found!</p>
+                </div>
+                <!-- </div> -->
+              </v-card-text>
             </v-card>
           </v-card-text>
         </v-card>
       </v-flex>
     </v-layout>
     <v-dialog v-model="dialog" max-width="500">
       <v-card color="grey lighten-4" flat>
         <v-toolbar dark color="fixcolors">
           <v-spacer></v-spacer>
           <v-btn icon @click="dialog= false">
             <v-icon>close</v-icon>
           </v-btn>
         </v-toolbar>
         <v-flex class="py-4">
           <v-list-tile>
             <v-list-tile-action>
               <v-icon>edit</v-icon>
             </v-list-tile-action>
             <v-list-tile-content>
               <v-list-tile-title>{{ selected.title }}</v-list-tile-title>
             </v-list-tile-content>
           </v-list-tile>
           <v-list-tile>
             <v-list-tile-action>
               <v-icon>access_time</v-icon>
             </v-list-tile-action>
             <v-list-tile-content>
               <v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title>
             </v-list-tile-content>
           </v-list-tile>
         </v-flex>
       </v-card>
     </v-dialog>
   </v-app>
 </template>
 <script>
 import http from "@/Services/http.js";
 import moment from "moment";
 import AllApiCalls from "@/Services/AllApiCalls.js";
 // import { FunctionalCalendar } from "vue-functional-calendar";
 export default {
   components: {
     // FunctionalCalendar
   },
   mixins: [AllApiCalls],
   data() {
     return {
       // data: {
       //   clieckedToday: false
       // },
       // markedDates: ["16/4/2019", "18/4/2019", "20/4/2019", "21/4/2019"],
       // calendarData: {},
       // calendar: {},
       // DIALOG BOX EVENT DETAILS
       viewEventDetails: false,
       // CALENDER
       moment: moment,
       activityEvents: [],
       onlineUser: [
         {
           user: "Student Demo",
         },
         {
           user: "Teacher Demo",
         },
         {
           user: "Priyansh Gupta",
         },
         {
           user: "Gaurav Aggarwal",
         },
         {
           user: "Approve Arorra",
         },
       ],
       showLoader: false,
       calendarData: {},
       dialog: false,
       dialogNotice: false,
       HolidaysList: [],
       EventsList: [],
       events: [],
       config: {
         eventClick: (event) => {
           this.selected = event;
           this.dialog = true;
         },
       },
       selected: {},
       barGraph: [],
       // notice: {},
       userData: {},
       dated: new Date(2018, 0, 9),
       userList: [],
       sectionList: [],
       students: "",
       parents: "",
       teachers: "",
       classes: "",
       noticeData: [],
       expenseData: [],
       feeData: [],
       collectionData: [],
       courseData: [],
       studentsData: [],
       annoucementData: [],
       role: "",
       attrs: [
         {
           key: "today",
           highlight: true,
           dates: new Date(),
         },
       ],
       drawer: true,
       items: [
         { title: "Home", icon: "dashboard" },
         { title: "About", icon: "question_answer" },
       ],
       right: null,
       series: [
         {
           name: "Total",
           data: [],
         },
       ],
       showChart: false,
       chartOptions: {
         chart: {
           type: "bar",
           height: 150,
           stacked: true,
           // animations: {
           //   enabled: true,
           //   easing: "easeinout",
           //   speed: 1200,
           //   animateGradually: {
           //     enabled: true,
           //     delay: 450
           //   },
           //   dynamicAnimation: {
           //     enabled: true,
           //     speed: 450
           //   }
           // }
         },
         plotOptions: {
           bar: {
             horizontal: false,
             columnWidth: "25%",
             // endingShape: "rounded",
             distributed: true,
           },
         },
         responsive: [
           {
             breakpoint: 480,
             options: {
               legend: {
                 position: "bottom",
                 offsetX: -10,
                 offsetY: 0,
               },
             },
           },
         ],
         legend: {
           show: false,
         },
         colors: ["#7852cc", "#f9a825", "#ff8a89"],
         dataLabels: {
           enabled: false,
         },
         stroke: {
           show: true,
           width: 2,
           colors: ["transparent"],
         },
         xaxis: {
           categories: ["Fee", "Collections", "Expences"],
         },
         yaxis: {
           title: {
             text: "",
           },
         },
         fill: {
           opacity: 1,
         },
         tooltip: {
           y: {
             formatter: function (val, opts) {
               return "" + val + " ";
             },
           },
         },
       },
       // LATEST ACTIVITY
       colorsArray: ["#ff8a89", "#71d9ea", "#7852cc", "#F9A825"],
       activityList: [],
     };
   },
   methods: {
     test(e) {
       console.log(" test - ", e);
     },
     async handleDayChanged(e) {
       await this.getParticularMeetingEvent({
         meetingEventId: e.events[0]._id,
       });
       this.viewEventDetails = true;
     },
     async seeEventDetails(activity) {
       if (this.$store.state.role === "TEACHER") {
         await this.getParticularMeetingEvent({ meetingEventId: activity._id });
         this.viewEventDetails = true;
       }
       if (this.$store.state.role === "PARENT") {
         await this.getParticularMeetingEvent({
           meetingEventId: activity.meetingEvent._id,
         });
         this.viewEventDetails = true;
       }
+      if (this.$store.state.role === "ADMIN") {
+        await this.getParticularMeetingEvent({
+          meetingEventId: activity._id,
+        });
+        this.viewEventDetails = true;
+      }
     },
     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");
       }
     },
     closeNotice() {
       this.dialogNotice = false;
     },
     profile() {
       // this.editedIndex = this.desserts.indexOf(item);
       // this.notice = Object.assign({}, item);
       // this.dialogNotice = true;
       this.$router.push("/noticeBoard");
     },
     date: function (date) {
       return moment(date).format("MMMM DD, YYYY  HH:mm");
     },
     activityDate(date) {
       return moment(date).format("MMMM DD, YYYY");
     },
     refreshEvents() {
       this.$refs.calendar.$emit("refetch-events");
     },
     removeEvent() {
       this.$refs.calendar.$emit("remove-event", this.selected);
       this.selected = {};
     },
     eventSelected(event) {
       this.selected = event;
     },
     // eventDropStart: function(event) {
     //   event.editable = false;
     // },
     eventCreated(...test) {
       console.log(test);
     },
     getStudents() {
       http()
         .get("/getStudentsList")
         .then((response) => {
           this.students = response.data.data;
           this.showLoader = false;
         })
         .catch((error) => {
           // console.log("err====>", err);
           this.showLoader = false;
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
           }
         });
     },
     getParents() {
       http()
         .get("/getParentsList")
         .then((response) => {
           this.parents = response.data.data;
           this.showLoader = false;
         })
         .catch((error) => {
           // console.log("err====>", err);
           this.showLoader = false;
         });
     },
     getTeachers() {
       http()
         .get("/getTeachersList")
         .then((response) => {
           this.teachers = response.data.data;
           this.showLoader = false;
         })
         .catch((error) => {
           // console.log("err====>", err);
           this.showLoader = false;
         });
     },
     getClasses() {
       http()
         .get("/getClassesList")
         .then((response) => {
           this.classes = response.data.data;
           this.showLoader = false;
         })
         .catch((error) => {
           this.showLoader = false;
         });
     },
     getNoticeData() {
       this.showLoader = true;
       http()
         .get("/getEventsList")
         .then((response) => {
           this.noticeData = response.data.data;
           this.showLoader = false;
         })
         .catch((error) => {
           this.showLoader = false;
         });
     },
     getUserData() {
       // this.showLoader = true;
       if (this.$store.state.role === "PARENT") {
         http()
           .get("/getParticularUserDetail", {
             params: {
               studentId: localStorage.getItem("parentStudentId"),
             },
           })
           .then((response) => {
             this.userData = response.data.data;
             this.showLoader = false;
           })
           .catch((error) => {
             this.showLoader = false;
           });
       } else {
         http()
           .get("/getParticularUserDetail")
           .then((response) => {
             this.userData = response.data.data;
             this.showLoader = false;
           })
           .catch((error) => {
             this.showLoader = false;
           });
       }
     },
     getFeesAndCollectionsData() {
       http()
         .get("/getTotalFeesAndCollections")
         .then((response) => {
           this.feeData = response.data.data;
           // this.collectionData = response.data.data;
           this.series[0].data[0] = this.feeData.totalFees;
           this.series[0].data[1] = this.feeData.totalCollection;
           this.showLoader = false;
         })
         .catch((error) => {
           this.showLoader = false;
         });
     },
     getExpensesData() {
       http()
         .get("/getTotalExpenses")
         .then((response) => {
           this.expenseData = response.data.data;
           // var array = response.data.data.sum;
           this.series[0].data[2] = this.expenseData.sum;
           this.showChart = true;
           // this.series = [
           //   {
           //     name: "Total",
           //     data: array
           //   }
           // ];
           this.showLoader = false;
         })
         .catch((error) => {
           this.showLoader = false;
         });
     },
     // async getparentStudents() {
     //   this.showLoader = true;
     //   await http()
     //     .get("/parentStudentsList")
     //     .then((response) => {
     //       /* set values in local storage */
     //       this.studentsData = response.data.data.students;
     //       this.showLoader = false;
     //     })
     //     .catch((err) => {
     //       console.log("err====>", err);
     //       this.showLoader = false;
     //     });
     //   await this.getCourses(parentStudentsId, classId);
     //   await this.getAnnoucementes(classId);
     // },
     async getCourses(parentStudentsId, classId) {
       /* getStudentCourses - to get courseData - defined in GetApis.js*/
       await this.getStudentCourses({
         classId: localStorage.getItem("parentClassId"),
         studentId: localStorage.getItem("parentStudentId"),
       });
     },
     getAnnoucementes(classId) {
       this.showLoader = true;
       http()
         .get("/getAnnoucementesList", {
           params: {
             classId: localStorage.getItem("parentClassId"),
           },
         })
         .then((response) => {
           this.annoucementData = response.data.data;
           this.showLoader = false;
         })
         .catch((err) => {
           console.log("err====>", err);
           this.showLoader = false;
         });
     },
     async getMeetingEventes() {
-      if (this.role == "TEACHER") {
+      if (this.role == "TEACHER" || this.role === "ADMIN") {
         this.showLoader = true;
         await http()
           .get("/getMeetingEventesList")
           .then((response) => {
             var activityList = response.data.data;
             this.activityList = activityList;
             this.showLoader = false;
             /* set activityEvents array to highlight event dates in calender */
             for (var i = 0; i < this.activityList.length; i++) {
               let obj = {};
               obj.date = moment(this.activityList[i].dateOfEvent).format(
                 "YYYY/MM/DD"
               );
               obj.title = this.activityList[i].title;
               obj._id = this.activityList[i]._id;
               this.activityEvents.push(obj);
             }
           })
           .catch((error) => {
             this.showLoader = false;
           });
       }
     },
   },
   mounted() {
     //  = this.$store.state.schoolToken;
     // console.log("this.$store.state.role", this.token);
     // this.getUsersList();
   },
   async created() {
     if (this.$store.state.role === "ADMIN") {
       // this.token = this.$store.state.token;
       await this.getFeesAndCollectionsData();
       await this.getExpensesData();
     } else if (this.$store.state.schoolRole === "SUPERADMIN") {
       // this.token = this.$store.state.schoolToken;
       await this.getFeesAndCollectionsData();
       await this.getExpensesData();
     } else if (this.$store.state.role === "TEACHER") {
       // this.token = this.$store.state.token;
     } else if (this.$store.state.role === "ACCOUNTANT") {
       // this.token = this.$store.state.token;
     } else if (this.$store.state.role === "LIBRARIAN") {
       // this.token = this.$store.state.token;
     } else if (this.$store.state.role === "PARENT") {
       // this.token = this.$store.state.token;
       // await this.getparentStudents();
       this.studentsData = this.$store.getters.GET_STUDENTS_DATA;
       console.log("students data - ", this.studentsData);
       await this.getCourses();
       await this.getAnnoucementes();
     }
     this.role = this.$store.state.role;
     await this.getStudents();
     await this.getTeachers();
     await this.getParents();
     await this.getClasses();
     await this.getNoticeData();
     await this.getUserData();
     /* get Latest events list for student login*/
     if (this.$store.state.role == "PARENT") {
       let response = await this.studentMeetingEvents({
         studentId: localStorage.getItem("parentStudentId"),
       });
       this.activityList = response.data.data;
       /* set activityEvents array to highlight event dates in calender */
       for (var i = 0; i < this.activityList.length; i++) {
         let obj = {};
         obj.date = moment(this.activityList[i].meetingEvent.dateOfEvent).format(
           "YYYY/MM/DD"
         );
         obj.title = this.activityList[i].meetingEvent.title;
         obj._id = this.activityList[i].meetingEvent._id;
         this.activityEvents.push(obj);
       }
     }
     /* get Latest events list for teacher login*/
-    if (this.role == "TEACHER") {
+    if (this.role == "TEACHER" || this.role == "ADMIN") {

src/pages/Report/admitCard.vue

Diff comments View file @1e1e364

 <template>
   <v-container fluid class="body-color">
     <!-- **** Admit Card Table **** -->
     <v-card flat class="elevation-0 transparent">
       <v-form ref="form" v-model="valid" lazy-validation>
         <v-flex xs12 sm12 lg12>
           <v-layout wrap>
             <v-flex xs12 sm12 lg3>
               <v-layout>
                 <v-flex xs12 sm12 lg10 class="ml-2">
                   <v-autocomplete
                     v-model="getReport.examId"
                     label="Please Select Exam"
                     :items="examData"
                     item-text="examName"
                     item-value="_id"
                     :rules="examRules"
                     @change="getExamList"
                     required
                   ></v-autocomplete>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12 sm12 lg3 v-if="getReport.examId">
               <v-layout>
                 <v-flex xs12 sm12 lg10 class="ml-2">
                   <v-select
                     v-model="getReport.classId"
                     label="Select your class"
                     type="text"
                     :items="classList"
                     item-text="classNum"
                     item-value="_id"
                     :rules="classRules"
                     @change="getSections(getReport.classId)"
                     required
                   ></v-select>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12 sm12 lg3 v-if="getReport.classId">
               <v-layout>
                 <v-flex xs12 sm12 lg10 class="ml-2">
                   <v-select
                     :items="addSection"
                     label="Select your Section"
                     v-model="getReport.sectionId"
                     item-text="name"
                     item-value="_id"
                     name="Select Section"
                     @change="getStudents"
                     :rules="sectionRules"
                     required
                   ></v-select>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12 sm12 lg3 v-if="getReport.sectionId">
               <v-layout>
                 <v-flex xs12 sm12 lg10 class="ml-2">
                   <v-select
                     :items="getStudentsList"
                     label="Select your student"
                     v-model="getReport.studentId"
                     item-text="name"
                     item-value="_id"
                     :rules="studentRules"
                     required
                   ></v-select>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12 sm12 lg3>
               <v-layout>
                 <v-flex xs12 sm12 lg10 class="ml-2">
                   <v-autocomplete
                     label="Please Select View Type"
                     type="text"
                     :rules="typeRules"
                     :items="typeList"
                     v-model="getReport.form"
                     item-text="name"
                     item-value="value"
                     required
                   ></v-autocomplete>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12 sm12 lg3>
               <v-btn
                 @click="getSchedule"
                 round
                 dark
                 :loading="loading"
                 class="open-dialog-button mt-3"
               >Get Report</v-btn>
             </v-flex>
           </v-layout>
         </v-flex>
       </v-form>
     </v-card>
     <div v-show="showTable">
       <v-flex xs12 sm12 md10 style="margin:auto">
         <v-layout>
           <v-flex xs12>
             <v-btn class="open-dialog-button right" round dark @click="printAdmitReport()">
               Print
               <v-icon right dark>print</v-icon>
             </v-btn>
           </v-flex>
         </v-layout>
         <div id="printMe" v-if="frontPart">
           <v-card
             style="
           background-color: #fff;
           border: 1px solid #ddd;
           color: rgba(0,0,0,0.87);
           overflow-x: auto;
           display: block;
           padding:14px !important;
           webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important;
           box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important;"
           >
             <v-layout style="border-bottom: 1px solid #ddd;margin: 8px; auto">
               <v-flex xs3 style="margin-bottom:0px">
                 <img
                   :src="userData.schoolLogoUrl"
                   style="widht:80px;height:80px;"
                   alt="logo"
                   v-if="userData.schoolLogoUrl"
                 />
                 <img
                   src="/static/default_thumb.png"
                   style="widht:80px;height:80px;"
                   v-else-if="!userData.schoolLogoUrl"
                 />
+                <div class="school-name">
+                  <h3>{{ schoolData.address }}</h3>
+                  <p>{{ schoolData.mobile }}</p>
+                </div>
               </v-flex>
               <v-flex xs5 style="text-align:center;margin-bottom:0px">
                 <p
                   style="font-size:24px;color: #700CE8;letter-spacing:1px;margin-bottom: 4px"
-                >{{ userData.name }}</p>
+                >{{ schoolData.name }}</p>
-                <p>{{ userData.address }} {{ userData.pinCode }}</p>
+                <p>{{ schoolData.email }}</p>
                 <div>
                   <h4>{{ getScheduleList.scheduleData[0].examId.examName }} Exam Admit Card</h4>
                 </div>
               </v-flex>
               <v-flex xs4 style="text-align:center;margin-bottom:0px">
                 <!-- <img
                   v-if="getScheduleList.studentData.profilePicUrl"
                   :src="getScheduleList.studentData.profilePicUrl"
                   style="widht:80px;height:80px;"
                 />
                 <img
                   v-if="!getScheduleList.studentData.profilePicUrl"
                   src="/static/icon/user.png"
                   style="widht:80px;"
                 />-->
                 <img
                   src="/static/icon/user.png"
                   v-if="!getScheduleList.studentData.profilePicUrl"
                   width="80"
                 />
                 <img
                   :src="getScheduleList.studentData.profilePicUrl"
                   onerror="this.src='/static/icon/user.png';"
                   v-if="getScheduleList.studentData.profilePicUrl"
                   width="80"
                 />
               </v-flex>
             </v-layout>
             <v-layout>
               <v-flex xs5 style="margin-bottom:10px">
                 <p style="font-size: 16px;margin:0px;margin-bottom:8px;">
                   <b>Name :</b>
                   <span>{{getScheduleList.studentData.name}}</span>
                 </p>
                 <p style="font-size: 16px;margin:0px;margin-bottom:8px;">
                   <b>Class :</b>
                   <span>{{getScheduleList.studentData.classId.classNum}}</span>
                 </p>
                 <p style="font-size: 16px;margin:0px;margin-bottom:8px;">
                   <b>Roll :</b>
                   <span>{{getScheduleList.studentData.rollNo}}</span>
                 </p>
               </v-flex>
               <v-flex xs5 style="margin-bottom:10px">
                 <p style="font-size: 16px;margin:0px;margin-bottom:8px;">
                   <b>Section :</b>
                   <span>{{getScheduleList.studentData.sectionId.name }}</span>
                 </p>
                 <p style="font-size: 16px;margin:0px;margin-bottom:8px;">
                   <b>Blood Group :</b>
                   <span style="color: #707478">{{getScheduleList.studentData.bloodGroup }}</span>
                 </p>
                 <p style="font-size: 16px;margin:0px;margin-bottom:8px;">Subject in which Appearing</p>
               </v-flex>
             </v-layout>
             <table
               class="mb-5 tableRsponsive feeTypeTable"
               style="border: 1px solid lightgrey;
                   border-collapse: collapse;!important
                   table-layout: auto !important;
                   width: 100% !important;"
             >
               <thead style="border: 1px solid lightgrey !important;">
                 <tr style="border: 1px solid lightgrey !important;padding:4px;">
                   <td style="border: 1px solid lightgrey !important;padding: 6px;">No</td>
                   <td style="border: 1px solid lightgrey !important;padding: 6px;">Exam Date</td>
                   <td style="border: 1px solid lightgrey !important;padding: 6px;">Start Time</td>
                   <td style="border: 1px solid lightgrey !important;padding: 6px;">End Time</td>
                   <td style="border: 1px solid lightgrey !important;padding: 6px;">Subject Name</td>
                 </tr>
               </thead>
               <tbody style="border: 1px solid lightgrey !important;">
                 <tr v-for="(scheduleData,i) in getScheduleList.scheduleData" :key="i">
                   <td style="border:1px solid lightgrey !important; padding:6px;">{{ i + 1 }}</td>
                   <td
                     style="border: 1px solid lightgrey !important;padding: 6px;"
                   >{{ scheduleData.date ? scheduleData.date : '-' }}</td>
                   <td
                     style="border: 1px solid lightgrey !important;padding: 6px;"
                   >{{ scheduleData.timeFrom ? scheduleData.timeFrom : "-" }}</td>
                   <td
                     style="border: 1px solid lightgrey !important;padding: 6px;"
                   >{{ scheduleData.timeTo ? scheduleData.timeTo : "-"}}</td>
                   <td
                     style="border: 1px solid lightgrey !important;padding: 6px;"
                   >{{ scheduleData.subjectName ? scheduleData.subjectName : "-" }}</td>
                 </tr>
                 <tr v-if="getScheduleList.scheduleData.length === 0">
                   <td style="border: 1px soild lightgrey !importand;padding:6px;">-</td>
                   <td style="border: 1px solid lightgrey !important;padding: 6px;">-</td>
                   <td style="border: 1px solid lightgrey !important;padding: 6px;">-</td>
                   <td style="border: 1px solid lightgrey !important;padding: 6px;">-</td>
                   <td style="border: 1px solid lightgrey !important;padding: 6px;">-</td>
                 </tr>
               </tbody>
             </table>
           </v-card>
         </div>
         <div id="printMe" v-if="backPart">
           <v-card
             style="
            text-align:center
            background-color: #fff;
            border: 1px solid #ddd;
            color: rgba(0,0,0,0.87);
            overflow-x: auto;
            display: block;
            padding:14px !important;
            webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important;
            box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important;"
           >
             <div
               style="
              margin-bottom: 16px;
              overflow: hidden;
              padding: 50px 90px;"
             >
               <ol style="
                margin: 0;
                margin-bottom: 10px;">
                 <p
                   style="
                margin-bottom: 16px;
                line-height: 20px;
                text-align: left;"
                 >
                   <b>1. Do not Carry these Electronic Gadgets:</b>
                   Electronic gadgets(Bluetooth devices,head phones,pen/buttonhole cameras,scanner,calculator,storage devices etc)
                   in the examination lab. These items are strictly prohibited from examination lab.
                 </p>
                 <p
                   style="
                margin-bottom: 16px;
                line-height: 20px;
                text-align: left;"
                 >
                   <b>2. Do not Carry these Ornaments:</b>
                   Candidates should also not wear charms,veil,items containing such as rings,bracelet,earings,nose-pin,chains,
                   necklace,pendants,badge,broach,hair-pin,hair-band.
                 </p>
                 <p
                   style="
                margin-bottom: 16px;
                line-height: 20px;
                text-align: left;"
                 >
                   <b>3. What Candidates wear to Examination hall:</b>
                   Candidates should not wear clothes with full sleeves or big button,etc. Candidates are adviced to wear open footwear
                   like slippers,sandals instead of shoes as the candidates could be asked to remove shoes by the frisking staff.
                 </p>
                 <p
                   style="
               margin-bottom: 16px;
                line-height: 20px;
                text-align: left;"
                 >
                   <b>4. Do not carry Stationary:</b>
                   Pen/pencil and paper for rough work would be provided in examination lab. Electronic watch (timer)will be available
                   on the computer screen alloted to the candidates.
                 </p>
                 <p
                   style="
               margin-bottom: 16px;
                line-height: 20px;
                text-align: left;"
                 >
                   <b>5. Do not Carry Bags:</b>
                   Don not Carry back pack, College bag or any other bag like hand bag. If candidates brings any bag, they must make a
                   arrangement for safe custody of these items.The Commission shall not make any arrangement nor be responsible for the
                   safe custody of such items.
                 </p>
                 <p
                   style="
               margin-bottom: 16px;
                line-height: 20px;
                text-align: left;"
                 >
                   <b>6. What will Happen if you carry Prohibited items to Exam Hall:</b>
                   If any such prohibited item is found in the possession of a candidate in examination lab, his/her candidature is liable
                   to be canceled and legal/criminal proceedings could be initiated against him/her. He/she would also liable to be debarred
                   from appearing in future examinations of the Commission for a period of 3 years.
                 </p>
                 <p
                   style="
               margin-bottom: 16px;
                line-height: 20px;
                text-align: left;
                "
                 >
                   <b>7. Candidate should not create Disturbance in Exam Hall:</b>
                   If any candidate is found obstructing the conduct of examination or creating disturbances at the examination venue,
                   his/her candidature shall be summarily canceled.
                 </p>
               </ol>
             </div>
           </v-card>
         </div>
       </v-flex>
     </div>
     <v-snackbar
       :timeout="timeout"
       :top="y === 'top'"
       :right="x === 'right'"
       :vertical="mode === 'vertical'"
       v-model="snackbar"
       :color="color"
     >{{ text }}</v-snackbar>
     <div class="loader" v-if="showLoader">
       <v-progress-circular indeterminate color="white"></v-progress-circular>
     </div>
   </v-container>
 </template>
 <script>
 import http from "@/Services/http.js";
 import moment from "moment";
 import _ from "underscore";
+var qs = require("qs");
 export default {
   data: () => ({
     snackbar: false,
     color: "",
     y: "top",
     x: "right",
     mode: "",
     timeout: 10000,
     text: "",
     showLoader: false,
     valid: true,
     userData: {},
     frontPart: false,
     backPart: false,
     loading: false,
     showTable: false,
     showData: false,
     hideprintAdmitReport: false,
     examRules: [(v) => !!v || "Exam Field is required"],
     classRules: [(v) => !!v || "Class Field Required"],
     sectionRules: [(v) => !!v || "Section Field is required"],
     studentRules: [(v) => !!v || "Student Field is required"],
     typeRules: [(v) => !!v || "Type Field is required"],
     backgroundRules: [(v) => !!v || "Background Field is required"],
     pagination: {
       rowsPerPage: 10,
     },
     search: "",
     classList: [],
     studentData: {},
     scheduleData: {},
     examData: [],
     addSection: [],
-    getStudentsList: [],
+    getStudentsList: [{ name: "Select All", _id: "selectAll" }],
     getScheduleList: [],
     getScheduleListArray: [],
     getReport: {},
     examName: [],
     typeList: [
       {
         name: "Front Part",
         value: "frontPart",
       },
       {
         name: "Back Part",
         value: "backPart",
       },
     ],
     backgroundList: ["Yes", "No"],
     headers: [
       {
         text: "No",
         align: "",
         sortable: false,
         value: "No",
       },
       {
         text: "Exam Date",
         align: "center",
         sortable: false,
         value: "date",
       },
       {
         text: "Start Time",
         align: "center",
         sortable: false,
         value: "timeFrom",
       },
       {
         text: "End Time",
         align: "center",
         sortable: false,
         value: "timeTo",
       },
       {
         text: "Subject Name",
         align: "center",
         sortable: false,
         value: "subjectName",
       },
     ],
   }),
   mounted() {
     this.token = this.$store.state.token;
     this.getClass();
     this.getExamList();
     this.getUserData();
   },
   methods: {
     getExamList() {
       this.showLoader = true;
       this.loadingSearch = true;
       http()
         .get("/getExamsList", {
           headers: { Authorization: "Bearer " + this.token },
         })
         .then((response) => {
           this.examData = response.data.data;
           this.showLoader = false;
           this.loadingSearch = false;
         })
         .catch((error) => {
           this.showLoader = false;
           this.loadingSearch = false;
           this.snackbar = true;
           this.text = error.response.data.message;
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
           }
         });
     },
     getClass() {
       this.showLoader = true;
       http()
         .get("/getClassesList", {
           headers: { Authorization: "Bearer " + this.token },
         })
         .then((response) => {
           this.classList = response.data.data;
           this.showLoader = false;
         })
         .catch((error) => {
           this.showLoader = false;
           // console.log("err====>", err);
         });
     },
     getSections(_id) {
       this.showLoader = true;
       http()
         .get(
           "/getSectionsList",
           { params: { classId: _id } },
           {
             headers: { Authorization: "Bearer " + this.token },
           }
         )
         .then((response) => {
           this.addSection = response.data.data;
           this.showLoader = false;
         })
         .catch((err) => {
           this.showLoader = false;
           // console.log("err====>", err);
         });
     },
     getStudents() {
       this.showLoader = true;
       http()
         .get("/getStudentWithClass", {
           params: {
             classId: this.getReport.classId,
             sectionId: this.getReport.sectionId,
           },
         })
         .then((response) => {
-          this.getStudentsList = response.data.data;
+          for (var i = 0; i < response.data.data.length; i++) {
+            this.getStudentsList.push(response.data.data[i]);
+          }
           this.showLoader = false;
         })
         .catch((error) => {
           console.log("err====>", error);
           this.showLoader = false;
         });
     },
     getSchedule() {
       if (this.$refs.form.validate()) {
         this.showLoader = true;
+        let studentId = [];
+        if (this.getReport.studentId == "selectAll") {
+          studentId = [];
+          for (var i = 1; i < this.getStudentsList.length; i++) {
+            studentId.push(this.getStudentsList[i]._id);
+          }
+        } else {
+          studentId = this.getReport.studentId;
+        }
+        console.log("this.getReport.studentId - ", studentId);
         http()
           .get("/getScheduleForParticularStudent", {
             params: {
               examId: this.getReport.examId,
               classId: this.getReport.classId,
               sectionId: this.getReport.sectionId,
-              studentId: this.getReport.studentId,
+              studentId: studentId,
+            },
+            paramsSerializer: (params) => {
+              return qs.stringify(params);
             },
           })
           .then((response) => {
             this.showTable = true;
             this.getScheduleList = response.data.data;
+            this.schoolData = response.data.data.studentData.schoolId;
             if (response.data.data.scheduleData.length === 0) {
               this.showLoader = false;
               this.snackbar = true;
               this.text = "Data not found!";
               this.color = "error";
               return;
             }
             this.showData = true;
             if (this.getReport.form === "frontPart") {
               this.frontPart = true;
               this.backPart = false;
             }
             if (this.getReport.form === "backPart") {
               this.frontPart = false;
               this.backPart = true;
             }
             this.showLoader = false;
           })
           .catch((error) => {
             this.showLoader = false;
           });
       }
     },
     printAdmitReport() {
       // Pass the element id here
       this.$htmlToPaper("printMe");
     },
     getUserData() {
       http()
         .get("/getParticularUserDetail")
         .then((response) => {
           this.userData = response.data.data;
         })
         .catch((error) => {
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
           }
         });
     },
     // created() {
     //     this.$root.$on("app:search", search => {
     //     this.search = search;
     //     });
     // },
     // beforeDestroy() {
     //     // dont forget to remove the listener
     //     this.$root.$off("app:search");
     // }
   },
 };
 </script>
 <style>
 .admincardreport {
   border: 1px solid #ddd;
   overflow: hidden;
   padding: 20px 50px;
   /* margin-bottom: 10px;
   min-height: 443px; */
 }
 .line {
   border-bottom: 1px solid #ddd;
   overflow: hidden;
   padding-bottom: 10px;
   vertical-align: middle;
   /* margin-bottom: 4px; */
 }
 .school-logo {
   float: left;
 }
 .student-logo {
   position: absolute;
   top: 221px;
   right: 221px;
 }
 .school-name {
   box-sizing: border-box;
   align-items: center;
 }
 /* .student-info {
   float: left;
   width: max-content;
   text-align: initial;
 } */
 .student-info {
   width: 50%;
   float: left;
   text-align: initial;
 }
 .student-info p {
   width: 50%;
   float: left;
   margin-bottom: 1px;
   padding: 0 0px;
   font-size: 12px;
 }
 .admitcardreportbackend ol {
   margin: 0;
   margin-bottom: 10px;
 }
 .admitcardreportbackend p {
   line-height: 20px;
   text-align: left;
 }
 </style>

src/pages/Report/progressCardReport.vue

Diff comments View file @1e1e364

 <template>
   <v-container fluid class="body-color">
     <!-- ******  Progress Card Report Table****** -->
     <v-card flat class="elevation-0 transparent">
       <v-form ref="form" v-model="valid" lazy-validation>
         <v-flex xs12 sm12 lg12>
           <v-layout wrap>
             <v-flex xs12 sm12 lg3>
               <v-layout>
                 <v-flex xs3 sm3 lg2 class="subheading mt-4">
                   <label class="right">Class:</label>
                 </v-flex>
                 <v-flex xs9 sm6 lg8 class="ml-2">
                   <v-select
                     v-model="getReport.classId"
                     label="Select your class"
                     type="text"
                     :items="classList"
                     item-text="classNum"
                     item-value="_id"
                     :rules="classRules"
                     @change="getSections(getReport.classId)"
                     required
                   ></v-select>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12 sm12 lg3>
               <v-layout>
                 <v-flex xs3 sm3 lg2 class="subheading mt-4">
                   <label class="right">Section:</label>
                 </v-flex>
                 <v-flex xs9 sm6 lg8 class="ml-2">
                   <v-select
                     :items="addSection"
                     label="Select your Section"
                     v-model="getReport.sectionId"
                     item-text="name"
                     item-value="_id"
                     name="Select Section"
                     @change="getStudents"
                     :rules="sectionRules"
                     required
                   ></v-select>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12 sm12 lg3>
               <v-layout>
                 <v-flex xs3 sm3 lg2 class="subheading mt-4">
                   <label class="right">Student:</label>
                 </v-flex>
                 <v-flex xs9 sm6 lg8 class="ml-2">
                   <v-select
                     :items="getStudentsList"
                     label="Select your student"
                     v-model="getReport.studentId"
                     item-text="name"
                     item-value="_id"
                     :rules="studentRules"
                     required
                   ></v-select>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12 sm12 lg3>
               <v-btn
                 style="margin: auto;
                 display: block;"
                 @click="getMarkReportList"
                 round
                 dark
                 :loading="loading"
                 class="open-dialog-button mt-3"
               >Get Report</v-btn>
             </v-flex>
           </v-layout>
         </v-flex>
       </v-form>
     </v-card>
     <v-layout v-show="showReport">
       <v-flex xs12>
         <v-card class="transparent elevation-0">
           <v-container grid-list-md class="report">
             <v-flex xs12 sm12>
               <v-layout wrap>
                 <!-- ****** TABLE DATA MARK  ****** -->
                 <v-flex xs12 sm12 md12>
                   <v-layout>
                     <v-flex xs12>
                       <v-btn
                         class="open-dialog-button"
                         :loading="printLoader"
                         round
                         dark
                         @click="printProgressReport()"
                       >
                         Print
                         <v-icon right dark>print</v-icon>
                       </v-btn>
                     </v-flex>
                   </v-layout>
                   <div id="printMe">
                     <card class="elevation-0" v-for="(value, id, Index) in filterData" :key="Index">
                       <v-card
                         class="ma-3"
                         style="
                         border: 1px solid lightgrey;
                         margin-bottom:0px;
                         padding: 0px"
                       >
                         <div style="border: 1px solid lightgray;">
                           <v-layout>
                             <v-flex xs12 sm12 md12>
                               <div
                                 style="
                               border-bottom: 1px solid #ddd;
                               overflow: hidden;
                               vertical-align: middle;
                               margin: 10px;
                               padding-bottom: 0px;"
                               >
                                 <!-- <v-flex xs12 sm12 md12> -->
                                 <v-layout>
                                   <div class="school-logo">
                                     <img
                                       :src="userData.schoolLogoUrl"
                                       v-if="userData.schoolLogoUrl"
                                       style="width:40px !important;height:40px !important; float: left;"
                                     />
                                     <img
                                       src="/static/schoolIcons/INTRACK_White.png"
                                       v-else-if="!userData.schoolLogoUrl"
                                       style="width:40px !important;height:40px !important; float: left;"
                                     />
                                   </div>
                                   <div class="school-name">
-                                    <h3>{{ userData.name }}</h3>
+                                    <h3>{{ schoolData.name }}</h3>
                                   </div>
                                 </v-layout>
                                 <!-- </v-flex> -->
                               </div>
                               <!-- Profile School -->
                               <v-flex xs12 sm12 md12 lg12 style="margin:0px 0px; ">
                                 <v-layout>
                                   <div
                                     style="flex-basis: 40%;
                                       -webkit-box-flex: 0;
                                       -ms-flex-positive: 0;
                                       flex-grow: 0;
                                       max-width: 40%;"
                                   >
                                     <div
                                       style="padding: 4px;
                                     padding-left: 16px !important;"
                                     >
                                       <p
                                         style="font-size:20px;margin-bottom: 0px;"
-                                      >{{ userData.name }}</p>
+                                      >{{ schoolData.name }}</p>
                                       <p
                                         style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
-                                      >{{ userData.address }}</p>
+                                      >{{ schoolData.address }}</p>
                                       <p
                                         style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
-                                      >Phone : {{ userData.mobile }}</p>
+                                      >Phone : {{ schoolData.mobile }}</p>
                                       <p
                                         style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
-                                      >Email : {{ userData.email }}</p>
+                                      >Email : {{ schoolData.email }}</p>
                                     </div>
                                   </div>
                                   <!-- Profile Student Report Card-->
                                   <div
                                     style="flex-basis: 40%;
                                       -webkit-box-flex: 0;
                                       -ms-flex-positive: 0;
                                       flex-grow: 0;
                                       max-width: 40%;"
                                   >
                                     <div v-for="(studentMark,i,index) in value" :key="index">
                                       <p
                                         v-if="index == 0"
                                         style="font-size:20px;margin-bottom: 0px;"
                                       >{{ studentMark[0].studentId.name }}</p>
                                       <p
                                         v-if="index == 0"
                                         style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
                                       >
                                         Class :
                                         <b>{{ studentMark[0].classId.classNum }}</b>
                                       </p>
                                       <p
                                         v-if="index == 0"
                                         style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
                                       >
                                         Section :
                                         <b>{{ studentMark[0].sectionId.name }}</b>
                                       </p>
                                       <p
                                         v-if="index == 0"
                                         style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
                                       >
                                         Roll NO :
                                         <b>{{ studentMark[0].studentId.rollNo }}</b>
                                       </p>
                                     </div>
                                   </div>
                                   <div
                                     style="
                                         -ms-flex-preferred-size: 20%;
                                         flex-basis: 20%;
                                         -webkit-box-flex: 0;
                                         -ms-flex-positive: 0;
                                         flex-grow: 0;
                                         max-width: 20%;"
                                   >
                                     <div v-for="(studentMark,i,index) in value" :key="index">
                                       <div
                                         style="padding-top:16px"
                                         v-if="index == 0"
                                         class="hidden-sm-only hidden-xs-only"
                                       >
                                         <img
                                           src="/static/icon/user.png"
                                           v-if="!studentMark[0].studentId.profilePicUrl"
                                           style="width:60px;height:60px;"
                                         />
                                         <img
                                           :src="studentMark[0].studentId.profilePicUrl"
                                           v-else-if="studentMark[0].studentId.profilePicUrl"
                                           style="width:60px;height:60px;"
                                         />
                                       </div>
                                     </div>
                                   </div>
                                 </v-layout>
                               </v-flex>
                             </v-flex>
                           </v-layout>
                           <v-card
                             v-for="studentMarks in value"
                             :key="studentMarks"
                             style="
                            background-color: #fff;
                            border-color: #fff;
                            color: rgba(0,0,0,0.87);
                            overflow-x: auto;
                            display: block;
                            webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important;
                            box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important;"
                           >
                             <table
                               v-for="(studentMark,key) in studentMarks"
                               :key="key"
                               class="tableRsponsive feeTypeTable subheading"
                               style="border: 1px solid black;
                              border-collapse: collapse;!important
                              table-layout: auto !important;
                              width: 100% !important;
                              overflow: hidden;"
                             >
                               <thead
                                 style="border: 1px solid transparent !important"
                                 v-if="key == 0"
                               >
                                 <tr style="border: 1px solid transparent !important">
                                   <td
                                     colspan="4"
                                     style="text-align: inherit !important;
                                     border-right: inherit;
                                     border-top: inherit;
                                     padding:14px;"
                                   >{{studentMark.examId.examName}}</td>
                                 </tr>
                                 <tr style="border: 1px solid lightgrey !important;padding:4px;">
                                   <td
                                     rowspan="2"
                                     style="border: 1px solid lightgrey !important;padding: 0px;"
                                   >Subject</td>
                                   <template>
                                     <td
                                       v-for="(studentMarkData,i) in studentMark.studentsMarks"
                                       :key="i"
                                       colspan="2"
                                       style="border: 1px solid lightgrey !important;padding: 0px;"
                                     >{{studentMarkData.markDistributionId.distributionType}}</td>
                                     <td
                                       style="border: 1px solid lightgrey !important;padding: 0px;"
                                     >Total Marks</td>
                                   </template>
                                 </tr>
                                 <tr style="border: 1px solid lightgrey !important;">
                                   <template v-for="(exam, ind) in studentMark.studentsMarks">
                                     <td
                                       :key="ind"
                                       style="border: 1px solid lightgrey !important;padding: 0px;"
                                     >Marks</td>
                                     <td
                                       :key="ind"
                                       style="border: 1px solid lightgrey !important;padding: 0px;"
                                     >Highest Marks</td>
                                   </template>
                                 </tr>
                               </thead>
                               <tbody
                                 style="border: 1px solid lightgrey !important;"
                                 v-if="key == 0"
                               >
                                 <tr v-for="studentMark in studentMarks" :key="studentMark">
                                   <td
                                     style="border: 1px solid lightgrey !important;padding: 0px;"
                                   >{{studentMark.subjectName}}</td>
                                   <template v-for="(exam, index) in  studentMark.studentsMarks">
                                     <td
                                       :key="index"
                                       style="border: 1px solid lightgrey !important;padding: 0px;"
                                     >{{exam.marksScored}}</td>
                                     <td
                                       :key="index"
                                       style="border: 1px solid lightgrey !important;padding: 0px;"
                                     >{{exam.markDistributionId.markValue}}</td>
                                   </template>
                                   <td
                                     style="border: 1px solid lightgrey !important;padding: 0px;"
                                   >{{studentMark.totalMarks}}</td>
                                 </tr>
                               </tbody>
                               <tfoot v-if="key == studentMarks.length - 1">
                                 <tr style="border: 1px solid lightgrey !important;">
                                   <td
                                     colspan="5"
                                     class="subheding"
                                     style="
                                     border: 1px solid #e2e7eb;
                                     text-align:center
                                     padding: 0px;"
                                   >Total Marks</td>
                                   <td
                                     colspan="7"
                                     style="border: 1px solid lightgrey !important;padding: 0px;"
                                   >{{ studentMark.allSubjectTotalMarks }}</td>
                                 </tr>
                                 <tr>
                                   <td
                                     colspan="5"
                                     class="subheding"
                                     style="
                                     border: 1px solid #e2e7eb;
                                     text-align:center
                                     padding: 0px;"
                                   >Grade</td>
                                   <td
                                     colspan="7"
                                     style="border: 1px solid lightgrey !important;padding: 0px;"
                                   >{{ studentMark.grade ? studentMark.grade : "-" }}</td>
                                 </tr>
                                 <tr>
                                   <td
                                     colspan="5"
                                     style="
                                      border: 1px solid #e2e7eb;
                                     text-align:center
                                     padding: 0px;"
                                     class="subheding"
                                   >Average Mark</td>
                                   <td
                                     colspan="7"
                                     style="border: 1px solid lightgrey !important;padding: 0px;"
                                   >-</td>
                                 </tr>
                                 <tr>
                                   <td
                                     colspan="5"
                                     style="
                                     border: 1px solid #e2e7eb;
                                     text-align:center
                                     padding: 0px; !important;
                                     font-size: 16px !important;"
                                     class="subheding"
                                   >GPA</td>
                                   <td
                                     colspan="7"
                                     style="border: 1px solid lightgrey !important;padding: 0px !important;font-size: 16px !important;"
                                   >-</td>
                                 </tr>
                               </tfoot>
                             </table>
                           </v-card>
                         </div>
                       </v-card>
                       <p style="page-break-after: always;">&nbsp;</p>
                     </card>
                   </div>
                 </v-flex>
               </v-layout>
             </v-flex>
           </v-container>
         </v-card>
       </v-flex>
     </v-layout>
     <div class="loader" v-if="showLoader">
       <v-progress-circular indeterminate color="white"></v-progress-circular>
     </div>
   </v-container>
 </template>
 <script>
 import http from "@/Services/http.js";
 import moment from "moment";
 import _ from "underscore";
 export default {
   data: () => ({
     showLoader: false,
     cardData: [],
     token: "",
     markDistributions: [],
     markParticularDistributionData: [],
     loading: false,
     valid: true,
     loading: false,
     showReport: false,
     printLoader: false,
     addSection: [],
     filterData: [],
     getStudentsList: [],
-    classRules: [v => !!v || "Class is required"],
+    classRules: [(v) => !!v || "Class is required"],
-    sectionRules: [v => !!v || "Class is required"],
+    sectionRules: [(v) => !!v || "Class is required"],
-    studentRules: [v => !!v || "Student is required"],
+    studentRules: [(v) => !!v || "Student is required"],
     getReport: {},
     classList: [],
     output: null,
     userData: {},
     newData: [],
     gradeAPlus: "A+",
     gradeA: "A",
     gradeBPlus: "B+",
     gradeB: "B",
     gradeCPlus: "C+",
     gradeC: "C",
-    totalMarks: ""
+    totalMarks: "",
   }),
   mounted() {
     this.token = this.$store.state.token;
     this.getClass();
     this.getUserData();
   },
   methods: {
     clear() {
       this.$refs.form.reset();
     },
     getClass() {
       this.showLoader = true;
       http()
         .get("/getClassesList", {
-          headers: { Authorization: "Bearer " + this.token }
+          headers: { Authorization: "Bearer " + this.token },
         })
-        .then(response => {
+        .then((response) => {
           this.classList = response.data.data;
           this.showLoader = false;
         })
-        .catch(error => {
+        .catch((error) => {
           this.showLoader = false;
           // console.log("err====>", err);
         });
     },
     getSections(_id) {
       this.showLoader = true;
       http()
         .get(
           "/getSectionsList",
           { params: { classId: _id } },
           {
-            headers: { Authorization: "Bearer " + this.token }
+            headers: { Authorization: "Bearer " + this.token },
           }
         )
-        .then(response => {
+        .then((response) => {
           this.addSection = response.data.data;
           this.showLoader = false;
         })
-        .catch(err => {
+        .catch((err) => {
           this.showLoader = false;
           // console.log("err====>", err);
         });
     },
     getStudents() {
       this.showLoader = true;
       http()
         .get("/getStudentWithClass", {
           params: {
             classId: this.getReport.classId,
-            sectionId: this.getReport.sectionId
+            sectionId: this.getReport.sectionId,
-          }
+          },
         })
-        .then(response => {
+        .then((response) => {
           response.data.data.unshift({
             name: "Select All",
-            _id: "Select All"
+            _id: "Select All",
           });
           this.getStudentsList = response.data.data;
           this.showLoader = false;
         })
-        .catch(error => {
+        .catch((error) => {
           console.log("err====>", error);
           this.showLoader = false;
         });
     },
     getMarkReportList() {
       this.showLoader = true;
       this.showReport = true;
       var getSelectMarks = {};
       if (this.getReport.studentId == "Select All") {
         getSelectMarks = {
           classId: this.getReport.classId,
-          sectionId: this.getReport.sectionId
+          sectionId: this.getReport.sectionId,
         };
       } else if (this.getReport.studentId != "Select All") {
         getSelectMarks = {
           classId: this.getReport.classId,
           sectionId: this.getReport.sectionId,
-          studentId: this.getReport.studentId
+          studentId: this.getReport.studentId,
         };
       }
       http()
         .get("/getParticularMark", {
           params: getSelectMarks,
-          headers: { Authorization: "Bearer " + this.token }
+          headers: { Authorization: "Bearer " + this.token },
         })
-        .then(response => {
+        .then((response) => {
+          console.log("===response===", response.data.data[0].schoolId);
           this.cardData = response.data.data;
+          this.schoolData = response.data.data[0].schoolId;
           let newData = response.data.data;
           for (var i = 0; i < newData.length; i++) {
             newData[i].examination = newData[i].examId._id;
             newData[i].studentsId = newData[i].studentId._id;
           }
           var studentMarkArray = [];
           studentMarkArray = _.groupBy(newData, ["studentsId"]);
           for (let data in studentMarkArray) {
             studentMarkArray[data] = _.groupBy(studentMarkArray[data], [
-              "examination"
+              "examination",
             ]);
           }
           this.filterData = studentMarkArray;
           for (let data in this.filterData) {
             for (let item in this.filterData[data]) {
               var allSubjectTotalMarks = 0;
               for (let i = 0; i < this.filterData[data][item].length; i++) {
                 var totalMarks = 0;
                 for (
                   let j = 0;
                   j < studentMarkArray[data][item][i].studentsMarks.length;
                   j++
                 ) {
                   totalMarks +=
                     studentMarkArray[data][item][i].studentsMarks[j]
                       .marksScored;
                 }
                 this.filterData[data][item][i].totalMarks = totalMarks;
                 allSubjectTotalMarks += this.filterData[data][item][i]
                   .totalMarks;
                 this.filterData[data][item][
                   i
                 ].allSubjectTotalMarks = allSubjectTotalMarks;
               }
               // this.totalMarks = totalMarks;
               if (totalMarks > 90) {
                 this.filterData[data][item].grade = this.gradeAPlus;
               } else if (totalMarks > 80 && totalMarks < 90) {
                 this.filterData[data][item].grade = this.gradeA;
               } else if (totalMarks > 70 && totalMarks < 80) {
                 this.filterData[data][item].grade = this.gradeBPlus;
               } else if (totalMarks > 60 && totalMarks < 70) {
                 this.filterData[data][item].grade = this.gradeB;
               } else if (totalMarks > 50 && totalMarks < 60) {
                 this.filterData[data][item].grade = this.gradeCPlus;
               } else if (totalMarks > 40 && totalMarks < 50) {
                 this.filterData[data][item].grade = this.gradeC;
               }
             }
           }
           // console.log("this.filterData-----------last", this.filterData);
           this.showLoader = false;
         })
-        .catch(error => {
+        .catch((error) => {
           // console.log("err====>", err);
           this.showLoader = false;
           this.snackbar = true;
           // this.text = error.response.data.message;
           // if (error.response.status === 401) {
           //   this.$router.replace({ path: "/" });
           //   this.$store.dispatch("setToken", null);
           //   this.$store.dispatch("Id", null);
           // }
         });
     },
     printProgressReport() {
       this.printLoader = true;
       setTimeout(() => {
         // Pass the element id here
         this.$htmlToPaper("printMe");
         this.printLoader = false;
       }, 4000);
     },
     getUserData() {
       http()
         .get("/getParticularUserDetail")
-        .then(response => {
+        .then((response) => {
           this.userData = response.data.data;
         })
-        .catch(error => {
+        .catch((error) => {
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
           }
         });
-    }
+    },
-  }
+  },
 };
 </script>
 <style scoped>
 table {
   border-collapse: collapse;
   border: 1px solid #e2e7eb;
 }
 th,
 td {
   border: 1px solid #e2e7eb;
   padding: 0px;
   text-align: center;
 }
 table.feeTypeTable {
   table-layout: auto !important;
   width: 100% !important;
 }
 .bg-sky {
   background-color: #98b2cc !important;
 }
 .bg-sky-light {
   background-color: #89a0b8;
 }
 .bg-purple {
   background-color: #9583ac;
 }
 .bg-skyDark {
   background-color: #956785;
 }
 /* .report {
   overflow: hidden;
   max-width: 794px;
   margin: 0px auto;
   margin-bottom: 10px;
   padding: 30px;
 } */
 .line {
   border-bottom: 1px solid #ddd;
   overflow: hidden;
   padding-bottom: 10px;
   vertical-align: middle;
   margin-bottom: 4px;
 }
 .school-logo {
   float: left;
 }
 .school-name {
   box-sizing: border-box;
 }
 .school-info {
   width: 100%;
   overflow: hidden;
 }
 .school-address {
   float: left;
   width: 40%;
 }
 .student-data {
   float: right;
   width: 40%;
 }
 .student-info {
   float: left;
 }
 @media screen and (max-width: 380px) {
   .tableRsponsive {
     /* display: block; */
     position: relative;
     overflow: scroll;
   }
 }
 </style> s

src/pages/School/appVersion.vue

Diff comments View file @1e1e364

File was created	1	<template>
	2	<v-container fluid class="body-color">
	3	<!-- SHOW TABLE -->
	4	<v-data-table :headers="headers" :items="versionList">
	5	<template slot="items" slot-scope="props">
	6	<tr class="tr">
	7	<td class="text-xs-center td td-row">{{ props.index + 1}}</td>
	8	<td class="text-xs-center td td-row">{{ props.item.androidAppVersion}}</td>
	9	<td class="text-xs-center td td-row">{{ props.item.iosAppVersion}}</td>
	10	<td class="text-xs-center td td-row">
	11	<span>
	12	<v-tooltip top>
	13	<img
	14	slot="activator"
	15	style="cursor:pointer; width:20px; height:18px; "
	16	@click="editAppVersion(props.item)"
	17	src="/static/icon/edit.png"
	18	class="mr-3"
	19	/>
	20	<span>Edit</span>
	21	</v-tooltip>
	22	</span>
	23	</td>
	24	</tr>
	25	</template>
	26	</v-data-table>
	27
	28	<!-- EDIT VERSION DILAOG -->
	29	<v-dialog v-model="editVerionDilaog" max-width="600px" scrollable>
	30	<v-card flat class="card-style pa-2" dark>
	31	<v-layout>
	32	<v-flex xs12>
	33	<label class="title text-xs-center">Edit Version</label>
	34	<v-icon size="24" class="right" @click="editVerionDilaog = false">cancel</v-icon>
	35	</v-flex>
	36	</v-layout>
	37	<v-card-text class="hidden-xs-only hidden-sm-only">
	38	<v-form ref="editAppVersionForm" v-model="validEditVersion" lazy-validation>
	39	<v-flex xs12>
	40	<v-layout>
	41	<v-flex xs3 sm4 class="pt-4 subheading">
	42	<label class="right">App Version:</label>
	43	</v-flex>
	44	<v-flex xs8 sm6 class="ml-3">
	45	<v-text-field
	46	placeholder="fill app version"
	47	v-model="editedItem.androidAppVersion"
	48	required
	49	></v-text-field>
	50	</v-flex>
	51	</v-layout>
	52	</v-flex>
	53	<v-flex xs12>
	54	<v-layout>
	55	<v-flex xs3 sm4 class="pt-4 subheading">
	56	<label class="right">IOS Version:</label>
	57	</v-flex>
	58	<v-flex xs8 sm6 class="ml-3">
	59	<v-text-field
	60	placeholder="fill ios version"
	61	v-model="editedItem.iosAppVersion"
	62	required
	63	></v-text-field>
	64	</v-flex>
	65	</v-layout>
	66	</v-flex>
	67	<v-layout>
	68	<v-flex xs12 sm12>
	69	<v-card-actions>
	70	<v-spacer></v-spacer>
	71	<v-btn round dark @click="update" class="add-button">Update</v-btn>
	72	<v-spacer></v-spacer>
	73	</v-card-actions>
	74	</v-flex>
	75	</v-layout>
	76	</v-form>
	77	</v-card-text>
	78	</v-card>
	79	</v-dialog>
	80
	81	<div class="loader" v-if="showLoader">
	82	<v-progress-circular indeterminate color="white"></v-progress-circular>
	83	</div>
	84	<v-snackbar
	85	:timeout="timeout"
	86	:top="y === 'top'"
	87	:right="x === 'right'"
	88	:vertical="mode === 'vertical'"
	89	v-model="snackbar"
	90	color="success"
	91	>{{ text }}</v-snackbar>
	92	</v-container>
	93	</template>
	94
	95	<script>
	96	import http from "@/Services/http.js";
	97	import Util from "@/util";
	98	import moment from "moment";
	99
	100	export default {
	101	data: () => ({
	102	//SNACKBAR
	103	snackbar: false,
	104	y: "top",
	105	x: "right",
	106	color: "",
	107	mode: "",
	108	timeout: 3000,
	109	text: "",
	110
	111	headers: [
	112	{
	113	text: "No",
	114	align: "center",
	115	sortable: false,
	116	value: "No",
	117	},
	118	{
	119	text: "Android App Version",
	120	value: "",
	121	sortable: false,
	122	align: "center",
	123	},
	124	{
	125	text: "IOS App Version",
	126	value: "",
	127	sortable: false,
	128	align: "center",
	129	},
	130	{ text: "Action", value: "", sortable: false, align: "center" },
	131	],
	132	versionList: [],
	133	editedItem: {
	134	androidAppVersion: "",
	135	iosAppVersion: "",
	136	},
	137
	138	editVerionDilaog: false,
	139	validEditVersion: true,
	140	showLoader: false,
	141	}),
	142
	143	methods: {
	144	editAppVersion(item) {
	145	this.editedIndex = this.versionList.indexOf(item);
	146	this.editedItem = Object.assign({}, item);
	147	this.editVerionDilaog = true;
	148	},
	149	getAppVersion() {
	150	http()
	151	.get("getAppVersion", {
	152	headers: {
	153	Authorization: "Bearer " + this.schoolToken,
	154	},
	155	})
	156	.then((response) => {
	157	this.versionList = [response.data.data];
	158	})
	159	.catch((error) => {
	160	this.showLoader = false;
	161	this.snackbar = true;
	162	this.color = "error";
	163	this.text = error.response.data.message;
	164	});
	165	},
	166	update() {
	167	if (this.$refs.editAppVersionForm.validate()) {
	168	let editVersion = {
	169	appVersionId: this.editedItem._id,
	170	androidAppVersion: this.editedItem.androidAppVersion,
	171	iosAppVersion: this.editedItem.iosAppVersion,
	172	};
	173	http()
	174	.put("/updateAppVersion", editVersion, {
	175	headers: { Authorization: "Bearer " + this.schoolToken },
	176	})
	177	.then((response) => {
	178	this.snackbar = true;
	179	this.color = "success";
	180	this.text = response.data.message;
	181	this.getAppVersion();
	182	this.editVerionDilaog = false;
	183	})
	184	.catch((error) => {
	185	this.snackbar = true;
	186	this.color = "error";
	187	this.text = error.response.data.message;
	188	});
	189	}
	190	},
	191	},
	192
	193	mounted() {
	194	this.getAppVersion();
	195	this.role = this.$store.state.role;
	196	this.token = this.$store.state.token;
	197	this.schoolToken = this.$store.state.schoolToken;
	198	},
	199	};
	200	</script>

src/pages/School/school.vue

Diff comments View file @1e1e364

 <template>
   <div>
     <v-tabs grow slider-color="gray">
       <v-tab
         ripple
         @click="activeTab('existing')"
         v-bind:class="{ active: isActive }"
         id="tab"
         class="subheading"
       >Existing School</v-tab>
       <v-tab
         ripple
         @click="activeTab('new')"
         v-bind:class="{ active: newActive }"
         id="tab1"
         User
         class="subheading"
       >Add New School</v-tab>
       <!-- ****** EDITS  STUDENTS DETAILS ****** -->
       <v-tab-item>
         <v-snackbar
           :timeout="timeout"
           :top="y === 'top'"
           :right="x === 'right'"
           :vertical="mode === 'vertical'"
           v-model="snackbar"
           color="success"
         >{{ text }}</v-snackbar>
         <v-dialog v-model="dialog" max-width="1500px" scrollable>
           <v-card flat>
-            <v-toolbar color="grey lighten-2" flat>
+            <v-toolbar dark class="card-styles" flat>
               <v-spacer></v-spacer>
               <v-toolbar-title>
                 <h3>Edit School</h3>
               </v-toolbar-title>
               <v-spacer></v-spacer>
+              <v-icon size="24" class="right" @click="dialog = false">cancel</v-icon>
             </v-toolbar>
             <v-card-text style="height: 686px;">
               <v-form ref="form">
                 <v-container fluid>
                   <v-layout>
                     <v-flex
                       xs12
                       class="text-xs-center text-sm-center text-md-center text-lg-center"
                     >
                       <v-avatar size="160px">
                         <img
                           src="/static/icon/user.png"
                           v-if="!editedItem.schoolLogoUrl && !imageUrl"
                         />
                         <img
                           :src="editedItem.schoolLogoUrl"
                           v-else-if="editedItem.schoolLogoUrl && !imageUrl"
                         />
                         <img
                           v-if="imageUrl"
                           :src="imageUrl"
                           height="150"
                           style="border-radius:50%; width:200px"
                         />
                       </v-avatar>
                       <input
                         type="file"
                         style="display: none"
                         ref="image"
                         accept="image/*"
                         @change="onFilePicked"
                       />
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right hidden-xs-only hidden-sm-only">Full Name:</label>
                           <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field v-model="editedItem.name" placeholder="fill your full Name"></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right hidden-xs-only hidden-sm-only">Email ID:</label>
                           <label class="right hidden-lg-only hidden-md-only hidden-xl-only">EmailID:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field placeholder="fill your email" v-model="editedItem.email"></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right">Society Name:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             placeholder="fill your Society Name"
                             v-model="editedItem.societyName"
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right">City:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field v-model="editedItem.city" placeholder="fill your City Name"></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right">State:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             v-model="editedItem.state"
                             placeholder="fill your City Name"
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right">Pincode:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             v-model="editedItem.pinCode"
                             placeholder="fill your pincode"
                             type="number"
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right">Fax No:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field v-model="editedItem.faxNo" placeholder="fill your fax No"></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right">Country:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             v-model="editedItem.country"
                             placeholder="fill your Country"
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>
                           <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             v-model="editedItem.mobile"
                             placeholder="fill your MobileNo"
                             name="mobileNo"
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right hidden-xs-only hidden-sm-only">LandLine No:</label>
                           <label
                             class="right hidden-lg-only hidden-md-only hidden-xl-only"
                           >LandLineNo:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             v-model="editedItem.landLineNo"
                             placeholder="fill your LandLine No"
                             type="number"
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right hidden-xs-only hidden-sm-only">Registration No:</label>
                           <label
                             class="right hidden-lg-only hidden-md-only hidden-xl-only"
                           >Registration-No:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             v-model="editedItem.registrationNo"
                             placeholder="fill your Registration No"
                             type="number"
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
                           <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             label="Select Image"
                             @click="pickFile"
                             v-model="imageName"
                             append-icon="attach_file"
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right hidden-xs-only hidden-sm-only">School Details:</label>
                           <label
                             class="right hidden-lg-only hidden-md-only hidden-xl-only"
                           >SchoolDetail:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             v-model="editedItem.schoolDetails"
                             placeholder="fill your School Details"
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right hidden-xs-only hidden-sm-only">Academic Year:</label>
                           <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Year:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             v-model="editedItem.establishmentYear"
                             placeholder="fill your Academic Year"
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right hidden-xs-only hidden-sm-only">Web Site Url:</label>
                           <label
                             class="right hidden-lg-only hidden-md-only hidden-xl-only"
                           >WebSiteUrl:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             v-model="editedItem.websiteUrl"
                             placeholder="fill your MobileNo"
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right">Address:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             v-model="editedItem.address"
                             placeholder="Select your Address"
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs12 sm12>
                       <v-layout>
                         <v-flex xs6>
-                          <v-btn round dark @click.native="close">Cancel</v-btn>
+                          <v-btn round dark @click.native="close" class="clear-button">Cancel</v-btn>
                         </v-flex>
                         <v-flex xs6>
-                          <v-btn @click="save" round dark :loading="loading" class="right">Save</v-btn>
+                          <v-btn
+                            @click="save"
+                            round
+                            dark
+                            :loading="loading"
+                            class="right add-button"
+                          >Save</v-btn>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                   </v-layout>
                 </v-container>
               </v-form>
             </v-card-text>
           </v-card>
         </v-dialog>
         <v-snackbar
           :timeout="timeout"
           :top="y === 'top'"
           :right="x === 'right'"
           :vertical="mode === 'vertical'"
           v-model="snackbar"
           color="success"
         >{{ text }}</v-snackbar>
         <!-- ****** EXISTING-USERS STUDENTS TABLE ****** -->
         <v-data-table
           :headers="headers"
           :items="schoolList"
           :pagination.sync="pagination"
           :search="search"
         >
           <template slot="items" slot-scope="props">
             <tr class="tr">
               <td class="td td-row text-xs-center">{{ props.index + 1}}</td>
               <td class="td td-row text-xs-center">
                 <v-avatar>
                   <img :src="props.item.schoolLogoUrl" v-if="props.item.schoolLogoUrl" />
                   <img src="/static/icon/user.png" v-else-if="!props.item.schoolLogoUrl" />
                 </v-avatar>
               </td>
               <td class="td td-row text-xs-center">{{ props.item.name}}</td>
               <td class="td td-row text-xs-center">{{ props.item.email }}</td>
               <td class="td td-row text-xs-center">{{ props.item.city }}</td>
               <td class="td td-row text-xs-center">{{ props.item.state }}</td>
               <td class="td td-row text-xs-center">{{ props.item.mobile}}</td>
               <td class="td td-row text-xs-center">
                 <v-switch
                   class="pl-3"
                   v-model="props.item.status"
                   @change="suspendSchoolStatus(props.item.status,props.item._id)"
                 ></v-switch>
               </td>
               <td class="td td-row text-xs-center">
                 <span>
                   <!-- <router-link :to="{ name:'viewSchoolDashboard',params: { schoolId:props.item._id } }"> -->
                   <v-tooltip top>
                     <img
                       slot="activator"
                       style="cursor:pointer; width:25px; height:18px; "
                       class="mr5"
                       src="/static/icon/eye1.png"
                       @click="adminAccess(props.item)"
                     />
                     <span>View</span>
                   </v-tooltip>
                   <!-- </router-link> -->
                   <v-tooltip top>
                     <img
                       slot="activator"
                       style="cursor:pointer; width:20px; height:18px; "
                       class="mr5"
                       @click="editItem(props.item)"
                       src="/static/icon/edit1.png"
                     />
                     <span>Edit</span>
                   </v-tooltip>
                 </span>
               </td>
             </tr>
           </template>
           <v-alert
             slot="no-results"
             :value="true"
             color="error"
             icon="warning"
           >Your search for "{{ search }}" found no results.</v-alert>
         </v-data-table>
       </v-tab-item>
       <!-- ****** ADD STUDENTS DETAILS****** -->
       <v-tab-item>
         <v-container fluid>
           <v-layout align-center justify-center fill-height>
             <v-flex xs12 sm12 md10 lg11>
               <!-- <v-container fluid> -->
               <v-snackbar
                 :timeout="timeout"
                 :top="y === 'top'"
                 :right="x === 'right'"
                 :vertical="mode === 'vertical'"
                 v-model="snackbar"
                 color="success"
               >{{ text }}</v-snackbar>
               <v-flex xs12 sm12>
                 <v-form ref="form" v-model="valid" lazy-validation>
                   <v-layout>
                     <v-flex
                       xs12
                       class="text-xs-center text-sm-center text-md-center text-lg-center"
                     >
                       <v-avatar size="100px">
                         <img src="/static/icon/user.png" v-if="!imageUrl" />
                       </v-avatar>
                       <input
                         type="file"
                         style="display: none"
                         ref="image"
                         accept="image/*"
                         @change="onFilePicked"
                       />
                       <img
                         :src="imageData.imageUrl"
                         height="150"
                         v-if="imageUrl"
                         style="border-radius:50%; width:200px"
                       />
                     </v-flex>
                   </v-layout>
                   <v-layout wrap>
                     <v-flex xs12 sm6>
                       <v-layout>
                         <v-flex xs4 sm4 class="pt-4 subheading">
                           <label class="right hidden-xs-only hidden-sm-only">Full Name:</label>
                           <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label>
                         </v-flex>
                         <v-flex xs8 sm8 class="ml-3">
                           <v-text-field
                             v-model="addSchool.name"
                             placeholder="fill your full Name"
                             name="name"
                             type="text"
                             :rules="nameRules"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                     <v-flex xs12 sm6>
                       <v-layout>
                         <v-flex xs4 sm4 class="pt-4 subheading">
                           <label class="right">Email ID:</label>
                         </v-flex>
                         <v-flex xs8 sm8 class="ml-3">
                           <v-text-field
                             placeholder="fill your email"
                             :rules="emailRules"
                             v-model="addSchool.email"
                             type="text"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                   </v-layout>
                   <v-layout wrap>
                     <v-flex xs12 sm6>
                       <v-layout>
                         <v-flex xs4 sm4 class="pt-4 subheading">
                           <label class="right hidden-sm-only hidden-xs-only">Society Name:</label>
                           <label
                             class="right hidden-lg-only hidden-xl-only hidden-md-only"
                           >SocietyName:</label>
                         </v-flex>
                         <v-flex xs8 sm8 class="ml-3">
                           <v-text-field
                             v-model="addSchool.societyName"
                             placeholder="fill your Society Name"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                     <v-flex xs12 sm6>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right">City:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             v-model="addSchool.city"
                             placeholder="fill your City Name"
                             name="City"
                             type="text"
                             :rules="cityRules"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                   </v-layout>
                   <v-layout wrap>
                     <v-flex xs12 sm6>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right">State:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             v-model="addSchool.state"
                             placeholder="fill your State Name"
                             name="state"
                             type="text"
                             :rules="stateRules"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                     <v-flex xs12 sm6>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right">Pincode:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             v-model="addSchool.pinCode"
                             placeholder="fill your pincode"
                             name="pincode"
                             type="number"
                             :rules="pincode"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                   </v-layout>
                   <v-layout wrap>
                     <v-flex xs12 sm6>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right">Fax No:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field v-model="addSchool.faxNo" label="fill your Fax No" required></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                     <v-flex xs12 sm6>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right hidden-xs-only hidden-sm-only">Country:</label>
                           <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-autocomplete
                             v-model="addSchool.country"
                             :items="countries"
                             :rules="country"
                             placeholder="Select Country Name"
                             required
                           ></v-autocomplete>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                   </v-layout>
                   <v-layout wrap>
                     <v-flex xs12 sm6>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>
                           <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             v-model="addSchool.mobile"
                             placeholder="fill your Mobile No"
                             name="mobileNo"
                             type="number"
                             :rules="mobileNoRules"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                     <v-flex xs12 sm6>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right hidden-xs-only hidden-sm-only">LandLine No:</label>
                           <label
                             class="right hidden-lg-only hidden-md-only hidden-xl-only"
                           >LandLineNo:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             v-model="addSchool.landLineNo"
                             :items="countries"
                             placeholder="fill your LandLine No"
                             type="number"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                   </v-layout>
                   <v-layout wrap>
                     <v-flex xs12 sm6>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right hidden-xs-only hidden-sm-only">Registration No:</label>
                           <label
                             class="right hidden-lg-only hidden-md-only hidden-xl-only"
                           >Registration-No:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             v-model="addSchool.registrationNo"
                             placeholder="Fill your Registration No"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                     <v-flex xs12 sm6>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right hidden-xs-only hidden-sm-only">School Details:</label>
                           <label
                             class="right hidden-lg-only hidden-md-only hidden-xl-only"
                           >SchoolDetails:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             v-model="addSchool.schoolDetails"
                             placeholder="Fill your School Details"
                             :rules="schoolDetailRule"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                   </v-layout>
                   <v-layout wrap>
                     <v-flex xs12 sm6>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
                           <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             label="Select Image"
                             @click="pickFile"
                             v-model="imageName"
                             append-icon="attach_file"
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                     <v-flex xs12 sm6>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right hidden-xs-only hidden-sm-only">Academic Year:</label>
                           <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Year:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             v-model="addSchool.establishmentYear"
                             placeholder="fill your Academic Year"
                             :rules="establishmentYearRules"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                   </v-layout>
                   <v-layout wrap>
                     <v-flex xs12 sm6>
                       <v-layout>
                         <v-flex xs4 sm4 class="pt-4 subheading">
                           <label class="right hidden-xs-only hidden-sm-only">WebSite Url:</label>
                           <label
                             class="right hidden-lg-only hidden-md-only hidden-xl-only"
                           >WebSiteUrl:</label>
                         </v-flex>
                         <v-flex xs8 sm8 class="ml-3">
                           <v-text-field
                             name="input-4-3"
                             v-model="addSchool.websiteUrl"
                             placeholder="fill Your WebSite Url"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                     <v-flex xs12 sm6>
                       <v-layout>
                         <v-flex xs4 sm4 class="pt-4 subheading">
                           <label class="right">Address:</label>
                         </v-flex>
                         <v-flex xs8 sm8 class="ml-3">
                           <v-text-field
                             name="input-4-3"
                             v-model="addSchool.address"
                             :rules="presentAddress"
                             placeholder="fill Your Address"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs12 sm11 offset-md1>
                       <v-layout>
                         <v-flex xs6>
-                          <v-btn round dark @click="clear()">Clear</v-btn>
+                          <v-btn round dark @click="clear()" class="clear-button">Clear</v-btn>
                         </v-flex>
                         <v-flex xs6>
-                          <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn>
+                          <v-btn
+                            @click="submit"
+                            round
+                            dark
+                            :loading="loading"
+                            class="right add-button"
+                          >Add</v-btn>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                   </v-layout>
                 </v-form>
               </v-flex>
             </v-flex>
           </v-layout>
         </v-container>
       </v-tab-item>
     </v-tabs>
     <div class="loader" v-if="showLoader">
       <v-progress-circular indeterminate color="white"></v-progress-circular>
     </div>
   </div>
 </template>
 <script>
 import http from "@/Services/http.js";
 import moment from "moment";
 import countryList from "@/script/country.js";
 export default {
   data: () => ({
     e2: 0,
     snackbar: false,
     y: "top",
     x: "right",
     mode: "",
     timeout: 3000,
     text: "",
     showLoader: false,
     loading: false,
     date: null,
     search: "",
     menu: false,
     menu1: false,
     dialog: false,
     valid: true,
     isActive: true,
     newActive: false,
     pagination: {
-      rowsPerPage: 15
+      rowsPerPage: 15,
     },
     imageData: {},
     imageName: "",
     imageUrl: "",
     imageFile: "",
-    nameRules: [v => !!v || "Full Name is required"],
+    nameRules: [(v) => !!v || "Full Name is required"],
-    dateRules: [v => !!v || "DOB is required"],
+    dateRules: [(v) => !!v || "DOB is required"],
-    cityRules: [v => !!v || "City Name is required"],
+    cityRules: [(v) => !!v || "City Name is required"],
-    pincode: [v => !!v || " Pincode is required"],
+    pincode: [(v) => !!v || " Pincode is required"],
-    country: [v => !!v || " Country Name is required"],
+    country: [(v) => !!v || " Country Name is required"],
-    permanentAddress: [v => !!v || " Permanent Address is requiclearred"],
+    permanentAddress: [(v) => !!v || " Permanent Address is requiclearred"],
-    presentAddress: [v => !!v || " Present Address  is required"],
+    presentAddress: [(v) => !!v || " Present Address  is required"],
-    mobileNoRules: [v => !!v || "Mobile Number is required"],
+    mobileNoRules: [(v) => !!v || "Mobile Number is required"],
-    stateRules: [v => !!v || "State Name is required"],
+    stateRules: [(v) => !!v || "State Name is required"],
-    schoolDetailRule: [v => !!v || "school Detail is required"],
+    schoolDetailRule: [(v) => !!v || "school Detail is required"],
-    sectionRules: [v => !!v || " Section Name is required"],
+    sectionRules: [(v) => !!v || " Section Name is required"],
-    genderRules: [v => !!v || " Select Gender is required"],
+    genderRules: [(v) => !!v || " Select Gender is required"],
-    establishmentYearRules: [v => !!v || " Academic Year  is required"],
+    establishmentYearRules: [(v) => !!v || " Academic Year  is required"],
     errorMessages: "",
     emailRules: [
-      v => !!v || "E-mail is required",
+      (v) => !!v || "E-mail is required",
-      v =>
+      (v) =>
         /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
-        "E-mail must be valid"
+        "E-mail must be valid",
     ],
     countries: [],
     headers: [
       {
         text: "No.",
         align: "center",
         sortable: false,
-        value: "rollNo"
+        value: "rollNo",
       },
       {
         text: "school Logo",
         value: "schoolLogoUrl",
         sortable: false,
-        align: "center"
+        align: "center",
       },
       { text: "Name", value: "name", sortable: false, align: "center" },
       { text: "Email", value: "email", sortable: false, align: "center" },
       { text: "City", value: "city", sortable: false, align: "center" },
       {
         text: "State",
         value: "state",
         sortable: false,
-        align: "center"
+        align: "center",
       },
       {
         text: "Mobile",
         value: "mobile",
         sortable: false,
-        align: "center"
+        align: "center",
       },
-      { text: "Action", value: "", sortable: false, align: "center" }
+      { text: "Action", value: "", sortable: false, align: "center" },
     ],
     schoolList: [],
     editedIndex: -1,
     addSchool: {
-      role: "ADMIN"
+      role: "ADMIN",
     },
     editedItem: {},
-    schoolToken: {}
+    schoolToken: {},
   }),
   methods: {
     getSchool() {
       this.showLoader = true;
       http()
         .get("/getSchoolList", {
-          headers: { Authorization: "Bearer " + this.$store.state.schoolToken }
+          headers: { Authorization: "Bearer " + this.$store.state.schoolToken },
         })
-        .then(response => {
+        .then((response) => {
           this.schoolList = response.data.data;
           this.showLoader = false;
         })
-        .catch(error => {
+        .catch((error) => {
           this.showLoader = false;
           // if (error.response.status === 401) {
           //   this.$router.replace({ path: "/" });
           //   this.$store.dispatch("setToken", null);
           //   this.$store.dispatch("Id", null);
           //   this.$store.dispatch("Role", null);
           // }
         });
     },
     pickFile() {
       this.$refs.image.click();
     },
-    dates: function(date) {
+    dates: function (date) {
       return moment(date).format("MMMM DD, YYYY");
     },
     onFilePicked(e) {
       // console.log(e)
       const files = e.target.files;
       this.imageData.upload = e.target.files[0];
       if (files[0] !== undefined) {
         this.imageName = files[0].name;
         if (this.imageName.lastIndexOf(".") <= 0) {
           return;
         }
         const fr = new FileReader();
         fr.readAsDataURL(files[0]);
         fr.addEventListener("load", () => {
           this.imageUrl = fr.result;
           this.imageFile = files[0]; // this is an image file that can be sent to server...
           this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
         });
       } else {
         this.imageName = "";
         this.imageFile = "";
         this.imageUrl = "";
       }
     },
     editItem(item) {
       this.editedIndex = this.schoolList.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.dialog = true;
     },
     activeTab(type) {
       switch (type) {
         case "existing":
           this.newActive = false;
           this.isActive = true;
           break;
         default:
           this.newActive = true;
           this.isActive = false;
           break;
       }
     },
     close() {
       this.dialog = false;
       setTimeout(() => {
         this.editedItem = Object.assign({}, this.defaultItem);
         this.editedIndex = -1;
       }, 300);
     },
     submit() {
       if (this.$refs.form.validate()) {
         if (this.imageUrl) {
           var str = this.imageUrl;
           const [baseUrl, imageUrl] = str.split(/,/);
           this.addSchool.upload = imageUrl;
         }
         this.loading = true;
         http()
           .post("/createSchool", this.addSchool, {
-            headers: { Authorization: "Bearer " + this.schoolToken }
+            headers: { Authorization: "Bearer " + this.schoolToken },
           })
-          .then(response => {
+          .then((response) => {
             this.snackbar = true;
             this.text = "New School added successfully";
             this.clear();
             this.getSchool();
             this.loading = false;
           })
-          .catch(error => {
+          .catch((error) => {
             this.snackbar = true;
             this.text = error.response.data.message;
             this.loading = false;
           });
       }
     },
     clear() {
       this.$refs.form.reset();
       this.imageUrl = "";
     },
     save() {
       if (this.imageUrl) {
         var str = this.imageUrl;
         const [baseUrl, imageUrl] = str.split(/,/);
         this.editedItem.upload = imageUrl;
       }
       this.editedItem.schoolId = this.editedItem._id;
       http()
         .put("/updateSchool", this.editedItem, {
-          headers: { Authorization: "Bearer " + this.schoolToken }
+          headers: { Authorization: "Bearer " + this.schoolToken },
         })
-        .then(response => {
+        .then((response) => {
           this.snackbar = true;
           this.text = "Successfully School Existing User";
           this.imageUrl = "";
           this.getSchool();
           this.close();
         })
-        .catch(error => {
+        .catch((error) => {
           // console.log(error);
           if ((this.snackbar = true)) {
             this.text = error.response.data.statusText;
           }
         });
     },
     adminAccess(data) {
       // console.log("dataaaaaaaaaaaaaa", data);
       this.showLoader = true;
       http()
         .get("/getAdminAccess", {
           params: { schoolId: data._id },
-          headers: { Authorization: "Bearer " + this.schoolToken }
+          headers: { Authorization: "Bearer " + this.schoolToken },
         })
-        .then(response => {
+        .then((response) => {
           this.$store.dispatch("setToken", response.data.data.token);
           this.$store.dispatch("Id", response.data.data.id);
           this.$store.dispatch("Role", response.data.data.role);
           this.$router.push("/dashboard");
           setTimeout(() => {
             location.reload();
           }, 1000);
           // let routeData = this.$router.resolve({
           //   name: "dashboardAdmin"
           // });
           // window.open(routeData.href, "_blank");
           this.showLoader = false;
         })
-        .catch(error => {
+        .catch((error) => {
           this.showLoader = false;
         });
     },
     suspendSchoolStatus(suspendStatus, id) {
       let suspendStatusData = {
         schoolId: id,
-        status: suspendStatus
+        status: suspendStatus,
       };
       http()
         .put("/suspendSchoolAccount", suspendStatusData, {
-          headers: { Authorization: "Bearer " + this.schoolToken }
+          headers: { Authorization: "Bearer " + this.schoolToken },
         })
-        .then(response => {
+        .then((response) => {
           this.getSchool();
           this.text = response.data.message;
           this.snackbar = true;
         })
-        .catch(error => {
+        .catch((error) => {
           // console.log(error.response.data.data);
           this.snackbar = true;
           this.text = error.response.data.message;
         });
-    }
+    },
   },
   mounted() {
     const getCountryList = countryList();
     this.countries = getCountryList;
     this.token = this.$store.state.token;
     this.schoolToken = this.$store.state.schoolToken;
     this.getSchool();
   },
   created() {
-    this.$root.$on("app:search", search => {
+    this.$root.$on("app:search", (search) => {
       this.search = search;
     });
   },
   beforeDestroy() {
     // dont forget to remove the listener
     this.$root.$off("app:search");
-  }
+  },
 };
 </script>
 <style scoped>
 .active {
   background-color: gray;
   color: white !important;
 }
 .activebtn {
   color: black !important;
 }
 </style>

src/pages/User/user.vue

Diff comments View file @1e1e364

 <template>
   <v-container fluid class="body-color">
     <!-- ****** EDIT USERS DETAILS ****** -->
     <v-dialog v-model="editUserDialog" max-width="1100px" scrollable>
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit User</label>
             <v-icon size="24" class="right" @click="editUserDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-card-text>
           <v-layout>
             <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4">
               <v-avatar size="120px">
                 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl && !imageUrl" />
                 <img
                   :src="editedItem.profilePicUrl"
                   v-else-if="editedItem.profilePicUrl && !imageUrl"
                 />
                 <img
                   v-if="imageUrl"
                   :src="imageUrl"
                   height="150"
                   style="border-radius:50%; width:150px"
                 />
               </v-avatar>
               <input
                 type="file"
                 style="display:none"
                 ref="image"
                 accept="image/*"
                 @change="onFilePicked"
               />
             </v-flex>
           </v-layout>
           <v-layout wrap>
             <v-flex xs12 sm6>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Name:</label>
                 </v-flex>
                 <v-flex xs8 class="ml-3">
                   <v-text-field
                     v-model="editedItem.name"
                     placeholder="fill your Name"
                     name="name"
                     type="text"
                     required
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12 sm6>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Email ID:</label>
                 </v-flex>
                 <v-flex xs8 class="ml-3">
                   <v-text-field
                     placeholder="fill your email"
                     v-model="editedItem.email"
                     type="text"
                     name="email"
                     required
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
           </v-layout>
           <v-layout wrap>
             <v-flex xs12 sm6>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>
                   <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label>
                 </v-flex>
                 <v-flex xs8 class="ml-3">
                   <v-menu
                     ref="menu"
                     :close-on-content-click="false"
                     v-model="menu2"
                     :nudge-right="40"
                     lazy
                     transition="scale-transition"
                     offset-y
                     full-width
                     min-width="290px"
                   >
                     <v-text-field
                       slot="activator"
                       v-model="editedItem.dob"
                       placeholder="Select date"
                     ></v-text-field>
                     <v-date-picker
                       ref="picker"
                       v-model="editedItem.dob"
                       :max="new Date().toISOString().substr(0, 10)"
                       min="1950-01-01"
                       @input="menu2 = false"
                     ></v-date-picker>
                   </v-menu>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12 sm6>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Gender:</label>
                 </v-flex>
                 <v-flex xs8 class="ml-3">
                   <v-select
                     :items="gender"
                     v-model="editedItem.gender"
                     label="Select gender"
                     name="gender"
                     required
                   ></v-select>
                 </v-flex>
               </v-layout>
             </v-flex>
           </v-layout>
           <v-layout wrap>
             <v-flex xs12 sm6>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Religion:</label>
                 </v-flex>
                 <v-flex xs8 class="ml-3">
                   <v-text-field
                     v-model="editedItem.religion"
                     placeholder="fill your Religion"
                     name="religion"
                     type="text"
                     required
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12 sm6>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">JoiningDate:</label>
                 </v-flex>
                 <v-flex xs8 class="ml-3">
                   <v-menu
                     ref="menu"
                     :close-on-content-click="false"
                     v-model="menu3"
                     :nudge-right="40"
                     lazy
                     transition="scale-transition"
                     offset-y
                     full-width
                     min-width="290px"
                   >
                     <v-text-field
                       slot="activator"
                       v-model="editedItem.joiningDate"
                       placeholder="Select date"
                     ></v-text-field>
                     <v-date-picker
                       ref="picker"
                       v-model="editedItem.joiningDate"
                       :max="new Date().toISOString().substr(0, 10)"
                       min="1950-01-01"
                       @input="menu3 = false"
                     ></v-date-picker>
                   </v-menu>
                 </v-flex>
               </v-layout>
             </v-flex>
           </v-layout>
           <v-layout wrap>
             <v-flex xs12 sm6>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Phone:</label>
                 </v-flex>
                 <v-flex xs8 class="ml-3">
                   <v-text-field
                     v-model="editedItem.phone"
                     placeholder="fill your MobileNo"
                     name="mobileNo"
                     type="number"
                     required
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12 sm6>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right hidden-sm-only hidden-xs-only">Select Role:</label>
                   <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Role:</label>
                 </v-flex>
                 <v-flex xs8 class="ml-3">
                   <v-autocomplete
                     v-model="editedItem.role"
                     :label="editedItem.role"
                     :items="userRole"
                     item-text="name"
                     item-value="role"
                     required
                   ></v-autocomplete>
                 </v-flex>
               </v-layout>
             </v-flex>
           </v-layout>
           <v-layout wrap>
             <v-flex xs12 sm6>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right hidden-sm-only hidden-xs-only">Uplaod Image:</label>
                   <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Uplaod:</label>
                 </v-flex>
                 <v-flex xs8 class="ml-3">
                   <v-text-field
                     label="Select Image"
                     @click="pickFile"
                     v-model="imageName"
                     append-icon="attach_file"
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12 sm6>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Address:</label>
                 </v-flex>
                 <v-flex xs8 class="ml-3">
                   <v-text-field
                     name="input-4-3"
                     v-model="editedItem.address"
                     placeholder="fill Your  Address"
                     required
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
           </v-layout>
           <v-layout>
             <v-flex xs12 sm12>
               <v-card-actions class="hidden-sm-only hidden-xs-only">
                 <v-spacer></v-spacer>
                 <v-btn round dark :loading="loading" @click="save" class="add-button">Save</v-btn>
               </v-card-actions>
               <v-card-actions class="hidden-lg-only hidden-xl-only hidden-md-only">
                 <v-spacer></v-spacer>
                 <v-btn round dark :loading="loading" @click="save" class="add-button">Save</v-btn>
                 <v-spacer></v-spacer>
               </v-card-actions>
             </v-flex>
           </v-layout>
         </v-card-text>
       </v-card>
     </v-dialog>
     <!-- ****** PROFILE User DETAILS ******  -->
     <v-dialog v-model="viewUserDialog" max-width="560px" scrollable>
       <v-card flat class="card-style pa-3" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View User</label>
             <v-icon size="24" class="right" @click="viewUserDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-card-text>
           <v-container grid-list-md>
             <v-layout wrap>
               <v-flex>
                 <v-flex align-center justify-center layout text-xs-center>
                   <v-avatar size="100px">
                     <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" />
                     <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" />
                   </v-avatar>
                 </v-flex>
                 <v-layout>
                   <v-flex xs4 sm6>
                     <h5 class="right my-1">
                       <b>Name:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.name }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 sm6>
                     <h5 class="right my-1">
                       <b>Email:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.email }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 sm6>
                     <h5 class="right my-1">
                       <b>Gender:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.gender }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 sm6>
                     <h5 class="right my-1">
                       <b>Religion:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.religion }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 sm6>
                     <h5 class="right my-1">
                       <b>Role:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.role }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 sm6>
                     <h5 class="right my-1">
                       <b>Phone:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.phone }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 sm6>
                     <h5 class="right my-1">
                       <b>JoiningDate:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ dates(editedItem.joiningDate) }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 sm6>
                     <h5 class="right my-1">
                       <label class="right hidden-sm-only hidden-xs-only">
                         <b>Date of Birth:</b>
                       </label>
                       <label class="right hidden-lg-only hidden-xl-only hidden-md-only">
                         <b>D.O.B:</b>
                       </label>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ dates(editedItem.dob) }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 sm6>
                     <h5 class="right my-1">
                       <b>Address:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.address }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
           </v-container>
         </v-card-text>
       </v-card>
     </v-dialog>
     <!-- ****** EXISTING-USER TABLE DATA****** -->
     <v-toolbar color="transparent" flat>
       <v-btn
         fab
         dark
         class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
         small
         @click="addUserDialog = true"
       >
         <v-icon dark>add</v-icon>
       </v-btn>
       <v-btn
         round
         class="open-dialog-button hidden-sm-only hidden-xs-only"
         dark
         @click="addUserDialog = true"
       >
         <v-icon class="white--text pr-1" size="20">add</v-icon>Add User
       </v-btn>
       <v-spacer></v-spacer>
       <v-card-title class="body-1" v-show="show">
         <v-btn icon large flat @click="displaySearch">
           <v-avatar size="27">
             <img src="/static/icon/search.png" alt="icon" />
           </v-avatar>
         </v-btn>
       </v-card-title>
       <v-flex xs8 sm8 lg2 md3 v-if="showSearch">
         <v-layout>
           <v-text-field
             autofocus
             v-model="search"
             label="Search"
             prepend-inner-icon="search"
             color="primary"
           ></v-text-field>
           <v-icon @click="closeSearch" color="error">close</v-icon>
         </v-layout>
       </v-flex>
     </v-toolbar>
     <v-data-table :headers="headers" :items="Users" :pagination.sync="pagination" :search="search">
       <template slot="items" slot-scope="props">
         <td class="td td-row">{{ props.index + 1 }}</td>
         <td class="td td-row text-xs-center">
           <v-avatar size="40">
             <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
             <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
           </v-avatar>
         </td>
         <td class="text-xs-center td td-row">{{ props.item.name}}</td>
         <td class="text-xs-center td td-row">{{ props.item.email }}</td>
         <td class="text-xs-center td td-row">{{ dates(props.item.dob) }}</td>
         <td class="text-xs-center td td-row">{{ dates(props.item.joiningDate)}}</td>
         <td class="text-xs-center td td-row">{{ props.item.phone }}</td>
         <td class="text-xs-center td td-row">
           <v-switch
             class="pl-3"
             v-model="props.item.status"
             @change="suspendStatus(props.item.status,props.item._id)"
           ></v-switch>
         </td>
         <td class="text-xs-center td td-row">
           <span>
             <v-tooltip top>
               <img
                 slot="activator"
                 style="cursor:pointer; width:25px; height:25px; "
                 class="mr-3"
                 @click="profile(props.item)"
                 src="/static/icon/view.png"
               />
               <span>View</span>
             </v-tooltip>
             <v-tooltip top>
               <img
                 slot="activator"
                 style="cursor:pointer; width:20px; height:18px; "
                 class="mr-3"
                 @click="editItem(props.item)"
                 src="/static/icon/edit.png"
               />
               <span>Edit</span>
             </v-tooltip>
-            <v-tooltip top>
+            <!-- <v-tooltip top>
               <img
                 slot="activator"
                 style="cursor:pointer; width:20px; height:20px; "
                 class="mr-3"
                 @click="deleteItem(props.item)"
                 src="/static/icon/delete.png"
               />
               <span>Delete</span>
-            </v-tooltip>
+            </v-tooltip>-->
           </span>
         </td>
       </template>
       <v-alert
         slot="no-results"
         :value="true"
         color="error"
         icon="warning"
       >Your search for "{{ search }}" found no results.</v-alert>
     </v-data-table>
     <!-- DIALOG BOX - Add User Data -->
     <v-dialog v-model="addUserDialog" max-width="900px" v-if="addUserDialog">
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add User</label>
             <v-icon size="24" class="right" @click="$refs.form.reset();addUserDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-form ref="form" v-model="valid" lazy-validation>
           <v-container fluid>
             <v-layout>
               <v-flex
                 xs12
                 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
               >
                 <v-avatar size="80px">
                   <img src="/static/icon/user.png" v-if="!imageUrl" />
                 </v-avatar>
                 <img
                   :src="imageUrl"
                   height="150"
                   v-if="imageUrl"
                   style="border-radius:50%; width:150px"
                 />
               </v-flex>
             </v-layout>
             <v-layout>
               <v-flex xs12 sm6>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right">Name:</label>
                   </v-flex>
                   <v-flex xs8 class="ml-3">
                     <v-text-field
                       v-model="addUser.name"
                       placeholder="fill your Name"
                       name="name"
                       type="text"
                       :rules="nameRules"
                       required
                     ></v-text-field>
                   </v-flex>
                 </v-layout>
               </v-flex>
               <v-flex xs12 sm6>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right">Email ID:</label>
                   </v-flex>
                   <v-flex xs8 class="ml-3">
                     <v-text-field
                       placeholder="fill your email"
                       :rules="emailRules"
                       v-model="addUser.email"
                       type="text"
                       name="email"
                       required
                     ></v-text-field>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
             <v-layout>
               <v-flex xs12 sm6>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>
                     <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label>
                   </v-flex>
                   <v-flex xs8 class="ml-3">
                     <v-menu
                       ref="menu"
                       :close-on-content-click="false"
                       v-model="menu"
                       :nudge-right="40"
                       lazy
                       transition="scale-transition"
                       offset-y
                       full-width
                       min-width="290px"
                     >
                       <v-text-field
                         slot="activator"
                         :rules="dateRules"
                         v-model="addUser.dob"
                         placeholder="Select DOB"
                       ></v-text-field>
                       <v-date-picker
                         ref="picker"
                         v-model="addUser.dob"
                         :max="new Date().toISOString().substr(0, 10)"
                         min="1950-01-01"
                         @input="menu = false"
                       ></v-date-picker>
                     </v-menu>
                   </v-flex>
                 </v-layout>
               </v-flex>
               <v-flex xs12 sm6>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right">Gender:</label>
                   </v-flex>
                   <v-flex xs8 class="ml-3">
                     <v-select
                       v-model="addUser.gender"
                       :items="gender"
                       label="Selct Gender "
                       :rules="genderRules"
                       required
                     ></v-select>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
             <v-layout>
               <v-flex xs12 sm6>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right">Religion:</label>
                   </v-flex>
                   <v-flex xs8 class="ml-3">
                     <v-text-field
                       v-model="addUser.religion"
                       placeholder="fill your Religion"
                       name="Religion"
                       type="text"
                       :rules="religionRules"
                       required
                     ></v-text-field>
                   </v-flex>
                 </v-layout>
               </v-flex>
               <v-flex xs12 sm6>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right">JoiningDate:</label>
                   </v-flex>
                   <v-flex xs8 class="ml-3">
                     <v-menu
                       ref="menu1"
                       :close-on-content-click="false"
                       v-model="menu1"
                       :nudge-right="40"
                       lazy
                       transition="scale-transition"
                       offset-y
                       full-width
                       min-width="290px"
                     >
                       <v-text-field
                         slot="activator"
                         :rules="joinDateRules"
                         v-model="addUser.joinDate"
                         placeholder="Select date"
                       ></v-text-field>
                       <v-date-picker
                         ref="picker"
                         v-model="addUser.joinDate"
                         :max="new Date().toISOString().substr(0, 10)"
                         min="1950-01-01"
                         @input="menu1 = false"
                       ></v-date-picker>
                     </v-menu>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
             <v-layout>
               <v-flex xs12 sm6>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right">Phone :</label>
                   </v-flex>
                   <v-flex xs8 class="ml-3">
                     <v-text-field
                       v-model="addUser.mobileNo"
                       placeholder="fill your Phone Number"
                       name="mobileNo"
                       type="number"
                       :rules="mobileNoRules"
                       required
                     ></v-text-field>
                   </v-flex>
                 </v-layout>
               </v-flex>
               <v-flex xs12 sm6>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right hidden-sm-only hidden-xs-only">Select Role:</label>
                     <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Role:</label>
                   </v-flex>
                   <v-flex xs8 class="ml-3">
                     <v-autocomplete
                       v-model="addUser.role"
                       :rules="role"
                       :items="userRole"
                       item-text="name"
                       item-value="name"
                       placeholder="Select Role Name"
                       required
                     ></v-autocomplete>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
             <v-layout wrap>
               <!-- <v-flex xs12 sm6>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right">Username:</label>
                   </v-flex>
                   <v-flex xs8 class="ml-3">
                     <v-text-field
                       v-model="addUser.userName"
                       placeholder="fill your User Name"
                       type="text"
                       :rules="userNameRules"
                       required
                     ></v-text-field>
                   </v-flex>
                 </v-layout>
               </v-flex>-->
               <v-flex xs12 sm6>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right hidden-sm-only hidden-xs-only">Uplaod Image:</label>
                     <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Image:</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>
                     <input
                       type="file"
                       style="display:none"
                       ref="image"
                       accept="image/*"
                       @change="onFilePicked"
                     />
                   </v-flex>
                 </v-layout>
               </v-flex>
               <v-flex xs12 sm6>
                 <v-layout>
                   <v-flex xs4 class="pt-4 subheading">
                     <label class="right">Address:</label>
                   </v-flex>
                   <v-flex xs8 class="ml-3">
                     <v-text-field
                       name="input-4-3"
                       v-model="addUser.presentAddress"
                       :rules="presentAddress"
                       placeholder="fill Your present Address"
                       required
                     ></v-text-field>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
             <v-layout>
               <v-flex xs12 sm12>
                 <v-layout class="right">
                   <v-btn @click="clear" round dark class="clear-button">Clear</v-btn>
                   <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
                 </v-layout>
               </v-flex>
             </v-layout>
           </v-container>
         </v-form>
       </v-card>
     </v-dialog>
     <div class="loader" v-if="showLoader">
       <v-progress-circular indeterminate color="white"></v-progress-circular>
     </div>
     <v-snackbar
       :timeout="timeout"
       :top="y === 'top'"
       :right="x === 'right'"
       :vertical="mode === 'vertical'"
       v-model="snackbar"
       :color="color"
     >{{ text }}</v-snackbar>
   </v-container>
 </template>
 <script>
 import http from "@/Services/http.js";
 import Util from "@/util";
 import moment from "moment";
 import _ from "lodash";
 export default {
   data: () => ({
     component: "report-generate",
     snackbar: false,
     y: "top",
     x: "right",
     mode: "",
     timeout: 3000,
     color: "",
     text: "",
     show: true,
     showSearch: false,
     showLoader: false,
     loading: false,
     addUserDialog: false,
     date: null,
     search: "",
     menu: false,
     menu1: false,
     menu2: false,
     menu3: false,
     viewUserDialog: false,
     editUserDialog: false,
     valid: true,
     isActive: true,
     newActive: false,
     pagination: {
       rowsPerPage: 10,
     },
     imageData: {},
     imageName: "",
     imageUrl: "",
     imageFile: "",
     nameRules: [(v) => !!v || "Name is required"],
     dateRules: [(v) => !!v || " DOB is required"],
     genderRules: [(v) => !!v || " Gender Name is required"],
     pincode: [(v) => !!v || " Pincode is required"],
     role: [(v) => !!v || "Role Name is required"],
     permanentAddress: [(v) => !!v || " Permanent Address is required"],
     presentAddress: [(v) => !!v || " Present Address  is required"],
     mobileNoRules: [(v) => !!v || "Phone Number is required"],
     religionRules: [(v) => !!v || "Religion Name is required"],
     joinDateRules: [(v) => !!v || " Join Date is required"],
     userNameRules: [(v) => !!v || " User Name is required"],
     passwordRules: [(v) => !!v || " Password is required"],
     errorMessages: "",
     userRole: [],
     emailRules: [
       (v) => !!v || "E-mail is required",
       (v) =>
         /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
         "E-mail must be valid",
     ],
     gender: ["Male", "Female"],
     headers: [
       {
         text: "No",
         align: "",
         sortable: false,
         value: "No",
       },
       {
         text: "Profile Pic",
         value: "profilePicUrl",
         sortable: false,
         align: "center",
       },
       { text: "Name", value: "name", sortable: false, align: "center" },
       { text: "Email", value: "email", sortable: false, align: "center" },
       { text: "DOB", value: "dob", sortable: false, align: "center" },
       {
         text: "Joining Date",
         value: "joiningDate",
         sortable: false,
         align: "center",
       },
       {
         text: "Phone",
         value: "phone",
         sortable: false,
         align: "center",
       },
       {
         text: "Status",
         value: "status",
         sortable: false,
         align: "center",
       },
       { text: "Action", value: "", sortable: false, align: "center" },
     ],
     Users: [],
     editedIndex: -1,
     upload: "",
     editedItem: {
       role: "",
       name: "",
       email: "",
       dob: null,
       gender: "",
       role: "",
       address: "",
       phone: "",
       religion: "",
       joiningDate: null,
     },
     addUser: {
       role: "",
       name: "",
       email: "",
       dob: null,
       gender: "",
       pincode: "",
       role: "",
       permanentAddress: "",
       presentAddress: "",
       mobileNo: "",
       religion: "",
       joiningDate: null,
     },
   }),
   watch: {
     menu(val) {
       val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
     },
     menu1(val) {
       val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
     },
     addUserDialog: function (val) {
       if (!val) {
         this.addUser = [];
         this.imageName = "";
         this.imageFile = "";
         this.imageUrl = "";
       }
     },
   },
   methods: {
     save(date) {
       this.$refs.menu.save(date);
     },
     save(date) {
       this.$refs.menu1.save(date);
     },
     pickFile() {
       this.$refs.image.click();
     },
     onFilePicked(e) {
       // console.log(e)
       const files = e.target.files;
       this.upload = e.target.files[0];
       console.log("imageData-upload========>", this.upload);
       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);
           // console.log("upload=======>", this.imageData.imageUrl);
           console.log("imageFile", this.imageUrl);
         });
       } else {
         this.imageName = "";
         this.imageFile = "";
         this.imageUrl = "";
       }
     },
     dates: function (date) {
       return moment(date).format("MMMM DD, YYYY");
     },
     getUsersList() {
       this.showLoader = true;
       var token = this.$store.state.token;
       http()
         .get("/getUsersList", {
           headers: { Authorization: "Bearer " + token },
         })
         .then((response) => {
+          //   this.snackbar = true;
+          this.color = "success";
           this.Users = response.data.data;
           this.showLoader = false;
         })
         .catch((error) => {
           this.showLoader = false;
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
           }
         });
     },
     editItem(item) {
       this.editedIndex = this.Users.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.editedItem.dob =
         this.editedItem.dob != undefined
           ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10))
           : (this.editedItem.dob = "");
       for (let i = 0; i < this.userRole.length; i++) {
         if (this.userRole[i].role === this.editedItem.role) {
           this.editedItem.role = this.userRole[i].name;
         }
       }
       this.editUserDialog = true;
     },
     profile(item) {
       this.editedIndex = this.Users.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.viewUserDialog = true;
       for (let i = 0; i < this.userRole.length; i++) {
         if (this.userRole[i].role === this.editedItem.role) {
           this.editedItem.role = this.userRole[i].name;
         }
       }
     },
     deleteItem(item) {
       let deleteUser = {
         userId: item._id,
       };
       http()
         .delete(
           "/deleteUser",
           confirm("Are you sure you want to delete this?") && {
             params: deleteUser,
           }
         )
         .then((response) => {
           this.snackbar = true;
           this.text = response.data.message;
           this.color = "green";
           this.getUsersList();
         })
         .catch((error) => {
           this.snackbar = true;
           this.color = "error";
           this.text = error.response.data.message;
         });
     },
     close() {
       this.editUserDialog = false;
     },
     closeProfileDialog() {
       this.viewUserDialog = false;
     },
     submit() {
       if (this.$refs.form.validate()) {
         let addUserData = {
           name: this.addUser.name,
           email: this.addUser.email,
           dob: this.addUser.dob,
           gender: this.addUser.gender,
           religion: this.addUser.religion,
           role: this.addUser.role,
           address: this.addUser.presentAddress,
           phone: this.addUser.mobileNo,
           religion: this.addUser.religion,
           joiningDate: this.addUser.joinDate,
         };
         if (this.imageUrl) {
           var str = this.imageUrl;
           const [baseUrl, imageUrl] = str.split(/,/);
           addUserData.profilePicUrl = imageUrl;
         }
         this.loading = true;
         http()
           .post("/createUser", addUserData)
           .then((response) => {
             this.imageUrl = "";
             this.getUsersList();
             this.snackbar = true;
             this.addUserDialog = false;
             this.text = response.data.message;
             this.color = "green";
             this.clear();
             this.loading = false;
           })
           .catch((error) => {
             this.loading = false;
             this.snackbar = true;
             this.color = "error";
             this.text = error.response.data.message;
           });
       }
     },
     clear() {
       this.$refs.form.reset();
       this.imageUrl = "";
     },
     save() {
       this.loading = true;
       for (let i = 0; i < this.userRole.length; i++) {
         if (this.userRole[i].name === this.editedItem.role) {
           this.editedItem.role = this.userRole[i].role;
         }
       }
       this.editedItem.userId = this.editedItem._id;
       if (this.imageUrl) {
         var str = this.imageUrl;
         const [baseUrl, imageUrl] = str.split(/,/);
         this.editedItem.upload = imageUrl;
       }
       http()
         .put("/updateUser", this.editedItem)
         .then((response) => {
           this.snackbar = true;
           this.text = response.data.message;
           this.color = "green";
           this.loading = false;
           this.getUsersList();
           this.close();
         })
         .catch((error) => {
           this.loading = false;
           this.snackbar = true;
           this.text = error.response.data.message;
           this.color = "error";
         });
     },
     getRole() {
       this.showLoader = true;
       var token = this.$store.state.token;
       http()
         .get("/getRolesList", {
           headers: { Authorization: "Bearer " + token },
         })
         .then((response) => {
           this.userRole = response.data.data;
           this.showLoader = false;
           this.userRole = response.data.data;
           var removedRoles = _.remove(this.userRole, function (c) {
             //remove if color is green or yellow
             return (
               c.name === "ADMIN" ||
               c.name === "SUPERADMIN" ||
               c.name === "TEACHER" ||
               c.name === "STUDENT" ||
               c.name === "PARENT"
             );
           });
         })
         .catch((error) => {
           this.showLoader = false;
         });
     },
     suspendStatus(suspendStatus, id) {
       let suspendStatusData = {
         userId: id,
         status: suspendStatus,
       };
       this.showLoader = true;
       http()
         .put("/suspendUserAccount", suspendStatusData)
         .then((response) => {
           this.getUsersList();
           this.text = response.data.message;
           this.snackbar = true;
           this.showLoader = false;
         })
         .catch((error) => {
           // console.log(error.response.data.data);
           this.snackbar = true;
+          this.color = "success";
           this.text = error.response.data.message;
           this.showLoader = false;
         });
     },
     displaySearch() {
       (this.show = false), (this.showSearch = true);
     },
     closeSearch() {
       this.showSearch = false;
       this.show = true;
       this.search = "";
     },
   },
   mounted() {
     this.getUsersList();
     this.getRole();
   },
 };
 </script>

src/router/paths.js

Diff comments View file @1e1e364

1	export default [{	1	export default [{
2	path: '*',	2	path: '*',
3	meta: {	3	meta: {
4	public: true,	4	public: true,
5	},	5	},
6	redirect: {	6	redirect: {
7	path: '/404'	7	path: '/404'
8	}	8	}
9	},	9	},
10	{	10	{
11	path: '/404',	11	path: '/404',
12	meta: {	12	meta: {
13	public: true,	13	public: true,
14	},	14	},
15	name: 'NotFound',	15	name: 'NotFound',
16	component: () =>	16	component: () =>
17	import(	17	import(
18	/* webpackChunkName: "routes" */	18	/* webpackChunkName: "routes" */
19	/* webpackMode: "lazy-once" */	19	/* webpackMode: "lazy-once" */
20	`@/pages/NotFound/NotFound.vue`	20	`@/pages/NotFound/NotFound.vue`
21	)	21	)
22	},	22	},
23	{	23	{
24	path: '*',	24	path: '*',
25	meta: {},	25	meta: {},
26	name: 'dashboardAdmin',	26	name: 'dashboardAdmin',
27	props: (route) => ({	27	props: (route) => ({
28	type: route.query.type	28	type: route.query.type
29	}),	29	}),
30	component: () =>	30	component: () =>
31	import(	31	import(
32	/* webpackChunkName: "routes" */	32	/* webpackChunkName: "routes" */
33	/* webpackMode: "lazy-once" */	33	/* webpackMode: "lazy-once" */
34	`@/pages/Dashboard/dashboard.vue`	34	`@/pages/Dashboard/dashboard.vue`
35	)	35	)
36	},	36	},
37	{	37	{
38	path: '/500',	38	path: '/500',
39	meta: {	39	meta: {
40	public: true,	40	public: true,
41	},	41	},
42	name: 'ServerError',	42	name: 'ServerError',
43	component: () =>	43	component: () =>
44	import(	44	import(
45	/* webpackChunkName: "routes" */	45	/* webpackChunkName: "routes" */
46	/* webpackMode: "lazy-once" */	46	/* webpackMode: "lazy-once" */
47	`@/pages/NotFound/Error.vue`	47	`@/pages/NotFound/Error.vue`
48	)	48	)
49	},	49	},
50	{	50	{
51	path: '/Refresh',	51	path: '/Refresh',
52	meta: {	52	meta: {
53	public: true,	53	public: true,
54	},	54	},
55	name: 'Refresh',	55	name: 'Refresh',
56	component: () =>	56	component: () =>
57	import(	57	import(
58	/* webpackChunkName: "routes" */	58	/* webpackChunkName: "routes" */
59	/* webpackMode: "lazy-once" */	59	/* webpackMode: "lazy-once" */
60	`@/pages/Common/Refresh.vue`	60	`@/pages/Common/Refresh.vue`
61	)	61	)
62	},	62	},
63	{	63	{
64	path: '/changepassword',	64	path: '/changepassword',
65	meta: {},	65	meta: {},
66	name: 'changepassword',	66	name: 'changepassword',
67	props: (route) => ({	67	props: (route) => ({
68	type: route.query.type	68	type: route.query.type
69	}),	69	}),
70	component: () =>	70	component: () =>
71	import(	71	import(
72	/* webpackChunkName: "routes" */	72	/* webpackChunkName: "routes" */
73	/* webpackMode: "lazy-once" */	73	/* webpackMode: "lazy-once" */
74	`@/pages/Authentication/changepassword.vue`	74	`@/pages/Authentication/changepassword.vue`
75	)	75	)
76	},	76	},
77	{	77	{
78	path: '/teachers',	78	path: '/teachers',
79	meta: {	79	meta: {
80	breadcrumb: false	80	breadcrumb: false
81	},	81	},
82	name: 'Teachers',	82	name: 'Teachers',
83	component: () =>	83	component: () =>
84	import(	84	import(
85	/* webpackChunkName: "routes" */	85	/* webpackChunkName: "routes" */
86	/* webpackMode: "lazy-once" */	86	/* webpackMode: "lazy-once" */
87	`@/pages/Teachers/teachers.vue`	87	`@/pages/Teachers/teachers.vue`
88	)	88	)
89	},	89	},
90	{	90	{
91	path: '/',	91	path: '/',
92	meta: {	92	meta: {
93	public: true,	93	public: true,
94	},	94	},
95	name: 'Login',	95	name: 'Login',
96	component: () =>	96	component: () =>
97	import(	97	import(
98	/* webpackChunkName: "routes" */	98	/* webpackChunkName: "routes" */
99	/* webpackMode: "lazy-once" */	99	/* webpackMode: "lazy-once" */
100	`@/pages/Authentication/Login.vue`	100	`@/pages/Authentication/Login.vue`
101	)	101	)
102	},	102	},
103	{	103	{
104	path: '/forgetpassword',	104	path: '/forgetpassword',
105	meta: {	105	meta: {
106	public: true,	106	public: true,
107	},	107	},
108	name: 'forgetpassword',	108	name: 'forgetpassword',
109	component: () =>	109	component: () =>
110	import(	110	import(
111	/* webpackChunkName: "routes" */	111	/* webpackChunkName: "routes" */
112	/* webpackMode: "lazy-once" */	112	/* webpackMode: "lazy-once" */
113	`@/pages/Authentication/forgetpassword.vue`	113	`@/pages/Authentication/forgetpassword.vue`
114	)	114	)
115	},	115	},
116	{	116	{
117	path: '/students',	117	path: '/students',
118	meta: {},	118	meta: {},
119	name: 'Students',	119	name: 'Students',
120	props: (route) => ({	120	props: (route) => ({
121	type: route.query.type	121	type: route.query.type
122	}),	122	}),
123	component: () =>	123	component: () =>
124	import(	124	import(
125	/* webpackChunkName: "routes" */	125	/* webpackChunkName: "routes" */
126	/* webpackMode: "lazy-once" */	126	/* webpackMode: "lazy-once" */
127	`@/pages/Students/students.vue`	127	`@/pages/Students/students.vue`
128	)	128	)
129	},	129	},
130	{	130	{
131	path: '/class',	131	path: '/class',
132	meta: {},	132	meta: {},
133	name: 'Class',	133	name: 'Class',
134	props: (route) => ({	134	props: (route) => ({
135	type: route.query.type	135	type: route.query.type
136	}),	136	}),
137	component: () =>	137	component: () =>
138	import(	138	import(
139	/* webpackChunkName: "routes" */	139	/* webpackChunkName: "routes" */
140	/* webpackMode: "lazy-once" */	140	/* webpackMode: "lazy-once" */
141	`@/pages/Class/addclass.vue`	141	`@/pages/Class/addclass.vue`
142	)	142	)
143	},	143	},
144	{	144	{
145	path: '/section',	145	path: '/section',
146	meta: {},	146	meta: {},
147	name: 'Section',	147	name: 'Section',
148	props: (route) => ({	148	props: (route) => ({
149	type: route.query.type	149	type: route.query.type
150	}),	150	}),
151	component: () =>	151	component: () =>
152	import(	152	import(
153	/* webpackChunkName: "routes" */	153	/* webpackChunkName: "routes" */
154	/* webpackMode: "lazy-once" */	154	/* webpackMode: "lazy-once" */
155	`@/pages/Section/section.vue`	155	`@/pages/Section/section.vue`
156	)	156	)
157	},	157	},
158	{	158	{
159	path: '/noticeBoard',	159	path: '/noticeBoard',
160	meta: {},	160	meta: {},
161	name: 'Notice Board',	161	name: 'Notice Board',
162	props: (route) => ({	162	props: (route) => ({
163	type: route.query.type	163	type: route.query.type
164	}),	164	}),
165	component: () =>	165	component: () =>
166	import(	166	import(
167	/* webpackChunkName: "routes" */	167	/* webpackChunkName: "routes" */
168	/* webpackMode: "lazy-once" */	168	/* webpackMode: "lazy-once" */
169	`@/pages/NoticeBoard/noticeBoard.vue`	169	`@/pages/NoticeBoard/noticeBoard.vue`
170	)	170	)
171	},	171	},
172	{	172	{
173	path: '/news',	173	path: '/news',
174	meta: {},	174	meta: {},
175	name: 'News',	175	name: 'News',
176	props: (route) => ({	176	props: (route) => ({
177	type: route.query.type	177	type: route.query.type
178	}),	178	}),
179	component: () =>	179	component: () =>
180	import(	180	import(
181	/* webpackChunkName: "routes" */	181	/* webpackChunkName: "routes" */
182	/* webpackMode: "lazy-once" */	182	/* webpackMode: "lazy-once" */
183	`@/pages/News/news.vue`	183	`@/pages/News/news.vue`
184	)	184	)
185	},	185	},
186	// {	186	// {
187	// path: '/reminder',	187	// path: '/reminder',
188	// meta: { },	188	// meta: { },
189	// name: 'reminder',	189	// name: 'reminder',
190	// props: (route) => ({ type: route.query.type }),	190	// props: (route) => ({ type: route.query.type }),
191	// component: () => import(	191	// component: () => import(
192	// /* webpackChunkName: "routes" */	192	// /* webpackChunkName: "routes" */
193	// /* webpackMode: "lazy-once" */	193	// /* webpackMode: "lazy-once" */
194	// `@/pages/Reminder/reminder.vue`	194	// `@/pages/Reminder/reminder.vue`
195	// )	195	// )
196	// },	196	// },
197	{	197	{
198	path: '/timeTable',	198	path: '/timeTable',
199	meta: {},	199	meta: {},
200	name: 'Time Table',	200	name: 'Time Table',
201	props: (route) => ({	201	props: (route) => ({
202	type: route.query.type	202	type: route.query.type
203	}),	203	}),
204	component: () =>	204	component: () =>
205	import(	205	import(
206	/* webpackChunkName: "routes" */	206	/* webpackChunkName: "routes" */
207	/* webpackMode: "lazy-once" */	207	/* webpackMode: "lazy-once" */
208	`@/pages/TimeTable/timeTable.vue`	208	`@/pages/TimeTable/timeTable.vue`
209	)	209	)
210	},	210	},
211	{	211	{
212	path: '/notification',	212	path: '/notification',
213	meta: {},	213	meta: {},
214	name: 'Notification',	214	name: 'Notification',
215	props: (route) => ({	215	props: (route) => ({
216	type: route.query.type	216	type: route.query.type
217	}),	217	}),
218	component: () =>	218	component: () =>
219	import(	219	import(
220	/* webpackChunkName: "routes" */	220	/* webpackChunkName: "routes" */
221	/* webpackMode: "lazy-once" */	221	/* webpackMode: "lazy-once" */
222	`@/pages/Notification/notification.vue`	222	`@/pages/Notification/notification.vue`
223	)	223	)
224	},	224	},
225	{	225	{
226	path: '/parents',	226	path: '/parents',
227	meta: {},	227	meta: {},
228	name: 'Parents',	228	name: 'Parents',
229	props: (route) => ({	229	props: (route) => ({
230	type: route.query.type	230	type: route.query.type
231	}),	231	}),
232	component: () =>	232	component: () =>
233	import(	233	import(
234	/* webpackChunkName: "routes" */	234	/* webpackChunkName: "routes" */
235	/* webpackMode: "lazy-once" */	235	/* webpackMode: "lazy-once" */
236	`@/pages/Parent/parents.vue`	236	`@/pages/Parent/parents.vue`
237	)	237	)
238	},	238	},
239	// {	239	// {
240	// path: '/subject',	240	// path: '/subject',
241	// meta: {},	241	// meta: {},
242	// name: 'Subject',	242	// name: 'Subject',
243	// props: (route) => ({ type: route.query.type }),	243	// props: (route) => ({ type: route.query.type }),
244	// component: () =>	244	// component: () =>
245	// import (	245	// import (
246	// /* webpackChunkName: "routes" */	246	// /* webpackChunkName: "routes" */
247	// /* webpackMode: "lazy-once" */	247	// /* webpackMode: "lazy-once" */
248	// `@/pages/Subjects/subjects.vue`	248	// `@/pages/Subjects/subjects.vue`
249	// )	249	// )
250	// },	250	// },
251	{	251	{
252	path: '/dashboard',	252	path: '/dashboard',
253	meta: {},	253	meta: {},
254	name: 'Dashboard',	254	name: 'Dashboard',
255	props: (route) => ({	255	props: (route) => ({
256	type: route.query.type	256	type: route.query.type
257	}),	257	}),
258	component: () =>	258	component: () =>
259	import(	259	import(
260	/* webpackChunkName: "routes" */	260	/* webpackChunkName: "routes" */
261	/* webpackMode: "lazy-once" */	261	/* webpackMode: "lazy-once" */
262	`@/pages/Dashboard/dashboard.vue`	262	`@/pages/Dashboard/dashboard.vue`
263	)	263	)
264	},	264	},
265	{	265	{
266	path: '/CourseDetails',	266	path: '/CourseDetails',
267	meta: {},	267	meta: {},
268	name: 'Course Details',	268	name: 'Course Details',
269	props: (route) => ({	269	props: (route) => ({
270	type: route.query.type	270	type: route.query.type
271	}),	271	}),
272	component: () =>	272	component: () =>
273	import(	273	import(
274	/* webpackChunkName: "routes" */	274	/* webpackChunkName: "routes" */
275	/* webpackMode: "lazy-once" */	275	/* webpackMode: "lazy-once" */
276	`@/pages/Dashboard/CourseDetails.vue`	276	`@/pages/Dashboard/CourseDetails.vue`
277	)	277	)
278	},	278	},
279	{	279	{
280	path: '/ChapterInfo',	280	path: '/ChapterInfo',
281	meta: {},	281	meta: {},
282	name: 'Chapter Info',	282	name: 'Chapter Info',
283	props: (route) => ({	283	props: (route) => ({
284	type: route.query.type	284	type: route.query.type
285	}),	285	}),
286	component: () =>	286	component: () =>
287	import(	287	import(
288	/* webpackChunkName: "routes" */	288	/* webpackChunkName: "routes" */
289	/* webpackMode: "lazy-once" */	289	/* webpackMode: "lazy-once" */
290	`@/pages/Dashboard/ChapterInfo.vue`	290	`@/pages/Dashboard/ChapterInfo.vue`
291	)	291	)
292	},	292	},
293	{	293	{
294	path: '/LiveOnlineClass',	294	path: '/LiveOnlineClass',
295	meta: {},	295	meta: {},
296	name: 'Live Online Class',	296	name: 'Live Online Class',
297	props: (route) => ({	297	props: (route) => ({
298	type: route.query.type	298	type: route.query.type
299	}),	299	}),
300	component: () =>	300	component: () =>
301	import(	301	import(
302	/* webpackChunkName: "routes" */	302	/* webpackChunkName: "routes" */
303	/* webpackMode: "lazy-once" */	303	/* webpackMode: "lazy-once" */
304	`@/pages/Dashboard/LiveOnlineClass.vue`	304	`@/pages/Dashboard/LiveOnlineClass.vue`
305	)	305	)
306	},	306	},
307	{	307	{
308	path: '/CourseDiscussionForum',	308	path: '/CourseDiscussionForum',
309	meta: {},	309	meta: {},
310	name: 'Course Discussion Forum',	310	name: 'Course Discussion Forum',
311	props: (route) => ({	311	props: (route) => ({
312	type: route.query.type	312	type: route.query.type
313	}),	313	}),
314	component: () =>	314	component: () =>
315	import(	315	import(
316	/* webpackChunkName: "routes" */	316	/* webpackChunkName: "routes" */
317	/* webpackMode: "lazy-once" */	317	/* webpackMode: "lazy-once" */
318	`@/pages/Dashboard/CourseDiscussionForum.vue`	318	`@/pages/Dashboard/CourseDiscussionForum.vue`
319	)	319	)
320	},	320	},
321	{	321	{
322	path: '/courseDiscussion',	322	path: '/courseDiscussion',
323	meta: {},	323	meta: {},
324	name: 'Course Discussion',	324	name: 'Course Discussion',
325	props: (route) => ({	325	props: (route) => ({
326	type: route.query.type	326	type: route.query.type
327	}),	327	}),
328	component: () =>	328	component: () =>
329	import(	329	import(
330	/* webpackChunkName: "routes" */	330	/* webpackChunkName: "routes" */
331	/* webpackMode: "lazy-once" */	331	/* webpackMode: "lazy-once" */
332	`@/pages/Course/courseDiscussion.vue`	332	`@/pages/Course/courseDiscussion.vue`
333	)	333	)
334	},	334	},
335	{	335	{
336	path: '/courseDiscussionesForm/:discussionId',	336	path: '/courseDiscussionesForm/:discussionId',
337	meta: {},	337	meta: {},
338	name: 'Course Discussiones Fourm',	338	name: 'Course Discussiones Fourm',
339	props: (route) => ({	339	props: (route) => ({
340	type: route.query.type	340	type: route.query.type
341	}),	341	}),
342	component: () =>	342	component: () =>
343	import(	343	import(
344	/* webpackChunkName: "routes" */	344	/* webpackChunkName: "routes" */
345	/* webpackMode: "lazy-once" */	345	/* webpackMode: "lazy-once" */
346	`@/pages/Course/discussion.vue`	346	`@/pages/Course/discussion.vue`
347	)	347	)
348	},	348	},
349	{	349	{
350	path: '/Announcement',	350	path: '/Announcement',
351	meta: {},	351	meta: {},
352	name: 'Announcement',	352	name: 'Announcement',
353	props: (route) => ({	353	props: (route) => ({
354	type: route.query.type	354	type: route.query.type
355	}),	355	}),
356	component: () =>	356	component: () =>
357	import(	357	import(
358	/* webpackChunkName: "routes" */	358	/* webpackChunkName: "routes" */
359	/* webpackMode: "lazy-once" */	359	/* webpackMode: "lazy-once" */
360	`@/pages/Dashboard/Announcement.vue`	360	`@/pages/Dashboard/Announcement.vue`
361	)	361	)
362	},	362	},
363	{	363	{
364	path: '/annoucementForum/:annoucementId',	364	path: '/annoucementForum/:annoucementId',
365	meta: {},	365	meta: {},
366	name: 'Annoucement Forum',	366	name: 'Annoucement Forum',
367	props: (route) => ({	367	props: (route) => ({
368	type: route.query.type	368	type: route.query.type
369	}),	369	}),
370	component: () =>	370	component: () =>
371	import(	371	import(
372	/* webpackChunkName: "routes" */	372	/* webpackChunkName: "routes" */
373	/* webpackMode: "lazy-once" */	373	/* webpackMode: "lazy-once" */
374	`@/pages/Annoucement/annoucementForum.vue`	374	`@/pages/Annoucement/annoucementForum.vue`
375	)	375	)
376	},	376	},
377	{	377	{
378	path: '/socialMedia',	378	path: '/socialMedia',
379	meta: {},	379	meta: {},
380	name: 'Social Media',	380	name: 'Social Media',
381	props: (route) => ({	381	props: (route) => ({
382	type: route.query.type	382	type: route.query.type
383	}),	383	}),
384	component: () =>	384	component: () =>
385	import(	385	import(
386	/* webpackChunkName: "routes" */	386	/* webpackChunkName: "routes" */
387	/* webpackMode: "lazy-once" */	387	/* webpackMode: "lazy-once" */
388	`@/pages/socialMedia/socialMedia.vue`	388	`@/pages/socialMedia/socialMedia.vue`
389	)	389	)
390	},	390	},
391	{	391	{
392	path: '/gallery',	392	path: '/gallery',
393	meta: {},	393	meta: {},
394	name: 'Gallery',	394	name: 'Gallery',
395	props: (route) => ({	395	props: (route) => ({
396	type: route.query.type	396	type: route.query.type
397	}),	397	}),
398	component: () =>	398	component: () =>
399	import(	399	import(
400	/* webpackChunkName: "routes" */	400	/* webpackChunkName: "routes" */
401	/* webpackMode: "lazy-once" */	401	/* webpackMode: "lazy-once" */
402	`@/pages/Gallery/gallery.vue`	402	`@/pages/Gallery/gallery.vue`
403	)	403	)
404	},	404	},
405	{	405	{
406	path: '/event',	406	path: '/event',
407	meta: {},	407	meta: {},
408	name: 'Event',	408	name: 'Event',
409	props: (route) => ({	409	props: (route) => ({
410	type: route.query.type	410	type: route.query.type
411	}),	411	}),
412	component: () =>	412	component: () =>
413	import(	413	import(
414	/* webpackChunkName: "routes" */	414	/* webpackChunkName: "routes" */
415	/* webpackMode: "lazy-once" */	415	/* webpackMode: "lazy-once" */
416	`@/pages/Event/event.vue`	416	`@/pages/Event/event.vue`
417	)	417	)
418	},	418	},
419	{	419	{
420	path: '/holiday',	420	path: '/holiday',
421	meta: {},	421	meta: {},
422	name: 'Holiday',	422	name: 'Holiday',
423	props: (route) => ({	423	props: (route) => ({
424	type: route.query.type	424	type: route.query.type
425	}),	425	}),
426	component: () =>	426	component: () =>
427	import(	427	import(
428	/* webpackChunkName: "routes" */	428	/* webpackChunkName: "routes" */
429	/* webpackMode: "lazy-once" */	429	/* webpackMode: "lazy-once" */
430	`@/pages/Holiday/holiday.vue`	430	`@/pages/Holiday/holiday.vue`
431	)	431	)
432	},	432	},
433	{	433	{
434	path: '/user',	434	path: '/user',
435	meta: {},	435	meta: {},
436	name: 'User',	436	name: 'User',
437	props: (route) => ({	437	props: (route) => ({
438	type: route.query.type	438	type: route.query.type
439	}),	439	}),
440	component: () =>	440	component: () =>
441	import(	441	import(
442	/* webpackChunkName: "routes" */	442	/* webpackChunkName: "routes" */
443	/* webpackMode: "lazy-once" */	443	/* webpackMode: "lazy-once" */
444	`@/pages/User/user.vue`	444	`@/pages/User/user.vue`
445	)	445	)
446	},	446	},
447	{	447	{
448	path: '/AttendenceStudent',	448	path: '/AttendenceStudent',
449	meta: {},	449	meta: {},
450	name: 'Student Attendence',	450	name: 'Student Attendence',
451	props: (route) => ({	451	props: (route) => ({
452	type: route.query.type	452	type: route.query.type
453	}),	453	}),
454	component: () =>	454	component: () =>
455	import(	455	import(
456	/* webpackChunkName: "routes" */	456	/* webpackChunkName: "routes" */
457	/* webpackMode: "lazy-once" */	457	/* webpackMode: "lazy-once" */
458	`@/pages/Attendence/studentAttendence.vue`	458	`@/pages/Attendence/studentAttendence.vue`
459	)	459	)
460	},	460	},
461	{	461	{
462	path: '/AttendenceTeacher',	462	path: '/AttendenceTeacher',
463	meta: {},	463	meta: {},
464	name: 'Teacher Attendence',	464	name: 'Teacher Attendence',
465	props: (route) => ({	465	props: (route) => ({
466	type: route.query.type	466	type: route.query.type
467	}),	467	}),
468	component: () =>	468	component: () =>
469	import(	469	import(
470	/* webpackChunkName: "routes" */	470	/* webpackChunkName: "routes" */
471	/* webpackMode: "lazy-once" */	471	/* webpackMode: "lazy-once" */
472	`@/pages/Attendence/teacherAttendence.vue`	472	`@/pages/Attendence/teacherAttendence.vue`
473	)	473	)
474	},	474	},
475	{	475	{
476	path: '/salaryTemplate',	476	path: '/salaryTemplate',
477	meta: {},	477	meta: {},
478	name: 'Salary Template',	478	name: 'Salary Template',
479	props: (route) => ({	479	props: (route) => ({
480	type: route.query.type	480	type: route.query.type
481	}),	481	}),
482	component: () =>	482	component: () =>
483	import(	483	import(
484	`@/pages/Payroll/salaryTemplate.vue`	484	`@/pages/Payroll/salaryTemplate.vue`
485	)	485	)
486	},	486	},
487	{	487	{
488	path: '/hourlyTemplate',	488	path: '/hourlyTemplate',
489	meta: {},	489	meta: {},
490	name: 'Hourly Template',	490	name: 'Hourly Template',
491	props: (route) => ({	491	props: (route) => ({
492	type: route.query.type	492	type: route.query.type
493	}),	493	}),
494	component: () =>	494	component: () =>
495	import(	495	import(
496	`@/pages/Payroll/hourlyTemplate.vue`	496	`@/pages/Payroll/hourlyTemplate.vue`
497	)	497	)
498	},	498	},
499	{	499	{
500	path: '/manageSalary',	500	path: '/manageSalary',
501	meta: {},	501	meta: {},
502	name: 'Manage Salary',	502	name: 'Manage Salary',
503	props: (route) => ({	503	props: (route) => ({
504	type: route.query.type	504	type: route.query.type
505	}),	505	}),
506	component: () =>	506	component: () =>
507	import(	507	import(
508	`@/pages/Payroll/manageSalary.vue`	508	`@/pages/Payroll/manageSalary.vue`
509	)	509	)
510	},	510	},
511	// {	511	// {
512	// path: '/makePayment',	512	// path: '/makePayment',
513	// meta: {},	513	// meta: {},
514	// name: 'Make Payment',	514	// name: 'Make Payment',
515	// props: (route) => ({ type: route.query.type }),	515	// props: (route) => ({ type: route.query.type }),
516	// component: () =>	516	// component: () =>
517	// import (	517	// import (
518	// `@/pages/Payroll/makePayment.vue`	518	// `@/pages/Payroll/makePayment.vue`
519	// )	519	// )
520	// },	520	// },
521	{	521	{
522	path: '/AttendenceUser',	522	path: '/AttendenceUser',
523	meta: {},	523	meta: {},
524	name: 'User Attendence',	524	name: 'User Attendence',
525	props: (route) => ({	525	props: (route) => ({
526	type: route.query.type	526	type: route.query.type
527	}),	527	}),
528	component: () =>	528	component: () =>
529	import(	529	import(
530	/* webpackChunkName: "routes" */	530	/* webpackChunkName: "routes" */
531	/* webpackMode: "lazy-once" */	531	/* webpackMode: "lazy-once" */
532	`@/pages/Attendence/userAttendence.vue`	532	`@/pages/Attendence/userAttendence.vue`
533	)	533	)
534	},	534	},
535	{	535	{
536	path: '/feeTypes',	536	path: '/feeTypes',
537	meta: {},	537	meta: {},
538	name: 'Fee Types',	538	name: 'Fee Types',
539	props: (route) => ({	539	props: (route) => ({
540	type: route.query.type	540	type: route.query.type
541	}),	541	}),
542	component: () =>	542	component: () =>
543	import(	543	import(
544	/* webpackChunkName: "routes" */	544	/* webpackChunkName: "routes" */
545	/* webpackMode: "lazy-once" */	545	/* webpackMode: "lazy-once" */
546	`@/pages/Account/feeTypes.vue`	546	`@/pages/Account/feeTypes.vue`
547	)	547	)
548	},	548	},
549	{	549	{
550	path: '/invoice',	550	path: '/invoice',
551	meta: {},	551	meta: {},
552	name: 'Invoice',	552	name: 'Invoice',
553	props: (route) => ({	553	props: (route) => ({
554	type: route.query.type	554	type: route.query.type
555	}),	555	}),
556	component: () =>	556	component: () =>
557	import(	557	import(
558	/* webpackChunkName: "routes" */	558	/* webpackChunkName: "routes" */
559	/* webpackMode: "lazy-once" */	559	/* webpackMode: "lazy-once" */
560	`@/pages/Account/invoice.vue`	560	`@/pages/Account/invoice.vue`
561	)	561	)
562	},	562	},
563	{	563	{
564	path: '/paymentHistory',	564	path: '/paymentHistory',
565	meta: {},	565	meta: {},
566	name: 'Payment History',	566	name: 'Payment History',
567	props: (route) => ({	567	props: (route) => ({
568	type: route.query.type	568	type: route.query.type
569	}),	569	}),
570	component: () =>	570	component: () =>
571	import(	571	import(
572	/* webpackChunkName: "routes" */	572	/* webpackChunkName: "routes" */
573	/* webpackMode: "lazy-once" */	573	/* webpackMode: "lazy-once" */
574	`@/pages/Account/paymentHistory.vue`	574	`@/pages/Account/paymentHistory.vue`
575	)	575	)
576	},	576	},
577	{	577	{
578	path: '/expense',	578	path: '/expense',
579	meta: {},	579	meta: {},
580	name: 'Expense',	580	name: 'Expense',
581	props: (route) => ({	581	props: (route) => ({
582	type: route.query.type	582	type: route.query.type
583	}),	583	}),
584	component: () =>	584	component: () =>
585	import(	585	import(
586	/* webpackChunkName: "routes" */	586	/* webpackChunkName: "routes" */
587	/* webpackMode: "lazy-once" */	587	/* webpackMode: "lazy-once" */
588	`@/pages/Account/expense.vue`	588	`@/pages/Account/expense.vue`
589	)	589	)
590	},	590	},
591	{	591	{
592	path: '/income',	592	path: '/income',
593	meta: {},	593	meta: {},
594	name: 'Income',	594	name: 'Income',
595	props: (route) => ({	595	props: (route) => ({
596	type: route.query.type	596	type: route.query.type
597	}),	597	}),
598	component: () =>	598	component: () =>
599	import(	599	import(
600	/* webpackChunkName: "routes" */	600	/* webpackChunkName: "routes" */
601	/* webpackMode: "lazy-once" */	601	/* webpackMode: "lazy-once" */
602	`@/pages/Account/income.vue`	602	`@/pages/Account/income.vue`
603	)	603	)
604	},	604	},
605	{	605	{
606	path: '/libraryMember',	606	path: '/libraryMember',
607	meta: {},	607	meta: {},
608	name: 'Library Member',	608	name: 'Library Member',
609	props: (route) => ({	609	props: (route) => ({
610	type: route.query.type	610	type: route.query.type
611	}),	611	}),
612	component: () =>	612	component: () =>
613	import(	613	import(
614	/* webpackChunkName: "routes" */	614	/* webpackChunkName: "routes" */
615	/* webpackMode: "lazy-once" */	615	/* webpackMode: "lazy-once" */
616	`@/pages/Library/member.vue`	616	`@/pages/Library/member.vue`
617	)	617	)
618	},	618	},
619	{	619	{
620	path: '/books',	620	path: '/books',
621	meta: {},	621	meta: {},
622	name: 'Books',	622	name: 'Books',
623	props: (route) => ({	623	props: (route) => ({
624	type: route.query.type	624	type: route.query.type
625	}),	625	}),
626	component: () =>	626	component: () =>
627	import(	627	import(
628	/* webpackChunkName: "routes" */	628	/* webpackChunkName: "routes" */
629	/* webpackMode: "lazy-once" */	629	/* webpackMode: "lazy-once" */
630	`@/pages/Library/books.vue`	630	`@/pages/Library/books.vue`
631	)	631	)
632	},	632	},
633	{	633	{
634	path: '/issue',	634	path: '/issue',
635	meta: {},	635	meta: {},
636	name: 'Issue',	636	name: 'Issue',
637	props: (route) => ({	637	props: (route) => ({
638	type: route.query.type	638	type: route.query.type
639	}),	639	}),
640	component: () =>	640	component: () =>
641	import(	641	import(
642	/* webpackChunkName: "routes" */	642	/* webpackChunkName: "routes" */
643	/* webpackMode: "lazy-once" */	643	/* webpackMode: "lazy-once" */
644	`@/pages/Library/issue.vue`	644	`@/pages/Library/issue.vue`
645	)	645	)
646	},	646	},
647	{	647	{
648	path: '/e-books',	648	path: '/e-books',
649	meta: {},	649	meta: {},
650	name: 'E-Books',	650	name: 'E-Books',
651	props: (route) => ({	651	props: (route) => ({
652	type: route.query.type	652	type: route.query.type
653	}),	653	}),
654	component: () =>	654	component: () =>
655	import(	655	import(
656	/* webpackChunkName: "routes" */	656	/* webpackChunkName: "routes" */
657	/* webpackMode: "lazy-once" */	657	/* webpackMode: "lazy-once" */
658	`@/pages/Library/eBook.vue`	658	`@/pages/Library/eBook.vue`
659	)	659	)
660	},	660	},
661	{	661	{
662	path: '/editInvoice/:invoiceid',	662	path: '/editInvoice/:invoiceid',
663	meta: {},	663	meta: {},
664	name: 'Edit Invoice',	664	name: 'Edit Invoice',
665	// props: (route) => ({ type: route.query.type }),	665	// props: (route) => ({ type: route.query.type }),
666	component: () =>	666	component: () =>
667	import(	667	import(
668	/* webpackChunkName: "routes" */	668	/* webpackChunkName: "routes" */
669	/* webpackMode: "lazy-once" */	669	/* webpackMode: "lazy-once" */
670	`@/pages/Account/editInvoice.vue`	670	`@/pages/Account/editInvoice.vue`
671	)	671	)
672	},	672	},
673	{	673	{
674	path: '/StudentsAttendence/:id',	674	path: '/StudentsAttendence/:id',
675	meta: {},	675	meta: {},
676	name: 'View Students Attendence',	676	name: 'View Students Attendence',
677	props: (route) => ({	677	props: (route) => ({
678	type: route.query.type	678	type: route.query.type
679	}),	679	}),
680	component: () =>	680	component: () =>
681	import(	681	import(
682	/* webpackChunkName: "routes" */	682	/* webpackChunkName: "routes" */
683	/* webpackMode: "lazy-once" */	683	/* webpackMode: "lazy-once" */
684	`@/pages/Attendence/viewStudentsAttendence.vue`	684	`@/pages/Attendence/viewStudentsAttendence.vue`
685	)	685	)
686	},	686	},
687	{	687	{
688	path: '/TeacherAttendence/:teacherId',	688	path: '/TeacherAttendence/:teacherId',
689	meta: {},	689	meta: {},
690	name: 'View Teacher Attendence',	690	name: 'View Teacher Attendence',
691	props: (route) => ({	691	props: (route) => ({
692	type: route.query.type	692	type: route.query.type
693	}),	693	}),
694	component: () =>	694	component: () =>
695	import(	695	import(
696	/* webpackChunkName: "routes" */	696	/* webpackChunkName: "routes" */
697	/* webpackMode: "lazy-once" */	697	/* webpackMode: "lazy-once" */
698	`@/pages/Attendence/viewTeacherAttendence.vue`	698	`@/pages/Attendence/viewTeacherAttendence.vue`
699	)	699	)
700	},	700	},
701	{	701	{
702	path: '/viewInvoice/:viewInvoiceId',	702	path: '/viewInvoice/:viewInvoiceId',
703	meta: {},	703	meta: {},
704	name: 'View Invoice',	704	name: 'View Invoice',
705	props: (route) => ({	705	props: (route) => ({
706	type: route.query.type	706	type: route.query.type
707	}),	707	}),
708	component: () =>	708	component: () =>
709	import(	709	import(
710	/* webpackChunkName: "routes" */	710	/* webpackChunkName: "routes" */
711	/* webpackMode: "lazy-once" */	711	/* webpackMode: "lazy-once" */
712	`@/pages/Account/viewInvoice.vue`	712	`@/pages/Account/viewInvoice.vue`
713	)	713	)
714	},	714	},
715	{	715	{
716	path: '/viewPaymentInvoice/:viewPaymentInvoiceId',	716	path: '/viewPaymentInvoice/:viewPaymentInvoiceId',
717	meta: {},	717	meta: {},
718	name: 'View Payment Invoice',	718	name: 'View Payment Invoice',
719	props: (route) => ({	719	props: (route) => ({
720	type: route.query.type	720	type: route.query.type
721	}),	721	}),
722	component: () =>	722	component: () =>
723	import(	723	import(
724	/* webpackChunkName: "routes" */	724	/* webpackChunkName: "routes" */
725	/* webpackMode: "lazy-once" */	725	/* webpackMode: "lazy-once" */
726	`@/pages/Account/viewPaymentInvoice.vue`	726	`@/pages/Account/viewPaymentInvoice.vue`
727	)	727	)
728	},	728	},
729	{	729	{
730	path: '/globalPayment',	730	path: '/globalPayment',
731	meta: {},	731	meta: {},
732	name: 'Global Payment',	732	name: 'Global Payment',
733	props: (route) => ({	733	props: (route) => ({
734	type: route.query.type	734	type: route.query.type
735	}),	735	}),
736	component: () =>	736	component: () =>
737	import(	737	import(
738	/* webpackChunkName: "routes" */	738	/* webpackChunkName: "routes" */
739	/* webpackMode: "lazy-once" */	739	/* webpackMode: "lazy-once" */
740	`@/pages/Account/globalPayment.vue`	740	`@/pages/Account/globalPayment.vue`
741	)	741	)
742	},	742	},
743	{	743	{
744	path: '/exam',	744	path: '/exam',
745	meta: {},	745	meta: {},
746	name: 'Exam',	746	name: 'Exam',
747	props: (route) => ({	747	props: (route) => ({
748	type: route.query.type	748	type: route.query.type
749	}),	749	}),
750	component: () =>	750	component: () =>
751	import(	751	import(
752	/* webpackChunkName: "routes" */	752	/* webpackChunkName: "routes" */
753	/* webpackMode: "lazy-once" */	753	/* webpackMode: "lazy-once" */
754	`@/pages/Exam/exam.vue`	754	`@/pages/Exam/exam.vue`
755	)	755	)
756	},	756	},
757	{	757	{
758	path: '/grade',	758	path: '/grade',
759	meta: {},	759	meta: {},
760	name: 'Grade',	760	name: 'Grade',
761	props: (route) => ({	761	props: (route) => ({
762	type: route.query.type	762	type: route.query.type
763	}),	763	}),
764	component: () =>	764	component: () =>
765	import(	765	import(
766	/* webpackChunkName: "routes" */	766	/* webpackChunkName: "routes" */
767	/* webpackMode: "lazy-once" */	767	/* webpackMode: "lazy-once" */
768	`@/pages/Exam/grade.vue`	768	`@/pages/Exam/grade.vue`
769	)	769	)
770	},	770	},
771	{	771	{
772	path: '/examSchedule',	772	path: '/examSchedule',
773	meta: {},	773	meta: {},
774	name: 'Exam Schedule',	774	name: 'Exam Schedule',
775	props: (route) => ({	775	props: (route) => ({
776	type: route.query.type	776	type: route.query.type
777	}),	777	}),
778	component: () =>	778	component: () =>
779	import(	779	import(
780	/* webpackChunkName: "routes" */	780	/* webpackChunkName: "routes" */
781	/* webpackMode: "lazy-once" */	781	/* webpackMode: "lazy-once" */
782	`@/pages/Exam/examSchedule.vue`	782	`@/pages/Exam/examSchedule.vue`
783	)	783	)
784	},	784	},
785	{	785	{
786	path: '/examAttendence',	786	path: '/examAttendence',
787	meta: {},	787	meta: {},
788	name: 'Exam Attendence',	788	name: 'Exam Attendence',
789	props: (route) => ({	789	props: (route) => ({
790	type: route.query.type	790	type: route.query.type
791	}),	791	}),
792	component: () =>	792	component: () =>
793	import(	793	import(
794	/* webpackChunkName: "routes" */	794	/* webpackChunkName: "routes" */
795	/* webpackMode: "lazy-once" */	795	/* webpackMode: "lazy-once" */
796	`@/pages/Exam/examAttendence.vue`	796	`@/pages/Exam/examAttendence.vue`
797	)	797	)
798	},	798	},
799	{	799	{
800	path: '/mark',	800	path: '/mark',
801	meta: {},	801	meta: {},
802	name: 'Mark',	802	name: 'Mark',
803	props: (route) => ({	803	props: (route) => ({
804	type: route.query.type	804	type: route.query.type
805	}),	805	}),
806	component: () =>	806	component: () =>
807	import(	807	import(
808	/* webpackChunkName: "routes" */	808	/* webpackChunkName: "routes" */
809	/* webpackMode: "lazy-once" */	809	/* webpackMode: "lazy-once" */
810	`@/pages/Mark/mark.vue`	810	`@/pages/Mark/mark.vue`
811	)	811	)
812	},	812	},
813	{	813	{
814	path: '/viewMark/:markId',	814	path: '/viewMark/:markId',
815	meta: {},	815	meta: {},
816	name: 'view Mark',	816	name: 'view Mark',
817	props: (route) => ({	817	props: (route) => ({
818	type: route.query.type	818	type: route.query.type
819	}),	819	}),
820	component: () =>	820	component: () =>
821	import(	821	import(
822	/* webpackChunkName: "routes" */	822	/* webpackChunkName: "routes" */
823	/* webpackMode: "lazy-once" */	823	/* webpackMode: "lazy-once" */
824	`@/pages/Mark/viewMark.vue`	824	`@/pages/Mark/viewMark.vue`
825	)	825	)
826	},	826	},
827	{	827	{
828	path: '/markDistribution',	828	path: '/markDistribution',
829	meta: {},	829	meta: {},
830	name: 'Mark Distribution',	830	name: 'Mark Distribution',
831	props: (route) => ({	831	props: (route) => ({
832	type: route.query.type	832	type: route.query.type
833	}),	833	}),
834	component: () =>	834	component: () =>
835	import(	835	import(
836	/* webpackChunkName: "routes" */	836	/* webpackChunkName: "routes" */
837	/* webpackMode: "lazy-once" */	837	/* webpackMode: "lazy-once" */
838	`@/pages/Mark/markDistribution.vue`	838	`@/pages/Mark/markDistribution.vue`
839	)	839	)
840	},	840	},
841	{	841	{
842	path: '/meet',	842	path: '/meet',
843	meta: {},	843	meta: {},
844	name: 'Meet',	844	name: 'Meet',
845	props: (route) => ({	845	props: (route) => ({
846	type: route.query.type	846	type: route.query.type
847	}),	847	}),
848	component: () =>	848	component: () =>
849	import(	849	import(
850	/* webpackChunkName: "routes" */	850	/* webpackChunkName: "routes" */
851	/* webpackMode: "lazy-once" */	851	/* webpackMode: "lazy-once" */
852	`@/pages/Meet/meet.vue`	852	`@/pages/Meet/meet.vue`
853	)	853	)
854	},	854	},
855	{	855	{
856	path: '/academicYear',	856	path: '/academicYear',
857	meta: {},	857	meta: {},
858	name: 'Academic Year',	858	name: 'Academic Year',
859	props: (route) => ({	859	props: (route) => ({
860	type: route.query.type	860	type: route.query.type
861	}),	861	}),
862	component: () =>	862	component: () =>
863	import(	863	import(
864	/* webpackChunkName: "routes" */	864	/* webpackChunkName: "routes" */
865	/* webpackMode: "lazy-once" */	865	/* webpackMode: "lazy-once" */
866	`@/pages/Administrator/academicYear.vue`	866	`@/pages/Administrator/academicYear.vue`
867	)	867	)
868	},	868	},
869	{	869	{
870	path: '/systemAdmin',	870	path: '/systemAdmin',
871	meta: {},	871	meta: {},
872	name: 'System Admin',	872	name: 'System Admin',
873	props: (route) => ({	873	props: (route) => ({
874	type: route.query.type	874	type: route.query.type
875	}),	875	}),
876	component: () =>	876	component: () =>
877	import(	877	import(
878	/* webpackChunkName: "routes" */	878	/* webpackChunkName: "routes" */
879	/* webpackMode: "lazy-once" */	879	/* webpackMode: "lazy-once" */
880	`@/pages/Administrator/systemAdmin.vue`	880	`@/pages/Administrator/systemAdmin.vue`
881	)	881	)
882	},	882	},
883	{	883	{
884	path: '/resetPassword',	884	path: '/resetPassword',
885	meta: {},	885	meta: {},
886	name: 'Change Password',	886	name: 'Change Password',
887	props: (route) => ({	887	props: (route) => ({
888	type: route.query.type	888	type: route.query.type
889	}),	889	}),
890	component: () =>	890	component: () =>
891	import(	891	import(
892	/* webpackChunkName: "routes" */	892	/* webpackChunkName: "routes" */
893	/* webpackMode: "lazy-once" */	893	/* webpackMode: "lazy-once" */
894	`@/pages/Administrator/resetPassword.vue`	894	`@/pages/Administrator/resetPassword.vue`
895	)	895	)
896	},	896	},
897	{	897	{
898	path: '/role',	898	path: '/role',
899	meta: {},	899	meta: {},
900	name: 'Role',	900	name: 'Role',
901	props: (route) => ({	901	props: (route) => ({
902	type: route.query.type	902	type: route.query.type
903	}),	903	}),
904	component: () =>	904	component: () =>
905	import(	905	import(
906	/* webpackChunkName: "routes" */	906	/* webpackChunkName: "routes" */
907	/* webpackMode: "lazy-once" */	907	/* webpackMode: "lazy-once" */
908	`@/pages/Administrator/role.vue`	908	`@/pages/Administrator/role.vue`
909	)	909	)
910	},	910	},
911	{	911	{
912	path: '/bulkImport',	912	path: '/bulkImport',
913	meta: {},	913	meta: {},
914	name: 'Bulk Import',	914	name: 'Bulk Import',
915	props: (route) => ({	915	props: (route) => ({
916	type: route.query.type	916	type: route.query.type
917	}),	917	}),
918	component: () =>	918	component: () =>
919	import(	919	import(
920	/* webpackChunkName: "routes" */	920	/* webpackChunkName: "routes" */
921	/* webpackMode: "lazy-once" */	921	/* webpackMode: "lazy-once" */
922	`@/pages/Administrator/bulkImport.vue`	922	`@/pages/Administrator/bulkImport.vue`
923	)	923	)
924	},	924	},
925	{	925	{
926	path: '/studentReport',	926	path: '/studentReport',
927	meta: {},	927	meta: {},
928	name: 'Student Report',	928	name: 'Student Report',
929	props: (route) => ({	929	props: (route) => ({
930	type: route.query.type	930	type: route.query.type
931	}),	931	}),
932	component: () =>	932	component: () =>
933	import(	933	import(
934	/* webpackChunkName: "routes" */	934	/* webpackChunkName: "routes" */
935	/* webpackMode: "lazy-once" */	935	/* webpackMode: "lazy-once" */
936	`@/pages/Report/studentReport.vue`	936	`@/pages/Report/studentReport.vue`
937	)	937	)
938	},	938	},
939	{	939	{
940	path: '/progressCardReport',	940	path: '/progressCardReport',
941	meta: {},	941	meta: {},
942	name: 'Progress Card Report',	942	name: 'Progress Card Report',
943	props: (route) => ({	943	props: (route) => ({
944	type: route.query.type	944	type: route.query.type
945	}),	945	}),
946	component: () =>	946	component: () =>
947	import(	947	import(
948	/* webpackChunkName: "routes" */	948	/* webpackChunkName: "routes" */
949	/* webpackMode: "lazy-once" */	949	/* webpackMode: "lazy-once" */
950	`@/pages/Report/progressCardReport.vue`	950	`@/pages/Report/progressCardReport.vue`
951	)	951	)
952	},	952	},
953	{	953	{
954	path: '/idCard',	954	path: '/idCard',
955	meta: {},	955	meta: {},
956	name: 'Id Card Report',	956	name: 'Id Card Report',
957	props: (route) => ({	957	props: (route) => ({
958	type: route.query.type	958	type: route.query.type
959	}),	959	}),
960	component: () =>	960	component: () =>
961	import(	961	import(
962	`@/pages/Report/idCard.vue`	962	`@/pages/Report/idCard.vue`
963	)	963	)
964	},	964	},
965	{	965	{
966	path: '/admitCard',	966	path: '/admitCard',
967	meta: {},	967	meta: {},
968	name: 'Admit Card Report',	968	name: 'Admit Card Report',
969	props: (route) => ({	969	props: (route) => ({
970	type: route.query.type	970	type: route.query.type
971	}),	971	}),
972	component: () =>	972	component: () =>
973	import(	973	import(
974	`@/pages/Report/admitCard.vue`	974	`@/pages/Report/admitCard.vue`
975	)	975	)
976	},	976	},
977	{	977	{
978	path: '/generalSetting',	978	path: '/generalSetting',
979	meta: {},	979	meta: {},
980	name: 'General Setting',	980	name: 'General Setting',
981	props: (route) => ({	981	props: (route) => ({
982	type: route.query.type	982	type: route.query.type
983	}),	983	}),
984	component: () =>	984	component: () =>
985	import(	985	import(
986	/* webpackChunkName: "routes" */	986	/* webpackChunkName: "routes" */
987	/* webpackMode: "lazy-once" */	987	/* webpackMode: "lazy-once" */
988	`@/pages/generalSetting/generalSetting.vue`	988	`@/pages/generalSetting/generalSetting.vue`
989	)	989	)
990	},	990	},
991	{	991	{
992	path: '/assignment',	992	path: '/assignment',
993	meta: {},	993	meta: {},
994	name: 'Assignment',	994	name: 'Assignment',
995	props: (route) => ({	995	props: (route) => ({
996	type: route.query.type	996	type: route.query.type
997	}),	997	}),
998	component: () =>	998	component: () =>
999	import(	999	import(
1000	`@/pages/Academic/assignment.vue`	1000	`@/pages/Academic/assignment.vue`
1001	)	1001	)
1002	},	1002	},
1003	{	1003	{
1004	path: '/routine',	1004	path: '/routine',
1005	meta: {},	1005	meta: {},
1006	name: 'Routine',	1006	name: 'Routine',
1007	props: (route) => ({	1007	props: (route) => ({
1008	type: route.query.type	1008	type: route.query.type
1009	}),	1009	}),
1010	component: () =>	1010	component: () =>
1011	import(	1011	import(
1012	`@/pages/Academic/routine.vue`	1012	`@/pages/Academic/routine.vue`
1013	)	1013	)
1014	},	1014	},
1015	{	1015	{
1016	path: '/subject',	1016	path: '/subject',
1017	meta: {},	1017	meta: {},
1018	name: 'Subject',	1018	name: 'Subject',
1019	props: (route) => ({	1019	props: (route) => ({
1020	type: route.query.type	1020	type: route.query.type
1021	}),	1021	}),
1022	component: () =>	1022	component: () =>
1023	import(	1023	import(
1024	`@/pages/Academic/subject.vue`	1024	`@/pages/Academic/subject.vue`
1025	)	1025	)
1026	},	1026	},
1027	{	1027	{
1028	path: '/syllabus',	1028	path: '/syllabus',
1029	meta: {},	1029	meta: {},
1030	name: 'Syllabus',	1030	name: 'Syllabus',
1031	props: (route) => ({	1031	props: (route) => ({
1032	type: route.query.type	1032	type: route.query.type
1033	}),	1033	}),
1034	component: () =>	1034	component: () =>
1035	import(	1035	import(
1036	`@/pages/Academic/syllabus.vue`	1036	`@/pages/Academic/syllabus.vue`
1037	)	1037	)
1038	},	1038	},
1039	{	1039	{
1040	path: '/course',	1040	path: '/course',
1041	meta: {},	1041	meta: {},
1042	name: 'Course',	1042	name: 'Course',
1043	props: (route) => ({	1043	props: (route) => ({
1044	type: route.query.type	1044	type: route.query.type
1045	}),	1045	}),
1046	component: () =>	1046	component: () =>
1047	import(	1047	import(
1048	/* webpackChunkName: "routes" */	1048	/* webpackChunkName: "routes" */
1049	/* webpackMode: "lazy-once" */	1049	/* webpackMode: "lazy-once" */
1050	`@/pages/Course/course.vue`	1050	`@/pages/Course/course.vue`
1051	)	1051	)
1052	},	1052	},
1053	{	1053	{
1054	path: '/courseDetail',	1054	path: '/courseDetail',
1055	meta: {},	1055	meta: {},
1056	name: 'Course Detail',	1056	name: 'Course Detail',
1057	props: (route) => ({	1057	props: (route) => ({
1058	type: route.query.type	1058	type: route.query.type
1059	}),	1059	}),
1060	component: () =>	1060	component: () =>
1061	import(	1061	import(
1062	/* webpackChunkName: "routes" */	1062	/* webpackChunkName: "routes" */
1063	/* webpackMode: "lazy-once" */	1063	/* webpackMode: "lazy-once" */
1064	`@/pages/Course/courseDetail.vue`	1064	`@/pages/Course/courseDetail.vue`
1065	)	1065	)
1066	},	1066	},
1067	{	1067	{
1068	path: '/enrollStudents',	1068	path: '/enrollStudents',
1069	meta: {},	1069	meta: {},
1070	name: 'Enroll Students',	1070	name: 'Enroll Students',
1071	props: (route) => ({	1071	props: (route) => ({
1072	type: route.query.type	1072	type: route.query.type
1073	}),	1073	}),
1074	component: () =>	1074	component: () =>
1075	import(	1075	import(
1076	/* webpackChunkName: "routes" */	1076	/* webpackChunkName: "routes" */
1077	/* webpackMode: "lazy-once" */	1077	/* webpackMode: "lazy-once" */
1078	`@/pages/Course/enrollStudents.vue`	1078	`@/pages/Course/enrollStudents.vue`
1079	)	1079	)
1080	},	1080	},
1081	{	1081	{
1082	path: '/changeStudents',	1082	path: '/changeStudents',
1083	meta: {},	1083	meta: {},
1084	name: 'Change Students',	1084	name: 'Change Students',
1085	props: (route) => ({	1085	props: (route) => ({
1086	type: route.query.type	1086	type: route.query.type
1087	}),	1087	}),
1088	component: () =>	1088	component: () =>
1089	import(	1089	import(
1090	/* webpackChunkName: "routes" */	1090	/* webpackChunkName: "routes" */
1091	/* webpackMode: "lazy-once" */	1091	/* webpackMode: "lazy-once" */
1092	`@/pages/changeStudents/changeStudents.vue`	1092	`@/pages/changeStudents/changeStudents.vue`
1093	)	1093	)
1094	},	1094	},
1095	{	1095	{
1096	path: '/annoucement',	1096	path: '/annoucement',
1097	meta: {},	1097	meta: {},
1098	name: 'Annoucement',	1098	name: 'Annoucement',
1099	props: (route) => ({	1099	props: (route) => ({
1100	type: route.query.type	1100	type: route.query.type
1101	}),	1101	}),
1102	component: () =>	1102	component: () =>
1103	import(	1103	import(
1104	/* webpackChunkName: "routes" */	1104	/* webpackChunkName: "routes" */
1105	/* webpackMode: "lazy-once" */	1105	/* webpackMode: "lazy-once" */
1106	`@/pages/Annoucement/annoucement.vue`	1106	`@/pages/Annoucement/annoucement.vue`
1107	)	1107	)
1108	},	1108	},
1109	{	1109	{
1110	path: '/meetingEvent',	1110	path: '/meetingEvent',
1111	meta: {},	1111	meta: {},
1112	name: 'Meeting Event',	1112	name: 'Meeting Event',
1113	props: (route) => ({	1113	props: (route) => ({
1114	type: route.query.type	1114	type: route.query.type
1115	}),	1115	}),
1116	component: () =>	1116	component: () =>
1117	import(	1117	import(
1118	/* webpackChunkName: "routes" */	1118	/* webpackChunkName: "routes" */
1119	/* webpackMode: "lazy-once" */	1119	/* webpackMode: "lazy-once" */
1120	`@/pages/meetingEvent/meetingEvent.vue`	1120	`@/pages/meetingEvent/meetingEvent.vue`
1121	)	1121	)
1122	},	1122	},
1123	//////SCHOOL	1123	//////SCHOOL
1124		1124
1125	{	1125	{
1126	path: '/school',	1126	path: '/school',
1127	meta: {},	1127	meta: {},
1128	name: 'School',	1128	name: 'School',
1129	props: (route) => ({	1129	props: (route) => ({
1130	type: route.query.type	1130	type: route.query.type
1131	}),	1131	}),
1132	component: () =>	1132	component: () =>
1133	import(	1133	import(
1134	/* webpackChunkName: "routes" */	1134	/* webpackChunkName: "routes" */
1135	/* webpackMode: "lazy-once" */	1135	/* webpackMode: "lazy-once" */
1136	`@/pages/School/school.vue`	1136	`@/pages/School/school.vue`
1137	)	1137	)
1138	},	1138	},
1139	{	1139	{
1140	path: '/schooldashboard',	1140	path: '/appVersion',
1141	meta: {},	1141	meta: {},
1142	name: 'View School Dashboard',	1142	name: 'App Version',
1143	props: (route) => ({	1143	props: (route) => ({
1144	type: route.query.type	1144	type: route.query.type
1145	}),	1145	}),
1146	component: () =>	1146	component: () =>
1147	import(	1147	import(
1148	/* webpackChunkName: "routes" */	1148	/* webpackChunkName: "routes" */
1149	/* webpackMode: "lazy-once" */	1149	/* webpackMode: "lazy-once" */
1150	`@/pages/School/viewSchoolDashboard.vue`	1150	`@/pages/School/appVersion.vue`
1151	)	1151	)
1152	}	1152	},
		1153	{
		1154	path: '/schooldashboard',
		1155	meta: {},
		1156	name: 'View School Dashboard',
		1157	props: (route) => ({
		1158	type: route.query.type
		1159	}),
		1160	component: () =>
		1161	import(
		1162	/* webpackChunkName: "routes" */
		1163	/* webpackMode: "lazy-once" */
		1164	`@/pages/School/viewSchoolDashboard.vue`
		1165	)
		1166	}
1153	];	1167	];

static/icon/phone.png

Diff comments View file @1e1e364

297 Bytes