viithiisys / School-Management-dashboard

Browse Code »

Commit 8c3acf4a97b940aca26b12a8c03a18b655eb1324

Authored by Shikha Mishra 2020-04-29 04:01:30 -0400

1 parent fa4edf9292

Exists in master and in 3 other branches

improve details

Showing 10 changed files with 11 additions and 11 deletions Show diff stats

src/pages/Account/expense.vue

Diff comments View file @8c3acf4

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

src/pages/Administrator/academicYear.vue

Diff comments View file @8c3acf4

1	<template>	1	<template>
2	<v-container fluid class="body-color">	2	<v-container fluid class="body-color">
3	<!-- **** EDIT ACADEMIC YEAR **** -->	3	<!-- **** EDIT ACADEMIC YEAR **** -->
4	<v-dialog v-model="editAcademinYearDialog" max-width="600px">	4	<v-dialog v-model="editAcademinYearDialog" max-width="600px">
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 Academin Year</label>	8	<label class="title text-xs-center">Edit Academic Year</label>
9	<v-icon size="24" class="right" @click="editAcademinYearDialog = false">cancel</v-icon>	9	<v-icon size="24" class="right" @click="editAcademinYearDialog = false">cancel</v-icon>
10	</v-flex>	10	</v-flex>
11	</v-layout>	11	</v-layout>
12	<v-container fluid>	12	<v-container fluid>
13	<v-flex xs12 sm12>	13	<v-flex xs12 sm12>
14	<v-layout>	14	<v-layout>
15	<v-flex xs4 class="pt-4 subheading">	15	<v-flex xs4 class="pt-4 subheading">
16	<label class="right">Year:</label>	16	<label class="right">Year:</label>
17	</v-flex>	17	</v-flex>
18	<v-flex xs8 sm7 class="ml-3">	18	<v-flex xs8 sm7 class="ml-3">
19	<v-text-field	19	<v-text-field
20	v-model="editedItem.year"	20	v-model="editedItem.year"
21	placeholder="fill your Title"	21	placeholder="fill your Title"
22	name="name"	22	name="name"
23	type="text"	23	type="text"
24	></v-text-field>	24	></v-text-field>
25	</v-flex>	25	</v-flex>
26	</v-layout>	26	</v-layout>
27	</v-flex>	27	</v-flex>
28	<v-flex xs12 sm12>	28	<v-flex xs12 sm12>
29	<v-layout>	29	<v-layout>
30	<v-flex xs4 class="pt-4 subheading">	30	<v-flex xs4 class="pt-4 subheading">
31	<label class="right">Year Title:</label>	31	<label class="right">Year Title:</label>
32	</v-flex>	32	</v-flex>
33	<v-flex xs8 sm7 class="ml-3">	33	<v-flex xs8 sm7 class="ml-3">
34	<v-text-field	34	<v-text-field
35	v-model="editedItem.yearTitle"	35	v-model="editedItem.yearTitle"
36	placeholder="fill your Year Title"	36	placeholder="fill your Year Title"
37	name="name"	37	name="name"
38	type="text"	38	type="text"
39	></v-text-field>	39	></v-text-field>
40	</v-flex>	40	</v-flex>
41	</v-layout>	41	</v-layout>
42	</v-flex>	42	</v-flex>
43	<v-flex xs12 sm12>	43	<v-flex xs12 sm12>
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 hidden-xs-only hidden-sm-only">Starting Date:</label>	46	<label class="right hidden-xs-only hidden-sm-only">Starting Date:</label>
47	<label class="right hidden-md-only hidden-lg-only hidden-xl-only">StartingDate:</label>	47	<label class="right hidden-md-only hidden-lg-only hidden-xl-only">StartingDate:</label>
48	</v-flex>	48	</v-flex>
49	<v-flex xs8 sm7 class="ml-3">	49	<v-flex xs8 sm7 class="ml-3">
50	<v-menu	50	<v-menu
51	ref="menu"	51	ref="menu"
52	:close-on-content-click="false"	52	:close-on-content-click="false"
53	v-model="menu"	53	v-model="menu"
54	:nudge-right="40"	54	:nudge-right="40"
55	lazy	55	lazy
56	transition="scale-transition"	56	transition="scale-transition"
57	offset-y	57	offset-y
58	full-width	58	full-width
59	min-width="290px"	59	min-width="290px"
60	>	60	>
61	<v-text-field	61	<v-text-field
62	slot="activator"	62	slot="activator"
63	v-model="editedItem.startingDate"	63	v-model="editedItem.startingDate"
64	placeholder="Select date"	64	placeholder="Select date"
65	></v-text-field>	65	></v-text-field>
66	<v-date-picker	66	<v-date-picker
67	color="info"	67	color="info"
68	ref="picker"	68	ref="picker"
69	v-model="editedItem.startingDate"	69	v-model="editedItem.startingDate"
70	@input="$refs.menu.save(editedItem.startingDate)"	70	@input="$refs.menu.save(editedItem.startingDate)"
71	></v-date-picker>	71	></v-date-picker>
72	</v-menu>	72	</v-menu>
73	</v-flex>	73	</v-flex>
74	</v-layout>	74	</v-layout>
75	</v-flex>	75	</v-flex>
76	<v-flex xs12 sm12>	76	<v-flex xs12 sm12>
77	<v-layout>	77	<v-layout>
78	<v-flex xs4 class="pt-4 subheading">	78	<v-flex xs4 class="pt-4 subheading">
79	<label class="right hidden-xs-only hidden-sm-only">Ending Date:</label>	79	<label class="right hidden-xs-only hidden-sm-only">Ending Date:</label>
80	<label class="right hidden-md-only hidden-lg-only hidden-xl-only">EndingDate:</label>	80	<label class="right hidden-md-only hidden-lg-only hidden-xl-only">EndingDate:</label>
81	</v-flex>	81	</v-flex>
82	<v-flex xs8 sm7 class="ml-3">	82	<v-flex xs8 sm7 class="ml-3">
83	<v-menu	83	<v-menu
84	ref="menuEndDate"	84	ref="menuEndDate"
85	:close-on-content-click="false"	85	:close-on-content-click="false"
86	v-model="menuEndDate"	86	v-model="menuEndDate"
87	:nudge-right="40"	87	:nudge-right="40"
88	lazy	88	lazy
89	transition="scale-transition"	89	transition="scale-transition"
90	offset-y	90	offset-y
91	full-width	91	full-width
92	min-width="290px"	92	min-width="290px"
93	>	93	>
94	<v-text-field	94	<v-text-field
95	slot="activator"	95	slot="activator"
96	v-model="editedItem.endingDate"	96	v-model="editedItem.endingDate"
97	placeholder="Select date"	97	placeholder="Select date"
98	></v-text-field>	98	></v-text-field>
99	<v-date-picker	99	<v-date-picker
100	color="info"	100	color="info"
101	ref="picker"	101	ref="picker"
102	v-model="editedItem.endingDate"	102	v-model="editedItem.endingDate"
103	@input="$refs.menuEndDate.save(editedItem.endingDate)"	103	@input="$refs.menuEndDate.save(editedItem.endingDate)"
104	></v-date-picker>	104	></v-date-picker>
105	</v-menu>	105	</v-menu>
106	</v-flex>	106	</v-flex>
107	</v-layout>	107	</v-layout>
108	</v-flex>	108	</v-flex>
109	<v-layout>	109	<v-layout>
110	<v-flex xs12>	110	<v-flex xs12>
111	<v-card-actions class="hidden-xs-only hidden-sm-only">	111	<v-card-actions class="hidden-xs-only hidden-sm-only">
112	<v-spacer></v-spacer>	112	<v-spacer></v-spacer>
113	<v-btn round dark @click="save" class="add-button">Save</v-btn>	113	<v-btn round dark @click="save" class="add-button">Save</v-btn>
114	<v-spacer></v-spacer>	114	<v-spacer></v-spacer>
115	</v-card-actions>	115	</v-card-actions>
116	<v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only">	116	<v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only">
117	<v-spacer></v-spacer>	117	<v-spacer></v-spacer>
118	<v-btn round dark @click="save" class="add-button">Save</v-btn>	118	<v-btn round dark @click="save" class="add-button">Save</v-btn>
119	<v-spacer></v-spacer>	119	<v-spacer></v-spacer>
120	</v-card-actions>	120	</v-card-actions>
121	</v-flex>	121	</v-flex>
122	</v-layout>	122	</v-layout>
123	</v-container>	123	</v-container>
124	</v-card>	124	</v-card>
125	</v-dialog>	125	</v-dialog>
126	<!-- **** PROFILE ACADEMIC YEAR DEATILS **** -->	126	<!-- **** PROFILE ACADEMIC YEAR DEATILS **** -->
127	<v-dialog v-model="viewAcademinYearDialog" max-width="500px">	127	<v-dialog v-model="viewAcademinYearDialog" max-width="500px">
128	<v-card flat class="card-style pa-3" dark>	128	<v-card flat class="card-style pa-3" dark>
129	<v-layout>	129	<v-layout>
130	<v-flex xs12>	130	<v-flex xs12>
131	<label class="title text-xs-center">View Academin Year</label>	131	<label class="title text-xs-center">View Academic Year</label>
132	<v-icon size="24" class="right" @click="viewAcademinYearDialog = false">cancel</v-icon>	132	<v-icon size="24" class="right" @click="viewAcademinYearDialog = false">cancel</v-icon>
133	</v-flex>	133	</v-flex>
134	</v-layout>	134	</v-layout>
135	<v-card-text>	135	<v-card-text>
136	<v-container grid-list-md>	136	<v-container grid-list-md>
137	<v-layout wrap>	137	<v-layout wrap>
138	<v-flex>	138	<v-flex>
139	<v-layout>	139	<v-layout>
140	<v-flex xs5 sm6>	140	<v-flex xs5 sm6>
141	<h5 class="right my-1">	141	<h5 class="right my-1">
142	<b>Title:</b>	142	<b>Title:</b>
143	</h5>	143	</h5>
144	</v-flex>	144	</v-flex>
145	<v-flex sm6 xs7>	145	<v-flex sm6 xs7>
146	<h5 class="my-1">{{ editedItem.year }}</h5>	146	<h5 class="my-1">{{ editedItem.year }}</h5>
147	</v-flex>	147	</v-flex>
148	</v-layout>	148	</v-layout>
149	<v-layout>	149	<v-layout>
150	<v-flex xs5 sm6>	150	<v-flex xs5 sm6>
151	<h5 class="right my-1">	151	<h5 class="right my-1">
152	<b>Year Title:</b>	152	<b>Year Title:</b>
153	</h5>	153	</h5>
154	</v-flex>	154	</v-flex>
155	<v-flex sm6 xs7>	155	<v-flex sm6 xs7>
156	<h5 class="my-1">{{ editedItem.yearTitle }}</h5>	156	<h5 class="my-1">{{ editedItem.yearTitle }}</h5>
157	</v-flex>	157	</v-flex>
158	</v-layout>	158	</v-layout>
159	<v-layout>	159	<v-layout>
160	<v-flex xs5 sm6>	160	<v-flex xs5 sm6>
161	<h5 class="right my-1 hidden-xs-only hidden-sm-only">	161	<h5 class="right my-1 hidden-xs-only hidden-sm-only">
162	<b>Starting Date:</b>	162	<b>Starting Date:</b>
163	</h5>	163	</h5>
164	<h5 class="right my-1 hidden-md-only hidden-lg-only hidden-xl-only">	164	<h5 class="right my-1 hidden-md-only hidden-lg-only hidden-xl-only">
165	<b>StartingDate:</b>	165	<b>StartingDate:</b>
166	</h5>	166	</h5>
167	</v-flex>	167	</v-flex>
168	<v-flex sm6 xs7>	168	<v-flex sm6 xs7>
169	<h5 class="my-1">{{dates(editedItem.startingDate)}}</h5>	169	<h5 class="my-1">{{dates(editedItem.startingDate)}}</h5>
170	</v-flex>	170	</v-flex>
171	</v-layout>	171	</v-layout>
172	<v-layout>	172	<v-layout>
173	<v-flex xs5 sm6>	173	<v-flex xs5 sm6>
174	<h5 class="right my-1 hidden-xs-only hidden-sm-only">	174	<h5 class="right my-1 hidden-xs-only hidden-sm-only">
175	<b>Ending Date:</b>	175	<b>Ending Date:</b>
176	</h5>	176	</h5>
177	<h5 class="right my-1 hidden-md-only hidden-lg-only hidden-xl-only">	177	<h5 class="right my-1 hidden-md-only hidden-lg-only hidden-xl-only">
178	<b>EndingDate:</b>	178	<b>EndingDate:</b>
179	</h5>	179	</h5>
180	</v-flex>	180	</v-flex>
181	<v-flex sm6 xs7>	181	<v-flex sm6 xs7>
182	<h5 class="my-1">{{dates(editedItem.endingDate)}}</h5>	182	<h5 class="my-1">{{dates(editedItem.endingDate)}}</h5>
183	</v-flex>	183	</v-flex>
184	</v-layout>	184	</v-layout>
185	</v-flex>	185	</v-flex>
186	</v-layout>	186	</v-layout>
187	</v-container>	187	</v-container>
188	</v-card-text>	188	</v-card-text>
189	</v-card>	189	</v-card>
190	</v-dialog>	190	</v-dialog>
191	<!-- **** EXISTING ACADEMIC YEAR TABLE **** -->	191	<!-- **** EXISTING ACADEMIC YEAR TABLE **** -->
192	<v-toolbar color="transparent" flat>	192	<v-toolbar color="transparent" flat>
193	<v-btn	193	<v-btn
194	fab	194	fab
195	dark	195	dark
196	class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"	196	class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
197	small	197	small
198	@click="addAcademicYearDialog = true"	198	@click="addAcademicYearDialog = true"
199	>	199	>
200	<v-icon dark>add</v-icon>	200	<v-icon dark>add</v-icon>
201	</v-btn>	201	</v-btn>
202	<v-btn	202	<v-btn
203	round	203	round
204	class="open-dialog-button hidden-sm-only hidden-xs-only"	204	class="open-dialog-button hidden-sm-only hidden-xs-only"
205	dark	205	dark
206	@click="addAcademicYearDialog = true"	206	@click="addAcademicYearDialog = true"
207	>	207	>
208	<v-icon class="white--text pr-1" size="20">add</v-icon>Add Academic Year	208	<v-icon class="white--text pr-1" size="20">add</v-icon>Add Academic Year
209	</v-btn>	209	</v-btn>
210	<v-spacer></v-spacer>	210	<v-spacer></v-spacer>
211	<v-card-title class="body-1" v-show="show">	211	<v-card-title class="body-1" v-show="show">
212	<v-btn icon large flat @click="displaySearch">	212	<v-btn icon large flat @click="displaySearch">
213	<v-avatar size="27">	213	<v-avatar size="27">
214	<img src="/static/icon/search.png" alt="icon" />	214	<img src="/static/icon/search.png" alt="icon" />
215	</v-avatar>	215	</v-avatar>
216	</v-btn>	216	</v-btn>
217	</v-card-title>	217	</v-card-title>
218	<v-flex xs8 sm8 md3 lg2 v-show="showSearch">	218	<v-flex xs8 sm8 md3 lg2 v-show="showSearch">
219	<v-layout>	219	<v-layout>
220	<v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>	220	<v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>
221	<v-icon @click="closeSearch" color="error">close</v-icon>	221	<v-icon @click="closeSearch" color="error">close</v-icon>
222	</v-layout>	222	</v-layout>
223	</v-flex>	223	</v-flex>
224	</v-toolbar>	224	</v-toolbar>
225	<v-data-table	225	<v-data-table
226	:headers="headers"	226	:headers="headers"
227	:items="getAcademicYearList"	227	:items="getAcademicYearList"
228	:pagination.sync="pagination"	228	:pagination.sync="pagination"
229	:search="search"	229	:search="search"
230	>	230	>
231	<template slot="items" slot-scope="props">	231	<template slot="items" slot-scope="props">
232	<tr class="tr">	232	<tr class="tr">
233	<td class="td td-row">{{ props.index + 1}}</td>	233	<td class="td td-row">{{ props.index + 1}}</td>
234	<td class="td td-row text-xs-center">{{ props.item.year}}</td>	234	<td class="td td-row text-xs-center">{{ props.item.year}}</td>
235	<td class="td td-row text-xs-center">{{ props.item.yearTitle}}</td>	235	<td class="td td-row text-xs-center">{{ props.item.yearTitle}}</td>
236	<td class="td td-row text-xs-center">{{ dates(props.item.startingDate)}}</td>	236	<td class="td td-row text-xs-center">{{ dates(props.item.startingDate)}}</td>
237	<td class="td td-row text-xs-center">{{ dates(props.item.endingDate)}}</td>	237	<td class="td td-row text-xs-center">{{ dates(props.item.endingDate)}}</td>
238	<td class="td td-row text-xs-center">	238	<td class="td td-row text-xs-center">
239	<span>	239	<span>
240	<v-tooltip top>	240	<v-tooltip top>
241	<img	241	<img
242	slot="activator"	242	slot="activator"
243	style="cursor:pointer; width:25px; height:25px; "	243	style="cursor:pointer; width:25px; height:25px; "
244	class="mr-3"	244	class="mr-3"
245	@click="profile(props.item)"	245	@click="profile(props.item)"
246	src="/static/icon/view.png"	246	src="/static/icon/view.png"
247	/>	247	/>
248	<span>View</span>	248	<span>View</span>
249	</v-tooltip>	249	</v-tooltip>
250	<v-tooltip top>	250	<v-tooltip top>
251	<img	251	<img
252	slot="activator"	252	slot="activator"
253	style="cursor:pointer; width:20px; height:18px; "	253	style="cursor:pointer; width:20px; height:18px; "
254	class="mr-3"	254	class="mr-3"
255	@click="editItem(props.item)"	255	@click="editItem(props.item)"
256	src="/static/icon/edit.png"	256	src="/static/icon/edit.png"
257	/>	257	/>
258	<span>Edit</span>	258	<span>Edit</span>
259	</v-tooltip>	259	</v-tooltip>
260	<v-tooltip top>	260	<v-tooltip top>
261	<img	261	<img
262	slot="activator"	262	slot="activator"
263	style="cursor:pointer; width:20px; height:20px; "	263	style="cursor:pointer; width:20px; height:20px; "
264	@click="deleteItem(props.item)"	264	@click="deleteItem(props.item)"
265	class="mr-3"	265	class="mr-3"
266	src="/static/icon/delete.png"	266	src="/static/icon/delete.png"
267	/>	267	/>
268	<span>Delete</span>	268	<span>Delete</span>
269	</v-tooltip>	269	</v-tooltip>
270	</span>	270	</span>
271	</td>	271	</td>
272	</tr>	272	</tr>
273	</template>	273	</template>
274	<v-alert	274	<v-alert
275	slot="no-results"	275	slot="no-results"
276	:value="true"	276	:value="true"
277	color="error"	277	color="error"
278	icon="warning"	278	icon="warning"
279	>Your search for "{{ search }}" found no results.</v-alert>	279	>Your search for "{{ search }}" found no results.</v-alert>
280	</v-data-table>	280	</v-data-table>
281	<!-- **** ADD ACADEMIC YEAR **** -->	281	<!-- **** ADD ACADEMIC YEAR **** -->
282	<v-dialog v-model="addAcademicYearDialog" max-width="600px">	282	<v-dialog v-model="addAcademicYearDialog" max-width="600px">
283	<v-card flat class="card-style pa-2" dark>	283	<v-card flat class="card-style pa-2" dark>
284	<v-layout>	284	<v-layout>
285	<v-flex xs12>	285	<v-flex xs12>
286	<label class="title text-xs-center">Add Academic Year</label>	286	<label class="title text-xs-center">Add Academic Year</label>
287	<v-icon size="24" class="right" @click="addAcademicYearDialog = false">cancel</v-icon>	287	<v-icon size="24" class="right" @click="addAcademicYearDialog = false">cancel</v-icon>
288	</v-flex>	288	</v-flex>
289	</v-layout>	289	</v-layout>
290	<v-form ref="form" v-model="valid" lazy-validation>	290	<v-form ref="form" v-model="valid" lazy-validation>
291	<v-container fluid>	291	<v-container fluid>
292	<v-flex xs12>	292	<v-flex xs12>
293	<v-layout>	293	<v-layout>
294	<v-flex xs5 sm4 class="pt-4 subheading">	294	<v-flex xs5 sm4 class="pt-4 subheading">
295	<label class="right">Year:</label>	295	<label class="right">Year:</label>
296	</v-flex>	296	</v-flex>
297	<v-flex xs7 class="ml-3">	297	<v-flex xs7 class="ml-3">
298	<v-text-field	298	<v-text-field
299	v-model="addAcademicYear.year"	299	v-model="addAcademicYear.year"
300	placeholder="fill Year (2019-2020)"	300	placeholder="fill Year (2019-2020)"
301	type="text"	301	type="text"
302	:rules="yearRules"	302	:rules="yearRules"
303	required	303	required
304	></v-text-field>	304	></v-text-field>
305	</v-flex>	305	</v-flex>
306	</v-layout>	306	</v-layout>
307	</v-flex>	307	</v-flex>
308	<v-flex xs12>	308	<v-flex xs12>
309	<v-layout>	309	<v-layout>
310	<v-flex xs5 sm4 class="pt-4 subheading">	310	<v-flex xs5 sm4 class="pt-4 subheading">
311	<label class="right">Year Title:</label>	311	<label class="right">Year Title:</label>
312	</v-flex>	312	</v-flex>
313	<v-flex xs7 class="ml-3">	313	<v-flex xs7 class="ml-3">
314	<v-text-field	314	<v-text-field
315	placeholder="fill your Year Title"	315	placeholder="fill your Year Title"
316	:rules="yearTitleRules"	316	:rules="yearTitleRules"
317	v-model="addAcademicYear.yearTitle"	317	v-model="addAcademicYear.yearTitle"
318	type="text"	318	type="text"
319	required	319	required
320	></v-text-field>	320	></v-text-field>
321	</v-flex>	321	</v-flex>
322	</v-layout>	322	</v-layout>
323	</v-flex>	323	</v-flex>
324	<v-flex xs12>	324	<v-flex xs12>
325	<v-layout>	325	<v-layout>
326	<v-flex xs5 sm4 class="pt-4 subheading">	326	<v-flex xs5 sm4 class="pt-4 subheading">
327	<label class="right hidden-xs-only hidden-sm-only">Starting Date:</label>	327	<label class="right hidden-xs-only hidden-sm-only">Starting Date:</label>
328	<label class="right hidden-md-only hidden-lg-only hidden-xl-only">StartingDate:</label>	328	<label class="right hidden-md-only hidden-lg-only hidden-xl-only">StartingDate:</label>
329	</v-flex>	329	</v-flex>
330	<v-flex xs7 class="ml-3">	330	<v-flex xs7 class="ml-3">
331	<v-menu	331	<v-menu
332	ref="menuStart"	332	ref="menuStart"
333	:close-on-content-click="false"	333	:close-on-content-click="false"
334	v-model="menuStart"	334	v-model="menuStart"
335	:nudge-right="40"	335	:nudge-right="40"
336	:return-value.sync="addAcademicYear.startingDate"	336	:return-value.sync="addAcademicYear.startingDate"
337	app	337	app
338	lazy	338	lazy
339	transition="scale-transition"	339	transition="scale-transition"
340	offset-y	340	offset-y
341	full-width	341	full-width
342	min-width="290px"	342	min-width="290px"
343	>	343	>
344	<v-text-field	344	<v-text-field
345	slot="activator"	345	slot="activator"
346	:rules="startDateRules"	346	:rules="startDateRules"
347	v-model="addAcademicYear.startingDate"	347	v-model="addAcademicYear.startingDate"
348	append-icon="event"	348	append-icon="event"
349	placeholder="Select starting date"	349	placeholder="Select starting date"
350	></v-text-field>	350	></v-text-field>
351	<v-date-picker	351	<v-date-picker
352	color="info"	352	color="info"
353	v-model="addAcademicYear.startingDate"	353	v-model="addAcademicYear.startingDate"
354	@input="$refs.menuStart.save(addAcademicYear.startingDate)"	354	@input="$refs.menuStart.save(addAcademicYear.startingDate)"
355	></v-date-picker>	355	></v-date-picker>
356	</v-menu>	356	</v-menu>
357	</v-flex>	357	</v-flex>
358	</v-layout>	358	</v-layout>
359	</v-flex>	359	</v-flex>
360	<v-flex xs12>	360	<v-flex xs12>
361	<v-layout>	361	<v-layout>
362	<v-flex xs5 sm4 class="pt-4 subheading">	362	<v-flex xs5 sm4 class="pt-4 subheading">
363	<label class="right">Ending Date:</label>	363	<label class="right">Ending Date:</label>
364	</v-flex>	364	</v-flex>
365	<v-flex xs7 class="ml-3">	365	<v-flex xs7 class="ml-3">
366	<v-menu	366	<v-menu
367	ref="menu1"	367	ref="menu1"
368	:close-on-content-click="false"	368	:close-on-content-click="false"
369	v-model="menu1"	369	v-model="menu1"
370	:nudge-right="40"	370	:nudge-right="40"
371	:return-value.sync="addAcademicYear.endingDate"	371	:return-value.sync="addAcademicYear.endingDate"
372	app	372	app
373	lazy	373	lazy
374	transition="scale-transition"	374	transition="scale-transition"
375	offset-y	375	offset-y
376	full-width	376	full-width
377	min-width="290px"	377	min-width="290px"
378	>	378	>
379	<v-text-field	379	<v-text-field
380	slot="activator"	380	slot="activator"
381	:rules="endDateRules"	381	:rules="endDateRules"
382	v-model="addAcademicYear.endingDate"	382	v-model="addAcademicYear.endingDate"
383	append-icon="event"	383	append-icon="event"
384	placeholder="Select ending date"	384	placeholder="Select ending date"
385	></v-text-field>	385	></v-text-field>
386	<v-date-picker	386	<v-date-picker
387	color="info"	387	color="info"
388	v-model="addAcademicYear.endingDate"	388	v-model="addAcademicYear.endingDate"
389	@input="$refs.menu1.save(addAcademicYear.endingDate)"	389	@input="$refs.menu1.save(addAcademicYear.endingDate)"
390	></v-date-picker>	390	></v-date-picker>
391	</v-menu>	391	</v-menu>
392	</v-flex>	392	</v-flex>
393	</v-layout>	393	</v-layout>
394	</v-flex>	394	</v-flex>
395	<v-layout>	395	<v-layout>
396	<v-flex xs12>	396	<v-flex xs12>
397	<v-layout>	397	<v-layout>
398	<v-spacer></v-spacer>	398	<v-spacer></v-spacer>
399	<v-btn @click="clear" round dark class="clear-button">clear</v-btn>	399	<v-btn @click="clear" round dark class="clear-button">clear</v-btn>
400	<v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>	400	<v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
401	</v-layout>	401	</v-layout>
402	</v-flex>	402	</v-flex>
403	</v-layout>	403	</v-layout>
404	</v-container>	404	</v-container>
405	</v-form>	405	</v-form>
406	</v-card>	406	</v-card>
407	</v-dialog>	407	</v-dialog>
408	<div class="loader" v-if="showLoader">	408	<div class="loader" v-if="showLoader">
409	<v-progress-circular indeterminate color="white"></v-progress-circular>	409	<v-progress-circular indeterminate color="white"></v-progress-circular>
410	</div>	410	</div>
411	<v-snackbar	411	<v-snackbar
412	:timeout="timeout"	412	:timeout="timeout"
413	:top="y === 'top'"	413	:top="y === 'top'"
414	:right="x === 'right'"	414	:right="x === 'right'"
415	:vertical="mode === 'vertical'"	415	:vertical="mode === 'vertical'"
416	v-model="snackbar"	416	v-model="snackbar"
417	:color="color"	417	:color="color"
418	>{{ text }}</v-snackbar>	418	>{{ text }}</v-snackbar>
419	</v-container>	419	</v-container>
420	</template>	420	</template>
421		421
422	<script>	422	<script>
423	import http from "@/Services/http.js";	423	import http from "@/Services/http.js";
424	import Util from "@/util";	424	import Util from "@/util";
425	import moment from "moment";	425	import moment from "moment";
426		426
427	export default {	427	export default {
428	data: () => ({	428	data: () => ({
429	snackbar: false,	429	snackbar: false,
430	y: "top",	430	y: "top",
431	x: "right",	431	x: "right",
432	mode: "",	432	mode: "",
433	timeout: 5000,	433	timeout: 5000,
434	text: "",	434	text: "",
435	color: "",	435	color: "",
436	loading: false,	436	loading: false,
437	date: null,	437	date: null,
438	show: true,	438	show: true,
439	showSearch: false,	439	showSearch: false,
440	search: "",	440	search: "",
441	showLoader: false,	441	showLoader: false,
442	addAcademicYearDialog: false,	442	addAcademicYearDialog: false,
443	editAcademinYearDialog: false,	443	editAcademinYearDialog: false,
444	viewAcademinYearDialog: false,	444	viewAcademinYearDialog: false,
445	valid: true,	445	valid: true,
446	pagination: {	446	pagination: {
447	rowsPerPage: 10	447	rowsPerPage: 10
448	},	448	},
449	date: null,	449	date: null,
450	menu1: false,	450	menu1: false,
451	menu: false,	451	menu: false,
452	menuStart: false,	452	menuStart: false,
453	menuEndDate: false,	453	menuEndDate: false,
454	yearRules: [v => !!v \|\| "Year is required"],	454	yearRules: [v => !!v \|\| "Year is required"],
455	yearTitleRules: [v => !!v \|\| "Year Title is required"],	455	yearTitleRules: [v => !!v \|\| "Year Title is required"],
456	startDateRules: [v => !!v \|\| "startDate is required"],	456	startDateRules: [v => !!v \|\| "startDate is required"],
457	endDateRules: [v => !!v \|\| "endDate is required"],	457	endDateRules: [v => !!v \|\| "endDate is required"],
458	headers: [	458	headers: [
459	{	459	{
460	text: "No",	460	text: "No",
461	align: "center",	461	align: "center",
462	sortable: false,	462	sortable: false,
463	value: "No"	463	value: "No"
464	},	464	},
465	{ text: "Year", value: "year", sortable: false, align: "center" },	465	{ text: "Year", value: "year", sortable: false, align: "center" },
466	{	466	{
467	text: "Year Title",	467	text: "Year Title",
468	value: "yearTitle",	468	value: "yearTitle",
469	sortable: false,	469	sortable: false,
470	align: "center"	470	align: "center"
471	},	471	},
472		472
473	{	473	{
474	text: "Starting Date",	474	text: "Starting Date",
475	value: "startingDate",	475	value: "startingDate",
476	sortable: false,	476	sortable: false,
477	align: "center"	477	align: "center"
478	},	478	},
479	{	479	{
480	text: "Ending Date",	480	text: "Ending Date",
481	value: "endingDate",	481	value: "endingDate",
482	sortable: false,	482	sortable: false,
483	align: "center"	483	align: "center"
484	},	484	},
485	{ text: "Action", value: "", sortable: false, align: "center" }	485	{ text: "Action", value: "", sortable: false, align: "center" }
486	],	486	],
487	getAcademicYearList: [],	487	getAcademicYearList: [],
488	editedIndex: -1,	488	editedIndex: -1,
489	addAcademicYear: {},	489	addAcademicYear: {},
490	editedItem: {},	490	editedItem: {},
491	token: ""	491	token: ""
492	}),	492	}),
493	methods: {	493	methods: {
494	dates: function(date) {	494	dates: function(date) {
495	return moment(date).format("MMMM DD, YYYY");	495	return moment(date).format("MMMM DD, YYYY");
496	},	496	},
497	getAcademicYear() {	497	getAcademicYear() {
498	this.showLoader = true;	498	this.showLoader = true;
499	http()	499	http()
500	.get("/getAcademicsList", {	500	.get("/getAcademicsList", {
501	headers: { Authorization: "Bearer " + this.token }	501	headers: { Authorization: "Bearer " + this.token }
502	})	502	})
503	.then(response => {	503	.then(response => {
504	this.getAcademicYearList = response.data.data;	504	this.getAcademicYearList = response.data.data;
505	this.showLoader = false;	505	this.showLoader = false;
506	})	506	})
507	.catch(error => {	507	.catch(error => {
508	this.showLoader = false;	508	this.showLoader = false;
509	if (error.response.status === 401) {	509	if (error.response.status === 401) {
510	this.$router.replace({ path: "/" });	510	this.$router.replace({ path: "/" });
511	this.$store.dispatch("setToken", null);	511	this.$store.dispatch("setToken", null);
512	this.$store.dispatch("Id", null);	512	this.$store.dispatch("Id", null);
513	}	513	}
514	});	514	});
515	},	515	},
516	editItem(item) {	516	editItem(item) {
517	this.editedIndex = this.getAcademicYearList.indexOf(item);	517	this.editedIndex = this.getAcademicYearList.indexOf(item);
518	this.editedItem = Object.assign({}, item);	518	this.editedItem = Object.assign({}, item);
519	this.editedItem.schoolEventId = item._id;	519	this.editedItem.schoolEventId = item._id;
520	this.editAcademinYearDialog = true;	520	this.editAcademinYearDialog = true;
521	},	521	},
522	profile(item) {	522	profile(item) {
523	this.editedIndex = this.getAcademicYearList.indexOf(item);	523	this.editedIndex = this.getAcademicYearList.indexOf(item);
524	this.editedItem = Object.assign({}, item);	524	this.editedItem = Object.assign({}, item);
525	this.viewAcademinYearDialog = true;	525	this.viewAcademinYearDialog = true;
526	},	526	},
527		527
528	deleteItem(item) {	528	deleteItem(item) {
529	let deleteAcademic = {	529	let deleteAcademic = {
530	academicId: item._id	530	academicId: item._id
531	};	531	};
532	http()	532	http()
533	.delete(	533	.delete(
534	"/deleteAcademic",	534	"/deleteAcademic",
535	confirm("Are you sure you want to delete this?") && {	535	confirm("Are you sure you want to delete this?") && {
536	params: deleteAcademic	536	params: deleteAcademic
537	}	537	}
538	)	538	)
539	.then(response => {	539	.then(response => {
540	this.snackbar = true;	540	this.snackbar = true;
541	this.text = response.data.message;	541	this.text = response.data.message;
542	this.color = "green";	542	this.color = "green";
543	this.getAcademicYear();	543	this.getAcademicYear();
544	})	544	})
545	.catch(error => {	545	.catch(error => {
546	this.snackbar = true;	546	this.snackbar = true;
547	this.text = error.response.data.message;	547	this.text = error.response.data.message;
548	this.color = "error";	548	this.color = "error";
549	});	549	});
550	},	550	},
551	close() {	551	close() {
552	this.editAcademinYearDialog = false;	552	this.editAcademinYearDialog = false;
553	},	553	},
554	submit() {	554	submit() {
555	if (this.$refs.form.validate()) {	555	if (this.$refs.form.validate()) {
556	this.loading = true;	556	this.loading = true;
557	http()	557	http()
558	.post("/createAcademic", this.addAcademicYear)	558	.post("/createAcademic", this.addAcademicYear)
559	.then(response => {	559	.then(response => {
560	this.snackbar = true;	560	this.snackbar = true;
561	this.text = response.data.message;	561	this.text = response.data.message;
562	this.color = "green";	562	this.color = "green";
563	this.getAcademicYear();	563	this.getAcademicYear();
564	this.clear();	564	this.clear();
565	this.loading = false;	565	this.loading = false;
566	this.addAcademicYearDialog = false;	566	this.addAcademicYearDialog = false;
567	})	567	})
568	.catch(error => {	568	.catch(error => {
569	this.snackbar = true;	569	this.snackbar = true;
570	this.text = error.response.data.message;	570	this.text = error.response.data.message;
571	this.color = "error";	571	this.color = "error";
572	this.loading = false;	572	this.loading = false;
573	});	573	});
574	}	574	}
575	},	575	},
576	clear() {	576	clear() {
577	this.$refs.form.reset();	577	this.$refs.form.reset();
578	},	578	},
579	save() {	579	save() {
580	this.editedItem.academicId = this.editedItem._id;	580	this.editedItem.academicId = this.editedItem._id;
581	http()	581	http()
582	.put("/updateAcademic", this.editedItem, {	582	.put("/updateAcademic", this.editedItem, {
583	headers: { Authorization: "Bearer " + this.token }	583	headers: { Authorization: "Bearer " + this.token }
584	})	584	})
585	.then(response => {	585	.then(response => {
586	this.snackbar = true;	586	this.snackbar = true;
587	this.text = response.data.message;	587	this.text = response.data.message;
588	this.color = "green";	588	this.color = "green";
589	this.getAcademicYear();	589	this.getAcademicYear();
590	this.close();	590	this.close();
591	})	591	})
592	.catch(error => {	592	.catch(error => {
593	this.snackbar = true;	593	this.snackbar = true;
594	this.text = error.response.data.message;	594	this.text = error.response.data.message;
595	this.color = "error";	595	this.color = "error";
596	});	596	});
597	},	597	},
598	displaySearch() {	598	displaySearch() {
599	(this.show = false), (this.showSearch = true);	599	(this.show = false), (this.showSearch = true);
600	},	600	},
601	closeSearch() {	601	closeSearch() {
602	this.showSearch = false;	602	this.showSearch = false;
603	this.show = true;	603	this.show = true;
604	this.search = "";	604	this.search = "";
605	}	605	}
606	},	606	},
607	mounted() {	607	mounted() {
608	this.token = this.$store.state.token;	608	this.token = this.$store.state.token;
609	this.getAcademicYear();	609	this.getAcademicYear();
610	}	610	}
611	};	611	};
612	</script>	612	</script>

src/pages/Administrator/role.vue

Diff comments View file @8c3acf4

1	<template>	1	<template>
2	<v-container fluid class="body-color">	2	<v-container fluid class="body-color">
3	<!-- **** EDITS Role Distribution **** -->	3	<!-- **** EDITS Role Distribution **** -->
4	<v-dialog v-model="editRoleDialog" max-width="400px">	4	<v-dialog v-model="editRoleDialog" 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 Role</label>	8	<label class="title text-xs-center">Edit Role</label>
9	<v-icon size="24" class="right" @click="editRoleDialog = false">cancel</v-icon>	9	<v-icon size="24" class="right" @click="editRoleDialog = 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">Role:</label>	17	<label class="right">Role:</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 v-model="editedItem.name" placeholder="fill your Role"></v-text-field>	20	<v-text-field v-model="editedItem.name" placeholder="fill your Role"></v-text-field>
21	</v-flex>	21	</v-flex>
22	</v-layout>	22	</v-layout>
23	</v-flex>	23	</v-flex>
24	<v-layout>	24	<v-layout>
25	<v-flex xs12>	25	<v-flex xs12>
26	<v-layout>	26	<v-layout>
27	<v-spacer></v-spacer>	27	<v-spacer></v-spacer>
28	<v-btn round dark @click="save" class="add-button">Save</v-btn>	28	<v-btn round dark @click="save" class="add-button">Save</v-btn>
29	<v-spacer></v-spacer>	29	<v-spacer></v-spacer>
30	</v-layout>	30	</v-layout>
31	</v-flex>	31	</v-flex>
32	</v-layout>	32	</v-layout>
33	</v-container>	33	</v-container>
34	</v-form>	34	</v-form>
35	</v-card>	35	</v-card>
36	</v-dialog>	36	</v-dialog>
37	<!-- **** ROLE TABLE **** -->	37	<!-- **** ROLE TABLE **** -->
38		38
39	<v-toolbar color="transparent" flat>	39	<v-toolbar color="transparent" flat>
40	<v-btn	40	<v-btn
41	fab	41	fab
42	dark	42	dark
43	class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"	43	class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
44	small	44	small
45	@click="addRoleDialog = true"	45	@click="addRoleDialog = true"
46	>	46	>
47	<v-icon dark>add</v-icon>	47	<v-icon dark>add</v-icon>
48	</v-btn>	48	</v-btn>
49	<v-btn	49	<v-btn
50	round	50	round
51	class="open-dialog-button hidden-sm-only hidden-xs-only"	51	class="open-dialog-button hidden-sm-only hidden-xs-only"
52	dark	52	dark
53	@click="addRoleDialog = true"	53	@click="addRoleDialog = true"
54	>	54	>
55	<v-icon class="white--text pr-1" size="20">add</v-icon>Add Role	55	<v-icon class="white--text pr-1" size="20">add</v-icon>Add Role
56	</v-btn>	56	</v-btn>
57	<v-spacer></v-spacer>	57	<v-spacer></v-spacer>
58	<v-card-title class="body-1" v-show="show">	58	<v-card-title class="body-1" v-show="show">
59	<v-btn icon large flat @click="displaySearch">	59	<v-btn icon large flat @click="displaySearch">
60	<v-avatar size="27">	60	<v-avatar size="27">
61	<img src="/static/icon/search.png" alt="icon" />	61	<img src="/static/icon/search.png" alt="icon" />
62	</v-avatar>	62	</v-avatar>
63	</v-btn>	63	</v-btn>
64	</v-card-title>	64	</v-card-title>
65	<v-flex xs8 sm8 md3 lg2 v-show="showSearch">	65	<v-flex xs8 sm8 md3 lg2 v-show="showSearch">
66	<v-layout>	66	<v-layout>
67	<v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>	67	<v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>
68	<v-icon @click="closeSearch" color="error">close</v-icon>	68	<v-icon @click="closeSearch" color="error">close</v-icon>
69	</v-layout>	69	</v-layout>
70	</v-flex>	70	</v-flex>
71	</v-toolbar>	71	</v-toolbar>
72	<v-data-table	72	<v-data-table
73	:headers="headers"	73	:headers="headers"
74	:items="getRoles"	74	:items="getRoles"
75	:pagination.sync="pagination"	75	:pagination.sync="pagination"
76	:search="search"	76	:search="search"
77	>	77	>
78	<template slot="items" slot-scope="props">	78	<template slot="items" slot-scope="props">
79	<tr class="tr">	79	<tr class="tr">
80	<td class="td td-row">{{ props.index + 1}}</td>	80	<td class="td td-row">{{ props.index + 1}}</td>
81	<td class="td td-row text-xs-center">{{ props.item.name}}</td>	81	<td class="td td-row text-xs-center">{{ props.item.name}}</td>
82	<td class="td td-row text-xs-center">	82	<td class="td td-row text-xs-center">
83	<span>	83	<span>
84	<v-tooltip top>	84	<v-tooltip top>
85	<img	85	<img
86	slot="activator"	86	slot="activator"
87	style="cursor:pointer; width:20px; height:18px; "	87	style="cursor:pointer; width:20px; height:18px; "
88	class="mr-3"	88	class="mr-3"
89	@click="editItem(props.item)"	89	@click="editItem(props.item)"
90	src="/static/icon/edit.png"	90	src="/static/icon/edit.png"
91	/>	91	/>
92	<span>Edit</span>	92	<span>Edit</span>
93	</v-tooltip>	93	</v-tooltip>
94	<v-tooltip top>	94	<v-tooltip top>
95	<img	95	<img
96	slot="activator"	96	slot="activator"
97	style="cursor:pointer; width:20px; height:20px; "	97	style="cursor:pointer; width:20px; height:20px; "
98	@click="deleteItem(props.item)"	98	@click="deleteItem(props.item)"
99	src="/static/icon/delete.png"	99	src="/static/icon/delete.png"
100	/>	100	/>
101	<span>Delete</span>	101	<span>Delete</span>
102	</v-tooltip>	102	</v-tooltip>
103	</span>	103	</span>
104	</td>	104	</td>
105	</tr>	105	</tr>
106	</template>	106	</template>
107	<v-alert	107	<v-alert
108	slot="no-results"	108	slot="no-results"
109	:value="true"	109	:value="true"
110	color="error"	110	color="error"
111	icon="warning"	111	icon="warning"
112	>Your search for "{{ search }}" found no results.</v-alert>	112	>Your search for "{{ search }}" found no results.</v-alert>
113	</v-data-table>	113	</v-data-table>
114		114
115	<!-- **** ADD ROLE **** -->	115	<!-- **** ADD ROLE **** -->
116		116
117	<v-dialog v-model="addRoleDialog" max-width="400px">	117	<v-dialog v-model="addRoleDialog" max-width="400px">
118	<v-card flat class="card-style pa-2" dark>	118	<v-card flat class="card-style pa-2" dark>
119	<v-layout>	119	<v-layout>
120	<v-flex xs12>	120	<v-flex xs12>
121	<label class="title text-xs-center">Add Class</label>	121	<label class="title text-xs-center">Add Role</label>
122	<v-icon size="24" class="right" @click="addRoleDialog = false">cancel</v-icon>	122	<v-icon size="24" class="right" @click="addRoleDialog = false">cancel</v-icon>
123	</v-flex>	123	</v-flex>
124	</v-layout>	124	</v-layout>
125	<v-form ref="form" v-model="valid" lazy-validation>	125	<v-form ref="form" v-model="valid" lazy-validation>
126	<v-container fluid>	126	<v-container fluid>
127	<v-flex xs12>	127	<v-flex xs12>
128	<v-layout>	128	<v-layout>
129	<v-flex xs3 class="pt-4 subheading">	129	<v-flex xs3 class="pt-4 subheading">
130	<label class="right">Role:</label>	130	<label class="right">Role:</label>
131	</v-flex>	131	</v-flex>
132	<v-flex xs8 sm7 class="ml-3">	132	<v-flex xs8 sm7 class="ml-3">
133	<v-text-field	133	<v-text-field
134	v-model="addrole.name"	134	v-model="addrole.name"
135	placeholder="fill your Role"	135	placeholder="fill your Role"
136	:rules="roleRules"	136	:rules="roleRules"
137	></v-text-field>	137	></v-text-field>
138	</v-flex>	138	</v-flex>
139	</v-layout>	139	</v-layout>
140	</v-flex>	140	</v-flex>
141	<v-layout>	141	<v-layout>
142	<v-flex xs12 sm12>	142	<v-flex xs12 sm12>
143	<v-layout>	143	<v-layout>
144	<v-spacer></v-spacer>	144	<v-spacer></v-spacer>
145	<v-btn @click="clear" round class="add-button" dark>clear</v-btn>	145	<v-btn @click="clear" round class="add-button" dark>clear</v-btn>
146	<v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>	146	<v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
147	<v-spacer></v-spacer>	147	<v-spacer></v-spacer>
148	</v-layout>	148	</v-layout>
149	</v-flex>	149	</v-flex>
150	</v-layout>	150	</v-layout>
151	</v-container>	151	</v-container>
152	</v-form>	152	</v-form>
153	</v-card>	153	</v-card>
154	</v-dialog>	154	</v-dialog>
155	<div class="loader" v-if="showLoader">	155	<div class="loader" v-if="showLoader">
156	<v-progress-circular indeterminate color="white"></v-progress-circular>	156	<v-progress-circular indeterminate color="white"></v-progress-circular>
157	</div>	157	</div>
158	</v-container>	158	</v-container>
159	</template>	159	</template>
160		160
161	<script>	161	<script>
162	import http from "@/Services/http.js";	162	import http from "@/Services/http.js";
163		163
164	export default {	164	export default {
165	data: () => ({	165	data: () => ({
166	snackbar: false,	166	snackbar: false,
167	y: "top",	167	y: "top",
168	x: "right",	168	x: "right",
169	mode: "",	169	mode: "",
170	timeout: 5000,	170	timeout: 5000,
171	text: "",	171	text: "",
172	loading: false,	172	loading: false,
173	search: "",	173	search: "",
174	show: true,	174	show: true,
175	showSearch: false,	175	showSearch: false,
176	showLoader: false,	176	showLoader: false,
177	editRoleDialog: false,	177	editRoleDialog: false,
178	valid: true,	178	valid: true,
179	addRoleDialog: false,	179	addRoleDialog: false,
180	pagination: {	180	pagination: {
181	rowsPerPage: 10	181	rowsPerPage: 10
182	},	182	},
183	roleRules: [v => !!v \|\| "Role is required"],	183	roleRules: [v => !!v \|\| "Role is required"],
184	headers: [	184	headers: [
185	{	185	{
186	text: "No",	186	text: "No",
187	align: "",	187	align: "",
188	sortable: false,	188	sortable: false,
189	value: "No"	189	value: "No"
190	},	190	},
191	{ text: "Role", value: "role", sortable: false, align: "center" },	191	{ text: "Role", value: "role", sortable: false, align: "center" },
192	{ text: "Action", value: "", sortable: false, align: "center" }	192	{ text: "Action", value: "", sortable: false, align: "center" }
193	],	193	],
194	getRoles: [],	194	getRoles: [],
195	editedIndex: -1,	195	editedIndex: -1,
196	token: "",	196	token: "",
197	addrole: {},	197	addrole: {},
198	editedItem: {}	198	editedItem: {}
199	}),	199	}),
200	methods: {	200	methods: {
201	getRole() {	201	getRole() {
202	this.showLoader = true;	202	this.showLoader = true;
203	http()	203	http()
204	.get("/getRolesList", {	204	.get("/getRolesList", {
205	headers: { Authorization: "Bearer " + this.token }	205	headers: { Authorization: "Bearer " + this.token }
206	})	206	})
207	.then(response => {	207	.then(response => {
208	this.getRoles = response.data.data;	208	this.getRoles = response.data.data;
209	this.showLoader = false;	209	this.showLoader = false;
210	})	210	})
211	.catch(error => {	211	.catch(error => {
212	this.showLoader = false;	212	this.showLoader = false;
213	if (error.response.status === 401) {	213	if (error.response.status === 401) {
214	this.$router.replace({ path: "/" });	214	this.$router.replace({ path: "/" });
215	this.$store.dispatch("setToken", null);	215	this.$store.dispatch("setToken", null);
216	this.$store.dispatch("Id", null);	216	this.$store.dispatch("Id", null);
217	this.$store.dispatch("Role", null);	217	this.$store.dispatch("Role", null);
218	}	218	}
219	});	219	});
220	},	220	},
221	editItem(item) {	221	editItem(item) {
222	this.editedIndex = this.getRoles.indexOf(item);	222	this.editedIndex = this.getRoles.indexOf(item);
223	this.editedItem = Object.assign({}, item);	223	this.editedItem = Object.assign({}, item);
224	this.editRoleDialog = true;	224	this.editRoleDialog = true;
225	},	225	},
226	deleteItem(item) {	226	deleteItem(item) {
227	let deleteRoleId = {	227	let deleteRoleId = {
228	roleId: item._id	228	roleId: item._id
229	};	229	};
230	http()	230	http()
231	.delete(	231	.delete(
232	"/deleteRole",	232	"/deleteRole",
233	confirm("Are you sure you want to delete this?") && {	233	confirm("Are you sure you want to delete this?") && {
234	params: deleteRoleId	234	params: deleteRoleId
235	},	235	},
236	{	236	{
237	headers: {	237	headers: {
238	Authorization: "Bearer " + this.token	238	Authorization: "Bearer " + this.token
239	}	239	}
240	}	240	}
241	)	241	)
242	.then(response => {	242	.then(response => {
243	this.text = response.data.message;	243	this.text = response.data.message;
244	this.getRole();	244	this.getRole();
245	})	245	})
246	.catch(error => {	246	.catch(error => {
247	console.log(error);	247	console.log(error);
248	});	248	});
249	},	249	},
250	close() {	250	close() {
251	this.editRoleDialog = false;	251	this.editRoleDialog = false;
252	},	252	},
253	submit() {	253	submit() {
254	if (this.$refs.form.validate()) {	254	if (this.$refs.form.validate()) {
255	this.loading = true;	255	this.loading = true;
256	http()	256	http()
257	.post("/createRole", this.addrole)	257	.post("/createRole", this.addrole)
258	.then(response => {	258	.then(response => {
259	this.snackbar = true;	259	this.snackbar = true;
260	this.addRoleDialog = false;	260	this.addRoleDialog = false;
261	this.text = response.data.message;	261	this.text = response.data.message;
262	this.getRole();	262	this.getRole();
263	this.clear();	263	this.clear();
264	this.loading = false;	264	this.loading = false;
265	})	265	})
266	.catch(error => {	266	.catch(error => {
267	this.snackbar = true;	267	this.snackbar = true;
268	this.text = error.response.data.message;	268	this.text = error.response.data.message;
269	this.loading = false;	269	this.loading = false;
270	});	270	});
271	}	271	}
272	},	272	},
273	clear() {	273	clear() {
274	this.$refs.form.reset();	274	this.$refs.form.reset();
275	},	275	},
276	save() {	276	save() {
277	(this.editedItem.roleId = this.editedItem._id),	277	(this.editedItem.roleId = this.editedItem._id),
278	http()	278	http()
279	.put("/updateRole", this.editedItem, {	279	.put("/updateRole", this.editedItem, {
280	headers: {	280	headers: {
281	Authorization: "Bearer " + this.token	281	Authorization: "Bearer " + this.token
282	}	282	}
283	})	283	})
284	.then(response => {	284	.then(response => {
285	this.text = "Successfully Edit Notification";	285	this.text = "Successfully Edit Notification";
286	this.getRole();	286	this.getRole();
287	this.close();	287	this.close();
288	})	288	})
289	.catch(error => {	289	.catch(error => {
290	console.log(error);	290	console.log(error);
291	});	291	});
292	},	292	},
293	displaySearch() {	293	displaySearch() {
294	(this.show = false), (this.showSearch = true);	294	(this.show = false), (this.showSearch = true);
295	},	295	},
296	closeSearch() {	296	closeSearch() {
297	this.showSearch = false;	297	this.showSearch = false;
298	this.show = true;	298	this.show = true;
299	this.search = "";	299	this.search = "";
300	}	300	}
301	},	301	},
302	mounted() {	302	mounted() {
303	this.token = this.$store.state.token;	303	this.token = this.$store.state.token;
304	this.getRole();	304	this.getRole();
305	}	305	}
306	};	306	};
307	</script>	307	</script>

src/pages/Event/event.vue

Diff comments View file @8c3acf4

1	<template>	1	<template>
2	<v-container fluid class="body-color">	2	<v-container fluid class="body-color">
3	<!-- **** EDITS EVENT **** -->	3	<!-- **** EDITS EVENT **** -->
4	<v-dialog v-model="editEventdialog" max-width="500px">	4	<v-dialog v-model="editEventdialog" max-width="500px">
5	<v-card flat class="card-style pa-2" dark>	5	<v-card flat class="card-style pa-2" dark>
6	<v-layout>	6	<v-layout>
7	<v-flex xs12>	7	<v-flex xs12>
8	<label class="title text-xs-center">Edit Class</label>	8	<label class="title text-xs-center">Edit Event</label>
9	<v-icon size="24" class="right" @click="editEventdialog = false">cancel</v-icon>	9	<v-icon size="24" class="right" @click="editEventdialog = false">cancel</v-icon>
10	</v-flex>	10	</v-flex>
11	</v-layout>	11	</v-layout>
12	<v-container fluid>	12	<v-container fluid>
13	<v-flex xs12 sm12>	13	<v-flex xs12 sm12>
14	<v-layout>	14	<v-layout>
15	<v-flex xs4 class="pt-4 subheading">	15	<v-flex xs4 class="pt-4 subheading">
16	<label class="right">Title:</label>	16	<label class="right">Title:</label>
17	</v-flex>	17	</v-flex>
18	<v-flex xs7 class="ml-3">	18	<v-flex xs7 class="ml-3">
19	<v-text-field	19	<v-text-field
20	v-model="editedItem.title"	20	v-model="editedItem.title"
21	placeholder="fill your Title"	21	placeholder="fill your Title"
22	name="name"	22	name="name"
23	type="text"	23	type="text"
24	></v-text-field>	24	></v-text-field>
25	</v-flex>	25	</v-flex>
26	</v-layout>	26	</v-layout>
27	</v-flex>	27	</v-flex>
28	<v-flex xs12 sm12>	28	<v-flex xs12 sm12>
29	<v-layout>	29	<v-layout>
30	<v-flex xs4 class="pt-4 subheading">	30	<v-flex xs4 class="pt-4 subheading">
31	<label class="right">Date:</label>	31	<label class="right">Date:</label>
32	</v-flex>	32	</v-flex>
33	<v-flex xs7 class="ml-3">	33	<v-flex xs7 class="ml-3">
34	<v-menu	34	<v-menu
35	ref="menu"	35	ref="menu"
36	:close-on-content-click="false"	36	:close-on-content-click="false"
37	v-model="menu"	37	v-model="menu"
38	:nudge-right="40"	38	:nudge-right="40"
39	lazy	39	lazy
40	transition="scale-transition"	40	transition="scale-transition"
41	offset-y	41	offset-y
42	full-width	42	full-width
43	min-width="290px"	43	min-width="290px"
44	>	44	>
45	<v-text-field	45	<v-text-field
46	slot="activator"	46	slot="activator"
47	:rules="dateRules"	47	:rules="dateRules"
48	v-model="editedItem.dateOfEvent"	48	v-model="editedItem.dateOfEvent"
49	placeholder="Select date"	49	placeholder="Select date"
50	></v-text-field>	50	></v-text-field>
51	<v-date-picker	51	<v-date-picker
52	color="info"	52	color="info"
53	ref="picker"	53	ref="picker"
54	v-model="editedItem.dateOfEvent"	54	v-model="editedItem.dateOfEvent"
55	@input="$refs.menu.save(editedItem.dateOfEvent)"	55	@input="$refs.menu.save(editedItem.dateOfEvent)"
56	></v-date-picker>	56	></v-date-picker>
57	</v-menu>	57	</v-menu>
58	</v-flex>	58	</v-flex>
59	</v-layout>	59	</v-layout>
60	</v-flex>	60	</v-flex>
61	<v-flex xs12 sm12>	61	<v-flex xs12 sm12>
62	<v-layout>	62	<v-layout>
63	<v-flex xs4 class="pt-4 subheading">	63	<v-flex xs4 class="pt-4 subheading">
64	<label class="right">Description:</label>	64	<label class="right">Description:</label>
65	</v-flex>	65	</v-flex>
66	<v-flex xs7 class="ml-3">	66	<v-flex xs7 class="ml-3">
67	<v-text-field	67	<v-text-field
68	placeholder="fill your Description"	68	placeholder="fill your Description"
69	v-model="editedItem.description"	69	v-model="editedItem.description"
70	type="text"	70	type="text"
71	></v-text-field>	71	></v-text-field>
72	</v-flex>	72	</v-flex>
73	</v-layout>	73	</v-layout>
74	</v-flex>	74	</v-flex>
75	<v-layout>	75	<v-layout>
76	<v-flex xs12>	76	<v-flex xs12>
77	<v-card-actions class="hidden-xs-only hidden-sm-only">	77	<v-card-actions class="hidden-xs-only hidden-sm-only">
78	<v-spacer></v-spacer>	78	<v-spacer></v-spacer>
79	<v-btn round dark @click="save" class="add-button">Save</v-btn>	79	<v-btn round dark @click="save" class="add-button">Save</v-btn>
80	</v-card-actions>	80	</v-card-actions>
81	<v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only">	81	<v-card-actions class="hidden-md-only hidden-lg-only hidden-xl-only">
82	<v-spacer></v-spacer>	82	<v-spacer></v-spacer>
83	<v-btn round dark @click="save" class="add-button">Save</v-btn>	83	<v-btn round dark @click="save" class="add-button">Save</v-btn>
84	<v-spacer></v-spacer>	84	<v-spacer></v-spacer>
85	</v-card-actions>	85	</v-card-actions>
86	</v-flex>	86	</v-flex>
87	</v-layout>	87	</v-layout>
88	</v-container>	88	</v-container>
89	</v-card>	89	</v-card>
90	</v-dialog>	90	</v-dialog>
91	<!-- **** PROFILE VIEW EVENT **** -->	91	<!-- **** PROFILE VIEW EVENT **** -->
92	<v-dialog v-model="viewEventdialog" max-width="500px">	92	<v-dialog v-model="viewEventdialog" max-width="500px">
93	<v-card flat class="card-style pa-3" dark>	93	<v-card flat class="card-style pa-3" dark>
94	<v-layout>	94	<v-layout>
95	<v-flex xs12>	95	<v-flex xs12>
96	<label class="title text-xs-center">View Event</label>	96	<label class="title text-xs-center">View Event</label>
97	<v-icon size="24" class="right" @click="viewEventdialog = false">cancel</v-icon>	97	<v-icon size="24" class="right" @click="viewEventdialog = false">cancel</v-icon>
98	</v-flex>	98	</v-flex>
99	</v-layout>	99	</v-layout>
100	<v-card-text>	100	<v-card-text>
101	<v-container grid-list-md>	101	<v-container grid-list-md>
102	<v-layout wrap>	102	<v-layout wrap>
103	<v-flex>	103	<v-flex>
104	<v-layout>	104	<v-layout>
105	<v-flex xs5 sm6>	105	<v-flex xs5 sm6>
106	<h5 class="right my-1">	106	<h5 class="right my-1">
107	<b>Title:</b>	107	<b>Title:</b>
108	</h5>	108	</h5>
109	</v-flex>	109	</v-flex>
110	<v-flex sm6 xs8>	110	<v-flex sm6 xs8>
111	<h5 class="my-1">{{ editedItem.title }}</h5>	111	<h5 class="my-1">{{ editedItem.title }}</h5>
112	</v-flex>	112	</v-flex>
113	</v-layout>	113	</v-layout>
114	<v-layout>	114	<v-layout>
115	<v-flex xs5 sm6>	115	<v-flex xs5 sm6>
116	<h5 class="right my-1">	116	<h5 class="right my-1">
117	<b>Date:</b>	117	<b>Date:</b>
118	</h5>	118	</h5>
119	</v-flex>	119	</v-flex>
120	<v-flex sm6 xs8>	120	<v-flex sm6 xs8>
121	<h5 class="my-1">{{ dates(editedItem.dateOfEvent) }}</h5>	121	<h5 class="my-1">{{ dates(editedItem.dateOfEvent) }}</h5>
122	</v-flex>	122	</v-flex>
123	</v-layout>	123	</v-layout>
124	<v-layout>	124	<v-layout>
125	<v-flex xs5 sm6>	125	<v-flex xs5 sm6>
126	<h5 class="right my-1">	126	<h5 class="right my-1">
127	<b>Description:</b>	127	<b>Description:</b>
128	</h5>	128	</h5>
129	</v-flex>	129	</v-flex>
130	<v-flex sm6 xs8>	130	<v-flex sm6 xs8>
131	<h5 class="my-1">{{ editedItem.description }}</h5>	131	<h5 class="my-1">{{ editedItem.description }}</h5>
132	</v-flex>	132	</v-flex>
133	</v-layout>	133	</v-layout>
134	</v-flex>	134	</v-flex>
135	</v-layout>	135	</v-layout>
136	</v-container>	136	</v-container>
137	</v-card-text>	137	</v-card-text>
138	</v-card>	138	</v-card>
139	</v-dialog>	139	</v-dialog>
140		140
141	<!-- **** EVENT TABLE **** -->	141	<!-- **** EVENT TABLE **** -->
142		142
143	<v-toolbar color="transparent" flat>	143	<v-toolbar color="transparent" flat>
144	<v-btn	144	<v-btn
145	fab	145	fab
146	dark	146	dark
147	class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"	147	class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
148	small	148	small
149	@click="addEventDialog = true"	149	@click="addEventDialog = true"
150	>	150	>
151	<v-icon dark>add</v-icon>	151	<v-icon dark>add</v-icon>
152	</v-btn>	152	</v-btn>
153	<v-btn	153	<v-btn
154	round	154	round
155	class="open-dialog-button hidden-sm-only hidden-xs-only"	155	class="open-dialog-button hidden-sm-only hidden-xs-only"
156	dark	156	dark
157	@click="addEventDialog = true"	157	@click="addEventDialog = true"
158	>	158	>
159	<v-icon class="white--text pr-1" size="20">add</v-icon>Add Event	159	<v-icon class="white--text pr-1" size="20">add</v-icon>Add Event
160	</v-btn>	160	</v-btn>
161	<v-spacer></v-spacer>	161	<v-spacer></v-spacer>
162	<v-card-title class="body-1" v-show="show">	162	<v-card-title class="body-1" v-show="show">
163	<v-btn icon large flat @click="displaySearch">	163	<v-btn icon large flat @click="displaySearch">
164	<v-avatar size="27">	164	<v-avatar size="27">
165	<img src="/static/icon/search.png" alt="icon" />	165	<img src="/static/icon/search.png" alt="icon" />
166	</v-avatar>	166	</v-avatar>
167	</v-btn>	167	</v-btn>
168	</v-card-title>	168	</v-card-title>
169	<v-flex xs8 sm8 md3 lg2 v-show="showSearch">	169	<v-flex xs8 sm8 md3 lg2 v-show="showSearch">
170	<v-layout>	170	<v-layout>
171	<v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>	171	<v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>
172	<v-icon @click="closeSearch" color="error">close</v-icon>	172	<v-icon @click="closeSearch" color="error">close</v-icon>
173	</v-layout>	173	</v-layout>
174	</v-flex>	174	</v-flex>
175	</v-toolbar>	175	</v-toolbar>
176	<v-data-table :headers="headers" :items="events" :pagination.sync="pagination" :search="search">	176	<v-data-table :headers="headers" :items="events" :pagination.sync="pagination" :search="search">
177	<template slot="items" slot-scope="props">	177	<template slot="items" slot-scope="props">
178	<tr class="tr">	178	<tr class="tr">
179	<td class="td td-row">{{ props.index + 1}}</td>	179	<td class="td td-row">{{ props.index + 1}}</td>
180	<td class="td td-row text-xs-center">{{ props.item.title}}</td>	180	<td class="td td-row text-xs-center">{{ props.item.title}}</td>
181	<td class="td td-row text-xs-center">{{ dates(props.item.dateOfEvent)}}</td>	181	<td class="td td-row text-xs-center">{{ dates(props.item.dateOfEvent)}}</td>
182	<td class="td td-row text-xs-center">{{ props.item.description}}</td>	182	<td class="td td-row text-xs-center">{{ props.item.description}}</td>
183	<td class="td td-row text-xs-center">	183	<td class="td td-row text-xs-center">
184	<span>	184	<span>
185	<v-tooltip top>	185	<v-tooltip top>
186	<img	186	<img
187	slot="activator"	187	slot="activator"
188	style="cursor:pointer; width:25px; height:25px; "	188	style="cursor:pointer; width:25px; height:25px; "
189	class="mr-3"	189	class="mr-3"
190	@click="profile(props.item)"	190	@click="profile(props.item)"
191	src="/static/icon/view.png"	191	src="/static/icon/view.png"
192	/>	192	/>
193	<span>View</span>	193	<span>View</span>
194	</v-tooltip>	194	</v-tooltip>
195	<v-tooltip top>	195	<v-tooltip top>
196	<img	196	<img
197	slot="activator"	197	slot="activator"
198	style="cursor:pointer; width:20px; height:18px; "	198	style="cursor:pointer; width:20px; height:18px; "
199	class="mr-3"	199	class="mr-3"
200	@click="editItem(props.item)"	200	@click="editItem(props.item)"
201	src="/static/icon/edit.png"	201	src="/static/icon/edit.png"
202	/>	202	/>
203	<span>Edit</span>	203	<span>Edit</span>
204	</v-tooltip>	204	</v-tooltip>
205	<v-tooltip top>	205	<v-tooltip top>
206	<img	206	<img
207	slot="activator"	207	slot="activator"
208	style="cursor:pointer; width:20px; height:20px; "	208	style="cursor:pointer; width:20px; height:20px; "
209	class="mr-3"	209	class="mr-3"
210	@click="deleteItem(props.item)"	210	@click="deleteItem(props.item)"
211	src="/static/icon/delete.png"	211	src="/static/icon/delete.png"
212	/>	212	/>
213	<span>Delete</span>	213	<span>Delete</span>
214	</v-tooltip>	214	</v-tooltip>
215	</span>	215	</span>
216	</td>	216	</td>
217	</tr>	217	</tr>
218	</template>	218	</template>
219	<v-alert	219	<v-alert
220	slot="no-results"	220	slot="no-results"
221	:value="true"	221	:value="true"
222	color="error"	222	color="error"
223	icon="warning"	223	icon="warning"
224	>Your search for "{{ search }}" found no results.</v-alert>	224	>Your search for "{{ search }}" found no results.</v-alert>
225	</v-data-table>	225	</v-data-table>
226	<!-- **** ADD MULTIPLE EVENT **** -->	226	<!-- **** ADD MULTIPLE EVENT **** -->
227	<v-dialog v-model="addEventDialog" max-width="500px">	227	<v-dialog v-model="addEventDialog" max-width="500px">
228	<v-card flat class="card-style pa-2" dark>	228	<v-card flat class="card-style pa-2" dark>
229	<v-layout>	229	<v-layout>
230	<v-flex xs12>	230	<v-flex xs12>
231	<label class="title text-xs-center">Add Event</label>	231	<label class="title text-xs-center">Add Event</label>
232	<v-icon size="24" class="right" @click="addEventDialog = false">cancel</v-icon>	232	<v-icon size="24" class="right" @click="addEventDialog = false">cancel</v-icon>
233	</v-flex>	233	</v-flex>
234	</v-layout>	234	</v-layout>
235	<v-form ref="form" v-model="valid" lazy-validation>	235	<v-form ref="form" v-model="valid" lazy-validation>
236	<v-container fluid>	236	<v-container fluid>
237	<v-flex xs12>	237	<v-flex xs12>
238	<v-layout>	238	<v-layout>
239	<v-flex xs4 class="pt-4 subheading">	239	<v-flex xs4 class="pt-4 subheading">
240	<label class="right">Title:</label>	240	<label class="right">Title:</label>
241	</v-flex>	241	</v-flex>
242	<v-flex xs8 sm8 class="ml-3">	242	<v-flex xs8 sm8 class="ml-3">
243	<v-text-field	243	<v-text-field
244	v-model="addEvent.title"	244	v-model="addEvent.title"
245	placeholder="fill your Title"	245	placeholder="fill your Title"
246	type="text"	246	type="text"
247	:rules="titleRules"	247	:rules="titleRules"
248	required	248	required
249	></v-text-field>	249	></v-text-field>
250	</v-flex>	250	</v-flex>
251	</v-layout>	251	</v-layout>
252	</v-flex>	252	</v-flex>
253	<v-flex xs12>	253	<v-flex xs12>
254	<v-layout>	254	<v-layout>
255	<v-flex xs4 class="pt-4 subheading">	255	<v-flex xs4 class="pt-4 subheading">
256	<label class="right">Date:</label>	256	<label class="right">Date:</label>
257	</v-flex>	257	</v-flex>
258	<v-flex xs8 sm8 class="ml-3">	258	<v-flex xs8 sm8 class="ml-3">
259	<v-menu	259	<v-menu
260	ref="menu1"	260	ref="menu1"
261	:close-on-content-click="false"	261	:close-on-content-click="false"
262	v-model="menu1"	262	v-model="menu1"
263	:nudge-right="40"	263	:nudge-right="40"
264	:return-value.sync="addEvent.dateOfEvent"	264	:return-value.sync="addEvent.dateOfEvent"
265	app	265	app
266	lazy	266	lazy
267	transition="scale-transition"	267	transition="scale-transition"
268	offset-y	268	offset-y
269	full-width	269	full-width
270	min-width="290px"	270	min-width="290px"
271	>	271	>
272	<v-text-field	272	<v-text-field
273	slot="activator"	273	slot="activator"
274	:rules="dateRules"	274	:rules="dateRules"
275	v-model="addEvent.dateOfEvent"	275	v-model="addEvent.dateOfEvent"
276	append-icon="event"	276	append-icon="event"
277	placeholder="Select date"	277	placeholder="Select date"
278	></v-text-field>	278	></v-text-field>
279	<v-date-picker	279	<v-date-picker
280	color="info"	280	color="info"
281	v-model="addEvent.dateOfEvent"	281	v-model="addEvent.dateOfEvent"
282	@input="$refs.menu1.save(addEvent.dateOfEvent)"	282	@input="$refs.menu1.save(addEvent.dateOfEvent)"
283	></v-date-picker>	283	></v-date-picker>
284	</v-menu>	284	</v-menu>
285	</v-flex>	285	</v-flex>
286	</v-layout>	286	</v-layout>
287	</v-flex>	287	</v-flex>
288	<v-flex xs12>	288	<v-flex xs12>
289	<v-layout>	289	<v-layout>
290	<v-flex xs4 class="pt-4 subheading">	290	<v-flex xs4 class="pt-4 subheading">
291	<label class="right">Description:</label>	291	<label class="right">Description:</label>
292	</v-flex>	292	</v-flex>
293	<v-flex xs8 sm8 class="ml-3">	293	<v-flex xs8 sm8 class="ml-3">
294	<v-text-field	294	<v-text-field
295	placeholder="fill your Description"	295	placeholder="fill your Description"
296	:rules="descriptionRules"	296	:rules="descriptionRules"
297	v-model="addEvent.description"	297	v-model="addEvent.description"
298	type="text"	298	type="text"
299	required	299	required
300	></v-text-field>	300	></v-text-field>
301	</v-flex>	301	</v-flex>
302	</v-layout>	302	</v-layout>
303	</v-flex>	303	</v-flex>
304	<v-layout>	304	<v-layout>
305	<v-flex xs12>	305	<v-flex xs12>
306	<v-layout class="right">	306	<v-layout class="right">
307	<v-btn @click="clear" round class="clear-button" dark>clear</v-btn>	307	<v-btn @click="clear" round class="clear-button" dark>clear</v-btn>
308	<v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>	308	<v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
309	</v-layout>	309	</v-layout>
310	</v-flex>	310	</v-flex>
311	</v-layout>	311	</v-layout>
312	</v-container>	312	</v-container>
313	</v-form>	313	</v-form>
314	</v-card>	314	</v-card>
315	</v-dialog>	315	</v-dialog>
316	<v-snackbar	316	<v-snackbar
317	:timeout="timeout"	317	:timeout="timeout"
318	:top="y === 'top'"	318	:top="y === 'top'"
319	:right="x === 'right'"	319	:right="x === 'right'"
320	:vertical="mode === 'vertical'"	320	:vertical="mode === 'vertical'"
321	v-model="snackbar"	321	v-model="snackbar"
322	:color="color"	322	:color="color"
323	>{{ text }}</v-snackbar>	323	>{{ text }}</v-snackbar>
324	<div class="loader" v-if="showLoader">	324	<div class="loader" v-if="showLoader">
325	<v-progress-circular indeterminate color="white"></v-progress-circular>	325	<v-progress-circular indeterminate color="white"></v-progress-circular>
326	</div>	326	</div>
327	</v-container>	327	</v-container>
328	</template>	328	</template>
329		329
330	<script>	330	<script>
331	import http from "@/Services/http.js";	331	import http from "@/Services/http.js";
332	import moment from "moment";	332	import moment from "moment";
333		333
334	export default {	334	export default {
335	data: () => ({	335	data: () => ({
336	snackbar: false,	336	snackbar: false,
337	y: "top",	337	y: "top",
338	x: "right",	338	x: "right",
339	mode: "",	339	mode: "",
340	timeout: 5000,	340	timeout: 5000,
341	text: "",	341	text: "",
342	color: "",	342	color: "",
343	loading: false,	343	loading: false,
344	date: null,	344	date: null,
345	search: "",	345	search: "",
346	color: "",	346	color: "",
347	show: true,	347	show: true,
348	addEventDialog: false,	348	addEventDialog: false,
349	showSearch: false,	349	showSearch: false,
350	showLoader: false,	350	showLoader: false,
351	editEventdialog: false,	351	editEventdialog: false,
352	viewEventdialog: false,	352	viewEventdialog: false,
353	valid: true,	353	valid: true,
354	pagination: {	354	pagination: {
355	rowsPerPage: 10	355	rowsPerPage: 10
356	},	356	},
357	date: null,	357	date: null,
358	menu1: false,	358	menu1: false,
359	menu: false,	359	menu: false,
360	titleRules: [v => !!v \|\| " Tilte is required"],	360	titleRules: [v => !!v \|\| " Tilte is required"],
361	descriptionRules: [v => !!v \|\| " Discription is required"],	361	descriptionRules: [v => !!v \|\| " Discription is required"],
362	dateRules: [v => !!v \|\| "Date is required"],	362	dateRules: [v => !!v \|\| "Date is required"],
363	headers: [	363	headers: [
364	{	364	{
365	text: "No",	365	text: "No",
366	align: "",	366	align: "",
367	sortable: false,	367	sortable: false,
368	value: "No"	368	value: "No"
369	},	369	},
370	{ text: "Title", value: "title", sortable: false, align: "center" },	370	{ text: "Title", value: "title", sortable: false, align: "center" },
371	{ text: "Date", value: "date", sortable: false, align: "center" },	371	{ text: "Date", value: "date", sortable: false, align: "center" },
372		372
373	{	373	{
374	text: "Description",	374	text: "Description",
375	value: "description",	375	value: "description",
376	sortable: false,	376	sortable: false,
377	align: "center"	377	align: "center"
378	},	378	},
379	{ text: "Action", value: "", sortable: false, align: "center" }	379	{ text: "Action", value: "", sortable: false, align: "center" }
380	],	380	],
381	events: [],	381	events: [],
382	editedIndex: -1,	382	editedIndex: -1,
383	addEvent: {},	383	addEvent: {},
384	editedItem: {}	384	editedItem: {}
385	}),	385	}),
386	methods: {	386	methods: {
387	dates: function(date) {	387	dates: function(date) {
388	return moment(date).format("MMMM DD, YYYY");	388	return moment(date).format("MMMM DD, YYYY");
389	},	389	},
390	getEvents() {	390	getEvents() {
391	this.showLoader = true;	391	this.showLoader = true;
392	var token = this.$store.state.token;	392	var token = this.$store.state.token;
393	http()	393	http()
394	.get("/getSchoolEventsList", {	394	.get("/getSchoolEventsList", {
395	headers: { Authorization: "Bearer " + token }	395	headers: { Authorization: "Bearer " + token }
396	})	396	})
397	.then(response => {	397	.then(response => {
398	this.events = response.data.data;	398	this.events = response.data.data;
399	this.showLoader = false;	399	this.showLoader = false;
400	})	400	})
401	.catch(error => {	401	.catch(error => {
402	// console.log("err====>", err);	402	// console.log("err====>", err);
403	this.showLoader = false;	403	this.showLoader = false;
404	if (error.response.status === 401) {	404	if (error.response.status === 401) {
405	this.$router.replace({ path: "/" });	405	this.$router.replace({ path: "/" });
406	this.$store.dispatch("setToken", null);	406	this.$store.dispatch("setToken", null);
407	this.$store.dispatch("Id", null);	407	this.$store.dispatch("Id", null);
408	}	408	}
409	});	409	});
410	},	410	},
411	editItem(item) {	411	editItem(item) {
412	this.editedIndex = this.events.indexOf(item);	412	this.editedIndex = this.events.indexOf(item);
413	this.editedItem = Object.assign({}, item);	413	this.editedItem = Object.assign({}, item);
414	this.editedItem.schoolEventId = item._id;	414	this.editedItem.schoolEventId = item._id;
415	this.editEventdialog = true;	415	this.editEventdialog = true;
416	},	416	},
417	profile(item) {	417	profile(item) {
418	this.editedIndex = this.events.indexOf(item);	418	this.editedIndex = this.events.indexOf(item);
419	this.editedItem = Object.assign({}, item);	419	this.editedItem = Object.assign({}, item);
420	this.viewEventdialog = true;	420	this.viewEventdialog = true;
421	},	421	},
422		422
423	deleteItem(item) {	423	deleteItem(item) {
424	let deleteEvent = {	424	let deleteEvent = {
425	schoolEventId: item._id	425	schoolEventId: item._id
426	};	426	};
427	http()	427	http()
428	.delete(	428	.delete(
429	"/deleteSchoolEvent",	429	"/deleteSchoolEvent",
430	confirm("Are you sure you want to delete this?") && {	430	confirm("Are you sure you want to delete this?") && {
431	params: deleteEvent	431	params: deleteEvent
432	}	432	}
433	)	433	)
434	.then(response => {	434	.then(response => {
435	this.snackbar = true;	435	this.snackbar = true;
436	this.text = response.data.message;	436	this.text = response.data.message;
437	this.getEvents();	437	this.getEvents();
438	this.snackbar = true;	438	this.snackbar = true;
439	this.color = "green";	439	this.color = "green";
440	this.text = response.data.message;	440	this.text = response.data.message;
441	})	441	})
442	.catch(error => {	442	.catch(error => {
443	this.snackbar = true;	443	this.snackbar = true;
444	this.text = error.response.data.message;	444	this.text = error.response.data.message;
445	this.color = "error";	445	this.color = "error";
446	this.loading = false;	446	this.loading = false;
447	});	447	});
448	},	448	},
449	close() {	449	close() {
450	this.editEventdialog = false;	450	this.editEventdialog = false;
451	},	451	},
452	submit() {	452	submit() {
453	if (this.$refs.form.validate()) {	453	if (this.$refs.form.validate()) {
454	this.loading = true;	454	this.loading = true;
455	http()	455	http()
456	.post("/createSchoolEvent", this.addEvent)	456	.post("/createSchoolEvent", this.addEvent)
457	.then(response => {	457	.then(response => {
458	this.snackbar = true;	458	this.snackbar = true;
459	this.text = response.data.message;	459	this.text = response.data.message;
460	this.color = "green";	460	this.color = "green";
461	this.getEvents();	461	this.getEvents();
462	this.clear();	462	this.clear();
463	this.loading = false;	463	this.loading = false;
464	this.addEventDialog = false;	464	this.addEventDialog = false;
465	})	465	})
466	.catch(error => {	466	.catch(error => {
467	this.snackbar = true;	467	this.snackbar = true;
468	this.text = error.response.data.message;	468	this.text = error.response.data.message;
469	this.color = "error";	469	this.color = "error";
470	this.loading = false;	470	this.loading = false;
471	});	471	});
472	}	472	}
473	},	473	},
474	clear() {	474	clear() {
475	this.$refs.form.reset();	475	this.$refs.form.reset();
476	},	476	},
477	save() {	477	save() {
478	http()	478	http()
479	.put("/updateSchoolEvent", this.editedItem)	479	.put("/updateSchoolEvent", this.editedItem)
480	.then(response => {	480	.then(response => {
481	this.snackbar = true;	481	this.snackbar = true;
482	this.text = response.data.message;	482	this.text = response.data.message;
483	this.color = "green";	483	this.color = "green";
484	this.getEvents();	484	this.getEvents();
485	this.close();	485	this.close();
486	})	486	})
487	.catch(error => {	487	.catch(error => {
488	this.snackbar = true;	488	this.snackbar = true;
489	this.text = error.response.data.message;	489	this.text = error.response.data.message;
490	this.color = "error";	490	this.color = "error";
491	});	491	});
492	},	492	},
493	displaySearch() {	493	displaySearch() {
494	(this.show = false), (this.showSearch = true);	494	(this.show = false), (this.showSearch = true);
495	},	495	},
496	closeSearch() {	496	closeSearch() {
497	this.showSearch = false;	497	this.showSearch = false;
498	this.show = true;	498	this.show = true;
499	this.search = "";	499	this.search = "";
500	}	500	}
501	},	501	},
502	mounted() {	502	mounted() {
503	this.getEvents();	503	this.getEvents();
504	}	504	}
505	};	505	};
506	</script>	506	</script>

src/pages/Exam/examSchedule.vue

Diff comments View file @8c3acf4

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

src/pages/Exam/grade.vue

Diff comments View file @8c3acf4

1	<template>	1	<template>
2	<v-container fluid class="body-color">	2	<v-container fluid class="body-color">
3	<!-- **** EDIT GRADE **** -->	3	<!-- **** EDIT GRADE **** -->
4	<v-dialog v-model="editGradeDialog" max-width="500px">	4	<v-dialog v-model="editGradeDialog" max-width="500px">
5	<v-card flat class="card-style pa-2" dark>	5	<v-card flat class="card-style pa-2" dark>
6	<v-layout>	6	<v-layout>
7	<v-flex xs12>	7	<v-flex xs12>
8	<label class="title text-xs-center">Edit Grade</label>	8	<label class="title text-xs-center">Edit Grade</label>
9	<v-icon size="24" class="right" @click="editGradeDialog = false">cancel</v-icon>	9	<v-icon size="24" class="right" @click="editGradeDialog = false">cancel</v-icon>
10	</v-flex>	10	</v-flex>
11	</v-layout>	11	</v-layout>
12	<v-form ref="formEditGrade" v-model="validEditGrade" lazy-validation>	12	<v-form ref="formEditGrade" v-model="validEditGrade" lazy-validation>
13	<v-container fluid>	13	<v-container fluid>
14	<v-layout wrap>	14	<v-layout wrap>
15	<v-flex xs12 sm12>	15	<v-flex xs12 sm12>
16	<v-layout>	16	<v-layout>
17	<v-flex xs4 class="pt-4 subheading">	17	<v-flex xs4 class="pt-4 subheading">
18	<label class="right">Grade Name:</label>	18	<label class="right">Grade Name:</label>
19	</v-flex>	19	</v-flex>
20	<v-flex xs7 class="ml-3">	20	<v-flex xs7 class="ml-3">
21	<v-text-field	21	<v-text-field
22	placeholder="fill your Grade Name"	22	placeholder="fill your Grade Name"
23	v-model="editedItem.gradeName"	23	v-model="editedItem.gradeName"
24	type="text"	24	type="text"
25	:rules="editGradeName"	25	:rules="editGradeName"
26	></v-text-field>	26	></v-text-field>
27	</v-flex>	27	</v-flex>
28	</v-layout>	28	</v-layout>
29	</v-flex>	29	</v-flex>
30	<v-flex xs12 sm12>	30	<v-flex xs12 sm12>
31	<v-layout>	31	<v-layout>
32	<v-flex xs4 class="pt-4 subheading">	32	<v-flex xs4 class="pt-4 subheading">
33	<label class="right">Grade Point:</label>	33	<label class="right">Grade Point:</label>
34	</v-flex>	34	</v-flex>
35	<v-flex xs7 class="ml-3">	35	<v-flex xs7 class="ml-3">
36	<v-text-field	36	<v-text-field
37	placeholder="fill your Grade Point"	37	placeholder="fill your Grade Point"
38	v-model="editedItem.gradePoint"	38	v-model="editedItem.gradePoint"
39	:rules="editGradePoint"	39	:rules="editGradePoint"
40	type="text"	40	type="text"
41	></v-text-field>	41	></v-text-field>
42	</v-flex>	42	</v-flex>
43	</v-layout>	43	</v-layout>
44	</v-flex>	44	</v-flex>
45	<v-flex xs12 sm12>	45	<v-flex xs12 sm12>
46	<v-layout>	46	<v-layout>
47	<v-flex xs4 class="pt-4 subheading">	47	<v-flex xs4 class="pt-4 subheading">
48	<label class="right">Mark From:</label>	48	<label class="right">Mark From:</label>
49	</v-flex>	49	</v-flex>
50	<v-flex xs7 class="ml-3">	50	<v-flex xs7 class="ml-3">
51	<v-text-field	51	<v-text-field
52	placeholder="fill your Mark From"	52	placeholder="fill your Mark From"
53	v-model="editedItem.marksFrom"	53	v-model="editedItem.marksFrom"
54	:rules="editMarksFrom"	54	:rules="editMarksFrom"
55	type="text"	55	type="text"
56	></v-text-field>	56	></v-text-field>
57	</v-flex>	57	</v-flex>
58	</v-layout>	58	</v-layout>
59	</v-flex>	59	</v-flex>
60	<v-flex xs12 sm12>	60	<v-flex xs12 sm12>
61	<v-layout>	61	<v-layout>
62	<v-flex xs4 class="pt-4 subheading">	62	<v-flex xs4 class="pt-4 subheading">
63	<label class="right">Mark Upto:</label>	63	<label class="right">Mark Upto:</label>
64	</v-flex>	64	</v-flex>
65	<v-flex xs7 class="ml-3">	65	<v-flex xs7 class="ml-3">
66	<v-text-field	66	<v-text-field
67	placeholder="fill your Mark From"	67	placeholder="fill your Mark From"
68	v-model="editedItem.marksUpTo"	68	v-model="editedItem.marksUpTo"
69	:rules="editMarksUpTo"	69	:rules="editMarksUpTo"
70	type="text"	70	type="text"
71	></v-text-field>	71	></v-text-field>
72	</v-flex>	72	</v-flex>
73	</v-layout>	73	</v-layout>
74	</v-flex>	74	</v-flex>
75	<v-flex xs12 sm12>	75	<v-flex xs12 sm12>
76	<v-layout>	76	<v-layout>
77	<v-flex xs4 class="pt-4 subheading">	77	<v-flex xs4 class="pt-4 subheading">
78	<label class="right">Note:</label>	78	<label class="right">Note:</label>
79	</v-flex>	79	</v-flex>
80	<v-flex xs7 class="ml-3">	80	<v-flex xs7 class="ml-3">
81	<v-text-field	81	<v-text-field
82	placeholder="fill your Serial Number"	82	placeholder="fill your Serial Number"
83	v-model="editedItem.note"	83	v-model="editedItem.note"
84	type="text"	84	type="text"
85	></v-text-field>	85	></v-text-field>
86	</v-flex>	86	</v-flex>
87	</v-layout>	87	</v-layout>
88	</v-flex>	88	</v-flex>
89	</v-layout>	89	</v-layout>
90	<v-layout>	90	<v-layout>
91	<v-flex xs12>	91	<v-flex xs12>
92	<v-card-actions>	92	<v-card-actions>
93	<v-spacer></v-spacer>	93	<v-spacer></v-spacer>
94	<v-btn round dark @click="save" class="add-button">Save</v-btn>	94	<v-btn round dark @click="save" class="add-button">Save</v-btn>
95	</v-card-actions>	95	</v-card-actions>
96	</v-flex>	96	</v-flex>
97	</v-layout>	97	</v-layout>
98	</v-container>	98	</v-container>
99	</v-form>	99	</v-form>
100	</v-card>	100	</v-card>
101	</v-dialog>	101	</v-dialog>
102		102
103	<!-- **** PROFILE VIEW PARTICULAR GRDAE DATA **** -->	103	<!-- **** PROFILE VIEW PARTICULAR GRDAE DATA **** -->
104		104
105	<v-dialog v-model="viewGradeDialog" max-width="500px">	105	<v-dialog v-model="viewGradeDialog" max-width="500px">
106	<v-card flat class="card-style pa-3" dark>	106	<v-card flat class="card-style pa-3" dark>
107	<v-layout>	107	<v-layout>
108	<v-flex xs12>	108	<v-flex xs12>
109	<label class="title text-xs-center">View Class</label>	109	<label class="title text-xs-center">View Grade</label>
110	<v-icon size="24" class="right" @click="viewGradeDialog = false">cancel</v-icon>	110	<v-icon size="24" class="right" @click="viewGradeDialog = false">cancel</v-icon>
111	</v-flex>	111	</v-flex>
112	</v-layout>	112	</v-layout>
113	<v-card-text>	113	<v-card-text>
114	<v-container grid-list-md>	114	<v-container grid-list-md>
115	<v-layout wrap>	115	<v-layout wrap>
116	<v-flex>	116	<v-flex>
117	<v-layout>	117	<v-layout>
118	<v-flex xs5 sm6>	118	<v-flex xs5 sm6>
119	<h5 class="right my-1">	119	<h5 class="right my-1">
120	<b>Grade Name:</b>	120	<b>Grade Name:</b>
121	</h5>	121	</h5>
122	</v-flex>	122	</v-flex>
123	<v-flex sm6 xs8>	123	<v-flex sm6 xs8>
124	<h5 class="my-1">{{ editedItem.gradeName }}</h5>	124	<h5 class="my-1">{{ editedItem.gradeName }}</h5>
125	</v-flex>	125	</v-flex>
126	</v-layout>	126	</v-layout>
127	<v-layout>	127	<v-layout>
128	<v-flex xs5 sm6>	128	<v-flex xs5 sm6>
129	<h5 class="right my-1">	129	<h5 class="right my-1">
130	<b>Grade Point:</b>	130	<b>Grade Point:</b>
131	</h5>	131	</h5>
132	</v-flex>	132	</v-flex>
133	<v-flex sm6 xs8>	133	<v-flex sm6 xs8>
134	<h5 class="my-1">{{ editedItem.gradePoint }}</h5>	134	<h5 class="my-1">{{ editedItem.gradePoint }}</h5>
135	</v-flex>	135	</v-flex>
136	</v-layout>	136	</v-layout>
137	<v-layout>	137	<v-layout>
138	<v-flex xs5 sm6>	138	<v-flex xs5 sm6>
139	<h5 class="right my-1">	139	<h5 class="right my-1">
140	<b>Mark From:</b>	140	<b>Mark From:</b>
141	</h5>	141	</h5>
142	</v-flex>	142	</v-flex>
143	<v-flex sm6 xs8>	143	<v-flex sm6 xs8>
144	<h5 class="my-1">{{ editedItem.marksFrom }}</h5>	144	<h5 class="my-1">{{ editedItem.marksFrom }}</h5>
145	</v-flex>	145	</v-flex>
146	</v-layout>	146	</v-layout>
147	<v-layout>	147	<v-layout>
148	<v-flex xs5 sm6>	148	<v-flex xs5 sm6>
149	<h5 class="right my-1">	149	<h5 class="right my-1">
150	<b>Mark Upto:</b>	150	<b>Mark Upto:</b>
151	</h5>	151	</h5>
152	</v-flex>	152	</v-flex>
153	<v-flex sm6 xs8>	153	<v-flex sm6 xs8>
154	<h5 class="my-1">{{ editedItem.marksUpTo }}</h5>	154	<h5 class="my-1">{{ editedItem.marksUpTo }}</h5>
155	</v-flex>	155	</v-flex>
156	</v-layout>	156	</v-layout>
157	<v-layout>	157	<v-layout>
158	<v-flex xs5 sm6>	158	<v-flex xs5 sm6>
159	<h5 class="right my-1">	159	<h5 class="right my-1">
160	<b>Note:</b>	160	<b>Note:</b>
161	</h5>	161	</h5>
162	</v-flex>	162	</v-flex>
163	<v-flex sm6 xs8>	163	<v-flex sm6 xs8>
164	<h5 class="my-1">{{ editedItem.note }}</h5>	164	<h5 class="my-1">{{ editedItem.note }}</h5>
165	</v-flex>	165	</v-flex>
166	</v-layout>	166	</v-layout>
167	</v-flex>	167	</v-flex>
168	</v-layout>	168	</v-layout>
169	</v-container>	169	</v-container>
170	</v-card-text>	170	</v-card-text>
171	</v-card>	171	</v-card>
172	</v-dialog>	172	</v-dialog>
173	<!-- **** EXISTING GRADE TABLE**** -->	173	<!-- **** EXISTING GRADE TABLE**** -->
174		174
175	<v-toolbar color="transparent" flat>	175	<v-toolbar color="transparent" flat>
176	<v-btn	176	<v-btn
177	fab	177	fab
178	dark	178	dark
179	class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"	179	class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
180	small	180	small
181	@click="addGradeDialog = true"	181	@click="addGradeDialog = true"
182	>	182	>
183	<v-icon dark>add</v-icon>	183	<v-icon dark>add</v-icon>
184	</v-btn>	184	</v-btn>
185	<v-btn	185	<v-btn
186	round	186	round
187	class="open-dialog-button hidden-sm-only hidden-xs-only"	187	class="open-dialog-button hidden-sm-only hidden-xs-only"
188	dark	188	dark
189	@click="addGradeDialog = true"	189	@click="addGradeDialog = true"
190	>	190	>
191	<v-icon class="white--text pr-1" size="20">add</v-icon>Add Grade	191	<v-icon class="white--text pr-1" size="20">add</v-icon>Add Grade
192	</v-btn>	192	</v-btn>
193	<v-spacer></v-spacer>	193	<v-spacer></v-spacer>
194	<v-card-title class="body-1" v-show="show">	194	<v-card-title class="body-1" v-show="show">
195	<v-btn icon large flat @click="displaySearch">	195	<v-btn icon large flat @click="displaySearch">
196	<v-avatar size="27">	196	<v-avatar size="27">
197	<img src="/static/icon/search.png" alt="icon" />	197	<img src="/static/icon/search.png" alt="icon" />
198	</v-avatar>	198	</v-avatar>
199	</v-btn>	199	</v-btn>
200	</v-card-title>	200	</v-card-title>
201	<v-flex xs8 sm8 md3 lg2 v-show="showSearch">	201	<v-flex xs8 sm8 md3 lg2 v-show="showSearch">
202	<v-layout>	202	<v-layout>
203	<v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>	203	<v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>
204	<v-icon @click="closeSearch" color="error">close</v-icon>	204	<v-icon @click="closeSearch" color="error">close</v-icon>
205	</v-layout>	205	</v-layout>
206	</v-flex>	206	</v-flex>
207	</v-toolbar>	207	</v-toolbar>
208	<v-data-table	208	<v-data-table
209	:headers="headers"	209	:headers="headers"
210	:items="gradeData"	210	:items="gradeData"
211	:pagination.sync="pagination"	211	:pagination.sync="pagination"
212	:search="search"	212	:search="search"
213	>	213	>
214	<template slot="items" slot-scope="props">	214	<template slot="items" slot-scope="props">
215	<tr class="tr">	215	<tr class="tr">
216	<td class="td td-row">{{ props.index + 1}}</td>	216	<td class="td td-row">{{ props.index + 1}}</td>
217	<td class="td td-row text-xs-center">{{ props.item.gradeName}}</td>	217	<td class="td td-row text-xs-center">{{ props.item.gradeName}}</td>
218	<td class="td td-row text-xs-center">{{ props.item.gradePoint }}</td>	218	<td class="td td-row text-xs-center">{{ props.item.gradePoint }}</td>
219	<td class="td td-row text-xs-center">{{ props.item.marksFrom }}</td>	219	<td class="td td-row text-xs-center">{{ props.item.marksFrom }}</td>
220	<td class="td td-row text-xs-center">{{ props.item.marksUpTo }}</td>	220	<td class="td td-row text-xs-center">{{ props.item.marksUpTo }}</td>
221	<td class="td td-row text-xs-center">{{ props.item.note }}</td>	221	<td class="td td-row text-xs-center">{{ props.item.note }}</td>
222	<td class="td td-row text-xs-center">	222	<td class="td td-row text-xs-center">
223	<span>	223	<span>
224	<v-tooltip top>	224	<v-tooltip top>
225	<img	225	<img
226	slot="activator"	226	slot="activator"
227	style="cursor:pointer; width:25px; height:25px; "	227	style="cursor:pointer; width:25px; height:25px; "
228	class="mr-3"	228	class="mr-3"
229	@click="profile(props.item)"	229	@click="profile(props.item)"
230	src="/static/icon/view.png"	230	src="/static/icon/view.png"
231	/>	231	/>
232	<span>View</span>	232	<span>View</span>
233	</v-tooltip>	233	</v-tooltip>
234	<v-tooltip top>	234	<v-tooltip top>
235	<img	235	<img
236	slot="activator"	236	slot="activator"
237	style="cursor:pointer; width:20px; height:18px; "	237	style="cursor:pointer; width:20px; height:18px; "
238	class="mr-3"	238	class="mr-3"
239	@click="editItem(props.item)"	239	@click="editItem(props.item)"
240	src="/static/icon/edit.png"	240	src="/static/icon/edit.png"
241	/>	241	/>
242	<span>Edit</span>	242	<span>Edit</span>
243	</v-tooltip>	243	</v-tooltip>
244	<v-tooltip top>	244	<v-tooltip top>
245	<img	245	<img
246	slot="activator"	246	slot="activator"
247	style="cursor:pointer; width:20px; height:20px; "	247	style="cursor:pointer; width:20px; height:20px; "
248	@click="deleteGrade(props.item)"	248	@click="deleteGrade(props.item)"
249	class="mr-3"	249	class="mr-3"
250	src="/static/icon/delete.png"	250	src="/static/icon/delete.png"
251	/>	251	/>
252	<span>Delete</span>	252	<span>Delete</span>
253	</v-tooltip>	253	</v-tooltip>
254	</span>	254	</span>
255	</td>	255	</td>
256	</tr>	256	</tr>
257	</template>	257	</template>
258	<v-alert	258	<v-alert
259	slot="no-results"	259	slot="no-results"
260	:value="true"	260	:value="true"
261	color="error"	261	color="error"
262	icon="warning"	262	icon="warning"
263	>Your search for "{{ search }}" found no results.</v-alert>	263	>Your search for "{{ search }}" found no results.</v-alert>
264	</v-data-table>	264	</v-data-table>
265	<!-- **** ADD GRADE **** -->	265	<!-- **** ADD GRADE **** -->
266	<v-dialog v-model="addGradeDialog" max-width="500px">	266	<v-dialog v-model="addGradeDialog" max-width="500px">
267	<v-card flat class="card-style pa-2" dark>	267	<v-card flat class="card-style pa-2" dark>
268	<v-layout>	268	<v-layout>
269	<v-flex xs12>	269	<v-flex xs12>
270	<label class="title text-xs-center">Add Grade</label>	270	<label class="title text-xs-center">Add Grade</label>
271	<v-icon size="24" class="right" @click="addGradeDialog = false">cancel</v-icon>	271	<v-icon size="24" class="right" @click="addGradeDialog = false">cancel</v-icon>
272	</v-flex>	272	</v-flex>
273	</v-layout>	273	</v-layout>
274	<v-form ref="form" v-model="valid" lazy-validation>	274	<v-form ref="form" v-model="valid" lazy-validation>
275	<v-container fluid>	275	<v-container fluid>
276	<v-flex xs12>	276	<v-flex xs12>
277	<v-layout>	277	<v-layout>
278	<v-flex xs5 sm4 class="pt-4 subheading">	278	<v-flex xs5 sm4 class="pt-4 subheading">
279	<label class="right">Grade Name:</label>	279	<label class="right">Grade Name:</label>
280	</v-flex>	280	</v-flex>
281	<v-flex xs7 class="ml-3">	281	<v-flex xs7 class="ml-3">
282	<v-text-field	282	<v-text-field
283	placeholder="fill your Grade Name"	283	placeholder="fill your Grade Name"
284	:rules="gradeNameRules"	284	:rules="gradeNameRules"
285	v-model="addGrade.gradeName"	285	v-model="addGrade.gradeName"
286	></v-text-field>	286	></v-text-field>
287	</v-flex>	287	</v-flex>
288	</v-layout>	288	</v-layout>
289	</v-flex>	289	</v-flex>
290	<v-flex xs12>	290	<v-flex xs12>
291	<v-layout>	291	<v-layout>
292	<v-flex xs5 sm4 class="pt-4 subheading">	292	<v-flex xs5 sm4 class="pt-4 subheading">
293	<label class="right">Grade Point:</label>	293	<label class="right">Grade Point:</label>
294	</v-flex>	294	</v-flex>
295	<v-flex xs7 class="ml-3">	295	<v-flex xs7 class="ml-3">
296	<v-text-field	296	<v-text-field
297	placeholder="fill your Grade Point"	297	placeholder="fill your Grade Point"
298	v-model="addGrade.gradePoint"	298	v-model="addGrade.gradePoint"
299	:rules="gradePointRules"	299	:rules="gradePointRules"
300	></v-text-field>	300	></v-text-field>
301	</v-flex>	301	</v-flex>
302	</v-layout>	302	</v-layout>
303	</v-flex>	303	</v-flex>
304	<v-flex xs12>	304	<v-flex xs12>
305	<v-layout>	305	<v-layout>
306	<v-flex xs5 sm4 class="pt-4 subheading">	306	<v-flex xs5 sm4 class="pt-4 subheading">
307	<label class="right">Mark From:</label>	307	<label class="right">Mark From:</label>
308	</v-flex>	308	</v-flex>
309	<v-flex xs7 class="ml-3">	309	<v-flex xs7 class="ml-3">
310	<v-text-field	310	<v-text-field
311	placeholder="fill your Mark From"	311	placeholder="fill your Mark From"
312	:rules="markFromRules"	312	:rules="markFromRules"
313	v-model="addGrade.marksFrom"	313	v-model="addGrade.marksFrom"
314	type="number"	314	type="number"
315	></v-text-field>	315	></v-text-field>
316	</v-flex>	316	</v-flex>
317	</v-layout>	317	</v-layout>
318	</v-flex>	318	</v-flex>
319	<v-flex xs12>	319	<v-flex xs12>
320	<v-layout>	320	<v-layout>
321	<v-flex xs5 sm4 class="pt-4 subheading">	321	<v-flex xs5 sm4 class="pt-4 subheading">
322	<label class="right">Mark Upto:</label>	322	<label class="right">Mark Upto:</label>
323	</v-flex>	323	</v-flex>
324	<v-flex xs7 class="ml-3">	324	<v-flex xs7 class="ml-3">
325	<v-text-field	325	<v-text-field
326	placeholder="fill your Mark Upto"	326	placeholder="fill your Mark Upto"
327	:rules="markUptoRules"	327	:rules="markUptoRules"
328	v-model="addGrade.marksUpTo"	328	v-model="addGrade.marksUpTo"
329	type="number"	329	type="number"
330	></v-text-field>	330	></v-text-field>
331	</v-flex>	331	</v-flex>
332	</v-layout>	332	</v-layout>
333	</v-flex>	333	</v-flex>
334	<v-flex xs12>	334	<v-flex xs12>
335	<v-layout>	335	<v-layout>
336	<v-flex xs5 sm4 class="pt-4 subheading">	336	<v-flex xs5 sm4 class="pt-4 subheading">
337	<label class="right">Note:</label>	337	<label class="right">Note:</label>
338	</v-flex>	338	</v-flex>
339	<v-flex xs7 class="ml-3">	339	<v-flex xs7 class="ml-3">
340	<v-text-field	340	<v-text-field
341	placeholder="fill your Note"	341	placeholder="fill your Note"
342	:rules="noteRules"	342	:rules="noteRules"
343	v-model="addGrade.note"	343	v-model="addGrade.note"
344	@keyup.enter="submit"	344	@keyup.enter="submit"
345	></v-text-field>	345	></v-text-field>
346	</v-flex>	346	</v-flex>
347	</v-layout>	347	</v-layout>
348	</v-flex>	348	</v-flex>
349	<v-layout>	349	<v-layout>
350	<v-flex xs12>	350	<v-flex xs12>
351	<v-card-actions>	351	<v-card-actions>
352	<v-spacer class="hidden-xs-only"></v-spacer>	352	<v-spacer class="hidden-xs-only"></v-spacer>
353	<v-btn @click="clear" round dark class="clear-button">Clear</v-btn>	353	<v-btn @click="clear" round dark class="clear-button">Clear</v-btn>
354	<v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>	354	<v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
355	</v-card-actions>	355	</v-card-actions>
356	</v-flex>	356	</v-flex>
357	</v-layout>	357	</v-layout>
358	</v-container>	358	</v-container>
359	</v-form>	359	</v-form>
360	</v-card>	360	</v-card>
361	</v-dialog>	361	</v-dialog>
362	<v-snackbar	362	<v-snackbar
363	:timeout="timeout"	363	:timeout="timeout"
364	:top="y === 'top'"	364	:top="y === 'top'"
365	:right="x === 'right'"	365	:right="x === 'right'"
366	:vertical="mode === 'vertical'"	366	:vertical="mode === 'vertical'"
367	v-model="snackbar"	367	v-model="snackbar"
368	:color="color"	368	:color="color"
369	>{{ text }}</v-snackbar>	369	>{{ text }}</v-snackbar>
370	<div class="loader" v-if="showLoader">	370	<div class="loader" v-if="showLoader">
371	<v-progress-circular indeterminate color="white"></v-progress-circular>	371	<v-progress-circular indeterminate color="white"></v-progress-circular>
372	</div>	372	</div>
373	</v-container>	373	</v-container>
374	</template>	374	</template>
375		375
376	<script>	376	<script>
377	import http from "@/Services/http.js";	377	import http from "@/Services/http.js";
378	import moment from "moment";	378	import moment from "moment";
379		379
380	export default {	380	export default {
381	data: () => ({	381	data: () => ({
382	snackbar: false,	382	snackbar: false,
383	date: null,	383	date: null,
384	menu1: false,	384	menu1: false,
385	menu2: false,	385	menu2: false,
386	addGradeDialog: false,	386	addGradeDialog: false,
387	color: "",	387	color: "",
388	y: "top",	388	y: "top",
389	x: "right",	389	x: "right",
390	mode: "",	390	mode: "",
391	timeout: 10000,	391	timeout: 10000,
392	text: "",	392	text: "",
393	show: true,	393	show: true,
394	showSearch: false,	394	showSearch: false,
395	loading: false,	395	loading: false,
396	loadingSearch: false,	396	loadingSearch: false,
397	date: null,	397	date: null,
398	search: "",	398	search: "",
399	showLoader: false,	399	showLoader: false,
400	editGradeDialog: false,	400	editGradeDialog: false,
401	viewGradeDialog: false,	401	viewGradeDialog: false,
402	valid: true,	402	valid: true,
403	validEditGrade: true,	403	validEditGrade: true,
404	pagination: {	404	pagination: {
405	rowsPerPage: 10	405	rowsPerPage: 10
406	},	406	},
407	gradeNameRules: [v => !!v \|\| "Grade Name is required"],	407	gradeNameRules: [v => !!v \|\| "Grade Name is required"],
408	gradePointRules: [v => !!v \|\| "Grade Point required"],	408	gradePointRules: [v => !!v \|\| "Grade Point required"],
409	markFromRules: [v => !!v \|\| "Mark From is required"],	409	markFromRules: [v => !!v \|\| "Mark From is required"],
410	markUptoRules: [v => !!v \|\| "Mark Upto is required"],	410	markUptoRules: [v => !!v \|\| "Mark Upto is required"],
411	authorRules: [v => !!v \|\| "Author is required"],	411	authorRules: [v => !!v \|\| "Author is required"],
412	noteRules: [v => !!v \|\| "Note is required"],	412	noteRules: [v => !!v \|\| "Note is required"],
413	editGradeName: [v => !!v \|\| "Grade Name is required"],	413	editGradeName: [v => !!v \|\| "Grade Name is required"],
414	editGradeName: [v => !!v \|\| "Grade Name is required"],	414	editGradeName: [v => !!v \|\| "Grade Name is required"],
415	editGradePoint: [v => !!v \|\| "Grade Point required"],	415	editGradePoint: [v => !!v \|\| "Grade Point required"],
416	editMarksFrom: [v => !!v \|\| "Mark From is required"],	416	editMarksFrom: [v => !!v \|\| "Mark From is required"],
417	editMarksUpTo: [v => !!v \|\| "Mark Upto is required"],	417	editMarksUpTo: [v => !!v \|\| "Mark Upto is required"],
418	headers: [	418	headers: [
419	{	419	{
420	align: "",	420	align: "",
421	text: "No",	421	text: "No",
422	sortable: false,	422	sortable: false,
423	value: "No"	423	value: "No"
424	},	424	},
425	{	425	{
426	text: "Grade Name",	426	text: "Grade Name",
427	vaue: "gradeName",	427	vaue: "gradeName",
428	sortable: false,	428	sortable: false,
429	align: "center"	429	align: "center"
430	},	430	},
431	{	431	{
432	text: "Grade Point",	432	text: "Grade Point",
433	value: "gradePoint",	433	value: "gradePoint",
434	sortable: false,	434	sortable: false,
435	align: "center"	435	align: "center"
436	},	436	},
437	{	437	{
438	text: "Mark From",	438	text: "Mark From",
439	value: "marksFrom",	439	value: "marksFrom",
440	sortable: false,	440	sortable: false,
441	align: "center"	441	align: "center"
442	},	442	},
443	{	443	{
444	text: "Mark Upto",	444	text: "Mark Upto",
445	value: "marksUpTo",	445	value: "marksUpTo",
446	sortable: false,	446	sortable: false,
447	align: "center"	447	align: "center"
448	},	448	},
449	{	449	{
450	text: "Note",	450	text: "Note",
451	value: "note",	451	value: "note",
452	sortable: false,	452	sortable: false,
453	align: "center"	453	align: "center"
454	},	454	},
455	{ text: "Action", value: "", sortable: false, align: "center" }	455	{ text: "Action", value: "", sortable: false, align: "center" }
456	],	456	],
457	gradeData: [],	457	gradeData: [],
458	addGrade: {},	458	addGrade: {},
459	editedItem: {},	459	editedItem: {},
460	token: ""	460	token: ""
461	}),	461	}),
462	methods: {	462	methods: {
463	dates: function(date) {	463	dates: function(date) {
464	return moment(date).format("MMMM DD, YYYY");	464	return moment(date).format("MMMM DD, YYYY");
465	},	465	},
466	pickFile() {	466	pickFile() {
467	this.$refs.image.click();	467	this.$refs.image.click();
468	},	468	},
469	getGradeList() {	469	getGradeList() {
470	this.showLoader = true;	470	this.showLoader = true;
471	this.loadingSearch = true;	471	this.loadingSearch = true;
472	http()	472	http()
473	.get("/getGradesList", {	473	.get("/getGradesList", {
474	headers: { Authorization: "Bearer " + this.token }	474	headers: { Authorization: "Bearer " + this.token }
475	})	475	})
476	.then(response => {	476	.then(response => {
477	this.gradeData = response.data.data;	477	this.gradeData = response.data.data;
478	this.showLoader = false;	478	this.showLoader = false;
479	this.loadingSearch = false;	479	this.loadingSearch = false;
480	})	480	})
481	.catch(error => {	481	.catch(error => {
482	// console.log("err====>", err);	482	// console.log("err====>", err);
483	this.showLoader = false;	483	this.showLoader = false;
484	this.loadingSearch = false;	484	this.loadingSearch = false;
485	this.snackbar = true;	485	this.snackbar = true;
486	this.text = error.response.data.message;	486	this.text = error.response.data.message;
487	if (error.response.status === 401) {	487	if (error.response.status === 401) {
488	this.$router.replace({ path: "/" });	488	this.$router.replace({ path: "/" });
489	this.$store.dispatch("setToken", null);	489	this.$store.dispatch("setToken", null);
490	this.$store.dispatch("Id", null);	490	this.$store.dispatch("Id", null);
491	}	491	}
492	});	492	});
493	},	493	},
494	editItem(item) {	494	editItem(item) {
495	console.log("item", item);	495	console.log("item", item);
496	this.editedIndex = this.gradeData.indexOf(item);	496	this.editedIndex = this.gradeData.indexOf(item);
497	this.editedItem = Object.assign({}, item);	497	this.editedItem = Object.assign({}, item);
498	this.editedItem.date =	498	this.editedItem.date =
499	this.editedItem.date != undefined	499	this.editedItem.date != undefined
500	? (this.editedItem.date = this.editedItem.date.substring(0, 10))	500	? (this.editedItem.date = this.editedItem.date.substring(0, 10))
501	: (this.editedItem.date = "");	501	: (this.editedItem.date = "");
502	this.editGradeDialog = true;	502	this.editGradeDialog = true;
503	},	503	},
504	profile(item) {	504	profile(item) {
505	this.editedIndex = this.gradeData.indexOf(item);	505	this.editedIndex = this.gradeData.indexOf(item);
506	this.editedItem = Object.assign({}, item);	506	this.editedItem = Object.assign({}, item);
507	this.viewGradeDialog = true;	507	this.viewGradeDialog = true;
508	},	508	},
509	deleteGrade(item) {	509	deleteGrade(item) {
510	let deleteGrade = {	510	let deleteGrade = {
511	gradeId: item._id	511	gradeId: item._id
512	};	512	};
513	http()	513	http()
514	.delete(	514	.delete(
515	"/deleteGrade",	515	"/deleteGrade",
516	confirm("Are you sure you want to Delete this?") && {	516	confirm("Are you sure you want to Delete this?") && {
517	params: deleteGrade	517	params: deleteGrade
518	}	518	}
519	)	519	)
520	.then(response => {	520	.then(response => {
521	this.snackbar = true;	521	this.snackbar = true;
522	this.text = response.data.message;	522	this.text = response.data.message;
523	this.color = "green";	523	this.color = "green";
524	this.getGradeList();	524	this.getGradeList();
525	})	525	})
526	.catch(error => {	526	.catch(error => {
527	this.loading = false;	527	this.loading = false;
528	this.snackbar = true;	528	this.snackbar = true;
529	this.color = "error";	529	this.color = "error";
530	this.text = error.response.data.message;	530	this.text = error.response.data.message;
531	});	531	});
532	},	532	},
533	close() {	533	close() {
534	this.editGradeDialog = false;	534	this.editGradeDialog = false;
535	},	535	},
536	submit() {	536	submit() {
537	if (this.$refs.form.validate()) {	537	if (this.$refs.form.validate()) {
538	this.loading = true;	538	this.loading = true;
539	http()	539	http()
540	.post("/createGrade", this.addGrade)	540	.post("/createGrade", this.addGrade)
541	.then(response => {	541	.then(response => {
542	this.snackbar = true;	542	this.snackbar = true;
543	this.text = response.data.message;	543	this.text = response.data.message;
544	this.color = "green";	544	this.color = "green";
545	this.addGradeDialog = false;	545	this.addGradeDialog = false;
546	this.loading = false;	546	this.loading = false;
547	this.clear();	547	this.clear();
548	this.getGradeList();	548	this.getGradeList();
549	})	549	})
550	.catch(error => {	550	.catch(error => {
551	this.snackbar = true;	551	this.snackbar = true;
552	this.text = error.response.data.message;	552	this.text = error.response.data.message;
553	this.color = "red";	553	this.color = "red";
554	this.loading = false;	554	this.loading = false;
555	});	555	});
556	}	556	}
557	},	557	},
558	clear() {	558	clear() {
559	this.$refs.form.reset();	559	this.$refs.form.reset();
560	this.disable = false;	560	this.disable = false;
561	this.loading = false;	561	this.loading = false;
562	},	562	},
563	save() {	563	save() {
564	if (this.$refs.formEditGrade.validate()) {	564	if (this.$refs.formEditGrade.validate()) {
565	this.editedItem.gradeId = this.editedItem._id;	565	this.editedItem.gradeId = this.editedItem._id;
566	http()	566	http()
567	.put("/updateGrade", this.editedItem)	567	.put("/updateGrade", this.editedItem)
568	.then(response => {	568	.then(response => {
569	this.snackbar = true;	569	this.snackbar = true;
570	this.text = response.data.message;	570	this.text = response.data.message;
571	this.color = "green";	571	this.color = "green";
572	this.getGradeList();	572	this.getGradeList();
573	this.close();	573	this.close();
574	})	574	})
575	.catch(error => {	575	.catch(error => {
576	this.snackbar = true;	576	this.snackbar = true;
577	this.text = error.response.data.message;	577	this.text = error.response.data.message;
578	this.color = "red";	578	this.color = "red";
579	});	579	});
580	}	580	}
581	},	581	},
582	displaySearch() {	582	displaySearch() {
583	(this.show = false), (this.showSearch = true);	583	(this.show = false), (this.showSearch = true);
584	},	584	},
585	closeSearch() {	585	closeSearch() {
586	this.showSearch = false;	586	this.showSearch = false;
587	this.show = true;	587	this.show = true;
588	this.search = "";	588	this.search = "";
589	}	589	}
590	},	590	},
591	mounted() {	591	mounted() {
592	this.token = this.$store.state.token;	592	this.token = this.$store.state.token;
593	this.getGradeList();	593	this.getGradeList();
594	}	594	}
595	};	595	};
596	</script>	596	</script>

src/pages/Gallery/gallery.vue

Diff comments View file @8c3acf4

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

src/pages/Mark/markDistribution.vue

Diff comments View file @8c3acf4

1	<template>	1	<template>
2	<v-container fluid class="body-color">	2	<v-container fluid class="body-color">
3	<!-- **** EDIT Mark Distribution **** -->	3	<!-- **** EDIT Mark Distribution **** -->
4	<v-dialog v-model="editMarkDistributionDialog" max-width="500px">	4	<v-dialog v-model="editMarkDistributionDialog" max-width="500px">
5	<v-card flat class="card-style pa-2" dark>	5	<v-card flat class="card-style pa-2" dark>
6	<v-layout>	6	<v-layout>
7	<v-flex xs12>	7	<v-flex xs12>
8	<label class="title text-xs-center">Edit Class</label>	8	<label class="title text-xs-center">Edit Mark Distribution</label>
9	<v-icon size="24" class="right" @click="editMarkDistributionDialog = false">cancel</v-icon>	9	<v-icon size="24" class="right" @click="editMarkDistributionDialog = 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 xs4 class="pt-4 subheading">	16	<v-flex xs4 class="pt-4 subheading">
17	<label class="right">Mark Distribution:</label>	17	<label class="right">Mark Distribution:</label>
18	</v-flex>	18	</v-flex>
19	<v-flex xs8 sm6 class="ml-3">	19	<v-flex xs8 sm6 class="ml-3">
20	<v-text-field	20	<v-text-field
21	v-model="editedItem.distributionType"	21	v-model="editedItem.distributionType"
22	placeholder="fill your Distribution Type"	22	placeholder="fill your Distribution Type"
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 xs4 class="pt-4 subheading">	29	<v-flex xs4 class="pt-4 subheading">
30	<label class="right">Mark Value:</label>	30	<label class="right">Mark Value:</label>
31	</v-flex>	31	</v-flex>
32	<v-flex xs8 sm6 class="ml-3">	32	<v-flex xs8 sm6 class="ml-3">
33	<v-text-field placeholder="fill your Mark Value" v-model="editedItem.markValue"></v-text-field>	33	<v-text-field placeholder="fill your Mark Value" v-model="editedItem.markValue"></v-text-field>
34	</v-flex>	34	</v-flex>
35	</v-layout>	35	</v-layout>
36	</v-flex>	36	</v-flex>
37	<v-layout>	37	<v-layout>
38	<v-flex xs12 sm11>	38	<v-flex xs12 sm11>
39	<v-card-actions>	39	<v-card-actions>
40	<v-spacer></v-spacer>	40	<v-spacer></v-spacer>
41	<v-btn round dark @click="save" class="add-button">Save</v-btn>	41	<v-btn round dark @click="save" class="add-button">Save</v-btn>
42	</v-card-actions>	42	</v-card-actions>
43	</v-flex>	43	</v-flex>
44	</v-layout>	44	</v-layout>
45	</v-container>	45	</v-container>
46	</v-form>	46	</v-form>
47	</v-card>	47	</v-card>
48	</v-dialog>	48	</v-dialog>
49	<!-- **** MARK DISTRIBUTATION TABLE **** -->	49	<!-- **** MARK DISTRIBUTATION TABLE **** -->
50	<v-toolbar color="transparent" flat>	50	<v-toolbar color="transparent" flat>
51	<v-btn	51	<v-btn
52	fab	52	fab
53	dark	53	dark
54	class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"	54	class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
55	small	55	small
56	@click="addMarkDistributionDialog = true"	56	@click="addMarkDistributionDialog = true"
57	>	57	>
58	<v-icon dark>add</v-icon>	58	<v-icon dark>add</v-icon>
59	</v-btn>	59	</v-btn>
60	<v-btn	60	<v-btn
61	round	61	round
62	class="open-dialog-button hidden-sm-only hidden-xs-only"	62	class="open-dialog-button hidden-sm-only hidden-xs-only"
63	dark	63	dark
64	@click="addMarkDistributionDialog = true"	64	@click="addMarkDistributionDialog = true"
65	>	65	>
66	<v-icon class="white--text pr-1" size="20">add</v-icon>Add Mark Distribution	66	<v-icon class="white--text pr-1" size="20">add</v-icon>Add Mark Distribution
67	</v-btn>	67	</v-btn>
68	<v-spacer></v-spacer>	68	<v-spacer></v-spacer>
69	<v-card-title class="body-1" v-show="show">	69	<v-card-title class="body-1" v-show="show">
70	<v-btn icon large flat @click="displaySearch">	70	<v-btn icon large flat @click="displaySearch">
71	<v-avatar size="27">	71	<v-avatar size="27">
72	<img src="/static/icon/search.png" alt="icon" />	72	<img src="/static/icon/search.png" alt="icon" />
73	</v-avatar>	73	</v-avatar>
74	</v-btn>	74	</v-btn>
75	</v-card-title>	75	</v-card-title>
76	<v-flex xs8 sm8 md3 lg2 v-show="showSearch">	76	<v-flex xs8 sm8 md3 lg2 v-show="showSearch">
77	<v-layout>	77	<v-layout>
78	<v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>	78	<v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>
79	<v-icon @click="closeSearch" color="error">close</v-icon>	79	<v-icon @click="closeSearch" color="error">close</v-icon>
80	</v-layout>	80	</v-layout>
81	</v-flex>	81	</v-flex>
82	</v-toolbar>	82	</v-toolbar>
83	<v-data-table	83	<v-data-table
84	:headers="headers"	84	:headers="headers"
85	:items="markList"	85	:items="markList"
86	:pagination.sync="pagination"	86	:pagination.sync="pagination"
87	:search="search"	87	:search="search"
88	>	88	>
89	<template slot="items" slot-scope="props">	89	<template slot="items" slot-scope="props">
90	<tr class="tr">	90	<tr class="tr">
91	<td class="td td-row text-xs-center">{{ props.index + 1 }}</td>	91	<td class="td td-row text-xs-center">{{ props.index + 1 }}</td>
92	<td class="td td-row text-xs-center">{{ props.item.distributionType }}</td>	92	<td class="td td-row text-xs-center">{{ props.item.distributionType }}</td>
93	<td class="td td-row text-xs-center linkCover">{{ props.item.markValue }}</td>	93	<td class="td td-row text-xs-center linkCover">{{ props.item.markValue }}</td>
94	<td class="td td-row text-xs-center">	94	<td class="td td-row text-xs-center">
95	<span>	95	<span>
96	<img	96	<img
97	style="cursor:pointer; width:20px; height:18px; "	97	style="cursor:pointer; width:20px; height:18px; "
98	class="mr-3"	98	class="mr-3"
99	@click="editItem(props.item)"	99	@click="editItem(props.item)"
100	src="/static/icon/edit.png"	100	src="/static/icon/edit.png"
101	/>	101	/>
102	<img	102	<img
103	style="cursor:pointer; width:20px; height:20px; "	103	style="cursor:pointer; width:20px; height:20px; "
104	@click="deleteItem(props.item)"	104	@click="deleteItem(props.item)"
105	src="/static/icon/delete.png"	105	src="/static/icon/delete.png"
106	/>	106	/>
107	</span>	107	</span>
108	</td>	108	</td>
109	</tr>	109	</tr>
110	</template>	110	</template>
111	<v-alert	111	<v-alert
112	slot="no-results"	112	slot="no-results"
113	:value="true"	113	:value="true"
114	color="error"	114	color="error"
115	icon="warning"	115	icon="warning"
116	>Your search for "{{ search }}" found no results.</v-alert>	116	>Your search for "{{ search }}" found no results.</v-alert>
117	</v-data-table>	117	</v-data-table>
118	<!-- **** ADD MULTIPLE REMINDER **** -->	118	<!-- **** ADD MULTIPLE REMINDER **** -->
119	<v-dialog v-model="addMarkDistributionDialog" max-width="500px">	119	<v-dialog v-model="addMarkDistributionDialog" max-width="500px">
120	<v-card flat class="card-style pa-2" dark>	120	<v-card flat class="card-style pa-2" dark>
121	<v-layout>	121	<v-layout>
122	<v-flex xs12>	122	<v-flex xs12>
123	<label class="title text-xs-center">Add Mark Distribution</label>	123	<label class="title text-xs-center">Add Mark Distribution</label>
124	<v-icon size="24" class="right" @click="addMarkDistributionDialog = false">cancel</v-icon>	124	<v-icon size="24" class="right" @click="addMarkDistributionDialog = false">cancel</v-icon>
125	</v-flex>	125	</v-flex>
126	</v-layout>	126	</v-layout>
127	<v-form ref="form" v-model="valid" lazy-validation>	127	<v-form ref="form" v-model="valid" lazy-validation>
128	<v-container fluid>	128	<v-container fluid>
129	<v-flex xs12>	129	<v-flex xs12>
130	<v-layout wrap>	130	<v-layout wrap>
131	<v-flex xs12 sm12 md4 class="pt-4 subheading">	131	<v-flex xs12 sm12 md4 class="pt-4 subheading">
132	<label class="right hidden-xs-only hidden-sm-only">Mark Distribution:</label>	132	<label class="right hidden-xs-only hidden-sm-only">Mark Distribution:</label>
133	<label class="hidden-md-only hidden-lg-only hidden-xl-only">Mark Distribution:</label>	133	<label class="hidden-md-only hidden-lg-only hidden-xl-only">Mark Distribution:</label>
134	</v-flex>	134	</v-flex>
135	<v-flex xs12 sm12 md7 class="ml-3">	135	<v-flex xs12 sm12 md7 class="ml-3">
136	<v-text-field	136	<v-text-field
137	v-model="mark.distributionType"	137	v-model="mark.distributionType"
138	placeholder="fill your Mark Distribution"	138	placeholder="fill your Mark Distribution"
139	:rules="markDistributionRules"	139	:rules="markDistributionRules"
140	></v-text-field>	140	></v-text-field>
141	</v-flex>	141	</v-flex>
142	</v-layout>	142	</v-layout>
143	</v-flex>	143	</v-flex>
144	<v-flex xs12>	144	<v-flex xs12>
145	<v-layout wrap>	145	<v-layout wrap>
146	<v-flex xs12 sm12 md4 class="pt-4 subheading">	146	<v-flex xs12 sm12 md4 class="pt-4 subheading">
147	<label class="right hidden-xs-only hidden-sm-only">Mark Value:</label>	147	<label class="right hidden-xs-only hidden-sm-only">Mark Value:</label>
148	<label class="hidden-md-only hidden-lg-only hidden-xl-only">Mark Value:</label>	148	<label class="hidden-md-only hidden-lg-only hidden-xl-only">Mark Value:</label>
149	</v-flex>	149	</v-flex>
150	<v-flex xs12 sm12 md7 class="ml-3">	150	<v-flex xs12 sm12 md7 class="ml-3">
151	<v-text-field	151	<v-text-field
152	placeholder="fill your Mark Value"	152	placeholder="fill your Mark Value"
153	:rules="markValueRules"	153	:rules="markValueRules"
154	v-model="mark.markValue"	154	v-model="mark.markValue"
155	type="text"	155	type="text"
156	required	156	required
157	></v-text-field>	157	></v-text-field>
158	</v-flex>	158	</v-flex>
159	</v-layout>	159	</v-layout>
160	</v-flex>	160	</v-flex>
161	<v-layout>	161	<v-layout>
162	<v-flex xs12 sm12>	162	<v-flex xs12 sm12>
163	<v-layout>	163	<v-layout>
164	<v-spacer></v-spacer>	164	<v-spacer></v-spacer>
165	<v-btn @click="clear" round class="clear-button" dark>clear</v-btn>	165	<v-btn @click="clear" round class="clear-button" dark>clear</v-btn>
166	<v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>	166	<v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
167	</v-layout>	167	</v-layout>
168	</v-flex>	168	</v-flex>
169	</v-layout>	169	</v-layout>
170	</v-container>	170	</v-container>
171	</v-form>	171	</v-form>
172	</v-card>	172	</v-card>
173	</v-dialog>	173	</v-dialog>
174	<v-snackbar	174	<v-snackbar
175	:timeout="timeout"	175	:timeout="timeout"
176	:top="y === 'top'"	176	:top="y === 'top'"
177	:right="x === 'right'"	177	:right="x === 'right'"
178	:vertical="mode === 'vertical'"	178	:vertical="mode === 'vertical'"
179	v-model="snackbar"	179	v-model="snackbar"
180	:color="color"	180	:color="color"
181	>{{ text }}</v-snackbar>	181	>{{ text }}</v-snackbar>
182	<div class="loader" v-if="showLoader">	182	<div class="loader" v-if="showLoader">
183	<v-progress-circular indeterminate color="white"></v-progress-circular>	183	<v-progress-circular indeterminate color="white"></v-progress-circular>
184	</div>	184	</div>
185	</v-container>	185	</v-container>
186	</template>	186	</template>
187		187
188	<script>	188	<script>
189	import http from "@/Services/http.js";	189	import http from "@/Services/http.js";
190	import Util from "@/util";	190	import Util from "@/util";
191		191
192	export default {	192	export default {
193	data: () => ({	193	data: () => ({
194	snackbar: false,	194	snackbar: false,
195	y: "top",	195	y: "top",
196	x: "right",	196	x: "right",
197	mode: "",	197	mode: "",
198	color: "",	198	color: "",
199	timeout: 5000,	199	timeout: 5000,
200	text: "",	200	text: "",
201	loading: false,	201	loading: false,
202	search: "",	202	search: "",
203	showLoader: false,	203	showLoader: false,
204	show: true,	204	show: true,
205	showSearch: false,	205	showSearch: false,
206	editMarkDistributionDialog: false,	206	editMarkDistributionDialog: false,
207	addMarkDistributionDialog: false,	207	addMarkDistributionDialog: false,
208	valid: true,	208	valid: true,
209	isActive: true,	209	isActive: true,
210	newActive: false,	210	newActive: false,
211	pagination: {	211	pagination: {
212	rowsPerPage: 15	212	rowsPerPage: 15
213	},	213	},
214	markDistributionRules: [v => !!v \|\| " Mark Distribution type is required"],	214	markDistributionRules: [v => !!v \|\| " Mark Distribution type is required"],
215	markValueRules: [v => !!v \|\| "Mark Value is required"],	215	markValueRules: [v => !!v \|\| "Mark Value is required"],
216	headers: [	216	headers: [
217	{	217	{
218	text: "No",	218	text: "No",
219	align: "center",	219	align: "center",
220	sortable: false,	220	sortable: false,
221	value: "No"	221	value: "No"
222	},	222	},
223	{	223	{
224	text: " Mark Distribution Type",	224	text: " Mark Distribution Type",
225	value: " distributionType",	225	value: " distributionType",
226	sortable: false,	226	sortable: false,
227	align: "center"	227	align: "center"
228	},	228	},
229	{	229	{
230	text: " Mark Value",	230	text: " Mark Value",
231	value: "markValue",	231	value: "markValue",
232	sortable: false,	232	sortable: false,
233	align: "center"	233	align: "center"
234	},	234	},
235	{ text: "Action", value: "", sortable: false, align: "center" }	235	{ text: "Action", value: "", sortable: false, align: "center" }
236	],	236	],
237	markList: [],	237	markList: [],
238	editedIndex: -1,	238	editedIndex: -1,
239	mark: {},	239	mark: {},
240	editedItem: {},	240	editedItem: {},
241	token: ""	241	token: ""
242	}),	242	}),
243	methods: {	243	methods: {
244	getMarkDistributions() {	244	getMarkDistributions() {
245	this.showLoader = true;	245	this.showLoader = true;
246	http()	246	http()
247	.get("/getMarkDistributionsList", {	247	.get("/getMarkDistributionsList", {
248	headers: { Authorization: "Bearer " + this.token }	248	headers: { Authorization: "Bearer " + this.token }
249	})	249	})
250	.then(response => {	250	.then(response => {
251	this.markList = response.data.data;	251	this.markList = response.data.data;
252	this.showLoader = false;	252	this.showLoader = false;
253	})	253	})
254	.catch(error => {	254	.catch(error => {
255	this.showLoader = false;	255	this.showLoader = false;
256	// if (error.response.status === 401) {	256	// if (error.response.status === 401) {
257	// this.$router.replace({ path: "/" });	257	// this.$router.replace({ path: "/" });
258	// this.$store.dispatch("setToken", null);	258	// this.$store.dispatch("setToken", null);
259	// this.$store.dispatch("Id", null);	259	// this.$store.dispatch("Id", null);
260	// }	260	// }
261	});	261	});
262	},	262	},
263	editItem(item) {	263	editItem(item) {
264	this.editedIndex = this.markList.indexOf(item);	264	this.editedIndex = this.markList.indexOf(item);
265	this.editedItem = Object.assign({}, item);	265	this.editedItem = Object.assign({}, item);
266	this.editMarkDistributionDialog = true;	266	this.editMarkDistributionDialog = true;
267	},	267	},
268	deleteItem(item) {	268	deleteItem(item) {
269	let deleteParticularMark = {	269	let deleteParticularMark = {
270	markDistributionId: item._id	270	markDistributionId: item._id
271	};	271	};
272	http()	272	http()
273	.delete(	273	.delete(
274	"/deleteMarkDistribution",	274	"/deleteMarkDistribution",
275	confirm("Are you sure you want to delete this?") && {	275	confirm("Are you sure you want to delete this?") && {
276	params: deleteParticularMark	276	params: deleteParticularMark
277	}	277	}
278	)	278	)
279	.then(response => {	279	.then(response => {
280	this.snackbar = true;	280	this.snackbar = true;
281	this.text = response.data.message;	281	this.text = response.data.message;
282	this.getMarkDistributions();	282	this.getMarkDistributions();
283	})	283	})
284	.catch(error => {	284	.catch(error => {
285	console.log(error);	285	console.log(error);
286	});	286	});
287	},	287	},
288	close() {	288	close() {
289	this.editMarkDistributionDialog = false;	289	this.editMarkDistributionDialog = false;
290	},	290	},
291	submit() {	291	submit() {
292	if (this.$refs.form.validate()) {	292	if (this.$refs.form.validate()) {
293	this.loading = true;	293	this.loading = true;
294	http()	294	http()
295	.post("/createMarkDistribution", this.mark)	295	.post("/createMarkDistribution", this.mark)
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.getMarkDistributions();	299	this.getMarkDistributions();
300	this.clear();	300	this.clear();
301	this.addMarkDistributionDialog = false;	301	this.addMarkDistributionDialog = false;
302	this.loading = false;	302	this.loading = false;
303	})	303	})
304	.catch(error => {	304	.catch(error => {
305	this.snackbar = true;	305	this.snackbar = true;
306	this.text = error.response.data.message;	306	this.text = error.response.data.message;
307	this.loading = false;	307	this.loading = false;
308	});	308	});
309	}	309	}
310	},	310	},
311	clear() {	311	clear() {
312	this.$refs.form.reset();	312	this.$refs.form.reset();
313	},	313	},
314	save() {	314	save() {
315	(this.editedItem.markDistributionId = this.editedItem._id),	315	(this.editedItem.markDistributionId = this.editedItem._id),
316	http()	316	http()
317	.put("/updateMarkDistribution", this.editedItem)	317	.put("/updateMarkDistribution", this.editedItem)
318	.then(response => {	318	.then(response => {
319	this.snackbar = true;	319	this.snackbar = true;
320	this.text = "Successfully Edit Notification";	320	this.text = "Successfully Edit Notification";
321	this.getMarkDistributions();	321	this.getMarkDistributions();
322	this.close();	322	this.close();
323	})	323	})
324	.catch(error => {	324	.catch(error => {
325	console.log(error);	325	console.log(error);
326	});	326	});
327	},	327	},
328	displaySearch() {	328	displaySearch() {
329	(this.show = false), (this.showSearch = true);	329	(this.show = false), (this.showSearch = true);
330	},	330	},
331	closeSearch() {	331	closeSearch() {
332	this.showSearch = false;	332	this.showSearch = false;
333	this.show = true;	333	this.show = true;
334	this.search = "";	334	this.search = "";
335	}	335	}
336	},	336	},
337	mounted() {	337	mounted() {
338	this.token = this.$store.state.token;	338	this.token = this.$store.state.token;
339	this.getMarkDistributions();	339	this.getMarkDistributions();
340	}	340	}
341	};	341	};
342	</script>	342	</script>
343	<style scoped>	343	<style scoped>

src/pages/Section/section.vue

Diff comments View file @8c3acf4

1	<template>	1	<template>
2	<v-container fluid class="body-color">	2	<v-container fluid class="body-color">
3	<v-dialog v-model="editSectionDialog" max-width="460px">	3	<v-dialog v-model="editSectionDialog" max-width="460px">
4	<v-card flat class="card-style pa-2" dark>	4	<v-card flat class="card-style pa-2" dark>
5	<v-layout>	5	<v-layout>
6	<v-flex xs12>	6	<v-flex xs12>
7	<label class="title text-xs-center">Edit Section</label>	7	<label class="title text-xs-center">Edit Section</label>
8	<v-icon size="24" class="right" @click="editSectionDialog = false">cancel</v-icon>	8	<v-icon size="24" class="right" @click="editSectionDialog = false">cancel</v-icon>
9	</v-flex>	9	</v-flex>
10	</v-layout>	10	</v-layout>
11	<v-container fluid>	11	<v-container fluid>
12	<v-layout wrap justify-center>	12	<v-layout wrap justify-center>
13	<v-flex xs12 sm12>	13	<v-flex xs12 sm12>
14	<v-form>	14	<v-form>
15	<v-layout>	15	<v-layout>
16	<v-flex xs5 sm4 class="pt-4 subheading">	16	<v-flex xs5 sm4 class="pt-4 subheading">
17	<label class="right">Class :</label>	17	<label class="right">Class :</label>
18	</v-flex>	18	</v-flex>
19	<v-flex xs7 sm8>	19	<v-flex xs7 sm8>
20	<v-autocomplete	20	<v-autocomplete
21	:items="addclass"	21	:items="addclass"
22	:label="editedItem.classData.classNum"	22	:label="editedItem.classData.classNum"
23	v-model="editItem.classId"	23	v-model="editItem.classId"
24	item-text="classNum"	24	item-text="classNum"
25	item-value="_id"	25	item-value="_id"
26	class="ml-2"	26	class="ml-2"
27	></v-autocomplete>	27	></v-autocomplete>
28	</v-flex>	28	</v-flex>
29	</v-layout>	29	</v-layout>
30	<v-layout>	30	<v-layout>
31	<v-flex xs5 sm4 class="pt-4 subheading">	31	<v-flex xs5 sm4 class="pt-4 subheading">
32	<h5 class="right my-1 hidden-xs-only hidden-sm-only">Section Name :</h5>	32	<h5 class="right my-1 hidden-xs-only hidden-sm-only">Section Name :</h5>
33	<h5 class="right my-1 hidden-lg-only hidden-md-only hidden-xl-only">Name :</h5>	33	<h5 class="right my-1 hidden-lg-only hidden-md-only hidden-xl-only">Name :</h5>
34	</v-flex>	34	</v-flex>
35	<v-flex xs7 sm8>	35	<v-flex xs7 sm8>
36	<v-autocomplete	36	<v-autocomplete
37	v-model="editedItem.name"	37	v-model="editedItem.name"
38	placeholder="fill your Section Name"	38	placeholder="fill your Section Name"
39	:items="SectionName"	39	:items="SectionName"
40	class="ml-2"	40	class="ml-2"
41	></v-autocomplete>	41	></v-autocomplete>
42	</v-flex>	42	</v-flex>
43	</v-layout>	43	</v-layout>
44	<v-layout>	44	<v-layout>
45	<v-flex xs5 sm4 class="pt-4 subheading">	45	<v-flex xs5 sm4 class="pt-4 subheading">
46	<h5 class="right my-1 hidden-xs-only hidden-sm-only">Incharge :</h5>	46	<h5 class="right my-1 hidden-xs-only hidden-sm-only">Incharge :</h5>
47	<h5 class="right my-1 hidden-lg-only hidden-md-only hidden-xl-only">Incharge :</h5>	47	<h5 class="right my-1 hidden-lg-only hidden-md-only hidden-xl-only">Incharge :</h5>
48	</v-flex>	48	</v-flex>
49	<v-flex xs7 sm8>	49	<v-flex xs7 sm8>
50	<v-select	50	<v-select
51	:items="teacherList"	51	:items="teacherList"
52	v-model="editedItem.classInchargeId"	52	v-model="editedItem.classInchargeId"
53	:label="editedItem.teacherData[0].name"	53	:label="editedItem.teacherData[0].name"
54	item-text="name"	54	item-text="name"
55	item-value="_id"	55	item-value="_id"
56	class="ml-2"	56	class="ml-2"
57	></v-select>	57	></v-select>
58	</v-flex>	58	</v-flex>
59	</v-layout>	59	</v-layout>
60	<v-flex xs12>	60	<v-flex xs12>
61	<v-card-actions>	61	<v-card-actions>
62	<v-btn round dark @click.native="closeSectionDialog" class="add-button">Cancel</v-btn>	62	<v-btn round dark @click.native="closeSectionDialog" class="add-button">Cancel</v-btn>
63	<v-spacer></v-spacer>	63	<v-spacer></v-spacer>
64	<v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn>	64	<v-btn round dark @click="save" :loading="editLoading" class="add-button">Save</v-btn>
65	</v-card-actions>	65	</v-card-actions>
66	</v-flex>	66	</v-flex>
67	</v-form>	67	</v-form>
68	</v-flex>	68	</v-flex>
69	</v-layout>	69	</v-layout>
70	</v-container>	70	</v-container>
71	</v-card>	71	</v-card>
72	</v-dialog>	72	</v-dialog>
73		73
74	<!-- **** PROFILE VIEW SECTION DATA **** -->	74	<!-- **** PROFILE VIEW SECTION DATA **** -->
75		75
76	<v-dialog v-model="viewSectionDialog" max-width="500px">	76	<v-dialog v-model="viewSectionDialog" max-width="500px">
77	<v-card flat class="card-style pa-3" dark>	77	<v-card flat class="card-style pa-3" dark>
78	<v-layout>	78	<v-layout>
79	<v-flex xs12>	79	<v-flex xs12>
80	<label class="title text-xs-center">View Section</label>	80	<label class="title text-xs-center">View Section</label>
81	<v-icon size="24" class="right" @click="viewSectionDialog = false">cancel</v-icon>	81	<v-icon size="24" class="right" @click="viewSectionDialog = false">cancel</v-icon>
82	</v-flex>	82	</v-flex>
83	</v-layout>	83	</v-layout>
84	<v-card-text>	84	<v-card-text>
85	<v-container grid-list-md>	85	<v-container grid-list-md>
86	<v-layout wrap>	86	<v-layout wrap>
87	<v-flex>	87	<v-flex>
88	<v-layout>	88	<v-layout>
89	<v-flex xs7 sm6>	89	<v-flex xs7 sm6>
90	<h5 class="right my-1 hidden-xs-only hidden-sm-only">	90	<h5 class="right my-1 hidden-xs-only hidden-sm-only">
91	<b>Class Name :</b>	91	<b>Class Name :</b>
92	</h5>	92	</h5>
93	<h5 class="right my-1 hidden-lg-only hidden-md-only hidden-xl-only">	93	<h5 class="right my-1 hidden-lg-only hidden-md-only hidden-xl-only">
94	<b>Class :</b>	94	<b>Class :</b>
95	</h5>	95	</h5>
96	</v-flex>	96	</v-flex>
97	<v-flex sm6 xs5>	97	<v-flex sm6 xs5>
98	<h5 class="my-1">{{ editedItem.classData.classNum }}</h5>	98	<h5 class="my-1">{{ editedItem.classData.classNum }}</h5>
99	</v-flex>	99	</v-flex>
100	</v-layout>	100	</v-layout>
101	<v-layout>	101	<v-layout>
102	<v-flex xs7 sm6>	102	<v-flex xs7 sm6>
103	<h5 class="right my-1">	103	<h5 class="right my-1">
104	<b>Section Name :</b>	104	<b>Section Name :</b>
105	</h5>	105	</h5>
106	</v-flex>	106	</v-flex>
107	<v-flex sm6 xs5>	107	<v-flex sm6 xs5>
108	<h5 class="my-1">{{ editedItem.name }}</h5>	108	<h5 class="my-1">{{ editedItem.name }}</h5>
109	</v-flex>	109	</v-flex>
110	</v-layout>	110	</v-layout>
111	<v-layout>	111	<v-layout>
112	<v-flex xs7 sm6>	112	<v-flex xs7 sm6>
113	<h5 class="right my-1 hidden-xs-only hidden-sm-only">	113	<h5 class="right my-1 hidden-xs-only hidden-sm-only">
114	<b>Class Incharge :</b>	114	<b>Class Incharge :</b>
115	</h5>	115	</h5>
116	<h5 class="right my-1 hidden-lg-only hidden-md-only hidden-xl-only">	116	<h5 class="right my-1 hidden-lg-only hidden-md-only hidden-xl-only">
117	<b>Incharge :</b>	117	<b>Incharge :</b>
118	</h5>	118	</h5>
119	</v-flex>	119	</v-flex>
120	<v-flex sm6 xs5>	120	<v-flex sm6 xs5>
121	<h5 class="my-1">{{ editedItem.teacherData[0].name }}</h5>	121	<h5 class="my-1">{{ editedItem.teacherData[0].name }}</h5>
122	</v-flex>	122	</v-flex>
123	</v-layout>	123	</v-layout>
124	<v-layout>	124	<v-layout>
125	<v-flex xs7 sm6>	125	<v-flex xs7 sm6>
126	<h5 class="right my-1">	126	<h5 class="right my-1">
127	<b>Session :</b>	127	<b>Session :</b>
128	</h5>	128	</h5>
129	</v-flex>	129	</v-flex>
130	<v-flex sm6 xs5>	130	<v-flex sm6 xs5>
131	<h5 class="my-1">{{ editedItem.session }}</h5>	131	<h5 class="my-1">{{ editedItem.session }}</h5>
132	</v-flex>	132	</v-flex>
133	</v-layout>	133	</v-layout>
134	</v-flex>	134	</v-flex>
135	</v-layout>	135	</v-layout>
136	</v-container>	136	</v-container>
137	</v-card-text>	137	</v-card-text>
138	</v-card>	138	</v-card>
139	</v-dialog>	139	</v-dialog>
140	<!-- **** Section Table **** -->	140	<!-- **** Section Table **** -->
141	<v-toolbar color="transparent" flat>	141	<v-toolbar color="transparent" flat>
142	<v-btn	142	<v-btn
143	fab	143	fab
144	dark	144	dark
145	class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"	145	class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
146	small	146	small
147	@click="addSectionDialog = true"	147	@click="addSectionDialog = true"
148	>	148	>
149	<v-icon dark>add</v-icon>	149	<v-icon dark>add</v-icon>
150	</v-btn>	150	</v-btn>
151	<v-btn	151	<v-btn
152	round	152	round
153	class="open-dialog-button hidden-sm-only hidden-xs-only"	153	class="open-dialog-button hidden-sm-only hidden-xs-only"
154	dark	154	dark
155	@click="addSectionDialog = true"	155	@click="addSectionDialog = true"
156	>	156	>
157	<v-icon class="white--text pr-1" size="20">add</v-icon>Add Section	157	<v-icon class="white--text pr-1" size="20">add</v-icon>Add Section
158	</v-btn>	158	</v-btn>
159	<v-spacer></v-spacer>	159	<v-spacer></v-spacer>
160	<v-card-title class="body-1" v-show="show">	160	<v-card-title class="body-1" v-show="show">
161	<v-btn icon large flat @click="displaySearch">	161	<v-btn icon large flat @click="displaySearch">
162	<v-avatar size="27">	162	<v-avatar size="27">
163	<img src="/static/icon/search.png" alt="icon" />	163	<img src="/static/icon/search.png" alt="icon" />
164	</v-avatar>	164	</v-avatar>
165	</v-btn>	165	</v-btn>
166	</v-card-title>	166	</v-card-title>
167	<v-flex xs8 v-show="showSearch">	167	<v-flex xs8 v-show="showSearch">
168	<v-layout>	168	<v-layout>
169	<v-text-field	169	<v-text-field
170	v-model="search"	170	v-model="search"
171	label="Search"	171	label="Search"
172	prepend-inner-icon="search"	172	prepend-inner-icon="search"
173	color="primary"	173	color="primary"
174	style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important"	174	style="transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); !important"
175	></v-text-field>	175	></v-text-field>
176	<v-icon @click="closeSearch" color="error">close</v-icon>	176	<v-icon @click="closeSearch" color="error">close</v-icon>
177	</v-layout>	177	</v-layout>
178	</v-flex>	178	</v-flex>
179	</v-toolbar>	179	</v-toolbar>
180	<v-data-table	180	<v-data-table
181	:headers="headers"	181	:headers="headers"
182	:items="sectionList"	182	:items="sectionList"
183	:pagination.sync="pagination"	183	:pagination.sync="pagination"
184	:search="search"	184	:search="search"
185	>	185	>
186	<template slot="items" slot-scope="props">	186	<template slot="items" slot-scope="props">
187	<tr class="tr">	187	<tr class="tr">
188	<td class="td td-row">{{ props.index + 1 }}</td>	188	<td class="td td-row">{{ props.index + 1 }}</td>
189	<td class="text-xs-center td td-row">{{ props.item.classData.classNum }}</td>	189	<td class="text-xs-center td td-row">{{ props.item.classData.classNum }}</td>
190	<td class="text-xs-center td td-row">{{ props.item.name }}</td>	190	<td class="text-xs-center td td-row">{{ props.item.name }}</td>
191	<td class="text-xs-center td td-row">{{ props.item.session }}</td>	191	<td class="text-xs-center td td-row">{{ props.item.session }}</td>
192	<td class="text-xs-center td td-row">	192	<td class="text-xs-center td td-row">
193	<span>	193	<span>
194	<v-tooltip top>	194	<v-tooltip top>
195	<img	195	<img
196	slot="activator"	196	slot="activator"
197	style="cursor:pointer; width:25px; height:25px;"	197	style="cursor:pointer; width:25px; height:25px;"
198	class="mr-3"	198	class="mr-3"
199	@click="profile(props.item)"	199	@click="profile(props.item)"
200	src="/static/icon/view.png"	200	src="/static/icon/view.png"
201	/>	201	/>
202	<span>View</span>	202	<span>View</span>
203	</v-tooltip>	203	</v-tooltip>
204	<v-tooltip top>	204	<v-tooltip top>
205	<img	205	<img
206	slot="activator"	206	slot="activator"
207	style="cursor:pointer; width:20px; height:18px; "	207	style="cursor:pointer; width:20px; height:18px; "
208	class="mr-3"	208	class="mr-3"
209	@click="editItem(props.item)"	209	@click="editItem(props.item)"
210	src="/static/icon/edit.png"	210	src="/static/icon/edit.png"
211	/>	211	/>
212	<span>Edit</span>	212	<span>Edit</span>
213	</v-tooltip>	213	</v-tooltip>
214	<v-tooltip top>	214	<v-tooltip top>
215	<img	215	<img
216	slot="activator"	216	slot="activator"
217	style="cursor:pointer; width:20px; height:20px; "	217	style="cursor:pointer; width:20px; height:20px; "
218	@click="deleteItem(props.item)"	218	@click="deleteItem(props.item)"
219	src="/static/icon/delete.png"	219	src="/static/icon/delete.png"
220	class="mr-3"	220	class="mr-3"
221	/>	221	/>
222	<span>Delete</span>	222	<span>Delete</span>
223	</v-tooltip>	223	</v-tooltip>
224	</span>	224	</span>
225	</td>	225	</td>
226	</tr>	226	</tr>
227	</template>	227	</template>
228	<v-alert	228	<v-alert
229	slot="no-results"	229	slot="no-results"
230	:value="true"	230	:value="true"
231	color="error"	231	color="error"
232	icon="warning"	232	icon="warning"
233	>Your search for "{{ search }}" found no results.</v-alert>	233	>Your search for "{{ search }}" found no results.</v-alert>
234	</v-data-table>	234	</v-data-table>
235	<!-- </v-tab-item> -->	235	<!-- </v-tab-item> -->
236		236
237	<!-- **** ADD Students Dialog box**** -->	237	<!-- **** ADD Students Dialog box**** -->
238	<v-dialog v-model="addSectionDialog" max-width="400px">	238	<v-dialog v-model="addSectionDialog" max-width="400px">
239	<v-card flat class="card-style pa-2" dark>	239	<v-card flat class="card-style pa-2" dark>
240	<v-layout>	240	<v-layout>
241	<v-flex xs12>	241	<v-flex xs12>
242	<label class="title text-xs-center">Add Class</label>	242	<label class="title text-xs-center">Add Section</label>
243	<v-icon size="24" class="right" @click="addSectionDialog = false">cancel</v-icon>	243	<v-icon size="24" class="right" @click="addSectionDialog = false">cancel</v-icon>
244	</v-flex>	244	</v-flex>
245	</v-layout>	245	</v-layout>
246	<v-container fluid fill-height>	246	<v-container fluid fill-height>
247	<v-layout align-center>	247	<v-layout align-center>
248	<v-flex xs12>	248	<v-flex xs12>
249	<v-form ref="form" v-model="valid" lazy-validation>	249	<v-form ref="form" v-model="valid" lazy-validation>
250	<v-layout>	250	<v-layout>
251	<v-flex xs4 class="pt-4 subheading">	251	<v-flex xs4 class="pt-4 subheading">
252	<label class="right">Section :</label>	252	<label class="right">Section :</label>
253	</v-flex>	253	</v-flex>
254	<v-flex xs8 class="ml-3">	254	<v-flex xs8 class="ml-3">
255	<v-autocomplete	255	<v-autocomplete
256	v-model="sectionData.name"	256	v-model="sectionData.name"
257	placeholder="fill your Section Name"	257	placeholder="fill your Section Name"
258	:items="SectionName"	258	:items="SectionName"
259	:rules="nameRules"	259	:rules="nameRules"
260	required	260	required
261	></v-autocomplete>	261	></v-autocomplete>
262	</v-flex>	262	</v-flex>
263	</v-layout>	263	</v-layout>
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">Class :</label>	266	<label class="right">Class :</label>
267	</v-flex>	267	</v-flex>
268	<v-flex xs8 class="ml-3">	268	<v-flex xs8 class="ml-3">
269	<v-select	269	<v-select
270	:items="addclass"	270	:items="addclass"
271	label="Select Class"	271	label="Select Class"
272	v-model="sectionData.classNum"	272	v-model="sectionData.classNum"
273	item-text="classNum"	273	item-text="classNum"
274	item-value="_id"	274	item-value="_id"
275	name="Select Class"	275	name="Select Class"
276	:rules="classRules"	276	:rules="classRules"
277	required	277	required
278	></v-select>	278	></v-select>
279	</v-flex>	279	</v-flex>
280	</v-layout>	280	</v-layout>
281	<v-layout>	281	<v-layout>
282	<v-flex xs4 class="pt-4 subheading">	282	<v-flex xs4 class="pt-4 subheading">
283	<label class="right">Incharge :</label>	283	<label class="right">Incharge :</label>
284	</v-flex>	284	</v-flex>
285	<v-flex xs8 class="ml-3">	285	<v-flex xs8 class="ml-3">
286	<v-select	286	<v-select
287	:items="teacherList"	287	:items="teacherList"
288	label="Select Incharge"	288	label="Select Incharge"
289	v-model="sectionData.sectionId"	289	v-model="sectionData.sectionId"
290	item-text="name"	290	item-text="name"
291	item-value="_id"	291	item-value="_id"
292	name="Select Class"	292	name="Select Class"
293	:rules="inchargeRules"	293	:rules="inchargeRules"
294	required	294	required
295	></v-select>	295	></v-select>
296	</v-flex>	296	</v-flex>
297	</v-layout>	297	</v-layout>
298	<v-layout>	298	<v-layout>
299	<v-flex xs4 class="pt-4 subheading">	299	<v-flex xs4 class="pt-4 subheading">
300	<label class="right">Session:</label>	300	<label class="right">Session:</label>
301	</v-flex>	301	</v-flex>
302	<v-flex xs8 class="ml-3">	302	<v-flex xs8 class="ml-3">
303	<v-text-field	303	<v-text-field
304	v-model="sectionData.session"	304	v-model="sectionData.session"
305	placeholder="fill your Session"	305	placeholder="fill your Session"
306	name="name"	306	name="name"
307	type="text"	307	type="text"
308	:rules="sessionRules"	308	:rules="sessionRules"
309	required	309	required
310	></v-text-field>	310	></v-text-field>
311	</v-flex>	311	</v-flex>
312	</v-layout>	312	</v-layout>
313	<v-layout>	313	<v-layout>
314	<v-flex xs12 sm12>	314	<v-flex xs12 sm12>
315	<v-card-actions>	315	<v-card-actions>
316	<v-btn @click="clear" class="add-button" round dark>Clear</v-btn>	316	<v-btn @click="clear" class="add-button" round dark>Clear</v-btn>
317	<v-spacer></v-spacer>	317	<v-spacer></v-spacer>
318	<v-btn @click="submit" class="add-button" round dark :loading="loading">Add</v-btn>	318	<v-btn @click="submit" class="add-button" round dark :loading="loading">Add</v-btn>
319	</v-card-actions>	319	</v-card-actions>
320	</v-flex>	320	</v-flex>
321	</v-layout>	321	</v-layout>
322	</v-form>	322	</v-form>
323	</v-flex>	323	</v-flex>
324	</v-layout>	324	</v-layout>
325	</v-container>	325	</v-container>
326	</v-card>	326	</v-card>
327	</v-dialog>	327	</v-dialog>
328	<v-snackbar	328	<v-snackbar
329	:timeout="timeout"	329	:timeout="timeout"
330	:top="y === 'top'"	330	:top="y === 'top'"
331	:right="x === 'right'"	331	:right="x === 'right'"
332	:vertical="mode === 'vertical'"	332	:vertical="mode === 'vertical'"
333	v-model="snackbar"	333	v-model="snackbar"
334	:color="color"	334	:color="color"
335	>{{ text }}</v-snackbar>	335	>{{ text }}</v-snackbar>
336	<div class="loader" v-if="showLoader">	336	<div class="loader" v-if="showLoader">
337	<v-progress-circular indeterminate color="white"></v-progress-circular>	337	<v-progress-circular indeterminate color="white"></v-progress-circular>
338	</div>	338	</div>
339	</v-container>	339	</v-container>
340	</template>	340	</template>
341		341
342	<script>	342	<script>
343	import http from "@/Services/http.js";	343	import http from "@/Services/http.js";
344	// import { apiCollection } from "@/schoolApi/apiCollection";	344	// import { apiCollection } from "@/schoolApi/apiCollection";
345	// const getSectionData = apiCollection.get("posts");	345	// const getSectionData = apiCollection.get("posts");
346		346
347	export default {	347	export default {
348	data: () => ({	348	data: () => ({
349	snackbar: false,	349	snackbar: false,
350	y: "top",	350	y: "top",
351	x: "right",	351	x: "right",
352	mode: "",	352	mode: "",
353	timeout: 5000,	353	timeout: 5000,
354	text: "",	354	text: "",
355	color: "",	355	color: "",
356	show: true,	356	show: true,
357	showSearch: false,	357	showSearch: false,
358	showLoader: false,	358	showLoader: false,
359	loading: false,	359	loading: false,
360	date: null,	360	date: null,
361	search: "",	361	search: "",
362	editSectionDialog: false,	362	editSectionDialog: false,
363	viewSectionDialog: false,	363	viewSectionDialog: false,
364	valid: true,	364	valid: true,
365	validEdit: true,	365	validEdit: true,
366	addSectionDialog: false,	366	addSectionDialog: false,
367	editLoading: false,	367	editLoading: false,
368	details: [],	368	details: [],
369	pagination: {	369	pagination: {
370	rowsPerPage: 10	370	rowsPerPage: 10
371	},	371	},
372	nameRules: [v => !!v \|\| " Section Name is required"],	372	nameRules: [v => !!v \|\| " Section Name is required"],
373	classRules: [v => !!v \|\| " Class Name is required"],	373	classRules: [v => !!v \|\| " Class Name is required"],
374	sessionRules: [v => !!v \|\| " Session is required"],	374	sessionRules: [v => !!v \|\| " Session is required"],
375	inchargeRules: [v => !!v \|\| " Incharge Name is required"],	375	inchargeRules: [v => !!v \|\| " Incharge Name is required"],
376	SectionName: ["A", "B", "C", "D", "E", "F"],	376	SectionName: ["A", "B", "C", "D", "E", "F"],
377	headers: [	377	headers: [
378	{	378	{
379	text: "No",	379	text: "No",
380	align: "",	380	align: "",
381	sortable: false,	381	sortable: false,
382	value: "No"	382	value: "No"
383	},	383	},
384	{	384	{
385	text: "Class Name",	385	text: "Class Name",
386	value: "classData.classNum",	386	value: "classData.classNum",
387	sortable: false,	387	sortable: false,
388	align: "center"	388	align: "center"
389	},	389	},
390	{ text: "Section Name", value: "name", sortable: false, align: "center" },	390	{ text: "Section Name", value: "name", sortable: false, align: "center" },
391	{ text: "Session", value: "session", sortable: false, align: "center" },	391	{ text: "Session", value: "session", sortable: false, align: "center" },
392	{ text: "Action", value: "", sortable: false, align: "center" }	392	{ text: "Action", value: "", sortable: false, align: "center" }
393	],	393	],
394	sectionList: [],	394	sectionList: [],
395	addclass: [],	395	addclass: [],
396	teacherList: [],	396	teacherList: [],
397	select: "",	397	select: "",
398	selectId: "",	398	selectId: "",
399	token: "",	399	token: "",
400	editedIndex: -1,	400	editedIndex: -1,
401	editedItem: {	401	editedItem: {
402	classData: {	402	classData: {
403	classNum: ""	403	classNum: ""
404	},	404	},
405	teacherData: [	405	teacherData: [
406	{	406	{
407	name: ""	407	name: ""
408	}	408	}
409	]	409	]
410	// name: "",	410	// name: "",
411	// session: new Date().getFullYear()	411	// session: new Date().getFullYear()
412	},	412	},
413	sectionData: {	413	sectionData: {
414	session: new Date().getFullYear()	414	session: new Date().getFullYear()
415	}	415	}
416	}),	416	}),
417	methods: {	417	methods: {
418	getSectionList() {	418	getSectionList() {
419	// const { data } = await getSectionData.get();	419	// const { data } = await getSectionData.get();
420	this.showLoader = true;	420	this.showLoader = true;
421	http()	421	http()
422	.get("/getAllSections", {	422	.get("/getAllSections", {
423	headers: { Authorization: "Bearer " + this.token }	423	headers: { Authorization: "Bearer " + this.token }
424	})	424	})
425	.then(response => {	425	.then(response => {
426	this.sectionList = response.data.data;	426	this.sectionList = response.data.data;
427	this.showLoader = false;	427	this.showLoader = false;
428	// console.log("getAllSections=====>",response.data.data)	428	// console.log("getAllSections=====>",response.data.data)
429	})	429	})
430	.catch(error => {	430	.catch(error => {
431	this.showLoader = false;	431	this.showLoader = false;
432	if (error.response.status === 401) {	432	if (error.response.status === 401) {
433	this.$router.replace({ path: "/" });	433	this.$router.replace({ path: "/" });
434	this.$store.dispatch("setToken", null);	434	this.$store.dispatch("setToken", null);
435	this.$store.dispatch("Id", null);	435	this.$store.dispatch("Id", null);
436	}	436	}
437	});	437	});
438	},	438	},
439	editItem(item) {	439	editItem(item) {
440	this.editedIndex = this.sectionList.indexOf(item);	440	this.editedIndex = this.sectionList.indexOf(item);
441	this.editedItem = Object.assign({}, item);	441	this.editedItem = Object.assign({}, item);
442	this.editSectionDialog = true;	442	this.editSectionDialog = true;
443	},	443	},
444	profile(item) {	444	profile(item) {
445	this.editedIndex = this.sectionList.indexOf(item);	445	this.editedIndex = this.sectionList.indexOf(item);
446	this.editedItem = Object.assign({}, item);	446	this.editedItem = Object.assign({}, item);
447	this.viewSectionDialog = true;	447	this.viewSectionDialog = true;
448	},	448	},
449	deleteItem(item) {	449	deleteItem(item) {
450	let deleteStudent = {	450	let deleteStudent = {
451	sectionId: item._id	451	sectionId: item._id
452	};	452	};
453	http()	453	http()
454	.delete(	454	.delete(
455	"/deleteSection",	455	"/deleteSection",
456	confirm("Are you sure you want to delete this?") && {	456	confirm("Are you sure you want to delete this?") && {
457	params: deleteStudent	457	params: deleteStudent
458	}	458	}
459	)	459	)
460	.then(response => {	460	.then(response => {
461	this.snackbar = true;	461	this.snackbar = true;
462	this.text = response.data.message;	462	this.text = response.data.message;
463	this.color = "green";	463	this.color = "green";
464	this.getSectionList();	464	this.getSectionList();
465	})	465	})
466	.catch(error => {	466	.catch(error => {
467	this.snackbar = true;	467	this.snackbar = true;
468	this.text = error.response.data.message;	468	this.text = error.response.data.message;
469	this.color = "green";	469	this.color = "green";
470	});	470	});
471	},	471	},
472	closeSectionDialog() {	472	closeSectionDialog() {
473	this.editSectionDialog = false;	473	this.editSectionDialog = false;
474	},	474	},
475	closeviewSectionDialog() {	475	closeviewSectionDialog() {
476	this.viewSectionDialog = false;	476	this.viewSectionDialog = false;
477	},	477	},
478	submit() {	478	submit() {
479	if (this.$refs.form.validate()) {	479	if (this.$refs.form.validate()) {
480	let addSection = {	480	let addSection = {
481	name: this.sectionData.name,	481	name: this.sectionData.name,
482	classId: this.sectionData.classNum,	482	classId: this.sectionData.classNum,
483	session: this.sectionData.session,	483	session: this.sectionData.session,
484	classInchargeId: this.sectionData.sectionId	484	classInchargeId: this.sectionData.sectionId
485	};	485	};
486	this.loading = true;	486	this.loading = true;
487	http()	487	http()
488	.post("/createSection", addSection)	488	.post("/createSection", addSection)
489	.then(response => {	489	.then(response => {
490	this.getSectionList();	490	this.getSectionList();
491	this.snackbar = true;	491	this.snackbar = true;
492	this.color = "green";	492	this.color = "green";
493	this.text = "New Section added successfully";	493	this.text = "New Section added successfully";
494	this.clear();	494	this.clear();
495	this.addSectionDialog = false;	495	this.addSectionDialog = false;
496	this.loading = false;	496	this.loading = false;
497	})	497	})
498	.catch(error => {	498	.catch(error => {
499	this.snackbar = true;	499	this.snackbar = true;
500	this.color = "error";	500	this.color = "error";
501	this.text = error.response.data.message;	501	this.text = error.response.data.message;
502	this.loading = false;	502	this.loading = false;
503	});	503	});
504	}	504	}
505	},	505	},
506	clear() {	506	clear() {
507	this.$refs.form.reset();	507	this.$refs.form.reset();
508	},	508	},
509	save() {	509	save() {
510	this.editedItem.sectionId = this.editedItem._id;	510	this.editedItem.sectionId = this.editedItem._id;
511	this.editLoading = true;	511	this.editLoading = true;
512	http()	512	http()
513	.put("/updateSection", this.editedItem)	513	.put("/updateSection", this.editedItem)
514	.then(response => {	514	.then(response => {
515	this.editLoading = false;	515	this.editLoading = false;
516	this.snackbar = true;	516	this.snackbar = true;
517	this.color = "green";	517	this.color = "green";
518	this.text = response.data.message;	518	this.text = response.data.message;
519	this.getSectionList();	519	this.getSectionList();
520	this.closeSectionDialog();	520	this.closeSectionDialog();
521	})	521	})
522	.catch(error => {	522	.catch(error => {
523	this.editLoading = false;	523	this.editLoading = false;
524	this.snackbar = true;	524	this.snackbar = true;
525	this.color = "error";	525	this.color = "error";
526	this.text = error.response.data.message;	526	this.text = error.response.data.message;
527	});	527	});
528	},	528	},
529	getAllTeacher() {	529	getAllTeacher() {
530	http()	530	http()
531	.get("/getTeachersList", {	531	.get("/getTeachersList", {
532	headers: { Authorization: "Bearer " + this.token }	532	headers: { Authorization: "Bearer " + this.token }
533	})	533	})
534	.then(response => {	534	.then(response => {
535	this.teacherList = response.data.data;	535	this.teacherList = response.data.data;
536	this.showLoader = false;	536	this.showLoader = false;
537	})	537	})
538	.catch(err => {	538	.catch(err => {
539	// console.log("err====>", err);	539	// console.log("err====>", err);
540	this.showLoader = false;	540	this.showLoader = false;
541	});	541	});
542	},	542	},
543	getAllClasses() {	543	getAllClasses() {
544	http()	544	http()
545	.get("/getClassesList", {	545	.get("/getClassesList", {
546	headers: { Authorization: "Bearer " + this.token }	546	headers: { Authorization: "Bearer " + this.token }
547	})	547	})
548	.then(response => {	548	.then(response => {
549	this.addclass = response.data.data;	549	this.addclass = response.data.data;
550	})	550	})
551	.catch(err => {	551	.catch(err => {
552	// console.log("err====>", err);	552	// console.log("err====>", err);
553	// this.$router.replace({ path: "/" });	553	// this.$router.replace({ path: "/" });
554	});	554	});
555	},	555	},
556	displaySearch() {	556	displaySearch() {
557	(this.show = false), (this.showSearch = true);	557	(this.show = false), (this.showSearch = true);
558	},	558	},
559	closeSearch() {	559	closeSearch() {
560	this.showSearch = false;	560	this.showSearch = false;
561	this.show = true;	561	this.show = true;
562	this.search = "";	562	this.search = "";
563	}	563	}
564	},	564	},
565	mounted() {	565	mounted() {
566	this.token = this.$store.state.token;	566	this.token = this.$store.state.token;
567	this.getSectionList();	567	this.getSectionList();
568	this.getAllClasses();	568	this.getAllClasses();
569	this.getAllTeacher();	569	this.getAllTeacher();
570	}	570	}
571	};	571	};
572	</script>	572	</script>
573		573

src/pages/Teachers/teachers.vue

Diff comments View file @8c3acf4

1	<template>	1	<template>
2	<v-container fluid class="body-color">	2	<v-container fluid class="body-color">
3	<!-- **** EDIT TEACHERS DETAILS **** -->	3	<!-- **** EDIT TEACHERS DETAILS **** -->
4	<v-dialog v-model="editTeacherDialog" max-width="1160px" scrollable>	4	<v-dialog v-model="editTeacherDialog" max-width="1160px" scrollable>
5	<v-card flat class="card-style" dark>	5	<v-card flat class="card-style" dark>
6	<v-card-text>	6	<v-card-text>
7	<v-layout>	7	<v-layout>
8	<v-flex xs12>	8	<v-flex xs12>
9	<label class="title text-xs-center">Edit Teacher Details</label>	9	<label class="title text-xs-center">Edit Teacher Details</label>
10	<v-icon size="24" class="right" @click="editTeacherDialog = false">cancel</v-icon>	10	<v-icon size="24" class="right" @click="editTeacherDialog = false">cancel</v-icon>
11	</v-flex>	11	</v-flex>
12	</v-layout>	12	</v-layout>
13	<v-container fluid>	13	<v-container fluid>
14	<v-layout>	14	<v-layout>
15	<v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4">	15	<v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4">
16	<v-avatar size="100px" v-if="!editedItem.profilePicUrl && !imageUrl">	16	<v-avatar size="100px" v-if="!editedItem.profilePicUrl && !imageUrl">
17	<img src="/static/icon/user.png" />	17	<img src="/static/icon/user.png" />
18	</v-avatar>	18	</v-avatar>
19	<img	19	<img
20	:src="editedItem.profilePicUrl"	20	:src="editedItem.profilePicUrl"
21	v-else-if="editedItem.profilePicUrl && !imageUrl"	21	v-else-if="editedItem.profilePicUrl && !imageUrl"
22	height="150"	22	height="150"
23	style="border-radius:50%; width:150px"	23	style="border-radius:50%; width:150px"
24	/>	24	/>
25	<img	25	<img
26	v-if="imageUrl"	26	v-if="imageUrl"
27	:src="imageUrl"	27	:src="imageUrl"
28	height="150"	28	height="150"
29	style="border-radius:50%; width:150px"	29	style="border-radius:50%; width:150px"
30	/>	30	/>
31	<input	31	<input
32	type="file"	32	type="file"
33	style="display:none"	33	style="display:none"
34	ref="image"	34	ref="image"
35	accept="image/*"	35	accept="image/*"
36	@change="onFilePicked"	36	@change="onFilePicked"
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 sm6>	41	<v-flex xs12 sm6>
42	<v-layout>	42	<v-layout>
43	<v-flex xs4 class="pt-4 subheading">	43	<v-flex xs4 class="pt-4 subheading">
44	<label class="right hidden-xs-only hidden-sm-only">Full Name:</label>	44	<label class="right hidden-xs-only hidden-sm-only">Full Name:</label>
45	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label>	45	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label>
46	</v-flex>	46	</v-flex>
47	<v-flex xs8 class="ml-3">	47	<v-flex xs8 class="ml-3">
48	<v-text-field	48	<v-text-field
49	v-model="editedItem.name"	49	v-model="editedItem.name"
50	placeholder="fill your full Name"	50	placeholder="fill your full Name"
51	type="text"	51	type="text"
52	required	52	required
53	></v-text-field>	53	></v-text-field>
54	</v-flex>	54	</v-flex>
55	</v-layout>	55	</v-layout>
56	</v-flex>	56	</v-flex>
57	<v-flex xs12 sm6>	57	<v-flex xs12 sm6>
58	<v-layout>	58	<v-layout>
59	<v-flex xs4 sm4 class="pt-4 subheading">	59	<v-flex xs4 sm4 class="pt-4 subheading">
60	<label class="right">Email ID:</label>	60	<label class="right">Email ID:</label>
61	</v-flex>	61	</v-flex>
62	<v-flex xs8 sm8 class="ml-3">	62	<v-flex xs8 sm8 class="ml-3">
63	<v-text-field	63	<v-text-field
64	placeholder="fill your email"	64	placeholder="fill your email"
65	v-model="editedItem.email"	65	v-model="editedItem.email"
66	type="text"	66	type="text"
67	required	67	required
68	></v-text-field>	68	></v-text-field>
69	</v-flex>	69	</v-flex>
70	</v-layout>	70	</v-layout>
71	</v-flex>	71	</v-flex>
72	</v-layout>	72	</v-layout>
73	<v-layout wrap>	73	<v-layout wrap>
74	<v-flex xs12 sm6>	74	<v-flex xs12 sm6>
75	<v-layout>	75	<v-layout>
76	<v-flex xs4 class="pt-4 subheading">	76	<v-flex xs4 class="pt-4 subheading">
77	<label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>	77	<label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>
78	<label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label>	78	<label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label>
79	</v-flex>	79	</v-flex>
80	<v-flex xs8 class="ml-3">	80	<v-flex xs8 class="ml-3">
81	<v-menu	81	<v-menu
82	ref="menu"	82	ref="menu"
83	:close-on-content-click="false"	83	:close-on-content-click="false"
84	v-model="menu2"	84	v-model="menu2"
85	:nudge-right="40"	85	:nudge-right="40"
86	lazy	86	lazy
87	transition="scale-transition"	87	transition="scale-transition"
88	offset-y	88	offset-y
89	full-width	89	full-width
90	min-width="290px"	90	min-width="290px"
91	>	91	>
92	<v-text-field	92	<v-text-field
93	slot="activator"	93	slot="activator"
94	v-model="editedItem.dob"	94	v-model="editedItem.dob"
95	placeholder="Select date"	95	placeholder="Select date"
96	></v-text-field>	96	></v-text-field>
97	<v-date-picker	97	<v-date-picker
98	ref="picker"	98	ref="picker"
99	v-model="editedItem.dob"	99	v-model="editedItem.dob"
100	:max="new Date().toISOString().substr(0, 10)"	100	:max="new Date().toISOString().substr(0, 10)"
101	min="1950-01-01"	101	min="1950-01-01"
102	@input="menu2 = false"	102	@input="menu2 = false"
103	></v-date-picker>	103	></v-date-picker>
104	</v-menu>	104	</v-menu>
105	</v-flex>	105	</v-flex>
106	</v-layout>	106	</v-layout>
107	</v-flex>	107	</v-flex>
108	<v-flex xs12 sm6>	108	<v-flex xs12 sm6>
109	<v-layout>	109	<v-layout>
110	<v-flex xs4 class="pt-4 subheading">	110	<v-flex xs4 class="pt-4 subheading">
111	<label class="right">City:</label>	111	<label class="right">City:</label>
112	</v-flex>	112	</v-flex>
113	<v-flex xs8 class="ml-3">	113	<v-flex xs8 class="ml-3">
114	<v-text-field	114	<v-text-field
115	v-model="editedItem.city"	115	v-model="editedItem.city"
116	placeholder="fill your City Name"	116	placeholder="fill your City Name"
117	type="text"	117	type="text"
118	required	118	required
119	></v-text-field>	119	></v-text-field>
120	</v-flex>	120	</v-flex>
121	</v-layout>	121	</v-layout>
122	</v-flex>	122	</v-flex>
123	</v-layout>	123	</v-layout>
124	<v-layout wrap>	124	<v-layout wrap>
125	<v-flex xs12 sm6>	125	<v-flex xs12 sm6>
126	<v-layout>	126	<v-layout>
127	<v-flex xs4 class="pt-4 subheading">	127	<v-flex xs4 class="pt-4 subheading">
128	<label class="right">State:</label>	128	<label class="right">State:</label>
129	</v-flex>	129	</v-flex>
130	<v-flex xs8 class="ml-3">	130	<v-flex xs8 class="ml-3">
131	<v-text-field	131	<v-text-field
132	v-model="editedItem.state"	132	v-model="editedItem.state"
133	placeholder="fill your State Name"	133	placeholder="fill your State Name"
134	type="text"	134	type="text"
135	required	135	required
136	></v-text-field>	136	></v-text-field>
137	</v-flex>	137	</v-flex>
138	</v-layout>	138	</v-layout>
139	</v-flex>	139	</v-flex>
140	<v-flex xs12 sm6>	140	<v-flex xs12 sm6>
141	<v-layout>	141	<v-layout>
142	<v-flex xs4 class="pt-4 subheading">	142	<v-flex xs4 class="pt-4 subheading">
143	<label class="right">PinCode:</label>	143	<label class="right">PinCode:</label>
144	</v-flex>	144	</v-flex>
145	<v-flex xs8 class="ml-3">	145	<v-flex xs8 class="ml-3">
146	<v-text-field	146	<v-text-field
147	v-model="editedItem.pincode"	147	v-model="editedItem.pincode"
148	placeholder="fill your pincode"	148	placeholder="fill your pincode"
149	type="number"	149	type="number"
150	required	150	required
151	></v-text-field>	151	></v-text-field>
152	</v-flex>	152	</v-flex>
153	</v-layout>	153	</v-layout>
154	</v-flex>	154	</v-flex>
155	</v-layout>	155	</v-layout>
156	<v-layout wrap>	156	<v-layout wrap>
157	<v-flex xs12 sm6>	157	<v-flex xs12 sm6>
158	<v-layout>	158	<v-layout>
159	<v-flex xs4 class="pt-4 subheading">	159	<v-flex xs4 class="pt-4 subheading">
160	<label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>	160	<label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>
161	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label>	161	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label>
162	</v-flex>	162	</v-flex>
163	<v-flex xs8 class="ml-3">	163	<v-flex xs8 class="ml-3">
164	<v-text-field	164	<v-text-field
165	v-model="editedItem.mobileNo"	165	v-model="editedItem.mobileNo"
166	placeholder="fill your MobileNo"	166	placeholder="fill your MobileNo"
167	type="number"	167	type="number"
168	required	168	required
169	></v-text-field>	169	></v-text-field>
170	</v-flex>	170	</v-flex>
171	</v-layout>	171	</v-layout>
172	</v-flex>	172	</v-flex>
173	<v-flex xs12 sm6>	173	<v-flex xs12 sm6>
174	<v-layout>	174	<v-layout>
175	<v-flex xs4 class="pt-4 subheading">	175	<v-flex xs4 class="pt-4 subheading">
176	<label class="right hidden-xs-only hidden-sm-only">Select Country:</label>	176	<label class="right hidden-xs-only hidden-sm-only">Select Country:</label>
177	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label>	177	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label>
178	</v-flex>	178	</v-flex>
179	<v-flex xs8 sm8 class="ml-3">	179	<v-flex xs8 sm8 class="ml-3">
180	<v-autocomplete	180	<v-autocomplete
181	v-model="editedItem.country"	181	v-model="editedItem.country"
182	:items="countries"	182	:items="countries"
183	placeholder="Select Country Name"	183	placeholder="Select Country Name"
184	required	184	required
185	></v-autocomplete>	185	></v-autocomplete>
186	</v-flex>	186	</v-flex>
187	</v-layout>	187	</v-layout>
188	</v-flex>	188	</v-flex>
189	</v-layout>	189	</v-layout>
190	<v-layout wrap>	190	<v-layout wrap>
191	<v-flex xs12 sm6>	191	<v-flex xs12 sm6>
192	<v-layout>	192	<v-layout>
193	<v-flex xs4 class="pt-4 subheading">	193	<v-flex xs4 class="pt-4 subheading">
194	<label class="right">Join Date:</label>	194	<label class="right">Join Date:</label>
195	</v-flex>	195	</v-flex>
196	<v-flex xs8 sm8 class="ml-3">	196	<v-flex xs8 sm8 class="ml-3">
197	<v-menu	197	<v-menu
198	ref="menu"	198	ref="menu"
199	:close-on-content-click="false"	199	:close-on-content-click="false"
200	v-model="menu3"	200	v-model="menu3"
201	:nudge-right="40"	201	:nudge-right="40"
202	lazy	202	lazy
203	transition="scale-transition"	203	transition="scale-transition"
204	offset-y	204	offset-y
205	full-width	205	full-width
206	min-width="290px"	206	min-width="290px"
207	>	207	>
208	<v-text-field	208	<v-text-field
209	slot="activator"	209	slot="activator"
210	v-model="editedItem.joinDate"	210	v-model="editedItem.joinDate"
211	placeholder="Select date"	211	placeholder="Select date"
212	></v-text-field>	212	></v-text-field>
213	<v-date-picker	213	<v-date-picker
214	ref="picker"	214	ref="picker"
215	v-model="editedItem.joinDate"	215	v-model="editedItem.joinDate"
216	:max="new Date().toISOString().substr(0, 10)"	216	:max="new Date().toISOString().substr(0, 10)"
217	min="1950-01-01"	217	min="1950-01-01"
218	@input="menu3 = false"	218	@input="menu3 = false"
219	></v-date-picker>	219	></v-date-picker>
220	</v-menu>	220	</v-menu>
221	</v-flex>	221	</v-flex>
222	</v-layout>	222	</v-layout>
223	</v-flex>	223	</v-flex>
224	<v-flex xs12 sm6>	224	<v-flex xs12 sm6>
225	<v-layout>	225	<v-layout>
226	<v-flex xs4 class="pt-4 subheading">	226	<v-flex xs4 class="pt-4 subheading">
227	<label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>	227	<label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
228	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label>	228	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label>
229	</v-flex>	229	</v-flex>
230	<v-flex xs8 sm8 class="ml-3">	230	<v-flex xs8 sm8 class="ml-3">
231	<v-text-field	231	<v-text-field
232	label="Select Image"	232	label="Select Image"
233	@click="pickFile"	233	@click="pickFile"
234	v-model="imageName"	234	v-model="imageName"
235	append-icon="attach_file"	235	append-icon="attach_file"
236	></v-text-field>	236	></v-text-field>
237	</v-flex>	237	</v-flex>
238	</v-layout>	238	</v-layout>
239	</v-flex>	239	</v-flex>
240	</v-layout>	240	</v-layout>
241	<v-layout class="hidden-xs-only hidden-sm-only" wrap>	241	<v-layout class="hidden-xs-only hidden-sm-only" wrap>
242	<v-flex xs12 sm6>	242	<v-flex xs12 sm6>
243	<v-layout>	243	<v-layout>
244	<v-flex xs4 sm4 class="pt-4 subheading">	244	<v-flex xs4 sm4 class="pt-4 subheading">
245	<label class="right">Present Address:</label>	245	<label class="right">Present Address:</label>
246	</v-flex>	246	</v-flex>
247	<v-flex xs8 sm8 class="ml-3">	247	<v-flex xs8 sm8 class="ml-3">
248	<v-text-field	248	<v-text-field
249	name="input-4-3"	249	name="input-4-3"
250	v-model="editedItem.presentAddress"	250	v-model="editedItem.presentAddress"
251	placeholder="fill Your present Address"	251	placeholder="fill Your present Address"
252	required	252	required
253	></v-text-field>	253	></v-text-field>
254	</v-flex>	254	</v-flex>
255	</v-layout>	255	</v-layout>
256	</v-flex>	256	</v-flex>
257	<v-flex xs12 sm6>	257	<v-flex xs12 sm6>
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">Permanent Address:</label>	260	<label class="right">Permanent Address:</label>
261	</v-flex>	261	</v-flex>
262	<v-flex xs12 sm8 class="ml-3">	262	<v-flex xs12 sm8 class="ml-3">
263	<v-text-field	263	<v-text-field
264	name="input-4-3"	264	name="input-4-3"
265	v-model="editedItem.permanentAddress"	265	v-model="editedItem.permanentAddress"
266	placeholder="fill Your Permanent Address"	266	placeholder="fill Your Permanent Address"
267	required	267	required
268	></v-text-field>	268	></v-text-field>
269	</v-flex>	269	</v-flex>
270	</v-layout>	270	</v-layout>
271	</v-flex>	271	</v-flex>
272	</v-layout>	272	</v-layout>
273	<v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap>	273	<v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap>
274	<v-flex xs12 sm12>	274	<v-flex xs12 sm12>
275	<v-layout>	275	<v-layout>
276	<v-flex xs12 sm3 class="pt-4 subheading text-xs-center">	276	<v-flex xs12 sm3 class="pt-4 subheading text-xs-center">
277	<label class>Present Address:</label>	277	<label class>Present Address:</label>
278	</v-flex>	278	</v-flex>
279	</v-layout>	279	</v-layout>
280	<v-layout>	280	<v-layout>
281	<v-flex xs12 sm12>	281	<v-flex xs12 sm12>
282	<v-textarea	282	<v-textarea
283	name="input-4-3"	283	name="input-4-3"
284	v-model="editedItem.presentAddress"	284	v-model="editedItem.presentAddress"
285	placeholder="fill Your present Address"	285	placeholder="fill Your present Address"
286	required	286	required
287	></v-textarea>	287	></v-textarea>
288	</v-flex>	288	</v-flex>
289	</v-layout>	289	</v-layout>
290	</v-flex>	290	</v-flex>
291	<v-flex xs12 sm12>	291	<v-flex xs12 sm12>
292	<v-layout>	292	<v-layout>
293	<v-flex xs12 sm3 class="pt-4 pr-4 subheading text-xs-center addressForm">	293	<v-flex xs12 sm3 class="pt-4 pr-4 subheading text-xs-center addressForm">
294	<label>Permanent Address:</label>	294	<label>Permanent Address:</label>
295	</v-flex>	295	</v-flex>
296	</v-layout>	296	</v-layout>
297	<v-layout>	297	<v-layout>
298	<v-flex xs12 sm12>	298	<v-flex xs12 sm12>
299	<v-textarea	299	<v-textarea
300	name="input-4-3"	300	name="input-4-3"
301	v-model="editedItem.permanentAddress"	301	v-model="editedItem.permanentAddress"
302	placeholder="fill Your Permanent Address"	302	placeholder="fill Your Permanent Address"
303	required	303	required
304	></v-textarea>	304	></v-textarea>
305	</v-flex>	305	</v-flex>
306	</v-layout>	306	</v-layout>
307	</v-flex>	307	</v-flex>
308	</v-layout>	308	</v-layout>
309	<v-layout>	309	<v-layout>
310	<v-flex xs12 sm12>	310	<v-flex xs12 sm12>
311	<v-flex xs12 sm12>	311	<v-flex xs12 sm12>
312	<v-layout class="right">	312	<v-layout class="right">
313	<v-btn @click="save" round dark :loading="loading" class="add-button">Save</v-btn>	313	<v-btn @click="save" round dark :loading="loading" class="add-button">Save</v-btn>
314	</v-layout>	314	</v-layout>
315	</v-flex>	315	</v-flex>
316	</v-flex>	316	</v-flex>
317	</v-layout>	317	</v-layout>
318	</v-container>	318	</v-container>
319	</v-card-text>	319	</v-card-text>
320	</v-card>	320	</v-card>
321	</v-dialog>	321	</v-dialog>
322		322
323	<!-- **** PROFILE VIEW TEACHERS DETAILS **** -->	323	<!-- **** PROFILE VIEW TEACHERS DETAILS **** -->
324		324
325	<v-dialog v-model="viewTeacherProfileDialog" max-width="500px" scrollable>	325	<v-dialog v-model="viewTeacherProfileDialog" max-width="500px" scrollable>
326	<v-card flat class="card-style pa-3" dark>	326	<v-card flat class="card-style pa-3" dark>
327	<v-layout>	327	<v-layout>
328	<v-flex xs12>	328	<v-flex xs12>
329	<label class="title text-xs-center">View Class</label>	329	<label class="title text-xs-center">View Teacher</label>
330	<v-icon size="24" class="right" @click="viewTeacherProfileDialog = false">cancel</v-icon>	330	<v-icon size="24" class="right" @click="viewTeacherProfileDialog = false">cancel</v-icon>
331	</v-flex>	331	</v-flex>
332	</v-layout>	332	</v-layout>
333	<v-card-text>	333	<v-card-text>
334	<v-container grid-list-md>	334	<v-container grid-list-md>
335	<v-layout wrap>	335	<v-layout wrap>
336	<v-flex>	336	<v-flex>
337	<v-flex align-center justify-center layout text-xs-center>	337	<v-flex align-center justify-center layout text-xs-center>
338	<v-avatar size="80">	338	<v-avatar size="80">
339	<img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" />	339	<img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" />
340	<img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" />	340	<img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" />
341	</v-avatar>	341	</v-avatar>
342	</v-flex>	342	</v-flex>
343	<v-layout>	343	<v-layout>
344	<v-flex xs5 sm6>	344	<v-flex xs5 sm6>
345	<h5 class="right my-1">	345	<h5 class="right my-1">
346	<b>Full Name:</b>	346	<b>Full Name:</b>
347	</h5>	347	</h5>
348	</v-flex>	348	</v-flex>
349	<v-flex sm6 xs8>	349	<v-flex sm6 xs8>
350	<h5 class="my-1">{{ editedItem.name }}</h5>	350	<h5 class="my-1">{{ editedItem.name }}</h5>
351	</v-flex>	351	</v-flex>
352	</v-layout>	352	</v-layout>
353	<v-layout>	353	<v-layout>
354	<v-flex xs5 sm6>	354	<v-flex xs5 sm6>
355	<h5 class="right my-1">	355	<h5 class="right my-1">
356	<b>Email:</b>	356	<b>Email:</b>
357	</h5>	357	</h5>
358	</v-flex>	358	</v-flex>
359	<v-flex sm6 xs8>	359	<v-flex sm6 xs8>
360	<h5 class="my-1">{{ editedItem.email }}</h5>	360	<h5 class="my-1">{{ editedItem.email }}</h5>
361	</v-flex>	361	</v-flex>
362	</v-layout>	362	</v-layout>
363	<v-layout>	363	<v-layout>
364	<v-flex xs5 sm6>	364	<v-flex xs5 sm6>
365	<h5 class="right my-1">	365	<h5 class="right my-1">
366	<b>City:</b>	366	<b>City:</b>
367	</h5>	367	</h5>
368	</v-flex>	368	</v-flex>
369	<v-flex sm6 xs8>	369	<v-flex sm6 xs8>
370	<h5 class="my-1">{{ editedItem.city }}</h5>	370	<h5 class="my-1">{{ editedItem.city }}</h5>
371	</v-flex>	371	</v-flex>
372	</v-layout>	372	</v-layout>
373	<v-layout>	373	<v-layout>
374	<v-flex xs5 sm6>	374	<v-flex xs5 sm6>
375	<h5 class="right my-1">	375	<h5 class="right my-1">
376	<b>State:</b>	376	<b>State:</b>
377	</h5>	377	</h5>
378	</v-flex>	378	</v-flex>
379	<v-flex sm6 xs8>	379	<v-flex sm6 xs8>
380	<h5 class="my-1">{{ editedItem.state }}</h5>	380	<h5 class="my-1">{{ editedItem.state }}</h5>
381	</v-flex>	381	</v-flex>
382	</v-layout>	382	</v-layout>
383	<v-layout>	383	<v-layout>
384	<v-flex xs5 sm6>	384	<v-flex xs5 sm6>
385	<h5 class="right my-1">	385	<h5 class="right my-1">
386	<b>Country:</b>	386	<b>Country:</b>
387	</h5>	387	</h5>
388	</v-flex>	388	</v-flex>
389	<v-flex sm6 xs8>	389	<v-flex sm6 xs8>
390	<h5 class="my-1">{{ editedItem.country }}</h5>	390	<h5 class="my-1">{{ editedItem.country }}</h5>
391	</v-flex>	391	</v-flex>
392	</v-layout>	392	</v-layout>
393	<v-layout>	393	<v-layout>
394	<v-flex xs5 sm6>	394	<v-flex xs5 sm6>
395	<h5 class="right my-1">	395	<h5 class="right my-1">
396	<b>Pincode:</b>	396	<b>Pincode:</b>
397	</h5>	397	</h5>
398	</v-flex>	398	</v-flex>
399	<v-flex sm6 xs8>	399	<v-flex sm6 xs8>
400	<h5 class="my-1">{{ editedItem.pincode }}</h5>	400	<h5 class="my-1">{{ editedItem.pincode }}</h5>
401	</v-flex>	401	</v-flex>
402	</v-layout>	402	</v-layout>
403	<v-layout>	403	<v-layout>
404	<v-flex xs5 sm6>	404	<v-flex xs5 sm6>
405	<h5 class="right my-1">	405	<h5 class="right my-1">
406	<b>Mobile No:</b>	406	<b>Mobile No:</b>
407	</h5>	407	</h5>
408	</v-flex>	408	</v-flex>
409	<v-flex sm6 xs8>	409	<v-flex sm6 xs8>
410	<h5 class="my-1">{{ editedItem.mobileNo }}</h5>	410	<h5 class="my-1">{{ editedItem.mobileNo }}</h5>
411	</v-flex>	411	</v-flex>
412	</v-layout>	412	</v-layout>
413	<v-layout>	413	<v-layout>
414	<v-flex xs5 sm6>	414	<v-flex xs5 sm6>
415	<h5 class="right my-1">	415	<h5 class="right my-1">
416	<b>Join Date:</b>	416	<b>Join Date:</b>
417	</h5>	417	</h5>
418	</v-flex>	418	</v-flex>
419	<v-flex sm6 xs8>	419	<v-flex sm6 xs8>
420	<h5 class="my-1">{{ dates(editedItem.joinDate) }}</h5>	420	<h5 class="my-1">{{ dates(editedItem.joinDate) }}</h5>
421	</v-flex>	421	</v-flex>
422	</v-layout>	422	</v-layout>
423	<v-layout>	423	<v-layout>
424	<v-flex xs5 sm6>	424	<v-flex xs5 sm6>
425	<h5 class="right my-1">	425	<h5 class="right my-1">
426	<b>D.O.B :</b>	426	<b>D.O.B :</b>
427	</h5>	427	</h5>
428	</v-flex>	428	</v-flex>
429	<v-flex sm6 xs8>	429	<v-flex sm6 xs8>
430	<h5 class="my-1">{{ dates(editedItem.dob) }}</h5>	430	<h5 class="my-1">{{ dates(editedItem.dob) }}</h5>
431	</v-flex>	431	</v-flex>
432	</v-layout>	432	</v-layout>
433	<v-layout>	433	<v-layout>
434	<v-flex xs6 sm6>	434	<v-flex xs6 sm6>
435	<h5 class="right my-1">	435	<h5 class="right my-1">
436	<b>Permanent Address:</b>	436	<b>Permanent Address:</b>
437	</h5>	437	</h5>
438	</v-flex>	438	</v-flex>
439	<v-flex sm6 xs8>	439	<v-flex sm6 xs8>
440	<h5 class="my-1">{{ editedItem.permanentAddress }}</h5>	440	<h5 class="my-1">{{ editedItem.permanentAddress }}</h5>
441	</v-flex>	441	</v-flex>
442	</v-layout>	442	</v-layout>
443	<v-layout>	443	<v-layout>
444	<v-flex xs6 sm6>	444	<v-flex xs6 sm6>
445	<h5 class="right my-1">	445	<h5 class="right my-1">
446	<b>present Address:</b>	446	<b>present Address:</b>
447	</h5>	447	</h5>
448	</v-flex>	448	</v-flex>
449	<v-flex sm6 xs8>	449	<v-flex sm6 xs8>
450	<h5 class="my-1">{{ editedItem.presentAddress }}</h5>	450	<h5 class="my-1">{{ editedItem.presentAddress }}</h5>
451	</v-flex>	451	</v-flex>
452	</v-layout>	452	</v-layout>
453	</v-flex>	453	</v-flex>
454	</v-layout>	454	</v-layout>
455	</v-container>	455	</v-container>
456	</v-card-text>	456	</v-card-text>
457	</v-card>	457	</v-card>
458	</v-dialog>	458	</v-dialog>
459	<!-- **** EXISTING-Teachers TABLE DATA**** -->	459	<!-- **** EXISTING-Teachers TABLE DATA**** -->
460	<v-toolbar color="transparent" flat>	460	<v-toolbar color="transparent" flat>
461	<v-btn	461	<v-btn
462	fab	462	fab
463	dark	463	dark
464	class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"	464	class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
465	small	465	small
466	@click="addTeacherDialog = true"	466	@click="addTeacherDialog = true"
467	>	467	>
468	<v-icon dark>add</v-icon>	468	<v-icon dark>add</v-icon>
469	</v-btn>	469	</v-btn>
470	<v-btn	470	<v-btn
471	v-if="role != 'TEACHER' "	471	v-if="role != 'TEACHER' "
472	round	472	round
473	class="open-dialog-button hidden-sm-only hidden-xs-only"	473	class="open-dialog-button hidden-sm-only hidden-xs-only"
474	dark	474	dark
475	@click="addTeacherDialog = true"	475	@click="addTeacherDialog = true"
476	>	476	>
477	<v-icon class="white--text pr-1" size="20">add</v-icon>Add Teacher	477	<v-icon class="white--text pr-1" size="20">add</v-icon>Add Teacher
478	</v-btn>	478	</v-btn>
479	<v-spacer></v-spacer>	479	<v-spacer></v-spacer>
480	<v-card-title class="body-1" v-show="show">	480	<v-card-title class="body-1" v-show="show">
481	<v-btn icon large flat @click="displaySearch">	481	<v-btn icon large flat @click="displaySearch">
482	<v-avatar size="27">	482	<v-avatar size="27">
483	<img src="/static/icon/search.png" alt="icon" />	483	<img src="/static/icon/search.png" alt="icon" />
484	</v-avatar>	484	</v-avatar>
485	</v-btn>	485	</v-btn>
486	</v-card-title>	486	</v-card-title>
487	<v-flex md2 lg2 sm6 xs8 v-show="showSearch">	487	<v-flex md2 lg2 sm6 xs8 v-show="showSearch">
488	<v-layout>	488	<v-layout>
489	<v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>	489	<v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>
490	<v-icon @click="closeSearch" color="error">close</v-icon>	490	<v-icon @click="closeSearch" color="error">close</v-icon>
491	</v-layout>	491	</v-layout>
492	</v-flex>	492	</v-flex>
493	</v-toolbar>	493	</v-toolbar>
494	<v-data-table	494	<v-data-table
495	:headers="headers"	495	:headers="headers"
496	:items="desserts"	496	:items="desserts"
497	:pagination.sync="pagination"	497	:pagination.sync="pagination"
498	:search="search"	498	:search="search"
499	>	499	>
500	<template slot="items" slot-scope="props">	500	<template slot="items" slot-scope="props">
501	<tr class="tr">	501	<tr class="tr">
502	<td class="td td-row">{{ props.index + 1}}</td>	502	<td class="td td-row">{{ props.index + 1}}</td>
503	<td class="td td-row text-xs-center">	503	<td class="td td-row text-xs-center">
504	<v-avatar size="40">	504	<v-avatar size="40">
505	<img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />	505	<img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
506	<img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />	506	<img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
507	</v-avatar>	507	</v-avatar>
508	</td>	508	</td>
509	<td class="td td-row text-xs-center">{{ props.item.name}}</td>	509	<td class="td td-row text-xs-center">{{ props.item.name}}</td>
510	<td class="td td-row text-xs-center">{{ props.item.email }}</td>	510	<td class="td td-row text-xs-center">{{ props.item.email }}</td>
511	<td class="td td-row text-xs-center">{{ dates(props.item.dob) }}</td>	511	<td class="td td-row text-xs-center">{{ dates(props.item.dob) }}</td>
512	<td class="td td-row text-xs-center">{{ dates(props.item.joinDate)}}</td>	512	<td class="td td-row text-xs-center">{{ dates(props.item.joinDate)}}</td>
513	<td class="td td-row text-xs-center">{{ props.item.mobileNo }}</td>	513	<td class="td td-row text-xs-center">{{ props.item.mobileNo }}</td>
514	<td class="td td-row text-xs-center">	514	<td class="td td-row text-xs-center">
515	<v-switch	515	<v-switch
516	class="pl-3"	516	class="pl-3"
517	v-model="props.item.status"	517	v-model="props.item.status"
518	@change="suspendStatus(props.item.status,props.item._id)"	518	@change="suspendStatus(props.item.status,props.item._id)"
519	></v-switch>	519	></v-switch>
520	</td>	520	</td>
521	<td class="text-xs-center td td-row">	521	<td class="text-xs-center td td-row">
522	<span>	522	<span>
523	<v-tooltip top>	523	<v-tooltip top>
524	<img	524	<img
525	slot="activator"	525	slot="activator"
526	style="cursor:pointer; width:25px; height:25px; "	526	style="cursor:pointer; width:25px; height:25px; "
527	class="mr-3"	527	class="mr-3"
528	@click="profile(props.item)"	528	@click="profile(props.item)"
529	src="/static/icon/view.png"	529	src="/static/icon/view.png"
530	/>	530	/>
531	<span>View</span>	531	<span>View</span>
532	</v-tooltip>	532	</v-tooltip>
533	<v-tooltip top v-if="role != 'TEACHER' ">	533	<v-tooltip top v-if="role != 'TEACHER' ">
534	<img	534	<img
535	slot="activator"	535	slot="activator"
536	style="cursor:pointer; width:20px; height:18px; "	536	style="cursor:pointer; width:20px; height:18px; "
537	class="mr-3"	537	class="mr-3"
538	@click="editItem(props.item)"	538	@click="editItem(props.item)"
539	src="/static/icon/edit.png"	539	src="/static/icon/edit.png"
540	/>	540	/>
541	<span>Edit</span>	541	<span>Edit</span>
542	</v-tooltip>	542	</v-tooltip>
543	<v-tooltip top v-if="role != 'TEACHER' ">	543	<v-tooltip top v-if="role != 'TEACHER' ">
544	<img	544	<img
545	slot="activator"	545	slot="activator"
546	style="cursor:pointer; width:20px; height:20px; "	546	style="cursor:pointer; width:20px; height:20px; "
547	@click="deleteItem(props.item)"	547	@click="deleteItem(props.item)"
548	src="/static/icon/delete.png"	548	src="/static/icon/delete.png"
549	class="mr-3"	549	class="mr-3"
550	/>	550	/>
551	<span>Delete</span>	551	<span>Delete</span>
552	</v-tooltip>	552	</v-tooltip>
553	</span>	553	</span>
554	</td>	554	</td>
555	</tr>	555	</tr>
556	</template>	556	</template>
557	<v-alert	557	<v-alert
558	slot="no-results"	558	slot="no-results"
559	:value="true"	559	:value="true"
560	color="error"	560	color="error"
561	icon="warning"	561	icon="warning"
562	>Your search for "{{ search }}" found no results.</v-alert>	562	>Your search for "{{ search }}" found no results.</v-alert>
563	</v-data-table>	563	</v-data-table>
564		564
565	<!-- **** Add Teachers Data**** -->	565	<!-- **** Add Teachers Data**** -->
566	<v-dialog v-model="addTeacherDialog" max-width="1160">	566	<v-dialog v-model="addTeacherDialog" max-width="1160">
567	<v-card flat class="card-style pa-2" dark>	567	<v-card flat class="card-style pa-2" dark>
568	<v-layout>	568	<v-layout>
569	<v-flex xs12 class="pa-0">	569	<v-flex xs12 class="pa-0">
570	<label class="title text-xs-center">Add Teacher</label>	570	<label class="title text-xs-center">Add Teacher</label>
571	<v-icon size="24" class="right" @click="addTeacherDialog = false">cancel</v-icon>	571	<v-icon size="24" class="right" @click="addTeacherDialog = false">cancel</v-icon>
572	</v-flex>	572	</v-flex>
573	</v-layout>	573	</v-layout>
574	<v-form ref="form" v-model="valid" lazy-validation>	574	<v-form ref="form" v-model="valid" lazy-validation>
575	<v-container fluid>	575	<v-container fluid>
576	<v-layout>	576	<v-layout>
577	<v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4">	577	<v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center my-4">
578	<v-avatar size="120px">	578	<v-avatar size="120px">
579	<img src="/static/icon/user.png" v-if="!imageUrl" />	579	<img src="/static/icon/user.png" v-if="!imageUrl" />
580	</v-avatar>	580	</v-avatar>
581	<img	581	<img
582	:src="imageUrl"	582	:src="imageUrl"
583	height="150"	583	height="150"
584	v-if="imageUrl"	584	v-if="imageUrl"
585	style="border-radius:50%; width:150px"	585	style="border-radius:50%; width:150px"
586	/>	586	/>
587	</v-flex>	587	</v-flex>
588	</v-layout>	588	</v-layout>
589	<v-layout wrap>	589	<v-layout wrap>
590	<v-flex xs12 sm6>	590	<v-flex xs12 sm6>
591	<v-layout>	591	<v-layout>
592	<v-flex xs4 class="pt-4 subheading">	592	<v-flex xs4 class="pt-4 subheading">
593	<label class="right hidden-sm-only hidden-xs-only">Full Name:</label>	593	<label class="right hidden-sm-only hidden-xs-only">Full Name:</label>
594	<label class="right hidden-lg-only hidden-xl-only hidden-md-only">Full Name</label>	594	<label class="right hidden-lg-only hidden-xl-only hidden-md-only">Full Name</label>
595	</v-flex>	595	</v-flex>
596	<v-flex xs8 class="ml-3">	596	<v-flex xs8 class="ml-3">
597	<v-text-field	597	<v-text-field
598	v-model="addTeachers.name"	598	v-model="addTeachers.name"
599	placeholder="fill your full Name"	599	placeholder="fill your full Name"
600	name="name"	600	name="name"
601	type="text"	601	type="text"
602	:rules="nameRules"	602	:rules="nameRules"
603	required	603	required
604	></v-text-field>	604	></v-text-field>
605	</v-flex>	605	</v-flex>
606	</v-layout>	606	</v-layout>
607	</v-flex>	607	</v-flex>
608	<v-flex xs12 sm6>	608	<v-flex xs12 sm6>
609	<v-layout>	609	<v-layout>
610	<v-flex xs4 class="pt-4 subheading">	610	<v-flex xs4 class="pt-4 subheading">
611	<label class="right">Email ID:</label>	611	<label class="right">Email ID:</label>
612	</v-flex>	612	</v-flex>
613	<v-flex xs8 class="ml-3">	613	<v-flex xs8 class="ml-3">
614	<v-text-field	614	<v-text-field
615	placeholder="fill your email"	615	placeholder="fill your email"
616	v-model="addTeachers.email"	616	v-model="addTeachers.email"
617	type="text"	617	type="text"
618	name="email"	618	name="email"
619	required	619	required
620	></v-text-field>	620	></v-text-field>
621	</v-flex>	621	</v-flex>
622	</v-layout>	622	</v-layout>
623	</v-flex>	623	</v-flex>
624	</v-layout>	624	</v-layout>
625	<v-layout wrap>	625	<v-layout wrap>
626	<v-flex xs12 sm6>	626	<v-flex xs12 sm6>
627	<v-layout>	627	<v-layout>
628	<v-flex xs4 sm4 class="pt-4 subheading">	628	<v-flex xs4 sm4 class="pt-4 subheading">
629	<label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>	629	<label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>
630	<label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label>	630	<label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label>
631	</v-flex>	631	</v-flex>
632	<v-flex xs8 class="ml-3">	632	<v-flex xs8 class="ml-3">
633	<v-menu	633	<v-menu
634	ref="menu"	634	ref="menu"
635	:close-on-content-click="false"	635	:close-on-content-click="false"
636	v-model="menu"	636	v-model="menu"
637	:nudge-right="40"	637	:nudge-right="40"
638	lazy	638	lazy
639	transition="scale-transition"	639	transition="scale-transition"
640	offset-y	640	offset-y
641	full-width	641	full-width
642	min-width="290px"	642	min-width="290px"
643	>	643	>
644	<v-text-field	644	<v-text-field
645	slot="activator"	645	slot="activator"
646	:rules="dateRules"	646	:rules="dateRules"
647	v-model="addTeachers.date"	647	v-model="addTeachers.date"
648	placeholder="Select date"	648	placeholder="Select date"
649	></v-text-field>	649	></v-text-field>
650	<v-date-picker	650	<v-date-picker
651	ref="picker"	651	ref="picker"
652	v-model="addTeachers.date"	652	v-model="addTeachers.date"
653	:max="new Date().toISOString().substr(0, 10)"	653	:max="new Date().toISOString().substr(0, 10)"
654	min="1950-01-01"	654	min="1950-01-01"
655	@input="menu = false"	655	@input="menu = false"
656	></v-date-picker>	656	></v-date-picker>
657	</v-menu>	657	</v-menu>
658	</v-flex>	658	</v-flex>
659	</v-layout>	659	</v-layout>
660	</v-flex>	660	</v-flex>
661	<v-flex xs12 sm6>	661	<v-flex xs12 sm6>
662	<v-layout>	662	<v-layout>
663	<v-flex xs4 class="pt-4 subheading">	663	<v-flex xs4 class="pt-4 subheading">
664	<label class="right">City:</label>	664	<label class="right">City:</label>
665	</v-flex>	665	</v-flex>
666	<v-flex xs8 class="ml-3">	666	<v-flex xs8 class="ml-3">
667	<v-text-field	667	<v-text-field
668	v-model="addTeachers.city"	668	v-model="addTeachers.city"
669	placeholder="fill your City Name"	669	placeholder="fill your City Name"
670	name="City"	670	name="City"
671	type="text"	671	type="text"
672	:rules="cityRules"	672	:rules="cityRules"
673	required	673	required
674	></v-text-field>	674	></v-text-field>
675	</v-flex>	675	</v-flex>
676	</v-layout>	676	</v-layout>
677	</v-flex>	677	</v-flex>
678	</v-layout>	678	</v-layout>
679	<v-layout wrap>	679	<v-layout wrap>
680	<v-flex xs12 sm6>	680	<v-flex xs12 sm6>
681	<v-layout>	681	<v-layout>
682	<v-flex xs4 class="pt-4 subheading">	682	<v-flex xs4 class="pt-4 subheading">
683	<label class="right">State:</label>	683	<label class="right">State:</label>
684	</v-flex>	684	</v-flex>
685	<v-flex xs8 class="ml-3">	685	<v-flex xs8 class="ml-3">
686	<v-text-field	686	<v-text-field
687	v-model="addTeachers.state"	687	v-model="addTeachers.state"
688	placeholder="fill your State Name"	688	placeholder="fill your State Name"
689	name="state"	689	name="state"
690	type="text"	690	type="text"
691	:rules="stateRules"	691	:rules="stateRules"
692	required	692	required
693	></v-text-field>	693	></v-text-field>
694	</v-flex>	694	</v-flex>
695	</v-layout>	695	</v-layout>
696	</v-flex>	696	</v-flex>
697	<v-flex xs12 sm6>	697	<v-flex xs12 sm6>
698	<v-layout>	698	<v-layout>
699	<v-flex xs4 class="pt-4 subheading">	699	<v-flex xs4 class="pt-4 subheading">
700	<label class="right">PinCode:</label>	700	<label class="right">PinCode:</label>
701	</v-flex>	701	</v-flex>
702	<v-flex xs8 class="ml-3">	702	<v-flex xs8 class="ml-3">
703	<v-text-field	703	<v-text-field
704	v-model="addTeachers.pincode"	704	v-model="addTeachers.pincode"
705	placeholder="fill your pincode"	705	placeholder="fill your pincode"
706	name="pincode"	706	name="pincode"
707	type="number"	707	type="number"
708	:rules="pincode"	708	:rules="pincode"
709	required	709	required
710	></v-text-field>	710	></v-text-field>
711	</v-flex>	711	</v-flex>
712	</v-layout>	712	</v-layout>
713	</v-flex>	713	</v-flex>
714	</v-layout>	714	</v-layout>
715	<v-layout wrap>	715	<v-layout wrap>
716	<v-flex xs12 sm6>	716	<v-flex xs12 sm6>
717	<v-layout>	717	<v-layout>
718	<v-flex xs4 class="pt-4 subheading">	718	<v-flex xs4 class="pt-4 subheading">
719	<label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>	719	<label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>
720	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label>	720	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label>
721	</v-flex>	721	</v-flex>
722	<v-flex xs8 class="ml-3">	722	<v-flex xs8 class="ml-3">
723	<v-text-field	723	<v-text-field
724	v-model="addTeachers.mobileNo"	724	v-model="addTeachers.mobileNo"
725	placeholder="fill your Mobile No."	725	placeholder="fill your Mobile No."
726	name="mobileNo"	726	name="mobileNo"
727	type="number"	727	type="number"
728	:rules="mobileNoRules"	728	:rules="mobileNoRules"
729	required	729	required
730	></v-text-field>	730	></v-text-field>
731	</v-flex>	731	</v-flex>
732	</v-layout>	732	</v-layout>
733	</v-flex>	733	</v-flex>
734	<v-flex xs12 sm6>	734	<v-flex xs12 sm6>
735	<v-layout>	735	<v-layout>
736	<v-flex xs4 class="pt-4 subheading">	736	<v-flex xs4 class="pt-4 subheading">
737	<label class="right hidden-xs-only hidden-sm-only">Select Country:</label>	737	<label class="right hidden-xs-only hidden-sm-only">Select Country:</label>
738	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label>	738	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label>
739	</v-flex>	739	</v-flex>
740	<v-flex xs8 class="ml-3">	740	<v-flex xs8 class="ml-3">
741	<v-autocomplete	741	<v-autocomplete
742	v-model="addTeachers.country"	742	v-model="addTeachers.country"
743	:rules="country"	743	:rules="country"
744	:items="countries"	744	:items="countries"
745	placeholder="Select Country Name"	745	placeholder="Select Country Name"
746	required	746	required
747	></v-autocomplete>	747	></v-autocomplete>
748	</v-flex>	748	</v-flex>
749	</v-layout>	749	</v-layout>
750	</v-flex>	750	</v-flex>
751	</v-layout>	751	</v-layout>
752	<v-layout wrap>	752	<v-layout wrap>
753	<v-flex xs12 sm6>	753	<v-flex xs12 sm6>
754	<v-layout>	754	<v-layout>
755	<v-flex xs4 class="pt-4 subheading">	755	<v-flex xs4 class="pt-4 subheading">
756	<label class="right">Join Date:</label>	756	<label class="right">Join Date:</label>
757	</v-flex>	757	</v-flex>
758	<v-flex xs8 class="ml-3">	758	<v-flex xs8 class="ml-3">
759	<v-menu	759	<v-menu
760	ref="menu1"	760	ref="menu1"
761	:close-on-content-click="false"	761	:close-on-content-click="false"
762	v-model="menu1"	762	v-model="menu1"
763	:nudge-right="40"	763	:nudge-right="40"
764	lazy	764	lazy
765	transition="scale-transition"	765	transition="scale-transition"
766	offset-y	766	offset-y
767	full-width	767	full-width
768	min-width="290px"	768	min-width="290px"
769	>	769	>
770	<v-text-field	770	<v-text-field
771	slot="activator"	771	slot="activator"
772	:rules="joinDateRules"	772	:rules="joinDateRules"
773	v-model="addTeachers.joinDate"	773	v-model="addTeachers.joinDate"
774	placeholder="Select date"	774	placeholder="Select date"
775	></v-text-field>	775	></v-text-field>
776	<v-date-picker	776	<v-date-picker
777	ref="picker"	777	ref="picker"
778	v-model="addTeachers.joinDate"	778	v-model="addTeachers.joinDate"
779	:max="new Date().toISOString().substr(0, 10)"	779	:max="new Date().toISOString().substr(0, 10)"
780	min="1950-01-01"	780	min="1950-01-01"
781	@input="menu1 = false"	781	@input="menu1 = false"
782	></v-date-picker>	782	></v-date-picker>
783	</v-menu>	783	</v-menu>
784	</v-flex>	784	</v-flex>
785	</v-layout>	785	</v-layout>
786	</v-flex>	786	</v-flex>
787	<v-flex xs12 sm6>	787	<v-flex xs12 sm6>
788	<v-layout>	788	<v-layout>
789	<v-flex xs4 class="pt-4 subheading">	789	<v-flex xs4 class="pt-4 subheading">
790	<label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>	790	<label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
791	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label>	791	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label>
792	</v-flex>	792	</v-flex>
793	<v-flex xs8 class="ml-3">	793	<v-flex xs8 class="ml-3">
794	<v-text-field	794	<v-text-field
795	label="Select Image"	795	label="Select Image"
796	@click="pickFile"	796	@click="pickFile"
797	v-model="imageName"	797	v-model="imageName"
798	append-icon="attach_file"	798	append-icon="attach_file"
799	></v-text-field>	799	></v-text-field>
800	<input	800	<input
801	type="file"	801	type="file"
802	style="display:none"	802	style="display:none"
803	ref="image"	803	ref="image"
804	accept="image/*"	804	accept="image/*"
805	@change="onFilePicked"	805	@change="onFilePicked"
806	/>	806	/>
807	</v-flex>	807	</v-flex>
808	</v-layout>	808	</v-layout>
809	</v-flex>	809	</v-flex>
810	</v-layout>	810	</v-layout>
811	<v-layout class="hidden-xs-only hidden-sm-only">	811	<v-layout class="hidden-xs-only hidden-sm-only">
812	<v-flex xs12 sm6>	812	<v-flex xs12 sm6>
813	<v-layout>	813	<v-layout>
814	<v-flex xs4 md4 class="pt-4 subheading">	814	<v-flex xs4 md4 class="pt-4 subheading">
815	<label class="right">Present Address:</label>	815	<label class="right">Present Address:</label>
816	</v-flex>	816	</v-flex>
817	<v-flex xs8 md8 class="ml-3">	817	<v-flex xs8 md8 class="ml-3">
818	<v-text-field	818	<v-text-field
819	name="input-4-3"	819	name="input-4-3"
820	v-model="addTeachers.presentAddress"	820	v-model="addTeachers.presentAddress"
821	:rules="presentAddress"	821	:rules="presentAddress"
822	placeholder="fill Your present Address"	822	placeholder="fill Your present Address"
823	@keyup="copyData"	823	@keyup="copyData"
824	></v-text-field>	824	></v-text-field>
825	</v-flex>	825	</v-flex>
826	</v-layout>	826	</v-layout>
827	</v-flex>	827	</v-flex>
828	<v-flex xs12 sm6>	828	<v-flex xs12 sm6>
829	<v-layout>	829	<v-layout>
830	<v-flex xs4 md4 class="pt-4 subheading addressForm">	830	<v-flex xs4 md4 class="pt-4 subheading addressForm">
831	<label class="right">Permanent Address:</label>	831	<label class="right">Permanent Address:</label>
832	</v-flex>	832	</v-flex>
833	<v-flex xs12 md8 class="ml-3">	833	<v-flex xs12 md8 class="ml-3">
834	<v-switch	834	<v-switch
835	v-model="addTeachers.permanentAddress"	835	v-model="addTeachers.permanentAddress"
836	label="Select Permanent Address"	836	label="Select Permanent Address"
837	:value="addTeachers.presentAddress"	837	:value="addTeachers.presentAddress"
838	></v-switch>	838	></v-switch>
839	</v-flex>	839	</v-flex>
840	</v-layout>	840	</v-layout>
841	</v-flex>	841	</v-flex>
842	</v-layout>	842	</v-layout>
843	<v-layout class="hidden-xs-only hidden-sm-only">	843	<v-layout class="hidden-xs-only hidden-sm-only">
844	<v-flex xs12 sm6>	844	<v-flex xs12 sm6>
845	<v-layout>	845	<v-layout>
846	<v-flex xs4 md4 class="pt-4 subheading addressForm">	846	<v-flex xs4 md4 class="pt-4 subheading addressForm">
847	<label class="right">Permanent Address:</label>	847	<label class="right">Permanent Address:</label>
848	</v-flex>	848	</v-flex>
849	<v-flex xs12 md8 class="ml-3">	849	<v-flex xs12 md8 class="ml-3">
850	<v-text-field	850	<v-text-field
851	name="input-4-3"	851	name="input-4-3"
852	v-model="addTeachers.permanentAddress"	852	v-model="addTeachers.permanentAddress"
853	:rules="permanentAddress"	853	:rules="permanentAddress"
854	placeholder="fill Your Permanent Address"	854	placeholder="fill Your Permanent Address"
855	required	855	required
856	></v-text-field>	856	></v-text-field>
857	</v-flex>	857	</v-flex>
858	</v-layout>	858	</v-layout>
859	</v-flex>	859	</v-flex>
860	</v-layout>	860	</v-layout>
861	<v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap>	861	<v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap>
862	<v-flex xs12 sm12>	862	<v-flex xs12 sm12>
863	<v-layout>	863	<v-layout>
864	<v-flex xs12 sm12 class="pt-4 subheading text-xs-center">	864	<v-flex xs12 sm12 class="pt-4 subheading text-xs-center">
865	<label class>Present Addres:</label>	865	<label class>Present Addres:</label>
866	</v-flex>	866	</v-flex>
867	</v-layout>	867	</v-layout>
868	<v-layout>	868	<v-layout>
869	<v-flex xs12 sm12>	869	<v-flex xs12 sm12>
870	<v-textarea	870	<v-textarea
871	name="input-4-3"	871	name="input-4-3"
872	v-model="addTeachers.presentAddress"	872	v-model="addTeachers.presentAddress"
873	:rules="presentAddress"	873	:rules="presentAddress"
874	placeholder="fill Your present Address"	874	placeholder="fill Your present Address"
875	required	875	required
876	></v-textarea>	876	></v-textarea>
877	</v-flex>	877	</v-flex>
878	</v-layout>	878	</v-layout>
879	</v-flex>	879	</v-flex>
880	<v-flex xs12 sm12>	880	<v-flex xs12 sm12>
881	<v-layout>	881	<v-layout>
882	<v-flex xs12 sm12 class="pt-4 pr-4 subheading text-xs-center addressForm">	882	<v-flex xs12 sm12 class="pt-4 pr-4 subheading text-xs-center addressForm">
883	<label>Permanent Address:</label>	883	<label>Permanent Address:</label>
884	</v-flex>	884	</v-flex>
885	</v-layout>	885	</v-layout>
886	<v-layout>	886	<v-layout>
887	<v-flex xs12 sm12>	887	<v-flex xs12 sm12>
888	<v-textarea	888	<v-textarea
889	name="input-4-3"	889	name="input-4-3"
890	v-model="addTeachers.permanentAddress"	890	v-model="addTeachers.permanentAddress"
891	:rules="permanentAddress"	891	:rules="permanentAddress"
892	placeholder="fill Your Permanent Address"	892	placeholder="fill Your Permanent Address"
893	required	893	required
894	></v-textarea>	894	></v-textarea>
895	</v-flex>	895	</v-flex>
896	</v-layout>	896	</v-layout>
897	</v-flex>	897	</v-flex>
898	</v-layout>	898	</v-layout>
899	<v-layout>	899	<v-layout>
900	<v-flex xs12 sm12>	900	<v-flex xs12 sm12>
901	<v-layout class="right">	901	<v-layout class="right">
902	<v-btn @click="clear" round dark class="clear-button">Clear</v-btn>	902	<v-btn @click="clear" round dark class="clear-button">Clear</v-btn>
903	<v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>	903	<v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
904	</v-layout>	904	</v-layout>
905	</v-flex>	905	</v-flex>
906	</v-layout>	906	</v-layout>
907	</v-container>	907	</v-container>
908	</v-form>	908	</v-form>
909	</v-card>	909	</v-card>
910	</v-dialog>	910	</v-dialog>
911	<div class="loader" v-if="showLoader">	911	<div class="loader" v-if="showLoader">
912	<v-progress-circular indeterminate color="white"></v-progress-circular>	912	<v-progress-circular indeterminate color="white"></v-progress-circular>
913	</div>	913	</div>
914	</v-container>	914	</v-container>
915	</template>	915	</template>
916		916
917	<script>	917	<script>
918	import http from "@/Services/http.js";	918	import http from "@/Services/http.js";
919	import moment from "moment";	919	import moment from "moment";
920	import countryList from "@/script/country.js";	920	import countryList from "@/script/country.js";
921		921
922	export default {	922	export default {
923	data: () => ({	923	data: () => ({
924	component: "report-generate",	924	component: "report-generate",
925	snackbar: false,	925	snackbar: false,
926	y: "top",	926	y: "top",
927	x: "right",	927	x: "right",
928	role: "",	928	role: "",
929	mode: "",	929	mode: "",
930	timeout: 3000,	930	timeout: 3000,
931	text: "",	931	text: "",
932	color: "",	932	color: "",
933	showLoader: false,	933	showLoader: false,
934	loading: false,	934	loading: false,
935	date: null,	935	date: null,
936	search: "",	936	search: "",
937	show: true,	937	show: true,
938	showSearch: false,	938	showSearch: false,
939	menu: false,	939	menu: false,
940	menu1: false,	940	menu1: false,
941	menu2: false,	941	menu2: false,
942	menu3: false,	942	menu3: false,
943	editTeacherDialog: false,	943	editTeacherDialog: false,
944	viewTeacherProfileDialog: false,	944	viewTeacherProfileDialog: false,
945	addTeacherDialog: false,	945	addTeacherDialog: false,
946	valid: true,	946	valid: true,
947	pagination: {	947	pagination: {
948	rowsPerPage: 10	948	rowsPerPage: 10
949	},	949	},
950	imageData: {},	950	imageData: {},
951	imageName: "",	951	imageName: "",
952	imageUrl: "",	952	imageUrl: "",
953	imageFile: "",	953	imageFile: "",
954	nameRules: [v => !!v \|\| " Full Name is required"],	954	nameRules: [v => !!v \|\| " Full Name is required"],
955	dateRules: [v => !!v \|\| " DOB is required"],	955	dateRules: [v => !!v \|\| " DOB is required"],
956	cityRules: [v => !!v \|\| " City Name is required"],	956	cityRules: [v => !!v \|\| " City Name is required"],
957	pincode: [v => !!v \|\| " Pincode is required"],	957	pincode: [v => !!v \|\| " Pincode is required"],
958	country: [v => !!v \|\| " Country Name is required"],	958	country: [v => !!v \|\| " Country Name is required"],
959	permanentAddress: [v => !!v \|\| " Permanent Address is required"],	959	permanentAddress: [v => !!v \|\| " Permanent Address is required"],
960	presentAddress: [v => !!v \|\| " Present Address is required"],	960	presentAddress: [v => !!v \|\| " Present Address is required"],
961	mobileNoRules: [v => !!v \|\| "Mobile Number is required"],	961	mobileNoRules: [v => !!v \|\| "Mobile Number is required"],
962	stateRules: [v => !!v \|\| "State Name is required"],	962	stateRules: [v => !!v \|\| "State Name is required"],
963	joinDateRules: [v => !!v \|\| " Join Date is required"],	963	joinDateRules: [v => !!v \|\| " Join Date is required"],
964	errorMessages: "",	964	errorMessages: "",
965	switch1: true,	965	switch1: true,
966	countries: [],	966	countries: [],
967	headers: [	967	headers: [
968	{	968	{
969	text: "No",	969	text: "No",
970	align: "",	970	align: "",
971	sortable: false,	971	sortable: false,
972	value: "No"	972	value: "No"
973	},	973	},
974	{	974	{
975	text: "Profile Pic",	975	text: "Profile Pic",
976	value: "profilePicUrl",	976	value: "profilePicUrl",
977	sortable: false,	977	sortable: false,
978	align: "center"	978	align: "center"
979	},	979	},
980	{ text: "Name", value: "name", sortable: false, align: "center" },	980	{ text: "Name", value: "name", sortable: false, align: "center" },
981	{ text: "Email", value: "email", sortable: false, align: "center" },	981	{ text: "Email", value: "email", sortable: false, align: "center" },
982	{ text: "DOB", value: "dob", sortable: false, align: "center" },	982	{ text: "DOB", value: "dob", sortable: false, align: "center" },
983	{	983	{
984	text: "Join Date",	984	text: "Join Date",
985	value: "joinDate",	985	value: "joinDate",
986	sortable: false,	986	sortable: false,
987	align: "center"	987	align: "center"
988	},	988	},
989	{	989	{
990	text: "Mobile No",	990	text: "Mobile No",
991	value: "mobileNo",	991	value: "mobileNo",
992	sortable: false,	992	sortable: false,
993	align: "center"	993	align: "center"
994	},	994	},
995	{	995	{
996	text: "Status",	996	text: "Status",
997	value: "status",	997	value: "status",
998	sortable: false,	998	sortable: false,
999	align: "center"	999	align: "center"
1000	},	1000	},
1001	{ text: "Action", value: "", sortable: false, align: "center" }	1001	{ text: "Action", value: "", sortable: false, align: "center" }
1002	],	1002	],
1003	desserts: [],	1003	desserts: [],
1004	editedIndex: -1,	1004	editedIndex: -1,
1005	upload: "",	1005	upload: "",
1006	editedItem: {	1006	editedItem: {
1007	role: "TEACHER",	1007	role: "TEACHER",
1008	name: "",	1008	name: "",
1009	email: "",	1009	email: "",
1010	date: null,	1010	date: null,
1011	city: "",	1011	city: "",
1012	pincode: "",	1012	pincode: "",
1013	country: "",	1013	country: "",
1014	permanentAddress: "",	1014	permanentAddress: "",
1015	presentAddress: "",	1015	presentAddress: "",
1016	mobileNo: "",	1016	mobileNo: "",
1017	state: "",	1017	state: "",
1018	joinDate: null	1018	joinDate: null
1019	},	1019	},
1020	addTeachers: {	1020	addTeachers: {
1021	role: "TEACHER",	1021	role: "TEACHER",
1022	name: "",	1022	name: "",
1023	email: "",	1023	email: "",
1024	date: null,	1024	date: null,
1025	city: "",	1025	city: "",
1026	pincode: "",	1026	pincode: "",
1027	country: "",	1027	country: "",
1028	permanentAddress: "",	1028	permanentAddress: "",
1029	presentAddress: "",	1029	presentAddress: "",
1030	mobileNo: "",	1030	mobileNo: "",
1031	state: "",	1031	state: "",
1032	joinDate: null	1032	joinDate: null
1033	},	1033	},
1034	status: ""	1034	status: ""
1035	}),	1035	}),
1036	watch: {	1036	watch: {
1037	menu(val) {	1037	menu(val) {
1038	val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));	1038	val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
1039	},	1039	},
1040	menu1(val) {	1040	menu1(val) {
1041	val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));	1041	val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
1042	}	1042	}
1043	},	1043	},
1044	methods: {	1044	methods: {
1045	save(date) {	1045	save(date) {
1046	this.$refs.menu.save(date);	1046	this.$refs.menu.save(date);
1047	},	1047	},
1048	save(date) {	1048	save(date) {
1049	this.$refs.menu1.save(date);	1049	this.$refs.menu1.save(date);
1050	},	1050	},
1051	pickFile() {	1051	pickFile() {
1052	this.$refs.image.click();	1052	this.$refs.image.click();
1053	},	1053	},
1054	onFilePicked(e) {	1054	onFilePicked(e) {
1055	const files = e.target.files;	1055	const files = e.target.files;
1056	this.upload = e.target.files[0];	1056	this.upload = e.target.files[0];
1057	if (files[0] !== undefined) {	1057	if (files[0] !== undefined) {
1058	this.imageName = files[0].name;	1058	this.imageName = files[0].name;
1059	if (this.imageName.lastIndexOf(".") <= 0) {	1059	if (this.imageName.lastIndexOf(".") <= 0) {
1060	return;	1060	return;
1061	}	1061	}
1062	const fr = new FileReader();	1062	const fr = new FileReader();
1063	fr.readAsDataURL(files[0]);	1063	fr.readAsDataURL(files[0]);
1064	fr.addEventListener("load", () => {	1064	fr.addEventListener("load", () => {
1065	this.imageUrl = fr.result;	1065	this.imageUrl = fr.result;
1066	this.imageFile = files[0]; // this is an image file that can be sent to server...	1066	this.imageFile = files[0]; // this is an image file that can be sent to server...
1067	});	1067	});
1068	} else {	1068	} else {
1069	this.imageName = "";	1069	this.imageName = "";
1070	this.imageFile = "";	1070	this.imageFile = "";
1071	this.imageUrl = "";	1071	this.imageUrl = "";
1072	}	1072	}
1073	},	1073	},
1074	dates: function(date) {	1074	dates: function(date) {
1075	return moment(date).format("MMMM DD, YYYY");	1075	return moment(date).format("MMMM DD, YYYY");
1076	},	1076	},
1077	getTeacherList() {	1077	getTeacherList() {
1078	this.showLoader = true;	1078	this.showLoader = true;
1079	var token = this.$store.state.token;	1079	var token = this.$store.state.token;
1080	http()	1080	http()
1081	.get("/getTeachersList", {	1081	.get("/getTeachersList", {
1082	headers: { Authorization: "Bearer " + token }	1082	headers: { Authorization: "Bearer " + token }
1083	})	1083	})
1084	.then(response => {	1084	.then(response => {
1085	this.desserts = response.data.data;	1085	this.desserts = response.data.data;
1086	this.showLoader = false;	1086	this.showLoader = false;
1087	// console.log("getTeacherList=====>",this.desserts)	1087	// console.log("getTeacherList=====>",this.desserts)
1088	})	1088	})
1089	.catch(error => {	1089	.catch(error => {
1090	this.showLoader = false;	1090	this.showLoader = false;
1091	if (error.response.status === 401) {	1091	if (error.response.status === 401) {
1092	this.$router.replace({ path: "/" });	1092	this.$router.replace({ path: "/" });
1093	this.$store.dispatch("setToken", null);	1093	this.$store.dispatch("setToken", null);
1094	this.$store.dispatch("Id", null);	1094	this.$store.dispatch("Id", null);
1095	}	1095	}
1096	});	1096	});
1097	},	1097	},
1098	editItem(item) {	1098	editItem(item) {
1099	this.editedIndex = this.desserts.indexOf(item);	1099	this.editedIndex = this.desserts.indexOf(item);
1100	this.editedItem = Object.assign({}, item);	1100	this.editedItem = Object.assign({}, item);
1101	this.editedItem.dob =	1101	this.editedItem.dob =
1102	this.editedItem.dob != undefined	1102	this.editedItem.dob != undefined
1103	? (this.editedItem.dob = this.editedItem.dob.substring(0, 10))	1103	? (this.editedItem.dob = this.editedItem.dob.substring(0, 10))
1104	: (this.editedItem.dob = "");	1104	: (this.editedItem.dob = "");
1105	this.editedItem.joinDate =	1105	this.editedItem.joinDate =
1106	this.editedItem.joinDate != undefined	1106	this.editedItem.joinDate != undefined
1107	? (this.editedItem.joinDate = this.editedItem.joinDate.substring(	1107	? (this.editedItem.joinDate = this.editedItem.joinDate.substring(
1108	0,	1108	0,
1109	10	1109	10
1110	))	1110	))
1111	: (this.editedItem.joinDate = "");	1111	: (this.editedItem.joinDate = "");
1112		1112
1113	this.editTeacherDialog = true;	1113	this.editTeacherDialog = true;
1114	},	1114	},
1115	profile(item) {	1115	profile(item) {
1116	this.editedIndex = this.desserts.indexOf(item);	1116	this.editedIndex = this.desserts.indexOf(item);
1117	this.editedItem = Object.assign({}, item);	1117	this.editedItem = Object.assign({}, item);
1118	this.viewTeacherProfileDialog = true;	1118	this.viewTeacherProfileDialog = true;
1119	},	1119	},
1120	deleteItem(item) {	1120	deleteItem(item) {
1121	let deleteTeachers = {	1121	let deleteTeachers = {
1122	teacherId: item._id	1122	teacherId: item._id
1123	};	1123	};
1124	http()	1124	http()
1125	.delete(	1125	.delete(
1126	"/deleteTeacher",	1126	"/deleteTeacher",
1127	confirm("Are you sure you want to delete this?") && {	1127	confirm("Are you sure you want to delete this?") && {
1128	params: deleteTeachers	1128	params: deleteTeachers
1129	}	1129	}
1130	)	1130	)
1131	.then(response => {	1131	.then(response => {
1132	this.snackbar = true;	1132	this.snackbar = true;
1133	this.text = "Successfully delete Existing Teacher";	1133	this.text = "Successfully delete Existing Teacher";
1134	this.color = "green";	1134	this.color = "green";
1135	this.getTeacherList();	1135	this.getTeacherList();
1136	})	1136	})
1137	.catch(error => {	1137	.catch(error => {
1138	this.snackbar = true;	1138	this.snackbar = true;
1139	this.text = error.response.data.message;	1139	this.text = error.response.data.message;
1140	this.color = "error";	1140	this.color = "error";
1141	});	1141	});
1142	},	1142	},
1143	closeEditTeacherDialog() {	1143	closeEditTeacherDialog() {
1144	this.editTeacherDialog = false;	1144	this.editTeacherDialog = false;
1145	},	1145	},
1146	close1() {	1146	close1() {
1147	this.viewTeacherProfileDialog = false;	1147	this.viewTeacherProfileDialog = false;
1148	},	1148	},
1149	copyData() {	1149	copyData() {
1150	this.addTeachers.permanentAddress = this.addTeachers.presentAddress;	1150	this.addTeachers.permanentAddress = this.addTeachers.presentAddress;
1151	},	1151	},
1152	submit() {	1152	submit() {
1153	if (this.$refs.form.validate()) {	1153	if (this.$refs.form.validate()) {
1154	let addTeacher = {	1154	let addTeacher = {
1155	name: this.addTeachers.name,	1155	name: this.addTeachers.name,
1156	email: this.addTeachers.email,	1156	email: this.addTeachers.email,
1157	role: this.addTeachers.role,	1157	role: this.addTeachers.role,
1158	dob: this.addTeachers.date,	1158	dob: this.addTeachers.date,
1159	city: this.addTeachers.city,	1159	city: this.addTeachers.city,
1160	pincode: this.addTeachers.pincode,	1160	pincode: this.addTeachers.pincode,
1161	country: this.addTeachers.country,	1161	country: this.addTeachers.country,
1162	permanentAddress: this.addTeachers.permanentAddress,	1162	permanentAddress: this.addTeachers.permanentAddress,
1163	presentAddress: this.addTeachers.presentAddress,	1163	presentAddress: this.addTeachers.presentAddress,
1164	mobileNo: this.addTeachers.mobileNo,	1164	mobileNo: this.addTeachers.mobileNo,
1165	state: this.addTeachers.state,	1165	state: this.addTeachers.state,
1166	joinDate: this.addTeachers.joinDate	1166	joinDate: this.addTeachers.joinDate
1167	};	1167	};
1168	if (this.imageUrl) {	1168	if (this.imageUrl) {
1169	var str = this.imageUrl;	1169	var str = this.imageUrl;
1170	const [baseUrl, imageUrl] = str.split(/,/);	1170	const [baseUrl, imageUrl] = str.split(/,/);
1171	addTeacher.upload = imageUrl;	1171	addTeacher.upload = imageUrl;
1172	}	1172	}
1173	this.loading = true;	1173	this.loading = true;
1174	http()	1174	http()
1175	.post("/createTeacher", addTeacher)	1175	.post("/createTeacher", addTeacher)
1176	.then(response => {	1176	.then(response => {
1177	this.imageUrl = "";	1177	this.imageUrl = "";
1178	this.getTeacherList();	1178	this.getTeacherList();
1179	this.snackbar = true;	1179	this.snackbar = true;
1180	this.text = "New Teacher added successfully";	1180	this.text = "New Teacher added successfully";
1181	this.color = "green";	1181	this.color = "green";
1182	this.clear();	1182	this.clear();
1183	this.loading = false;	1183	this.loading = false;
1184	this.addTeacherDialog = false;	1184	this.addTeacherDialog = false;
1185	})	1185	})
1186	.catch(error => {	1186	.catch(error => {
1187	this.snackbar = true;	1187	this.snackbar = true;
1188	this.text = error.response.data.message;	1188	this.text = error.response.data.message;
1189	this.color = "error";	1189	this.color = "error";
1190	this.loading = false;	1190	this.loading = false;
1191	});	1191	});
1192	}	1192	}
1193	},	1193	},
1194	clear() {	1194	clear() {
1195	this.$refs.form.reset();	1195	this.$refs.form.reset();
1196	this.imageUrl = "";	1196	this.imageUrl = "";
1197	},	1197	},
1198	save() {	1198	save() {
1199	this.loading = true;	1199	this.loading = true;
1200	let editTeacher = {	1200	let editTeacher = {
1201	teacherId: this.editedItem._id,	1201	teacherId: this.editedItem._id,
1202	name: this.editedItem.name,	1202	name: this.editedItem.name,
1203	email: this.editedItem.email,	1203	email: this.editedItem.email,
1204	role: this.editedItem.role,	1204	role: this.editedItem.role,
1205	dob: this.editedItem.dob,	1205	dob: this.editedItem.dob,
1206	city: this.editedItem.city,	1206	city: this.editedItem.city,
1207	pincode: this.editedItem.pincode,	1207	pincode: this.editedItem.pincode,
1208	country: this.editedItem.country,	1208	country: this.editedItem.country,
1209	permanentAddress: this.editedItem.permanentAddress,	1209	permanentAddress: this.editedItem.permanentAddress,
1210	presentAddress: this.editedItem.presentAddress,	1210	presentAddress: this.editedItem.presentAddress,
1211	mobileNo: this.editedItem.mobileNo,	1211	mobileNo: this.editedItem.mobileNo,
1212	state: this.editedItem.state,	1212	state: this.editedItem.state,
1213	joinDate: this.editedItem.joinDate	1213	joinDate: this.editedItem.joinDate
1214	};	1214	};
1215	if (this.imageUrl) {	1215	if (this.imageUrl) {
1216	var str = this.imageUrl;	1216	var str = this.imageUrl;
1217	const [baseUrl, imageUrl] = str.split(/,/);	1217	const [baseUrl, imageUrl] = str.split(/,/);
1218	editTeacher.upload = imageUrl;	1218	editTeacher.upload = imageUrl;
1219	}	1219	}
1220	http()	1220	http()
1221	.put("/updateTeacher", editTeacher)	1221	.put("/updateTeacher", editTeacher)
1222	.then(response => {	1222	.then(response => {
1223	this.snackbar = true;	1223	this.snackbar = true;
1224	this.text = "Successfully Edit Existing Teacher";	1224	this.text = "Successfully Edit Existing Teacher";
1225	this.color = "green";	1225	this.color = "green";
1226	this.loading = false;	1226	this.loading = false;
1227	this.getTeacherList();	1227	this.getTeacherList();
1228	this.closeEditTeacherDialog();	1228	this.closeEditTeacherDialog();
1229	})	1229	})
1230	.catch(error => {	1230	.catch(error => {
1231	this.snackbar = true;	1231	this.snackbar = true;
1232	this.text = error.response.data.message;	1232	this.text = error.response.data.message;
1233	this.color = "error";	1233	this.color = "error";
1234	this.loading = false;	1234	this.loading = false;
1235	});	1235	});
1236	},	1236	},
1237	suspendStatus(suspendStatus, id) {	1237	suspendStatus(suspendStatus, id) {
1238	let suspendStatusData = {	1238	let suspendStatusData = {
1239	teacherId: id,	1239	teacherId: id,
1240	status: suspendStatus	1240	status: suspendStatus
1241	};	1241	};
1242	this.showLoader = true;	1242	this.showLoader = true;
1243	http()	1243	http()
1244	.put("/suspendAccount", suspendStatusData)	1244	.put("/suspendAccount", suspendStatusData)
1245	.then(response => {	1245	.then(response => {
1246	this.getTeacherList();	1246	this.getTeacherList();
1247	this.text = response.data.message;	1247	this.text = response.data.message;
1248	this.color = "green";	1248	this.color = "green";
1249	this.snackbar = true;	1249	this.snackbar = true;
1250	this.showLoader = false;	1250	this.showLoader = false;
1251	})	1251	})
1252	.catch(error => {	1252	.catch(error => {
1253	this.snackbar = true;	1253	this.snackbar = true;
1254	this.color = "error";	1254	this.color = "error";
1255	this.text = error.response.data.message;	1255	this.text = error.response.data.message;
1256	this.showLoader = false;	1256	this.showLoader = false;
1257	});	1257	});
1258	},	1258	},
1259	displaySearch() {	1259	displaySearch() {
1260	(this.show = false), (this.showSearch = true);	1260	(this.show = false), (this.showSearch = true);
1261	},	1261	},
1262	closeSearch() {	1262	closeSearch() {
1263	this.showSearch = false;	1263	this.showSearch = false;
1264	this.show = true;	1264	this.show = true;
1265	this.search = "";	1265	this.search = "";
1266	}	1266	}
1267	},	1267	},
1268	mounted() {	1268	mounted() {
1269	const getCountryList = countryList();	1269	const getCountryList = countryList();
1270	this.countries = getCountryList;	1270	this.countries = getCountryList;
1271	this.getTeacherList();	1271	this.getTeacherList();
1272	this.role = this.$store.state.role;	1272	this.role = this.$store.state.role;
1273	}	1273	}
1274	};	1274	};
1275	</script>	1275	</script>
1276	<style scoped>	1276	<style scoped>
1277	.active {	1277	.active {
1278	background-color: gray;	1278	background-color: gray;
1279	color: white !important;	1279	color: white !important;
1280	}	1280	}
1281	.activebtn {	1281	.activebtn {
1282	color: black !important;	1282	color: black !important;
1283	}	1283	}
1284	</style>	1284	</style>