viithiisys / School-Management-dashboard

Browse Code »

Commit ceb43037a568d9cf3fcbaa517c1f1880a69f2ef6

Authored by Neeraj Sharma 2019-10-01 02:13:10 -0400

1 parent bf5ab636bf

Exists in master and in 3 other branches

fix bugs

Showing 8 changed files with 34 additions and 94 deletions Show diff stats

src/pages/Class/addclass.vue

Diff comments View file @ceb4303

1	<template>	1	<template>
2	<div>	2	<div>
3	<v-tabs grow slider-color="black">	3	<v-tabs grow slider-color="black">
4	<v-tab	4	<v-tab
5	ripple	5	ripple
6	@click="activeTab('existing')"	6	@click="activeTab('existing')"
7	v-bind:class="{ active: isActive }"	7	v-bind:class="{ active: isActive }"
8	id="tab"	8	id="tab"
9	class="subheading"	9	class="subheading"
10	>Existing Class</v-tab>	10	>Existing Class</v-tab>
11	<v-tab	11	<v-tab
12	ripple	12	ripple
13	@click="activeTab('new')"	13	@click="activeTab('new')"
14	v-bind:class="{ active: newActive }"	14	v-bind:class="{ active: newActive }"
15	id="tab1"	15	id="tab1"
16	User	16	User
17	class="subheading"	17	class="subheading"
18	>Add New Class</v-tab>	18	>Add New Class</v-tab>
19		19
20	<!-- **** EDITS ADD ClASS **** -->	20	<!-- **** EDITS ADD ClASS **** -->
21	<v-tab-item>	21	<v-tab-item>
22	<v-snackbar	22	<v-snackbar
23	:timeout="timeout"	23	:timeout="timeout"
24	:top="y === 'top'"	24	:top="y === 'top'"
25	:right="x === 'right'"	25	:right="x === 'right'"
26	:vertical="mode === 'vertical'"	26	:vertical="mode === 'vertical'"
27	v-model="snackbar"	27	v-model="snackbar"
28	color="success"	28	color="success"
29	>{{ text }}</v-snackbar>	29	>{{ text }}</v-snackbar>
30	<v-dialog v-model="dialog" max-width="500px">	30	<v-dialog v-model="dialog" max-width="500px">
31	<v-toolbar color="grey lighten-2">	31	<v-toolbar color="grey lighten-2">
32	<v-spacer></v-spacer>	32	<v-spacer></v-spacer>
33	<v-toolbar-title>	33	<v-toolbar-title>
34	<h3>Edit Class</h3>	34	<h3>Edit Class</h3>
35	</v-toolbar-title>	35	</v-toolbar-title>
36	<v-spacer></v-spacer>	36	<v-spacer></v-spacer>
37	</v-toolbar>	37	</v-toolbar>
38	<v-card>	38	<v-card>
39	<v-card-text>	39	<v-card-text>
40	<v-container>	40	<v-container>
41	<v-layout wrap justify-center>	41	<v-layout wrap justify-center>
42	<v-flex xs12 sm9>	42	<v-flex xs12 sm9>
43	<v-form ref="form" v-model="valid" lazy-validation>	43	<v-form ref="form" v-model="valid" lazy-validation>
44	<v-layout style="position:relative;">	44	<v-layout style="position:relative;">
45	<v-flex xs4 lg2 class="pt-4 subheading">	45	<v-flex xs4 lg2 class="pt-4 subheading">
46	<label>Class:</label>	46	<label>Class:</label>
47	</v-flex>	47	</v-flex>
48	<v-flex xs10>	48	<v-flex xs10>
49	<v-autocomplete	49	<v-autocomplete
50	v-model="editedItem.classNum"	50	v-model="editedItem.classNum"
51	:label="editedItem.classNum"	51	:label="editedItem.classNum"
52	:items="classList"	52	:items="classList"
53	:rules="nameRules"	53	:rules="nameRules"
54	></v-autocomplete>	54	></v-autocomplete>
55	</v-flex>	55	</v-flex>
56	</v-layout>	56	</v-layout>
57	<v-card-actions>	57	<v-card-actions>
58	<v-btn round dark @click.native="close">Cancel</v-btn>	58	<v-btn round dark @click.native="close">Cancel</v-btn>
59	<v-spacer></v-spacer>	59	<v-spacer></v-spacer>
60	<v-btn round dark @click="save">Save</v-btn>	60	<v-btn round dark @click="save">Save</v-btn>
61	</v-card-actions>	61	</v-card-actions>
62	</v-form>	62	</v-form>
63	</v-flex>	63	</v-flex>
64	</v-layout>	64	</v-layout>
65	</v-container>	65	</v-container>
66	</v-card-text>	66	</v-card-text>
67	</v-card>	67	</v-card>
68	</v-dialog>	68	</v-dialog>
69		69
70	<!-- **** PROFILE VIEW STUDENTS **** -->	70	<!-- **** PROFILE VIEW STUDENTS **** -->
71	<v-dialog v-model="dialog1" max-width="600px">	71	<v-dialog v-model="dialog1" max-width="600px">
72	<v-toolbar color="grey lighten-2">	72	<v-toolbar color="grey lighten-2">
73	<v-spacer></v-spacer>	73	<v-spacer></v-spacer>
74	<v-toolbar-title>	74	<v-toolbar-title>
75	<h3>Class Profile</h3>	75	<h3>Class Profile</h3>
76	</v-toolbar-title>	76	</v-toolbar-title>
77	<v-spacer></v-spacer>	77	<v-spacer></v-spacer>
78	<v-icon @click="close1">close</v-icon>	78	<v-icon @click="close1">close</v-icon>
79	</v-toolbar>	79	</v-toolbar>
80	<v-card>	80	<v-card>
81	<v-flex align-center justify-center layout text-xs-center>	81	<v-flex align-center justify-center layout text-xs-center>
82	<v-avatar size="50px" style="position:absolute; top:20px;">	82	<v-avatar size="50px" style="position:absolute; top:20px;">
83	<img src="/static/icon/user.png" />	83	<img src="/static/icon/user.png" />
84	</v-avatar>	84	</v-avatar>
85	</v-flex>	85	</v-flex>
86	<v-card-text>	86	<v-card-text>
87	<v-container grid-list-md>	87	<v-container grid-list-md>
88	<v-layout wrap>	88	<v-layout wrap>
89	<v-flex>	89	<v-flex>
90	<br />	90	<br />
91	<br />	91	<br />
92	<v-layout>	92	<v-layout>
93	<v-flex xs6 sm6>	93	<v-flex xs6 sm6>
94	<h5 class="right my-1">Class Name:</h5>	94	<h5 class="right my-1"><b>Class Name:</b></h5>
95	</v-flex>	95	</v-flex>
96	<v-flex sm6 xs6>	96	<v-flex sm6 xs6>
97	<h5 class="my-1">{{ editedItem.classNum }}</h5>	97	<h5 class="my-1">{{ editedItem.classNum }}</h5>
98	</v-flex>	98	</v-flex>
99	</v-layout>	99	</v-layout>
100	</v-flex>	100	</v-flex>
101	</v-layout>	101	</v-layout>
102	</v-container>	102	</v-container>
103	</v-card-text>	103	</v-card-text>
104	</v-card>	104	</v-card>
105	</v-dialog>	105	</v-dialog>
106		106
107	<v-snackbar	107	<v-snackbar
108	:timeout="timeout"	108	:timeout="timeout"
109	:top="y === 'top'"	109	:top="y === 'top'"
110	:right="x === 'right'"	110	:right="x === 'right'"
111	:vertical="mode === 'vertical'"	111	:vertical="mode === 'vertical'"
112	v-model="snackbar"	112	v-model="snackbar"
113	color="success"	113	color="success"
114	>{{ text }}</v-snackbar>	114	>{{ text }}</v-snackbar>
115		115
116	<!-- **** EXISTING-USERS Classess Table **** -->	116	<!-- **** EXISTING-USERS Classess Table **** -->
117	<v-data-table	117	<v-data-table
118	:headers="headers"	118	:headers="headers"
119	:items="desserts"	119	:items="desserts"
120	:pagination.sync="pagination"	120	:pagination.sync="pagination"
121	:search="search"	121	:search="search"
122	>	122	>
123	<template slot="items" slot-scope="props">	123	<template slot="items" slot-scope="props">
124	<td>{{ props.index }}</td>	124	<td>{{ props.index }}</td>
125	<td class="text-xs-center">{{ props.item.classNum}}</td>	125	<td class="text-xs-center">{{ props.item.classNum}}</td>
126	<td class="text-xs-center">	126	<td class="text-xs-center">
127	<span>	127	<span>
128	<img	128	<img
129	style="cursor:pointer; width:25px; height:18px; "	129	style="cursor:pointer; width:25px; height:18px; "
130	class="mr-5"	130	class="mr-5"
131	@click="profile(props.item)"	131	@click="profile(props.item)"
132	src="/static/icon/eye1.png"	132	src="/static/icon/eye1.png"
133	/>	133	/>
134	<img	134	<img
135	style="cursor:pointer; width:20px; height:18px; "	135	style="cursor:pointer; width:20px; height:18px; "
136	class="mr-5"	136	class="mr-5"
137	@click="editItem(props.item)"	137	@click="editItem(props.item)"
138	src="/static/icon/edit1.png"	138	src="/static/icon/edit1.png"
139	/>	139	/>
140	<img	140	<img
141	style="cursor:pointer; width:20px; height:20px; "	141	style="cursor:pointer; width:20px; height:20px; "
142	class="mr-5"	142	class="mr-5"
143	@click="deleteItem(props.item)"	143	@click="deleteItem(props.item)"
144	src="/static/icon/delete1.png"	144	src="/static/icon/delete1.png"
145	/>	145	/>
146	</span>	146	</span>
147	</td>	147	</td>
148	</template>	148	</template>
149	<v-alert	149	<v-alert
150	slot="no-results"	150	slot="no-results"
151	:value="true"	151	:value="true"
152	color="error"	152	color="error"
153	icon="warning"	153	icon="warning"
154	>Your search for "{{ search }}" found no results.</v-alert>	154	>Your search for "{{ search }}" found no results.</v-alert>
155	</v-data-table>	155	</v-data-table>
156	</v-tab-item>	156	</v-tab-item>
157		157
158	<!-- **** ADD multiple Classess **** -->	158	<!-- **** ADD multiple Classess **** -->
159	<v-tab-item>	159	<v-tab-item>
160	<v-container>	160	<v-container>
161	<v-snackbar	161	<v-snackbar
162	:timeout="timeout"	162	:timeout="timeout"
163	:top="y === 'top'"	163	:top="y === 'top'"
164	:right="x === 'right'"	164	:right="x === 'right'"
165	:vertical="mode === 'vertical'"	165	:vertical="mode === 'vertical'"
166	v-model="snackbar"	166	v-model="snackbar"
167	color="success"	167	color="success"
168	>{{ text }}</v-snackbar>	168	>{{ text }}</v-snackbar>
169	<v-flex xs12 sm8 offset-sm2 class="top">	169	<v-flex xs12 sm8 offset-sm2 class="top">
170	<v-card flat>	170	<v-card flat>
171	<v-container fluid fill-height>	171	<v-container fluid fill-height>
172	<v-layout align-center>	172	<v-layout align-center>
173	<v-flex xs12 class="mt-4">	173	<v-flex xs12 class="mt-4">
174	<v-form ref="form" v-model="valid" lazy-validation>	174	<v-form ref="form" v-model="valid" lazy-validation>
175	<v-layout>	175	<v-layout>
176	<v-flex xs4 class="pt-4 subheading">	176	<v-flex xs4 class="pt-4 subheading">
177	<label class="right">Class :</label>	177	<label class="right">Class :</label>
178	</v-flex>	178	</v-flex>
179	<v-flex xs6 class="ml-3">	179	<v-flex xs6 class="ml-3">
180	<v-autocomplete	180	<v-autocomplete
181	v-model="addclasses.classNum"	181	v-model="addclasses.classNum"
182	placeholder="fill your class Name"	182	placeholder="fill your class Name"
183	type="text"	183	type="text"
184	:items="classList"	184	:items="classList"
185	:rules="nameRules"	185	:rules="nameRules"
186	required	186	required
187	></v-autocomplete>	187	></v-autocomplete>
188	</v-flex>	188	</v-flex>
189	</v-layout>	189	</v-layout>
190	<v-layout>	190	<v-layout>
191	<v-flex xs12 sm9 offset-sm2>	191	<v-flex xs12 sm9 offset-sm2>
192	<v-card-actions>	192	<v-card-actions>
193	<v-spacer></v-spacer>	193	<v-spacer></v-spacer>
194	<v-btn @click="submit" round dark :loading="loading">Add</v-btn>	194	<v-btn @click="submit" round dark :loading="loading">Add</v-btn>
195	<v-spacer></v-spacer>	195	<v-spacer></v-spacer>
196	</v-card-actions>	196	</v-card-actions>
197	</v-flex>	197	</v-flex>
198	</v-layout>	198	</v-layout>
199	</v-form>	199	</v-form>
200	</v-flex>	200	</v-flex>
201	</v-layout>	201	</v-layout>
202	</v-container>	202	</v-container>
203	</v-card>	203	</v-card>
204	</v-flex>	204	</v-flex>
205	</v-container>	205	</v-container>
206	</v-tab-item>	206	</v-tab-item>
207	</v-tabs>	207	</v-tabs>
208	<div class="loader" v-if="showLoader">	208	<div class="loader" v-if="showLoader">
209	<v-progress-circular indeterminate color="white"></v-progress-circular>	209	<v-progress-circular indeterminate color="white"></v-progress-circular>
210	</div>	210	</div>
211	</div>	211	</div>
212	</template>	212	</template>
213		213
214	<script>	214	<script>
215	import http from "@/Services/http.js";	215	import http from "@/Services/http.js";
216	import Util from "@/util";	216	import Util from "@/util";
217		217
218	export default {	218	export default {
219	data: () => ({	219	data: () => ({
220	snackbar: false,	220	snackbar: false,
221	y: "top",	221	y: "top",
222	x: "right",	222	x: "right",
223	mode: "",	223	mode: "",
224	timeout: 3000,	224	timeout: 3000,
225	text: "",	225	text: "",
226	showLoader: false,	226	showLoader: false,
227	loading: false,	227	loading: false,
228	date: null,	228	date: null,
229	search: "",	229	search: "",
230	dialog: false,	230	dialog: false,
231	dialog1: false,	231	dialog1: false,
232	valid: true,	232	valid: true,
233	isActive: true,	233	isActive: true,
234	newActive: false,	234	newActive: false,
235	AddUsercredentials: {},	235	AddUsercredentials: {},
236	pagination: {	236	pagination: {
237	rowsPerPage: 15	237	rowsPerPage: 15
238	},	238	},
239	nameRules: [v => !!v \|\| " Class Name is required"],	239	nameRules: [v => !!v \|\| " Class Name is required"],
240	headers: [	240	headers: [
241	{	241	{
242	text: "No",	242	text: "No",
243	align: "left",	243	align: "left",
244	sortable: false,	244	sortable: false,
245	value: "No"	245	value: "No"
246	},	246	},
247	{ text: "Class No", value: "classNum", sortable: false, align: "center" },	247	{ text: "Class No", value: "classNum", sortable: false, align: "center" },
248		248
249	{ text: "Action", value: "", sortable: false, align: "center" }	249	{ text: "Action", value: "", sortable: false, align: "center" }
250	],	250	],
251	desserts: [],	251	desserts: [],
252	classList: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],	252	classList: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
253	editedIndex: -1,	253	editedIndex: -1,
254	editedItem: {	254	editedItem: {
255	classNum: ""	255	classNum: ""
256	},	256	},
257	addclasses: {	257	addclasses: {
258	classNum: ""	258	classNum: ""
259	}	259	}
260	}),	260	}),
261	methods: {	261	methods: {
262	getClassList() {	262	getClassList() {
263	this.showLoader = true;	263	this.showLoader = true;
264	var token = this.$store.state.token;	264	var token = this.$store.state.token;
265	http()	265	http()
266	.get("/getClassesList")	266	.get("/getClassesList")
267	.then(response => {	267	.then(response => {
268	this.desserts = response.data.data;	268	this.desserts = response.data.data;
269	this.showLoader = false;	269	this.showLoader = false;
270	})	270	})
271	.catch(err => {	271	.catch(err => {
272	console.log("err====>", err);	272	console.log("err====>", err);
273	this.showLoader = false;	273	this.showLoader = false;
274	if (error.response.status === 401) {	274	if (error.response.status === 401) {
275	this.$router.replace({ path: "/" });	275	this.$router.replace({ path: "/" });
276	this.$store.dispatch("setToken", null);	276	this.$store.dispatch("setToken", null);
277	this.$store.dispatch("Id", null);	277	this.$store.dispatch("Id", null);
278	}	278	}
279	});	279	});
280	},	280	},
281	editItem(item) {	281	editItem(item) {
282	this.editedIndex = this.desserts.indexOf(item);	282	this.editedIndex = this.desserts.indexOf(item);
283	this.editedItem = Object.assign({}, item);	283	this.editedItem = Object.assign({}, item);
284	this.dialog = true;	284	this.dialog = true;
285	},	285	},
286	profile(item) {	286	profile(item) {
287	this.editedIndex = this.desserts.indexOf(item);	287	this.editedIndex = this.desserts.indexOf(item);
288	this.editedItem = Object.assign({}, item);	288	this.editedItem = Object.assign({}, item);
289	this.dialog1 = true;	289	this.dialog1 = true;
290	},	290	},
291	deleteItem(item) {	291	deleteItem(item) {
292	let deleteStudent = {	292	let deleteStudent = {
293	classId: item._id	293	classId: item._id
294	};	294	};
295	http()	295	http()
296	.delete(	296	.delete(
297	"/deleteClass",	297	"/deleteClass",
298	confirm("Are you sure you want to delete this?") && {	298	confirm("Are you sure you want to delete this?") && {
299	params: deleteStudent	299	params: deleteStudent
300	}	300	}
301	)	301	)
302	.then(response => {	302	.then(response => {
303	// console.log("deleteUers",deleteStudent)	303	// console.log("deleteUers",deleteStudent)
304	if ((this.snackbar = true)) {	304	if ((this.snackbar = true)) {
305	this.text = "Successfully delete Existing Class";	305	this.text = "Successfully delete Existing Class";
306	}	306	}
307	this.getClassList();	307	this.getClassList();
308	})	308	})
309	.catch(error => {	309	.catch(error => {
310	// console.log(error);	310	// console.log(error);
311	});	311	});
312	},	312	},
313	activeTab(type) {	313	activeTab(type) {
314	switch (type) {	314	switch (type) {
315	case "existing":	315	case "existing":
316	this.newActive = false;	316	this.newActive = false;
317	this.isActive = true;	317	this.isActive = true;
318	break;	318	break;
319		319
320	default:	320	default:
321	this.newActive = true;	321	this.newActive = true;
322	this.isActive = false;	322	this.isActive = false;
323	break;	323	break;
324	}	324	}
325	},	325	},
326	close() {	326	close() {
327	this.dialog = false;	327	this.dialog = false;
328	setTimeout(() => {	328	setTimeout(() => {
329	this.editedItem = Object.assign({}, this.defaultItem);	329	this.editedItem = Object.assign({}, this.defaultItem);
330	this.editedIndex = -1;	330	this.editedIndex = -1;
331	}, 300);	331	}, 300);
332	},	332	},
333	close1() {	333	close1() {
334	this.dialog1 = false;	334	this.dialog1 = false;
335	},	335	},
336	submit() {	336	submit() {
337	if (this.$refs.form.validate()) {	337	if (this.$refs.form.validate()) {
338	let addClass = {	338	let addClass = {
339	classNum: this.addclasses.classNum	339	classNum: this.addclasses.classNum
340	};	340	};
341	console.log(addClass);	341	console.log(addClass);
342	this.loading = true;	342	this.loading = true;
343	http()	343	http()
344	.post("/createClass", addClass)	344	.post("/createClass", addClass)
345	.then(response => {	345	.then(response => {
346	this.getClassList();	346	this.getClassList();
347	if ((this.snackbar = true)) {	347	if ((this.snackbar = true)) {
348	this.text = "New class added successfully";	348	this.text = "New class added successfully";
349	}	349	}
350	this.clear();	350	this.clear();
351	this.loading = false;	351	this.loading = false;
352	})	352	})
353	.catch(error => {	353	.catch(error => {
354	// console.log(error);	354	// console.log(error);
355	this.loading = false;	355	this.loading = false;
356	if ((this.snackbar = true)) {	356	if ((this.snackbar = true)) {
357	this.text = error.response.data.message;	357	this.text = error.response.data.message;
358	}	358	}
359	});	359	});
360	}	360	}
361	},	361	},
362	clear() {	362	clear() {
363	this.$refs.form.reset();	363	this.$refs.form.reset();
364	},	364	},
365	save() {	365	save() {
366	let editClass = {	366	let editClass = {
367	classId: this.editedItem._id,	367	classId: this.editedItem._id,
368	classNum: this.editedItem.classNum	368	classNum: this.editedItem.classNum
369	};	369	};
370	http()	370	http()
371	.put("/updateClass", editClass)	371	.put("/updateClass", editClass)
372	.then(response => {	372	.then(response => {
373	if ((this.snackbar = true)) {	373	if ((this.snackbar = true)) {
374	this.text = "Successfully Edit Existing Class";	374	this.text = "Successfully Edit Existing Class";
375	}	375	}
376	this.getClassList();	376	this.getClassList();
377	})	377	})
378	.catch(error => {	378	.catch(error => {
379	// console.log(error);	379	// console.log(error);
380	});	380	});
381	this.close();	381	this.close();
382	}	382	}
383	},	383	},
384	mounted() {	384	mounted() {
385	this.getClassList();	385	this.getClassList();
386	// console.log("this.search",this.search)	386	// console.log("this.search",this.search)
387	},	387	},
388	created() {	388	created() {
389	this.$root.$on("app:search", search => {	389	this.$root.$on("app:search", search => {
390	this.search = search;	390	this.search = search;
391	});	391	});
392	},	392	},
393	beforeDestroy() {	393	beforeDestroy() {
394	// dont forget to remove the listener	394	// dont forget to remove the listener
395	this.$root.$off("app:search");	395	this.$root.$off("app:search");
396	}	396	}
397	};	397	};
398	</script>	398	</script>
399	<style>	399	<style>
400	.active {	400	.active {
401	background-color: black;	401	background-color: black;
402	color: white !important;	402	color: white !important;
403	}	403	}
404	.activebtn {	404	.activebtn {
405	color: black !important;	405	color: black !important;
406	}	406	}
407	</style>	407	</style>

src/pages/Dashboard/dashboard.vue

Diff comments View file @ceb4303

 <template>
   <v-app id="pages-dasboard">
     <v-tabs icons-and-text centered>
       <v-tabs-slider color="green"></v-tabs-slider>
       <v-tab href="#tab-1">
         Events
         <v-icon>event</v-icon>
       </v-tab>
       <v-tab href="#tab-2">
         Holidays
         <v-icon>star</v-icon>
       </v-tab>
       <v-tab-item id="tab-1">
         <v-card flat>
           <full-calendar ref="calendar" :events="events" :config="config"></full-calendar>
         </v-card>
       </v-tab-item>
       <v-tab-item id="tab-2">
         <v-card flat>
           <full-calendar ref="calendar" :events="eventHoliday" :config="config"></full-calendar>
         </v-card>
       </v-tab-item>
     </v-tabs>
     <v-dialog v-model="dialog" max-width="500">
       <v-card color="grey lighten-4" flat>
         <v-toolbar dark color="fixcolors">
           <v-toolbar-side-icon></v-toolbar-side-icon>
           <!-- <v-toolbar-title class="white--text">Title</v-toolbar-title> -->
           <v-spacer></v-spacer>
           <v-btn icon @click="dialog= false">
             <v-icon>close</v-icon>
           </v-btn>
         </v-toolbar>
         <v-flex class="py-4">
           <v-list-tile>
             <v-list-tile-action>
               <v-icon>edit</v-icon>
             </v-list-tile-action>
             <v-list-tile-content>
               <v-list-tile-title>{{ selected.title }}</v-list-tile-title>
             </v-list-tile-content>
           </v-list-tile>
           <v-list-tile>
             <v-list-tile-action>
               <v-icon>access_time</v-icon>
             </v-list-tile-action>
             <v-list-tile-content>
               <v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title>
               <!-- <v-list-tile-sub-title>{{ date(selected.end) }}</v-list-tile-sub-title> -->
             </v-list-tile-content>
           </v-list-tile>
         </v-flex>
       </v-card>
     </v-dialog>
     <div class="loader" v-if="showLoader">
       <v-progress-circular indeterminate color="white"></v-progress-circular>
     </div>
   </v-app>
 </template>
 <script>
 import http from "@/Services/http.js";
 import Util from "@/util";
 import moment from "moment";
 export default {
   data() {
     return {
       showLoader: false,
       dialog: false,
-      events: [
+      events: [],
-        {
-          title: "",
-          start: ""
-        }
-      ],
       eventHoliday: [],
       config: {
         eventClick: event => {
           this.selected = event;
           this.dialog = true;
         }
       },
       selected: {}
     };
   },
   methods: {
     date: function(date) {
       return moment(date).format("MMMM DD, YYYY  HH:mm:ss");
     },
     refreshEvents() {
       this.$refs.calendar.$emit("refetch-events");
     },
     removeEvent() {
       this.$refs.calendar.$emit("remove-event", this.selected);
       this.selected = {};
     },
     eventSelected(event) {
       this.selected = event;
       console.log("this.selected", this.selected);
     },
     eventCreated(...test) {
       console.log(test);
     },
     // getEvents() {
     //   this.showLoader = true;
     //   var token = this.$store.state.token;
     //   http()
     //     .get("/getSchoolEventsList", {
     //       headers: { Authorization: "Bearer " + token }
     //     })
     //     .then(response => {
     //       for(var i=0; i<response.data.data.length;i++){
     //         console.log(response.data.data[i])
     //         this.events = [
     //           {
     //             title:response.data.data[i].title,
     //             start:response.data.data[i].dateOfEvent
     //           }
     //         ]
     //       }
     //       this.showLoader = false;
     //     })
     //     .catch(err => {
     //       // console.log("err====>", err);
     //       this.showLoader = false;
     //       if (error.response.status === 401) {
     //         this.$router.replace({ path: "/" });
     //         this.$store.dispatch("setToken", null);
     //         this.$store.dispatch("Id", null);
     //       }
     //     });
     // }
     getHolidays() {
       this.showLoader = true;
       var token = this.$store.state.token;
       http()
         .get("/getHolidaysList", {
           headers: { Authorization: "Bearer " + token }
         })
         .then(response => {
-          for (var i = 0; i < response.data.data.length; i++) {
+          this.eventHoliday = response.data.data;
-            this.eventHoliday = [
-              {
-                title: response.data.data[i].occasion,
-                date: response.data.data[i].dateOfHoliday
-              }
-            ];
-          }
-          this.showLoader = false;
-        })
-        .catch(err => {
-          // console.log("err====>", err);
-          this.showLoader = false;
-          if (error.response.status === 401) {
-            this.$router.replace({ path: "/" });
-            this.$store.dispatch("setToken", null);
-            this.$store.dispatch("Id", null);
-          }
-        });
-    }
-  },
-  computed: {
-    getEvents() {
-      this.showLoader = true;
-      var token = this.$store.state.token;
-      http()
-        .get("/getSchoolEventsList", {
-          headers: { Authorization: "Bearer " + token }
-        })
-        .then(response => {
-          for (var i = 0; i < response.data.data.length; i++) {
-            this.events = [
-              {
-                title: response.data.data[i].title,
-                start: response.data.data[i].dateOfEvent
-              }
-            ];
-          }
           this.showLoader = false;
         })
         .catch(err => {
           // console.log("err====>", err);
           this.showLoader = false;
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
           }
         });
     }
     // eventSources() {
     //   const self = this;
     //   return [
     //     {
     //       events(start, end, timezone, callback) {
     //         setTimeout(() => {
     //           callback(self.events.filter(() => Math.random() > 0.5));
     //         }, 1000);
     //       }
     //     }
     //   ];
     // }
   },
   mounted() {
     // this.getEvents();
     var token = this.$store.state.token;
     http()
       .get("/getSchoolEventsList", {
         headers: { Authorization: "Bearer " + token }
       })
       .then(response => {
-        // this.events = response.data.data;
+        this.events = response.data.data;
-        //  console.log(this.events)
-        for (var i = 0; i < response.data.data.length; i++) {
-          this.events = [
-            {
-              title: response.data.data[i].title,
-              date: response.data.data[i].dateOfEvent
-            }
-          ];
-        }
-        // this.events = [
-        //   { title: "event 1", date: "2019-09-30",desciptiom:"dataA" },
-        //   { title: "event 2", date: "2019-09-29",desciptiom:"dataB" }
-        // ];
         this.showLoader = false;
       })
-      .catch(err => {
+      .catch(error => {
         // console.log("err====>", err);
         this.showLoader = false;
         if (error.response.status === 401) {
           this.$router.replace({ path: "/" });
           this.$store.dispatch("setToken", null);
           this.$store.dispatch("Id", null);
         }
       });
     this.getHolidays();
   }
 };
 </script>
 <style>
 @import "fullcalendar/dist/fullcalendar.css";
 .fc button {
   background: #39b982 !important;
   border: none;
   border-radius: 4px;
   color: white;
   padding: 6px 32px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   font-size: 18px;
   margin: 8px 2px !important;
   cursor: pointer;
   -webkit-transition-duration: 0.4s;
   transition-duration: 0.4s;
   box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 .v-tabs__container--icons-and-text {
   height: 64px !important;
 }
 .v-tabs__div {
   text-transform: none;
 }
 .v-input__prepend-outer {
   margin-right: 0px !important;
 }
 .v-card__actions .v-btn {
   margin: 0 15px;
   min-width: 120px;
 }
 .primary {
   background-color: #aaa !important;
   border-color: #aaa !important;
 }
 h4 {
   background-repeat: no-repeat;
   padding: 8px;
   margin: auto;
   font-size: 25px;
 }
 #name {
   position: absolute;
   left: 100px;
   top: 17px;
 }
 #icon {
   position: absolute;
   right: 8px;
   top: 8px;
 }
 #m {
   position: relative;
   left: 135px;
   top: -15px;
 }
 #G {
   position: absolute;
   top: 38px;
   color: white;
 }
 #bt {
   position: relative;
   top: -20px;
   left: 115px;
 }
 #e {
   position: relative;
   top: 5px;
   right: -30px;
   height: 17px;
   cursor: pointer;
 }
 #d {
   position: relative;
   top: 5px;
   right: -70px;
   height: 17px;
   cursor: pointer;
 }
 #indexId {
   padding: 0 0px !important;
 }
 #td {
   border: 1px solid #dddddd;
   text-align: left;
   padding: 8px;
 }
 #dialog {
   height: 550px;
 }
 .active {
   background-color: black;
   color: white !important;
 }
 .activebtn {
   color: black !important;
 }
 #flex {
   height: 300px;
 }
 .top {
   margin-top: 100px;
 }
 .v-tabs__item a {
   font-size: 16px !important;
 }
 @media screen and (max-width: 769px) {
   .top {
     margin-top: 0 !important;
   }
   .userSearch .v-icon {
     font-size: 20px !important;
     margin-left: 20px;
   }
 }
 @media screen and (max-width: 380px) {
   .pl-3 {
     padding-left: 0px !important;
   }
   .right {
     float: none !important;
   }
   .subheading {
     font-size: 14px !important;
   }
   .v-card__actions .v-btn {
     margin: 0 0px;
     min-width: 100px;
   }
   .subheading {
     font-size: 12px !important;
   }
   h5 {
     font-size: 13px;
   }
 }
 .v-icon {
   font-size: 30px;
 }
 @media screen and (min-width: 1270px) {
   .hide {
     display: none;
   }
 }
 @media screen and (max-width: 420px) {
   .userSearch .v-text-field .v-label {
     line-height: 24px !important;
   }
   .userSearch .v-label {
     font-size: 13px !important;
   }
   .v-list__tile {
     font-size: 14px;
     padding: 0 10px;
   }
   .name {
     font-size: 15px;
   }
 }
 </style>

src/pages/Event/event.vue

Diff comments View file @ceb4303

 <template>
   <v-app id="pages-dasboard">
     <v-tabs grow slider-color="black">
       <v-tab
         ripple
         @click="activeTab('existing')"
         v-bind:class="{ active: isActive }"
         id="tab"
         class="subheading"
       >Existing Event</v-tab>
       <v-tab
         ripple
         @click="activeTab('new')"
         v-bind:class="{ active: newActive }"
         id="tab1"
         User
         class="subheading"
       >Add New Event</v-tab>
       <!-- ****** EDITS  EVENT DETAILS ****** -->
       <v-tab-item>
         <v-snackbar
           :timeout="timeout"
           :top="y === 'top'"
           :right="x === 'right'"
           :vertical="mode === 'vertical'"
           v-model="snackbar"
           color="success"
         >{{ text }}</v-snackbar>
         <v-dialog v-model="dialog" max-width="600px">
           <v-flex xs12 sm12>
             <v-toolbar color="v-toolbar">
               <v-spacer></v-spacer>
               <v-toolbar-title>
                 <h3>Edit Event</h3>
               </v-toolbar-title>
               <v-spacer></v-spacer>
             </v-toolbar>
             <v-card flat>
               <v-form ref="form">
                 <v-container fluid>
                   <v-layout>
                     <!-- <v-flex
                       xs12
                       class="text-xs-center text-sm-center text-md-center text-lg-center mr-4"
                     >
                       <v-avatar size="100px">
                         <img src="/static/icon/user.png" />
                     </v-avatar>-->
                     <!-- <input
                         type="file"
                         style="display: none"
                         ref="image"
                         accept="image/*"
                         @change="onFilePicked"
                       />
                       <img
                         :src="imageData.imageUrl"
                         height="150"
                         v-if="imageUrl"
                         style="border-radius:50%; width:200px"
                     />-->
                     <!-- </v-flex> -->
                   </v-layout>
                   <v-flex xs12 sm12>
                     <v-layout>
                       <v-flex xs4 class="pt-4 subheading">
                         <label class="right">Title:</label>
                       </v-flex>
                       <v-flex xs5 class="ml-3">
                         <v-text-field
                           v-model="editedItem.title"
                           placeholder="fill your Title"
                           name="name"
                           type="text"
                         ></v-text-field>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                   <v-flex xs12 sm12>
                     <v-layout>
                       <v-flex xs4 class="pt-4 subheading">
                         <label class="right">Date:</label>
                       </v-flex>
                       <v-flex xs5 class="ml-3">
                         <v-menu
                           ref="menu"
                           :close-on-content-click="false"
                           v-model="menu"
                           :nudge-right="40"
                           lazy
                           transition="scale-transition"
                           offset-y
                           full-width
                           min-width="290px"
                         >
                           <v-text-field
                             slot="activator"
                             :rules="dateRules"
                             v-model="editedItem.dateOfEvent"
                             placeholder="Select date"
                           ></v-text-field>
                           <v-date-picker
                             ref="picker"
                             v-model="editedItem.dateOfEvent"
-                            @input="menu = false"
+                            @input="$refs.menu.save(editedItem.dateOfEvent)"
                           ></v-date-picker>
                         </v-menu>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                   <v-flex xs12 sm12>
                     <v-layout>
                       <v-flex xs4 class="pt-4 subheading">
                         <label class="right">Description:</label>
                       </v-flex>
                       <v-flex xs5 class="ml-3">
                         <v-text-field
                           placeholder="fill your Description"
                           v-model="editedItem.description"
                           type="text"
                         ></v-text-field>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                   <v-layout>
                     <v-flex xs12 sm10 offset-sm1>
                       <v-card-actions>
                         <v-btn round dark @click.native="close">Cancel</v-btn>
                         <v-spacer></v-spacer>
                         <v-btn round dark @click="save">Save</v-btn>
                       </v-card-actions>
                     </v-flex>
                   </v-layout>
                 </v-container>
               </v-form>
             </v-card>
           </v-flex>
         </v-dialog>
         <!-- ****** PROFILE VIEW EVENT DEATILS ******  -->
         <v-dialog v-model="dialog1" max-width="700px">
           <v-toolbar color="white">
             <v-spacer></v-spacer>
             <v-toolbar-title>
               <h3>Event</h3>
             </v-toolbar-title>
             <v-spacer></v-spacer>
             <v-icon @click="close1">close</v-icon>
           </v-toolbar>
           <v-card>
-            <!-- <v-flex align-center justify-center layout text-xs-center>
-              <v-avatar size="50px" style="position:absolute; top:20px;">
-                <img src="/static/icon/user.png" />
-              </v-avatar>
-            </v-flex>-->
             <v-card-text>
               <v-container grid-list-md>
                 <v-layout wrap>
                   <v-flex>
                     <v-layout>
                       <v-flex xs5 sm6>
-                        <h5 class="right my-1">Title:</h5>
+                        <h5 class="right my-1"><b>Title:</b></h5>
                       </v-flex>
                       <v-flex sm6 xs8>
                         <h5 class="my-1">{{ editedItem.title }}</h5>
                       </v-flex>
                     </v-layout>
                     <v-layout>
                       <v-flex xs5 sm6>
-                        <h5 class="right my-1">Date:</h5>
+                        <h5 class="right my-1"><b>Date:</b></h5>
                       </v-flex>
                       <v-flex sm6 xs8>
                         <h5 class="my-1">{{ dates(editedItem.dateOfEvent) }}</h5>
                       </v-flex>
                     </v-layout>
                     <v-layout>
                       <v-flex xs5 sm6>
-                        <h5 class="right my-1">Description:</h5>
+                        <h5 class="right my-1"><b>Description:</b></h5>
                       </v-flex>
                       <v-flex sm6 xs8>
                         <h5 class="my-1">{{ editedItem.description }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                 </v-layout>
               </v-container>
             </v-card-text>
           </v-card>
         </v-dialog>
         <v-snackbar
           :timeout="timeout"
           :top="y === 'top'"
           :right="x === 'right'"
           :vertical="mode === 'vertical'"
           v-model="snackbar"
           color="success"
         >{{ text }}</v-snackbar>
         <!-- ****** EXISTING-USERS EVENT TABLE ****** -->
         <v-data-table
           :headers="headers"
           :items="desserts"
           :pagination.sync="pagination"
           :search="search"
         >
           <template slot="items" slot-scope="props">
             <td id="td" class="text-xs-center">{{ props.index}}</td>
             <td id="td" class="text-xs-center">{{ props.item.title}}</td>
             <td id="td" class="text-xs-center">{{ dates(props.item.dateOfEvent)}}</td>
             <td id="td" class="text-xs-center">{{ props.item.description}}</td>
             <td id="td" class="text-xs-center">
               <span>
                 <img
                   style="cursor:pointer; width:25px; height:18px; "
                   class="mr-5"
                   @click="profile(props.item)"
                   src="/static/icon/eye1.png"
                 />
                 <img
                   style="cursor:pointer; width:20px; height:18px; "
                   class="mr-5"
                   @click="editItem(props.item)"
                   src="/static/icon/edit1.png"
                 />
                 <img
                   style="cursor:pointer;width:20px; height:20px; "
                   class="mr-5"
                   @click="deleteItem(props.item)"
                   src="/static/icon/delete1.png"
                 />
               </span>
             </td>
           </template>
           <v-alert
             slot="no-results"
             :value="true"
             color="error"
             icon="warning"
           >Your search for "{{ search }}" found no results.</v-alert>
         </v-data-table>
       </v-tab-item>
       <!-- ****** ADD MULTIPLE EVENT ****** -->
       <v-tab-item>
         <v-container>
           <v-snackbar
             :timeout="timeout"
             :top="y === 'top'"
             :right="x === 'right'"
             :vertical="mode === 'vertical'"
             v-model="snackbar"
             color="success"
           >{{ text }}</v-snackbar>
           <v-flex xs12 sm12 class="my-4">
             <v-card flat>
               <v-form ref="form" v-model="valid" lazy-validation>
                 <v-container fluid>
                   <v-layout>
                     <!-- <v-flex
                       xs12
                       class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
                     >
                       <v-avatar size="100px">
                         <img src="/static/icon/user.png" />
                     </v-avatar>-->
                     <!-- <input
                         type="file"
                         style="display: none"
                         ref="image"
                         accept="image/*"
                         @change="onFilePicked"
                       />
                       <img
                         :src="imageData.imageUrl"
                         height="150"
                         v-if="imageUrl"
                         style="border-radius:50%; width:200px"
                     />-->
                     <!-- </v-flex> -->
                   </v-layout>
                   <v-flex xs12>
                     <v-layout>
                       <v-flex xs4 class="pt-4 subheading">
                         <label class="right">Title:</label>
                       </v-flex>
                       <v-flex xs4 class="ml-3">
                         <v-text-field
                           v-model="addEvent.title"
                           placeholder="fill your Title"
                           type="text"
                           :rules="titleRules"
                           required
                         ></v-text-field>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                   <v-flex xs12>
                     <v-layout>
                       <v-flex xs4 class="pt-4 subheading">
                         <label class="right">date:</label>
                       </v-flex>
                       <v-flex xs4 class="ml-3">
                         <v-menu
                           ref="menu1"
                           :close-on-content-click="false"
                           v-model="menu1"
                           :nudge-right="40"
+                          :return-value.sync="addEvent.dateOfEvent"
                           lazy
                           transition="scale-transition"
                           offset-y
                           full-width
                           min-width="290px"
                         >
                           <v-text-field
                             slot="activator"
                             :rules="dateRules"
                             v-model="addEvent.dateOfEvent"
                             placeholder="Select date"
                           ></v-text-field>
                           <v-date-picker
-                            ref="picker"
                             v-model="addEvent.dateOfEvent"
-                            @input="menu1 = false"
+                            @input="$refs.menu1.save(addEvent.dateOfEvent)">
-                          ></v-date-picker>
+                          </v-date-picker>
                         </v-menu>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                   <v-flex xs12>
                     <v-layout>
                       <v-flex xs4 class="pt-4 subheading">
                         <label class="right">Description:</label>
                       </v-flex>
                       <v-flex xs4 class="ml-3">
                         <v-text-field
                           placeholder="fill your Description"
                           :rules="descriptionRules"
                           v-model="addEvent.description"
                           type="text"
                           required
                         ></v-text-field>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                   <v-layout>
                     <v-flex xs12 sm6 offset-sm3>
                       <v-card-actions>
                         <v-btn @click="clear" round dark>clear</v-btn>
                         <v-spacer></v-spacer>
                         <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
                       </v-card-actions>
                     </v-flex>
                   </v-layout>
                 </v-container>
               </v-form>
             </v-card>
           </v-flex>
         </v-container>
       </v-tab-item>
     </v-tabs>
     <div class="loader" v-if="showLoader">
       <v-progress-circular indeterminate color="white"></v-progress-circular>
     </div>
   </v-app>
 </template>
 <script>
 import http from "@/Services/http.js";
 import Util from "@/util";
 import moment from "moment";
 export default {
   data: () => ({
     snackbar: false,
     y: "top",
     x: "right",
     mode: "",
     timeout: 3000,
     text: "",
     loading: false,
     date: null,
     search: "",
     showLoader: false,
     dialog: false,
     dialog1: false,
     valid: true,
     isActive: true,
     newActive: false,
     pagination: {
       rowsPerPage: 15
     },
     date: null,
     menu1: false,
     menu: false,
     // imageData: {},
     // imageName: "",
     // imageUrl: "",
     // imageFile: "",
     titleRules: [v => !!v || " Tilte is required"],
     descriptionRules: [v => !!v || " Discription is required"],
     dateRules: [v => !!v || "Date is required"],
     headers: [
       {
         text: "No",
         align: "center",
         sortable: false,
         value: "No"
       },
       { text: "Title", value: "title", sortable: false, align: "center" },
       {
         text: "Description",
         value: "description",
         sortable: false,
         align: "center"
       },
       { text: "Action", value: "", sortable: false, align: "center" }
     ],
     desserts: [],
     editedIndex: -1,
     addEvent: {},
     editedItem: {}
   }),
   methods: {
     // pickFile() {
     //   this.$refs.image.click();
     // },
     // onFilePicked(e) {
     //   // console.log(e)
     //   const files = e.target.files;
     //   this.imageData.upload = e.target.files[0];
     //   if (files[0] !== undefined) {
     //     this.imageName = files[0].name;
     //     if (this.imageName.lastIndexOf(".") <= 0) {
     //       return;
     //     }
     //     const fr = new FileReader();
     //     fr.readAsDataURL(files[0]);
     //     fr.addEventListener("load", () => {
     //       this.imageUrl = fr.result;
     //       this.imageFile = files[0]; // this is an image file that can be sent to server...
     //       this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
     //       console.log("upload=======>", this.imageData.imageUrl);
     //       console.log("imageFile", this.imageFile);
     //     });
     //   } else {
     //     this.imageName = "";
     //     this.imageFile = "";
     //     this.imageUrl = "";
     //   }
     // },
     dates: function(date) {
       return moment(date).format("MMMM DD, YYYY");
     },
     getEvents() {
       this.showLoader = true;
       var token = this.$store.state.token;
       http()
         .get("/getSchoolEventsList", {
           headers: { Authorization: "Bearer " + token }
         })
         .then(response => {
           this.desserts = response.data.data;
           this.showLoader = false;
         })
         .catch(err => {
           // console.log("err====>", err);
           this.showLoader = false;
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
           }
         });
     },
     editItem(item) {
       this.editedIndex = this.desserts.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.editedItem.schoolEventId = item._id;
       this.dialog = true;
     },
     profile(item) {
       this.editedIndex = this.desserts.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.dialog1 = true;
     },
     deleteItem(item) {
       let deleteEvent = {
         schoolEventId: item._id
       };
       http()
         .delete(
           "/deleteSchoolEvent",
           confirm("Are you sure you want to delete this?") && {
             params: deleteEvent
           }
         )
         .then(response => {
           if ((this.snackbar = true)) {
             this.text = response.data.message;
           }
           this.getEvents();
         })
         .catch(error => {
           console.log(error);
         });
     },
     activeTab(type) {
       switch (type) {
         case "existing":
           this.newActive = false;
           this.isActive = true;
           break;
         default:
           this.newActive = true;
           this.isActive = false;
           break;
       }
     },
     close() {
       this.dialog = false;
       setTimeout(() => {
         this.editedItem = Object.assign({}, this.defaultItem);
         this.editedIndex = -1;
       }, 300);
     },
     close1() {
       this.dialog1 = false;
     },
     submit() {
       if (this.$refs.form.validate()) {
         this.loading = true;
         http()
           .post("/createSchoolEvent", this.addEvent)
           .then(response => {
             if ((this.snackbar = true)) {
               this.text = response.data.message;
             }
             this.getEvents();
             this.clear();
             this.loading = false;
           })
           .catch(error => {
             if ((this.snackbar = true)) {
               this.text = error.response.data.message;
             }
             this.loading = false;
           });
       }
     },
     clear() {
       this.$refs.form.reset();
     },
     save() {
       http()
         .put("/updateSchoolEvent", this.editedItem)
         .then(response => {
           this.snackbar = true;
           this.text = response.data.message;
           this.getEvents();
           this.close();
         })
         .catch(error => {
           // console.log(error);
         });
     }
   },
   mounted() {
     this.getEvents();
   },
   created() {
     this.$root.$on("app:search", search => {
       this.search = search;
     });
   },
   beforeDestroy() {
     // dont forget to remove the listener
     this.$root.$off("app:search");
   }
 };
 </script>
 <style scoped>
 #td {
   max-width: 200px;
 }
 .active {
   background-color: black;
   color: white !important;
 }
 .activebtn {
   color: black !important;
 }

src/pages/Holiday/holiday.vue

Diff comments View file @ceb4303

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

src/pages/NoticeBoard/noticeBoard.vue

Diff comments View file @ceb4303

1	<template>	1	<template>
2	<v-app id="pages-dasboard">	2	<v-app id="pages-dasboard">
3	<v-tabs grow slider-color="black">	3	<v-tabs grow slider-color="black">
4	<v-tab	4	<v-tab
5	ripple	5	ripple
6	@click="activeTab('existing')"	6	@click="activeTab('existing')"
7	v-bind:class="{ active: isActive }"	7	v-bind:class="{ active: isActive }"
8	id="tab"	8	id="tab"
9	class="subheading"	9	class="subheading"
10	>Existing Notice Board</v-tab>	10	>Existing Notice Board</v-tab>
11	<v-tab	11	<v-tab
12	ripple	12	ripple
13	@click="activeTab('new')"	13	@click="activeTab('new')"
14	v-bind:class="{ active: newActive }"	14	v-bind:class="{ active: newActive }"
15	id="tab1"	15	id="tab1"
16	User	16	User
17	class="subheading"	17	class="subheading"
18	>Add New Notice Board</v-tab>	18	>Add New Notice Board</v-tab>
19		19
20	<!-- **** EDITS Notice Board **** -->	20	<!-- **** EDITS Notice Board **** -->
21		21
22	<v-tab-item>	22	<v-tab-item>
23	<v-snackbar	23	<v-snackbar
24	:timeout="timeout"	24	:timeout="timeout"
25	:top="y === 'top'"	25	:top="y === 'top'"
26	:right="x === 'right'"	26	:right="x === 'right'"
27	:vertical="mode === 'vertical'"	27	:vertical="mode === 'vertical'"
28	v-model="snackbar"	28	v-model="snackbar"
29	color="success"	29	color="success"
30	>{{ text }}</v-snackbar>	30	>{{ text }}</v-snackbar>
31	<v-dialog v-model="dialog" max-width="640px" scrollable>	31	<v-dialog v-model="dialog" max-width="640px" scrollable>
32	<v-card style="height: 540px;">	32	<v-card style="height: 540px;">
33	<v-toolbar color="grey lighten-2" flat>	33	<v-toolbar color="grey lighten-2" flat>
34	<v-spacer></v-spacer>	34	<v-spacer></v-spacer>
35	<v-toolbar-title>	35	<v-toolbar-title>
36	<h3>Edit Notice Board</h3>	36	<h3>Edit Notice Board</h3>
37	</v-toolbar-title>	37	</v-toolbar-title>
38	<v-spacer></v-spacer>	38	<v-spacer></v-spacer>
39	</v-toolbar>	39	</v-toolbar>
40	<v-card-text>	40	<v-card-text>
41	<v-form ref="form">	41	<v-form ref="form">
42	<v-container fluid>	42	<v-container fluid>
43	<v-layout>	43	<v-layout>
44	<v-flex	44	<v-flex
45	xs12	45	xs12
46	class="text-xs-center text-sm-center text-md-center text-lg-center"	46	class="text-xs-center text-sm-center text-md-center text-lg-center"
47	>	47	>
48	<img	48	<img
49	src="/static/icon/user.png"	49	src="/static/icon/user.png"
50	v-if="!editedItem.eventImageUrl && !imageUrl"	50	v-if="!editedItem.eventImageUrl && !imageUrl"
51	width="150px"	51	width="150px"
52	/>	52	/>
53	<img	53	<img
54	:src="editedItem.eventImageUrl"	54	:src="editedItem.eventImageUrl"
55	height="150"	55	height="150"
56	v-else-if="editedItem.eventImageUrl && !imageUrl"	56	v-else-if="editedItem.eventImageUrl && !imageUrl"
57	width="180px"	57	width="180px"
58	/>	58	/>
59	<img	59	<img
60	v-if="imageUrl"	60	v-if="imageUrl"
61	:src="imageUrl"	61	:src="imageUrl"
62	height="150"	62	height="150"
63	style="border-radius:50%; width:200px"	63	style="border-radius:50%; width:200px"
64	/>	64	/>
65	<input	65	<input
66	type="file"	66	type="file"
67	style="display: none"	67	style="display: none"
68	ref="image"	68	ref="image"
69	accept="image/*"	69	accept="image/*"
70	@change="onFilePicked"	70	@change="onFilePicked"
71	/>	71	/>
72	</v-flex>	72	</v-flex>
73	</v-layout>	73	</v-layout>
74	<v-layout>	74	<v-layout>
75	<v-flex xs12>	75	<v-flex xs12>
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">Title:</label>	78	<label class="right">Title:</label>
79	</v-flex>	79	</v-flex>
80	<v-flex xs6 class="ml-3">	80	<v-flex xs6 class="ml-3">
81	<v-text-field	81	<v-text-field
82	v-model="editedItem.title"	82	v-model="editedItem.title"
83	placeholder="fill your Title"	83	placeholder="fill your Title"
84	name="name"	84	name="name"
85	type="text"	85	type="text"
86	required	86	required
87	></v-text-field>	87	></v-text-field>
88	</v-flex>	88	</v-flex>
89	</v-layout>	89	</v-layout>
90	</v-flex>	90	</v-flex>
91	<v-flex xs12>	91	<v-flex xs12>
92	<v-layout>	92	<v-layout>
93	<v-flex xs4 class="pt-4 subheading">	93	<v-flex xs4 class="pt-4 subheading">
94	<label class="right">Description:</label>	94	<label class="right">Description:</label>
95	</v-flex>	95	</v-flex>
96	<v-flex xs6 class="ml-3">	96	<v-flex xs6 class="ml-3">
97	<v-text-field	97	<v-text-field
98	placeholder="fill your Description"	98	placeholder="fill your Description"
99	v-model="editedItem.description"	99	v-model="editedItem.description"
100	type="text"	100	type="text"
101	name="email"	101	name="email"
102	required	102	required
103	></v-text-field>	103	></v-text-field>
104	</v-flex>	104	</v-flex>
105	</v-layout>	105	</v-layout>
106	</v-flex>	106	</v-flex>
107	<v-flex xs12>	107	<v-flex xs12>
108	<v-layout>	108	<v-layout>
109	<v-flex xs4 class="pt-4 subheading">	109	<v-flex xs4 class="pt-4 subheading">
110	<label class="right">Uplaod Image:</label>	110	<label class="right">Uplaod Image:</label>
111	</v-flex>	111	</v-flex>
112	<v-flex xs6 class="ml-3">	112	<v-flex xs6 class="ml-3">
113	<v-text-field	113	<v-text-field
114	label="Select Image"	114	label="Select Image"
115	@click="pickFile"	115	@click="pickFile"
116	v-model="imageName"	116	v-model="imageName"
117	append-icon="attach_file"	117	append-icon="attach_file"
118	></v-text-field>	118	></v-text-field>
119	</v-flex>	119	</v-flex>
120	</v-layout>	120	</v-layout>
121	</v-flex>	121	</v-flex>
122	<v-flex xs12 sm9 offset-sm2>	122	<v-flex xs12 sm9 offset-sm2>
123	<v-card-actions>	123	<v-card-actions>
124	<v-btn round dark @click.native="close">Cancel</v-btn>	124	<v-btn round dark @click.native="close">Cancel</v-btn>
125	<v-spacer></v-spacer>	125	<v-spacer></v-spacer>
126	<v-btn round dark @click="save">Save</v-btn>	126	<v-btn round dark @click="save">Save</v-btn>
127	</v-card-actions>	127	</v-card-actions>
128	</v-flex>	128	</v-flex>
129	</v-layout>	129	</v-layout>
130	</v-container>	130	</v-container>
131	</v-form>	131	</v-form>
132	</v-card-text>	132	</v-card-text>
133	</v-card>	133	</v-card>
134	</v-dialog>	134	</v-dialog>
135		135
136	<!-- **** VIEW PROFIL NOTICE BOARD **** -->	136	<!-- **** VIEW PROFIL NOTICE BOARD **** -->
137		137
138	<v-dialog v-model="dialog1" max-width="640px" scrollable>	138	<v-dialog v-model="dialog1" max-width="640px" scrollable>
139	<v-card style="height: 480px;">	139	<v-card style="height: 380px;">
140	<v-toolbar color="grey lighten-2" flat>	140	<v-toolbar color="grey lighten-2" flat>
141	<v-spacer></v-spacer>	141	<v-spacer></v-spacer>
142	<v-toolbar-title>	142	<v-toolbar-title>
143	<h3>Notice Board</h3>	143	<h3>Notice Board</h3>
144	</v-toolbar-title>	144	</v-toolbar-title>
145	<v-spacer></v-spacer>	145	<v-spacer></v-spacer>
146	<v-icon @click="close1">close</v-icon>	146	<v-icon @click="close1">close</v-icon>
147	</v-toolbar>	147	</v-toolbar>
148	<v-card-text>	148	<v-card-text>
149	<v-flex align-center justify-center layout text-xs-center class="mt-3">	149	<v-flex align-center justify-center layout text-xs-center class="mt-3">
150	<img src="/static/icon/user.png" v-if="!editedItem.eventImageUrl" width="130px" />	150	<img src="/static/icon/user.png" v-if="!editedItem.eventImageUrl" width="130px" />
151	<img	151	<img
152	:src="editedItem.eventImageUrl"	152	:src="editedItem.eventImageUrl"
153	v-else-if="editedItem.eventImageUrl"	153	v-else-if="editedItem.eventImageUrl"
154	width="200px"	154	width="200px"
155	/>	155	/>
156	</v-flex>	156	</v-flex>
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-layout>	160	<v-layout>
161	<v-flex xs5 sm6>	161	<v-flex xs5 sm6>
162	<h5 class="right my-1">Title:</h5>	162	<h5 class="right my-1"><b>Title:</b></h5>
163	</v-flex>	163	</v-flex>
164	<v-flex sm6 xs8>	164	<v-flex sm6 xs8>
165	<h5 class="my-1">{{ editedItem.title }}</h5>	165	<h5 class="my-1">{{ editedItem.title }}</h5>
166	</v-flex>	166	</v-flex>
167	</v-layout>	167	</v-layout>
168	<v-layout>	168	<v-layout>
169	<v-flex xs5 sm6>	169	<v-flex xs5 sm6>
170	<h5 class="right my-1">Description:</h5>	170	<h5 class="right my-1"><b>Description:</b></h5>
171	</v-flex>	171	</v-flex>
172	<v-flex sm6 xs8>	172	<v-flex sm6 xs8>
173	<h5 class="my-1">{{ editedItem.description }}</h5>	173	<h5 class="my-1">{{ editedItem.description }}</h5>
174	</v-flex>	174	</v-flex>
175	</v-layout>	175	</v-layout>
176	</v-flex>	176	</v-flex>
177	</v-layout>	177	</v-layout>
178	</v-container>	178	</v-container>
179	</v-card-text>	179	</v-card-text>
180	</v-card>	180	</v-card>
181	</v-dialog>	181	</v-dialog>
182		182
183	<v-snackbar	183	<v-snackbar
184	:timeout="timeout"	184	:timeout="timeout"
185	:top="y === 'top'"	185	:top="y === 'top'"
186	:right="x === 'right'"	186	:right="x === 'right'"
187	:vertical="mode === 'vertical'"	187	:vertical="mode === 'vertical'"
188	v-model="snackbar"	188	v-model="snackbar"
189	color="success"	189	color="success"
190	>{{ text }}</v-snackbar>	190	>{{ text }}</v-snackbar>
191		191
192	<!-- **** EXISTING-USERS Notice Board TABLE **** -->	192	<!-- **** EXISTING-USERS Notice Board TABLE **** -->
193		193
194	<v-data-table	194	<v-data-table
195	:headers="headers"	195	:headers="headers"
196	:items="desserts"	196	:items="desserts"
197	:pagination.sync="pagination"	197	:pagination.sync="pagination"
198	:search="search"	198	:search="search"
199	>	199	>
200	<template slot="items" slot-scope="props">	200	<template slot="items" slot-scope="props">
201	<td id="td" class="text-xs-center">{{ props.index}}</td>	201	<td id="td" class="text-xs-center">{{ props.index}}</td>
202	<td id="td" class="text-xs-center">{{ props.item.title}}</td>	202	<td id="td" class="text-xs-center">{{ props.item.title}}</td>
203	<td id="td" class="text-xs-center">{{ props.item.description}}</td>	203	<td id="td" class="text-xs-center">{{ props.item.description}}</td>
204		204
205	<td class="text-xs-center">	205	<td class="text-xs-center">
206	<span>	206	<span>
207	<img	207	<img
208	style="cursor:pointer; width:25px; height:18px; "	208	style="cursor:pointer; width:25px; height:18px; "
209	class="mr-5"	209	class="mr-5"
210	@click="profile(props.item)"	210	@click="profile(props.item)"
211	src="/static/icon/eye1.png"	211	src="/static/icon/eye1.png"
212	/>	212	/>
213	<img	213	<img
214	style="cursor:pointer; width:20px; height:18px; "	214	style="cursor:pointer; width:20px; height:18px; "
215	class="mr-5"	215	class="mr-5"
216	@click="editItem(props.item)"	216	@click="editItem(props.item)"
217	src="/static/icon/edit1.png"	217	src="/static/icon/edit1.png"
218	/>	218	/>
219	<img	219	<img
220	style="cursor:pointer;width:20px; height:20px; "	220	style="cursor:pointer;width:20px; height:20px; "
221	class="mr-5"	221	class="mr-5"
222	@click="deleteItem(props.item)"	222	@click="deleteItem(props.item)"
223	src="/static/icon/delete1.png"	223	src="/static/icon/delete1.png"
224	/>	224	/>
225	</span>	225	</span>
226	</td>	226	</td>
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 MULTIPLE Notice Board **** -->	237	<!-- **** ADD MULTIPLE Notice Board **** -->
238		238
239	<v-tab-item>	239	<v-tab-item>
240	<v-container>	240	<v-container>
241	<v-snackbar	241	<v-snackbar
242	:timeout="timeout"	242	:timeout="timeout"
243	:top="y === 'top'"	243	:top="y === 'top'"
244	:right="x === 'right'"	244	:right="x === 'right'"
245	:vertical="mode === 'vertical'"	245	:vertical="mode === 'vertical'"
246	v-model="snackbar"	246	v-model="snackbar"
247	color="success"	247	color="success"
248	>{{ text }}</v-snackbar>	248	>{{ text }}</v-snackbar>
249	<v-flex xs12 sm8 offset-sm2 class="top">	249	<v-flex xs12 sm8 offset-sm2 class="top">
250	<v-card flat>	250	<v-card flat>
251	<v-container fluid fill-height>	251	<v-container fluid fill-height>
252	<v-layout align-center>	252	<v-layout align-center>
253	<v-flex xs12>	253	<v-flex xs12>
254	<v-form ref="form" v-model="valid" lazy-validation>	254	<v-form ref="form" v-model="valid" lazy-validation>
255	<v-layout>	255	<v-layout>
256	<v-flex	256	<v-flex
257	xs12	257	xs12
258	class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"	258	class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
259	>	259	>
260	<v-avatar size="100px">	260	<v-avatar size="100px">
261	<img src="/static/icon/user.png" v-if="!imageUrl" />	261	<img src="/static/icon/user.png" v-if="!imageUrl" />
262	</v-avatar>	262	</v-avatar>
263	<input	263	<input
264	type="file"	264	type="file"
265	style="display: none"	265	style="display: none"
266	ref="image"	266	ref="image"
267	accept="image/*"	267	accept="image/*"
268	@change="onFilePicked"	268	@change="onFilePicked"
269	/>	269	/>
270	<img	270	<img
271	:src="imageUrl"	271	:src="imageUrl"
272	height="150"	272	height="150"
273	v-if="imageUrl"	273	v-if="imageUrl"
274	style="border-radius:50%; width:200px"	274	style="border-radius:50%; width:200px"
275	/>	275	/>
276	</v-flex>	276	</v-flex>
277	</v-layout>	277	</v-layout>
278	<v-layout>	278	<v-layout>
279	<v-flex xs4 class="pt-4 subheading">	279	<v-flex xs4 class="pt-4 subheading">
280	<label class="right">Title:</label>	280	<label class="right">Title:</label>
281	</v-flex>	281	</v-flex>
282	<v-flex xs6 class="ml-3">	282	<v-flex xs6 class="ml-3">
283	<v-text-field	283	<v-text-field
284	v-model="addNoticeBoard.title"	284	v-model="addNoticeBoard.title"
285	placeholder="fill your Title"	285	placeholder="fill your Title"
286	name="name"	286	name="name"
287	type="text"	287	type="text"
288	:rules="titleRules"	288	:rules="titleRules"
289	required	289	required
290	></v-text-field>	290	></v-text-field>
291	</v-flex>	291	</v-flex>
292	</v-layout>	292	</v-layout>
293	<v-layout>	293	<v-layout>
294	<v-flex xs4 class="pt-4 subheading">	294	<v-flex xs4 class="pt-4 subheading">
295	<label class="right">Description:</label>	295	<label class="right">Description:</label>
296	</v-flex>	296	</v-flex>
297	<v-flex xs6 class="ml-3">	297	<v-flex xs6 class="ml-3">
298	<v-text-field	298	<v-text-field
299	v-model="addNoticeBoard.description"	299	v-model="addNoticeBoard.description"
300	placeholder="fill your Description"	300	placeholder="fill your Description"
301	name="name"	301	name="name"
302	type="text"	302	type="text"
303	:rules="descriptionRules"	303	:rules="descriptionRules"
304	required	304	required
305	></v-text-field>	305	></v-text-field>
306	</v-flex>	306	</v-flex>
307	</v-layout>	307	</v-layout>
308	<v-layout>	308	<v-layout>
309	<v-flex xs4 class="pt-4 subheading">	309	<v-flex xs4 class="pt-4 subheading">
310	<label class="right">Uplaod Image:</label>	310	<label class="right">Uplaod Image:</label>
311	</v-flex>	311	</v-flex>
312	<v-flex xs6 class="ml-3">	312	<v-flex xs6 class="ml-3">
313	<v-text-field	313	<v-text-field
314	label="Select Image"	314	label="Select Image"
315	@click="pickFile"	315	@click="pickFile"
316	v-model="imageName"	316	v-model="imageName"
317	append-icon="attach_file"	317	append-icon="attach_file"
318	></v-text-field>	318	></v-text-field>
319	</v-flex>	319	</v-flex>
320	</v-layout>	320	</v-layout>
321	<v-layout>	321	<v-layout>
322	<v-flex xs12 sm9 offset-sm2>	322	<v-flex xs12 sm9 offset-sm2>
323	<v-card-actions>	323	<v-card-actions>
324	<v-btn @click="clear" round dark>clear</v-btn>	324	<v-btn @click="clear" round dark>clear</v-btn>
325	<v-spacer></v-spacer>	325	<v-spacer></v-spacer>
326	<v-btn @click="submit" round dark :loading="loading">Add</v-btn>	326	<v-btn @click="submit" round dark :loading="loading">Add</v-btn>
327	</v-card-actions>	327	</v-card-actions>
328	</v-flex>	328	</v-flex>
329	</v-layout>	329	</v-layout>
330	</v-form>	330	</v-form>
331	</v-flex>	331	</v-flex>
332	</v-layout>	332	</v-layout>
333	</v-container>	333	</v-container>
334	</v-card>	334	</v-card>
335	</v-flex>	335	</v-flex>
336	</v-container>	336	</v-container>
337	</v-tab-item>	337	</v-tab-item>
338	</v-tabs>	338	</v-tabs>
339	<div class="loader" v-if="showLoader">	339	<div class="loader" v-if="showLoader">
340	<v-progress-circular indeterminate color="white"></v-progress-circular>	340	<v-progress-circular indeterminate color="white"></v-progress-circular>
341	</div>	341	</div>
342	</v-app>	342	</v-app>
343	</template>	343	</template>
344		344
345	<script>	345	<script>
346	import http from "@/Services/http.js";	346	import http from "@/Services/http.js";
347	import Util from "@/util";	347	import Util from "@/util";
348		348
349	export default {	349	export default {
350	data: () => ({	350	data: () => ({
351	snackbar: false,	351	snackbar: false,
352	y: "top",	352	y: "top",
353	x: "right",	353	x: "right",
354	mode: "",	354	mode: "",
355	timeout: 3000,	355	timeout: 3000,
356	text: "",	356	text: "",
357	showLoader: false,	357	showLoader: false,
358	loading: false,	358	loading: false,
359	date: null,	359	date: null,
360	search: "",	360	search: "",
361	dialog: false,	361	dialog: false,
362	dialog1: false,	362	dialog1: false,
363	valid: true,	363	valid: true,
364	isActive: true,	364	isActive: true,
365	newActive: false,	365	newActive: false,
366	addclass: [],	366	addclass: [],
367	addSection: [],	367	addSection: [],
368	gender: ["Male", "Female"],	368	gender: ["Male", "Female"],
369	AddUsercredentials: {},	369	AddUsercredentials: {},
370	pagination: {	370	pagination: {
371	rowsPerPage: 19	371	rowsPerPage: 19
372	},	372	},
373	imageName: "",	373	imageName: "",
374	imageUrl: "",	374	imageUrl: "",
375	imageFile: "",	375	imageFile: "",
376	upload: "",	376	upload: "",
377	titleRules: [v => !!v \|\| " Title is required"],	377	titleRules: [v => !!v \|\| " Title is required"],
378	descriptionRules: [v => !!v \|\| " Description is required"],	378	descriptionRules: [v => !!v \|\| " Description is required"],
379	headers: [	379	headers: [
380	{	380	{
381	text: "No",	381	text: "No",
382	align: "center",	382	align: "center",
383	sortable: false,	383	sortable: false,
384	value: "No"	384	value: "No"
385	},	385	},
386	{ text: "Title", value: "title", sortable: false, align: "center" },	386	{ text: "Title", value: "title", sortable: false, align: "center" },
387	{	387	{
388	text: "Description",	388	text: "Description",
389	value: "description",	389	value: "description",
390	sortable: false,	390	sortable: false,
391	align: "center"	391	align: "center"
392	},	392	},
393	{ text: "Action", value: "", sortable: false, align: "center" }	393	{ text: "Action", value: "", sortable: false, align: "center" }
394	],	394	],
395	desserts: [],	395	desserts: [],
396	editedIndex: -1,	396	editedIndex: -1,
397	addNoticeBoard: {},	397	addNoticeBoard: {},
398	editedItem: {	398	editedItem: {
399	title: "",	399	title: "",
400	description: ""	400	description: ""
401	},	401	},
402	defaultItem: {	402	defaultItem: {
403	title: "",	403	title: "",
404	description: ""	404	description: ""
405	}	405	}
406	}),	406	}),
407	methods: {	407	methods: {
408	pickFile() {	408	pickFile() {
409	this.$refs.image.click();	409	this.$refs.image.click();
410	},	410	},
411		411
412	onFilePicked(e) {	412	onFilePicked(e) {
413	// console.log(e)	413	// console.log(e)
414	const files = e.target.files;	414	const files = e.target.files;
415	this.upload = e.target.files[0];	415	this.upload = e.target.files[0];
416	console.log("thisupload==>", this.upload);	416	console.log("thisupload==>", this.upload);
417	if (files[0] !== undefined) {	417	if (files[0] !== undefined) {
418	this.imageName = files[0].name;	418	this.imageName = files[0].name;
419	if (this.imageName.lastIndexOf(".") <= 0) {	419	if (this.imageName.lastIndexOf(".") <= 0) {
420	return;	420	return;
421	}	421	}
422	const fr = new FileReader();	422	const fr = new FileReader();
423	fr.readAsDataURL(files[0]);	423	fr.readAsDataURL(files[0]);
424	fr.addEventListener("load", () => {	424	fr.addEventListener("load", () => {
425	this.imageUrl = fr.result;	425	this.imageUrl = fr.result;
426	this.imageFile = files[0]; // this is an image file that can be sent to server...	426	this.imageFile = files[0]; // this is an image file that can be sent to server...
427	});	427	});
428	} else {	428	} else {
429	this.imageName = "";	429	this.imageName = "";
430	this.imageFile = "";	430	this.imageFile = "";
431	this.imageUrl = "";	431	this.imageUrl = "";
432	}	432	}
433	},	433	},
434	getNoticeDataList() {	434	getNoticeDataList() {
435	this.showLoader = true;	435	this.showLoader = true;
436	var token = this.$store.state.token;	436	var token = this.$store.state.token;
437	http()	437	http()
438	.get("/getEventsList", {	438	.get("/getEventsList", {
439	headers: { Authorization: "Bearer " + token }	439	headers: { Authorization: "Bearer " + token }
440	})	440	})
441	.then(response => {	441	.then(response => {
442	this.desserts = response.data.data;	442	this.desserts = response.data.data;
443	this.showLoader = false;	443	this.showLoader = false;
444	})	444	})
445	.catch(err => {	445	.catch(err => {
446	this.showLoader = false;	446	this.showLoader = false;
447	if (error.response.status === 401) {	447	if (error.response.status === 401) {
448	this.$router.replace({ path: "/" });	448	this.$router.replace({ path: "/" });
449	this.$store.dispatch("setToken", null);	449	this.$store.dispatch("setToken", null);
450	this.$store.dispatch("Id", null);	450	this.$store.dispatch("Id", null);
451	}	451	}
452	});	452	});
453	},	453	},
454	editItem(item) {	454	editItem(item) {
455	this.editedIndex = this.desserts.indexOf(item);	455	this.editedIndex = this.desserts.indexOf(item);
456	this.editedItem = Object.assign({}, item);	456	this.editedItem = Object.assign({}, item);
457	this.dialog = true;	457	this.dialog = true;
458	},	458	},
459	profile(item) {	459	profile(item) {
460	this.editedIndex = this.desserts.indexOf(item);	460	this.editedIndex = this.desserts.indexOf(item);
461	this.editedItem = Object.assign({}, item);	461	this.editedItem = Object.assign({}, item);
462	this.dialog1 = true;	462	this.dialog1 = true;
463	},	463	},
464	deleteItem(item) {	464	deleteItem(item) {
465	let deleteEvent = {	465	let deleteEvent = {
466	eventId: item._id	466	eventId: item._id
467	};	467	};
468	http()	468	http()
469	.delete(	469	.delete(
470	"/deleteEvent",	470	"/deleteEvent",
471	confirm("Are you sure you want to delete this?") && {	471	confirm("Are you sure you want to delete this?") && {
472	params: deleteEvent	472	params: deleteEvent
473	}	473	}
474	)	474	)
475	.then(response => {	475	.then(response => {
476	// console.log("deleteUers",deleteEvent)	476	// console.log("deleteUers",deleteEvent)
477	if ((this.snackbar = true)) {	477	if ((this.snackbar = true)) {
478	this.text = "Successfully delete Existing Notice Data";	478	this.text = "Successfully delete Existing Notice Data";
479	}	479	}
480	this.getNoticeDataList();	480	this.getNoticeDataList();
481	})	481	})
482	.catch(error => {	482	.catch(error => {
483	// console.log(error);	483	// console.log(error);
484	});	484	});
485	},	485	},
486	activeTab(type) {	486	activeTab(type) {
487	switch (type) {	487	switch (type) {
488	case "existing":	488	case "existing":
489	this.newActive = false;	489	this.newActive = false;
490	this.isActive = true;	490	this.isActive = true;
491	break;	491	break;
492		492
493	default:	493	default:
494	this.newActive = true;	494	this.newActive = true;
495	this.isActive = false;	495	this.isActive = false;
496	break;	496	break;
497	}	497	}
498	},	498	},
499	close() {	499	close() {
500	this.dialog = false;	500	this.dialog = false;
501	setTimeout(() => {	501	setTimeout(() => {
502	this.editedItem = Object.assign({}, this.defaultItem);	502	this.editedItem = Object.assign({}, this.defaultItem);
503	this.editedIndex = -1;	503	this.editedIndex = -1;
504	}, 300);	504	}, 300);
505	},	505	},
506	close1() {	506	close1() {
507	this.dialog1 = false;	507	this.dialog1 = false;
508	},	508	},
509	submit() {	509	submit() {
510	if (this.$refs.form.validate()) {	510	if (this.$refs.form.validate()) {
511	if (this.imageUrl) {	511	if (this.imageUrl) {
512	var str = this.imageUrl;	512	var str = this.imageUrl;
513	const [baseUrl, imageUrl] = str.split(/,/);	513	const [baseUrl, imageUrl] = str.split(/,/);
514	this.addNoticeBoard.upload = imageUrl;	514	this.addNoticeBoard.upload = imageUrl;
515	}	515	}
516	http()	516	http()
517	.post("/createEvent", this.addNoticeBoard)	517	.post("/createEvent", this.addNoticeBoard)
518	.then(response => {	518	.then(response => {
519	if ((this.snackbar = true)) {	519	if ((this.snackbar = true)) {
520	this.text = "New Notice Data added successfully";	520	this.text = "New Notice Data added successfully";
521	}	521	}
522	this.getNoticeDataList();	522	this.getNoticeDataList();
523	this.clear();	523	this.clear();
524	})	524	})
525	.catch(error => {	525	.catch(error => {
526	// console.log(error);	526	// console.log(error);
527	if ((this.snackbar = true)) {	527	if ((this.snackbar = true)) {
528	this.text = error.response.data.message;	528	this.text = error.response.data.message;
529	}	529	}
530	});	530	});
531	}	531	}
532	},	532	},
533	clear() {	533	clear() {
534	this.$refs.form.reset();	534	this.$refs.form.reset();
535	},	535	},
536	save() {	536	save() {
537	let editNoticeBoard = {	537	let editNoticeBoard = {
538	eventId: this.editedItem._id,	538	eventId: this.editedItem._id,
539	title: this.editedItem.title,	539	title: this.editedItem.title,
540	description: this.editedItem.description	540	description: this.editedItem.description
541	};	541	};
542	if (this.imageUrl) {	542	if (this.imageUrl) {
543	var str = this.imageUrl;	543	var str = this.imageUrl;
544	const [baseUrl, imageUrl] = str.split(/,/);	544	const [baseUrl, imageUrl] = str.split(/,/);
545	editNoticeBoard.upload = imageUrl;	545	editNoticeBoard.upload = imageUrl;
546	}	546	}
547	http()	547	http()
548	.put("/updateEvent", editNoticeBoard)	548	.put("/updateEvent", editNoticeBoard)
549	.then(response => {	549	.then(response => {
550	if ((this.snackbar = true)) {	550	if ((this.snackbar = true)) {
551	this.text = "Successfully Edit Existing Notice Data";	551	this.text = "Successfully Edit Existing Notice Data";
552	}	552	}
553	this.getNoticeDataList();	553	this.getNoticeDataList();
554	this.close();	554	this.close();
555	})	555	})
556	.catch(error => {	556	.catch(error => {
557	// console.log(error);	557	// console.log(error);
558	});	558	});
559	}	559	}
560	},	560	},
561	mounted() {	561	mounted() {
562	this.getNoticeDataList();	562	this.getNoticeDataList();
563	},	563	},
564	created() {	564	created() {
565	this.$root.$on("app:search", search => {	565	this.$root.$on("app:search", search => {
566	this.search = search;	566	this.search = search;
567	});	567	});
568	},	568	},
569	beforeDestroy() {	569	beforeDestroy() {
570	// dont forget to remove the listener	570	// dont forget to remove the listener
571	this.$root.$off("app:search");	571	this.$root.$off("app:search");
572	}	572	}
573	};	573	};
574	</script>	574	</script>
575	<style scoped>	575	<style scoped>
576	.active {	576	.active {
577	background-color: black;	577	background-color: black;
578	color: white !important;	578	color: white !important;
579	}	579	}
580	.activebtn {	580	.activebtn {
581	color: black !important;	581	color: black !important;
582	}	582	}
583	</style>	583	</style>

src/pages/Notification/notification.vue

Diff comments View file @ceb4303

1	<template>	1	<template>
2	<v-app id="pages-dasboard">	2	<v-app id="pages-dasboard">
3	<v-tabs grow slider-color="black">	3	<v-tabs grow slider-color="black">
4	<v-tab	4	<v-tab
5	ripple	5	ripple
6	@click="activeTab('existing')"	6	@click="activeTab('existing')"
7	v-bind:class="{ active: isActive }"	7	v-bind:class="{ active: isActive }"
8	id="tab"	8	id="tab"
9	class="subheading"	9	class="subheading"
10	>Existing Notifictaion</v-tab>	10	>Existing Notifictaion</v-tab>
11	<v-tab	11	<v-tab
12	ripple	12	ripple
13	@click="activeTab('new')"	13	@click="activeTab('new')"
14	v-bind:class="{ active: newActive }"	14	v-bind:class="{ active: newActive }"
15	id="tab1"	15	id="tab1"
16	User	16	User
17	class="subheading"	17	class="subheading"
18	>Add New Notifictaion</v-tab>	18	>Add New Notifictaion</v-tab>
19		19
20	<!-- **** EDITS NOTIFICATION DETAILS **** -->	20	<!-- **** EDITS NOTIFICATION DETAILS **** -->
21		21
22	<v-tab-item>	22	<v-tab-item>
23	<v-snackbar	23	<v-snackbar
24	:timeout="timeout"	24	:timeout="timeout"
25	:top="y === 'top'"	25	:top="y === 'top'"
26	:right="x === 'right'"	26	:right="x === 'right'"
27	:vertical="mode === 'vertical'"	27	:vertical="mode === 'vertical'"
28	v-model="snackbar"	28	v-model="snackbar"
29	color="success"	29	color="success"
30	>{{ text }}</v-snackbar>	30	>{{ text }}</v-snackbar>
31	<v-dialog v-model="dialog" max-width="600px">	31	<v-dialog v-model="dialog" max-width="600px">
32	<v-flex xs12 sm12>	32	<v-flex xs12 sm12>
33	<v-toolbar color="v-toolbar">	33	<v-toolbar color="v-toolbar">
34	<v-spacer></v-spacer>	34	<v-spacer></v-spacer>
35	<v-toolbar-title>	35	<v-toolbar-title>
36	<h3>Edit Notifictaion</h3>	36	<h3>Edit Notifictaion</h3>
37	</v-toolbar-title>	37	</v-toolbar-title>
38	<v-spacer></v-spacer>	38	<v-spacer></v-spacer>
39	</v-toolbar>	39	</v-toolbar>
40	<v-card flat>	40	<v-card flat>
41	<v-form ref="form">	41	<v-form ref="form">
42	<v-container fluid>	42	<v-container fluid>
43	<v-layout>	43	<v-layout>
44	<v-flex	44	<v-flex
45	xs12	45	xs12
46	class="text-xs-center text-sm-center text-md-center text-lg-center mr-4"	46	class="text-xs-center text-sm-center text-md-center text-lg-center mr-4"
47	>	47	>
48	<v-avatar size="100px">	48	<v-avatar size="100px">
49	<img src="/static/icon/user.png" v-if="!imageUrl" />	49	<img src="/static/icon/user.png" v-if="!imageUrl" />
50	</v-avatar>	50	</v-avatar>
51	<input	51	<input
52	type="file"	52	type="file"
53	style="display: none"	53	style="display: none"
54	ref="image"	54	ref="image"
55	accept="image/*"	55	accept="image/*"
56	@change="onFilePicked"	56	@change="onFilePicked"
57	/>	57	/>
58	<img	58	<img
59	:src="imageData.imageUrl"	59	:src="imageData.imageUrl"
60	height="150"	60	height="150"
61	v-if="imageUrl"	61	v-if="imageUrl"
62	style="border-radius:50%; width:200px"	62	style="border-radius:50%; width:200px"
63	/>	63	/>
64	</v-flex>	64	</v-flex>
65	</v-layout>	65	</v-layout>
66	<v-flex xs12 sm12>	66	<v-flex xs12 sm12>
67	<v-layout>	67	<v-layout>
68	<v-flex xs4 class="pt-4 subheading">	68	<v-flex xs4 class="pt-4 subheading">
69	<label class="right">Title:</label>	69	<label class="right">Title:</label>
70	</v-flex>	70	</v-flex>
71	<v-flex xs5 class="ml-3">	71	<v-flex xs5 class="ml-3">
72	<v-text-field	72	<v-text-field
73	v-model="editedItem.title"	73	v-model="editedItem.title"
74	placeholder="fill your Title"	74	placeholder="fill your Title"
75	name="name"	75	name="name"
76	type="text"	76	type="text"
77	></v-text-field>	77	></v-text-field>
78	</v-flex>	78	</v-flex>
79	</v-layout>	79	</v-layout>
80	</v-flex>	80	</v-flex>
81	<v-flex xs12 sm12>	81	<v-flex xs12 sm12>
82	<v-layout>	82	<v-layout>
83	<v-flex xs4 class="pt-4 subheading">	83	<v-flex xs4 class="pt-4 subheading">
84	<label class="right">Description:</label>	84	<label class="right">Description:</label>
85	</v-flex>	85	</v-flex>
86	<v-flex xs5 class="ml-3">	86	<v-flex xs5 class="ml-3">
87	<v-text-field	87	<v-text-field
88	placeholder="fill your Description"	88	placeholder="fill your Description"
89	v-model="editedItem.description"	89	v-model="editedItem.description"
90	type="text"	90	type="text"
91	></v-text-field>	91	></v-text-field>
92	</v-flex>	92	</v-flex>
93	</v-layout>	93	</v-layout>
94	</v-flex>	94	</v-flex>
95	<v-layout>	95	<v-layout>
96	<v-flex xs12 sm10 offset-sm1>	96	<v-flex xs12 sm10 offset-sm1>
97	<v-card-actions>	97	<v-card-actions>
98	<v-btn round dark @click.native="close">Cancel</v-btn>	98	<v-btn round dark @click.native="close">Cancel</v-btn>
99	<v-spacer></v-spacer>	99	<v-spacer></v-spacer>
100	<v-btn round dark @click="save">Save</v-btn>	100	<v-btn round dark @click="save">Save</v-btn>
101	</v-card-actions>	101	</v-card-actions>
102	</v-flex>	102	</v-flex>
103	</v-layout>	103	</v-layout>
104	</v-container>	104	</v-container>
105	</v-form>	105	</v-form>
106	</v-card>	106	</v-card>
107	</v-flex>	107	</v-flex>
108	</v-dialog>	108	</v-dialog>
109		109
110	<!-- **** PROFILE VIEW NOTIFICATION DEATILS **** -->	110	<!-- **** PROFILE VIEW NOTIFICATION DEATILS **** -->
111		111
112	<v-dialog v-model="dialog1" max-width="600px">	112	<v-dialog v-model="dialog1" max-width="600px">
113	<v-toolbar color="white">	113	<v-toolbar color="white">
114	<v-spacer></v-spacer>	114	<v-spacer></v-spacer>
115	<v-toolbar-title>	115	<v-toolbar-title>
116	<h3>Notification</h3>	116	<h3>Notification</h3>
117	</v-toolbar-title>	117	</v-toolbar-title>
118	<v-spacer></v-spacer>	118	<v-spacer></v-spacer>
119	<v-icon @click="close1">close</v-icon>	119	<v-icon @click="close1">close</v-icon>
120	</v-toolbar>	120	</v-toolbar>
121	<v-card>	121	<v-card>
122	<v-flex align-center justify-center layout text-xs-center>	122	<v-flex align-center justify-center layout text-xs-center>
123	<v-avatar size="50px" style="position:absolute; top:20px;">	123	<v-avatar size="50px" style="position:absolute; top:20px;">
124	<img src="/static/icon/user.png" />	124	<img src="/static/icon/user.png" />
125	</v-avatar>	125	</v-avatar>
126	</v-flex>	126	</v-flex>
127	<v-card-text>	127	<v-card-text>
128	<v-container grid-list-md>	128	<v-container grid-list-md>
129	<v-layout wrap>	129	<v-layout wrap>
130	<v-flex>	130	<v-flex>
131	<br />	131	<br />
132	<br />	132	<br />
133	<v-layout>	133	<v-layout>
134	<v-flex xs5 sm6>	134	<v-flex xs5 sm6>
135	<h5 class="right my-1">Title:</h5>	135	<h5 class="right my-1"><b>Title:</b></h5>
136	</v-flex>	136	</v-flex>
137	<v-flex sm6 xs8>	137	<v-flex sm6 xs8>
138	<h5 class="my-1">{{ editedItem.title }}</h5>	138	<h5 class="my-1">{{ editedItem.title }}</h5>
139	</v-flex>	139	</v-flex>
140	</v-layout>	140	</v-layout>
141	<v-layout>	141	<v-layout>
142	<v-flex xs5 sm6>	142	<v-flex xs5 sm6>
143	<h5 class="right my-1">Description:</h5>	143	<h5 class="right my-1"><b>Description:</b></h5>
144	</v-flex>	144	</v-flex>
145	<v-flex sm6 xs8>	145	<v-flex sm6 xs8>
146	<h5 class="my-1">{{ editedItem.description }}</h5>	146	<h5 class="my-1">{{ editedItem.description }}</h5>
147	</v-flex>	147	</v-flex>
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-card-text>	152	</v-card-text>
153	</v-card>	153	</v-card>
154	</v-dialog>	154	</v-dialog>
155	<v-snackbar	155	<v-snackbar
156	:timeout="timeout"	156	:timeout="timeout"
157	:top="y === 'top'"	157	:top="y === 'top'"
158	:right="x === 'right'"	158	:right="x === 'right'"
159	:vertical="mode === 'vertical'"	159	:vertical="mode === 'vertical'"
160	v-model="snackbar"	160	v-model="snackbar"
161	color="success"	161	color="success"
162	>{{ text }}</v-snackbar>	162	>{{ text }}</v-snackbar>
163		163
164	<!-- **** EXISTING-USERS NOTIFICATION TABLE **** -->	164	<!-- **** EXISTING-USERS NOTIFICATION TABLE **** -->
165		165
166	<v-data-table	166	<v-data-table
167	:headers="headers"	167	:headers="headers"
168	:items="desserts"	168	:items="desserts"
169	:pagination.sync="pagination"	169	:pagination.sync="pagination"
170	:search="search"	170	:search="search"
171	>	171	>
172	<template slot="items" slot-scope="props">	172	<template slot="items" slot-scope="props">
173	<td id="td" class="text-xs-center">{{ props.index}}</td>	173	<td id="td" class="text-xs-center">{{ props.index}}</td>
174	<td id="td" class="text-xs-center">{{ props.item.title}}</td>	174	<td id="td" class="text-xs-center">{{ props.item.title}}</td>
175	<td id="td" class="text-xs-center">{{ props.item.description}}</td>	175	<td id="td" class="text-xs-center">{{ props.item.description}}</td>
176		176
177	<td id="td" class="text-xs-center">	177	<td id="td" class="text-xs-center">
178	<span>	178	<span>
179	<img	179	<img
180	style="cursor:pointer; width:25px; height:18px; "	180	style="cursor:pointer; width:25px; height:18px; "
181	class="mr-5"	181	class="mr-5"
182	@click="profile(props.item)"	182	@click="profile(props.item)"
183	src="/static/icon/eye1.png"	183	src="/static/icon/eye1.png"
184	/>	184	/>
185	<img	185	<img
186	style="cursor:pointer; width:20px; height:18px; "	186	style="cursor:pointer; width:20px; height:18px; "
187	class="mr-5"	187	class="mr-5"
188	@click="editItem(props.item)"	188	@click="editItem(props.item)"
189	src="/static/icon/edit1.png"	189	src="/static/icon/edit1.png"
190	/>	190	/>
191	<img	191	<img
192	style="cursor:pointer;width:20px; height:20px; "	192	style="cursor:pointer;width:20px; height:20px; "
193	class="mr-5"	193	class="mr-5"
194	@click="deleteItem(props.item)"	194	@click="deleteItem(props.item)"
195	src="/static/icon/delete1.png"	195	src="/static/icon/delete1.png"
196	/>	196	/>
197	</span>	197	</span>
198	</td>	198	</td>
199	</template>	199	</template>
200	<v-alert	200	<v-alert
201	slot="no-results"	201	slot="no-results"
202	:value="true"	202	:value="true"
203	color="error"	203	color="error"
204	icon="warning"	204	icon="warning"
205	>Your search for "{{ search }}" found no results.</v-alert>	205	>Your search for "{{ search }}" found no results.</v-alert>
206	</v-data-table>	206	</v-data-table>
207	</v-tab-item>	207	</v-tab-item>
208		208
209	<!-- **** ADD MULTIPLE NOTIFICATION **** -->	209	<!-- **** ADD MULTIPLE NOTIFICATION **** -->
210		210
211	<v-tab-item>	211	<v-tab-item>
212	<v-container>	212	<v-container>
213	<v-snackbar	213	<v-snackbar
214	:timeout="timeout"	214	:timeout="timeout"
215	:top="y === 'top'"	215	:top="y === 'top'"
216	:right="x === 'right'"	216	:right="x === 'right'"
217	:vertical="mode === 'vertical'"	217	:vertical="mode === 'vertical'"
218	v-model="snackbar"	218	v-model="snackbar"
219	color="success"	219	color="success"
220	>{{ text }}</v-snackbar>	220	>{{ text }}</v-snackbar>
221	<v-flex xs12 sm12 class="my-4">	221	<v-flex xs12 sm12 class="my-4">
222	<v-card flat>	222	<v-card flat>
223	<v-form ref="form" v-model="valid" lazy-validation>	223	<v-form ref="form" v-model="valid" lazy-validation>
224	<v-container fluid>	224	<v-container fluid>
225	<v-layout>	225	<v-layout>
226	<v-flex	226	<v-flex
227	xs12	227	xs12
228	class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"	228	class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
229	>	229	>
230	<v-avatar size="100px">	230	<v-avatar size="100px">
231	<img src="/static/icon/user.png" v-if="!imageUrl" />	231	<img src="/static/icon/user.png" v-if="!imageUrl" />
232	</v-avatar>	232	</v-avatar>
233	<input	233	<input
234	type="file"	234	type="file"
235	style="display: none"	235	style="display: none"
236	ref="image"	236	ref="image"
237	accept="image/*"	237	accept="image/*"
238	@change="onFilePicked"	238	@change="onFilePicked"
239	/>	239	/>
240	<img	240	<img
241	:src="imageData.imageUrl"	241	:src="imageData.imageUrl"
242	height="150"	242	height="150"
243	v-if="imageUrl"	243	v-if="imageUrl"
244	style="border-radius:50%; width:200px"	244	style="border-radius:50%; width:200px"
245	/>	245	/>
246	</v-flex>	246	</v-flex>
247	</v-layout>	247	</v-layout>
248	<v-flex xs12>	248	<v-flex xs12>
249	<v-layout>	249	<v-layout>
250	<v-flex xs4 class="pt-4 subheading">	250	<v-flex xs4 class="pt-4 subheading">
251	<label class="right">Title:</label>	251	<label class="right">Title:</label>
252	</v-flex>	252	</v-flex>
253	<v-flex xs4 class="ml-3">	253	<v-flex xs4 class="ml-3">
254	<v-text-field	254	<v-text-field
255	v-model="addNotification.title"	255	v-model="addNotification.title"
256	placeholder="fill your Title"	256	placeholder="fill your Title"
257	type="text"	257	type="text"
258	:rules="titleRules"	258	:rules="titleRules"
259	required	259	required
260	></v-text-field>	260	></v-text-field>
261	</v-flex>	261	</v-flex>
262	</v-layout>	262	</v-layout>
263	</v-flex>	263	</v-flex>
264	<v-flex xs12>	264	<v-flex xs12>
265	<v-layout>	265	<v-layout>
266	<v-flex xs4 class="pt-4 subheading">	266	<v-flex xs4 class="pt-4 subheading">
267	<label class="right">Description:</label>	267	<label class="right">Description:</label>
268	</v-flex>	268	</v-flex>
269	<v-flex xs4 class="ml-3">	269	<v-flex xs4 class="ml-3">
270	<v-text-field	270	<v-text-field
271	placeholder="fill your Description"	271	placeholder="fill your Description"
272	:rules="descriptionRules"	272	:rules="descriptionRules"
273	v-model="addNotification.description"	273	v-model="addNotification.description"
274	type="text"	274	type="text"
275	required	275	required
276	></v-text-field>	276	></v-text-field>
277	</v-flex>	277	</v-flex>
278	</v-layout>	278	</v-layout>
279	</v-flex>	279	</v-flex>
280	<v-layout>	280	<v-layout>
281	<v-flex xs12 sm6 offset-sm3>	281	<v-flex xs12 sm6 offset-sm3>
282	<v-card-actions>	282	<v-card-actions>
283	<v-btn @click="clear" round dark>clear</v-btn>	283	<v-btn @click="clear" round dark>clear</v-btn>
284	<v-spacer></v-spacer>	284	<v-spacer></v-spacer>
285	<v-btn @click="submit" round dark :loading="loading">Add</v-btn>	285	<v-btn @click="submit" round dark :loading="loading">Add</v-btn>
286	</v-card-actions>	286	</v-card-actions>
287	</v-flex>	287	</v-flex>
288	</v-layout>	288	</v-layout>
289	</v-container>	289	</v-container>
290	</v-form>	290	</v-form>
291	</v-card>	291	</v-card>
292	</v-flex>	292	</v-flex>
293	</v-container>	293	</v-container>
294	</v-tab-item>	294	</v-tab-item>
295	</v-tabs>	295	</v-tabs>
296	<div class="loader" v-if="showLoader">	296	<div class="loader" v-if="showLoader">
297	<v-progress-circular indeterminate color="white"></v-progress-circular>	297	<v-progress-circular indeterminate color="white"></v-progress-circular>
298	</div>	298	</div>
299	</v-app>	299	</v-app>
300	</template>	300	</template>
301		301
302	<script>	302	<script>
303	import http from "@/Services/http.js";	303	import http from "@/Services/http.js";
304	import Util from "@/util";	304	import Util from "@/util";
305		305
306	export default {	306	export default {
307	data: () => ({	307	data: () => ({
308	snackbar: false,	308	snackbar: false,
309	y: "top",	309	y: "top",
310	x: "right",	310	x: "right",
311	mode: "",	311	mode: "",
312	timeout: 3000,	312	timeout: 3000,
313	text: "",	313	text: "",
314	loading: false,	314	loading: false,
315	date: null,	315	date: null,
316	search: "",	316	search: "",
317	showLoader: false,	317	showLoader: false,
318	dialog: false,	318	dialog: false,
319	dialog1: false,	319	dialog1: false,
320	valid: true,	320	valid: true,
321	isActive: true,	321	isActive: true,
322	newActive: false,	322	newActive: false,
323	pagination: {	323	pagination: {
324	rowsPerPage: 15	324	rowsPerPage: 15
325	},	325	},
326	imageData: {},	326	imageData: {},
327	imageName: "",	327	imageName: "",
328	imageUrl: "",	328	imageUrl: "",
329	imageFile: "",	329	imageFile: "",
330	titleRules: [v => !!v \|\| " Tilte is required"],	330	titleRules: [v => !!v \|\| " Tilte is required"],
331	descriptionRules: [v => !!v \|\| " Description is required"],	331	descriptionRules: [v => !!v \|\| " Description is required"],
332	headers: [	332	headers: [
333	{	333	{
334	text: "No",	334	text: "No",
335	align: "center",	335	align: "center",
336	sortable: false,	336	sortable: false,
337	value: "No"	337	value: "No"
338	},	338	},
339	{ text: "Title", value: "title", sortable: false, align: "center" },	339	{ text: "Title", value: "title", sortable: false, align: "center" },
340	{	340	{
341	text: "Description",	341	text: "Description",
342	value: "description",	342	value: "description",
343	sortable: false,	343	sortable: false,
344	align: "center"	344	align: "center"
345	},	345	},
346	{ text: "Action", value: "", sortable: false, align: "center" }	346	{ text: "Action", value: "", sortable: false, align: "center" }
347	],	347	],
348	desserts: [],	348	desserts: [],
349	editedIndex: -1,	349	editedIndex: -1,
350	addNotification: {	350	addNotification: {
351	title: "",	351	title: "",
352	description: ""	352	description: ""
353	},	353	},
354	editedItem: {	354	editedItem: {
355	title: "",	355	title: "",
356	description: ""	356	description: ""
357	},	357	},
358	defaultItem: {	358	defaultItem: {
359	title: "",	359	title: "",
360	description: ""	360	description: ""
361	}	361	}
362	}),	362	}),
363	methods: {	363	methods: {
364	pickFile() {	364	pickFile() {
365	this.$refs.image.click();	365	this.$refs.image.click();
366	},	366	},
367		367
368	onFilePicked(e) {	368	onFilePicked(e) {
369	// console.log(e)	369	// console.log(e)
370	const files = e.target.files;	370	const files = e.target.files;
371	this.imageData.upload = e.target.files[0];	371	this.imageData.upload = e.target.files[0];
372	if (files[0] !== undefined) {	372	if (files[0] !== undefined) {
373	this.imageName = files[0].name;	373	this.imageName = files[0].name;
374	if (this.imageName.lastIndexOf(".") <= 0) {	374	if (this.imageName.lastIndexOf(".") <= 0) {
375	return;	375	return;
376	}	376	}
377	const fr = new FileReader();	377	const fr = new FileReader();
378	fr.readAsDataURL(files[0]);	378	fr.readAsDataURL(files[0]);
379	fr.addEventListener("load", () => {	379	fr.addEventListener("load", () => {
380	this.imageUrl = fr.result;	380	this.imageUrl = fr.result;
381	this.imageFile = files[0]; // this is an image file that can be sent to server...	381	this.imageFile = files[0]; // this is an image file that can be sent to server...
382	this.imageData.imageUrl = URL.createObjectURL(this.imageFile);	382	this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
383	console.log("upload=======>", this.imageData.imageUrl);	383	console.log("upload=======>", this.imageData.imageUrl);
384	console.log("imageFile", this.imageFile);	384	console.log("imageFile", this.imageFile);
385	});	385	});
386	} else {	386	} else {
387	this.imageName = "";	387	this.imageName = "";
388	this.imageFile = "";	388	this.imageFile = "";
389	this.imageUrl = "";	389	this.imageUrl = "";
390	}	390	}
391	},	391	},
392	getNotifications() {	392	getNotifications() {
393	this.showLoader = true;	393	this.showLoader = true;
394	var token = this.$store.state.token;	394	var token = this.$store.state.token;
395	http()	395	http()
396	.get("/getNotificationsList", {	396	.get("/getNotificationsList", {
397	headers: { Authorization: "Bearer " + token }	397	headers: { Authorization: "Bearer " + token }
398	})	398	})
399	.then(response => {	399	.then(response => {
400	this.desserts = response.data.data;	400	this.desserts = response.data.data;
401	this.showLoader = false;	401	this.showLoader = false;
402	// console.log("getNotifications=====>",this.desserts)	402	// console.log("getNotifications=====>",this.desserts)
403	})	403	})
404	.catch(err => {	404	.catch(err => {
405	// console.log("err====>", err);	405	// console.log("err====>", err);
406	this.showLoader = false;	406	this.showLoader = false;
407	if (error.response.status === 401) {	407	if (error.response.status === 401) {
408	this.$router.replace({ path: "/" });	408	this.$router.replace({ path: "/" });
409	this.$store.dispatch("setToken", null);	409	this.$store.dispatch("setToken", null);
410	this.$store.dispatch("Id", null);	410	this.$store.dispatch("Id", null);
411	}	411	}
412	});	412	});
413	},	413	},
414	editItem(item) {	414	editItem(item) {
415	this.editedIndex = this.desserts.indexOf(item);	415	this.editedIndex = this.desserts.indexOf(item);
416	this.editedItem = Object.assign({}, item);	416	this.editedItem = Object.assign({}, item);
417	this.dialog = true;	417	this.dialog = true;
418	},	418	},
419	profile(item) {	419	profile(item) {
420	this.editedIndex = this.desserts.indexOf(item);	420	this.editedIndex = this.desserts.indexOf(item);
421	this.editedItem = Object.assign({}, item);	421	this.editedItem = Object.assign({}, item);
422	this.dialog1 = true;	422	this.dialog1 = true;
423	},	423	},
424		424
425	deleteItem(item) {	425	deleteItem(item) {
426	let deleteNotification = {	426	let deleteNotification = {
427	notificationId: item._id	427	notificationId: item._id
428	};	428	};
429	http()	429	http()
430	.delete(	430	.delete(
431	"/deleteNotification",	431	"/deleteNotification",
432	confirm("Are you sure you want to delete this?") && {	432	confirm("Are you sure you want to delete this?") && {
433	params: deleteNotification	433	params: deleteNotification
434	}	434	}
435	)	435	)
436	.then(response => {	436	.then(response => {
437	// console.log("deleteNotification",deleteNotification)	437	// console.log("deleteNotification",deleteNotification)
438	if ((this.snackbar = true)) {	438	if ((this.snackbar = true)) {
439	this.text = "Successfully Delete Notification";	439	this.text = "Successfully Delete Notification";
440	}	440	}
441	this.getNotifications();	441	this.getNotifications();
442	})	442	})
443	.catch(error => {	443	.catch(error => {
444	console.log(error);	444	console.log(error);
445	});	445	});
446	},	446	},
447	activeTab(type) {	447	activeTab(type) {
448	switch (type) {	448	switch (type) {
449	case "existing":	449	case "existing":
450	this.newActive = false;	450	this.newActive = false;
451	this.isActive = true;	451	this.isActive = true;
452	break;	452	break;
453		453
454	default:	454	default:
455	this.newActive = true;	455	this.newActive = true;
456	this.isActive = false;	456	this.isActive = false;
457	break;	457	break;
458	}	458	}
459	},	459	},
460	close() {	460	close() {
461	this.dialog = false;	461	this.dialog = false;
462	setTimeout(() => {	462	setTimeout(() => {
463	this.editedItem = Object.assign({}, this.defaultItem);	463	this.editedItem = Object.assign({}, this.defaultItem);
464	this.editedIndex = -1;	464	this.editedIndex = -1;
465	}, 300);	465	}, 300);
466	},	466	},
467	close1() {	467	close1() {
468	this.dialog1 = false;	468	this.dialog1 = false;
469	},	469	},
470	submit() {	470	submit() {
471	if (this.$refs.form.validate()) {	471	if (this.$refs.form.validate()) {
472	let imageData = new FormData();	472	let imageData = new FormData();
473	imageData.append("upload", this.imageFile);	473	imageData.append("upload", this.imageFile);
474	console.log(imageData);	474	console.log(imageData);
475	let create = {	475	let create = {
476	title: this.addNotification.title,	476	title: this.addNotification.title,
477	description: this.addNotification.description	477	description: this.addNotification.description
478	// imageData	478	// imageData
479	};	479	};
480	console.log(create);	480	console.log(create);
481	this.loading = true;	481	this.loading = true;
482	http()	482	http()
483	.post("/createNotification", create)	483	.post("/createNotification", create)
484	.then(response => {	484	.then(response => {
485	console.log(create);	485	console.log(create);
486	if ((this.snackbar = true)) {	486	if ((this.snackbar = true)) {
487	this.text = "New Notification added successfully";	487	this.text = "New Notification added successfully";
488	}	488	}
489	this.getNotifications();	489	this.getNotifications();
490	this.clear();	490	this.clear();
491	this.loading = false;	491	this.loading = false;
492	})	492	})
493	.catch(error => {	493	.catch(error => {
494	// console.log(error);	494	// console.log(error);
495	if ((this.snackbar = true)) {	495	if ((this.snackbar = true)) {
496	this.text = error.response.data.message;	496	this.text = error.response.data.message;
497	}	497	}
498	this.loading = false;	498	this.loading = false;
499	});	499	});
500	}	500	}
501	},	501	},
502	clear() {	502	clear() {
503	this.$refs.form.reset();	503	this.$refs.form.reset();
504	},	504	},
505	save() {	505	save() {
506	let imageData = new FormData();	506	let imageData = new FormData();
507	imageData.append("upload", this.imageFile);	507	imageData.append("upload", this.imageFile);
508	console.log(imageData);	508	console.log(imageData);
509	let editNotification = {	509	let editNotification = {
510	notificationId: this.editedItem._id,	510	notificationId: this.editedItem._id,
511	title: this.editedItem.title,	511	title: this.editedItem.title,
512	description: this.editedItem.description	512	description: this.editedItem.description
513	// imageData	513	// imageData
514	};	514	};
515	http()	515	http()
516	.put("/updateNotification", editNotification)	516	.put("/updateNotification", editNotification)
517	.then(response => {	517	.then(response => {
518	// console.log("editNotification",editNotification);	518	// console.log("editNotification",editNotification);
519	if ((this.snackbar = true)) {	519	if ((this.snackbar = true)) {
520	this.text = "Successfully Edit Notification";	520	this.text = "Successfully Edit Notification";
521	}	521	}
522	this.getNotifications();	522	this.getNotifications();
523	})	523	})
524	.catch(error => {	524	.catch(error => {
525	// console.log(error);	525	// console.log(error);
526	});	526	});
527	this.close();	527	this.close();
528	}	528	}
529	},	529	},
530	mounted() {	530	mounted() {
531	this.getNotifications();	531	this.getNotifications();
532	},	532	},
533	created() {	533	created() {
534	this.$root.$on("app:search", search => {	534	this.$root.$on("app:search", search => {
535	this.search = search;	535	this.search = search;
536	});	536	});
537	},	537	},
538	beforeDestroy() {	538	beforeDestroy() {
539	// dont forget to remove the listener	539	// dont forget to remove the listener
540	this.$root.$off("app:search");	540	this.$root.$off("app:search");
541	}	541	}
542	};	542	};
543	</script>	543	</script>
544	<style scoped>	544	<style scoped>
545	#td {	545	#td {
546	max-width: 200px;	546	max-width: 200px;
547	}	547	}
548	.active {	548	.active {
549	background-color: black;	549	background-color: black;
550	color: white !important;	550	color: white !important;
551	}	551	}
552	.activebtn {	552	.activebtn {
553	color: black !important;	553	color: black !important;
554	}	554	}
555	</style>	555	</style>

src/pages/Teachers/teachers.vue

Diff comments View file @ceb4303

1	<template>	1	<template>
2	<v-app id="pages-dasboard">	2	<v-app id="pages-dasboard">
3	<v-tabs grow slider-color="black">	3	<v-tabs grow slider-color="black">
4	<v-tab	4	<v-tab
5	ripple	5	ripple
6	@click="activeTab('existing')"	6	@click="activeTab('existing')"
7	v-bind:class="{ active: isActive }"	7	v-bind:class="{ active: isActive }"
8	id="tab"	8	id="tab"
9	class="subheading"	9	class="subheading"
10	>Existing Teachers</v-tab>	10	>Existing Teachers</v-tab>
11	<v-tab	11	<v-tab
12	ripple	12	ripple
13	@click="activeTab('new')"	13	@click="activeTab('new')"
14	v-bind:class="{ active: newActive }"	14	v-bind:class="{ active: newActive }"
15	id="tab1"	15	id="tab1"
16	User	16	User
17	class="subheading"	17	class="subheading"
18	>Add New Teachers</v-tab>	18	>Add New Teachers</v-tab>
19	<!-- **** EDIT TEACHERS DETAILS **** -->	19	<!-- **** EDIT TEACHERS DETAILS **** -->
20	<v-tab-item>	20	<v-tab-item>
21	<v-snackbar	21	<v-snackbar
22	:timeout="timeout"	22	:timeout="timeout"
23	:top="y === 'top'"	23	:top="y === 'top'"
24	:right="x === 'right'"	24	:right="x === 'right'"
25	:vertical="mode === 'vertical'"	25	:vertical="mode === 'vertical'"
26	v-model="snackbar"	26	v-model="snackbar"
27	color="success"	27	color="success"
28	>{{ text }}</v-snackbar>	28	>{{ text }}</v-snackbar>
29	<v-dialog v-model="dialog" max-width="1100px" scrollable>	29	<v-dialog v-model="dialog" max-width="1100px" scrollable>
30	<v-card flat>	30	<v-card flat>
31	<v-toolbar color="grey lighten-2" flat>	31	<v-toolbar color="grey lighten-2" flat>
32	<v-spacer></v-spacer>	32	<v-spacer></v-spacer>
33	<v-toolbar-title>Edit Teacher Profile</v-toolbar-title>	33	<v-toolbar-title>Edit Teacher Profile</v-toolbar-title>
34	<v-spacer></v-spacer>	34	<v-spacer></v-spacer>
35	</v-toolbar>	35	</v-toolbar>
36	<v-card-text style="height: 800px;">	36	<v-card-text style="height: 800px;">
37	<v-form ref="form">	37	<v-form ref="form">
38	<v-container fluid>	38	<v-container fluid>
39	<v-layout>	39	<v-layout>
40	<v-flex	40	<v-flex
41	xs12	41	xs12
42	class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"	42	class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
43	>	43	>
44	<v-avatar size="160px">	44	<v-avatar size="160px">
45	<img	45	<img
46	src="/static/icon/user.png"	46	src="/static/icon/user.png"
47	v-if="!editedItem.profilePicUrl && !imageUrl"	47	v-if="!editedItem.profilePicUrl && !imageUrl"
48	/>	48	/>
49	<img	49	<img
50	:src="editedItem.profilePicUrl"	50	:src="editedItem.profilePicUrl"
51	v-else-if="editedItem.profilePicUrl && !imageUrl"	51	v-else-if="editedItem.profilePicUrl && !imageUrl"
52	/>	52	/>
53	<img	53	<img
54	v-if="imageUrl"	54	v-if="imageUrl"
55	:src="imageUrl"	55	:src="imageUrl"
56	height="150"	56	height="150"
57	style="border-radius:50%; width:200px"	57	style="border-radius:50%; width:200px"
58	/>	58	/>
59	</v-avatar>	59	</v-avatar>
60	<input	60	<input
61	type="file"	61	type="file"
62	style="display:none"	62	style="display:none"
63	ref="image"	63	ref="image"
64	accept="image/*"	64	accept="image/*"
65	@change="onFilePicked"	65	@change="onFilePicked"
66	/>	66	/>
67	</v-flex>	67	</v-flex>
68	</v-layout>	68	</v-layout>
69	<v-layout>	69	<v-layout>
70	<v-flex xs12 sm6>	70	<v-flex xs12 sm6>
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">Full Name:</label>	73	<label class="right">Full Name:</label>
74	</v-flex>	74	</v-flex>
75	<v-flex xs8 class="ml-3">	75	<v-flex xs8 class="ml-3">
76	<v-text-field	76	<v-text-field
77	v-model="editedItem.name"	77	v-model="editedItem.name"
78	placeholder="fill your full Name"	78	placeholder="fill your full Name"
79	name="name"	79	name="name"
80	type="text"	80	type="text"
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-flex xs12 sm6>	86	<v-flex xs12 sm6>
87	<v-layout>	87	<v-layout>
88	<v-flex xs4 class="pt-4 subheading">	88	<v-flex xs4 class="pt-4 subheading">
89	<label class="right">Email ID:</label>	89	<label class="right">Email ID:</label>
90	</v-flex>	90	</v-flex>
91	<v-flex xs8 class="ml-3">	91	<v-flex xs8 class="ml-3">
92	<v-text-field	92	<v-text-field
93	placeholder="fill your email"	93	placeholder="fill your email"
94	v-model="editedItem.email"	94	v-model="editedItem.email"
95	type="text"	95	type="text"
96	name="email"	96	name="email"
97	required	97	required
98	></v-text-field>	98	></v-text-field>
99	</v-flex>	99	</v-flex>
100	</v-layout>	100	</v-layout>
101	</v-flex>	101	</v-flex>
102	</v-layout>	102	</v-layout>
103	<v-layout>	103	<v-layout>
104	<v-flex xs12 sm6>	104	<v-flex xs12 sm6>
105	<v-layout>	105	<v-layout>
106	<v-flex xs4 class="pt-4 subheading">	106	<v-flex xs4 class="pt-4 subheading">
107	<label class="right">Date of Birth:</label>	107	<label class="right">Date of Birth:</label>
108	</v-flex>	108	</v-flex>
109	<v-flex xs8 class="ml-3">	109	<v-flex xs8 class="ml-3">
110	<v-menu	110	<v-menu
111	ref="menu"	111	ref="menu"
112	:close-on-content-click="false"	112	:close-on-content-click="false"
113	v-model="menu2"	113	v-model="menu2"
114	:nudge-right="40"	114	:nudge-right="40"
115	lazy	115	lazy
116	transition="scale-transition"	116	transition="scale-transition"
117	offset-y	117	offset-y
118	full-width	118	full-width
119	min-width="290px"	119	min-width="290px"
120	>	120	>
121	<v-text-field	121	<v-text-field
122	slot="activator"	122	slot="activator"
123	v-model="editedItem.dob"	123	v-model="editedItem.dob"
124	placeholder="Select date"	124	placeholder="Select date"
125	></v-text-field>	125	></v-text-field>
126	<v-date-picker	126	<v-date-picker
127	ref="picker"	127	ref="picker"
128	v-model="editedItem.dob"	128	v-model="editedItem.dob"
129	:max="new Date().toISOString().substr(0, 10)"	129	:max="new Date().toISOString().substr(0, 10)"
130	min="1950-01-01"	130	min="1950-01-01"
131	@input="menu2 = false"	131	@input="menu2 = false"
132	></v-date-picker>	132	></v-date-picker>
133	</v-menu>	133	</v-menu>
134	</v-flex>	134	</v-flex>
135	</v-layout>	135	</v-layout>
136	</v-flex>	136	</v-flex>
137	<v-flex xs12 sm6>	137	<v-flex xs12 sm6>
138	<v-layout>	138	<v-layout>
139	<v-flex xs4 class="pt-4 subheading">	139	<v-flex xs4 class="pt-4 subheading">
140	<label class="right">City:</label>	140	<label class="right">City:</label>
141	</v-flex>	141	</v-flex>
142	<v-flex xs8 class="ml-3">	142	<v-flex xs8 class="ml-3">
143	<v-text-field	143	<v-text-field
144	v-model="editedItem.city"	144	v-model="editedItem.city"
145	placeholder="fill your City Name"	145	placeholder="fill your City Name"
146	name="City"	146	name="City"
147	type="text"	147	type="text"
148	required	148	required
149	></v-text-field>	149	></v-text-field>
150	</v-flex>	150	</v-flex>
151	</v-layout>	151	</v-layout>
152	</v-flex>	152	</v-flex>
153	</v-layout>	153	</v-layout>
154	<v-layout>	154	<v-layout>
155	<v-flex xs12 sm6>	155	<v-flex xs12 sm6>
156	<v-layout>	156	<v-layout>
157	<v-flex xs4 class="pt-4 subheading">	157	<v-flex xs4 class="pt-4 subheading">
158	<label class="right">State:</label>	158	<label class="right">State:</label>
159	</v-flex>	159	</v-flex>
160	<v-flex xs8 class="ml-3">	160	<v-flex xs8 class="ml-3">
161	<v-text-field	161	<v-text-field
162	v-model="editedItem.state"	162	v-model="editedItem.state"
163	placeholder="fill your State Name"	163	placeholder="fill your State Name"
164	name="state"	164	name="state"
165	type="text"	165	type="text"
166	required	166	required
167	></v-text-field>	167	></v-text-field>
168	</v-flex>	168	</v-flex>
169	</v-layout>	169	</v-layout>
170	</v-flex>	170	</v-flex>
171	<v-flex xs12 sm6>	171	<v-flex xs12 sm6>
172	<v-layout>	172	<v-layout>
173	<v-flex xs4 class="pt-4 subheading">	173	<v-flex xs4 class="pt-4 subheading">
174	<label class="right">PinCode:</label>	174	<label class="right">PinCode:</label>
175	</v-flex>	175	</v-flex>
176	<v-flex xs8 class="ml-3">	176	<v-flex xs8 class="ml-3">
177	<v-text-field	177	<v-text-field
178	v-model="editedItem.pincode"	178	v-model="editedItem.pincode"
179	placeholder="fill your pincode"	179	placeholder="fill your pincode"
180	name="pincode"	180	name="pincode"
181	type="number"	181	type="number"
182	required	182	required
183	></v-text-field>	183	></v-text-field>
184	</v-flex>	184	</v-flex>
185	</v-layout>	185	</v-layout>
186	</v-flex>	186	</v-flex>
187	</v-layout>	187	</v-layout>
188	<v-layout>	188	<v-layout>
189	<v-flex xs12 sm6>	189	<v-flex xs12 sm6>
190	<v-layout>	190	<v-layout>
191	<v-flex xs4 class="pt-4 subheading">	191	<v-flex xs4 class="pt-4 subheading">
192	<label class="right">Mobile NO:</label>	192	<label class="right">Mobile NO:</label>
193	</v-flex>	193	</v-flex>
194	<v-flex xs8 class="ml-3">	194	<v-flex xs8 class="ml-3">
195	<v-text-field	195	<v-text-field
196	v-model="editedItem.mobileNo"	196	v-model="editedItem.mobileNo"
197	placeholder="fill your MobileNo"	197	placeholder="fill your MobileNo"
198	name="mobileNo"	198	name="mobileNo"
199	type="number"	199	type="number"
200	required	200	required
201	></v-text-field>	201	></v-text-field>
202	</v-flex>	202	</v-flex>
203	</v-layout>	203	</v-layout>
204	</v-flex>	204	</v-flex>
205	<v-flex xs12 sm6>	205	<v-flex xs12 sm6>
206	<v-layout>	206	<v-layout>
207	<v-flex xs4 class="pt-4 subheading">	207	<v-flex xs4 class="pt-4 subheading">
208	<label class="right">Select Country:</label>	208	<label class="right">Select Country:</label>
209	</v-flex>	209	</v-flex>
210	<v-flex xs8 class="ml-3">	210	<v-flex xs8 class="ml-3">
211	<v-autocomplete	211	<v-autocomplete
212	v-model="editedItem.country"	212	v-model="editedItem.country"
213	:items="countries"	213	:items="countries"
214	placeholder="Select Country Name"	214	placeholder="Select Country Name"
215	required	215	required
216	></v-autocomplete>	216	></v-autocomplete>
217	</v-flex>	217	</v-flex>
218	</v-layout>	218	</v-layout>
219	</v-flex>	219	</v-flex>
220	</v-layout>	220	</v-layout>
221	<v-layout>	221	<v-layout>
222	<v-flex xs12 sm6>	222	<v-flex xs12 sm6>
223	<v-layout>	223	<v-layout>
224	<v-flex xs4 class="pt-4 subheading">	224	<v-flex xs4 class="pt-4 subheading">
225	<label class="right">Join Date:</label>	225	<label class="right">Join Date:</label>
226	</v-flex>	226	</v-flex>
227	<v-flex xs8 class="ml-3">	227	<v-flex xs8 class="ml-3">
228	<v-menu	228	<v-menu
229	ref="menu"	229	ref="menu"
230	:close-on-content-click="false"	230	:close-on-content-click="false"
231	v-model="menu3"	231	v-model="menu3"
232	:nudge-right="40"	232	:nudge-right="40"
233	lazy	233	lazy
234	transition="scale-transition"	234	transition="scale-transition"
235	offset-y	235	offset-y
236	full-width	236	full-width
237	min-width="290px"	237	min-width="290px"
238	>	238	>
239	<v-text-field	239	<v-text-field
240	slot="activator"	240	slot="activator"
241	v-model="editedItem.joinDate"	241	v-model="editedItem.joinDate"
242	placeholder="Select date"	242	placeholder="Select date"
243	></v-text-field>	243	></v-text-field>
244	<v-date-picker	244	<v-date-picker
245	ref="picker"	245	ref="picker"
246	v-model="editedItem.joinDate"	246	v-model="editedItem.joinDate"
247	:max="new Date().toISOString().substr(0, 10)"	247	:max="new Date().toISOString().substr(0, 10)"
248	min="1950-01-01"	248	min="1950-01-01"
249	@input="menu3 = false"	249	@input="menu3 = false"
250	></v-date-picker>	250	></v-date-picker>
251	</v-menu>	251	</v-menu>
252	</v-flex>	252	</v-flex>
253	</v-layout>	253	</v-layout>
254	</v-flex>	254	</v-flex>
255	<v-flex xs12 sm6>	255	<v-flex xs12 sm6>
256	<v-layout>	256	<v-layout>
257	<v-flex xs4 class="pt-4 subheading">	257	<v-flex xs4 class="pt-4 subheading">
258	<label class="right">Uplaod Image:</label>	258	<label class="right">Uplaod Image:</label>
259	</v-flex>	259	</v-flex>
260	<v-flex xs8 class="ml-3">	260	<v-flex xs8 class="ml-3">
261	<v-text-field	261	<v-text-field
262	label="Select Image"	262	label="Select Image"
263	@click="pickFile"	263	@click="pickFile"
264	v-model="imageName"	264	v-model="imageName"
265	append-icon="attach_file"	265	append-icon="attach_file"
266	></v-text-field>	266	></v-text-field>
267	</v-flex>	267	</v-flex>
268	</v-layout>	268	</v-layout>
269	</v-flex>	269	</v-flex>
270	</v-layout>	270	</v-layout>
271	<v-layout>	271	<v-layout>
272	<v-flex xs12 sm12>	272	<v-flex xs12 sm12>
273	<v-layout>	273	<v-layout>
274	<v-flex xs3 class="pt-4 subheading pl-3" style="max-width: 17%;">	274	<v-flex xs3 class="pt-4 subheading pl-3" style="max-width: 17%;">
275	<label class>Present Address:</label>	275	<label class>Present Address:</label>
276	</v-flex>	276	</v-flex>
277	<v-flex xs12>	277	<v-flex xs12>
278	<v-text-field	278	<v-text-field
279	name="input-4-3"	279	name="input-4-3"
280	v-model="editedItem.presentAddress"	280	v-model="editedItem.presentAddress"
281	placeholder="fill Your present Address"	281	placeholder="fill Your present Address"
282	required	282	required
283	></v-text-field>	283	></v-text-field>
284	</v-flex>	284	</v-flex>
285	</v-layout>	285	</v-layout>
286	</v-flex>	286	</v-flex>
287	<v-flex xs12 sm12>	287	<v-flex xs12 sm12>
288	<v-layout>	288	<v-layout>
289	<v-flex xs3 class="pt-4 subheading" style="max-width: 17%;">	289	<v-flex xs3 class="pt-4 subheading" style="max-width: 17%;">
290	<label>Permanent Address:</label>	290	<label>Permanent Address:</label>
291	</v-flex>	291	</v-flex>
292	<v-flex xs12>	292	<v-flex xs12>
293	<v-text-field	293	<v-text-field
294	name="input-4-3"	294	name="input-4-3"
295	v-model="editedItem.permanentAddress"	295	v-model="editedItem.permanentAddress"
296	placeholder="fill Your Permanent Address"	296	placeholder="fill Your Permanent Address"
297	required	297	required
298	></v-text-field>	298	></v-text-field>
299	</v-flex>	299	</v-flex>
300	</v-layout>	300	</v-layout>
301	</v-flex>	301	</v-flex>
302	</v-layout>	302	</v-layout>
303	<v-layout>	303	<v-layout>
304	<v-flex xs12 sm12>	304	<v-flex xs12 sm12>
305	<v-card-actions>	305	<v-card-actions>
306	<v-btn round dark @click.native="close">Cancel</v-btn>	306	<v-btn round dark @click.native="close">Cancel</v-btn>
307	<v-spacer></v-spacer>	307	<v-spacer></v-spacer>
308	<v-btn round dark :loading="loading" @click="save">Save</v-btn>	308	<v-btn round dark :loading="loading" @click="save">Save</v-btn>
309	</v-card-actions>	309	</v-card-actions>
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-text>	314	</v-card-text>
315	</v-card>	315	</v-card>
316	</v-dialog>	316	</v-dialog>
317		317
318	<!-- **** PROFILE VIEW TEACHERS DETAILS **** -->	318	<!-- **** PROFILE VIEW TEACHERS DETAILS **** -->
319		319
320	<v-dialog v-model="dialog1" max-width="600px" scrollable>	320	<v-dialog v-model="dialog1" max-width="600px" scrollable>
321	<v-card>	321	<v-card>
322	<v-toolbar color="grey lighten-2" flat>	322	<v-toolbar color="grey lighten-2" flat>
323	<v-spacer></v-spacer>	323	<v-spacer></v-spacer>
324	<v-toolbar-title>	324	<v-toolbar-title>
325	<h3>Teacher Profile</h3>	325	<h3>Teacher Profile</h3>
326	</v-toolbar-title>	326	</v-toolbar-title>
327	<v-spacer></v-spacer>	327	<v-spacer></v-spacer>
328	<v-icon @click="close1">close</v-icon>	328	<v-icon @click="close1">close</v-icon>
329	</v-toolbar>	329	</v-toolbar>
330	<v-card-text style="height: 700px;">	330	<v-card-text style="height: 700px;">
331	<v-container grid-list-md>	331	<v-container grid-list-md>
332	<v-layout wrap>	332	<v-layout wrap>
333	<v-flex>	333	<v-flex>
334	<v-flex align-center justify-center layout text-xs-center>	334	<v-flex align-center justify-center layout text-xs-center>
335	<v-avatar size="160px">	335	<v-avatar size="160px">
336	<img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" />	336	<img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" />
337	<img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" />	337	<img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" />
338	</v-avatar>	338	</v-avatar>
339	</v-flex>	339	</v-flex>
340	<v-layout>	340	<v-layout>
341	<v-flex xs5 sm6>	341	<v-flex xs5 sm6>
342	<h5 class="right my-1">Full Name:</h5>	342	<h5 class="right my-1"><b>Full Name:</b></h5>
343	</v-flex>	343	</v-flex>
344	<v-flex sm6 xs8>	344	<v-flex sm6 xs8>
345	<h5 class="my-1">{{ editedItem.name }}</h5>	345	<h5 class="my-1">{{ editedItem.name }}</h5>
346	</v-flex>	346	</v-flex>
347	</v-layout>	347	</v-layout>
348	<v-layout>	348	<v-layout>
349	<v-flex xs5 sm6>	349	<v-flex xs5 sm6>
350	<h5 class="right my-1">Email:</h5>	350	<h5 class="right my-1"><b>Email:</b></h5>
351	</v-flex>	351	</v-flex>
352	<v-flex sm6 xs8>	352	<v-flex sm6 xs8>
353	<h5 class="my-1">{{ editedItem.email }}</h5>	353	<h5 class="my-1">{{ editedItem.email }}</h5>
354	</v-flex>	354	</v-flex>
355	</v-layout>	355	</v-layout>
356	<v-layout>	356	<v-layout>
357	<v-flex xs5 sm6>	357	<v-flex xs5 sm6>
358	<h5 class="right my-1">City:</h5>	358	<h5 class="right my-1"><b>City:</b></h5>
359	</v-flex>	359	</v-flex>
360	<v-flex sm6 xs8>	360	<v-flex sm6 xs8>
361	<h5 class="my-1">{{ editedItem.city }}</h5>	361	<h5 class="my-1">{{ editedItem.city }}</h5>
362	</v-flex>	362	</v-flex>
363	</v-layout>	363	</v-layout>
364	<v-layout>	364	<v-layout>
365	<v-flex xs5 sm6>	365	<v-flex xs5 sm6>
366	<h5 class="right my-1">State:</h5>	366	<h5 class="right my-1"><b>State:</b></h5>
367	</v-flex>	367	</v-flex>
368	<v-flex sm6 xs8>	368	<v-flex sm6 xs8>
369	<h5 class="my-1">{{ editedItem.state }}</h5>	369	<h5 class="my-1">{{ editedItem.state }}</h5>
370	</v-flex>	370	</v-flex>
371	</v-layout>	371	</v-layout>
372	<v-layout>	372	<v-layout>
373	<v-flex xs5 sm6>	373	<v-flex xs5 sm6>
374	<h5 class="right my-1">Country:</h5>	374	<h5 class="right my-1"><b>Country:</b></h5>
375	</v-flex>	375	</v-flex>
376	<v-flex sm6 xs8>	376	<v-flex sm6 xs8>
377	<h5 class="my-1">{{ editedItem.country }}</h5>	377	<h5 class="my-1">{{ editedItem.country }}</h5>
378	</v-flex>	378	</v-flex>
379	</v-layout>	379	</v-layout>
380	<v-layout>	380	<v-layout>
381	<v-flex xs5 sm6>	381	<v-flex xs5 sm6>
382	<h5 class="right my-1">Pincode:</h5>	382	<h5 class="right my-1"><b>Pincode:</b></h5>
383	</v-flex>	383	</v-flex>
384	<v-flex sm6 xs8>	384	<v-flex sm6 xs8>
385	<h5 class="my-1">{{ editedItem.pincode }}</h5>	385	<h5 class="my-1">{{ editedItem.pincode }}</h5>
386	</v-flex>	386	</v-flex>
387	</v-layout>	387	</v-layout>
388	<v-layout>	388	<v-layout>
389	<v-flex xs5 sm6>	389	<v-flex xs5 sm6>
390	<h5 class="right my-1">Mobile No:</h5>	390	<h5 class="right my-1"><b>Mobile No:</b></h5>
391	</v-flex>	391	</v-flex>
392	<v-flex sm6 xs8>	392	<v-flex sm6 xs8>
393	<h5 class="my-1">{{ editedItem.mobileNo }}</h5>	393	<h5 class="my-1">{{ editedItem.mobileNo }}</h5>
394	</v-flex>	394	</v-flex>
395	</v-layout>	395	</v-layout>
396	<v-layout>	396	<v-layout>
397	<v-flex xs5 sm6>	397	<v-flex xs5 sm6>
398	<h5 class="right my-1">Join Date:</h5>	398	<h5 class="right my-1"><b>Join Date:</b></h5>
399	</v-flex>	399	</v-flex>
400	<v-flex sm6 xs8>	400	<v-flex sm6 xs8>
401	<h5 class="my-1">{{ dates(editedItem.joinDate) }}</h5>	401	<h5 class="my-1">{{ dates(editedItem.joinDate) }}</h5>
402	</v-flex>	402	</v-flex>
403	</v-layout>	403	</v-layout>
404	<v-layout>	404	<v-layout>
405	<v-flex xs5 sm6>	405	<v-flex xs5 sm6>
406	<h5 class="right my-1">Date Of Birth:</h5>	406	<h5 class="right my-1"><b>Date Of Birth:</b></h5>
407	</v-flex>	407	</v-flex>
408	<v-flex sm6 xs8>	408	<v-flex sm6 xs8>
409	<h5 class="my-1">{{ dates(editedItem.dob) }}</h5>	409	<h5 class="my-1">{{ dates(editedItem.dob) }}</h5>
410	</v-flex>	410	</v-flex>
411	</v-layout>	411	</v-layout>
412	<v-layout>	412	<v-layout>
413	<v-flex xs6 sm6>	413	<v-flex xs6 sm6>
414	<h5 class="right my-1">Permanent Address:</h5>	414	<h5 class="right my-1"><b>Permanent Address:</b></h5>
415	</v-flex>	415	</v-flex>
416	<v-flex sm6 xs8>	416	<v-flex sm6 xs8>
417	<h5 class="my-1">{{ editedItem.permanentAddress }}</h5>	417	<h5 class="my-1">{{ editedItem.permanentAddress }}</h5>
418	</v-flex>	418	</v-flex>
419	</v-layout>	419	</v-layout>
420	<v-layout>	420	<v-layout>
421	<v-flex xs6 sm6>	421	<v-flex xs6 sm6>
422	<h5 class="right my-1">present Address:</h5>	422	<h5 class="right my-1"><b>present Address:</b></h5>
423	</v-flex>	423	</v-flex>
424	<v-flex sm6 xs8>	424	<v-flex sm6 xs8>
425	<h5 class="my-1">{{ editedItem.presentAddress }}</h5>	425	<h5 class="my-1">{{ editedItem.presentAddress }}</h5>
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-container>	430	</v-container>
431	</v-card-text>	431	</v-card-text>
432	</v-card>	432	</v-card>
433	</v-dialog>	433	</v-dialog>
434	<v-snackbar	434	<v-snackbar
435	:timeout="timeout"	435	:timeout="timeout"
436	:top="y === 'top'"	436	:top="y === 'top'"
437	:right="x === 'right'"	437	:right="x === 'right'"
438	:vertical="mode === 'vertical'"	438	:vertical="mode === 'vertical'"
439	v-model="snackbar"	439	v-model="snackbar"
440	color="success"	440	color="success"
441	>{{ text }}</v-snackbar>	441	>{{ text }}</v-snackbar>
442		442
443	<!-- **** EXISTING-Teachers TABLE DATA**** -->	443	<!-- **** EXISTING-Teachers TABLE DATA**** -->
444		444
445	<v-data-table	445	<v-data-table
446	:headers="headers"	446	:headers="headers"
447	:items="desserts"	447	:items="desserts"
448	:pagination.sync="pagination"	448	:pagination.sync="pagination"
449	:search="search"	449	:search="search"
450	>	450	>
451	<template slot="items" slot-scope="props">	451	<template slot="items" slot-scope="props">
452	<td id="td" class="text-xs-center">{{ props.index}}</td>	452	<td id="td" class="text-xs-center">{{ props.index}}</td>
453	<td id="td" class="text-xs-center">	453	<td id="td" class="text-xs-center">
454	<v-avatar>	454	<v-avatar>
455	<img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />	455	<img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
456	<img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />	456	<img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
457	</v-avatar>	457	</v-avatar>
458	</td>	458	</td>
459	<td id="td" class="text-xs-center">{{ props.item.name}}</td>	459	<td id="td" class="text-xs-center">{{ props.item.name}}</td>
460	<td id="td" class="text-xs-center">{{ props.item.email }}</td>	460	<td id="td" class="text-xs-center">{{ props.item.email }}</td>
461	<td id="td" class="text-xs-center">{{ dates(props.item.dob) }}</td>	461	<td id="td" class="text-xs-center">{{ dates(props.item.dob) }}</td>
462	<td id="td" class="text-xs-center">{{ dates(props.item.joinDate)}}</td>	462	<td id="td" class="text-xs-center">{{ dates(props.item.joinDate)}}</td>
463	<td id="td" class="text-xs-center">{{ props.item.mobileNo }}</td>	463	<td id="td" class="text-xs-center">{{ props.item.mobileNo }}</td>
464	<td class="text-xs-center">	464	<td class="text-xs-center">
465	<span>	465	<span>
466	<img	466	<img
467	style="cursor:pointer; width:25px; height:18px; "	467	style="cursor:pointer; width:25px; height:18px; "
468	class="mr-5"	468	class="mr-5"
469	@click="profile(props.item)"	469	@click="profile(props.item)"
470	src="/static/icon/eye1.png"	470	src="/static/icon/eye1.png"
471	/>	471	/>
472	<img	472	<img
473	style="cursor:pointer; width:20px; height:18px; "	473	style="cursor:pointer; width:20px; height:18px; "
474	class="mr-5"	474	class="mr-5"
475	@click="editItem(props.item)"	475	@click="editItem(props.item)"
476	src="/static/icon/edit1.png"	476	src="/static/icon/edit1.png"
477	/>	477	/>
478	<img	478	<img
479	style="cursor:pointer;width:20px; height:20px; "	479	style="cursor:pointer;width:20px; height:20px; "
480	class="mr-5"	480	class="mr-5"
481	@click="deleteItem(props.item)"	481	@click="deleteItem(props.item)"
482	src="/static/icon/delete1.png"	482	src="/static/icon/delete1.png"
483	/>	483	/>
484	</span>	484	</span>
485	</td>	485	</td>
486	</template>	486	</template>
487	<v-alert	487	<v-alert
488	slot="no-results"	488	slot="no-results"
489	:value="true"	489	:value="true"
490	color="error"	490	color="error"
491	icon="warning"	491	icon="warning"
492	>Your search for "{{ search }}" found no results.</v-alert>	492	>Your search for "{{ search }}" found no results.</v-alert>
493	</v-data-table>	493	</v-data-table>
494	</v-tab-item>	494	</v-tab-item>
495		495
496	<!-- **** Add Teachers Data**** -->	496	<!-- **** Add Teachers Data**** -->
497	<v-tab-item>	497	<v-tab-item>
498	<v-container>	498	<v-container>
499	<v-snackbar	499	<v-snackbar
500	:timeout="timeout"	500	:timeout="timeout"
501	:top="y === 'top'"	501	:top="y === 'top'"
502	:right="x === 'right'"	502	:right="x === 'right'"
503	:vertical="mode === 'vertical'"	503	:vertical="mode === 'vertical'"
504	v-model="snackbar"	504	v-model="snackbar"
505	color="success"	505	color="success"
506	>{{ text }}</v-snackbar>	506	>{{ text }}</v-snackbar>
507	<v-flex xs12 sm12 class="my-4">	507	<v-flex xs12 sm12 class="my-4">
508	<v-card flat>	508	<v-card flat>
509	<v-form ref="form" v-model="valid" lazy-validation>	509	<v-form ref="form" v-model="valid" lazy-validation>
510	<v-container fluid>	510	<v-container fluid>
511	<v-layout>	511	<v-layout>
512	<v-flex	512	<v-flex
513	xs12	513	xs12
514	class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"	514	class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
515	>	515	>
516	<v-avatar size="100px">	516	<v-avatar size="100px">
517	<img src="/static/icon/user.png" v-if="!imageUrl" />	517	<img src="/static/icon/user.png" v-if="!imageUrl" />
518	</v-avatar>	518	</v-avatar>
519	<img	519	<img
520	:src="imageUrl"	520	:src="imageUrl"
521	height="150"	521	height="150"
522	v-if="imageUrl"	522	v-if="imageUrl"
523	style="border-radius:50%; width:200px"	523	style="border-radius:50%; width:200px"
524	/>	524	/>
525	</v-flex>	525	</v-flex>
526	</v-layout>	526	</v-layout>
527	<v-layout>	527	<v-layout>
528	<v-flex xs12 sm6>	528	<v-flex xs12 sm6>
529	<v-layout>	529	<v-layout>
530	<v-flex xs4 class="pt-4 subheading">	530	<v-flex xs4 class="pt-4 subheading">
531	<label class="right">Full Name:</label>	531	<label class="right">Full Name:</label>
532	</v-flex>	532	</v-flex>
533	<v-flex xs8 class="ml-3">	533	<v-flex xs8 class="ml-3">
534	<v-text-field	534	<v-text-field
535	v-model="addTeachers.name"	535	v-model="addTeachers.name"
536	placeholder="fill your full Name"	536	placeholder="fill your full Name"
537	name="name"	537	name="name"
538	type="text"	538	type="text"
539	:rules="nameRules"	539	:rules="nameRules"
540	required	540	required
541	></v-text-field>	541	></v-text-field>
542	</v-flex>	542	</v-flex>
543	</v-layout>	543	</v-layout>
544	</v-flex>	544	</v-flex>
545	<v-flex xs12 sm6>	545	<v-flex xs12 sm6>
546	<v-layout>	546	<v-layout>
547	<v-flex xs4 class="pt-4 subheading">	547	<v-flex xs4 class="pt-4 subheading">
548	<label class="right">Email ID:</label>	548	<label class="right">Email ID:</label>
549	</v-flex>	549	</v-flex>
550	<v-flex xs8 class="ml-3">	550	<v-flex xs8 class="ml-3">
551	<v-text-field	551	<v-text-field
552	placeholder="fill your email"	552	placeholder="fill your email"
553	:rules="emailRules"	553	:rules="emailRules"
554	v-model="addTeachers.email"	554	v-model="addTeachers.email"
555	type="text"	555	type="text"
556	name="email"	556	name="email"
557	required	557	required
558	></v-text-field>	558	></v-text-field>
559	</v-flex>	559	</v-flex>
560	</v-layout>	560	</v-layout>
561	</v-flex>	561	</v-flex>
562	</v-layout>	562	</v-layout>
563	<v-layout>	563	<v-layout>
564	<v-flex xs12 sm6>	564	<v-flex xs12 sm6>
565	<v-layout>	565	<v-layout>
566	<v-flex xs4 class="pt-4 subheading">	566	<v-flex xs4 class="pt-4 subheading">
567	<label class="right">Date of Birth:</label>	567	<label class="right">Date of Birth:</label>
568	</v-flex>	568	</v-flex>
569	<v-flex xs8 class="ml-3">	569	<v-flex xs8 class="ml-3">
570	<v-menu	570	<v-menu
571	ref="menu"	571	ref="menu"
572	:close-on-content-click="false"	572	:close-on-content-click="false"
573	v-model="menu"	573	v-model="menu"
574	:nudge-right="40"	574	:nudge-right="40"
575	lazy	575	lazy
576	transition="scale-transition"	576	transition="scale-transition"
577	offset-y	577	offset-y
578	full-width	578	full-width
579	min-width="290px"	579	min-width="290px"
580	>	580	>
581	<v-text-field	581	<v-text-field
582	slot="activator"	582	slot="activator"
583	:rules="dateRules"	583	:rules="dateRules"
584	v-model="addTeachers.date"	584	v-model="addTeachers.date"
585	placeholder="Select date"	585	placeholder="Select date"
586	></v-text-field>	586	></v-text-field>
587	<v-date-picker	587	<v-date-picker
588	ref="picker"	588	ref="picker"
589	v-model="addTeachers.date"	589	v-model="addTeachers.date"
590	:max="new Date().toISOString().substr(0, 10)"	590	:max="new Date().toISOString().substr(0, 10)"
591	min="1950-01-01"	591	min="1950-01-01"
592	@input="menu = false"	592	@input="menu = false"
593	></v-date-picker>	593	></v-date-picker>
594	</v-menu>	594	</v-menu>
595	</v-flex>	595	</v-flex>
596	</v-layout>	596	</v-layout>
597	</v-flex>	597	</v-flex>
598	<v-flex xs12 sm6>	598	<v-flex xs12 sm6>
599	<v-layout>	599	<v-layout>
600	<v-flex xs4 class="pt-4 subheading">	600	<v-flex xs4 class="pt-4 subheading">
601	<label class="right">City:</label>	601	<label class="right">City:</label>
602	</v-flex>	602	</v-flex>
603	<v-flex xs8 class="ml-3">	603	<v-flex xs8 class="ml-3">
604	<v-text-field	604	<v-text-field
605	v-model="addTeachers.city"	605	v-model="addTeachers.city"
606	placeholder="fill your City Name"	606	placeholder="fill your City Name"
607	name="City"	607	name="City"
608	type="text"	608	type="text"
609	:rules="cityRules"	609	:rules="cityRules"
610	required	610	required
611	></v-text-field>	611	></v-text-field>
612	</v-flex>	612	</v-flex>
613	</v-layout>	613	</v-layout>
614	</v-flex>	614	</v-flex>
615	</v-layout>	615	</v-layout>
616	<v-layout>	616	<v-layout>
617	<v-flex xs12 sm6>	617	<v-flex xs12 sm6>
618	<v-layout>	618	<v-layout>
619	<v-flex xs4 class="pt-4 subheading">	619	<v-flex xs4 class="pt-4 subheading">
620	<label class="right">State:</label>	620	<label class="right">State:</label>
621	</v-flex>	621	</v-flex>
622	<v-flex xs8 class="ml-3">	622	<v-flex xs8 class="ml-3">
623	<v-text-field	623	<v-text-field
624	v-model="addTeachers.state"	624	v-model="addTeachers.state"
625	placeholder="fill your State Name"	625	placeholder="fill your State Name"
626	name="state"	626	name="state"
627	type="text"	627	type="text"
628	:rules="stateRules"	628	:rules="stateRules"
629	required	629	required
630	></v-text-field>	630	></v-text-field>
631	</v-flex>	631	</v-flex>
632	</v-layout>	632	</v-layout>
633	</v-flex>	633	</v-flex>
634	<v-flex xs12 sm6>	634	<v-flex xs12 sm6>
635	<v-layout>	635	<v-layout>
636	<v-flex xs4 class="pt-4 subheading">	636	<v-flex xs4 class="pt-4 subheading">
637	<label class="right">PinCode:</label>	637	<label class="right">PinCode:</label>
638	</v-flex>	638	</v-flex>
639	<v-flex xs8 class="ml-3">	639	<v-flex xs8 class="ml-3">
640	<v-text-field	640	<v-text-field
641	v-model="addTeachers.pincode"	641	v-model="addTeachers.pincode"
642	placeholder="fill your pincode"	642	placeholder="fill your pincode"
643	name="pincode"	643	name="pincode"
644	type="number"	644	type="number"
645	:rules="pincode"	645	:rules="pincode"
646	required	646	required
647	></v-text-field>	647	></v-text-field>
648	</v-flex>	648	</v-flex>
649	</v-layout>	649	</v-layout>
650	</v-flex>	650	</v-flex>
651	</v-layout>	651	</v-layout>
652	<v-layout>	652	<v-layout>
653	<v-flex xs12 sm6>	653	<v-flex xs12 sm6>
654	<v-layout>	654	<v-layout>
655	<v-flex xs4 class="pt-4 subheading">	655	<v-flex xs4 class="pt-4 subheading">
656	<label class="right">Mobile NO:</label>	656	<label class="right">Mobile NO:</label>
657	</v-flex>	657	</v-flex>
658	<v-flex xs8 class="ml-3">	658	<v-flex xs8 class="ml-3">
659	<v-text-field	659	<v-text-field
660	v-model="addTeachers.mobileNo"	660	v-model="addTeachers.mobileNo"
661	placeholder="fill your MobileNo"	661	placeholder="fill your MobileNo"
662	name="mobileNo"	662	name="mobileNo"
663	type="number"	663	type="number"
664	:rules="mobileNoRules"	664	:rules="mobileNoRules"
665	required	665	required
666	></v-text-field>	666	></v-text-field>
667	</v-flex>	667	</v-flex>
668	</v-layout>	668	</v-layout>
669	</v-flex>	669	</v-flex>
670	<v-flex xs12 sm6>	670	<v-flex xs12 sm6>
671	<v-layout>	671	<v-layout>
672	<v-flex xs4 class="pt-4 subheading">	672	<v-flex xs4 class="pt-4 subheading">
673	<label class="right">Select Country:</label>	673	<label class="right">Select Country:</label>
674	</v-flex>	674	</v-flex>
675	<v-flex xs8 class="ml-3">	675	<v-flex xs8 class="ml-3">
676	<v-autocomplete	676	<v-autocomplete
677	v-model="addTeachers.country"	677	v-model="addTeachers.country"
678	:rules="country"	678	:rules="country"
679	:items="countries"	679	:items="countries"
680	placeholder="Select Country Name"	680	placeholder="Select Country Name"
681	required	681	required
682	></v-autocomplete>	682	></v-autocomplete>
683	</v-flex>	683	</v-flex>
684	</v-layout>	684	</v-layout>
685	</v-flex>	685	</v-flex>
686	</v-layout>	686	</v-layout>
687	<v-layout>	687	<v-layout>
688	<v-flex xs12 sm6>	688	<v-flex xs12 sm6>
689	<v-layout>	689	<v-layout>
690	<v-flex xs4 class="pt-4 subheading">	690	<v-flex xs4 class="pt-4 subheading">
691	<label class="right">Join Date</label>	691	<label class="right">Join Date</label>
692	</v-flex>	692	</v-flex>
693	<v-flex xs8 class="ml-3">	693	<v-flex xs8 class="ml-3">
694	<v-menu	694	<v-menu
695	ref="menu1"	695	ref="menu1"
696	:close-on-content-click="false"	696	:close-on-content-click="false"
697	v-model="menu1"	697	v-model="menu1"
698	:nudge-right="40"	698	:nudge-right="40"
699	lazy	699	lazy
700	transition="scale-transition"	700	transition="scale-transition"
701	offset-y	701	offset-y
702	full-width	702	full-width
703	min-width="290px"	703	min-width="290px"
704	>	704	>
705	<v-text-field	705	<v-text-field
706	slot="activator"	706	slot="activator"
707	:rules="joinDateRules"	707	:rules="joinDateRules"
708	v-model="addTeachers.joinDate"	708	v-model="addTeachers.joinDate"
709	placeholder="Select date"	709	placeholder="Select date"
710	></v-text-field>	710	></v-text-field>
711	<v-date-picker	711	<v-date-picker
712	ref="picker"	712	ref="picker"
713	v-model="addTeachers.joinDate"	713	v-model="addTeachers.joinDate"
714	:max="new Date().toISOString().substr(0, 10)"	714	:max="new Date().toISOString().substr(0, 10)"
715	min="1950-01-01"	715	min="1950-01-01"
716	@input="menu1 = false"	716	@input="menu1 = false"
717	></v-date-picker>	717	></v-date-picker>
718	</v-menu>	718	</v-menu>
719	</v-flex>	719	</v-flex>
720	</v-layout>	720	</v-layout>
721	</v-flex>	721	</v-flex>
722	<v-flex xs12 sm6>	722	<v-flex xs12 sm6>
723	<v-layout>	723	<v-layout>
724	<v-flex xs4 class="pt-4 subheading">	724	<v-flex xs4 class="pt-4 subheading">
725	<label class="right">Uplaod Image:</label>	725	<label class="right">Uplaod Image:</label>
726	</v-flex>	726	</v-flex>
727	<v-flex xs8 class="ml-3">	727	<v-flex xs8 class="ml-3">
728	<v-text-field	728	<v-text-field
729	label="Select Image"	729	label="Select Image"
730	@click="pickFile"	730	@click="pickFile"
731	v-model="imageName"	731	v-model="imageName"
732	append-icon="attach_file"	732	append-icon="attach_file"
733	></v-text-field>	733	></v-text-field>
734	<input	734	<input
735	type="file"	735	type="file"
736	style="display:none"	736	style="display:none"
737	ref="image"	737	ref="image"
738	accept="image/*"	738	accept="image/*"
739	@change="onFilePicked"	739	@change="onFilePicked"
740	/>	740	/>
741	</v-flex>	741	</v-flex>
742	</v-layout>	742	</v-layout>
743	</v-flex>	743	</v-flex>
744	</v-layout>	744	</v-layout>
745	<v-layout>	745	<v-layout>
746	<v-flex xs12 sm12>	746	<v-flex xs12 sm12>
747	<v-layout>	747	<v-layout>
748	<v-flex xs3 class="pt-4 subheading pl-4" style="max-width: 17%;">	748	<v-flex xs3 class="pt-4 subheading pl-4" style="max-width: 17%;">
749	<label class>Present Address:</label>	749	<label class>Present Address:</label>
750	</v-flex>	750	</v-flex>
751	<v-flex xs12 class="presentInput">	751	<v-flex xs12 class="presentInput">
752	<v-text-field	752	<v-text-field
753	name="input-4-3"	753	name="input-4-3"
754	v-model="addTeachers.presentAddress"	754	v-model="addTeachers.presentAddress"
755	:rules="presentAddress"	755	:rules="presentAddress"
756	placeholder="fill Your present Address"	756	placeholder="fill Your present Address"
757	required	757	required
758	></v-text-field>	758	></v-text-field>
759	</v-flex>	759	</v-flex>
760	</v-layout>	760	</v-layout>
761	</v-flex>	761	</v-flex>
762	<v-flex xs12 sm12>	762	<v-flex xs12 sm12>
763	<v-layout>	763	<v-layout>
764	<v-flex xs3 class="pt-4 subheading" style="max-width: 17%;">	764	<v-flex xs3 class="pt-4 subheading" style="max-width: 17%;">
765	<label>Permanent Address:</label>	765	<label>Permanent Address:</label>
766	</v-flex>	766	</v-flex>
767	<v-flex xs12 class="presentInput">	767	<v-flex xs12 class="presentInput">
768	<v-text-field	768	<v-text-field
769	name="input-4-3"	769	name="input-4-3"
770	v-model="addTeachers.permanentAddress"	770	v-model="addTeachers.permanentAddress"
771	:rules="permanentAddress"	771	:rules="permanentAddress"
772	placeholder="fill Your Permanent Address"	772	placeholder="fill Your Permanent Address"
773	required	773	required
774	></v-text-field>	774	></v-text-field>
775	</v-flex>	775	</v-flex>
776	</v-layout>	776	</v-layout>
777	</v-flex>	777	</v-flex>
778	</v-layout>	778	</v-layout>
779	<v-layout>	779	<v-layout>
780	<v-flex xs12 sm12>	780	<v-flex xs12 sm12>
781	<v-card-actions>	781	<v-card-actions>
782	<v-btn @click="clear" round dark>clear</v-btn>	782	<v-btn @click="clear" round dark>clear</v-btn>
783	<v-spacer></v-spacer>	783	<v-spacer></v-spacer>
784	<v-btn @click="submit" round dark :loading="loading">Add</v-btn>	784	<v-btn @click="submit" round dark :loading="loading">Add</v-btn>
785	</v-card-actions>	785	</v-card-actions>
786	</v-flex>	786	</v-flex>
787	</v-layout>	787	</v-layout>
788	</v-container>	788	</v-container>
789	</v-form>	789	</v-form>
790	</v-card>	790	</v-card>
791	</v-flex>	791	</v-flex>
792	</v-container>	792	</v-container>
793	</v-tab-item>	793	</v-tab-item>
794	</v-tabs>	794	</v-tabs>
795	<div class="loader" v-if="showLoader">	795	<div class="loader" v-if="showLoader">
796	<v-progress-circular indeterminate color="white"></v-progress-circular>	796	<v-progress-circular indeterminate color="white"></v-progress-circular>
797	</div>	797	</div>
798	</v-app>	798	</v-app>
799	</template>	799	</template>
800		800
801	<script>	801	<script>
802	import http from "@/Services/http.js";	802	import http from "@/Services/http.js";
803	import Util from "@/util";	803	import Util from "@/util";
804	import moment from "moment";	804	import moment from "moment";
805		805
806	export default {	806	export default {
807	data: () => ({	807	data: () => ({
808	component: "report-generate",	808	component: "report-generate",
809	snackbar: false,	809	snackbar: false,
810	y: "top",	810	y: "top",
811	x: "right",	811	x: "right",
812	mode: "",	812	mode: "",
813	timeout: 3000,	813	timeout: 3000,
814	text: "",	814	text: "",
815	showLoader: false,	815	showLoader: false,
816	loading: false,	816	loading: false,
817	date: null,	817	date: null,
818	search: "",	818	search: "",
819	menu: false,	819	menu: false,
820	menu1: false,	820	menu1: false,
821	menu2: false,	821	menu2: false,
822	menu3: false,	822	menu3: false,
823	dialog: false,	823	dialog: false,
824	dialog1: false,	824	dialog1: false,
825	valid: true,	825	valid: true,
826	isActive: true,	826	isActive: true,
827	newActive: false,	827	newActive: false,
828	pagination: {	828	pagination: {
829	rowsPerPage: 15	829	rowsPerPage: 15
830	},	830	},
831	imageData: {},	831	imageData: {},
832	imageName: "",	832	imageName: "",
833	imageUrl: "",	833	imageUrl: "",
834	imageFile: "",	834	imageFile: "",
835	nameRules: [v => !!v \|\| " Full Name is required"],	835	nameRules: [v => !!v \|\| " Full Name is required"],
836	dateRules: [v => !!v \|\| " DOB is required"],	836	dateRules: [v => !!v \|\| " DOB is required"],
837	cityRules: [v => !!v \|\| " City Name is required"],	837	cityRules: [v => !!v \|\| " City Name is required"],
838	pincode: [v => !!v \|\| " Pincode is required"],	838	pincode: [v => !!v \|\| " Pincode is required"],
839	country: [v => !!v \|\| " Country Name is required"],	839	country: [v => !!v \|\| " Country Name is required"],
840	permanentAddress: [v => !!v \|\| " Permanent Address is required"],	840	permanentAddress: [v => !!v \|\| " Permanent Address is required"],
841	presentAddress: [v => !!v \|\| " Present Address is required"],	841	presentAddress: [v => !!v \|\| " Present Address is required"],
842	mobileNoRules: [v => !!v \|\| "Mobile Number is required"],	842	mobileNoRules: [v => !!v \|\| "Mobile Number is required"],
843	stateRules: [v => !!v \|\| "State Name is required"],	843	stateRules: [v => !!v \|\| "State Name is required"],
844	joinDateRules: [v => !!v \|\| " Join Date is required"],	844	joinDateRules: [v => !!v \|\| " Join Date is required"],
845	errorMessages: "",	845	errorMessages: "",
846	emailRules: [	846	emailRules: [
847	v => !!v \|\| "E-mail is required",	847	v => !!v \|\| "E-mail is required",
848	v =>	848	v =>
849	/^\w+([.-]?\w+)@\w+([.-]?\w+)(\.\w{2,3})+$/.test(v) \|\|	849	/^\w+([.-]?\w+)@\w+([.-]?\w+)(\.\w{2,3})+$/.test(v) \|\|
850	"E-mail must be valid"	850	"E-mail must be valid"
851	],	851	],
852	countries: [	852	countries: [
853	"Afghanistan",	853	"Afghanistan",
854	"Albania",	854	"Albania",
855	"Algeria",	855	"Algeria",
856	"Andorra",	856	"Andorra",
857	"Angola",	857	"Angola",
858	"Anguilla",	858	"Anguilla",
859	"Antigua & Barbuda",	859	"Antigua & Barbuda",
860	"Argentina",	860	"Argentina",
861	"Armenia",	861	"Armenia",
862	"Aruba",	862	"Aruba",
863	"Australia",	863	"Australia",
864	"Austria",	864	"Austria",
865	"Azerbaijan",	865	"Azerbaijan",
866	"Bahamas",	866	"Bahamas",
867	"Bahrain",	867	"Bahrain",
868	"Bangladesh",	868	"Bangladesh",
869	"Barbados",	869	"Barbados",
870	"Belarus",	870	"Belarus",
871	"Belgium",	871	"Belgium",
872	"Belize",	872	"Belize",
873	"Benin",	873	"Benin",
874	"Bermuda",	874	"Bermuda",
875	"Bhutan",	875	"Bhutan",
876	"Bolivia",	876	"Bolivia",
877	"Bosnia & Herzegovina",	877	"Bosnia & Herzegovina",
878	"Botswana",	878	"Botswana",
879	"Brazil",	879	"Brazil",
880	"British Virgin Islands",	880	"British Virgin Islands",
881	"Brunei",	881	"Brunei",
882	"Bulgaria",	882	"Bulgaria",
883	"Burkina Faso",	883	"Burkina Faso",
884	"Burundi",	884	"Burundi",
885	"Cambodia",	885	"Cambodia",
886	"Cameroon",	886	"Cameroon",
887	"Cape Verde",	887	"Cape Verde",
888	"Cayman Islands",	888	"Cayman Islands",
889	"Chad",	889	"Chad",
890	"Chile",	890	"Chile",
891	"China",	891	"China",
892	"Colombia",	892	"Colombia",
893	"Congo",	893	"Congo",
894	"Cook Islands",	894	"Cook Islands",
895	"Costa Rica",	895	"Costa Rica",
896	"Cote D Ivoire",	896	"Cote D Ivoire",
897	"Croatia",	897	"Croatia",
898	"Cruise Ship",	898	"Cruise Ship",
899	"Cuba",	899	"Cuba",
900	"Cyprus",	900	"Cyprus",
901	"Czech Republic",	901	"Czech Republic",
902	"Denmark",	902	"Denmark",
903	"Djibouti",	903	"Djibouti",
904	"Dominica",	904	"Dominica",
905	"Dominican Republic",	905	"Dominican Republic",
906	"Ecuador",	906	"Ecuador",
907	"Egypt",	907	"Egypt",
908	"El Salvador",	908	"El Salvador",
909	"Equatorial Guinea",	909	"Equatorial Guinea",
910	"Estonia",	910	"Estonia",
911	"Ethiopia",	911	"Ethiopia",
912	"Falkland Islands",	912	"Falkland Islands",
913	"Faroe Islands",	913	"Faroe Islands",
914	"Fiji",	914	"Fiji",
915	"Finland",	915	"Finland",
916	"France",	916	"France",
917	"French Polynesia",	917	"French Polynesia",
918	"French West Indies",	918	"French West Indies",
919	"Gabon",	919	"Gabon",
920	"Gambia",	920	"Gambia",
921	"Georgia",	921	"Georgia",
922	"Germany",	922	"Germany",
923	"Ghana",	923	"Ghana",
924	"Gibraltar",	924	"Gibraltar",
925	"Greece",	925	"Greece",
926	"Greenland",	926	"Greenland",
927	"Grenada",	927	"Grenada",
928	"Guam",	928	"Guam",
929	"Guatemala",	929	"Guatemala",
930	"Guernsey",	930	"Guernsey",
931	"Guinea",	931	"Guinea",
932	"Guinea Bissau",	932	"Guinea Bissau",
933	"Guyana",	933	"Guyana",
934	"Haiti",	934	"Haiti",
935	"Honduras",	935	"Honduras",
936	"Hong Kong",	936	"Hong Kong",
937	"Hungary",	937	"Hungary",
938	"Iceland",	938	"Iceland",
939	"India",	939	"India",
940	"Indonesia",	940	"Indonesia",
941	"Iran",	941	"Iran",
942	"Iraq",	942	"Iraq",
943	"Ireland",	943	"Ireland",
944	"Isle of Man",	944	"Isle of Man",
945	"Israel",	945	"Israel",
946	"Italy",	946	"Italy",
947	"Jamaica",	947	"Jamaica",
948	"Japan",	948	"Japan",
949	"Jersey",	949	"Jersey",
950	"Jordan",	950	"Jordan",
951	"Kazakhstan",	951	"Kazakhstan",
952	"Kenya",	952	"Kenya",
953	"Kuwait",	953	"Kuwait",
954	"Kyrgyz Republic",	954	"Kyrgyz Republic",
955	"Laos",	955	"Laos",
956	"Latvia",	956	"Latvia",
957	"Lebanon",	957	"Lebanon",
958	"Lesotho",	958	"Lesotho",
959	"Liberia",	959	"Liberia",
960	"Libya",	960	"Libya",
961	"Liechtenstein",	961	"Liechtenstein",
962	"Lithuania",	962	"Lithuania",
963	"Luxembourg",	963	"Luxembourg",
964	"Macau",	964	"Macau",
965	"Macedonia",	965	"Macedonia",
966	"Madagascar",	966	"Madagascar",
967	"Malawi",	967	"Malawi",
968	"Malaysia",	968	"Malaysia",
969	"Maldives",	969	"Maldives",
970	"Mali",	970	"Mali",
971	"Malta",	971	"Malta",
972	"Mauritania",	972	"Mauritania",
973	"Mauritius",	973	"Mauritius",
974	"Mexico",	974	"Mexico",
975	"Moldova",	975	"Moldova",
976	"Monaco",	976	"Monaco",
977	"Mongolia",	977	"Mongolia",
978	"Montenegro",	978	"Montenegro",
979	"Montserrat",	979	"Montserrat",
980	"Morocco",	980	"Morocco",
981	"Mozambique",	981	"Mozambique",
982	"Namibia",	982	"Namibia",
983	"Nepal",	983	"Nepal",
984	"Netherlands",	984	"Netherlands",
985	"Netherlands Antilles",	985	"Netherlands Antilles",
986	"New Caledonia",	986	"New Caledonia",
987	"New Zealand",	987	"New Zealand",
988	"Nicaragua",	988	"Nicaragua",
989	"Niger",	989	"Niger",
990	"Nigeria",	990	"Nigeria",
991	"Norway",	991	"Norway",
992	"Oman",	992	"Oman",
993	"Pakistan",	993	"Pakistan",
994	"Palestine",	994	"Palestine",
995	"Panama",	995	"Panama",
996	"Papua New Guinea",	996	"Papua New Guinea",
997	"Paraguay",	997	"Paraguay",
998	"Peru",	998	"Peru",
999	"Philippines",	999	"Philippines",
1000	"Poland",	1000	"Poland",
1001	"Portugal",	1001	"Portugal",
1002	"Puerto Rico",	1002	"Puerto Rico",
1003	"Qatar",	1003	"Qatar",
1004	"Reunion",	1004	"Reunion",
1005	"Romania",	1005	"Romania",
1006	"Russia",	1006	"Russia",
1007	"Rwanda",	1007	"Rwanda",
1008	"Saint Pierre & Miquelon",	1008	"Saint Pierre & Miquelon",
1009	"Samoa",	1009	"Samoa",
1010	"San Marino",	1010	"San Marino",
1011	"Satellite",	1011	"Satellite",
1012	"Saudi Arabia",	1012	"Saudi Arabia",
1013	"Senegal",	1013	"Senegal",
1014	"Serbia",	1014	"Serbia",
1015	"Seychelles",	1015	"Seychelles",
1016	"Sierra Leone",	1016	"Sierra Leone",
1017	"Singapore",	1017	"Singapore",
1018	"Slovakia",	1018	"Slovakia",
1019	"Slovenia",	1019	"Slovenia",
1020	"South Africa",	1020	"South Africa",
1021	"South Korea",	1021	"South Korea",
1022	"Spain",	1022	"Spain",
1023	"Sri Lanka",	1023	"Sri Lanka",
1024	"St Kitts & Nevis",	1024	"St Kitts & Nevis",
1025	"St Lucia",	1025	"St Lucia",
1026	"St Vincent",	1026	"St Vincent",
1027	"St. Lucia",	1027	"St. Lucia",
1028	"Sudan",	1028	"Sudan",
1029	"Suriname",	1029	"Suriname",
1030	"Swaziland",	1030	"Swaziland",
1031	"Sweden",	1031	"Sweden",
1032	"Switzerland",	1032	"Switzerland",
1033	"Syria",	1033	"Syria",
1034	"Taiwan",	1034	"Taiwan",
1035	"Tajikistan",	1035	"Tajikistan",
1036	"Tanzania",	1036	"Tanzania",
1037	"Thailand",	1037	"Thailand",
1038	"Timor L'Este",	1038	"Timor L'Este",
1039	"Togo",	1039	"Togo",
1040	"Tonga",	1040	"Tonga",
1041	"Trinidad & Tobago",	1041	"Trinidad & Tobago",
1042	"Tunisia",	1042	"Tunisia",
1043	"Turkey",	1043	"Turkey",
1044	"Turkmenistan",	1044	"Turkmenistan",
1045	"Turks & Caicos",	1045	"Turks & Caicos",
1046	"Uganda",	1046	"Uganda",
1047	"Ukraine",	1047	"Ukraine",
1048	"United Arab Emirates",	1048	"United Arab Emirates",
1049	"United Kingdom",	1049	"United Kingdom",
1050	"United States",	1050	"United States",
1051	"Uruguay",	1051	"Uruguay",
1052	"Uzbekistan",	1052	"Uzbekistan",
1053	"Venezuela",	1053	"Venezuela",
1054	"Vietnam",	1054	"Vietnam",
1055	"Virgin Islands (US)",	1055	"Virgin Islands (US)",
1056	"Yemen",	1056	"Yemen",
1057	"Zambia",	1057	"Zambia",
1058	"Zimbabwe"	1058	"Zimbabwe"
1059	],	1059	],
1060	headers: [	1060	headers: [
1061	{	1061	{
1062	text: "No",	1062	text: "No",
1063	align: "center",	1063	align: "center",
1064	sortable: false,	1064	sortable: false,
1065	value: "No"	1065	value: "No"
1066	},	1066	},
1067	{	1067	{
1068	text: "Profile Pic",	1068	text: "Profile Pic",
1069	value: "profilePicUrl",	1069	value: "profilePicUrl",
1070	sortable: false,	1070	sortable: false,
1071	align: "center"	1071	align: "center"
1072	},	1072	},
1073	{ text: "Name", value: "name", sortable: false, align: "center" },	1073	{ text: "Name", value: "name", sortable: false, align: "center" },
1074	{ text: "Email", value: "email", sortable: false, align: "center" },	1074	{ text: "Email", value: "email", sortable: false, align: "center" },
1075	{ text: "DOB", value: "dob", sortable: false, align: "center" },	1075	{ text: "DOB", value: "dob", sortable: false, align: "center" },
1076	{	1076	{
1077	text: "Join Date",	1077	text: "Join Date",
1078	value: "joinDate",	1078	value: "joinDate",
1079	sortable: false,	1079	sortable: false,
1080	align: "center"	1080	align: "center"
1081	},	1081	},
1082	{	1082	{
1083	text: "Mobile No",	1083	text: "Mobile No",
1084	value: "mobileNo",	1084	value: "mobileNo",
1085	sortable: false,	1085	sortable: false,
1086	align: "center"	1086	align: "center"
1087	},	1087	},
1088	{ text: "Action", value: "", sortable: false, align: "center" }	1088	{ text: "Action", value: "", sortable: false, align: "center" }
1089	],	1089	],
1090	desserts: [],	1090	desserts: [],
1091	editedIndex: -1,	1091	editedIndex: -1,
1092	upload: "",	1092	upload: "",
1093	editedItem: {	1093	editedItem: {
1094	role: "TEACHER",	1094	role: "TEACHER",
1095	name: "",	1095	name: "",
1096	email: "",	1096	email: "",
1097	date: null,	1097	date: null,
1098	city: "",	1098	city: "",
1099	pincode: "",	1099	pincode: "",
1100	country: "",	1100	country: "",
1101	permanentAddress: "",	1101	permanentAddress: "",
1102	presentAddress: "",	1102	presentAddress: "",
1103	mobileNo: "",	1103	mobileNo: "",
1104	state: "",	1104	state: "",
1105	joinDate: null	1105	joinDate: null
1106	},	1106	},
1107	addTeachers: {	1107	addTeachers: {
1108	role: "TEACHER",	1108	role: "TEACHER",
1109	name: "",	1109	name: "",
1110	email: "",	1110	email: "",
1111	date: null,	1111	date: null,
1112	city: "",	1112	city: "",
1113	pincode: "",	1113	pincode: "",
1114	country: "",	1114	country: "",
1115	permanentAddress: "",	1115	permanentAddress: "",
1116	presentAddress: "",	1116	presentAddress: "",
1117	mobileNo: "",	1117	mobileNo: "",
1118	state: "",	1118	state: "",
1119	joinDate: null	1119	joinDate: null
1120	},	1120	},
1121	defaultItem: {	1121	defaultItem: {
1122	role: "TEACHER",	1122	role: "TEACHER",
1123	name: "",	1123	name: "",
1124	email: ""	1124	email: ""
1125	},	1125	},
1126	}),	1126	}),
1127	watch: {	1127	watch: {
1128	menu(val) {	1128	menu(val) {
1129	val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));	1129	val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
1130	},	1130	},
1131	menu1(val) {	1131	menu1(val) {
1132	val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));	1132	val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
1133	}	1133	}
1134	},	1134	},
1135	methods: {	1135	methods: {
1136	save(date) {	1136	save(date) {
1137	this.$refs.menu.save(date);	1137	this.$refs.menu.save(date);
1138	},	1138	},
1139	save(date) {	1139	save(date) {
1140	this.$refs.menu1.save(date);	1140	this.$refs.menu1.save(date);
1141	},	1141	},
1142	pickFile() {	1142	pickFile() {
1143	this.$refs.image.click();	1143	this.$refs.image.click();
1144	},	1144	},
1145	onFilePicked(e) {	1145	onFilePicked(e) {
1146	// console.log(e)	1146	// console.log(e)
1147	const files = e.target.files;	1147	const files = e.target.files;
1148	this.upload = e.target.files[0];	1148	this.upload = e.target.files[0];
1149	console.log("imageData-upload========>", this.upload);	1149	console.log("imageData-upload========>", this.upload);
1150	if (files[0] !== undefined) {	1150	if (files[0] !== undefined) {
1151	this.imageName = files[0].name;	1151	this.imageName = files[0].name;
1152	if (this.imageName.lastIndexOf(".") <= 0) {	1152	if (this.imageName.lastIndexOf(".") <= 0) {
1153	return;	1153	return;
1154	}	1154	}
1155	const fr = new FileReader();	1155	const fr = new FileReader();
1156	fr.readAsDataURL(files[0]);	1156	fr.readAsDataURL(files[0]);
1157	fr.addEventListener("load", () => {	1157	fr.addEventListener("load", () => {
1158	this.imageUrl = fr.result;	1158	this.imageUrl = fr.result;
1159	this.imageFile = files[0]; // this is an image file that can be sent to server...	1159	this.imageFile = files[0]; // this is an image file that can be sent to server...
1160	// this.imageData.imageUrl = URL.createObjectURL(this.imageFile);	1160	// this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
1161	// console.log("upload=======>", this.imageData.imageUrl);	1161	// console.log("upload=======>", this.imageData.imageUrl);
1162	console.log("imageFile", this.imageUrl);	1162	console.log("imageFile", this.imageUrl);
1163	});	1163	});
1164	} else {	1164	} else {
1165	this.imageName = "";	1165	this.imageName = "";
1166	this.imageFile = "";	1166	this.imageFile = "";
1167	this.imageUrl = "";	1167	this.imageUrl = "";
1168	}	1168	}
1169	},	1169	},
1170	dates: function(date) {	1170	dates: function(date) {
1171	return moment(date).format("MMMM DD, YYYY");	1171	return moment(date).format("MMMM DD, YYYY");
1172	},	1172	},
1173	getTeacherList() {	1173	getTeacherList() {
1174	this.showLoader = true;	1174	this.showLoader = true;
1175	var token = this.$store.state.token;	1175	var token = this.$store.state.token;
1176	http()	1176	http()
1177	.get("/getTeachersList", {	1177	.get("/getTeachersList", {
1178	headers: { Authorization: "Bearer " + token }	1178	headers: { Authorization: "Bearer " + token }
1179	})	1179	})
1180	.then(response => {	1180	.then(response => {
1181	this.desserts = response.data.data;	1181	this.desserts = response.data.data;
1182	this.showLoader = false;	1182	this.showLoader = false;
1183	// console.log("getTeacherList=====>",this.desserts)	1183	// console.log("getTeacherList=====>",this.desserts)
1184	})	1184	})
1185	.catch(error => {	1185	.catch(error => {
1186	this.showLoader = false;	1186	this.showLoader = false;
1187	if (error.response.status === 401) {	1187	if (error.response.status === 401) {
1188	this.$router.replace({ path: "/" });	1188	this.$router.replace({ path: "/" });
1189	this.$store.dispatch("setToken", null);	1189	this.$store.dispatch("setToken", null);
1190	this.$store.dispatch("Id", null);	1190	this.$store.dispatch("Id", null);
1191	}	1191	}
1192	});	1192	});
1193	},	1193	},
1194	editItem(item) {	1194	editItem(item) {
1195	this.editedIndex = this.desserts.indexOf(item);	1195	this.editedIndex = this.desserts.indexOf(item);
1196	this.editedItem = Object.assign({}, item);	1196	this.editedItem = Object.assign({}, item);
1197	this.editedItem.dob =	1197	this.editedItem.dob =
1198	this.editedItem.dob != undefined	1198	this.editedItem.dob != undefined
1199	? (this.editedItem.dob = this.editedItem.dob.substring(0, 10))	1199	? (this.editedItem.dob = this.editedItem.dob.substring(0, 10))
1200	: (this.editedItem.dob = "");	1200	: (this.editedItem.dob = "");
1201	this.editedItem.joinDate =	1201	this.editedItem.joinDate =
1202	this.editedItem.joinDate != undefined	1202	this.editedItem.joinDate != undefined
1203	? (this.editedItem.joinDate = this.editedItem.joinDate.substring(	1203	? (this.editedItem.joinDate = this.editedItem.joinDate.substring(
1204	0,	1204	0,
1205	10	1205	10
1206	))	1206	))
1207	: (this.editedItem.joinDate = "");	1207	: (this.editedItem.joinDate = "");
1208		1208
1209	this.dialog = true;	1209	this.dialog = true;
1210	},	1210	},
1211	profile(item) {	1211	profile(item) {
1212	this.editedIndex = this.desserts.indexOf(item);	1212	this.editedIndex = this.desserts.indexOf(item);
1213	this.editedItem = Object.assign({}, item);	1213	this.editedItem = Object.assign({}, item);
1214	this.dialog1 = true;	1214	this.dialog1 = true;
1215	},	1215	},
1216	deleteItem(item) {	1216	deleteItem(item) {
1217	let deleteTeachers = {	1217	let deleteTeachers = {
1218	teacherId: item._id	1218	teacherId: item._id
1219	};	1219	};
1220	// console.log("deleteUers",deleteTeachers)	1220	// console.log("deleteUers",deleteTeachers)
1221	http()	1221	http()
1222	.delete(	1222	.delete(
1223	"/deleteTeacher",	1223	"/deleteTeacher",
1224	confirm("Are you sure you want to delete this?") && {	1224	confirm("Are you sure you want to delete this?") && {
1225	params: deleteTeachers	1225	params: deleteTeachers
1226	}	1226	}
1227	)	1227	)
1228	.then(response => {	1228	.then(response => {
1229	// console.log("deleteUers",deleteTeachers)	1229	// console.log("deleteUers",deleteTeachers)
1230	if ((this.snackbar = true)) {	1230	if ((this.snackbar = true)) {
1231	this.text = "Successfully delete Existing Teacher";	1231	this.text = "Successfully delete Existing Teacher";
1232	}	1232	}
1233	this.getTeacherList();	1233	this.getTeacherList();
1234	})	1234	})
1235	.catch(error => {	1235	.catch(error => {
1236	console.log(error);	1236	console.log(error);
1237	});	1237	});
1238	},	1238	},
1239	activeTab(type) {	1239	activeTab(type) {
1240	switch (type) {	1240	switch (type) {
1241	case "existing":	1241	case "existing":
1242	this.newActive = false;	1242	this.newActive = false;
1243	this.isActive = true;	1243	this.isActive = true;
1244	break;	1244	break;
1245		1245
1246	default:	1246	default:
1247	this.newActive = true;	1247	this.newActive = true;
1248	this.isActive = false;	1248	this.isActive = false;
1249	break;	1249	break;
1250	}	1250	}
1251	},	1251	},
1252	close() {	1252	close() {
1253	this.dialog = false;	1253	this.dialog = false;
1254	setTimeout(() => {	1254	setTimeout(() => {
1255	this.editedItem = Object.assign({}, this.defaultItem);	1255	this.editedItem = Object.assign({}, this.defaultItem);
1256	this.editedIndex = -1;	1256	this.editedIndex = -1;
1257	}, 300);	1257	}, 300);
1258	},	1258	},
1259	close1() {	1259	close1() {
1260	this.dialog1 = false;	1260	this.dialog1 = false;
1261	},	1261	},
1262	submit() {	1262	submit() {
1263	if (this.$refs.form.validate()) {	1263	if (this.$refs.form.validate()) {
1264	let addTeacher = {	1264	let addTeacher = {
1265	name: this.addTeachers.name,	1265	name: this.addTeachers.name,
1266	email: this.addTeachers.email,	1266	email: this.addTeachers.email,
1267	role: this.addTeachers.role,	1267	role: this.addTeachers.role,
1268	dob: this.addTeachers.date,	1268	dob: this.addTeachers.date,
1269	city: this.addTeachers.city,	1269	city: this.addTeachers.city,
1270	pincode: this.addTeachers.pincode,	1270	pincode: this.addTeachers.pincode,
1271	country: this.addTeachers.country,	1271	country: this.addTeachers.country,
1272	permanentAddress: this.addTeachers.permanentAddress,	1272	permanentAddress: this.addTeachers.permanentAddress,
1273	presentAddress: this.addTeachers.presentAddress,	1273	presentAddress: this.addTeachers.presentAddress,
1274	mobileNo: this.addTeachers.mobileNo,	1274	mobileNo: this.addTeachers.mobileNo,
1275	state: this.addTeachers.state,	1275	state: this.addTeachers.state,
1276	joinDate: this.addTeachers.joinDate	1276	joinDate: this.addTeachers.joinDate
1277	};	1277	};
1278	if (this.imageUrl) {	1278	if (this.imageUrl) {
1279	var str = this.imageUrl;	1279	var str = this.imageUrl;
1280	const [baseUrl, imageUrl] = str.split(/,/);	1280	const [baseUrl, imageUrl] = str.split(/,/);
1281	addTeacher.upload = imageUrl;	1281	addTeacher.upload = imageUrl;
1282	}	1282	}
1283	this.loading = true;	1283	this.loading = true;
1284	http()	1284	http()
1285	.post("/createTeacher", addTeacher)	1285	.post("/createTeacher", addTeacher)
1286	.then(response => {	1286	.then(response => {
1287	console.log("addTeacher", addTeacher);	1287	console.log("addTeacher", addTeacher);
1288	this.getTeacherList();	1288	this.getTeacherList();
1289	if ((this.snackbar = true)) {	1289	if ((this.snackbar = true)) {
1290	this.text = "New Teacher added successfully";	1290	this.text = "New Teacher added successfully";
1291	}	1291	}
1292		1292
1293	this.clear();	1293	this.clear();
1294	this.loading = false;	1294	this.loading = false;
1295	})	1295	})
1296	.catch(error => {	1296	.catch(error => {
1297	// console.log(error);	1297	// console.log(error);
1298	if ((this.snackbar = true)) {	1298	if ((this.snackbar = true)) {
1299	this.text = error.response.data.message;	1299	this.text = error.response.data.message;
1300	}	1300	}
1301	this.loading = false;	1301	this.loading = false;
1302	});	1302	});
1303	}	1303	}
1304	},	1304	},
1305	clear() {	1305	clear() {
1306	this.$refs.form.reset();	1306	this.$refs.form.reset();
1307	},	1307	},
1308	save() {	1308	save() {
1309	this.loading = true;	1309	this.loading = true;
1310	let editTeacher = {	1310	let editTeacher = {
1311	teacherId: this.editedItem._id,	1311	teacherId: this.editedItem._id,
1312	name: this.editedItem.name,	1312	name: this.editedItem.name,
1313	email: this.editedItem.email,	1313	email: this.editedItem.email,
1314	role: this.editedItem.role,	1314	role: this.editedItem.role,
1315	dob: this.editedItem.date,	1315	dob: this.editedItem.date,
1316	city: this.editedItem.city,	1316	city: this.editedItem.city,
1317	pincode: this.editedItem.pincode,	1317	pincode: this.editedItem.pincode,
1318	country: this.editedItem.country,	1318	country: this.editedItem.country,
1319	permanentAddress: this.editedItem.permanentAddress,	1319	permanentAddress: this.editedItem.permanentAddress,
1320	presentAddress: this.editedItem.presentAddress,	1320	presentAddress: this.editedItem.presentAddress,
1321	mobileNo: this.editedItem.mobileNo,	1321	mobileNo: this.editedItem.mobileNo,
1322	state: this.editedItem.state,	1322	state: this.editedItem.state,
1323	joinDate: this.editedItem.joinDate	1323	joinDate: this.editedItem.joinDate
1324	};	1324	};
1325	if (this.imageUrl) {	1325	if (this.imageUrl) {
1326	var str = this.imageUrl;	1326	var str = this.imageUrl;
1327	const [baseUrl, imageUrl] = str.split(/,/);	1327	const [baseUrl, imageUrl] = str.split(/,/);
1328	editTeacher.upload = imageUrl;	1328	editTeacher.upload = imageUrl;
1329	}	1329	}
1330	http()	1330	http()
1331	.put("/updateTeacher", editTeacher)	1331	.put("/updateTeacher", editTeacher)
1332	.then(response => {	1332	.then(response => {
1333	console.log("editTeacher", editTeacher);	1333	console.log("editTeacher", editTeacher);
1334	if ((this.snackbar = true)) {	1334	if ((this.snackbar = true)) {
1335	this.text = "Successfully Edit Existing Teacher";	1335	this.text = "Successfully Edit Existing Teacher";
1336	}	1336	}
1337	this.loading = false;	1337	this.loading = false;
1338	this.getTeacherList();	1338	this.getTeacherList();
1339	this.close();	1339	this.close();
1340	})	1340	})
1341	.catch(error => {	1341	.catch(error => {
1342	console.log(error);	1342	console.log(error);
1343	this.loading = false;	1343	this.loading = false;
1344	});	1344	});
1345	}	1345	}
1346	},	1346	},
1347	mounted() {	1347	mounted() {
1348	this.getTeacherList();	1348	this.getTeacherList();
1349	},	1349	},
1350	created() {	1350	created() {
1351	this.$root.$on("app:search", search => {	1351	this.$root.$on("app:search", search => {
1352	this.search = search;	1352	this.search = search;
1353	});	1353	});
1354	},	1354	},
1355	beforeDestroy() {	1355	beforeDestroy() {
1356	// dont forget to remove the listener	1356	// dont forget to remove the listener
1357	this.$root.$off("app:search");	1357	this.$root.$off("app:search");
1358	}	1358	}
1359	};	1359	};
1360	</script>	1360	</script>
1361	<style scoped>	1361	<style scoped>
1362		1362
1363	.active {	1363	.active {
1364	background-color: black;	1364	background-color: black;
1365	color: white !important;	1365	color: white !important;
1366	}	1366	}
1367	.activebtn {	1367	.activebtn {
1368	color: black !important;	1368	color: black !important;
1369	}	1369	}
1370	</style>	1370	</style>

src/pages/socialMedia/socialMedia.vue

Diff comments View file @ceb4303

1	<template>	1	<template>
2	<v-app id="pages-dasboard">	2	<v-app id="pages-dasboard">
3	<v-tabs grow slider-color="black">	3	<v-tabs grow slider-color="black">
4	<v-tab	4	<v-tab
5	ripple	5	ripple
6	@click="activeTab('existing')"	6	@click="activeTab('existing')"
7	v-bind:class="{ active: isActive }"	7	v-bind:class="{ active: isActive }"
8	id="tab"	8	id="tab"
9	class="subheading"	9	class="subheading"
10	>Existing Social Media</v-tab>	10	>Existing Social Media</v-tab>
11	<v-tab	11	<v-tab
12	ripple	12	ripple
13	@click="activeTab('new')"	13	@click="activeTab('new')"
14	v-bind:class="{ active: newActive }"	14	v-bind:class="{ active: newActive }"
15	id="tab1"	15	id="tab1"
16	User	16	User
17	class="subheading"	17	class="subheading"
18	>Add New Social Media</v-tab>	18	>Add New Social Media</v-tab>
19		19
20	<!-- **** EDITS Social Media DETAILS **** -->	20	<!-- **** EDITS Social Media DETAILS **** -->
21		21
22	<v-tab-item>	22	<v-tab-item>
23	<v-snackbar	23	<v-snackbar
24	:timeout="timeout"	24	:timeout="timeout"
25	:top="y === 'top'"	25	:top="y === 'top'"
26	:right="x === 'right'"	26	:right="x === 'right'"
27	:vertical="mode === 'vertical'"	27	:vertical="mode === 'vertical'"
28	v-model="snackbar"	28	v-model="snackbar"
29	color="success"	29	color="success"
30	>{{ text }}</v-snackbar>	30	>{{ text }}</v-snackbar>
31	<v-dialog v-model="dialog" max-width="600px">	31	<v-dialog v-model="dialog" max-width="600px">
32	<v-flex xs12 sm12>	32	<v-flex xs12 sm12>
33	<v-toolbar color="v-toolbar">	33	<v-toolbar color="v-toolbar">
34	<v-spacer></v-spacer>	34	<v-spacer></v-spacer>
35	<v-toolbar-title>	35	<v-toolbar-title>
36	<h3>Edit Social Media</h3>	36	<h3>Edit Social Media</h3>
37	</v-toolbar-title>	37	</v-toolbar-title>
38	<v-spacer></v-spacer>	38	<v-spacer></v-spacer>
39	</v-toolbar>	39	</v-toolbar>
40	<v-card flat>	40	<v-card flat>
41	<v-form ref="form">	41	<v-form ref="form">
42	<v-container fluid>	42	<v-container fluid>
43	<v-layout>	43	<v-layout>
44	<v-flex	44	<v-flex
45	xs12	45	xs12
46	class="text-xs-center text-sm-center text-md-center text-lg-center mr-4"	46	class="text-xs-center text-sm-center text-md-center text-lg-center mr-4"
47	>	47	>
48	<v-avatar size="100px">	48	<v-avatar size="100px">
49	<img src="/static/icon/user.png" v-if="!imageUrl" />	49	<img src="/static/icon/user.png" v-if="!imageUrl" />
50	</v-avatar>	50	</v-avatar>
51	<!-- <input	51	<!-- <input
52	type="file"	52	type="file"
53	style="display: none"	53	style="display: none"
54	ref="image"	54	ref="image"
55	accept="image/*"	55	accept="image/*"
56	@change="onFilePicked"	56	@change="onFilePicked"
57	/>-->	57	/>-->
58	<img	58	<img
59	:src="imageData.imageUrl"	59	:src="imageData.imageUrl"
60	height="150"	60	height="150"
61	v-if="imageUrl"	61	v-if="imageUrl"
62	style="border-radius:50%; width:200px"	62	style="border-radius:50%; width:200px"
63	/>	63	/>
64	</v-flex>	64	</v-flex>
65	</v-layout>	65	</v-layout>
66	<v-flex xs12 sm12>	66	<v-flex xs12 sm12>
67	<v-layout>	67	<v-layout>
68	<v-flex xs4 class="pt-4 subheading">	68	<v-flex xs4 class="pt-4 subheading">
69	<label class="right">Title:</label>	69	<label class="right">Title:</label>
70	</v-flex>	70	</v-flex>
71	<v-flex xs5 class="ml-3">	71	<v-flex xs5 class="ml-3">
72	<v-select	72	<v-select
73	v-model="editedItem.type"	73	v-model="editedItem.type"
74	placeholder="fill your Title"	74	placeholder="fill your Title"
75	:items="socialLink"	75	:items="socialLink"
76	item-text="name"	76	item-text="name"
77	item-value="value"	77	item-value="value"
78	name="name"	78	name="name"
79	type="text"	79	type="text"
80	></v-select>	80	></v-select>
81	</v-flex>	81	</v-flex>
82	</v-layout>	82	</v-layout>
83	</v-flex>	83	</v-flex>
84	<v-flex xs12 sm12>	84	<v-flex xs12 sm12>
85	<v-layout>	85	<v-layout>
86	<v-flex xs4 class="pt-4 subheading">	86	<v-flex xs4 class="pt-4 subheading">
87	<label class="right">Description:</label>	87	<label class="right">Description:</label>
88	</v-flex>	88	</v-flex>
89	<v-flex xs5 class="ml-3">	89	<v-flex xs5 class="ml-3">
90	<v-text-field	90	<v-text-field
91	placeholder="fill your Description"	91	placeholder="fill your Description"
92	v-model="editedItem.linkUrl"	92	v-model="editedItem.linkUrl"
93	type="text"	93	type="text"
94	></v-text-field>	94	></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 sm10 offset-sm1>	99	<v-flex xs12 sm10 offset-sm1>
100	<v-card-actions>	100	<v-card-actions>
101	<v-btn round dark @click.native="close">Cancel</v-btn>	101	<v-btn round dark @click.native="close">Cancel</v-btn>
102	<v-spacer></v-spacer>	102	<v-spacer></v-spacer>
103	<v-btn round dark @click="save">Save</v-btn>	103	<v-btn round dark @click="save">Save</v-btn>
104	</v-card-actions>	104	</v-card-actions>
105	</v-flex>	105	</v-flex>
106	</v-layout>	106	</v-layout>
107	</v-container>	107	</v-container>
108	</v-form>	108	</v-form>
109	</v-card>	109	</v-card>
110	</v-flex>	110	</v-flex>
111	</v-dialog>	111	</v-dialog>
112		112
113	<!-- **** PROFILE VIEW REMINDER DEATILS **** -->	113	<!-- **** PROFILE VIEW REMINDER DEATILS **** -->
114		114
115	<v-dialog v-model="dialog1" max-width="600px">	115	<v-dialog v-model="dialog1" max-width="600px">
116	<v-toolbar color="white">	116	<v-toolbar color="white">
117	<v-spacer></v-spacer>	117	<v-spacer></v-spacer>
118	<v-toolbar-title>	118	<v-toolbar-title>
119	<h3>Social Media</h3>	119	<h3>Social Media</h3>
120	</v-toolbar-title>	120	</v-toolbar-title>
121	<v-spacer></v-spacer>	121	<v-spacer></v-spacer>
122	<v-icon @click="close1">close</v-icon>	122	<v-icon @click="close1">close</v-icon>
123	</v-toolbar>	123	</v-toolbar>
124	<v-card>	124	<v-card>
125	<v-flex align-center justify-center layout text-xs-center>	125	<v-flex align-center justify-center layout text-xs-center>
126	<v-avatar size="50px" style="position:absolute; top:20px;">	126	<v-avatar size="50px" style="position:absolute; top:20px;">
127	<img src="/static/icon/user.png" />	127	<img src="/static/icon/user.png" />
128	</v-avatar>	128	</v-avatar>
129	</v-flex>	129	</v-flex>
130	<v-card-text>	130	<v-card-text>
131	<v-container grid-list-md>	131	<v-container grid-list-md>
132	<v-layout wrap>	132	<v-layout wrap>
133	<v-flex>	133	<v-flex>
134	<br />	134	<br />
135	<br />	135	<br />
136	<v-layout>	136	<v-layout>
137	<v-flex xs5 sm6>	137	<v-flex xs5 sm6>
138	<h5 class="right my-1">Title:</h5>	138	<h5 class="right my-1"><b>Title:</b></h5>
139	</v-flex>	139	</v-flex>
140	<v-flex sm6 xs8>	140	<v-flex sm6 xs8>
141	<h5 class="my-1">{{ editedItem.type }}</h5>	141	<h5 class="my-1">{{ editedItem.type }}</h5>
142	</v-flex>	142	</v-flex>
143	</v-layout>	143	</v-layout>
144	<v-layout>	144	<v-layout>
145	<v-flex xs5 sm6>	145	<v-flex xs5 sm6>
146	<h5 class="right my-1">Description:</h5>	146	<h5 class="right my-1"><b>Description:</b></h5>
147	</v-flex>	147	</v-flex>
148	<v-flex sm6 xs8>	148	<v-flex sm6 xs8>
149	<h5 class="my-1">{{ editedItem.linkUrl }}</h5>	149	<h5 class="my-1">{{ editedItem.linkUrl }}</h5>
150	</v-flex>	150	</v-flex>
151	</v-layout>	151	</v-layout>
152	</v-flex>	152	</v-flex>
153	</v-layout>	153	</v-layout>
154	</v-container>	154	</v-container>
155	</v-card-text>	155	</v-card-text>
156	</v-card>	156	</v-card>
157	</v-dialog>	157	</v-dialog>
158	<v-snackbar	158	<v-snackbar
159	:timeout="timeout"	159	:timeout="timeout"
160	:top="y === 'top'"	160	:top="y === 'top'"
161	:right="x === 'right'"	161	:right="x === 'right'"
162	:vertical="mode === 'vertical'"	162	:vertical="mode === 'vertical'"
163	v-model="snackbar"	163	v-model="snackbar"
164	color="success"	164	color="success"
165	>{{ text }}</v-snackbar>	165	>{{ text }}</v-snackbar>
166		166
167	<!-- **** EXISTING-USERS REMINDER TABLE **** -->	167	<!-- **** EXISTING-USERS REMINDER TABLE **** -->
168		168
169	<v-data-table	169	<v-data-table
170	:headers="headers"	170	:headers="headers"
171	:items="desserts"	171	:items="desserts"
172	:pagination.sync="pagination"	172	:pagination.sync="pagination"
173	:search="search"	173	:search="search"
174	>	174	>
175	<template slot="items" slot-scope="props">	175	<template slot="items" slot-scope="props">
176	<td id="tabeleData" class="text-xs-center">{{ props.index}}</td>	176	<td id="tabeleData" class="text-xs-center">{{ props.index}}</td>
177	<td id="tabeleData" class="text-xs-center">{{ props.item.type}}</td>	177	<td id="tabeleData" class="text-xs-center">{{ props.item.type}}</td>
178	<td id="tabeleData" class="text-xs-center">{{ props.item.linkUrl}}</td>	178	<td id="tabeleData" class="text-xs-center">{{ props.item.linkUrl}}</td>
179		179
180	<td id="tabeleData" class="text-xs-center">	180	<td id="tabeleData" class="text-xs-center">
181	<span>	181	<span>
182	<img	182	<img
183	style="cursor:pointer; width:25px; height:18px; "	183	style="cursor:pointer; width:25px; height:18px; "
184	class="mr-5"	184	class="mr-5"
185	@click="profile(props.item)"	185	@click="profile(props.item)"
186	src="/static/icon/eye1.png"	186	src="/static/icon/eye1.png"
187	/>	187	/>
188	<img	188	<img
189	style="cursor:pointer; width:20px; height:18px; "	189	style="cursor:pointer; width:20px; height:18px; "
190	class="mr-5"	190	class="mr-5"
191	@click="editItem(props.item)"	191	@click="editItem(props.item)"
192	src="/static/icon/edit1.png"	192	src="/static/icon/edit1.png"
193	/>	193	/>
194	<img	194	<img
195	style="cursor:pointer;width:20px; height:20px; "	195	style="cursor:pointer;width:20px; height:20px; "
196	class="mr-5"	196	class="mr-5"
197	@click="deleteItem(props.item)"	197	@click="deleteItem(props.item)"
198	src="/static/icon/delete1.png"	198	src="/static/icon/delete1.png"
199	/>	199	/>
200	</span>	200	</span>
201	</td>	201	</td>
202	</template>	202	</template>
203	<v-alert	203	<v-alert
204	slot="no-results"	204	slot="no-results"
205	:value="true"	205	:value="true"
206	color="error"	206	color="error"
207	icon="warning"	207	icon="warning"
208	>Your search for "{{ search }}" found no results.</v-alert>	208	>Your search for "{{ search }}" found no results.</v-alert>
209	</v-data-table>	209	</v-data-table>
210	</v-tab-item>	210	</v-tab-item>
211		211
212	<!-- **** ADD MULTIPLE REMINDER **** -->	212	<!-- **** ADD MULTIPLE REMINDER **** -->
213		213
214	<v-tab-item>	214	<v-tab-item>
215	<v-container>	215	<v-container>
216	<v-snackbar	216	<v-snackbar
217	:timeout="timeout"	217	:timeout="timeout"
218	:top="y === 'top'"	218	:top="y === 'top'"
219	:right="x === 'right'"	219	:right="x === 'right'"
220	:vertical="mode === 'vertical'"	220	:vertical="mode === 'vertical'"
221	v-model="snackbar"	221	v-model="snackbar"
222	color="success"	222	color="success"
223	>{{ text }}</v-snackbar>	223	>{{ text }}</v-snackbar>
224	<v-flex xs12 sm12 class="my-4">	224	<v-flex xs12 sm12 class="my-4">
225	<v-card flat>	225	<v-card flat>
226	<v-form ref="form" v-model="valid" lazy-validation>	226	<v-form ref="form" v-model="valid" lazy-validation>
227	<v-container fluid>	227	<v-container fluid>
228	<v-layout>	228	<v-layout>
229	<v-flex	229	<v-flex
230	xs12	230	xs12
231	class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"	231	class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
232	>	232	>
233	<v-avatar size="100px">	233	<v-avatar size="100px">
234	<img src="/static/icon/user.png" v-if="!imageUrl" />	234	<img src="/static/icon/user.png" v-if="!imageUrl" />
235	</v-avatar>	235	</v-avatar>
236	<!-- <input	236	<!-- <input
237	type="file"	237	type="file"
238	style="display: none"	238	style="display: none"
239	ref="image"	239	ref="image"
240	accept="image/*"	240	accept="image/*"
241	@change="onFilePicked"	241	@change="onFilePicked"
242	/>-->	242	/>-->
243	<img	243	<img
244	:src="imageData.imageUrl"	244	:src="imageData.imageUrl"
245	height="150"	245	height="150"
246	v-if="imageUrl"	246	v-if="imageUrl"
247	style="border-radius:50%; width:200px"	247	style="border-radius:50%; width:200px"
248	/>	248	/>
249	</v-flex>	249	</v-flex>
250	</v-layout>	250	</v-layout>
251	<v-flex xs12>	251	<v-flex xs12>
252	<v-layout>	252	<v-layout>
253	<v-flex xs4 class="pt-4 subheading">	253	<v-flex xs4 class="pt-4 subheading">
254	<label class="right">Type:</label>	254	<label class="right">Type:</label>
255	</v-flex>	255	</v-flex>
256	<v-flex xs4 class="ml-3">	256	<v-flex xs4 class="ml-3">
257	<v-select	257	<v-select
258	v-model="socialMedia.type"	258	v-model="socialMedia.type"
259	:items="socialLink"	259	:items="socialLink"
260	item-text="name"	260	item-text="name"
261	item-value="value"	261	item-value="value"
262	label="Selct Type"	262	label="Selct Type"
263	type="text"	263	type="text"
264	:rules="socialRules"	264	:rules="socialRules"
265	required	265	required
266	></v-select>	266	></v-select>
267	</v-flex>	267	</v-flex>
268	</v-layout>	268	</v-layout>
269	</v-flex>	269	</v-flex>
270	<v-flex xs12>	270	<v-flex xs12>
271	<v-layout>	271	<v-layout>
272	<v-flex xs4 class="pt-4 subheading">	272	<v-flex xs4 class="pt-4 subheading">
273	<label class="right">Link Url:</label>	273	<label class="right">Link Url:</label>
274	</v-flex>	274	</v-flex>
275	<v-flex xs4 class="ml-3">	275	<v-flex xs4 class="ml-3">
276	<v-text-field	276	<v-text-field
277	placeholder="fill your link url"	277	placeholder="fill your link url"
278	:rules="linkUrlnRules"	278	:rules="linkUrlnRules"
279	v-model="socialMedia.linkUrl"	279	v-model="socialMedia.linkUrl"
280	type="text"	280	type="text"
281	required	281	required
282	></v-text-field>	282	></v-text-field>
283	</v-flex>	283	</v-flex>
284	</v-layout>	284	</v-layout>
285	</v-flex>	285	</v-flex>
286	<v-layout>	286	<v-layout>
287	<v-flex xs12 sm6 offset-sm3>	287	<v-flex xs12 sm6 offset-sm3>
288	<v-card-actions>	288	<v-card-actions>
289	<v-btn @click="clear" round dark>clear</v-btn>	289	<v-btn @click="clear" round dark>clear</v-btn>
290	<v-spacer></v-spacer>	290	<v-spacer></v-spacer>
291	<v-btn @click="submit" round dark :loading="loading">Add</v-btn>	291	<v-btn @click="submit" round dark :loading="loading">Add</v-btn>
292	</v-card-actions>	292	</v-card-actions>
293	</v-flex>	293	</v-flex>
294	</v-layout>	294	</v-layout>
295	</v-container>	295	</v-container>
296	</v-form>	296	</v-form>
297	</v-card>	297	</v-card>
298	</v-flex>	298	</v-flex>
299	</v-container>	299	</v-container>
300	</v-tab-item>	300	</v-tab-item>
301	</v-tabs>	301	</v-tabs>
302	<div class="loader" v-if="showLoader">	302	<div class="loader" v-if="showLoader">
303	<v-progress-circular indeterminate color="white"></v-progress-circular>	303	<v-progress-circular indeterminate color="white"></v-progress-circular>
304	</div>	304	</div>
305	</v-app>	305	</v-app>
306	</template>	306	</template>
307		307
308	<script>	308	<script>
309	import http from "@/Services/http.js";	309	import http from "@/Services/http.js";
310	import Util from "@/util";	310	import Util from "@/util";
311		311
312	export default {	312	export default {
313	data: () => ({	313	data: () => ({
314	snackbar: false,	314	snackbar: false,
315	y: "top",	315	y: "top",
316	x: "right",	316	x: "right",
317	mode: "",	317	mode: "",
318	timeout: 3000,	318	timeout: 3000,
319	text: "",	319	text: "",
320	loading: false,	320	loading: false,
321	date: null,	321	date: null,
322	search: "",	322	search: "",
323	showLoader: false,	323	showLoader: false,
324	dialog: false,	324	dialog: false,
325	dialog1: false,	325	dialog1: false,
326	valid: true,	326	valid: true,
327	isActive: true,	327	isActive: true,
328	newActive: false,	328	newActive: false,
329	pagination: {	329	pagination: {
330	rowsPerPage: 15	330	rowsPerPage: 15
331	},	331	},
332	imageData: {},	332	imageData: {},
333	imageName: "",	333	imageName: "",
334	imageUrl: "",	334	imageUrl: "",
335	imageFile: "",	335	imageFile: "",
336	socialRules: [v => !!v \|\| " Social media type is required"],	336	socialRules: [v => !!v \|\| " Social media type is required"],
337	linkUrlnRules: [v => !!v \|\| " Link Url is required"],	337	linkUrlnRules: [v => !!v \|\| " Link Url is required"],
338	headers: [	338	headers: [
339	{	339	{
340	text: "No",	340	text: "No",
341	align: "center",	341	align: "center",
342	sortable: false,	342	sortable: false,
343	value: "No"	343	value: "No"
344	},	344	},
345	{ text: "Title", value: "type", sortable: false, align: "center" },	345	{ text: "Title", value: "type", sortable: false, align: "center" },
346	{	346	{
347	text: "Description",	347	text: "Description",
348	value: "linkUrl",	348	value: "linkUrl",
349	sortable: false,	349	sortable: false,
350	align: "center"	350	align: "center"
351	},	351	},
352	{ text: "Action", value: "", sortable: false, align: "center" }	352	{ text: "Action", value: "", sortable: false, align: "center" }
353	],	353	],
354	desserts: [],	354	desserts: [],
355	editedIndex: -1,	355	editedIndex: -1,
356	socialMedia: {},	356	socialMedia: {},
357	editedItem: {},	357	editedItem: {},
358	socialLink: [	358	socialLink: [
359	{	359	{
360	name: "Face Book",	360	name: "Face Book",
361	value: "FACEBOOK"	361	value: "FACEBOOK"
362	},	362	},
363	{	363	{
364	name: "You Tube",	364	name: "You Tube",
365	value: "YOUTUBE"	365	value: "YOUTUBE"
366	}	366	}
367	// {	367	// {
368	// name: "Instagram",	368	// name: "Instagram",
369	// value: "INSTAGRAM"	369	// value: "INSTAGRAM"
370	// },	370	// },
371	// {	371	// {
372	// name: "Linkedin",	372	// name: "Linkedin",
373	// value: "LINKEDIN"	373	// value: "LINKEDIN"
374	// }	374	// }
375	],	375	],
376	userName: ""	376	userName: ""
377	}),	377	}),
378	methods: {	378	methods: {
379	// pickFile() {	379	// pickFile() {
380	// this.$refs.image.click();	380	// this.$refs.image.click();
381	// },	381	// },
382		382
383	// onFilePicked(e) {	383	// onFilePicked(e) {
384	// // console.log(e)	384	// // console.log(e)
385	// const files = e.target.files;	385	// const files = e.target.files;
386	// this.imageData.upload = e.target.files[0];	386	// this.imageData.upload = e.target.files[0];
387	// if (files[0] !== undefined) {	387	// if (files[0] !== undefined) {
388	// this.imageName = files[0].name;	388	// this.imageName = files[0].name;
389	// if (this.imageName.lastIndexOf(".") <= 0) {	389	// if (this.imageName.lastIndexOf(".") <= 0) {
390	// return;	390	// return;
391	// }	391	// }
392	// const fr = new FileReader();	392	// const fr = new FileReader();
393	// fr.readAsDataURL(files[0]);	393	// fr.readAsDataURL(files[0]);
394	// fr.addEventListener("load", () => {	394	// fr.addEventListener("load", () => {
395	// this.imageUrl = fr.result;	395	// this.imageUrl = fr.result;
396	// this.imageFile = files[0]; // this is an image file that can be sent to server...	396	// this.imageFile = files[0]; // this is an image file that can be sent to server...
397	// this.imageData.imageUrl = URL.createObjectURL(this.imageFile);	397	// this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
398	// console.log("upload=======>", this.imageData.imageUrl);	398	// console.log("upload=======>", this.imageData.imageUrl);
399	// console.log("imageFile", this.imageFile);	399	// console.log("imageFile", this.imageFile);
400	// });	400	// });
401	// } else {	401	// } else {
402	// this.imageName = "";	402	// this.imageName = "";
403	// this.imageFile = "";	403	// this.imageFile = "";
404	// this.imageUrl = "";	404	// this.imageUrl = "";
405	// }	405	// }
406	// },	406	// },
407	getSocialMedia() {	407	getSocialMedia() {
408	this.showLoader = true;	408	this.showLoader = true;
409	var token = this.$store.state.token;	409	var token = this.$store.state.token;
410	http()	410	http()
411	.get("/getSocialList", {	411	.get("/getSocialList", {
412	headers: { Authorization: "Bearer " + token }	412	headers: { Authorization: "Bearer " + token }
413	})	413	})
414	.then(response => {	414	.then(response => {
415	this.desserts = response.data.data;	415	this.desserts = response.data.data;
416	this.showLoader = false;	416	this.showLoader = false;
417	})	417	})
418	.catch(error => {	418	.catch(error => {
419	this.showLoader = false;	419	this.showLoader = false;
420	if (error.response.status === 401) {	420	if (error.response.status === 401) {
421	this.$router.replace({ path: "/" });	421	this.$router.replace({ path: "/" });
422	this.$store.dispatch("setToken", null);	422	this.$store.dispatch("setToken", null);
423	this.$store.dispatch("Id", null);	423	this.$store.dispatch("Id", null);
424	}	424	}
425	});	425	});
426	},	426	},
427	editItem(item) {	427	editItem(item) {
428	this.editedIndex = this.desserts.indexOf(item);	428	this.editedIndex = this.desserts.indexOf(item);
429	this.editedItem = Object.assign({}, item);	429	this.editedItem = Object.assign({}, item);
430	this.dialog = true;	430	this.dialog = true;
431	},	431	},
432	profile(item) {	432	profile(item) {
433	this.editedIndex = this.desserts.indexOf(item);	433	this.editedIndex = this.desserts.indexOf(item);
434	this.editedItem = Object.assign({}, item);	434	this.editedItem = Object.assign({}, item);
435	this.dialog1 = true;	435	this.dialog1 = true;
436	},	436	},
437		437
438	deleteItem(item) {	438	deleteItem(item) {
439	let deleteSocialMedia = {	439	let deleteSocialMedia = {
440	socialId: item._id	440	socialId: item._id
441	};	441	};
442	http()	442	http()
443	.delete(	443	.delete(
444	"/deleteSocial",	444	"/deleteSocial",
445	confirm("Are you sure you want to delete this?") && {	445	confirm("Are you sure you want to delete this?") && {
446	params: deleteSocialMedia	446	params: deleteSocialMedia
447	}	447	}
448	)	448	)
449	.then(response => {	449	.then(response => {
450	this.text = response.data.message;	450	this.text = response.data.message;
451	this.getSocialMedia();	451	this.getSocialMedia();
452	})	452	})
453	.catch(error => {	453	.catch(error => {
454	console.log(error);	454	console.log(error);
455	});	455	});
456	},	456	},
457	activeTab(type) {	457	activeTab(type) {
458	switch (type) {	458	switch (type) {
459	case "existing":	459	case "existing":
460	this.newActive = false;	460	this.newActive = false;
461	this.isActive = true;	461	this.isActive = true;
462	break;	462	break;
463		463
464	default:	464	default:
465	this.newActive = true;	465	this.newActive = true;
466	this.isActive = false;	466	this.isActive = false;
467	break;	467	break;
468	}	468	}
469	},	469	},
470	close() {	470	close() {
471	this.dialog = false;	471	this.dialog = false;
472	setTimeout(() => {	472	setTimeout(() => {
473	this.editedItem = Object.assign({}, this.defaultItem);	473	this.editedItem = Object.assign({}, this.defaultItem);
474	this.editedIndex = -1;	474	this.editedIndex = -1;
475	}, 300);	475	}, 300);
476	},	476	},
477	close1() {	477	close1() {
478	this.dialog1 = false;	478	this.dialog1 = false;
479	},	479	},
480	submit() {	480	submit() {
481	if (this.$refs.form.validate()) {	481	if (this.$refs.form.validate()) {
482	this.loading = true;	482	this.loading = true;
483	http()	483	http()
484	.post("/addSocialLinks", this.socialMedia)	484	.post("/addSocialLinks", this.socialMedia)
485	.then(response => {	485	.then(response => {
486	this.snackbar = true;	486	this.snackbar = true;
487	this.text = response.data.message;	487	this.text = response.data.message;
488	this.getSocialMedia();	488	this.getSocialMedia();
489	this.clear();	489	this.clear();
490	this.loading = false;	490	this.loading = false;
491	})	491	})
492	.catch(error => {	492	.catch(error => {
493	this.snackbar = true;	493	this.snackbar = true;
494	this.text = error.response.data.message;	494	this.text = error.response.data.message;
495	this.loading = false;	495	this.loading = false;
496	});	496	});
497	}	497	}
498	},	498	},
499	clear() {	499	clear() {
500	this.$refs.form.reset();	500	this.$refs.form.reset();
501	},	501	},
502	save() {	502	save() {
503	(this.editedItem.socialId = this.editedItem._id),	503	(this.editedItem.socialId = this.editedItem._id),
504	http()	504	http()
505	.put("/updateSocial", this.editedItem)	505	.put("/updateSocial", this.editedItem)
506	.then(response => {	506	.then(response => {
507	this.text = "Successfully Edit Notification";	507	this.text = "Successfully Edit Notification";
508	this.getSocialMedia();	508	this.getSocialMedia();
509	this.close();	509	this.close();
510	})	510	})
511	.catch(error => {	511	.catch(error => {
512	console.log(error);	512	console.log(error);
513	});	513	});
514	}	514	}
515	},	515	},
516	mounted() {	516	mounted() {
517	this.getSocialMedia();	517	this.getSocialMedia();
518	},	518	},
519	created() {	519	created() {
520	this.$root.$on("app:search", search => {	520	this.$root.$on("app:search", search => {
521	this.search = search;	521	this.search = search;
522	});	522	});
523	},	523	},
524	beforeDestroy() {	524	beforeDestroy() {
525	// dont forget to remove the listener	525	// dont forget to remove the listener
526	this.$root.$off("app:search");	526	this.$root.$off("app:search");
527	}	527	}
528	};	528	};
529	</script>	529	</script>
530	<style scoped>	530	<style scoped>
531	#tabeleData {	531	#tabeleData {
532	border: 1px solid #dddddd;	532	border: 1px solid #dddddd;
533	text-align: left;	533	text-align: left;
534	padding: 8px 0px;	534	padding: 8px 0px;
535	max-width: 200px !important;	535	max-width: 200px !important;
536	}	536	}
537	.active {	537	.active {
538	background-color: black;	538	background-color: black;
539	color: white !important;	539	color: white !important;
540	}	540	}
541	.activebtn {	541	.activebtn {
542	color: black !important;	542	color: black !important;
543	}	543	}
544	</style>	544	</style>