viithiisys / School-Management-dashboard

Browse Code »

Commit 01a4a5246d77ebe4d7c0095b3b91f9d95bd9bf3c

Authored by Shikha Mishra 2020-08-14 09:57:03 -0400

1 parent 2f9211c744

Exists in master and in 2 other branches

When the modal was closed, the data to be displayed was also deleted is corrected

Showing 8 changed files with 65 additions and 40 deletions Show diff stats

src/pages/Academic/assignment.vue

Diff comments View file @01a4a52

1	<template>	1	<template>
2	<v-container fluid class="body-color">	2	<v-container fluid class="body-color">
3	<!-- **** EDIT Assignment **** -->	3	<!-- **** EDIT Assignment **** -->
4	<v-dialog v-model="editAssignmentDialog" max-width="400px">	4	<v-dialog v-model="editAssignmentDialog" max-width="400px">
5	<v-card flat class="card-style pa-2" dark>	5	<v-card flat class="card-style pa-2" dark>
6	<v-layout>	6	<v-layout>
7	<v-flex xs12>	7	<v-flex xs12>
8	<label class="title text-xs-center">Edit Assignment</label>	8	<label class="title text-xs-center">Edit Assignment</label>
9	<v-icon size="24" class="right" @click="editAssignmentDialog = false">cancel</v-icon>	9	<v-icon size="24" class="right" @click="editAssignmentDialog = false">cancel</v-icon>
10	</v-flex>	10	</v-flex>
11	</v-layout>	11	</v-layout>
12	<v-container fluid>	12	<v-container fluid>
13	<v-form ref="formEditAssignment" v-model="validEditAssignment" lazy-validation>	13	<v-form ref="formEditAssignment" v-model="validEditAssignment" lazy-validation>
14	<v-layout>	14	<v-layout>
15	<v-flex xs4 class="pt-4 subheading">	15	<v-flex xs4 class="pt-4 subheading">
16	<label class="right">Title:</label>	16	<label class="right">Title:</label>
17	</v-flex>	17	</v-flex>
18	<v-flex xs8 class="ml-3">	18	<v-flex xs8 class="ml-3">
19	<v-text-field v-model="editedItem.title" type="text" :rules="titleRules" required></v-text-field>	19	<v-text-field v-model="editedItem.title" type="text" :rules="titleRules" required></v-text-field>
20	</v-flex>	20	</v-flex>
21	</v-layout>	21	</v-layout>
22	<v-layout>	22	<v-layout>
23	<v-flex xs4 class="pt-4 subheading">	23	<v-flex xs4 class="pt-4 subheading">
24	<label class="right">Description:</label>	24	<label class="right">Description:</label>
25	</v-flex>	25	</v-flex>
26	<v-flex xs8 class="ml-3">	26	<v-flex xs8 class="ml-3">
27	<v-text-field	27	<v-text-field
28	v-model="editedItem.description"	28	v-model="editedItem.description"
29	type="text"	29	type="text"
30	:rules="deadlineRules"	30	:rules="deadlineRules"
31	required	31	required
32	></v-text-field>	32	></v-text-field>
33	</v-flex>	33	</v-flex>
34	</v-layout>	34	</v-layout>
35	<v-layout>	35	<v-layout>
36	<v-flex xs4 class="pt-4 subheading">	36	<v-flex xs4 class="pt-4 subheading">
37	<label class="right">Deadline:</label>	37	<label class="right">Deadline:</label>
38	</v-flex>	38	</v-flex>
39	<v-flex xs8 class="ml-3">	39	<v-flex xs8 class="ml-3">
40	<v-menu	40	<v-menu
41	ref="menu1"	41	ref="menu1"
42	:close-on-content-click="false"	42	:close-on-content-click="false"
43	v-model="menu1"	43	v-model="menu1"
44	:nudge-right="40"	44	:nudge-right="40"
45	:return-value.sync="menu1"	45	:return-value.sync="menu1"
46	lazy	46	lazy
47	transition="scale-transition"	47	transition="scale-transition"
48	offset-y	48	offset-y
49	full-width	49	full-width
50	min-width="290px"	50	min-width="290px"
51	>	51	>
52	<v-text-field	52	<v-text-field
53	slot="activator"	53	slot="activator"
54	v-model="editedItem.deadline"	54	v-model="editedItem.deadline"
55	placeholder="Select Date"	55	placeholder="Select Date"
56	:rules="deadlineRules"	56	:rules="deadlineRules"
57	append-icon="event"	57	append-icon="event"
58	required	58	required
59	></v-text-field>	59	></v-text-field>
60	<v-date-picker v-model="editedItem.date" @input="menu1 = false"></v-date-picker>	60	<v-date-picker v-model="editedItem.date" @input="menu1 = false"></v-date-picker>
61	</v-menu>	61	</v-menu>
62	</v-flex>	62	</v-flex>
63	</v-layout>	63	</v-layout>
64	<v-layout>	64	<v-layout>
65	<v-flex xs4 class="pt-4 subheading">	65	<v-flex xs4 class="pt-4 subheading">
66	<label class="right">Class:</label>	66	<label class="right">Class:</label>
67	</v-flex>	67	</v-flex>
68	<v-flex xs8 class="ml-3">	68	<v-flex xs8 class="ml-3">
69	<v-select	69	<v-select
70	:items="classList"	70	:items="classList"
71	item-text="classNum"	71	item-text="classNum"
72	item-value="_id"	72	item-value="_id"
73	:rules="classRules"	73	:rules="classRules"
74	v-model="editedItem.classId"	74	v-model="editedItem.classId"
75	@change="getSections(editedItem.classId)"	75	@change="getSections(editedItem.classId)"
76	required	76	required
77	></v-select>	77	></v-select>
78	</v-flex>	78	</v-flex>
79	</v-layout>	79	</v-layout>
80	<v-layout>	80	<v-layout>
81	<v-flex xs4 class="pt-4 subheading">	81	<v-flex xs4 class="pt-4 subheading">
82	<label class="right">Section:</label>	82	<label class="right">Section:</label>
83	</v-flex>	83	</v-flex>
84	<v-flex xs8 class="ml-3">	84	<v-flex xs8 class="ml-3">
85	<v-select	85	<v-select
86	:items="addSection"	86	:items="addSection"
87	item-text="name"	87	item-text="name"
88	item-value="_id"	88	item-value="_id"
89	v-model="editedItem.sectionId"	89	v-model="editedItem.sectionId"
90	:rules="sectionRules"	90	:rules="sectionRules"
91	@change="getClassSubject(editedItem.classId)"	91	@change="getClassSubject(editedItem.classId)"
92	required	92	required
93	></v-select>	93	></v-select>
94	</v-flex>	94	</v-flex>
95	</v-layout>	95	</v-layout>
96	<v-layout>	96	<v-layout>
97	<v-flex xs4 class="pt-4 subheading">	97	<v-flex xs4 class="pt-4 subheading">
98	<label class="right">Subject</label>	98	<label class="right">Subject</label>
99	</v-flex>	99	</v-flex>
100	<v-flex xs8 class="ml-3">	100	<v-flex xs8 class="ml-3">
101	<v-select	101	<v-select
102	:items="subjectList.subjects"	102	:items="subjectList.subjects"
103	v-model="editedItem.subjectName"	103	v-model="editedItem.subjectName"
104	item-text="subjectName"	104	item-text="subjectName"
105	item-value="_id"	105	item-value="_id"
106	:rules="subjectRules"	106	:rules="subjectRules"
107	required	107	required
108	></v-select>	108	></v-select>
109	</v-flex>	109	</v-flex>
110	</v-layout>	110	</v-layout>
111	<v-layout>	111	<v-layout>
112	<v-flex xs4 class="pt-4 subheading">	112	<v-flex xs4 class="pt-4 subheading">
113	<label class="right hidden-xs-only hidden-sm-only">Uplaod File:</label>	113	<label class="right hidden-xs-only hidden-sm-only">Uplaod File:</label>
114	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">File :</label>	114	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">File :</label>
115	</v-flex>	115	</v-flex>
116	<v-flex xs8 sm8 class="ml-3">	116	<v-flex xs8 sm8 class="ml-3">
117	<v-text-field	117	<v-text-field
118	label="Select File"	118	label="Select File"
119	@click="pickFile"	119	@click="pickFile"
120	v-model="imageName"	120	v-model="imageName"
121	append-icon="attach_file"	121	append-icon="attach_file"
122	></v-text-field>	122	></v-text-field>
123	</v-flex>	123	</v-flex>
124	</v-layout>	124	</v-layout>
125	<v-flex xs12 sm12>	125	<v-flex xs12 sm12>
126	<v-card-actions>	126	<v-card-actions>
127	<v-spacer></v-spacer>	127	<v-spacer></v-spacer>
128	<v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn>	128	<v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn>
129	</v-card-actions>	129	</v-card-actions>
130	</v-flex>	130	</v-flex>
131	</v-form>	131	</v-form>
132	</v-container>	132	</v-container>
133	</v-card>	133	</v-card>
134	</v-dialog>	134	</v-dialog>
135		135
136	<!-- **** VIEW PROFIL NOTICE BOARD **** -->	136	<!-- **** VIEW PROFIL NOTICE BOARD **** -->
137	<v-dialog v-model="viewAssignmentDialog" max-width="500px">	137	<v-dialog v-model="viewAssignmentDialog" max-width="500px">
138	<v-card flat class="card-style pa-3" dark>	138	<v-card flat class="card-style pa-3" dark>
139	<v-layout>	139	<v-layout>
140	<v-flex xs12>	140	<v-flex xs12>
141	<label class="title text-xs-center">View Attendence</label>	141	<label class="title text-xs-center">View Attendence</label>
142	<v-icon size="24" class="right" @click="viewAssignmentDialog = false">cancel</v-icon>	142	<v-icon size="24" class="right" @click="viewAssignmentDialog = false">cancel</v-icon>
143	</v-flex>	143	</v-flex>
144	</v-layout>	144	</v-layout>
145	<v-card-text>	145	<v-card-text>
146	<v-container grid-list-md>	146	<v-container grid-list-md>
147	<v-layout wrap>	147	<v-layout wrap>
148	<v-flex>	148	<v-flex>
149	<v-layout>	149	<v-layout>
150	<v-flex xs6 sm4>	150	<v-flex xs6 sm4>
151	<h5 class="right my-1">	151	<h5 class="right my-1">
152	<b>Title:</b>	152	<b>Title:</b>
153	</h5>	153	</h5>
154	</v-flex>	154	</v-flex>
155	<v-flex sm8 xs6>	155	<v-flex sm8 xs6>
156	<h5 class="my-1">{{ editedItem.title }}</h5>	156	<h5 class="my-1">{{ editedItem.title }}</h5>
157	</v-flex>	157	</v-flex>
158	</v-layout>	158	</v-layout>
159	<v-layout>	159	<v-layout>
160	<v-flex xs6 sm4>	160	<v-flex xs6 sm4>
161	<h5 class="right my-1">	161	<h5 class="right my-1">
162	<b>Description:</b>	162	<b>Description:</b>
163	</h5>	163	</h5>
164	</v-flex>	164	</v-flex>
165	<v-flex sm8 xs6>	165	<v-flex sm8 xs6>
166	<h5 class="my-1">{{ editedItem.description }}</h5>	166	<h5 class="my-1">{{ editedItem.description }}</h5>
167	</v-flex>	167	</v-flex>
168	</v-layout>	168	</v-layout>
169	<v-layout>	169	<v-layout>
170	<v-flex xs6 sm4>	170	<v-flex xs6 sm4>
171	<h5 class="right my-1">	171	<h5 class="right my-1">
172	<b>Deadline:</b>	172	<b>Deadline:</b>
173	</h5>	173	</h5>
174	</v-flex>	174	</v-flex>
175	<v-flex sm8 xs6>	175	<v-flex sm8 xs6>
176	<h5 class="my-1">{{ dates(editedItem.deadline) }}</h5>	176	<h5 class="my-1">{{ dates(editedItem.deadline) }}</h5>
177	</v-flex>	177	</v-flex>
178	</v-layout>	178	</v-layout>
179	</v-flex>	179	</v-flex>
180	</v-layout>	180	</v-layout>
181	</v-container>	181	</v-container>
182	</v-card-text>	182	</v-card-text>
183	</v-card>	183	</v-card>
184	</v-dialog>	184	</v-dialog>
185		185
186	<!-- **** EXISTING ASSIGNMENT TABLE **** -->	186	<!-- **** EXISTING ASSIGNMENT TABLE **** -->
187	<v-toolbar color="transparent" flat>	187	<v-toolbar color="transparent" flat>
188	<v-btn	188	<v-btn
189	fab	189	fab
190	dark	190	dark
191	class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"	191	class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
192	small	192	small
193	@click="addAssignmentDialog = true"	193	@click="addAssignmentDialog = true"
194	>	194	>
195	<v-icon dark>add</v-icon>	195	<v-icon dark>add</v-icon>
196	</v-btn>	196	</v-btn>
197	<v-flex xs1 class="hidden-sm-only hidden-xs-only">	197	<v-flex xs1 class="hidden-sm-only hidden-xs-only">
198	<v-btn round class="open-dialog-button" dark @click="addAssignmentDialog = true">	198	<v-btn round class="open-dialog-button" dark @click="addAssignmentDialog = true">
199	<v-icon class="white--text pr-1" size="20">add</v-icon>Add Assignment	199	<v-icon class="white--text pr-1" size="20">add</v-icon>Add Assignment
200	</v-btn>	200	</v-btn>
201	</v-flex>	201	</v-flex>
202	<v-spacer></v-spacer>	202	<v-spacer></v-spacer>
203	<v-flex lg2 md2 xs12 v-show="show">	203	<v-flex lg2 md2 xs12 v-show="show">
204	<v-select	204	<v-select
205	:items="classList"	205	:items="classList"
206	placeholder="Select Your Class"	206	placeholder="Select Your Class"
207	v-model="showAssignment.classId"	207	v-model="showAssignment.classId"
208	item-text="classNum"	208	item-text="classNum"
209	item-value="_id"	209	item-value="_id"
210	name="Select Class"	210	name="Select Class"
211	:rules="classRules"	211	:rules="classRules"
212	@change="getAssignmentList()"	212	@change="getAssignmentList()"
213	class="pl-2"	213	class="pl-2"
214	required	214	required
215	></v-select>	215	></v-select>
216	</v-flex>	216	</v-flex>
217	<v-card-title class="body-1" v-show="show">	217	<v-card-title class="body-1" v-show="show">
218	<v-btn icon flat @click="displaySearch">	218	<v-btn icon flat @click="displaySearch">
219	<v-avatar size="27">	219	<v-avatar size="27">
220	<img src="/static/icon/search.png" alt="icon" />	220	<img src="/static/icon/search.png" alt="icon" />
221	</v-avatar>	221	</v-avatar>
222	</v-btn>	222	</v-btn>
223	</v-card-title>	223	</v-card-title>
224	<v-flex xs9 sm9 md2 lg2 xl2 v-if="showSearch">	224	<v-flex xs9 sm9 md2 lg2 xl2 v-if="showSearch">
225	<v-layout>	225	<v-layout>
226	<v-text-field	226	<v-text-field
227	v-model="search"	227	v-model="search"
228	placeholder="Search"	228	placeholder="Search"
229	prepend-inner-icon="search"	229	prepend-inner-icon="search"
230	color="primary"	230	color="primary"
231	autofocus	231	autofocus
232	style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important"	232	style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important"
233	></v-text-field>	233	></v-text-field>
234	<v-icon @click="closeSearch" color="error">close</v-icon>	234	<v-icon @click="closeSearch" color="error">close</v-icon>
235	</v-layout>	235	</v-layout>
236	</v-flex>	236	</v-flex>
237	</v-toolbar>	237	</v-toolbar>
238	<v-data-table	238	<v-data-table
239	:headers="headers"	239	:headers="headers"
240	:items="assignmentData"	240	:items="assignmentData"
241	:pagination.sync="pagination"	241	:pagination.sync="pagination"
242	:search="search"	242	:search="search"
243	>	243	>
244	<template slot="items" slot-scope="props">	244	<template slot="items" slot-scope="props">
245	<tr class="tr">	245	<tr class="tr">
246	<td class="td-row td">{{ props.index + 1 }}</td>	246	<td class="td-row td">{{ props.index + 1 }}</td>
247	<td class="text-xs-center td td-row">{{ props.item.title }}</td>	247	<td class="text-xs-center td td-row">{{ props.item.title }}</td>
248	<td class="text-xs-center td td-row">{{ props.item.description }}</td>	248	<td class="text-xs-center td td-row">{{ props.item.description }}</td>
249	<td class="text-xs-center td td-row">{{ props.item.deadline }}</td>	249	<td class="text-xs-center td td-row">{{ props.item.deadline }}</td>
250	<td class="text-xs-center td td-row">{{ props.item.sectionId.name }}</td>	250	<td class="text-xs-center td td-row">{{ props.item.sectionId.name }}</td>
251	<td	251	<td
252	class="text-xs-center td td-row"	252	class="text-xs-center td td-row"
253	v-if="role != 'TEACHER' "	253	v-if="role != 'TEACHER' "
254	>{{ props.item.teacherId.name }}</td>	254	>{{ props.item.teacherId.name }}</td>
255	<td	255	<td
256	class="text-xs-center td td-row"	256	class="text-xs-center td td-row"
257	v-if="role != 'ADMIN'"	257	v-if="role != 'ADMIN'"
258	>{{ props.item.schoolId .name }}</td>	258	>{{ props.item.schoolId .name }}</td>
259	<td class="text-xs-center td td-row">	259	<td class="text-xs-center td td-row">
260	<v-btn	260	<v-btn
261	class="add-button"	261	class="add-button"
262	@click="generatePDF2Canvas(props.item)"	262	@click="generatePDF2Canvas(props.item)"
263	:loading="loadingPdf"	263	:loading="loadingPdf"
264	dark	264	dark
265	>{{ props.item.fileType }}</v-btn>	265	>{{ props.item.fileType }}</v-btn>
266	</td>	266	</td>
267	<td class="text-xs-center td td-row">	267	<td class="text-xs-center td td-row">
268	<span>	268	<span>
269	<v-tooltip top>	269	<v-tooltip top>
270	<img	270	<img
271	slot="activator"	271	slot="activator"
272	style="cursor:pointer; width:25px; height:25px; "	272	style="cursor:pointer; width:25px; height:25px; "
273	class="mr-3"	273	class="mr-3"
274	@click="profile(props.item)"	274	@click="profile(props.item)"
275	src="/static/icon/view.png"	275	src="/static/icon/view.png"
276	/>	276	/>
277	<span>View</span>	277	<span>View</span>
278	</v-tooltip>	278	</v-tooltip>
279	<v-tooltip top>	279	<v-tooltip top>
280	<img	280	<img
281	slot="activator"	281	slot="activator"
282	style="cursor:pointer; width:20px; height:18px; "	282	style="cursor:pointer; width:20px; height:18px; "
283	class="mr-3"	283	class="mr-3"
284	@click="editItem(props.item)"	284	@click="editItem(props.item)"
285	src="/static/icon/edit.png"	285	src="/static/icon/edit.png"
286	/>	286	/>
287	<span>Edit</span>	287	<span>Edit</span>
288	</v-tooltip>	288	</v-tooltip>
289	<v-tooltip top>	289	<v-tooltip top>
290	<img	290	<img
291	slot="activator"	291	slot="activator"
292	style="cursor:pointer; width:20px; height:20px; "	292	style="cursor:pointer; width:20px; height:20px; "
293	class="mr-3"	293	class="mr-3"
294	@click="deleteItem(props.item)"	294	@click="deleteItem(props.item)"
295	src="/static/icon/delete.png"	295	src="/static/icon/delete.png"
296	/>	296	/>
297	<span>Delete</span>	297	<span>Delete</span>
298	</v-tooltip>	298	</v-tooltip>
299	</span>	299	</span>
300	</td>	300	</td>
301	</tr>	301	</tr>
302	</template>	302	</template>
303	<v-alert	303	<v-alert
304	slot="no-results"	304	slot="no-results"
305	:value="true"	305	:value="true"
306	color="error"	306	color="error"
307	icon="warning"	307	icon="warning"
308	>Your search for "{{ search }}" found no results.</v-alert>	308	>Your search for "{{ search }}" found no results.</v-alert>
309	</v-data-table>	309	</v-data-table>
310	<!-- **** ADD MULTIPLE Subject **** -->	310	<!-- **** ADD MULTIPLE Subject **** -->
311	<v-snackbar	311	<v-snackbar
312	:timeout="timeout"	312	:timeout="timeout"
313	:top="y === 'top'"	313	:top="y === 'top'"
314	:right="x === 'right'"	314	:right="x === 'right'"
315	:vertical="mode === 'vertical'"	315	:vertical="mode === 'vertical'"
316	v-model="snackbar"	316	v-model="snackbar"
317	:color="color"	317	:color="color"
318	>{{ text }}</v-snackbar>	318	>{{ text }}</v-snackbar>
319	<v-dialog v-model="addAssignmentDialog" max-width="400px" v-if="addAssignmentDialog">	319	<v-dialog v-model="addAssignmentDialog" max-width="400px" v-if="addAssignmentDialog">
320	<v-card flat class="card-style pa-2" dark>	320	<v-card flat class="card-style pa-2" dark>
321	<v-layout>	321	<v-layout>
322	<v-flex xs12>	322	<v-flex xs12>
323	<label class="title text-xs-center">Add Assignment</label>	323	<label class="title text-xs-center">Add Assignment</label>
324	<v-icon size="24" class="right" @click="closeAddAssignmentModel">cancel</v-icon>	324	<v-icon size="24" class="right" @click="closeAddAssignmentModel">cancel</v-icon>
325	</v-flex>	325	</v-flex>
326	</v-layout>	326	</v-layout>
327	<v-container fluid fill-height>	327	<v-container fluid fill-height>
328	<v-layout align-center>	328	<v-layout align-center>
329	<v-flex xs12>	329	<v-flex xs12>
330	<v-form ref="form" v-model="valid" lazy-validation>	330	<v-form ref="form" v-model="valid" lazy-validation>
331	<v-layout>	331	<v-layout>
332	<v-flex xs4 sm4 class="pt-4 subheading">	332	<v-flex xs4 sm4 class="pt-4 subheading">
333	<label class="right">Title :</label>	333	<label class="right">Title :</label>
334	</v-flex>	334	</v-flex>
335	<v-flex xs8 sm8 class="ml-3">	335	<v-flex xs8 sm8 class="ml-3">
336	<v-text-field	336	<v-text-field
337	name="name"	337	name="name"
338	type="text"	338	type="text"
339	placeholder="Select Title"	339	placeholder="Select Title"
340	:rules="titleRules"	340	:rules="titleRules"
341	v-model="addAssignment.title"	341	v-model="addAssignment.title"
342	required	342	required
343	></v-text-field>	343	></v-text-field>
344	</v-flex>	344	</v-flex>
345	</v-layout>	345	</v-layout>
346	<v-layout>	346	<v-layout>
347	<v-flex xs4 sm4 class="pt-4 subheading">	347	<v-flex xs4 sm4 class="pt-4 subheading">
348	<label class="right">Description :</label>	348	<label class="right">Description :</label>
349	</v-flex>	349	</v-flex>
350	<v-flex xs8 sm8 class="ml-3">	350	<v-flex xs8 sm8 class="ml-3">
351	<v-text-field	351	<v-text-field
352	name="name"	352	name="name"
353	type="text"	353	type="text"
354	placeholder="Select Description"	354	placeholder="Select Description"
355	:rules="descriptionRules"	355	:rules="descriptionRules"
356	v-model="addAssignment.description"	356	v-model="addAssignment.description"
357	required	357	required
358	></v-text-field>	358	></v-text-field>
359	</v-flex>	359	</v-flex>
360	</v-layout>	360	</v-layout>
361	<v-layout>	361	<v-layout>
362	<v-flex xs4 sm4 class="pt-4 subheading">	362	<v-flex xs4 sm4 class="pt-4 subheading">
363	<label class="right">Deadline :</label>	363	<label class="right">Deadline :</label>
364	</v-flex>	364	</v-flex>
365	<v-flex xs8 sm7 class="ml-3">	365	<v-flex xs8 sm7 class="ml-3">
366	<v-menu	366	<v-menu
367	ref="menu2"	367	ref="menu2"
368	:close-on-content-click="false"	368	:close-on-content-click="false"
369	v-model="menu2"	369	v-model="menu2"
370	:nudge-right="40"	370	:nudge-right="40"
371	:return-value.sync="addAssignment.date"	371	:return-value.sync="addAssignment.date"
372	lazy	372	lazy
373	transition="scale-transition"	373	transition="scale-transition"
374	offset-y	374	offset-y
375	full-width	375	full-width
376	min-width="290px"	376	min-width="290px"
377	>	377	>
378	<v-text-field	378	<v-text-field
379	slot="activator"	379	slot="activator"
380	v-model="addAssignment.deadline"	380	v-model="addAssignment.deadline"
381	:rules="deadlineRules"	381	:rules="deadlineRules"
382	placeholder="Select Date"	382	placeholder="Select Date"
383	append-icon="event"	383	append-icon="event"
384	readonly	384	readonly
385	></v-text-field>	385	></v-text-field>
386	<v-date-picker	386	<v-date-picker
387	v-model="addAssignment.deadline"	387	v-model="addAssignment.deadline"
388	@input="$refs.menu2.save(addAssignment.date)"	388	@input="$refs.menu2.save(addAssignment.date)"
389	></v-date-picker>	389	></v-date-picker>
390	</v-menu>	390	</v-menu>
391	</v-flex>	391	</v-flex>
392	</v-layout>	392	</v-layout>
393	<v-layout>	393	<v-layout>
394	<v-flex xs4 sm4 class="pt-4 subheading">	394	<v-flex xs4 sm4 class="pt-4 subheading">
395	<label class="right">Class :</label>	395	<label class="right">Class :</label>
396	</v-flex>	396	</v-flex>
397	<v-flex xs8 sm8 class="ml-3">	397	<v-flex xs8 sm8 class="ml-3">
398	<v-select	398	<v-select
399	:items="classList"	399	:items="classList"
400	placeholder="Select Class"	400	placeholder="Select Class"
401	item-text="classNum"	401	item-text="classNum"
402	item-value="_id"	402	item-value="_id"
403	v-model="addAssignment.classId"	403	v-model="addAssignment.classId"
404	name="Select Class"	404	name="Select Class"
405	:rules="classRules"	405	:rules="classRules"
406	@change="getSections(addAssignment.classId)"	406	@change="getSections(addAssignment.classId)"
407	class="pl-2"	407	class="pl-2"
408	required	408	required
409	></v-select>	409	></v-select>
410	</v-flex>	410	</v-flex>
411	</v-layout>	411	</v-layout>
412	<v-layout>	412	<v-layout>
413	<v-flex xs4 sm4 class="pt-4 subheading">	413	<v-flex xs4 sm4 class="pt-4 subheading">
414	<label class="right">Section :</label>	414	<label class="right">Section :</label>
415	</v-flex>	415	</v-flex>
416	<v-flex xs8 sm8 class="ml-3">	416	<v-flex xs8 sm8 class="ml-3">
417	<v-select	417	<v-select
418	:items="addSection"	418	:items="addSection"
419	placeholder="Select Section"	419	placeholder="Select Section"
420	item-text="name"	420	item-text="name"
421	item-value="_id"	421	item-value="_id"
422	v-model="addAssignment.sectionId"	422	v-model="addAssignment.sectionId"
423	name="Select Section"	423	name="Select Section"
424	:rules="sectionRules"	424	:rules="sectionRules"
425	@change="getClassSubject(addAssignment.classId)"	425	@change="getClassSubject(addAssignment.classId)"
426	class="px-2"	426	class="px-2"
427	required	427	required
428	></v-select>	428	></v-select>
429	</v-flex>	429	</v-flex>
430	</v-layout>	430	</v-layout>
431	<v-layout>	431	<v-layout>
432	<v-flex xs3 sm4 class="pt-4 subheading">	432	<v-flex xs3 sm4 class="pt-4 subheading">
433	<label class="right">Subject :</label>	433	<label class="right">Subject :</label>
434	</v-flex>	434	</v-flex>
435	<v-flex xs8 sm8 class="ml-2">	435	<v-flex xs8 sm8 class="ml-2">
436	<v-select	436	<v-select
437	:items="subjectList.subjects"	437	:items="subjectList.subjects"
438	placeholder="Select your subject"	438	placeholder="Select your subject"
439	v-model="addAssignment.subjectName"	439	v-model="addAssignment.subjectName"
440	item-text="subjectName"	440	item-text="subjectName"
441	item-value="_id"	441	item-value="_id"
442	:rules="subjectRules"	442	:rules="subjectRules"
443	required	443	required
444	></v-select>	444	></v-select>
445	</v-flex>	445	</v-flex>
446	</v-layout>	446	</v-layout>
447	<v-layout>	447	<v-layout>
448	<v-flex xs4 class="pt-4 subheading">	448	<v-flex xs4 class="pt-4 subheading">
449	<label class="right hidden-xs-only hidden-sm-only">Uplaod File:</label>	449	<label class="right hidden-xs-only hidden-sm-only">Uplaod File:</label>
450	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">File:</label>	450	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">File:</label>
451	</v-flex>	451	</v-flex>
452	<v-flex xs8 class="ml-3">	452	<v-flex xs8 class="ml-3">
453	<v-text-field	453	<v-text-field
454	placeholder="Select File"	454	placeholder="Select File"
455	@click="pickFile"	455	@click="pickFile"
456	v-model="imageName"	456	v-model="imageName"
457	append-icon="attach_file"	457	append-icon="attach_file"
458	></v-text-field>	458	></v-text-field>
459	<input	459	<input
460	type="file"	460	type="file"
461	style="display:none"	461	style="display:none"
462	ref="image"	462	ref="image"
463	accept="image/*"	463	accept="image/*"
464	@change="onFilePicked"	464	@change="onFilePicked"
465	/>	465	/>
466	</v-flex>	466	</v-flex>
467	</v-layout>	467	</v-layout>
468	<v-layout>	468	<v-layout>
469	<v-flex xs12 sm12>	469	<v-flex xs12 sm12>
470	<v-card-actions>	470	<v-card-actions>
471	<v-spacer></v-spacer>	471	<v-spacer></v-spacer>
472	<v-btn	472	<v-btn
473	@click="submit"	473	@click="submit"
474	round	474	round
475	dark	475	dark
476	:loading="loading"	476	:loading="loading"
477	class="add-button"	477	class="add-button"
478	>Add Assignment</v-btn>	478	>Add Assignment</v-btn>
479	</v-card-actions>	479	</v-card-actions>
480	</v-flex>	480	</v-flex>
481	</v-layout>	481	</v-layout>
482	</v-form>	482	</v-form>
483	</v-flex>	483	</v-flex>
484	</v-layout>	484	</v-layout>
485	</v-container>	485	</v-container>
486	</v-card>	486	</v-card>
487	</v-dialog>	487	</v-dialog>
488	<div class="loader" v-if="showLoader">	488	<div class="loader" v-if="showLoader">
489	<v-progress-circular indeterminate color="white"></v-progress-circular>	489	<v-progress-circular indeterminate color="white"></v-progress-circular>
490	</div>	490	</div>
491	</v-container>	491	</v-container>
492	</template>	492	</template>
493		493
494	<script>	494	<script>
495	import http from "@/Services/http.js";	495	import http from "@/Services/http.js";
496	import Util from "@/util";	496	import Util from "@/util";
497	import moment from "moment";	497	import moment from "moment";
498	import jsPDF from "jspdf";	498	import jsPDF from "jspdf";
499	import { saveAs } from "file-saver";	499	import { saveAs } from "file-saver";
500		500
501	export default {	501	export default {
502	data: () => ({	502	data: () => ({
503	snackbar: false,	503	snackbar: false,
504	role: "",	504	role: "",
505	menu1: false,	505	menu1: false,
506	menu2: false,	506	menu2: false,
507	y: "top",	507	y: "top",
508	x: "right",	508	x: "right",
509	mode: "",	509	mode: "",
510	timeout: 3000,	510	timeout: 3000,
511	text: "",	511	text: "",
512	color: "",	512	color: "",
513	show: true,	513	show: true,
514	showSearch: false,	514	showSearch: false,
515	showLoader: false,	515	showLoader: false,
516	loading: false,	516	loading: false,
517	editLoading: false,	517	editLoading: false,
518	date: null,	518	date: null,
519	search: "",	519	search: "",
520	viewAssignmentDialog: false,	520	viewAssignmentDialog: false,
521	editAssignmentDialog: false,	521	editAssignmentDialog: false,
522	valid: true,	522	valid: true,
523	validEditAssignment: true,	523	validEditAssignment: true,
524	addAssignmentDialog: false,	524	addAssignmentDialog: false,
525		525
526	pagination: {	526	pagination: {
527	rowsPerPage: 10,	527	rowsPerPage: 10,
528	},	528	},
529	token: "",	529	token: "",
530	headers: [	530	headers: [
531	{	531	{
532	text: "No",	532	text: "No",
533	align: "",	533	align: "",
534	sortable: false,	534	sortable: false,
535	value: "No",	535	value: "No",
536	},	536	},
537	{	537	{
538	text: "Title",	538	text: "Title",
539	value: "title",	539	value: "title",
540	sortable: false,	540	sortable: false,
541	align: "center",	541	align: "center",
542	},	542	},
543	{	543	{
544	text: "Description",	544	text: "Description",
545	value: "description",	545	value: "description",
546	sortable: false,	546	sortable: false,
547	align: "center",	547	align: "center",
548	},	548	},
549	{	549	{
550	text: "Deadline",	550	text: "Deadline",
551	value: "deadline",	551	value: "deadline",
552	sortable: false,	552	sortable: false,
553	align: "center",	553	align: "center",
554	},	554	},
555	{	555	{
556	text: "Section",	556	text: "Section",
557	value: "name",	557	value: "name",
558	sortable: false,	558	sortable: false,
559	align: "center",	559	align: "center",
560	},	560	},
561	{	561	{
562	text: "Uploader",	562	text: "Uploader",
563	value: "name",	563	value: "name",
564	sortable: false,	564	sortable: false,
565	align: "center",	565	align: "center",
566	},	566	},
567	{	567	{
568	text: "File",	568	text: "File",
569	value: "file",	569	value: "file",
570	sortable: false,	570	sortable: false,
571	align: "center",	571	align: "center",
572	},	572	},
573	{ text: "Action", value: "", sortable: false, align: "center" },	573	{ text: "Action", value: "", sortable: false, align: "center" },
574	],	574	],
575		575
576	showPdfData: false,	576	showPdfData: false,
577	loadingPdf: false,	577	loadingPdf: false,
578	hideData: true,	578	hideData: true,
579		579
580	assignmentData: [],	580	assignmentData: [],
581	subjectList: [],	581	subjectList: [],
582	classList: [],	582	classList: [],
583	addSection: [],	583	addSection: [],
584	editedIndex: -1,	584	editedIndex: -1,
585	addSubject: {},	585	addSubject: {},
586		586
587	editedItem: {	587	editedItem: {
588	title: "",	588	title: "",
589	description: "",	589	description: "",
590	deadline: "",	590	deadline: "",
591	classId: "",	591	classId: "",
592	sectionId: "",	592	sectionId: "",
593	subjectName: "",	593	subjectName: "",
594	fileType: "",	594	fileType: "",
595	},	595	},
596	addAssignment: {},	596	addAssignment: {},
597	showAssignment: {},	597	showAssignment: {},
598		598
599	imageData: {},	599	imageData: {},
600	imageName: "",	600	imageName: "",
601	imageUrl: "",	601	imageUrl: "",
602	imageFile: "",	602	imageFile: "",
603		603
604	titleRules: [(v) => !!v \|\| " Title is required"],	604	titleRules: [(v) => !!v \|\| " Title is required"],
605	descriptionRules: [(v) => !!v \|\| " Description is required"],	605	descriptionRules: [(v) => !!v \|\| " Description is required"],
606	deadlineRules: [(v) => !!v \|\| " Deadline is required"],	606	deadlineRules: [(v) => !!v \|\| " Deadline is required"],
607	classRules: [(v) => !!v \|\| "Class is required"],	607	classRules: [(v) => !!v \|\| "Class is required"],
608	sectionRules: [(v) => !!v \|\| "Section is required"],	608	sectionRules: [(v) => !!v \|\| "Section is required"],
609	subjectRules: [(v) => !!v \|\| "Student is required"],	609	subjectRules: [(v) => !!v \|\| "Student is required"],
610	fileRules: [(v) => !!v \|\| "File is required"],	610	fileRules: [(v) => !!v \|\| "File is required"],
611	}),	611	}),
612	watch: {	612	watch: {
613	addAssignmentDialog: function (val) {	613	addAssignmentDialog: function (val) {
614	if (!val) {	614	if (!val) {
615	this.addAssignment = [];	615	this.addAssignment = [];
616	this.imageName = "";	616	this.imageName = "";
617	}	617	}
618	},	618	},
619	},	619	},
620	methods: {	620	methods: {
621	dates: function (date) {	621	dates: function (date) {
622	return moment(date).format("MMMM DD, YYYY");	622	return moment(date).format("MMMM DD, YYYY");
623	},	623	},
624	pickFile() {	624	pickFile() {
625	this.$refs.image.click();	625	this.$refs.image.click();
626	},	626	},
627	editItem(item) {	627	editItem(item) {
628	this.editedIndex = this.assignmentData;	628	this.editedIndex = this.assignmentData;
629	this.editedItem = Object.assign({}, item);	629	this.editedItem = Object.assign({}, item);
630	this.dialog = true;	630	this.dialog = true;
631	this.editAssignmentDialog = true;	631	this.editAssignmentDialog = true;
632	},	632	},
633	profile(item) {	633	profile(item) {
634	this.editedIndex = this.assignmentData;	634	this.editedIndex = this.assignmentData;
635	this.editedItem = Object.assign({}, item);	635	this.editedItem = Object.assign({}, item);
636	this.dialog1 = true;	636	this.dialog1 = true;
637	this.viewAssignmentDialog = true;	637	this.viewAssignmentDialog = true;
638	},	638	},
639	deleteItem(item) {	639	deleteItem(item) {
640	let deleteAssignment = {	640	let deleteAssignment = {
641	assignmentId: item._id,	641	assignmentId: item._id,
642	};	642	};
643	http()	643	http()
644	.delete(	644	.delete(
645	"/deleteAssignment",	645	"/deleteAssignment",
646	confirm("Are you sure you want to delete this?") && {	646	confirm("Are you sure you want to delete this?") && {
647	params: deleteAssignment,	647	params: deleteAssignment,
648	},	648	},
649	{	649	{
650	headers: { Authorization: "Bearer " + this.token },	650	headers: { Authorization: "Bearer " + this.token },
651	}	651	}
652	)	652	)
653	.then((response) => {	653	.then((response) => {
654	this.getAssignmentList();	654	this.getAssignmentList();
655	this.snackbar = true;	655	this.snackbar = true;
656	this.text = "Successfully delete Existing Assignment";	656	this.text = "Successfully delete Existing Assignment";
657	this.color = "green";	657	this.color = "green";
658	})	658	})
659	.catch((error) => {	659	.catch((error) => {
660	this.snackbar = true;	660	this.snackbar = true;
661	this.text = error.response.data.message;	661	this.text = error.response.data.message;
662	this.color = "error";	662	this.color = "error";
663	});	663	});
664	},	664	},
665	close() {	665	close() {
666	this.editAssignmentDialog = false;	666	this.editAssignmentDialog = false;
667	},	667	},
668	close1() {	668	close1() {
669	this.viewAssignmentDialog = false;	669	this.viewAssignmentDialog = false;
670	},	670	},
671	closeAddAssignmentModel() {	671	closeAddAssignmentModel() {
672	this.addAssignmentDialog = false;	672	this.addAssignmentDialog = false;
673	this.assignmentData = [];	673	// this.assignmentData = [];
674	this.addAssignment = [];	674	this.addAssignment = [];
675	this.imageName = "";	675	this.imageName = "";
676	},	676	},
677	submit() {	677	submit() {
678	var addAssignment = {	678	var addAssignment = {
679	title: this.addAssignment.title,	679	title: this.addAssignment.title,
680	description: this.addAssignment.description,	680	description: this.addAssignment.description,
681	deadline: this.addAssignment.deadline,	681	deadline: this.addAssignment.deadline,
682	classId: this.addAssignment.classId,	682	classId: this.addAssignment.classId,
683	sectionId: this.addAssignment.sectionId,	683	sectionId: this.addAssignment.sectionId,
684	subjectName: this.addAssignment.subjectName,	684	subjectName: this.addAssignment.subjectName,
685	file: this.addAssignment.imageName,	685	file: this.addAssignment.imageName,
686	fileName: this.imageName,	686	fileName: this.imageName,
687	};	687	};
688	var signatures = {	688	var signatures = {
689	JVBERi0: "other",	689	JVBERi0: "other",
690	iVBORw0KGgo: "image",	690	iVBORw0KGgo: "image",
691	UEsDBBQ: "other",	691	UEsDBBQ: "other",
692	"/": "image",	692	"/": "image",
693	AAABAA: "image",	693	AAABAA: "image",
694	IywiV2hhdC: "other",	694	IywiV2hhdC: "other",
695	bmFtZSxl: "other",	695	bmFtZSxl: "other",
696	};	696	};
697	function detectMimeType(b64) {	697	function detectMimeType(b64) {
698	for (var s in signatures) {	698	for (var s in signatures) {
699	if (b64.indexOf(s) === 0) {	699	if (b64.indexOf(s) === 0) {
700	return signatures[s];	700	return signatures[s];
701	}	701	}
702	}	702	}
703	}	703	}
704	if (this.$refs.form.validate()) {	704	if (this.$refs.form.validate()) {
705	if (this.imageUrl) {	705	if (this.imageUrl) {
706	var str = this.imageUrl;	706	var str = this.imageUrl;
707	const [baseUrl, imageUrl] = str.split(/,/);	707	const [baseUrl, imageUrl] = str.split(/,/);
708	addAssignment.upload = imageUrl;	708	addAssignment.upload = imageUrl;
709	addAssignment.fileType = detectMimeType(imageUrl);	709	addAssignment.fileType = detectMimeType(imageUrl);
710	}	710	}
711	console.log("data===>", addAssignment);	711	console.log("data===>", addAssignment);
712	http()	712	http()
713	.post("/createAssignment", addAssignment)	713	.post("/createAssignment", addAssignment)
714	.then((response) => {	714	.then((response) => {
715	this.getAssignmentList();	715	this.getAssignmentList();
716	this.snackbar = true;	716	this.snackbar = true;
717	this.text = "Syllabus added successfully";	717	this.text = "Syllabus added successfully";
718	this.color = "green";	718	this.color = "green";
719	this.addAssignmentDialog = false;	719	this.addAssignmentDialog = false;
720	this.clear();	720	this.clear();
721	})	721	})
722	.catch((error) => {	722	.catch((error) => {
723	// console.log(error);	723	// console.log(error);
724	this.snackbar = true;	724	this.snackbar = true;
725	this.text = error.response.data.message;	725	this.text = error.response.data.message;
726	this.color = "red";	726	this.color = "red";
727	});	727	});
728	}	728	}
729	},	729	},
730	getAssignmentList() {	730	getAssignmentList() {
731	if (this.addAssignment.classId) {	731	if (this.addAssignment.classId) {
732	this.addAssignment.classId = this.addAssignment.classId;	732	this.addAssignment.classId = this.addAssignment.classId;
733	}	733	}
734	this.showLoader = true;	734	this.showLoader = true;
735	http()	735	http()
736	.get(	736	.get(
737	"/getAssignmentList",	737	"/getAssignmentList",
738	{	738	{
739	params: { classId: this.showAssignment.classId },	739	params: { classId: this.showAssignment.classId },
740	},	740	},
741	{	741	{
742	headers: { Authorization: "Bearer " + this.token },	742	headers: { Authorization: "Bearer " + this.token },
743	}	743	}
744	)	744	)
745	.then((response) => {	745	.then((response) => {
746	this.assignmentData = response.data.data;	746	this.assignmentData = response.data.data;
747	this.showLoader = false;	747	this.showLoader = false;
748	this.loadingSearch = false;	748	this.loadingSearch = false;
749	})	749	})
750	.catch((error) => {	750	.catch((error) => {
751	// console.log("err====>", err);	751	// console.log("err====>", err);
752	this.showLoader = false;	752	this.showLoader = false;
753	this.loadingSearch = false;	753	this.loadingSearch = false;
754	this.snackbar = true;	754	this.snackbar = true;
755	this.text = error.response.data.message;	755	this.text = error.response.data.message;
756	if (error.response.status === 401) {	756	if (error.response.status === 401) {
757	this.$router.replace({ path: "/" });	757	this.$router.replace({ path: "/" });
758	this.$store.dispatch("setToken", null);	758	this.$store.dispatch("setToken", null);
759	this.$store.dispatch("Id", null);	759	this.$store.dispatch("Id", null);
760	}	760	}
761	});	761	});
762	},	762	},
763	clear() {	763	clear() {
764	this.$refs.form.reset();	764	this.$refs.form.reset();
765	},	765	},
766	save() {	766	save() {
767	if (this.$refs.formEditAssignment.validate()) {	767	if (this.$refs.formEditAssignment.validate()) {
768	let editAssignment = {	768	let editAssignment = {
769	assignmentId: this.editedItem._id,	769	assignmentId: this.editedItem._id,
770	title: this.addAssignment.title,	770	title: this.addAssignment.title,
771	description: this.addAssignment.description,	771	description: this.addAssignment.description,
772	deadline: this.addAssignment.deadline,	772	deadline: this.addAssignment.deadline,
773	classId: this.addAssignment.classId,	773	classId: this.addAssignment.classId,
774	sectionId: this.addAssignment.sectionId,	774	sectionId: this.addAssignment.sectionId,
775	subjectName: this.addAssignment.subjectName,	775	subjectName: this.addAssignment.subjectName,
776	file: this.addAssignment.imageName,	776	file: this.addAssignment.imageName,
777	fileName: this.imageName,	777	fileName: this.imageName,
778	};	778	};
779	this.editLoading = true;	779	this.editLoading = true;
780	var signatures = {	780	var signatures = {
781	JVBERi0: "other",	781	JVBERi0: "other",
782	iVBORw0KGgo: "image",	782	iVBORw0KGgo: "image",
783	UEsDBBQ: "other",	783	UEsDBBQ: "other",
784	"/": "image",	784	"/": "image",
785	AAABAA: "image",	785	AAABAA: "image",
786	IywiV2hhdC: "other",	786	IywiV2hhdC: "other",
787	bmFtZSxl: "other",	787	bmFtZSxl: "other",
788	};	788	};
789	function detectMimeType(b64) {	789	function detectMimeType(b64) {
790	for (var s in signatures) {	790	for (var s in signatures) {
791	if (b64.indexOf(s) === 0) {	791	if (b64.indexOf(s) === 0) {
792	return signatures[s];	792	return signatures[s];
793	}	793	}
794	}	794	}
795	}	795	}
796	if (this.imageUrl) {	796	if (this.imageUrl) {
797	var str = this.imageUrl;	797	var str = this.imageUrl;
798	const [baseUrl, imageUrl] = str.split(/,/);	798	const [baseUrl, imageUrl] = str.split(/,/);
799	editAssignment.upload = imageUrl;	799	editAssignment.upload = imageUrl;
800	editAssignment.fileType = detectMimeType(imageUrl);	800	editAssignment.fileType = detectMimeType(imageUrl);
801	}	801	}
802	http()	802	http()
803	.put("/updateAssignment", editAssignment)	803	.put("/updateAssignment", editAssignment)
804	.then((response) => {	804	.then((response) => {
805	this.snackbar = true;	805	this.snackbar = true;
806	this.text = "Successfully Edit Existing Assignment";	806	this.text = "Successfully Edit Existing Assignment";
807	this.color = "green";	807	this.color = "green";
808	this.getAssignmentList();	808	this.getAssignmentList();
809	this.editLoading = false;	809	this.editLoading = false;
810	this.editAssignmentDialog = false;	810	this.editAssignmentDialog = false;
811	})	811	})
812	.catch((error) => {	812	.catch((error) => {
813	this.editLoading = false;	813	this.editLoading = false;
814	// console.log(error);	814	// console.log(error);
815	});	815	});
816	}	816	}
817	},	817	},
818	getClass() {	818	getClass() {
819	http()	819	http()
820	.get("/getClassesList", {	820	.get("/getClassesList", {
821	headers: { Authorization: "Bearer " + this.token },	821	headers: { Authorization: "Bearer " + this.token },
822	})	822	})
823	.then((response) => {	823	.then((response) => {
824	this.classList = response.data.data;	824	this.classList = response.data.data;
825	})	825	})
826	.catch((error) => {	826	.catch((error) => {
827	if (error.response.status === 401) {	827	if (error.response.status === 401) {
828	this.$router.replace({ path: "/" });	828	this.$router.replace({ path: "/" });
829	this.$store.dispatch("setToken", null);	829	this.$store.dispatch("setToken", null);
830	this.$store.dispatch("Id", null);	830	this.$store.dispatch("Id", null);
831	}	831	}
832	});	832	});
833	},	833	},
834	getSections(_id) {	834	getSections(_id) {
835	var token = this.$store.state.token;	835	var token = this.$store.state.token;
836	this.showLoader = true;	836	this.showLoader = true;
837	http()	837	http()
838	.get(	838	.get(
839	"/getSectionsList",	839	"/getSectionsList",
840	{ params: { classId: _id } },	840	{ params: { classId: _id } },
841	{	841	{
842	headers: { Authorization: "Bearer " + token },	842	headers: { Authorization: "Bearer " + token },
843	}	843	}
844	)	844	)
845	.then((response) => {	845	.then((response) => {
846	this.addSection = response.data.data;	846	this.addSection = response.data.data;
847	this.showLoader = false;	847	this.showLoader = false;
848	})	848	})
849	.catch((err) => {	849	.catch((err) => {
850	this.showLoader = false;	850	this.showLoader = false;
851	});	851	});
852	},	852	},
853	getClassSubject(_id) {	853	getClassSubject(_id) {
854	this.showLoader = true;	854	this.showLoader = true;
855	// this.classId = this.classId;	855	// this.classId = this.classId;
856	http()	856	http()
857	.get(	857	.get(
858	"/getParticularClass",	858	"/getParticularClass",
859	{ params: { classId: _id } },	859	{ params: { classId: _id } },
860	{	860	{
861	headers: { Authorization: "Bearer " + this.token },	861	headers: { Authorization: "Bearer " + this.token },
862	}	862	}
863	)	863	)
864	.then((response) => {	864	.then((response) => {
865	this.subjectList = response.data.data;	865	this.subjectList = response.data.data;
866	this.showLoader = false;	866	this.showLoader = false;
867	})	867	})
868	.catch((err) => {	868	.catch((err) => {
869	this.showLoader = false;	869	this.showLoader = false;
870	});	870	});
871	},	871	},
872	onFilePicked(e) {	872	onFilePicked(e) {
873	const files = e.target.files;	873	const files = e.target.files;
874	this.upload = e.target.files[0];	874	this.upload = e.target.files[0];
875	if (files[0] !== undefined) {	875	if (files[0] !== undefined) {
876	this.imageName = files[0].name;	876	this.imageName = files[0].name;
877	if (this.imageName.lastIndexOf(".") <= 0) {	877	if (this.imageName.lastIndexOf(".") <= 0) {
878	return;	878	return;
879	}	879	}
880	const fr = new FileReader();	880	const fr = new FileReader();
881	fr.readAsDataURL(files[0]);	881	fr.readAsDataURL(files[0]);
882	fr.addEventListener("load", () => {	882	fr.addEventListener("load", () => {
883	this.imageUrl = fr.result;	883	this.imageUrl = fr.result;
884	this.imageFile = files[0]; // this is an image file that can be sent to server...	884	this.imageFile = files[0]; // this is an image file that can be sent to server...
885	this.imageData.imageUrl = URL.createObjectURL(this.imageFile);	885	this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
886	});	886	});
887	// console.log("this.imageName", this.imageName);	887	// console.log("this.imageName", this.imageName);
888	} else {	888	} else {
889	this.imageName = "";	889	this.imageName = "";
890	this.imageFile = "";	890	this.imageFile = "";
891	this.imageUrl = "";	891	this.imageUrl = "";
892	}	892	}
893	},	893	},
894	displaySearch() {	894	displaySearch() {
895	(this.show = false), (this.showSearch = true);	895	(this.show = false), (this.showSearch = true);
896	},	896	},
897	closeSearch() {	897	closeSearch() {
898	this.showSearch = false;	898	this.showSearch = false;
899	this.show = true;	899	this.show = true;
900	this.search = "";	900	this.search = "";
901	},	901	},
902		902
903	async generatePDF2Canvas(item) {	903	async generatePDF2Canvas(item) {
904	var dataType = "";	904	var dataType = "";
905	var type = "";	905	var type = "";
906	if (item.fileType == "image") {	906	if (item.fileType == "image") {
907	dataType = "file.jpg";	907	dataType = "file.jpg";
908	} else if (item.fileType == "other") {	908	} else if (item.fileType == "other") {
909	dataType = "file.pdf";	909	dataType = "file.pdf";
910	type = "application/pdf";	910	type = "application/pdf";
911	}	911	}
912	var FileSaver = require("file-saver");	912	var FileSaver = require("file-saver");
913	FileSaver.saveAs(item.file, "image.jpg");	913	FileSaver.saveAs(item.file, "image.jpg");
914	},	914	},
915	},	915	},
916	mounted() {	916	mounted() {
917	this.token = this.$store.state.token;	917	this.token = this.$store.state.token;
918	this.role = this.$store.state.role;	918	this.role = this.$store.state.role;
919	this.getClass();	919	this.getClass();
920	},	920	},
921	};	921	};
922	</script>	922	</script>

src/pages/Academic/syllabus.vue

Diff comments View file @01a4a52

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

src/pages/Attendence/studentAttendence.vue

Diff comments View file @01a4a52

1	<template>	1	<template>
2	<v-container fluid class="body-color">	2	<v-container fluid class="body-color">
3	<v-snackbar	3	<v-snackbar
4	:timeout="timeout"	4	:timeout="timeout"
5	:top="y === 'top'"	5	:top="y === 'top'"
6	:right="x === 'right'"	6	:right="x === 'right'"
7	:vertical="mode === 'vertical'"	7	:vertical="mode === 'vertical'"
8	v-model="snackbar"	8	v-model="snackbar"
9	color="success"	9	color="success"
10	>{{ text }}</v-snackbar>	10	>{{ text }}</v-snackbar>
11	<!-- **** ATTENDENCE STUDENTS TABLE **** -->	11	<!-- **** ATTENDENCE STUDENTS TABLE **** -->
12	<!-- <download-csv :data="json_data">	12	<!-- <download-csv :data="json_data">
13	<v-btn>Download Data</v-btn>	13	<v-btn>Download Data</v-btn>
14	</download-csv>-->	14	</download-csv>-->
15	<v-toolbar color="transparent" flat>	15	<v-toolbar color="transparent" flat>
16	<v-btn	16	<v-btn
17	fab	17	fab
18	dark	18	dark
19	class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"	19	class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
20	small	20	small
21	@click="addStudentAttendenceDialog = true"	21	@click="addStudentAttendenceDialog = true"
22	>	22	>
23	<v-icon dark>add</v-icon>	23	<v-icon dark>add</v-icon>
24	</v-btn>	24	</v-btn>
25	<v-btn	25	<v-btn
26	v-if="role != 'ADMIN' && schoolRole != 'SCHOOLADMIN' "	26	v-if="role != 'ADMIN' && schoolRole != 'SCHOOLADMIN' "
27	round	27	round
28	class="open-dialog-button hidden-sm-only hidden-xs-only"	28	class="open-dialog-button hidden-sm-only hidden-xs-only"
29	dark	29	dark
30	@click="addStudentAttendenceDialog = true"	30	@click="addStudentAttendenceDialog = true"
31	>	31	>
32	<v-icon class="white--text pr-1" size="20">add</v-icon>Add Student Attendence	32	<v-icon class="white--text pr-1" size="20">add</v-icon>Add Student Attendence
33	</v-btn>	33	</v-btn>
34		34
35	<v-spacer></v-spacer>	35	<v-spacer></v-spacer>
36	<v-flex xs12 sm4 md2>	36	<v-flex xs12 sm4 md2>
37	<v-select	37	<v-select
38	small	38	small
39	:items="addclass"	39	:items="addclass"
40	label="Select Class"	40	label="Select Class"
41	v-model="getAttendence.classId"	41	v-model="getAttendence.classId"
42	item-text="classNum"	42	item-text="classNum"
43	item-value="_id"	43	item-value="_id"
44	name="Select Class"	44	name="Select Class"
45	@change="getSection(getAttendence.classId)"	45	@change="getSection(getAttendence.classId)"
46	class="px-2"	46	class="px-2"
47	required	47	required
48	></v-select>	48	></v-select>
49	</v-flex>	49	</v-flex>
50	<v-flex xs12 sm4 md2>	50	<v-flex xs12 sm4 md2>
51	<v-select	51	<v-select
52	small	52	small
53	:items="addSection"	53	:items="addSection"
54	label="Select Section"	54	label="Select Section"
55	v-model="getAttendence.sectionId"	55	v-model="getAttendence.sectionId"
56	item-text="name"	56	item-text="name"
57	item-value="_id"	57	item-value="_id"
58	name="Select Section"	58	name="Select Section"
59	@change="getStudentsDetail(getAttendence.sectionId)"	59	@change="getStudentsDetail(getAttendence.sectionId)"
60	class="px-2"	60	class="px-2"
61	required	61	required
62	></v-select>	62	></v-select>
63	</v-flex>	63	</v-flex>
64	<v-card-title class="body-1" v-show="show">	64	<v-card-title class="body-1" v-show="show">
65	<v-btn icon large flat @click="displaySearch">	65	<v-btn icon large flat @click="displaySearch">
66	<v-avatar size="27">	66	<v-avatar size="27">
67	<img src="/static/icon/search.png" alt="icon" />	67	<img src="/static/icon/search.png" alt="icon" />
68	</v-avatar>	68	</v-avatar>
69	</v-btn>	69	</v-btn>
70	</v-card-title>	70	</v-card-title>
71	<v-flex xs8 sm8 md3 lg2 v-if="showSearch">	71	<v-flex xs8 sm8 md3 lg2 v-if="showSearch">
72	<v-layout>	72	<v-layout>
73	<v-text-field	73	<v-text-field
74	autofocus	74	autofocus
75	v-model="search"	75	v-model="search"
76	label="Search"	76	label="Search"
77	prepend-inner-icon="search"	77	prepend-inner-icon="search"
78	color="primary"	78	color="primary"
79	></v-text-field>	79	></v-text-field>
80	<v-icon @click="closeSearch" color="error">close</v-icon>	80	<v-icon @click="closeSearch" color="error">close</v-icon>
81	</v-layout>	81	</v-layout>
82	</v-flex>	82	</v-flex>
83	</v-toolbar>	83	</v-toolbar>
84	<v-data-table	84	<v-data-table
85	:headers="headers"	85	:headers="headers"
86	:items="studentsData"	86	:items="studentsData"
87	:pagination.sync="pagination"	87	:pagination.sync="pagination"
88	:search="search"	88	:search="search"
89	>	89	>
90	<template slot="items" slot-scope="props">	90	<template slot="items" slot-scope="props">
91	<tr class="tr">	91	<tr class="tr">
92	<td class="td td-row">{{ props.index + 1}}</td>	92	<td class="td td-row">{{ props.index + 1}}</td>
93	<td class="text-xs-center td td-row">	93	<td class="text-xs-center td td-row">
94	<v-avatar size="40">	94	<v-avatar size="40">
95	<img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />	95	<img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
96	<img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />	96	<img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
97	</v-avatar>	97	</v-avatar>
98	</td>	98	</td>
99	<td class="text-xs-center td td-row">{{ props.item.name}}</td>	99	<td class="text-xs-center td td-row">{{ props.item.name}}</td>
100	<td class="text-xs-center td td-row">{{ props.item.fatherCellNo}}</td>	100	<td class="text-xs-center td td-row">{{ props.item.fatherCellNo}}</td>
101	<td class="text-xs-center td td-row">{{ props.item.email }}</td>	101	<td class="text-xs-center td td-row">{{ props.item.email }}</td>
102	<td class="text-xs-center td td-row">	102	<td class="text-xs-center td td-row">
103	<router-link :to="{ name:'View Students Attendence',params: { id:props.item._id } }">	103	<router-link :to="{ name:'View Students Attendence',params: { id:props.item._id } }">
104	<v-tooltip top>	104	<v-tooltip top>
105	<img	105	<img
106	slot="activator"	106	slot="activator"
107	style="cursor:pointer; width:20px; height:25px; "	107	style="cursor:pointer; width:20px; height:25px; "
108	class="mr-3"	108	class="mr-3"
109	src="/static/icon/view.png"	109	src="/static/icon/view.png"
110	/>	110	/>
111	<span>View</span>	111	<span>View</span>
112	</v-tooltip>	112	</v-tooltip>
113	</router-link>	113	</router-link>
114	</td>	114	</td>
115	</tr>	115	</tr>
116	</template>	116	</template>
117	<v-alert	117	<v-alert
118	slot="no-results"	118	slot="no-results"
119	:value="true"	119	:value="true"
120	color="error"	120	color="error"
121	icon="warning"	121	icon="warning"
122	>Your search for "{{ search }}" found no results.</v-alert>	122	>Your search for "{{ search }}" found no results.</v-alert>
123	</v-data-table>	123	</v-data-table>
124	<!-- **** Add Students Attendece**** -->	124	<!-- **** Add Students Attendece**** -->
125	<v-dialog v-model="addStudentAttendenceDialog" width="1600" v-if="addStudentAttendenceDialog">	125	<v-dialog v-model="addStudentAttendenceDialog" width="1600" v-if="addStudentAttendenceDialog">
126	<v-card flat class="pa-2">	126	<v-card flat class="pa-2">
127	<v-layout>	127	<v-layout>
128	<v-flex xs12>	128	<v-flex xs12>
129	<label class="title text-xs-center">Add Student Attendence</label>	129	<label class="title text-xs-center">Add Student Attendence</label>
130	<v-icon	130	<v-icon
131	size="24"	131	size="24"
132	class="right"	132	class="right"
133	@click="$refs.form.reset();addStudentAttendenceDialog = false"	133	@click="$refs.form.reset();addStudentAttendenceDialog = false"
134	>cancel</v-icon>	134	>cancel</v-icon>
135	</v-flex>	135	</v-flex>
136	</v-layout>	136	</v-layout>
137	<v-flex xs12 class="mt-4">	137	<v-flex xs12 class="mt-4">
138	<v-form ref="form" v-model="valid" lazy-validation>	138	<v-form ref="form" v-model="valid" lazy-validation>
139	<v-flex xs12 sm12 lg12>	139	<v-flex xs12 sm12 lg12>
140	<v-layout wrap>	140	<v-layout wrap>
141	<v-flex xs6 sm6 lg3 md4>	141	<v-flex xs6 sm6 lg3 md4>
142	<v-layout>	142	<v-layout>
143	<v-flex xs3 sm6 lg2 class="subheading mt-4">	143	<v-flex xs3 sm6 lg2 class="subheading mt-4">
144	<label class="right">Class:</label>	144	<label class="right">Class:</label>
145	</v-flex>	145	</v-flex>
146	<v-flex xs9 sm6 lg8 class="ml-2">	146	<v-flex xs9 sm6 lg8 class="ml-2">
147	<v-select	147	<v-select
148	v-model="getReport.classId"	148	v-model="getReport.classId"
149	label="Select your class"	149	label="Select your class"
150	type="text"	150	type="text"
151	:items="addclass"	151	:items="addclass"
152	item-text="classNum"	152	item-text="classNum"
153	item-value="_id"	153	item-value="_id"
154	:rules="classRules"	154	:rules="classRules"
155	@change="getSection(getReport.classId)"	155	@change="getSection(getReport.classId)"
156	required	156	required
157	></v-select>	157	></v-select>
158	</v-flex>	158	</v-flex>
159	</v-layout>	159	</v-layout>
160	</v-flex>	160	</v-flex>
161	<v-flex xs6 sm6 lg3 md8>	161	<v-flex xs6 sm6 lg3 md8>
162	<v-layout>	162	<v-layout>
163	<v-flex xs3 sm6 lg2 class="subheading mt-4">	163	<v-flex xs3 sm6 lg2 class="subheading mt-4">
164	<label class="right">Section:</label>	164	<label class="right">Section:</label>
165	</v-flex>	165	</v-flex>
166	<v-flex xs9 sm6 lg8 class="ml-2">	166	<v-flex xs9 sm6 lg8 class="ml-2">
167	<v-select	167	<v-select
168	:items="addSection"	168	:items="addSection"
169	label="Select your Section"	169	label="Select your Section"
170	v-model="getReport.sectionId"	170	v-model="getReport.sectionId"
171	item-text="name"	171	item-text="name"
172	item-value="_id"	172	item-value="_id"
173	name="Select Section"	173	name="Select Section"
174	:rules="sectionRules"	174	:rules="sectionRules"
175	required	175	required
176	></v-select>	176	></v-select>
177	</v-flex>	177	</v-flex>
178	</v-layout>	178	</v-layout>
179	</v-flex>	179	</v-flex>
180	<v-flex xs6 sm6 lg3 md4>	180	<v-flex xs6 sm6 lg3 md4>
181	<v-menu	181	<v-menu
182	ref="menu"	182	ref="menu"
183	:close-on-content-click="false"	183	:close-on-content-click="false"
184	v-model="menu"	184	v-model="menu"
185	:nudge-right="40"	185	:nudge-right="40"
186	lazy	186	lazy
187	transition="scale-transition"	187	transition="scale-transition"
188	offset-y	188	offset-y
189	full-width	189	full-width
190	min-width="290px"	190	min-width="290px"
191	>	191	>
192	<v-text-field	192	<v-text-field
193	slot="activator"	193	slot="activator"
194	v-model="date"	194	v-model="date"
195	label="Select Date"	195	label="Select Date"
196	append-icon="event"	196	append-icon="event"
197	:rules="dataValid"	197	:rules="dataValid"
198	readonly	198	readonly
199	></v-text-field>	199	></v-text-field>
200	<v-date-picker	200	<v-date-picker
201	ref="picker"	201	ref="picker"
202	v-model="date"	202	v-model="date"
203	:max="new Date().toISOString().substr(0, 10)"	203	:max="new Date().toISOString().substr(0, 10)"
204	min="1950-01-01"	204	min="1950-01-01"
205	@change="save"	205	@change="save"
206	></v-date-picker>	206	></v-date-picker>
207	</v-menu>	207	</v-menu>
208	</v-flex>	208	</v-flex>
209	<v-flex xs6 sm6 lg9 md8>	209	<v-flex xs6 sm6 lg9 md8>
210	<v-btn round dark class="add-button" @click="showTable">Attendence</v-btn>	210	<v-btn round dark class="add-button" @click="showTable">Attendence</v-btn>
211	</v-flex>	211	</v-flex>
212	</v-layout>	212	</v-layout>
213	</v-flex>	213	</v-flex>
214	</v-form>	214	</v-form>
215	</v-flex>	215	</v-flex>
216	<v-flex xs12 v-show="attendeceTable" class>	216	<v-flex xs12 v-show="attendeceTable" class>
217	<v-data-table	217	<v-data-table
218	:headers="headers"	218	:headers="headers"
219	:items="studentsData"	219	:items="studentsData"
220	:pagination.sync="pagination"	220	:pagination.sync="pagination"
221	:search="search"	221	:search="search"
222	>	222	>
223	<template slot="items" slot-scope="props">	223	<template slot="items" slot-scope="props">
224	<tr class="tr">	224	<tr class="tr">
225	<td class="td td-row">{{ props.index + 1}}</td>	225	<td class="td td-row">{{ props.index + 1}}</td>
226	<td class="text-xs-center td td-row">	226	<td class="text-xs-center td td-row">
227	<v-avatar size="40">	227	<v-avatar size="40">
228	<img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />	228	<img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
229	<img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />	229	<img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
230	</v-avatar>	230	</v-avatar>
231	</td>	231	</td>
232	<td class="text-xs-center td td-row">{{ props.item.name}}</td>	232	<td class="text-xs-center td td-row">{{ props.item.name}}</td>
233	<td class="text-xs-center td td-row">{{ props.item.fatherCellNo }}</td>	233	<td class="text-xs-center td td-row">{{ props.item.fatherCellNo }}</td>
234	<td class="text-xs-center td td-row">{{ props.item.email }}</td>	234	<td class="text-xs-center td td-row">{{ props.item.email }}</td>
235	<td class="text-xs-center td td-row">	235	<td class="text-xs-center td td-row">
236	<v-radio-group v-model="props.item.attendence" :mandatory="false" row>	236	<v-radio-group v-model="props.item.attendence" :mandatory="false" row>
237	<v-radio	237	<v-radio
238	v-for="attendences in attendenceType"	238	v-for="attendences in attendenceType"
239	:key="attendences.value"	239	:key="attendences.value"
240	:label="`${attendences.label}`"	240	:label="`${attendences.label}`"
241	:value="attendences.value"	241	:value="attendences.value"
242	></v-radio>	242	></v-radio>
243	</v-radio-group>	243	</v-radio-group>
244	</td>	244	</td>
245	</tr>	245	</tr>
246	</template>	246	</template>
247	</v-data-table>	247	</v-data-table>
248	<v-flex xs12>	248	<v-flex xs12>
249	<v-card-actions>	249	<v-card-actions>
250	<v-spacer></v-spacer>	250	<v-spacer></v-spacer>
251	<v-btn @click="update()" class="add-button" round dark>Submit</v-btn>	251	<v-btn @click="update()" class="add-button" round dark>Submit</v-btn>
252	</v-card-actions>	252	</v-card-actions>
253	</v-flex>	253	</v-flex>
254	</v-flex>	254	</v-flex>
255	</v-card>	255	</v-card>
256	</v-dialog>	256	</v-dialog>
257	<v-snackbar	257	<v-snackbar
258	:timeout="timeout"	258	:timeout="timeout"
259	:top="y === 'top'"	259	:top="y === 'top'"
260	:right="x === 'right'"	260	:right="x === 'right'"
261	:vertical="mode === 'vertical'"	261	:vertical="mode === 'vertical'"
262	v-model="snackbar"	262	v-model="snackbar"
263	color="success"	263	color="success"
264	>{{ text }}</v-snackbar>	264	>{{ text }}</v-snackbar>
265	<div class="loader" v-if="showLoader">	265	<div class="loader" v-if="showLoader">
266	<v-progress-circular indeterminate color="white"></v-progress-circular>	266	<v-progress-circular indeterminate color="white"></v-progress-circular>
267	</div>	267	</div>
268	</v-container>	268	</v-container>
269	</template>	269	</template>
270		270
271	<script>	271	<script>
272	import http from "@/Services/http.js";	272	import http from "@/Services/http.js";
273	import moment from "moment";	273	import moment from "moment";
274		274
275	export default {	275	export default {
276	data: () => ({	276	data: () => ({
277	snackbar: false,	277	snackbar: false,
278	y: "top",	278	y: "top",
279	x: "right",	279	x: "right",
280	mode: "",	280	mode: "",
281	timeout: 3000,	281	timeout: 3000,
282	text: "",	282	text: "",
283	show: true,	283	show: true,
284	showSearch: false,	284	showSearch: false,
285	showLoader: false,	285	showLoader: false,
286	loading: false,	286	loading: false,
287	date: null,	287	date: null,
288	search: "",	288	search: "",
289	addclass: [],	289	addclass: [],
290	pagination: {	290	pagination: {
291	rowsPerPage: 10,	291	rowsPerPage: 10,
292	},	292	},
293	imageData: {},	293	imageData: {},
294	imageName: "",	294	imageName: "",
295	imageUrl: "",	295	imageUrl: "",
296	imageFile: "",	296	imageFile: "",
297	headers: [	297	headers: [
298	{	298	{
299	text: "No",	299	text: "No",
300	align: "",	300	align: "",
301	sortable: false,	301	sortable: false,
302	value: "index",	302	value: "index",
303	},	303	},
304	{	304	{
305	text: "Profile Pic",	305	text: "Profile Pic",
306	value: "profilprofilePicUrlePicUrl",	306	value: "profilprofilePicUrlePicUrl",
307	sortable: false,	307	sortable: false,
308	align: "center",	308	align: "center",
309	},	309	},
310	{ text: "Name", value: "name", sortable: false, align: "center" },	310	{ text: "Name", value: "name", sortable: false, align: "center" },
311	{	311	{
312	text: "Mobile No",	312	text: "Mobile No",
313	value: "fatherCellNo",	313	value: "fatherCellNo",
314	sortable: false,	314	sortable: false,
315	align: "center",	315	align: "center",
316	},	316	},
317	{ text: "Email", value: "email", sortable: false, align: "center" },	317	{ text: "Email", value: "email", sortable: false, align: "center" },
318	{ text: "Attendance", value: "", sortable: false, align: "center" },	318	{ text: "Attendance", value: "", sortable: false, align: "center" },
319	],	319	],
320	// json_data: [],	320	// json_data: [],
321	parentId: "",	321	parentId: "",
322	token: "",	322	token: "",
323	selectStudents: {	323	selectStudents: {
324	select: "",	324	select: "",
325	selectSection: "",	325	selectSection: "",
326	},	326	},
327		327
328	role: "",	328	role: "",
329	schoolRole: "",	329	schoolRole: "",
330	addStudentAttendenceDialog: false,	330	addStudentAttendenceDialog: false,
331	attendeceTable: false,	331	attendeceTable: false,
332	menu: false,	332	menu: false,
333	valid: true,	333	valid: true,
334		334
335	getReport: {},	335	getReport: {},
336	getAttendence: {},	336	getAttendence: {},
337	studentsList: [],	337	studentsList: [],
338	studentsData: [],	338	studentsData: [],
339	addSection: [],	339	addSection: [],
340		340
341	SectionName: ["A", "B", "C", "D", "E", "F"],	341	SectionName: ["A", "B", "C", "D", "E", "F"],
342	classRules: [(v) => !!v \|\| "Class is required"],	342	classRules: [(v) => !!v \|\| "Class is required"],
343	sectionRules: [(v) => !!v \|\| "Class is required"],	343	sectionRules: [(v) => !!v \|\| "Class is required"],
344	studentRules: [(v) => !!v \|\| "Student is required"],	344	studentRules: [(v) => !!v \|\| "Student is required"],
345	dataValid: [(v) => !!v \|\| "Date is required"],	345	dataValid: [(v) => !!v \|\| "Date is required"],
346		346
347	attendenceType: [	347	attendenceType: [
348	{	348	{
349	label: "Present",	349	label: "Present",
350	value: true,	350	value: true,
351	},	351	},
352	{	352	{
353	label: "Absent",	353	label: "Absent",
354	value: false,	354	value: false,
355	},	355	},
356	],	356	],
357	}),	357	}),
358	watch: {	358	watch: {
359	addStudentAttendenceDialog: function (val) {	359	addStudentAttendenceDialog: function (val) {
360	if (!val) {	360	if (!val) {
361	this.getReport = [];	361	this.getReport = [];
362	this.studentsData = [];	362	// this.studentsData = [];
363	}	363	}
364	},	364	},
365	},	365	},
366	methods: {	366	methods: {
367	save(date) {	367	save(date) {
368	this.$refs.menu.save(date);	368	this.$refs.menu.save(date);
369	},	369	},
370	showTable() {	370	showTable() {
371	this.attendeceTable = true;	371	this.attendeceTable = true;
372	this.getStudents();	372	this.getStudents();
373	},	373	},
374	getAllClass() {	374	getAllClass() {
375	http()	375	http()
376	.get("/getClassesList", {	376	.get("/getClassesList", {
377	headers: { Authorization: "Bearer " + this.token },	377	headers: { Authorization: "Bearer " + this.token },
378	})	378	})
379	.then((response) => {	379	.then((response) => {
380	this.addclass = response.data.data;	380	this.addclass = response.data.data;
381	})	381	})
382	.catch((error) => {	382	.catch((error) => {
383	// console.log("err====>", err);	383	// console.log("err====>", err);
384	// this.$router.replace({ path: "/" });	384	// this.$router.replace({ path: "/" });
385	});	385	});
386	},	386	},
387	getSection(_id) {	387	getSection(_id) {
388	this.showLoader = true;	388	this.showLoader = true;
389	http()	389	http()
390	.get(	390	.get(
391	"/getSectionsList",	391	"/getSectionsList",
392	{ params: { classId: _id } },	392	{ params: { classId: _id } },
393	{	393	{
394	headers: { Authorization: "Bearer " + this.token },	394	headers: { Authorization: "Bearer " + this.token },
395	}	395	}
396	)	396	)
397	.then((response) => {	397	.then((response) => {
398	this.addSection = response.data.data;	398	this.addSection = response.data.data;
399	this.showLoader = false;	399	this.showLoader = false;
400	})	400	})
401	.catch((err) => {	401	.catch((err) => {
402	this.showLoader = false;	402	this.showLoader = false;
403	// console.log("err====>", err);	403	// console.log("err====>", err);
404	});	404	});
405	},	405	},
406	getStudents(_id) {	406	getStudents(_id) {
407	this.showLoader = true;	407	this.showLoader = true;
408	http()	408	http()
409	.get("/getStudentWithClass", {	409	.get("/getStudentWithClass", {
410	params: {	410	params: {
411	classId: this.getReport.classId,	411	classId: this.getReport.classId,
412	sectionId: this.getReport.sectionId,	412	sectionId: this.getReport.sectionId,
413	},	413	},
414	})	414	})
415	.then((response) => {	415	.then((response) => {
416	this.studentsData = response.data.data;	416	this.studentsData = response.data.data;
417	this.showLoader = false;	417	this.showLoader = false;
418	// this.addStudentAttendenceDialog = false;	418	// this.addStudentAttendenceDialog = false;
419	var attendence = "";	419	var attendence = "";
420	for (let i = 0; i < this.studentsData.length; i++) {	420	for (let i = 0; i < this.studentsData.length; i++) {
421	this.studentsData[i].attendence = true;	421	this.studentsData[i].attendence = true;
422	}	422	}
423	})	423	})
424	.catch((error) => {	424	.catch((error) => {
425	console.log("err====>", error);	425	console.log("err====>", error);
426	this.showLoader = false;	426	this.showLoader = false;
427	});	427	});
428	},	428	},
429	getStudentsDetail(_id) {	429	getStudentsDetail(_id) {
430	this.showLoader = true;	430	this.showLoader = true;
431	http()	431	http()
432	.get("/getStudentWithClass", {	432	.get("/getStudentWithClass", {
433	params: {	433	params: {
434	classId: this.getAttendence.classId,	434	classId: this.getAttendence.classId,
435	sectionId: this.getAttendence.sectionId,	435	sectionId: this.getAttendence.sectionId,
436	},	436	},
437	})	437	})
438	.then((response) => {	438	.then((response) => {
439	this.studentsData = response.data.data;	439	this.studentsData = response.data.data;
440	this.showLoader = false;	440	this.showLoader = false;
441	// this.addStudentAttendenceDialog = false;	441	// this.addStudentAttendenceDialog = false;
442	var attendence = "";	442	var attendence = "";
443	for (let i = 0; i < this.studentsData.length; i++) {	443	for (let i = 0; i < this.studentsData.length; i++) {
444	this.studentsData[i].attendence = true;	444	this.studentsData[i].attendence = true;
445	}	445	}
446	})	446	})
447	.catch((error) => {	447	.catch((error) => {
448	console.log("err====>", error);	448	console.log("err====>", error);
449	this.showLoader = false;	449	this.showLoader = false;
450	});	450	});
451	},	451	},
452	update() {	452	update() {
453	var studentsAttendence = [];	453	var studentsAttendence = [];
454	for (var j = 0; j < this.studentsData.length; j++) {	454	for (var j = 0; j < this.studentsData.length; j++) {
455	studentsAttendence.push({	455	studentsAttendence.push({
456	studentId: this.studentsData[j]._id,	456	studentId: this.studentsData[j]._id,
457	isPresent: this.studentsData[j].attendence,	457	isPresent: this.studentsData[j].attendence,
458	});	458	});
459	}	459	}
460	if (this.$refs.form.validate()) {	460	if (this.$refs.form.validate()) {
461	let attendanceData = {	461	let attendanceData = {
462	sectionId: this.getReport.sectionId,	462	sectionId: this.getReport.sectionId,
463	date: this.date,	463	date: this.date,
464	students: studentsAttendence,	464	students: studentsAttendence,
465	};	465	};
466	http()	466	http()
467	.put("/updateAttendance", attendanceData)	467	.put("/updateAttendance", attendanceData)
468	.then((response) => {	468	.then((response) => {
469	this.snackbar = true;	469	this.snackbar = true;
470	this.text = response.data.message;	470	this.text = response.data.message;
471	this.addStudentAttendenceDialog = false;	471	this.addStudentAttendenceDialog = false;
472	})	472	})
473	.catch((error) => {	473	.catch((error) => {
474	this.snackbar = true;	474	this.snackbar = true;
475	this.text = error.response.data.message;	475	this.text = error.response.data.message;
476	});	476	});
477	}	477	}
478	},	478	},
479		479
480	displaySearch() {	480	displaySearch() {
481	this.show = false;	481	this.show = false;
482	this.showSearch = true;	482	this.showSearch = true;
483	},	483	},
484	closeSearch() {	484	closeSearch() {
485	this.showSearch = false;	485	this.showSearch = false;
486	this.show = true;	486	this.show = true;
487	this.search = "";	487	this.search = "";
488	},	488	},
489	},	489	},
490	mounted() {	490	mounted() {
491	// this.getStudentList();	491	// this.getStudentList();
492	this.token = this.$store.state.token;	492	this.token = this.$store.state.token;
493	this.getAllClass();	493	this.getAllClass();
494	this.role = this.$store.state.role;	494	this.role = this.$store.state.role;
495	},	495	},
496	};	496	};
497	</script>	497	</script>

src/pages/Course/course.vue

Diff comments View file @01a4a52

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

src/pages/Course/courseDetail.vue

Diff comments View file @01a4a52

 <template>
   <v-container fluid class="body-color">
     <!-- ****** Edit Chapter detail  ****** -->
     <v-dialog v-model="editCourseDetailDialog" max-width="1000px" scrollable>
       <v-card class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Chapter</label>
             <v-icon size="24" class="right" @click="editCourseDetailDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-card-text>
           <v-layout wrap>
             <v-flex xs12 sm12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Select Class:</label>
                 </v-flex>
                 <v-flex xs8 sm6 class="ml-3">
                   <v-select
                     small
                     :items="addclass"
                     label="Select Class"
                     v-model="editedCourse.classId"
                     item-text="classNum"
                     item-value="_id"
                     name="Select Class"
                     @change="getCourses(editedCourse.classId)"
                     class="mr-2"
                     required
                   ></v-select>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12 sm12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Select Course:</label>
                 </v-flex>
                 <v-flex xs8 sm6 class="ml-3">
                   <v-select
                     :items="courseData"
                     label="Select Course"
                     v-model="editedCourse.courseId"
                     item-text="courseName"
                     item-value="_id"
                     required
                     class="ml-2"
                   ></v-select>
                 </v-flex>
               </v-layout>
             </v-flex>
           </v-layout>
           <v-layout>
             <v-flex xs12 sm12 md11 lg11>
               <v-card-actions class="hidden-xs-only hidden-sm-only">
                 <v-spacer></v-spacer>
                 <v-btn round dark @click="save" :loading="editLoading" class="add-button mr-4">Save</v-btn>
               </v-card-actions>
               <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only">
                 <v-spacer></v-spacer>
                 <v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn>
                 <v-spacer></v-spacer>
               </v-card-actions>
             </v-flex>
           </v-layout>
         </v-card-text>
       </v-card>
     </v-dialog>
     <!-- DIALOG BOX -  EDIT CHAPTER-->
     <v-dialog v-model="editChapterDetailDialog" max-width="1000px" scrollable>
       <v-card class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Chapter</label>
             <v-icon
               size="24"
               class="right"
               @click="editChapterDetailDialog = false; trigger = 'reset'; emptyPdf = 'reset' "
             >cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-card-text>
           <v-layout wrap>
             <!-- CHAPTER NAME -->
             <v-flex xs12 sm12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Chapter Name:</label>
                 </v-flex>
                 <v-flex xs8 sm6 class="ml-3">
                   <v-text-field
                     v-model="editChapter.chapterName"
                     placeholder="fill your Title"
                     type="text"
                     required
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
             <!-- DESCRIPTION -->
             <v-flex xs12 sm12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Description:</label>
                 </v-flex>
                 <v-flex xs8 sm6 class="ml-3">
                   <v-text-field
                     placeholder="fill your Description"
                     v-model="editChapter.description"
                     type="text"
                     required
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
             <!-- UPLOAD PPT -->
             <!-- <v-flex xs12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Upload PPT:</label>
                 </v-flex>
                 <v-flex xs8 sm6 class="ml-3">
                   <UploadFiles
                     @fileSelected="fileSelected($event,'uploadPPT')"
                     label="Add PPT"
                     reference="EditPpt"
                     id="editPptInput"
                     :trigger="trigger"
                   ></UploadFiles>
                 </v-flex>
               </v-layout>
             </v-flex>-->
             <!-- UPLOAD PDF -->
             <v-flex xs12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Upload PDF:</label>
                 </v-flex>
                 <v-flex xs8 sm6 class="ml-3">
                   <UploadPdf
                     @pdfFileSelected="pdfFileSelected($event,'uploadPDF')"
                     label="Add PDF"
                     reference="editPdf"
                     id="editPdfInput"
                     :emptyPdf="emptyPdf"
                   ></UploadPdf>
                 </v-flex>
               </v-layout>
             </v-flex>
           </v-layout>
           <!-- <v-flex xs12 v-if="editChapter.chapterPoints.length != 0">
             <v-layout
               wrap
               v-for="(editChapterPoint,index) in editChapter.chapterPoints"
               :key="index"
             >
               <v-flex xs12 sm12 md4 class="pt-4 subheading">
                 <label class="right hidden-xs-only hidden-sm-only">Chapter Points:</label>
                 <label class="hidden-md-only hidden-lg-only hidden-xl-only">Chapter Points:</label>
               </v-flex>
               <v-layout>
                 <v-flex xs10 sm10 sm5 md9 class="ml-3">
                   <v-text-field :value="editChapterPoint" type="text" required></v-text-field>
                 </v-flex>
                 <v-flex xs2 class="pt-4">
                   <v-icon @click="deleteUrl(index)">cancel</v-icon>
                 </v-flex>
               </v-layout>
             </v-layout>
           </v-flex>-->
           <v-flex xs12>
             <div v-for="(updateImage,index) in updates" :key="index">
               <v-layout wrap>
                 <v-flex xs12 sm12 md4 class="pt-4 subheading">
                   <label class="right hidden-xs-only hidden-sm-only">Chapter Points:</label>
                   <label class="hidden-md-only hidden-lg-only hidden-xl-only">Chapter Points:</label>
                 </v-flex>
                 <v-layout>
                   <v-flex xs10 sm12 md9 class="ml-3">
                     <v-text-field
                       v-model="updateImage.value"
                       placeholder="Upload new Chapter Points"
                       required
                     ></v-text-field>
                   </v-flex>
                   <v-flex xs2 class="pt-4">
                     <v-icon @click="deleteUpdate(index)" v-if="index !=0">cancel</v-icon>
                     <v-icon @click="update">add_circle</v-icon>
                   </v-flex>
                 </v-layout>
               </v-layout>
             </div>
           </v-flex>
           <v-layout>
             <v-flex xs12 sm12 md11 lg11>
               <v-card-actions class="hidden-xs-only hidden-sm-only">
                 <v-spacer></v-spacer>
                 <v-btn
                   round
                   dark
                   @click="saveChapter"
                   :loading="editLoading"
                   class="add-button mr-4"
                 >Save</v-btn>
               </v-card-actions>
               <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only">
                 <v-spacer></v-spacer>
                 <v-btn
                   round
                   dark
                   @click="saveChapter"
                   :loading="editLoading"
                   class="add-button"
                 >Save</v-btn>
                 <v-spacer></v-spacer>
               </v-card-actions>
             </v-flex>
           </v-layout>
         </v-card-text>
       </v-card>
     </v-dialog>
     <!-- ADD NEW CHAPTER-->
     <v-dialog v-model="addChapterDialog" max-width="1000px" scrollable>
       <v-card class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Chapter Detail</label>
             <v-icon
               size="24"
               class="right"
               @click="addChapterDialog = false;  trigger = 'reset'; emptyPdf = 'reset' "
             >cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-card-text>
           <v-layout wrap>
             <v-flex xs12 sm12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Chapter Name:</label>
                 </v-flex>
                 <v-flex xs8 sm6 class="ml-3">
                   <v-text-field
                     v-model="addChapterItem.chapterName"
                     placeholder="fill your Title"
                     type="text"
                     required
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12 sm12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Description:</label>
                 </v-flex>
                 <v-flex xs8 sm6 class="ml-3">
                   <v-text-field
                     placeholder="fill your Description"
                     v-model="addChapterItem.description"
                     type="text"
                     required
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
             <!-- UPLOAD PPT -->
             <!-- <v-flex xs12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Upload PPT:</label>
                 </v-flex>
                 <v-flex xs8 sm6 class="ml-3">
                   <UploadFiles
                     @fileSelected="fileSelected($event,'uploadPPT')"
                     label="Add PPT"
                     reference="newChapterPpt"
                     id="newChapterPptInput"
                     :trigger="trigger"
                   ></UploadFiles>
                 </v-flex>
               </v-layout>
             </v-flex>-->
             <!-- UPLOAD PDF -->
             <v-flex xs12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Upload PDF:</label>
                 </v-flex>
                 <v-flex xs8 sm6 class="ml-3">
                   <UploadPdf
                     @pdfFileSelected="pdfFileSelected($event,'uploadPDF')"
                     label="Add PDF"
                     reference="newChapterPdf"
                     id="newChapterPdfInput"
                     :emptyPdf="emptyPdf"
                   ></UploadPdf>
                 </v-flex>
               </v-layout>
             </v-flex>
           </v-layout>
           <v-flex xs12>
             <div v-for="(chapterPoints,index) in findsChapterPoint" :key="index">
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Chapter Points:</label>
                 </v-flex>
                 <v-flex xs8 sm8 md6 class="ml-3">
                   <v-text-field
                     placeholder="fill your Chapter Points"
                     v-model="chapterPoints.value"
                     type="text"
                     name="link"
                     required
                   ></v-text-field>
                 </v-flex>
                 <v-flex xs2 class="pt-4">
                   <v-icon @click="deleteChapterPoint(index)" v-if="index !=0 ">cancel</v-icon>
                   <v-icon @click="addChapterPoint()">add_circle</v-icon>
                 </v-flex>
               </v-layout>
             </div>
           </v-flex>
           <v-layout>
             <v-flex xs12 sm12 md11 lg11>
               <v-card-actions class="hidden-xs-only hidden-sm-only">
                 <v-spacer></v-spacer>
                 <v-btn
                   round
                   dark
                   @click="submitChapter"
                   :loading="editLoading"
                   class="add-button mr-4"
                 >Submit</v-btn>
               </v-card-actions>
               <v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only">
                 <v-spacer></v-spacer>
                 <v-btn round dark @click="save" :loading="editLoading" 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 Gallery ******  -->
     <v-dialog v-model="viewProfileGallery" max-width="1000" scrollable>
       <v-card flat class="card-style pa-3" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">View Course Detail</label>
             <v-icon size="24" class="right" @click="closeProfileGallery">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-card-text>
           <v-container grid-list-md>
             <v-layout wrap>
               <v-flex xs12>
                 <v-layout>
                   <v-flex xs4 sm6>
                     <h5 class="right my-1">
                       <b>Chapter Name:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.chapterName }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs4 sm6>
                     <h5 class="right my-1">
                       <b>Description:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.description }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs5 sm6>
                     <h5 class="right my-1">
                       <b>Chapter Points:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">
                       <ul v-for="chapterPoint in editedItem.chapterPoints" :key="chapterPoint">
                         <li>{{ chapterPoint}}</li>
                       </ul>
                     </h5>
                   </v-flex>
                 </v-layout>
                 <!-- LINK TO PDF -->
                 <v-layout row justify-center>
                   <v-flex xs6>
                     <div style="width: 100%;">
                       <a
                         :href="editedItem.pdfFileUrl"
                         target="_blank"
                         style="text-decoration: none!important;"
                       >
                         <v-btn flat block>
                           <span>
                             <h5>
                               <b>Open PDF</b>
                             </h5>
                           </span>
                         </v-btn>
                       </a>
                     </div>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
           </v-container>
         </v-card-text>
       </v-card>
     </v-dialog>
     <!-- ****** Course Detail TABLE ****** -->
     <v-container grid-list-lg class="pa-0">
       <v-layout row wrap>
         <!-- <v-btn
           fab
           dark
           class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
           small
           @click="addCourseDetailDialog = true"
         >
           <v-icon dark>add</v-icon>
         </v-btn>-->
         <v-flex xs12 sm4>
           <v-btn block round class="open-dialog-button" dark @click="addCourseDetailDialog = true">
             <v-icon class="white--text pr-1" size="20">add</v-icon>
             <span class="hidden-sm-and-down">Add Course Detail</span>
             <span class="hidden-md-and-up">Add</span>
           </v-btn>
         </v-flex>
         <v-flex xs12 sm4 md2>
           <v-select
             :items="addclass"
             label="Select Class"
             v-model="getCourse.classId"
             item-text="classNum"
             item-value="_id"
             name="Select Class"
             @change="getCourses(getCourse.classId)"
             required
           ></v-select>
         </v-flex>
         <v-flex xs12 sm4 md2>
           <v-select
             :items="courseData"
             label="Select Course"
             v-model="getCourse.courseId"
             item-text="courseName"
             item-value="_id"
             required
             @change="getCourseDetailsList(getCourse.courseId)"
           ></v-select>
         </v-flex>
         <v-flex xs12 sm1 v-if="show">
           <v-btn icon large flat @click="show = false;showSearch = true;">
             <v-avatar size="27">
               <img src="/static/icon/search.png" alt="icon" />
             </v-avatar>
           </v-btn>
         </v-flex>
         <v-flex xs12 sm3 md3 v-if="showSearch">
           <div style="display: inline-block;width: 70%;">
             <v-text-field
               autofocus
               v-model="search"
               label="Search"
               prepend-inner-icon="search"
               color="primary"
             ></v-text-field>
           </div>
           <div style="display: inline-block;">
             <v-icon @click="closeSearch" color="error">close</v-icon>
           </div>
         </v-flex>
       </v-layout>
     </v-container>
     <v-data-table
       :headers="headers"
       :items="CourseDetailsList"
       :pagination.sync="pagination"
       :search="search"
       item-key="_id"
     >
       <template slot="items" slot-scope="props">
         <tr class="tr" @click="courseTableRow(props.item._id)">
           <td class="td td-row">{{ props.index + 1}}</td>
           <td class="td td-row text-xs-center">{{ props.item.classId.classNum }}</td>
           <td class="td td-row text-xs-center">{{ props.item.courseId.courseName }}</td>
           <td class="td td-row text-xs-center">
             <div style="vertical-align: top;">
               <v-tooltip top>
                 <v-icon
                   slot="activator"
                   style="cursor:pointer;font-size:22px;position: relative;top: -4px; "
                   class="mr-3"
                   @click="addChapters(props.item)"
                 >add_circle_outline</v-icon>
                 <span>Add</span>
               </v-tooltip>
               <v-tooltip top>
                 <img
                   slot="activator"
                   style="cursor:pointer; width:25px; height:25px; "
                   class="mr-3"
                   @click="props.expanded = !props.expanded"
                   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>
             </div>
           </td>
         </tr>
       </template>
       <!-- CHAPTERS IN A COURSE -->
       <template slot="expand">
         <v-data-table :items="chapters" hide-actions item-key="chapterName" style="width: auto;">
           <template slot="items" slot-scope="props">
             <tr class="tr" @click="props.expanded = !props.expanded">
               <td class="td td-row">{{ props.index + 1}}</td>
               <td class="text-xs-center td td-row">{{ props.item.chapterName}}</td>
               <td class="text-xs-center td td-row">{{ props.item.description }}</td>
               <td class="text-xs-center td td-row">
                 <v-tooltip top>
                   <v-icon
                     slot="activator"
                     style="cursor:pointer;font-size:22px;position: relative;top: -4px; "
                     class="mr-3"
                     @click="$router.push({name: 'Live Online Class', query: {chapterId: props.item._id, chapterName: props.item.chapterName, courseId: getCourse.courseId, classId: getCourse.classId }})"
                   >video_call</v-icon>
                   <span>Live Session</span>
                 </v-tooltip>
                 <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="editChapterItem(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="deleteChapters(props.item)"
                     src="/static/icon/delete.png"
                   />
                   <span>Delete Chapter</span>
                 </v-tooltip>
               </td>
             </tr>
           </template>
         </v-data-table>
       </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 Course Detail  ****** -->
     <v-dialog v-model="addCourseDetailDialog" max-width="600px" persistent>
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Course Details</label>
             <v-icon
               size="24"
               class="right"
               @click="addCourseDetailDialog = false; clear() ; trigger = 'reset' ; emptyPdf = 'reset' "
             >cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-form ref="form" v-model="valid" lazy-validation>
           <v-container fluid>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
                   <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
                 </v-flex>
                 <v-flex xs8 sm8 md7 class="ml-3">
                   <v-select
                     :items="addclass"
                     label="Select Class"
                     v-model="addCourseDetail.classId"
                     item-text="classNum"
                     item-value="_id"
                     name="Select Class"
                     :rules="clsssRules"
                     @change="getCourses(addCourseDetail.classId)"
                     required
                   ></v-select>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right hidden-xs-only hidden-sm-only">Select Course:</label>
                   <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Course:</label>
                 </v-flex>
                 <v-flex xs8 sm8 md7 class="ml-3">
                   <v-select
                     :items="courseData"
                     label="Select Course"
                     v-model="addCourseDetail.courseId"
                     item-text="courseName"
                     item-value="_id"
                     :rules="courseRules"
                     required
                   ></v-select>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Chapter Name:</label>
                 </v-flex>
                 <v-flex xs8 sm8 md7 class="ml-3">
                   <v-text-field
                     v-model="addCourseDetail.chapterName"
                     placeholder="fill your Title"
                     name="name"
                     type="text"
                     :rules="chapterNameRules"
                     required
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
             <!-- DESCRIPTION -->
             <v-flex xs12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Description:</label>
                 </v-flex>
                 <v-flex xs8 sm8 md7 class="ml-3">
                   <v-text-field
                     placeholder="fill your Description"
                     :rules="descriptionRules"
                     v-model="addCourseDetail.description"
                     type="text"
                     name="email"
                     required
                   ></v-text-field>
                 </v-flex>
               </v-layout>
             </v-flex>
             <!-- UPLOAD PPT -->
             <!-- <v-flex xs12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Upload PPT:</label>
                 </v-flex>
                 <v-flex xs8 sm8 md7 class="ml-3">
                   <UploadFiles
                     @fileSelected="fileSelected($event,'uploadPPT')"
                     label="Add PPT"
                     reference="newCoursePpt"
                     id="newCoursePptInput"
                     :trigger="trigger"
                   ></UploadFiles>
                 </v-flex>
               </v-layout>
             </v-flex>-->
             <!-- UPLOAD PDF -->
             <v-flex xs12>
               <v-layout>
                 <v-flex xs4 class="pt-4 subheading">
                   <label class="right">Upload PDF:</label>
                 </v-flex>
                 <v-flex xs8 sm8 md7 class="ml-3">
                   <UploadPdf
                     @pdfFileSelected="pdfFileSelected($event,'uploadPDF')"
                     label="Add PDF"
                     reference="newCoursePdf"
                     id="newCoursePdfInput"
                     :emptyPdf="emptyPdf"
                   ></UploadPdf>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-layout>
               <v-flex xs12>
                 <div v-for="(chapterPoints,index) in finds" :key="index">
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right">Chapter Points:</label>
                     </v-flex>
                     <v-flex xs8 sm8 md6 class="ml-3">
                       <v-text-field
                         placeholder="fill your Chapter Points"
                         v-model="chapterPoints.value"
                         type="text"
                         required
                       ></v-text-field>
                     </v-flex>
                     <v-flex xs2 class="pt-4">
                       <v-icon @click="deleteFind(index)" v-if="index !=0 ">cancel</v-icon>
                       <v-icon @click="addFind">add_circle</v-icon>
                     </v-flex>
                   </v-layout>
                 </div>
               </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>
     <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 UploadFiles from "@/pages/Common/UploadFiles.vue";
 import UploadPdf from "@/pages/Common/UploadPdf.vue";
 import AllApiCalls from "@/Services/AllApiCalls.js";
 export default {
   mixins: [AllApiCalls],
   components: {
     UploadFiles,
     UploadPdf,
   },
   data: () => ({
     snackbar: false,
     y: "top",
     x: "right",
     mode: "",
     timeout: 3000,
     text: "",
     loading: false,
     color: "",
     date: null,
     search: "",
     show: true,
     addCourseDetailDialog: false,
     showSearch: false,
     showLoader: false,
     editCourseDetailDialog: false,
     editChapterDetailDialog: false,
     viewProfileGallery: false,
     valid: true,
     editLoading: false,
     addclass: [],
     courseData: [],
     addSection: [],
     getCourse: {},
     finds: [{ value: "" }],
     findsChapterPoint: [{ value: "" }],
     updates: [],
     youTubeLink: {},
     addCourseDetail: {
       chapters: [
         {
           chapterName: "",
           description: "",
           chapterPoints: [],
         },
       ],
     },
     chapters: [],
     pagination: {
       rowsPerPage: 10,
     },
     editFiles: [],
     files: [],
     courseData: [],
     token: "",
     courseId: "",
     clsssRules: [(v) => !!v || " Class is required"],
     courseRules: [(v) => !!v || " Course is required"],
     chapterNameRules: [(v) => !!v || " Tilte is required"],
     descriptionRules: [(v) => !!v || " Description is required"],
     headers: [
       {
         align: "",
         text: "No",
         sortable: false,
         value: "index",
       },
       {
         text: "Class Name",
         value: "classNum",
         sortable: false,
         align: "center",
       },
       {
         text: "Course Name",
         value: "courseName",
         sortable: false,
         align: "center",
       },
       { text: "Action", value: "", sortable: false, align: "center" },
     ],
     CourseDetailsList: [],
     editedIndex: -1,
     editedItem: {},
     editedCourse: {},
     editChapter: {
       chapterPoints: [],
     },
     index: "",
     addChapterItem: {},
     addChapterItemObj: {},
     addChapterDialog: false,
+    showData: false,
   }),
   methods: {
     getCourses(classId) {
       this.showLoader = true;
       http()
         .get("/getCourseesList", {
           params: {
             classId: classId,
           },
         })
         .then((response) => {
           this.editChapter.courseId = "";
           this.courseData = response.data.data;
           // console.log("this.courseData", this.courseData);
           this.showLoader = false;
         })
         .catch((err) => {
           console.log("err====>", err);
           this.showLoader = false;
         });
     },
     getCourseDetailsList() {
       this.showLoader = true;
       http()
         .get("/getParticularCourseDetail", {
           params: {
             courseId: this.getCourse.courseId,
           },
         })
         .then((response) => {
           this.CourseDetailsList = response.data.data;
+          if (this.CourseDetailsList.length === 0) {
+            this.showLoader = false;
+            this.snackbar = true;
+            this.text = "Data not found!";
+            this.color = "error";
+            return;
+          }
+          this.showData = true;
           if (response.data.data[0]) {
             this.chapters = response.data.data[0].chapters;
           }
           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);
           }
         });
     },
     courseTableRow(id) {
       this.courseId = id;
     },
     addChapters(item) {
       this.editedIndex = this.CourseDetailsList.indexOf(item);
       this.addChapterItemObj = Object.assign({}, item);
       this.addChapterItem.courseDetailId = this.addChapterItemObj._id;
       this.addChapterDialog = true;
     },
     submitChapter() {
       this.addChapterItem.chapterPoints = [];
       for (let i = 0; i < this.findsChapterPoint.length; i++) {
         this.addChapterItem.chapterPoints.push(this.findsChapterPoint[i].value);
       }
       this.loading = true;
       http()
         .put("/addChapters", this.addChapterItem)
         .then((response) => {
           this.addChapterDialog = false;
           this.loading = false;
           this.snackbar = true;
           this.text = response.data.message;
           this.color = "green";
           this.addChapterItem = {};
           this.removeChapterPoint();
           this.getCourseDetailsList();
         })
         .catch((error) => {
           this.snackbar = true;
           this.text = error.response.data.message;
           this.color = "error";
           this.loading = false;
         });
     },
     profile(item) {
       console.log("chaper - ", item);
       this.editedIndex = this.chapters.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.viewProfileGallery = true;
     },
     editItem(item) {
       this.editedIndex = this.CourseDetailsList.indexOf(item);
       this.editedCourse = Object.assign({}, item);
       this.editCourseDetailDialog = true;
     },
     editChapterItem(item) {
       this.editedIndex = this.chapters.indexOf(item);
       this.editChapter = Object.assign({}, item);
       this.updates = [];
       for (let i = 0; i < this.editChapter.chapterPoints.length; i++) {
         this.updates.push({ value: this.editChapter.chapterPoints[i] });
       }
       this.editChapterDetailDialog = true;
     },
     deleteItem(item) {
       let deleteGallery = {
         courseDetailId: item._id,
       };
       http()
         .delete(
           "/deleteCourseDetail",
           confirm("Are you sure you want to delete this?") && {
             params: deleteGallery,
             headers: {
               Authorization: "Bearer " + this.token,
             },
           }
         )
         .then((response) => {
           this.snackbar = true;
           this.text = "Successfully delete Course Details";
           this.color = "green";
           this.getCourseDetailsList();
         })
         .catch((error) => {
           // console.log(error);
           this.snackbar = true;
           this.text = error.response.data.message;
           this.color = "error";
         });
     },
     deleteChapters(item) {
       // console.log("item", item);
       let deleteChapters = {
         courseDetailId: this.courseId,
         chapterId: item._id,
       };
       http()
         .put(
           "/deleteChapters",
           confirm("Are you sure you want to delete this?") && deleteChapters
         )
         .then((response) => {
           this.snackbar = true;
           this.text = "Successfully delete Chapters";
           this.color = "green";
           this.getCourseDetailsList();
         })
         .catch((error) => {
           // console.log(error);
           this.snackbar = true;
           this.text = error.response.data.message;
           this.color = "error";
         });
     },
     close() {
       this.editCourseDetailDialog = false;
     },
     closeProfileGallery() {
       this.viewProfileGallery = false;
     },
     submit() {
       let chapters = [];
       var chapterPoints = [];
       for (let i = 0; i < this.finds.length; i++) {
         chapterPoints.push(this.finds[i].value);
         // console.log("this.finds[i].value", this.finds[i].value);
         chapters = [
           {
             chapterName: this.addCourseDetail.chapterName,
             description: this.addCourseDetail.description,
             chapterPoints: chapterPoints,
             uploadPdf: this.pdfFile,
             uploadPpt: this.pptFile,
           },
         ];
       }
       if (this.$refs.form.validate()) {
         // console.log("this.addCourseDetail", this.addCourseDetail);
         var courseDetailsData = {
           classId: this.addCourseDetail.classId,
           courseId: this.addCourseDetail.courseId,
           chapters: chapters,
         };
         this.loading = true;
         http()
           .post("/createCourseDetail", courseDetailsData)
           .then((response) => {
             this.addCourseDetailDialog = false;
             this.loading = false;
             this.snackbar = true;
             this.text = response.data.message;
             this.color = "green";
             this.clear();
             this.trigger = "reset";
             this.emptyPdf = "reset";
             this.removeAddFind();
           })
           .catch((error) => {
             this.snackbar = true;
             this.text = error.response.data.message;
             this.color = "error";
             this.loading = false;
           });
       }
     },
     clear() {
       this.$refs.form.reset();
     },
     saveChapter() {
       this.editedItem.courseDetailId = this.editedItem._id;
       // console.log("this.updates", this.updates);
       var chapterPoints = [];
       for (let i = 0; i < this.updates.length; i++) {
         chapterPoints.push(this.updates[i].value);
       }
       var updateData = {
         courseDetailId: this.courseId,
         chapterId: this.editChapter._id,
         chapterName: this.editChapter.chapterName,
         description: this.editChapter.description,
         chapterPoints: chapterPoints,
         uploadPdf: this.pdfFile,
         uploadPpt: this.pptFile,
       };
       this.editLoading = true;
       http()
         .put("/updateChapters", updateData)
         .then((response) => {
           this.editChapterDetailDialog = false;
           this.snackbar = true;
           this.text = response.data.message;
           this.color = "green";
           this.editLoading = false;
           // this.removeUpdatePoints();
           this.trigger = "reset";
           this.emptyPdf = "reset";
           this.getCourseDetailsList();
         })
         .catch((error) => {
           this.editLoading = false;
           this.snackbar = true;
           this.text = error.response.data.message;
           this.color = "error";
         });
     },
     save() {
       var updateData = {
         courseDetailId: this.editedCourse._id,
         courseId: this.editedCourse.courseId,
         classId: this.editedCourse.classId,
       };
       this.editLoading = true;
       http()
         .put("/updateCourseDetail", updateData)
         .then((response) => {
           this.getCourseDetailsList();
           this.editCourseDetailDialog = false;
           this.snackbar = true;
           this.text = response.data.message;
           this.color = "green";
           this.editLoading = false;
           // this.editChapterPointName = "";
           this.editFiles = [];
         })
         .catch((error) => {
           this.editLoading = false;
           this.snackbar = true;
           this.text = error.response.data.message;
           this.color = "error";
         });
     },
     getAllClasses() {
       http()
         .get("/getClassesList", {
           headers: { Authorization: "Bearer " + this.token },
         })
         .then((response) => {
           this.addclass = response.data.data;
         })
         .catch((err) => {
           // console.log("err====>", err);
         });
     },
     removeChapterPoint: function () {
       this.findsChapterPoint = [{ value: "" }];
     },
     removeAddFind: function () {
       this.finds = [{ value: "" }];
     },
     addFind: function () {
       this.finds.push({ value: "" });
     },
     addChapterPoint: function () {
       this.findsChapterPoint.push({ value: "" });
     },
     update: function () {
       this.updates.push({ value: "" });
     },
     // removeUpdatePoints: function() {
     //   this.updates = [{ value: "" }];
     // },
     deleteFind: function (index) {
       this.finds.splice(index, 1);
       if (index === 0) this.addFind();
     },
     deleteChapterPoint: function (index) {
       this.findsChapterPoint.splice(index, 1);
       if (index === 0) this.addChapterPoint();
     },
     deleteUpdate: function (index) {
       this.updates.splice(index, 1);
       if (index === 0) this.update();
     },
     deleteUrl: function (index, youTubelinkId, id) {
       this.editChapter.chapterPoints.splice(index, 1);
       if (index === 0) this.update();
     },
     displaySearch() {
       this.show = false;
       this.showSearch = true;
     },
     closeSearch() {
       this.showSearch = false;
       this.show = true;
       this.search = "";
     },
   },
   mounted() {
     this.token = this.$store.state.token;
     this.getAllClasses();
   },
 };
 </script>

src/pages/Course/courseDiscussion.vue

Diff comments View file @01a4a52

 <template>
   <v-container fluid class="body-color">
     <v-dialog v-model="editDialog" max-width="600px" scrollable>
       <v-card flat class="card-style pa-2" dark>
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Edit Course Discussion</label>
             <v-icon size="24" class="right" @click="editDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-card-text>
           <v-form ref="form">
             <v-container fluid>
               <v-layout>
                 <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center">
                   <v-avatar size="100px" v-if="!editedItem.attachementUrl && !editImageUrl">
                     <img src="/static/icon/user.png" />
                   </v-avatar>
                   <img
                     :src="editedItem.attachementUrl"
                     v-else-if="editedItem.attachementUrl && !editImageUrl"
                     height="150"
                     style="border-radius:50%; width:150px"
                   />
                   <img
                     v-if="editImageUrl"
                     :src="editImageUrl"
                     style="border-radius:50%; width:150px;height:150px"
                   />
                   <input
                     type="file"
                     style="display: none"
                     ref="editDataImage"
                     accept="image/*"
                     @change="onEditFilePicked"
                   />
                 </v-flex>
               </v-layout>
               <v-layout wrap>
                 <v-flex xs12 sm12>
                   <v-layout>
                     <v-flex xs4 sm5 class="pt-4 subheading">
                       <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
                       <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
                     </v-flex>
                     <v-flex xs8 sm7 class="ml-3">
                       <v-select
                         :items="addclass"
                         v-model="editedItem.classId"
                         item-text="classNum"
                         item-value="_id"
                         name="Select Class"
                         required
                         @change="editGetCourses(editedItem.classId)"
                       ></v-select>
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs12 sm12>
                       <v-layout>
                         <v-flex xs4 sm5 class="pt-4 subheading">
                           <label class="right">Select Course:</label>
                         </v-flex>
                         <v-flex xs8 sm7 class="ml-3">
                           <v-select
                             :items="editCourseData"
                             label="Select Course"
                             v-model="editedItem.courseId"
                             item-text="courseName"
                             item-value="_id"
                             required
                             class="ml-2"
                           ></v-select>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs4 sm5 class="pt-4 subheading">
                       <label class="right">Subject:</label>
                     </v-flex>
                     <v-flex xs8 sm7 class="ml-3">
                       <v-text-field v-model="editedItem.subject" type="text" required></v-text-field>
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs4 sm5 class="pt-4 subheading">
                       <label class="right">Description:</label>
                     </v-flex>
                     <v-flex xs8 sm7 class="ml-3">
                       <v-text-field v-model="editedItem.description" type="text" required></v-text-field>
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs4 sm5 class="pt-4 subheading">
                       <label class="right hidden-xs-only hidden-sm-only">Upload Image:</label>
                       <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Upload:</label>
                     </v-flex>
                     <v-flex xs8 sm7 class="ml-3">
                       <v-text-field
                         @click="pickEditFile"
                         v-model="editImageName"
                         append-icon="attach_file"
                       ></v-text-field>
                     </v-flex>
                   </v-layout>
                 </v-flex>
               </v-layout>
               <v-layout>
                 <v-flex xs12 sm12 class="px-0 mx-0">
                   <v-layout class="right">
                     <v-btn @click="save" round dark :loading="editLoading" class="add-button">Save</v-btn>
                   </v-layout>
                 </v-flex>
               </v-layout>
             </v-container>
           </v-form>
         </v-card-text>
       </v-card>
     </v-dialog>
     <!-- ****** DIsCUSIION TABLE ****** -->
     <v-toolbar color="transparent" flat>
       <v-spacer></v-spacer>
       <v-flex xs12 sm4 md2>
         <v-select
           small
           :items="addclass"
           label="Select Class"
           v-model="getSelectedData.classId"
           item-text="classNum"
           item-value="_id"
           name="Select Class"
           @change="getCourses(getSelectedData.classId)"
           class="mr-2"
           required
         ></v-select>
       </v-flex>
       <v-flex xs12 sm4 md2>
         <v-select
           :items="courseData"
           label="Select Course"
           v-model="getSelectedData.courseId"
           item-text="courseName"
           item-value="_id"
           required
           class="ml-2"
           @change="getCourseDiscussionTable(getSelectedData.courseId)"
         ></v-select>
       </v-flex>
       <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 md3 lg2 v-if="showSearch">
         <v-layout>
-          <v-text-field autofocus v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>
+          <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="courseDiscussionData"
       :pagination.sync="pagination"
       :search="search"
     >
       <template slot="items" slot-scope="props">
         <tr class="tr row-click" @click="rowCourseDiscussion(props.item._id)">
           <td class="text-xs-center td td-row">
             <v-avatar size="40">
               <img :src="props.item.attachementUrl" v-if="props.item.attachementUrl" />
               <img src="/static/icon/user.png" v-else-if="!props.item.attachementUrl" />
             </v-avatar>
           </td>
           <td class="text-xs-center td td-row">{{ props.item.subject }}</td>
           <td class="text-xs-center td td-row">{{ props.item.studentId.name}}</td>
           <td class="text-xs-center td td-row">-</td>
           <td class="text-xs-center td td-row">{{ props.item.forumThread.length }}</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>
     <v-snackbar
       :timeout="timeout"
       :top="y === 'top'"
       :right="x === 'right'"
       :vertical="mode === 'vertical'"
       v-model="snackbar"
-      color="success"
+      :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";
 export default {
   data: () => ({
     snackbar: false,
     y: "top",
     x: "right",
     mode: "",
     timeout: 3000,
     text: "",
+    color: "",
     show: true,
     showSearch: false,
     showLoader: false,
     loading: false,
     date: null,
     search: "",
     addclass: [],
     pagination: {
-      rowsPerPage: 10
+      rowsPerPage: 10,
     },
     headers: [
       {
         text: "Image",
         value: "subjattachementUrlect",
         sortable: false,
-        align: "center"
+        align: "center",
       },
       {
         text: "Discussion",
         value: "subject",
         sortable: false,
-        align: "center"
+        align: "center",
       },
       { text: "Started", value: "studentId", sortable: false, align: "center" },
       {
         text: "Last Post",
         value: "forumThread",
         sortable: false,
-        align: "center"
+        align: "center",
       },
       { text: "replies", value: "email", sortable: false, align: "center" },
-      { text: "Action", value: "", sortable: false, align: "center" }
+      { text: "Action", value: "", sortable: false, align: "center" },
     ],
     token: "",
     selectStudents: {
       select: "",
-      selectSection: ""
+      selectSection: "",
     },
     role: "",
     schoolRole: "",
     menu: false,
     valid: true,
     getSelectedData: {},
     courseDiscussionData: [],
     courseData: [],
     editCourseData: [],
     addSection: [],
     editedItem: {},
     editDialog: false,
     editedIndex: -1,
     editiImageFile: "",
     editImageName: "",
     editImageUrl: "",
-    editLoading: false
+    editLoading: false,
+    showData: false,
   }),
   methods: {
     // save(date) {
     //   this.$refs.menu.save(date);
     // },
     pickEditFile() {
       this.$refs.editDataImage.click();
     },
     onEditFilePicked(e) {
       console.log(e);
       const files = e.target.files;
       if (files[0] !== undefined) {
         this.editImageName = files[0].name;
         console.log("this.editImageName", this.editImageName);
         if (this.editImageName.lastIndexOf(".") <= 0) {
           return;
         }
         const fr = new FileReader();
         fr.readAsDataURL(files[0]);
         fr.addEventListener("load", () => {
           this.editImageUrl = fr.result;
           this.editiImageFile = files[0]; // this is an image file that can be sent to server...
         });
       } else {
         this.editImageName = "";
         this.editiImageFile = "";
       }
     },
     getAllClass() {
       http()
         .get("/getClassesList", {
-          headers: { Authorization: "Bearer " + this.token }
+          headers: { Authorization: "Bearer " + this.token },
         })
-        .then(response => {
+        .then((response) => {
           this.addclass = response.data.data;
         })
-        .catch(error => {
+        .catch((error) => {
           // console.log("err====>", err);
           // this.$router.replace({ path: "/" });
         });
     },
     getCourses(classId) {
       this.showLoader = true;
       http()
         .get("/getCourseesList", {
           params: {
-            classId: classId
+            classId: classId,
-          }
+          },
         })
-        .then(response => {
+        .then((response) => {
           this.courseData = response.data.data;
           this.showLoader = false;
         })
-        .catch(err => {
+        .catch((err) => {
           console.log("err====>", err);
           this.showLoader = false;
         });
     },
     editGetCourses(classId) {
       this.showLoader = true;
       http()
         .get("/getCourseesList", {
           params: {
-            classId: classId
+            classId: classId,
-          }
+          },
         })
-        .then(response => {
+        .then((response) => {
           this.editCourseData = response.data.data;
           this.showLoader = false;
         })
-        .catch(err => {
+        .catch((err) => {
           console.log("err====>", err);
           this.showLoader = false;
         });
     },
     getCourseDiscussionTable(id) {
       // console.log("id", this.getSelectedData.courseId);
       this.showLoader = true;
       http()
         .get("/getCourseDiscussionesList", {
           params: {
             classId: this.getSelectedData.classId,
-            courseId: id
+            courseId: id,
-          }
+          },
         })
-        .then(response => {
+        .then((response) => {
           //   console.log("response", response.data.data);
           this.courseDiscussionData = response.data.data;
+          if (this.courseDiscussionData.length === 0) {
+            this.showLoader = false;
+            this.snackbar = true;
+            this.text = "Data not found!";
+            this.color = "error";
+            return;
+          }
+          this.showData = true;
           this.showLoader = false;
         })
-        .catch(error => {
+        .catch((error) => {
           console.log("err====>", error);
           this.showLoader = false;
         });
     },
     rowCourseDiscussion(id) {
       this.$router.push({
         name: "Course Discussiones Fourm",
-        params: { discussionId: id }
+        params: { discussionId: id },
       });
     },
     editItem(item) {
       this.editedIndex = this.courseDiscussionData.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.editDialog = true;
     },
     save() {
       console.log("this.editedItem", this.editedItem);
       let editCourseDiscuss = {
         courseDiscussionId: this.editedItem._id,
         courseId: this.editedItem.courseId,
         studentId: this.editedItem.studentId._id,
         subject: this.editedItem.subject,
-        description: this.editedItem.description
+        description: this.editedItem.description,
       };
       if (this.editedItem.classId._id) {
         editCourseDiscuss.classId = this.editedItem.classId._id;
       }
       if (!this.editedItem.classId._id) {
         editCourseDiscuss.classId = this.editedItem.classId;
       }
       if (this.editImageUrl) {
         var str = this.editImageUrl;
         const [baseUrl, editImageUrl] = str.split(/,/);
         editCourse.upload = editImageUrl;
       }
       this.editLoading = true;
       http()
         .put("/updateCourseDiscussion", editCourseDiscuss)
-        .then(response => {
+        .then((response) => {
           this.snackbar = true;
           this.text = response.data.message;
           this.color = "green";
           this.imageUrl = "";
           this.getCourseDiscussionTable();
           this.editDialog = false;
           this.editLoading = false;
         })
-        .catch(error => {
+        .catch((error) => {
           this.editLoading = false;
           this.snackbar = true;
           this.text = error.response.data.statusText;
           this.color = "error";
         });
     },
     deleteItem(item) {
       let deleteCourseDiscussion = {
-        courseDiscussionId: item._id
+        courseDiscussionId: item._id,
       };
       http()
         .delete(
           "/deleteCourseDiscussion",
           confirm("Are you sure you want to delete this?") && {
-            params: deleteCourseDiscussion
+            params: deleteCourseDiscussion,
           }
         )
-        .then(response => {
+        .then((response) => {
           this.snackbar = true;
           this.text = response.data.message;
           this.color = "green";
           this.getCourseDiscussionTable();
         })
-        .catch(error => {
+        .catch((error) => {
           this.snackbar = true;
           this.text = error.response.data.message;
           this.color = "error";
         });
     },
     displaySearch() {
       this.show = false;
       this.showSearch = true;
     },
     closeSearch() {
       this.showSearch = false;
       this.show = true;
       this.search = "";
-    }
+    },
   },
   mounted() {
     // this.getStudentList();
     this.token = this.$store.state.token;
     this.role = this.$store.state.role;
     this.getAllClass();
-  }
+  },
 };
 </script>
 <style>
 .row-click {
   cursor: pointer !important;
 }
 </style>

src/pages/Payroll/hourlyTemplate.vue

Diff comments View file @01a4a52

1	<template>	1	<template>
2	<v-container fluid class="body-color">	2	<v-container fluid class="body-color">
3	<!-- **** Edit Hourly Template **** -->	3	<!-- **** Edit Hourly Template **** -->
4	<v-dialog v-model="editHourDialog" max-width="400px">	4	<v-dialog v-model="editHourDialog" max-width="400px">
5	<v-card flat class="card-style pa-2" dark>	5	<v-card flat class="card-style pa-2" dark>
6	<v-layout>	6	<v-layout>
7	<v-flex xs12>	7	<v-flex xs12>
8	<label class="title text-xs-center">Edit Hourly Template</label>	8	<label class="title text-xs-center">Edit Hourly Template</label>
9	<v-icon size="24" class="right" @click="editHourDialog = false">cancel</v-icon>	9	<v-icon size="24" class="right" @click="editHourDialog = false">cancel</v-icon>
10	</v-flex>	10	</v-flex>
11	</v-layout>	11	</v-layout>
12	<v-form ref="form">	12	<v-form ref="form">
13	<v-container fluid>	13	<v-container fluid>
14	<v-flex xs12 sm12>	14	<v-flex xs12 sm12>
15	<v-layout>	15	<v-layout>
16	<v-flex xs3 class="pt-4 subheading">	16	<v-flex xs3 class="pt-4 subheading">
17	<label class="right">Hourly Grades:</label>	17	<label class="right">Hourly Grades:</label>
18	</v-flex>	18	</v-flex>
19	<v-flex xs8 sm7 class="ml-3">	19	<v-flex xs8 sm7 class="ml-3">
20	<v-text-field	20	<v-text-field
21	v-model="editedItem.hourlyGrades"	21	v-model="editedItem.hourlyGrades"
22	placeholder="please fill this field"	22	placeholder="please fill this field"
23	></v-text-field>	23	></v-text-field>
24	</v-flex>	24	</v-flex>
25	</v-layout>	25	</v-layout>
26	</v-flex>	26	</v-flex>
27	<v-flex xs12 sm12>	27	<v-flex xs12 sm12>
28	<v-layout>	28	<v-layout>
29	<v-flex xs3 class="pt-4 subheading">	29	<v-flex xs3 class="pt-4 subheading">
30	<label class="right">Hourly Reates:</label>	30	<label class="right">Hourly Reates:</label>
31	</v-flex>	31	</v-flex>
32	<v-flex xs8 sm7 class="ml-3">	32	<v-flex xs8 sm7 class="ml-3">
33	<v-text-field	33	<v-text-field
34	v-model="editedItem.hourlyRate"	34	v-model="editedItem.hourlyRate"
35	placeholder="please fill this field"	35	placeholder="please fill this field"
36	></v-text-field>	36	></v-text-field>
37	</v-flex>	37	</v-flex>
38	</v-layout>	38	</v-layout>
39	</v-flex>	39	</v-flex>
40	<v-layout>	40	<v-layout>
41	<v-flex xs12>	41	<v-flex xs12>
42	<v-layout>	42	<v-layout>
43	<v-spacer></v-spacer>	43	<v-spacer></v-spacer>
44	<v-btn round dark @click="save" class="add-button">Update Hourly Template</v-btn>	44	<v-btn round dark @click="save" class="add-button">Update Hourly Template</v-btn>
45	<v-spacer></v-spacer>	45	<v-spacer></v-spacer>
46	</v-layout>	46	</v-layout>
47	</v-flex>	47	</v-flex>
48	</v-layout>	48	</v-layout>
49	</v-container>	49	</v-container>
50	</v-form>	50	</v-form>
51	</v-card>	51	</v-card>
52	</v-dialog>	52	</v-dialog>
53		53
54	<!-- ** HOURLY TEMPLATE ** -->	54	<!-- ** HOURLY TEMPLATE ** -->
55	<v-toolbar color="transparent" flat>	55	<v-toolbar color="transparent" flat>
56	<v-btn	56	<v-btn
57	fab	57	fab
58	dark	58	dark
59	class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"	59	class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
60	small	60	small
61	@click="addHourDialog = true"	61	@click="addHourDialog = true"
62	>	62	>
63	<v-icon dark>add</v-icon>	63	<v-icon dark>add</v-icon>
64	</v-btn>	64	</v-btn>
65	<v-btn	65	<v-btn
66	round	66	round
67	class="open-dialog-button hidden-sm-only hidden-xs-only"	67	class="open-dialog-button hidden-sm-only hidden-xs-only"
68	dark	68	dark
69	@click="addHourDialog = true"	69	@click="addHourDialog = true"
70	>	70	>
71	<v-icon class="white--text pr-1" size="20">add</v-icon>Add Hourly Template	71	<v-icon class="white--text pr-1" size="20">add</v-icon>Add Hourly Template
72	</v-btn>	72	</v-btn>
73	<v-spacer></v-spacer>	73	<v-spacer></v-spacer>
74	<v-card-title class="body-1" v-show="show">	74	<v-card-title class="body-1" v-show="show">
75	<v-btn icon large flat @click="displaySearch">	75	<v-btn icon large flat @click="displaySearch">
76	<v-avatar size="27">	76	<v-avatar size="27">
77	<img src="/static/icon/search.png" alt="icon" />	77	<img src="/static/icon/search.png" alt="icon" />
78	</v-avatar>	78	</v-avatar>
79	</v-btn>	79	</v-btn>
80	</v-card-title>	80	</v-card-title>
81	<v-flex xs8 sm8 md3 lg2 v-if="showSearch">	81	<v-flex xs8 sm8 md3 lg2 v-if="showSearch">
82	<v-layout>	82	<v-layout>
83	<v-text-field	83	<v-text-field
84	autofocus	84	autofocus
85	v-model="search"	85	v-model="search"
86	label="Search"	86	label="Search"
87	prepend-inner-icon="search"	87	prepend-inner-icon="search"
88	color="primary"	88	color="primary"
89	></v-text-field>	89	></v-text-field>
90	<v-icon @click="closeSearch" color="error">close</v-icon>	90	<v-icon @click="closeSearch" color="error">close</v-icon>
91	</v-layout>	91	</v-layout>
92	</v-flex>	92	</v-flex>
93	</v-toolbar>	93	</v-toolbar>
94		94
95	<v-data-table	95	<v-data-table
96	:headers="headers"	96	:headers="headers"
97	:items="hourlyData"	97	:items="hourlyData"
98	:pagination.sync="pagination"	98	:pagination.sync="pagination"
99	:search="search"	99	:search="search"
100	>	100	>
101	<template slot="items" slot-scope="props">	101	<template slot="items" slot-scope="props">
102	<tr class="tr">	102	<tr class="tr">
103	<td class="td td-row">{{ props.index + 1}}</td>	103	<td class="td td-row">{{ props.index + 1}}</td>
104	<td class="td td-row text-xs-center">{{ props.item.hourlyGrades}}</td>	104	<td class="td td-row text-xs-center">{{ props.item.hourlyGrades}}</td>
105	<td class="td td-row text-xs-center">{{ props.item.hourlyRate}}</td>	105	<td class="td td-row text-xs-center">{{ props.item.hourlyRate}}</td>
106	<!-- <td class="td td-row text-xs-center">{{ props.item.overtimeRate}}</td> -->	106	<!-- <td class="td td-row text-xs-center">{{ props.item.overtimeRate}}</td> -->
107	<td class="td td-row text-xs-center">	107	<td class="td td-row text-xs-center">
108	<span>	108	<span>
109	<v-tooltip top>	109	<v-tooltip top>
110	<img	110	<img
111	slot="activator"	111	slot="activator"
112	style="cursor:pointer; width:20px; height:18px; "	112	style="cursor:pointer; width:20px; height:18px; "
113	class="mr-3"	113	class="mr-3"
114	@click="editItem(props.item)"	114	@click="editItem(props.item)"
115	src="/static/icon/edit.png"	115	src="/static/icon/edit.png"
116	/>	116	/>
117	<span>Edit</span>	117	<span>Edit</span>
118	</v-tooltip>	118	</v-tooltip>
119	<v-tooltip top>	119	<v-tooltip top>
120	<img	120	<img
121	slot="activator"	121	slot="activator"
122	style="cursor:pointer; width:20px; height:20px; "	122	style="cursor:pointer; width:20px; height:20px; "
123	class="mr-3"	123	class="mr-3"
124	@click="deleteItem(props.item)"	124	@click="deleteItem(props.item)"
125	src="/static/icon/delete.png"	125	src="/static/icon/delete.png"
126	/>	126	/>
127	<span>Delete</span>	127	<span>Delete</span>
128	</v-tooltip>	128	</v-tooltip>
129	</span>	129	</span>
130	</td>	130	</td>
131	</tr>	131	</tr>
132	</template>	132	</template>
133	<v-alert	133	<v-alert
134	slot="no-results"	134	slot="no-results"
135	:value="true"	135	:value="true"
136	color="error"	136	color="error"
137	icon="warning"	137	icon="warning"
138	>Your search for "{{ search }}" found no results.</v-alert>	138	>Your search for "{{ search }}" found no results.</v-alert>
139	</v-data-table>	139	</v-data-table>
140		140
141	<!-- ** Add Hourly Template ** -->	141	<!-- ** Add Hourly Template ** -->
142	<v-dialog v-model="addHourDialog" max-width="400px" v-if="addHourDialog">	142	<v-dialog v-model="addHourDialog" max-width="400px" v-if="addHourDialog">
143	<v-card flat class="card-style pa-2" dark>	143	<v-card flat class="card-style pa-2" dark>
144	<v-layout>	144	<v-layout>
145	<v-flex xs12>	145	<v-flex xs12>
146	<label class="title text-xs-center">Add Hourly Template</label>	146	<label class="title text-xs-center">Add Hourly Template</label>
147	<v-icon size="24" class="right" @click="closeAddHourModel">cancel</v-icon>	147	<v-icon size="24" class="right" @click="closeAddHourModel">cancel</v-icon>
148	</v-flex>	148	</v-flex>
149	</v-layout>	149	</v-layout>
150	<v-form ref="form" v-model="valid" lazy-validation>	150	<v-form ref="form" v-model="valid" lazy-validation>
151	<v-container fluid>	151	<v-container fluid>
152	<v-flex xs12>	152	<v-flex xs12>
153	<v-layout>	153	<v-layout>
154	<v-flex xs4 class="pt-4 subheading">	154	<v-flex xs4 class="pt-4 subheading">
155	<label class="right">Hourly Grades:</label>	155	<label class="right">Hourly Grades:</label>
156	</v-flex>	156	</v-flex>
157	<v-flex xs8 sm7 class="ml-3">	157	<v-flex xs8 sm7 class="ml-3">
158	<v-text-field	158	<v-text-field
159	placeholder="Please fill this field"	159	placeholder="Please fill this field"
160	:rules="hourRules"	160	:rules="hourRules"
161	v-model="hourlyTypes.hourlyGrades"	161	v-model="hourlyTypes.hourlyGrades"
162	></v-text-field>	162	></v-text-field>
163	</v-flex>	163	</v-flex>
164	</v-layout>	164	</v-layout>
165	</v-flex>	165	</v-flex>
166	<v-flex xs12>	166	<v-flex xs12>
167	<v-layout>	167	<v-layout>
168	<v-flex xs4 class="pt-4 subheading">	168	<v-flex xs4 class="pt-4 subheading">
169	<label class="right">Hourly Rate:</label>	169	<label class="right">Hourly Rate:</label>
170	</v-flex>	170	</v-flex>
171	<v-flex xs8 sm7 class="ml-3">	171	<v-flex xs8 sm7 class="ml-3">
172	<v-text-field	172	<v-text-field
173	placeholder="Please fill this field"	173	placeholder="Please fill this field"
174	:rules="hourRules"	174	:rules="hourRules"
175	v-model="hourlyTypes.hourlyRate"	175	v-model="hourlyTypes.hourlyRate"
176	></v-text-field>	176	></v-text-field>
177	</v-flex>	177	</v-flex>
178	</v-layout>	178	</v-layout>
179	</v-flex>	179	</v-flex>
180	<v-layout>	180	<v-layout>
181	<v-flex xs12 sm12>	181	<v-flex xs12 sm12>
182	<v-layout>	182	<v-layout>
183	<v-spacer></v-spacer>	183	<v-spacer></v-spacer>
184	<!-- <v-btn @click="clear" round class="add-button" dark>clear</v-btn> -->	184	<!-- <v-btn @click="clear" round class="add-button" dark>clear</v-btn> -->
185	<v-btn	185	<v-btn
186	@click="submit"	186	@click="submit"
187	round	187	round
188	dark	188	dark
189	:loading="loading"	189	:loading="loading"
190	class="add-button"	190	class="add-button"
191	>Add Hourly Template</v-btn>	191	>Add Hourly Template</v-btn>
192	<v-spacer></v-spacer>	192	<v-spacer></v-spacer>
193	</v-layout>	193	</v-layout>
194	</v-flex>	194	</v-flex>
195	</v-layout>	195	</v-layout>
196	</v-container>	196	</v-container>
197	</v-form>	197	</v-form>
198	</v-card>	198	</v-card>
199	</v-dialog>	199	</v-dialog>
200		200
201	<v-snackbar	201	<v-snackbar
202	:timeout="timeout"	202	:timeout="timeout"
203	:top="y === 'top'"	203	:top="y === 'top'"
204	:right="x === 'right'"	204	:right="x === 'right'"
205	:vertical="mode === 'vertical'"	205	:vertical="mode === 'vertical'"
206	v-model="snackbar"	206	v-model="snackbar"
207	:color="color"	207	:color="color"
208	>{{ text }}</v-snackbar>	208	>{{ text }}</v-snackbar>
209	<div class="loader" v-if="showLoader">	209	<div class="loader" v-if="showLoader">
210	<v-progress-circular indeterminate color="white"></v-progress-circular>	210	<v-progress-circular indeterminate color="white"></v-progress-circular>
211	</div>	211	</div>
212	</v-container>	212	</v-container>
213	</template>	213	</template>
214		214
215	<script>	215	<script>
216	import http from "@/Services/http.js";	216	import http from "@/Services/http.js";
217	import moment from "moment";	217	import moment from "moment";
218		218
219	export default {	219	export default {
220	data: () => ({	220	data: () => ({
221	snackbar: false,	221	snackbar: false,
222	date: null,	222	date: null,
223	color: "",	223	color: "",
224	y: "top",	224	y: "top",
225	x: "right",	225	x: "right",
226	mode: "",	226	mode: "",
227	timeout: 10000,	227	timeout: 10000,
228	text: "",	228	text: "",
229	show: true,	229	show: true,
230	showSearch: false,	230	showSearch: false,
231	addHourDialog: false,	231	addHourDialog: false,
232	loading: false,	232	loading: false,
233	loadingSearch: false,	233	loadingSearch: false,
234	search: "",	234	search: "",
235	showLoader: false,	235	showLoader: false,
236	editHourDialog: false,	236	editHourDialog: false,
237	valid: true,	237	valid: true,
238	disabled: true,	238	disabled: true,
239	pagination: {	239	pagination: {
240	rowsPerPage: 10,	240	rowsPerPage: 10,
241	},	241	},
242	hourRules: [(v) => !!v \|\| "Field is required"],	242	hourRules: [(v) => !!v \|\| "Field is required"],
243		243
244	headers: [	244	headers: [
245	{	245	{
246	align: "",	246	align: "",
247	text: "No",	247	text: "No",
248	sortable: false,	248	sortable: false,
249	value: "No",	249	value: "No",
250	},	250	},
251	{	251	{
252	text: "Hourly Grades",	252	text: "Hourly Grades",
253	value: "hourlyGrades",	253	value: "hourlyGrades",
254	sortable: false,	254	sortable: false,
255	align: "center",	255	align: "center",
256	},	256	},
257	{	257	{
258	text: "Hourly Rate",	258	text: "Hourly Rate",
259	value: "hourlyRate",	259	value: "hourlyRate",
260	sortable: false,	260	sortable: false,
261	align: "center",	261	align: "center",
262	},	262	},
263	{ text: "Action", value: "", sortable: false, align: "center" },	263	{ text: "Action", value: "", sortable: false, align: "center" },
264	],	264	],
265	hourlyTypes: [],	265	hourlyTypes: [],
266	hourlyData: [],	266	hourlyData: [],
267	editedItem: {},	267	editedItem: {},
268	}),	268	}),
269	watch: {	269	watch: {
270	addHourDialog: function (val) {	270	addHourDialog: function (val) {
271	if (!val) {	271	if (!val) {
272	this.hourlyTypes = [];	272	this.hourlyTypes = [];
273	}	273	}
274	},	274	},
275	},	275	},
276	methods: {	276	methods: {
277	close() {	277	close() {
278	this.editHourDialog = false;	278	this.editHourDialog = false;
279	},	279	},
280	closeAddHourModel() {	280	closeAddHourModel() {
281	this.addHourDialog = false;	281	this.addHourDialog = false;
282	this.hourlyData = [];	282	// this.hourlyData = [];
283	this.hourlyTypes = [];	283	this.hourlyTypes = [];
284	},	284	},
285	submit() {	285	submit() {
286	var Hour = {	286	var Hour = {
287	hourlyGrades: this.hourlyTypes.hourlyGrades,	287	hourlyGrades: this.hourlyTypes.hourlyGrades,
288	hourlyRate: this.hourlyTypes.hourlyRate,	288	hourlyRate: this.hourlyTypes.hourlyRate,
289	};	289	};
290	if (this.$refs.form.validate()) {	290	if (this.$refs.form.validate()) {
291	this.loading = true;	291	this.loading = true;
292	http()	292	http()
293	.post("/createHourly", Hour, {	293	.post("/createHourly", Hour, {
294	headers: { Authorization: "Bearer " + this.token },	294	headers: { Authorization: "Bearer " + this.token },
295	})	295	})
296	.then((response) => {	296	.then((response) => {
297	this.snackbar = true;	297	this.snackbar = true;
298	this.text = response.data.message;	298	this.text = response.data.message;
299	this.getHourlyList();	299	this.getHourlyList();
300	this.color = "green";	300	this.color = "green";
301	this.addHourDialog = false;	301	this.addHourDialog = false;
302	// this.color = "success";	302	// this.color = "success";
303	this.clear();	303	this.clear();
304	this.loading = false;	304	this.loading = false;
305	})	305	})
306	.catch((error) => {	306	.catch((error) => {
307	console.log("error", error);	307	console.log("error", error);
308	this.snackbar = true;	308	this.snackbar = true;
309	this.color = "red";	309	this.color = "red";
310	// this.text = error.response.data.message;	310	// this.text = error.response.data.message;
311	this.loading = false;	311	this.loading = false;
312	});	312	});
313	}	313	}
314	},	314	},
315	getHourlyList() {	315	getHourlyList() {
316	this.showLoader = true;	316	this.showLoader = true;
317	this.loadingSearch = true;	317	this.loadingSearch = true;
318	http()	318	http()
319	.get("/getHourlyList", {	319	.get("/getHourlyList", {
320	headers: { Authorization: "Bearer " + this.token },	320	headers: { Authorization: "Bearer " + this.token },
321	})	321	})
322	.then((response) => {	322	.then((response) => {
323	this.hourlyData = response.data.data;	323	this.hourlyData = response.data.data;
324	this.showLoader = false;	324	this.showLoader = false;
325	this.loadingSearch = false;	325	this.loadingSearch = false;
326	})	326	})
327	.catch((error) => {	327	.catch((error) => {
328	// console.log("err====>", err);	328	// console.log("err====>", err);
329	this.showLoader = false;	329	this.showLoader = false;
330	this.loadingSearch = false;	330	this.loadingSearch = false;
331	this.snackbar = true;	331	this.snackbar = true;
332	this.text = error.response.data.message;	332	this.text = error.response.data.message;
333	if (error.response.status === 401) {	333	if (error.response.status === 401) {
334	this.$router.replace({ path: "/" });	334	this.$router.replace({ path: "/" });
335	this.$store.dispatch("setToken", null);	335	this.$store.dispatch("setToken", null);
336	this.$store.dispatch("Id", null);	336	this.$store.dispatch("Id", null);
337	}	337	}
338	});	338	});
339	},	339	},
340		340
341	editItem(item) {	341	editItem(item) {
342	this.editedIndex = this.hourlyData.indexOf(item);	342	this.editedIndex = this.hourlyData.indexOf(item);
343	this.editedItem = Object.assign({}, item);	343	this.editedItem = Object.assign({}, item);
344	this.editHourDialog = true;	344	this.editHourDialog = true;
345	},	345	},
346	deleteItem(item) {	346	deleteItem(item) {
347	let deleteGrade = {	347	let deleteGrade = {
348	hourlyId: item._id,	348	hourlyId: item._id,
349	};	349	};
350	http()	350	http()
351	.delete(	351	.delete(
352	"/deleteHourly",	352	"/deleteHourly",
353	confirm("Are you sure you want to delete this?") && {	353	confirm("Are you sure you want to delete this?") && {
354	params: deleteGrade,	354	params: deleteGrade,
355	},	355	},
356	{	356	{
357	headers: {	357	headers: {
358	Authorization: "Bearer " + this.token,	358	Authorization: "Bearer " + this.token,
359	},	359	},
360	}	360	}
361	)	361	)
362	.then((response) => {	362	.then((response) => {
363	this.snackbar = true;	363	this.snackbar = true;
364	// this.text = "Successfully Delete Salary ";	364	// this.text = "Successfully Delete Salary ";
365	this.text = response.data.message;	365	this.text = response.data.message;
366	this.color = "green";	366	this.color = "green";
367	this.getHourlyList();	367	this.getHourlyList();
368	})	368	})
369	.catch((error) => {	369	.catch((error) => {
370	console.log("error", error);	370	console.log("error", error);
371	this.snackbar = true;	371	this.snackbar = true;
372	this.text = error.response.data.message;	372	this.text = error.response.data.message;
373	this.color = "red";	373	this.color = "red";
374	});	374	});
375	},	375	},
376		376
377	save() {	377	save() {
378	var updateHourly = {	378	var updateHourly = {
379	hourlyId: this.editedItem._id,	379	hourlyId: this.editedItem._id,
380	hourlyGrades: this.editedItem.hourlyGrades,	380	hourlyGrades: this.editedItem.hourlyGrades,
381	hourlyRate: this.editedItem.hourlyRate,	381	hourlyRate: this.editedItem.hourlyRate,
382	};	382	};
383	http()	383	http()
384	.put("/updateHourly", updateHourly, {	384	.put("/updateHourly", updateHourly, {
385	headers: {	385	headers: {
386	Authorization: "Bearer " + this.token,	386	Authorization: "Bearer " + this.token,
387	},	387	},
388	})	388	})
389	.then((response) => {	389	.then((response) => {
390	// this.text = "Successfully Edit Notification";	390	// this.text = "Successfully Edit Notification";
391	this.getHourlyList();	391	this.getHourlyList();
392	this.close();	392	this.close();
393	this.snackbar = true;	393	this.snackbar = true;
394	this.text = response.data.message;	394	this.text = response.data.message;
395	this.color = "green";	395	this.color = "green";
396	this.editHourDialog = false;	396	this.editHourDialog = false;
397	})	397	})
398	.catch((error) => {	398	.catch((error) => {
399	console.log("error", error);	399	console.log("error", error);
400	this.snackbar = true;	400	this.snackbar = true;
401	// this.text = error.response.data.message;	401	// this.text = error.response.data.message;
402	this.color = "red";	402	this.color = "red";
403	});	403	});
404	},	404	},
405		405
406	displaySearch() {	406	displaySearch() {
407	(this.show = false), (this.showSearch = true);	407	(this.show = false), (this.showSearch = true);
408	},	408	},
409	closeSearch() {	409	closeSearch() {
410	this.showSearch = false;	410	this.showSearch = false;
411	this.show = true;	411	this.show = true;
412	this.search = "";	412	this.search = "";
413	},	413	},
414	clear() {	414	clear() {
415	this.$refs.form.reset();	415	this.$refs.form.reset();
416	},	416	},
417	},	417	},
418	mounted() {	418	mounted() {
419	this.token = this.$store.state.token;	419	this.token = this.$store.state.token;
420	this.getHourlyList();	420	this.getHourlyList();
421	},	421	},
422	};	422	};
423	</script>	423	</script>
424		424
425	<style scoped>	425	<style scoped>
426	</style>	426	</style>

src/pages/Payroll/salaryTemplate.vue

Diff comments View file @01a4a52

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