viithiisys / School-Management-dashboard

Browse Code »

Commit 29ac0dbb24e52d33f97b75a9c42ecd5764daba46

Authored by Neeraj Sharma 2019-12-09 05:50:43 -0500

1 parent f9b486fe1c

Exists in master and in 3 other branches

something changes

Showing 10 changed files with 46 additions and 28 deletions Show diff stats

src/Services/http.js

Diff comments View file @29ac0db

 import axios from 'axios'
 import store from '@/store/store'
+const baseDomain = "http://13.234.251.173:8001/v1";
+const baseURL = `${baseDomain}`;
 export default () => {
     return axios.create({
         // baseURL: 'http://192.168.2.221:3002/v1',
-        baseURL: 'http://13.234.251.173:8001/v1',
+        baseURL,
         headers: {
             Authorization: `Bearer ${store.state.token}`
         }
     })
 }

src/components/ThemeSettings.vue

Diff comments View file @29ac0db

1	<template>	1	<template>
2	<div id="themeSetting">	2	<div id="themeSetting">
3	<v-toolbar color="blue" dark>	3	<v-toolbar color="blue" dark>
4	<v-toolbar-title>Theme Settings</v-toolbar-title>	4	<v-toolbar-title>Theme Settings</v-toolbar-title>
5	</v-toolbar>	5	</v-toolbar>
6	<v-container>	6	<v-container>
7	<v-layout column>	7	<v-layout column>
8	<v-flex>	8	<v-flex>
9	<v-subheader class="px-1 my-2">Color Option</v-subheader>	9	<v-subheader class="px-1 my-2">Color Option</v-subheader>
10	<div class="color-option">	10	<div class="color-option">
11	<v-layout wrap>	11	<v-layout wrap>
12	<label	12	<label
13	class="color-option--label flex xs6 pa-1"	13	class="color-option--label flex xs6 pa-1"
14	v-for="(option,index) in themeColorOptions"	14	v-for="(option,index) in themeColorOptions"
15	:key="index"	15	:key="index"
16	>	16	>
17	<input type="radio" name="color" v-bind:value="option.key" v-model="themeColor" />	17	<input type="radio" name="color" v-bind:value="option.key" v-model="themeColor" />
18	<span class="color-option--item bg">	18	<span class="color-option--item bg">
19	<span class="overlay">	19	<span class="overlay">
20	<span class="material-icons">check</span>	20	<span class="material-icons">check</span>
21	</span>	21	</span>
22	<span class="color-option--item--header sideNav" :class="option.value.sideNav"></span>	22	<span class="color-option--item--header sideNav" :class="option.value.sideNav"></span>
23	<span class="color-option--item--header mainNav" :class="option.value.mainNav"></span>	23	<span class="color-option--item--header mainNav" :class="option.value.mainNav"></span>
24	<span class="sideMenu" :class="option.value.sideManu"></span>	24	<span class="sideMenu" :class="option.value.sideManu"></span>
25	</span>	25	</span>
26	</label>	26	</label>
27	</v-layout>	27	</v-layout>
28	</div>	28	</div>
29	<div class="theme-options">	29	<div class="theme-options">
30	<v-subheader class="px-1 my-2">Sidebar Option</v-subheader>	30	<v-subheader class="px-1 my-2">Sidebar Option</v-subheader>
31	<v-divider></v-divider>	31	<v-divider></v-divider>
32	<div class="my-3">	32	<div class="my-3">
33	<v-btn-toggle v-model="sideBarOption">	33	<v-btn-toggle v-model="sideBarOption">
34	<v-btn flat value="dark">Dark</v-btn>	34	<v-btn flat value="dark">Dark</v-btn>
35	<v-btn flat value="light">Light</v-btn>	35	<v-btn flat value="light">Light</v-btn>
36	</v-btn-toggle>	36	</v-btn-toggle>
37	</div>	37	</div>
38	</div>	38	</div>
39	</v-flex>	39	</v-flex>
40	</v-layout>	40	</v-layout>
41	</v-container>	41	</v-container>
42	</div>	42	</div>
43	</template>	43	</template>
44		44
45	<script>	45	<script>
46	import colors from "vuetify/es5/util/colors";	46	import colors from "vuetify/es5/util/colors";
47	export default {	47	export default {
48	data() {	48	data() {
49	return {	49	return {
50	themeColor: "indigo",	50	themeColor: "indigo",
51	sideBarOption: "light",	51	sideBarOption: "light",
52	colors: colors	52	colors: colors
53	};	53	};
54	},	54	},
55	computed: {	55	computed: {
56	themeColorOptions() {	56	themeColorOptions() {
57	return [	57	return [
58	{	58	{
59	key: "blue",	59	key: "blue",
60	value: {	60	value: {
61	sideNav: "blue",	61	sideNav: "blue",
62	mainNav: "blue",	62	mainNav: "blue",
63	sideManu: "white"	63	sideManu: "white"
64	}	64	}
65	},	65	},
66	{	66	{
67	key: "lightBlue",	67	key: "lightBlue",
68	value: {	68	value: {
69	sideNav: "blue",	69	sideNav: "blue",
70	mainNav: "white",	70	mainNav: "white",
71	sideManu: "blue lighten-1"	71	sideManu: "blue lighten-1"
72	}	72	}
73	},	73	},
74	{	74	{
75	key: "teal",	75	key: "teal",
76	value: {	76	value: {
77	sideNav: "teal",	77	sideNav: "teal",
78	mainNav: "teal",	78	mainNav: "teal",
79	sideManu: "white"	79	sideManu: "white"
80	}	80	}
81	},	81	},
82	{	82	{
83	key: "red",	83	key: "red",
84	value: {	84	value: {
85	sideNav: "red",	85	sideNav: "red",
86	mainNav: "red",	86	mainNav: "red",
87	sideManu: "white"	87	sideManu: "white"
88	}	88	}
89	},	89	},
90	{	90	{
91	key: "orange",	91	key: "orange",
92	value: {	92	value: {
93	sideNav: "orange",	93	sideNav: "orange",
94	mainNav: "orange",	94	mainNav: "orange",
95	sideManu: "white"	95	sideManu: "white"
96	}	96	}
97	},	97	},
98	{	98	{
99	key: "purple",	99	key: "purple",
100	value: {	100	value: {
101	sideNav: "purple",	101	sideNav: "purple",
102	mainNav: "purple",	102	mainNav: "purple",
103	sideManu: "white"	103	sideManu: "white"
104	}	104	}
105	},	105	},
106	{	106	{
107	key: "indigo",	107	key: "indigo",
108	value: {	108	value: {
109	sideNav: "indigo",	109	sideNav: "indigo",
110	mainNav: "indigo",	110	mainNav: "indigo",
111	sideManu: "white"	111	sideManu: "white"
112	}	112	}
113	},	113	},
114	{	114	{
115	key: "cyan",	115	key: "cyan",
116	value: {	116	value: {
117	sideNav: "cyan",	117	sideNav: "cyan",
118	mainNav: "cyan",	118	mainNav: "cyan",
119	sideManu: "white"	119	sideManu: "white"
120	}	120	}
121	},	121	},
122	{	122	{
123	key: "pink",	123	key: "pink",
124	value: {	124	value: {
125	sideNav: "pink",	125	sideNav: "pink",
126	mainNav: "pink",	126	mainNav: "pink",
127	sideManu: "white"	127	sideManu: "white"
128	}	128	}
129	},	129	},
130	{	130	{
131	key: "green",	131	key: "green",
132	value: {	132	value: {
133	sideNav: "green",	133	sideNav: "green",
134	mainNav: "green",	134	mainNav: "green",
135	sideManu: "white"	135	sideManu: "white"
136	}	136	}
137	}	137	}
138	];	138	];
139	}	139	}
140	},	140	},
141	watch: {	141	watch: {
142	themeColor: {	142	themeColor: {
143	handler(val) {	143	handler(val) {
144	console.log(val);	144	// console.log(val);
145	this.$vuetify.theme.primary = this.colors[val].base;	145	this.$vuetify.theme.primary = this.colors[val].base;
146	},	146	},
147	immediate: true	147	immediate: true
148	},	148	},
149	sideBarOption: {	149	sideBarOption: {
150	handler(val) {	150	handler(val) {
151	this.$vuetify.dark = val === "dark";	151	this.$vuetify.dark = val === "dark";
152	},	152	},
153	immediate: true	153	immediate: true
154	}	154	}
155	}	155	}
156	};	156	};
157	</script>	157	</script>
158	<style lang="stylus" scoped>	158	<style lang="stylus" scoped>
159	.color-option {	159	.color-option {
160	&--label {	160	&--label {
161	position: relative;	161	position: relative;
162	display: block;	162	display: block;
163	cursor: pointer;	163	cursor: pointer;
164		164
165	& input[type='radio'] {	165	& input[type='radio'] {
166	display: none;	166	display: none;
167		167
168	&+span {	168	&+span {
169	position: relative;	169	position: relative;
170		170
171	&>.overlay {	171	&>.overlay {
172	display: none;	172	display: none;
173	position: absolute;	173	position: absolute;
174	top: 0;	174	top: 0;
175	bottom: 0;	175	bottom: 0;
176	right: 0;	176	right: 0;
177	left: 0;	177	left: 0;
178	width: 100%;	178	width: 100%;
179	height: 100%;	179	height: 100%;
180	background-color: rgba(0, 0, 0, 0.3);	180	background-color: rgba(0, 0, 0, 0.3);
181	text-align: center;	181	text-align: center;
182	line-height: 30px;	182	line-height: 30px;
183	color: #fff;	183	color: #fff;
184	}	184	}
185	}	185	}
186		186
187	&:checked+span>.overlay {	187	&:checked+span>.overlay {
188	display: block;	188	display: block;
189	}	189	}
190	}	190	}
191		191
192	& .bg {	192	& .bg {
193	background-color: #f1f1f1;	193	background-color: #f1f1f1;
194	}	194	}
195	}	195	}
196		196
197	&--item {	197	&--item {
198	overflow: hidden;	198	overflow: hidden;
199	display: block;	199	display: block;
200	box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);	200	box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
201	margin-bottom: 15px;	201	margin-bottom: 15px;
202		202
203	&--header {	203	&--header {
204	height: 10px;	204	height: 10px;
205	}	205	}
206		206
207	&>span {	207	&>span {
208	display: block;	208	display: block;
209	float: left;	209	float: left;
210	width: 50%;	210	width: 50%;
211	height: 20px;	211	height: 20px;
212	}	212	}
213	}	213	}
214	}	214	}
215	</style>	215	</style>
216		216
217	<style>	217	<style>
218	.indigo {	218	.indigo {
219	background-color: #444b54 !important;	219	background-color: #444b54 !important;
220	border-color: #444b54 !important;	220	border-color: #444b54 !important;
221	}	221	}
222	</style>	222	</style>
223		223

src/main.js

Diff comments View file @29ac0db

1	// The Vue build version to load with the `import` command	1	// The Vue build version to load with the `import` command
2	// (runtime-only or standalone) has been set in webpack.base.conf with an alias.	2	// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
3	import Vue from 'vue';	3	import Vue from 'vue';
4	import App from './App';	4	import App from './App';
5	import Vuetify from 'vuetify';	5	import Vuetify from 'vuetify';
6	import router from './router';	6	import router from './router';
7	import 'font-awesome/css/font-awesome.css';	7	import 'font-awesome/css/font-awesome.css';
8	import './theme/default.styl';	8	import './theme/default.styl';
9	import VeeValidate from 'vee-validate';	9	import VeeValidate from 'vee-validate';
10	import colors from 'vuetify/es5/util/colors';	10	import colors from 'vuetify/es5/util/colors';
11	import Truncate from 'lodash.truncate';	11	import Truncate from 'lodash.truncate';
12	import store from '@/store/store'	12	import store from '@/store/store'
13	import FullCalendar from 'vue-full-calendar';	13	import FullCalendar from 'vue-full-calendar';
14	import JsonCSV from 'vue-json-csv'	14	import JsonCSV from 'vue-json-csv'
15	import VueHtml2Canvas from 'vue-html2canvas';	15	import VueHtml2Canvas from 'vue-html2canvas';
16	import 'babel-polyfill';	16	import 'babel-polyfill';
17	import VueHtmlToPaper from 'vue-html-to-paper';	17	import VueHtmlToPaper from 'vue-html-to-paper';
18		18
19	const options = {	19	const options = {
20	name: '_blank',	20	name: '_blank',
21	specs: [	21	specs: [
22	'fullscreen=yes',	22	'fullscreen=yes',
23	'titlebar=yes',	23	'titlebar=yes',
24	'scrollbars=yes'	24	'scrollbars=yes'
25	],	25	],
26	styles: [	26	styles: [
27	'https://unpkg.com/vuetify/dist/vuetify.min.css',	27	'https://unpkg.com/vuetify/dist/vuetify.min.css',
28	'https://unpkg.com/kidlat-css/css/kidlat.css'	28	'https://unpkg.com/kidlat-css/css/kidlat.css'
29	]	29	]
30	}	30	}
31
32	Vue.use(VueHtmlToPaper, options);	31	Vue.use(VueHtmlToPaper, options);
33		32
34	// or, using the defaults with no stylesheet	33	// or, using the defaults with no stylesheet
35		34
36	Vue.use(VueHtmlToPaper);	35	Vue.use(VueHtmlToPaper);
37	Vue.use(VueHtml2Canvas);	36	Vue.use(VueHtml2Canvas);
38		37
39	Vue.component('downloadCsv', JsonCSV)	38	Vue.component('downloadCsv', JsonCSV)
40		39
41	Vue.config.productionTip = false;	40	Vue.config.productionTip = false;
42	Vue.use(FullCalendar);	41	Vue.use(FullCalendar);
43		42
44	// Helpers	43	// Helpers
45	// Global filters	44	// Global filters
46	// Vue.use(VueAxios, axios);	45	// Vue.use(VueAxios, axios);
47	Vue.filter('truncate', Truncate);	46	Vue.filter('truncate', Truncate);
48	Vue.use(VeeValidate, { fieldsBagName: 'formFields' });	47	Vue.use(VeeValidate, { fieldsBagName: 'formFields' });
49	VeeValidate.Validator.localize({	48	VeeValidate.Validator.localize({
50	en: {	49	en: {
51	custom: {	50	custom: {
52	password2: {	51	password2: {
53	is: 'The passwords do not match'	52	is: 'The passwords do not match'
54	}	53	}
55	}	54	}
56	}	55	}
57	})	56	})
58	Vue.use(Vuetify, {	57	Vue.use(Vuetify, {
59	// theme: {	58	// theme: {
60	// primary: "f1f1f1", // #E53935	59	// primary: "f1f1f1", // #E53935
61	// // secondary: colors.indigo.lighten4, // #FFCDD2	60	// // secondary: colors.indigo.lighten4, // #FFCDD2
62	// // accent: colors.indigo.base // #3F51B5	61	// // accent: colors.indigo.base // #3F51B5
63	// },	62	// },
64	options: {	63	options: {
65	themeVariations: ['primary', 'secondary', 'accent'],	64	themeVariations: ['primary', 'secondary', 'accent'],
66	extra: {	65	extra: {
67	mainToolbar: {	66	mainToolbar: {
68	color: 'primary',	67	color: 'primary',
69	},	68	},
70	sideToolbar: {},	69	sideToolbar: {},
71	sideNav: 'primary',	70	sideNav: 'primary',
72	mainNav: 'primary lighten-1',	71	mainNav: 'primary lighten-1',
73	bodyBg: '',	72	bodyBg: '',
74	}	73	}
75	}	74	}
76	});	75	});
77	// Bootstrap application components	76	// Bootstrap application components
78		77
79		78
80		79
81	/* eslint-disable no-new */	80	/* eslint-disable no-new */
82	new Vue({	81	new Vue({
83	el: '#app',	82	el: '#app',
84	router,	83	router,
85	store,	84	store,
86	components: { App },	85	components: { App },
87	template: '<App/>'	86	template: '<App/>'
88	});	87	});

src/pages/Administrator/systemAdmin.vue

Diff comments View file @29ac0db

 <template>
   <v-app id="pages-dasboard">
     <v-tabs grow slider-color="gray">
       <v-tab
         ripple
         @click="activeTab('existing')"
         v-bind:class="{ active: isActive }"
         id="tab"
         class="subheading"
       >Existing System Admin</v-tab>
       <v-tab
         ripple
         @click="activeTab('new')"
         v-bind:class="{ active: newActive }"
         id="tab1"
         User
         class="subheading"
       >Add New System Admin</v-tab>
       <!-- ****** EDIT  System Admin 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="1100px" scrollable>
           <v-card flat>
             <v-toolbar color="grey lighten-2" flat>
               <v-spacer></v-spacer>
               <v-toolbar-title>Edit System Admin Profile</v-toolbar-title>
               <v-spacer></v-spacer>
             </v-toolbar>
             <v-card-text style="height: 800px;">
               <v-layout>
                 <v-flex
                   xs12
                   class="text-xs-center text-sm-center text-md-center text-lg-center my-4"
                 >
                   <v-avatar size="160px">
                     <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl && !imageUrl" />
                     <img
                       :src="editedItem.profilePicUrl"
                       v-else-if="editedItem.profilePicUrl && !imageUrl"
                     />
                     <img
                       v-if="imageUrl"
                       :src="imageUrl"
                       height="150"
                       style="border-radius:50%; width:200px"
                     />
                   </v-avatar>
                   <input
                     type="file"
                     style="display:none"
                     ref="image"
                     accept="image/*"
                     @change="onFilePicked"
                   />
                 </v-flex>
               </v-layout>
               <v-layout wrap>
                 <v-flex xs12 sm6>
                   <v-layout>
                     <v-flex xs4 sm4 class="pt-4 subheading">
                       <label class="right hidden-xs-only hidden-sm-only">Full Name:</label>
                       <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label>
                     </v-flex>
                     <v-flex xs8 sm6 class="ml-3">
                       <v-text-field
                         v-model="editedItem.name"
                         placeholder="fill your full Name"
                         type="text"
                         required
                       ></v-text-field>
                     </v-flex>
                   </v-layout>
                 </v-flex>
                 <v-flex xs12 sm6>
                   <v-layout>
                     <v-flex xs4 sm4 class="pt-4 subheading">
                       <label class="right">Email ID:</label>
                     </v-flex>
                     <v-flex xs8 sm6 class="ml-3">
                       <v-text-field
                         placeholder="fill your email"
                         v-model="editedItem.email"
                         type="text"
                         required
                       ></v-text-field>
                     </v-flex>
                   </v-layout>
                 </v-flex>
               </v-layout>
               <v-layout wrap>
                 <v-flex xs12 sm6>
                   <v-layout>
                     <v-flex xs4 sm4 class="pt-4 subheading">
                       <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>
                       <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label>
                     </v-flex>
                     <v-flex xs8 sm6 class="ml-3">
                       <v-menu
                         ref="menu"
                         :close-on-content-click="false"
                         v-model="menu2"
                         :nudge-right="40"
                         lazy
                         transition="scale-transition"
                         offset-y
                         full-width
                         min-width="290px"
                       >
                         <v-text-field
                           slot="activator"
                           v-model="editedItem.dob"
                           placeholder="Select date"
                         ></v-text-field>
                         <v-date-picker
                           ref="picker"
                           v-model="editedItem.dob"
                           :max="new Date().toISOString().substr(0, 10)"
                           min="1950-01-01"
                           @input="menu2 = false"
                         ></v-date-picker>
                       </v-menu>
                     </v-flex>
                   </v-layout>
                 </v-flex>
                 <v-flex xs12 sm6>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right">City:</label>
                     </v-flex>
                     <v-flex xs8 sm6 class="ml-3">
                       <v-text-field
                         v-model="editedItem.city"
                         placeholder="fill your City Name"
                         type="text"
                         required
                       ></v-text-field>
                     </v-flex>
                   </v-layout>
                 </v-flex>
               </v-layout>
               <v-layout wrap>
                 <v-flex xs12 sm6>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right">State:</label>
                     </v-flex>
                     <v-flex xs8 sm6 class="ml-3">
                       <v-text-field
                         v-model="editedItem.state"
                         placeholder="fill your State Name"
                         type="text"
                         required
                       ></v-text-field>
                     </v-flex>
                   </v-layout>
                 </v-flex>
                 <v-flex xs12 sm6>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right">PinCode:</label>
                     </v-flex>
                     <v-flex xs8 sm6 class="ml-3">
                       <v-text-field
                         v-model="editedItem.pincode"
                         placeholder="fill your pincode"
                         type="number"
                         required
                       ></v-text-field>
                     </v-flex>
                   </v-layout>
                 </v-flex>
               </v-layout>
               <v-layout wrap>
                 <v-flex xs12 sm6>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>
                       <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label>
                     </v-flex>
                     <v-flex xs8 sm6 class="ml-3">
                       <v-text-field
                         v-model="editedItem.mobileNo"
                         placeholder="fill your MobileNo"
                         type="number"
                         required
                       ></v-text-field>
                     </v-flex>
                   </v-layout>
                 </v-flex>
                 <v-flex xs12 sm6>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right hidden-xs-only hidden-sm-only">Select Country:</label>
                       <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label>
                     </v-flex>
                     <v-flex xs8 sm6 class="ml-3">
                       <v-autocomplete
                         v-model="editedItem.country"
                         :items="countries"
                         placeholder="Select Country Name"
                         required
                       ></v-autocomplete>
                     </v-flex>
                   </v-layout>
                 </v-flex>
               </v-layout>
               <v-layout wrap>
                 <v-flex xs12 sm6>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right">Join Date:</label>
                     </v-flex>
                     <v-flex xs8 sm6 class="ml-3">
                       <v-menu
                         ref="menu"
                         :close-on-content-click="false"
                         v-model="menu3"
                         :nudge-right="40"
                         lazy
                         transition="scale-transition"
                         offset-y
                         full-width
                         min-width="290px"
                       >
                         <v-text-field
                           slot="activator"
                           v-model="editedItem.joinDate"
                           placeholder="Select date"
                         ></v-text-field>
                         <v-date-picker
                           ref="picker"
                           v-model="editedItem.joinDate"
                           :max="new Date().toISOString().substr(0, 10)"
                           min="1950-01-01"
                           @input="menu3 = false"
                         ></v-date-picker>
                       </v-menu>
                     </v-flex>
                   </v-layout>
                 </v-flex>
                 <v-flex xs12 sm6>
                   <v-layout>
                     <v-flex xs4 class="pt-4 subheading">
                       <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
                       <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label>
                     </v-flex>
                     <v-flex xs8 sm6 class="ml-3">
                       <v-text-field
                         label="Select Image"
                         @click="pickFile"
                         v-model="imageName"
                         append-icon="attach_file"
                       ></v-text-field>
                     </v-flex>
                   </v-layout>
                 </v-flex>
               </v-layout>
               <v-layout class="hidden-xs-only hidden-sm-only" wrap>
                 <v-flex xs12 sm12>
                   <v-layout>
                     <v-flex xs4 sm2 class="pt-4 subheading ml-5">
                       <label class="right pr-2">Present Address:</label>
                     </v-flex>
                     <v-flex xs8 sm10>
                       <v-text-field
                         name="input-4-3"
                         v-model="editedItem.presentAddress"
                         placeholder="fill Your present Address"
                         required
                       ></v-text-field>
                     </v-flex>
                   </v-layout>
                 </v-flex>
                 <v-flex xs12 sm12>
                   <v-layout>
                     <v-flex xs4 sm2 class="pt-4 subheading ml-5 addressForm">
                       <label class="pr-2">Permanent Address:</label>
                     </v-flex>
                     <v-flex xs12 sm10>
                       <v-text-field
                         name="input-4-3"
                         v-model="editedItem.permanentAddress"
                         placeholder="fill Your Permanent Address"
                         required
                       ></v-text-field>
                     </v-flex>
                   </v-layout>
                 </v-flex>
               </v-layout>
               <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap>
                 <v-flex xs12 sm12>
                   <v-layout>
                     <v-flex xs12 sm3 class="pt-4 subheading text-xs-center">
                       <label class>Present Address:</label>
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs12 sm12>
                       <v-textarea
                         name="input-4-3"
                         v-model="editedItem.presentAddress"
                         placeholder="fill Your present Address"
                         required
                       ></v-textarea>
                     </v-flex>
                   </v-layout>
                 </v-flex>
                 <v-flex xs12 sm12>
                   <v-layout>
                     <v-flex xs12 sm3 class="pt-4 pr-4 subheading text-xs-center addressForm">
                       <label>Permanent Address:</label>
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs12 sm12>
                       <v-textarea
                         name="input-4-3"
                         v-model="editedItem.permanentAddress"
                         placeholder="fill Your Permanent Address"
                         required
                       ></v-textarea>
                     </v-flex>
                   </v-layout>
                 </v-flex>
               </v-layout>
               <v-layout>
                 <v-flex xs12 sm12>
                   <v-layout>
                     <v-flex xs6>
                       <v-btn round dark @click.native="close">Cancel</v-btn>
                     </v-flex>
                     <v-flex xs6>
                       <v-btn @click="save" round dark :loading="loading" class="right">Save</v-btn>
                     </v-flex>
                   </v-layout>
                 </v-flex>
               </v-layout>
             </v-card-text>
           </v-card>
         </v-dialog>
         <!-- ****** PROFILE VIEW  System Admin DETAILS ******  -->
         <v-dialog v-model="dialog1" max-width="600px" scrollable>
           <v-card>
             <v-toolbar color="grey lighten-2" flat>
               <v-spacer></v-spacer>
               <v-toolbar-title>
                 <h3> System Admin</h3>
               </v-toolbar-title>
               <v-spacer></v-spacer>
               <v-icon @click="close1">close</v-icon>
             </v-toolbar>
             <v-card-text style="height: 700px;">
               <v-container grid-list-md>
                 <v-layout wrap>
                   <v-flex>
                     <v-flex align-center justify-center layout text-xs-center>
                       <v-avatar size="160px">
                         <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" />
                         <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" />
                       </v-avatar>
                     </v-flex>
                     <v-layout>
                       <v-flex xs5 sm6>
                         <h5 class="right my-1">
                           <b>Full Name:</b>
                         </h5>
                       </v-flex>
                       <v-flex sm6 xs8>
                         <h5 class="my-1">{{ editedItem.name }}</h5>
                       </v-flex>
                     </v-layout>
                     <v-layout>
                       <v-flex xs5 sm6>
                         <h5 class="right my-1">
                           <b>Email:</b>
                         </h5>
                       </v-flex>
                       <v-flex sm6 xs8>
                         <h5 class="my-1">{{ editedItem.email }}</h5>
                       </v-flex>
                     </v-layout>
                     <v-layout>
                       <v-flex xs5 sm6>
                         <h5 class="right my-1">
                           <b>City:</b>
                         </h5>
                       </v-flex>
                       <v-flex sm6 xs8>
                         <h5 class="my-1">{{ editedItem.city }}</h5>
                       </v-flex>
                     </v-layout>
                     <v-layout>
                       <v-flex xs5 sm6>
                         <h5 class="right my-1">
                           <b>State:</b>
                         </h5>
                       </v-flex>
                       <v-flex sm6 xs8>
                         <h5 class="my-1">{{ editedItem.state }}</h5>
                       </v-flex>
                     </v-layout>
                     <v-layout>
                       <v-flex xs5 sm6>
                         <h5 class="right my-1">
                           <b>Country:</b>
                         </h5>
                       </v-flex>
                       <v-flex sm6 xs8>
                         <h5 class="my-1">{{ editedItem.country }}</h5>
                       </v-flex>
                     </v-layout>
                     <v-layout>
                       <v-flex xs5 sm6>
                         <h5 class="right my-1">
                           <b>Pincode:</b>
                         </h5>
                       </v-flex>
                       <v-flex sm6 xs8>
                         <h5 class="my-1">{{ editedItem.pincode }}</h5>
                       </v-flex>
                     </v-layout>
                     <v-layout>
                       <v-flex xs5 sm6>
                         <h5 class="right my-1">
                           <b>Mobile No:</b>
                         </h5>
                       </v-flex>
                       <v-flex sm6 xs8>
                         <h5 class="my-1">{{ editedItem.mobileNo }}</h5>
                       </v-flex>
                     </v-layout>
                     <v-layout>
                       <v-flex xs5 sm6>
                         <h5 class="right my-1">
                           <b>Join Date:</b>
                         </h5>
                       </v-flex>
                       <v-flex sm6 xs8>
                         <h5 class="my-1">{{ dates(editedItem.joinDate) }}</h5>
                       </v-flex>
                     </v-layout>
                     <v-layout>
                       <v-flex xs5 sm6>
                         <h5 class="right my-1">
                           <b>D.O.B :</b>
                         </h5>
                       </v-flex>
                       <v-flex sm6 xs8>
                         <h5 class="my-1">{{ dates(editedItem.dob) }}</h5>
                       </v-flex>
                     </v-layout>
                     <v-layout>
                       <v-flex xs6 sm6>
                         <h5 class="right my-1">
                           <b>Permanent Address:</b>
                         </h5>
                       </v-flex>
                       <v-flex sm6 xs8>
                         <h5 class="my-1">{{ editedItem.permanentAddress }}</h5>
                       </v-flex>
                     </v-layout>
                     <v-layout>
                       <v-flex xs6 sm6>
                         <h5 class="right my-1">
                           <b>present Address:</b>
                         </h5>
                       </v-flex>
                       <v-flex sm6 xs8>
                         <h5 class="my-1">{{ editedItem.presentAddress }}</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 System Admin 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 + 1}}</td>
             <td id="td" class="text-xs-center">
               <v-avatar>
                 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
                 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
               </v-avatar>
             </td>
             <td id="td" class="text-xs-center">{{ props.item.name}}</td>
             <td id="td" class="text-xs-center">{{ props.item.email }}</td>
             <td id="td" class="text-xs-center">{{ props.item.role }}</td>
             <td id="td" class="text-xs-center">{{ props.item.status }}</td>
             <!-- <td id="td" class="text-xs-center">{{ props.item.mobileNo }}</td> -->
             <td class="text-xs-center">
               <span>
                 <v-tooltip top>
                   <img
                     slot="activator"
                     style="cursor:pointer; width:25px; height:18px; "
                     class="mr5"
                     @click="profile(props.item)"
                     src="/static/icon/eye1.png"
                   />
                   <span>View</span>
                 </v-tooltip>
                 <v-tooltip top>
                   <img
                     slot="activator"
                     style="cursor:pointer; width:20px; height:18px; "
                     class="mr5"
                     @click="editItem(props.item)"
                     src="/static/icon/edit1.png"
                   />
                   <span>Edit</span>
                 </v-tooltip>
                 <v-tooltip top>
                   <img
                     slot="activator"
                     style="cursor:pointer; width:20px; height:20px; "
                     class="mr5"
                     @click="deleteItem(props.item)"
                     src="/static/icon/delete1.png"
                   />
                   <span>Delete</span>
                 </v-tooltip>
               </span>
             </td>
           </template>
           <v-alert
             slot="no-results"
             :value="true"
             color="error"
             icon="warning"
           >Your search for "{{ search }}" found no results.</v-alert>
         </v-data-table>
       </v-tab-item>
       <!-- ****** Add  System Admin Data****** -->
       <v-tab-item>
         <v-container fluid>
           <v-snackbar
             :timeout="timeout"
             :top="y === 'top'"
             :right="x === 'right'"
             :vertical="mode === 'vertical'"
             v-model="snackbar"
             color="success"
           >{{ text }}</v-snackbar>
           <v-flex xs12 sm12 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"
                     >
                       <v-avatar size="100px">
                         <img src="/static/icon/user.png" v-if="!imageUrl" />
                       </v-avatar>
                       <img
                         :src="imageUrl"
                         height="150"
                         v-if="imageUrl"
                         style="border-radius:50%; width:200px"
                       />
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs12 sm6>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right hidden-sm-only hidden-xs-only">Name:</label>
                           <label
                             class="right hidden-lg-only hidden-xl-only hidden-md-only"
                           >Name</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             v-model="addSystemAdmin.name"
                             placeholder="fill your full Name"
                             name="name"
                             type="text"
                             :rules="nameRules"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                     <v-flex xs12 sm6>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right">Email ID:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             placeholder="fill your email"
                             :rules="emailRules"
                             v-model="addSystemAdmin.email"
                             type="text"
                             name="email"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs12 sm6>
                       <v-layout>
                         <v-flex xs4 sm4 class="pt-4 subheading">
                           <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>
                           <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-menu
                             ref="menu"
                             :close-on-content-click="false"
                             v-model="menu"
                             :nudge-right="40"
                             lazy
                             transition="scale-transition"
                             offset-y
                             full-width
                             min-width="290px"
                           >
                             <v-text-field
                               slot="activator"
                               :rules="dateRules"
                               v-model="addSystemAdmin.date"
                               placeholder="Select date"
                             ></v-text-field>
                             <v-date-picker
                               ref="picker"
                               v-model="addSystemAdmin.date"
                               :max="new Date().toISOString().substr(0, 10)"
                               min="1950-01-01"
                               @input="menu = false"
                             ></v-date-picker>
                           </v-menu>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                     <v-flex xs12 sm6>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right">Gender:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-select
                             v-model="addSystemAdmin.gender"
                             :items="gender"
                             label="Select your City Name"
                             :rules="cityRules"
                             required
                           ></v-select>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs12 sm6>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>
                           <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             v-model="addSystemAdmin.mobileNo"
                             placeholder="fill your Mobile No."
                             name="mobileNo"
                             type="number"
                             :rules="mobileNoRules"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                     <v-flex xs12 sm6>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right hidden-xs-only hidden-sm-only">Religion:</label>
                           <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Religion:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             v-model="addSystemAdmin.religion"
                             :rules="religion"
                             placeholder="fill your Religion"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs12 sm6>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right">Join Date:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-menu
                             ref="menu1"
                             :close-on-content-click="false"
                             v-model="menu1"
                             :nudge-right="40"
                             lazy
                             transition="scale-transition"
                             offset-y
                             full-width
                             min-width="290px"
                           >
                             <v-text-field
                               slot="activator"
                               :rules="joinDateRules"
                               v-model="addSystemAdmin.joinDate"
                               placeholder="Select date"
                             ></v-text-field>
                             <v-date-picker
                               ref="picker"
                               v-model="addSystemAdmin.joinDate"
                               :max="new Date().toISOString().substr(0, 10)"
                               min="1950-01-01"
                               @input="menu1 = false"
                             ></v-date-picker>
                           </v-menu>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                     <v-flex xs12 sm6>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
                           <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             label="Select Image"
                             @click="pickFile"
                             v-model="imageName"
                             append-icon="attach_file"
                           ></v-text-field>
                           <input
                             type="file"
                             style="display:none"
                             ref="image"
                             accept="image/*"
                             @change="onFilePicked"
                           />
                         </v-flex>
                       </v-layout>
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs12 sm6>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right">Username:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             v-model="addSystemAdmin.username"
                             placeholder="fill your Username"
                             name="state"
                             :rules="userNameRules"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                     <v-flex xs12 sm6>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right">Password:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             v-model="addSystemAdmin.Password"
                             placeholder="fill your Password"
                             :rules="password"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                   </v-layout>
                   <v-layout class="hidden-xs-only hidden-sm-only">
                     <v-flex xs12 sm6>
                       <v-layout>
                         <v-flex xs4 md4 class="pt-4 subheading">
                           <label class="right">Address:</label>
                         </v-flex>
                         <v-flex xs8 md8 class="ml-3">
                           <v-text-field
                             name="input-4-3"
                             v-model="addSystemAdmin.address"
                             :rules="address"
                             placeholder="fill Your Address"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                   </v-layout>
                   <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only">
                     <v-flex xs12 sm12>
                       <v-layout>
                         <v-flex xs12 sm12 class="pt-4 subheading text-xs-center">
                           <label class>Addres:</label>
                         </v-flex>
                       </v-layout>
                       <v-layout>
                         <v-flex xs12 sm12>
                           <v-textarea
                             name="input-4-3"
                             v-model="addSystemAdmin.address"
                             :rules="address"
                             placeholder="fill Your present Address"
                             required
                           ></v-textarea>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                     <!-- <v-flex xs12 sm12>
                       <v-layout>
                         <v-flex xs12 sm12 class="pt-4 pr-4 subheading text-xs-center addressForm">
                           <label>Permanent Address:</label>
                         </v-flex>
                       </v-layout>
                       <v-layout>
                         <v-flex xs12 sm12>
                           <v-textarea
                             name="input-4-3"
                             v-model="addSystemAdmin.permanentAddress"
                             :rules="permanentAddress"
                             placeholder="fill Your Permanent Address"
                             required
                           ></v-textarea>
                         </v-flex>
                       </v-layout>
                     </v-flex> -->
                   </v-layout>
                   <v-layout class="mx-2">
                     <v-flex xs12 sm12 offset-sm1>
                       <v-layout>
                         <v-flex xs6>
                           <v-btn @click="clear" round dark>clear</v-btn>
                         </v-flex>
                         <v-flex xs6>
                           <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn>
                         </v-flex>
                       </v-layout>
                     </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 moment from "moment";
 export default {
   data: () => ({
     component: "report-generate",
     snackbar: false,
     y: "top",
     x: "right",
     mode: "",
     timeout: 3000,
     text: "",
     showLoader: false,
     loading: false,
     date: null,
     search: "",
     menu: false,
     menu1: false,
     menu2: false,
     menu3: false,
     dialog: false,
     dialog1: false,
     valid: true,
     isActive: true,
     newActive: false,
     pagination: {
       rowsPerPage: 15
     },
     imageData: {},
     imageName: "",
     imageUrl: "",
     imageFile: "",
     nameRules: [v => !!v || " Full Name is required"],
     dateRules: [v => !!v || " DOB is required"],
     cityRules: [v => !!v || " City Name is required"],
     password: [v => !!v || " Password is required"],
     religion: [v => !!v || "Religion Name is required"],
     permanentAddress: [v => !!v || " Permanent Address is required"],
     address: [v => !!v || "Address  is required"],
     mobileNoRules: [v => !!v || "Mobile Number is required"],
     userNameRules: [v => !!v || "Username Name is required"],
     joinDateRules: [v => !!v || " Join Date is required"],
     errorMessages: "",
     emailRules: [
       v => !!v || "E-mail is required",
       v =>
         /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
         "E-mail must be valid"
     ],
     countries: [],
     headers: [
       {
         text: "No",
         align: "center",
         sortable: false,
         value: "No"
       },
       {
         text: "Profile Pic",
         value: "profilePicUrl",
         sortable: false,
         align: "center"
       },
       { text: "Name", value: "name", sortable: false, align: "center" },
       { text: "Email", value: "email", sortable: false, align: "center" },
       { text: "Role", value: "role", sortable: false, align: "center" },
       {
         text: "Status",
         value: "status",
         sortable: false,
         align: "center"
       },
       { text: "Action", value: "", sortable: false, align: "center" }
     ],
     gender:['Male','Female'],
     desserts: [],
     editedIndex: -1,
     upload: "",
     editedItem: {},
     addSystemAdmin: {},
   }),
   watch: {
     menu(val) {
       val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
     },
     menu1(val) {
       val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
     }
   },
   methods: {
     save(date) {
       this.$refs.menu.save(date);
     },
     save(date) {
       this.$refs.menu1.save(date);
     },
     pickFile() {
       this.$refs.image.click();
     },
     onFilePicked(e) {
-      // console.log(e)
       const files = e.target.files;
       this.upload = e.target.files[0];
-      console.log("imageData-upload========>", this.upload);
       if (files[0] !== undefined) {
         this.imageName = files[0].name;
         if (this.imageName.lastIndexOf(".") <= 0) {
           return;
         }
         const fr = new FileReader();
         fr.readAsDataURL(files[0]);
         fr.addEventListener("load", () => {
           this.imageUrl = fr.result;
           this.imageFile = files[0]; // this is an image file that can be sent to server...
-          // this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
-          // console.log("upload=======>", this.imageData.imageUrl);
-          console.log("imageFile", this.imageUrl);
         });
       } else {
         this.imageName = "";
         this.imageFile = "";
         this.imageUrl = "";
       }
     },
     dates: function(date) {
       return moment(date).format("MMMM DD, YYYY");
     },
     getSystemAdminList() {
       this.showLoader = true;
       var token = this.$store.state.token;
       http()
         .get("/getTeachersList", {
           headers: { Authorization: "Bearer " + token }
         })
         .then(response => {
           this.desserts = response.data.data;
           this.showLoader = false;
-          // console.log("getTeacherList=====>",this.desserts)
         })
         .catch(error => {
           this.showLoader = false;
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
           }
         });
     },
     editItem(item) {
       this.editedIndex = this.desserts.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.editedItem.dob =
         this.editedItem.dob != undefined
           ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10))
           : (this.editedItem.dob = "");
       this.editedItem.joinDate =
         this.editedItem.joinDate != undefined
           ? (this.editedItem.joinDate = this.editedItem.joinDate.substring(
               0,
               10
             ))
           : (this.editedItem.joinDate = "");
       this.dialog = true;
     },
     profile(item) {
       this.editedIndex = this.desserts.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.dialog1 = true;
     },
     deleteItem(item) {
       let deleteTeachers = {
         teacherId: item._id
       };
-      //  console.log("deleteUers",deleteTeachers)
       http()
         .delete(
           "/deleteTeacher",
           confirm("Are you sure you want to delete this?") && {
             params: deleteTeachers
           }
         )
         .then(response => {
-          // console.log("deleteUers",deleteTeachers)
           if ((this.snackbar = true)) {
             this.text = "Successfully delete Existing Teacher";
           }
           this.getSystemAdminList();
         })
         .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()) {
         let addTeacher = {
         //   name: this.addTeachers.name,
         //   email: this.addTeachers.email,
         //   role: this.addTeachers.role,
         //   dob: this.addTeachers.date,
         //   city: this.addTeachers.city,
         //   pincode: this.addTeachers.pincode,
         //   country: this.addTeachers.country,
         //   permanentAddress: this.addTeachers.permanentAddress,
         //   presentAddress: this.addTeachers.presentAddress,
         //   mobileNo: this.addTeachers.mobileNo,
         //   state: this.addTeachers.state,
         //   joinDate: this.addTeachers.joinDate
         };
         if (this.imageUrl) {
           var str = this.imageUrl;
           const [baseUrl, imageUrl] = str.split(/,/);
           addTeacher.upload = imageUrl;
         }
         this.loading = true;
         http()
           .post("/createTeacher", addTeacher)
           .then(response => {
             this.imageUrl = "";
             this.getTeacherList();
             this.snackbar = true;
             this.text = "New Teacher added successfully";
             this.clear();
             this.loading = false;
           })
           .catch(error => {
             // console.log(error);
             if ((this.snackbar = true)) {
               this.text = error.response.data.message;
             }
             this.loading = false;
           });
       }
     },
     clear() {
       this.$refs.form.reset();
       this.imageUrl = "";
     },
     save() {
       this.loading = true;
       let editTeacher = {};
       if (this.imageUrl) {
         var str = this.imageUrl;
         const [baseUrl, imageUrl] = str.split(/,/);
         editTeacher.upload = imageUrl;
       }
       http()
         .put("/updateTeacher", editTeacher)
         .then(response => {
           console.log("editTeacher", editTeacher);
           this.snackbar = true;
           this.text = "Successfully Edit Existing Teacher";
           this.loading = false;
           this.getTeacherList();
           this.close();
         })
         .catch(error => {
           console.log(error);
           this.loading = false;
         });
     }
   },
   mounted() {
     // this.getSystemAdminList();
   },
   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>
 .active {
   background-color: gray;
   color: white !important;
 }
 .activebtn {
   color: black !important;
 }
 </style>

src/pages/Report/progressCardReport.vue

Diff comments View file @29ac0db

1	<template>	1	<template>
2	<v-app id="pages-dasboard">	2	<v-app id="pages-dasboard">
3	<!-- **** Progress Card Report Table**** -->	3	<!-- **** Progress Card Report Table**** -->
4		4
5	<v-card flat>	5	<v-card flat>
6	<v-card-actions>	6	<v-card-actions>
7	<v-layout>	7	<v-layout>
8	<h4 class="ml-2">Progress Card Report</h4>	8	<h4 class="ml-2">Progress Card Report</h4>
9	</v-layout>	9	</v-layout>
10	</v-card-actions>	10	</v-card-actions>
11	</v-card>	11	</v-card>
12	<v-card flat>	12	<v-card flat>
13	<v-form ref="form" v-model="valid" lazy-validation>	13	<v-form ref="form" v-model="valid" lazy-validation>
14	<v-flex xs12 sm12 lg12>	14	<v-flex xs12 sm12 lg12>
15	<v-layout wrap>	15	<v-layout wrap>
16	<v-flex xs12 sm12 lg3>	16	<v-flex xs12 sm12 lg3>
17	<v-layout>	17	<v-layout>
18	<v-flex xs3 sm6 lg2 class="subheading mt-4">	18	<v-flex xs3 sm6 lg2 class="subheading mt-4">
19	<label class="right">Class:</label>	19	<label class="right">Class:</label>
20	</v-flex>	20	</v-flex>
21	<v-flex xs9 sm6 lg8 class="ml-2">	21	<v-flex xs9 sm6 lg8 class="ml-2">
22	<v-select	22	<v-select
23	v-model="getReport.classId"	23	v-model="getReport.classId"
24	label="Select your class"	24	label="Select your class"
25	type="text"	25	type="text"
26	:items="classList"	26	:items="classList"
27	item-text="classNum"	27	item-text="classNum"
28	item-value="_id"	28	item-value="_id"
29	:rules="classRules"	29	:rules="classRules"
30	@change="getSections(getReport.classId)"	30	@change="getSections(getReport.classId)"
31	required	31	required
32	></v-select>	32	></v-select>
33	</v-flex>	33	</v-flex>
34	</v-layout>	34	</v-layout>
35	</v-flex>	35	</v-flex>
36	<v-flex xs12 sm12 lg3>	36	<v-flex xs12 sm12 lg3>
37	<v-layout>	37	<v-layout>
38	<v-flex xs3 sm6 lg2 class="subheading mt-4">	38	<v-flex xs3 sm6 lg2 class="subheading mt-4">
39	<label class="right">Section:</label>	39	<label class="right">Section:</label>
40	</v-flex>	40	</v-flex>
41	<v-flex xs9 sm6 lg8 class="ml-2">	41	<v-flex xs9 sm6 lg8 class="ml-2">
42	<v-select	42	<v-select
43	:items="addSection"	43	:items="addSection"
44	label="Select your Section"	44	label="Select your Section"
45	v-model="getReport.sectionId"	45	v-model="getReport.sectionId"
46	item-text="name"	46	item-text="name"
47	item-value="_id"	47	item-value="_id"
48	name="Select Section"	48	name="Select Section"
49	@change="getStudents"	49	@change="getStudents"
50	:rules="sectionRules"	50	:rules="sectionRules"
51	required	51	required
52	></v-select>	52	></v-select>
53	</v-flex>	53	</v-flex>
54	</v-layout>	54	</v-layout>
55	</v-flex>	55	</v-flex>
56	<v-flex xs12 sm12 lg3>	56	<v-flex xs12 sm12 lg3>
57	<v-layout>	57	<v-layout>
58	<v-flex xs3 sm6 lg2 class="subheading mt-4">	58	<v-flex xs3 sm6 lg2 class="subheading mt-4">
59	<label class="right">Student:</label>	59	<label class="right">Student:</label>
60	</v-flex>	60	</v-flex>
61	<v-flex xs9 sm6 lg8 class="ml-2">	61	<v-flex xs9 sm6 lg8 class="ml-2">
62	<v-select	62	<v-select
63	:items="getStudentsList"	63	:items="getStudentsList"
64	label="Select your student"	64	label="Select your student"
65	v-model="getReport.studentId"	65	v-model="getReport.studentId"
66	item-text="name"	66	item-text="name"
67	item-value="_id"	67	item-value="_id"
68	:rules="studentRules"	68	:rules="studentRules"
69	required	69	required
70	></v-select>	70	></v-select>
71	</v-flex>	71	</v-flex>
72	</v-layout>	72	</v-layout>
73	</v-flex>	73	</v-flex>
74	<v-flex xs12 sm12 lg3>	74	<v-flex xs12 sm12 lg3>
75	<v-btn	75	<v-btn
76	@click="getMarkReportList"	76	@click="getMarkReportList"
77	round	77	round
78	dark	78	dark
79	:loading="loading"	79	:loading="loading"
80	class="right mt-3"	80	class="right mt-3"
81	>Get Report</v-btn>	81	>Get Report</v-btn>
82	</v-flex>	82	</v-flex>
83	</v-layout>	83	</v-layout>
84	</v-flex>	84	</v-flex>
85	</v-form>	85	</v-form>
86	</v-card>	86	</v-card>
87	<!-- **** PROFILE MARK **** -->	87	<!-- **** PROFILE MARK **** -->
88		88
89	<v-container fluid grid-list-md v-show="showReport">	89	<v-container fluid grid-list-md v-show="showReport">
90	<v-layout>	90	<v-layout>
91	<v-flex xs12 sm12>	91	<v-flex xs12 sm12>
92	<v-btn class="grey" dark @click="print()">	92	<v-btn class="grey" dark @click="print()">
93	Print	93	Print
94	<v-icon right dark>print</v-icon>	94	<v-icon right dark>print</v-icon>
95	</v-btn>	95	</v-btn>
96	</v-flex>	96	</v-flex>
97	</v-layout>	97	</v-layout>
98	<v-flex xs12 sm12 id="printMe">	98	<v-flex xs12 sm12 id="printMe">
99	<v-layout wrap>	99	<v-layout wrap>
100	<v-flex xs12 sm12 md3>	100	<v-flex xs12 sm12 md3>
101	<v-card class="fixcolors white--text" flat>	101	<v-card class="fixcolors white--text" flat>
102	<v-card-actions class="pa-0">	102	<v-card-actions class="pa-0">
103	<v-spacer></v-spacer>	103	<v-spacer></v-spacer>
104	<v-card-title class="pa-2">	104	<v-card-title class="pa-2">
105	<h3>Profile</h3>	105	<h3>Profile</h3>
106	</v-card-title>	106	</v-card-title>
107	<v-spacer></v-spacer>	107	<v-spacer></v-spacer>
108	</v-card-actions>	108	</v-card-actions>
109	</v-card>	109	</v-card>
110	<v-card flat>	110	<v-card flat>
111	<v-layout	111	<v-layout
112	wrap	112	wrap
113	v-for="(value, id, index) in filterData"	113	v-for="(value, id, index) in filterData"
114	v-if="index == 0"	114	v-if="index == 0"
115	:key="index"	115	:key="index"
116	>	116	>
117	<v-flex xs12 style="margin:16px;">	117	<v-flex xs12 style="margin:16px;">
118	<v-layout>	118	<v-layout>
119	<v-flex xs12>	119	<v-flex xs12>
120	<v-avatar	120	<v-avatar
121	size="100px"	121	size="100px"
122	class="mx-auto"	122	class="mx-auto"
123	style="margin: auto;display:block;margin-bottom:10px !important"	123	style="margin: auto;display:block;margin-bottom:10px !important"
124	>	124	>
125	<img src="/static/icon/user.png" v-if="!value[0].studentId.profilePicUrl" />	125	<img src="/static/icon/user.png" v-if="!value[0].studentId.profilePicUrl" />
126	<img	126	<img
127	:src="value[0].studentId.profilePicUrl"	127	:src="value[0].studentId.profilePicUrl"
128	v-else-if="value[0].studentId.profilePicUrl"	128	v-else-if="value[0].studentId.profilePicUrl"
129	/>	129	/>
130	</v-avatar>	130	</v-avatar>
131	</v-flex>	131	</v-flex>
132	</v-layout>	132	</v-layout>
133	<v-layout>	133	<v-layout>
134	<v-flex xs12 style="text-align:center;">	134	<v-flex xs12 style="text-align:center;">
135	<h3>	135	<h3>
136	<b>{{ value[0].studentId.name }}</b>	136	<b>{{ value[0].studentId.name }}</b>
137	</h3>	137	</h3>
138	<p class="grey--text">Student</p>	138	<p class="grey--text">Student</p>
139	</v-flex>	139	</v-flex>
140	</v-layout>	140	</v-layout>
141	<v-layout	141	<v-layout
142	style="border: 1px solid lightgrey;padding: 4px;border-top-right-radius: 4px;	142	style="border: 1px solid lightgrey;padding: 4px;border-top-right-radius: 4px;
143	border-top-left-radius: 4px;"	143	border-top-left-radius: 4px;"
144	>	144	>
145	<v-flex xs6 sm3 class="py-1">	145	<v-flex xs6 sm3 class="py-1">
146	<h4>	146	<h4>
147	<b>RollNo</b>	147	<b>RollNo</b>
148	</h4>	148	</h4>
149	</v-flex>	149	</v-flex>
150	<v-flex sm9 xs7 class="py-1">	150	<v-flex sm9 xs6 class="py-1">
151	<h4>: {{ value[0].studentId.rollNo }}</h4>	151	<h4>: {{ value[0].studentId.rollNo }}</h4>
152	</v-flex>	152	</v-flex>
153	</v-layout>	153	</v-layout>
154	<v-layout style="border: 1px solid lightgrey;padding: 4px;">	154	<v-layout style="border: 1px solid lightgrey;padding: 4px;">
155	<v-flex xs6 sm3 class="py-1">	155	<v-flex xs6 sm3 class="py-1">
156	<h4>	156	<h4>
157	<b>Class</b>	157	<b>Class</b>
158	</h4>	158	</h4>
159	</v-flex>	159	</v-flex>
160	<v-flex sm9 xs8 class="py-1">	160	<v-flex sm9 xs6 class="py-1">
161	<h4>: {{value[0].classId.classNum }}</h4>	161	<h4>: {{value[0].classId.classNum }}</h4>
162	</v-flex>	162	</v-flex>
163	</v-layout>	163	</v-layout>
164	<v-layout	164	<v-layout
165	style="border: 1px solid lightgrey;padding: 4px;border-bottom-right-radius: 4px;	165	style="border: 1px solid lightgrey;padding: 4px;border-bottom-right-radius: 4px;
166	border-bottom-left-radius: 4px;"	166	border-bottom-left-radius: 4px;"
167	>	167	>
168	<v-flex xs6 sm3 class>	168	<v-flex xs6 sm3 class>
169	<h4>	169	<h4>
170	<b>Section</b>	170	<b>Section</b>
171	</h4>	171	</h4>
172	</v-flex>	172	</v-flex>
173	<v-flex sm9 xs6 class>	173	<v-flex sm9 xs6 class>
174	<h4>: {{ value[0].sectionId.name}}</h4>	174	<h4>: {{ value[0].sectionId.name}}</h4>
175	</v-flex>	175	</v-flex>
176	</v-layout>	176	</v-layout>
177	</v-flex>	177	</v-flex>
178	</v-layout>	178	</v-layout>
179	</v-card>	179	</v-card>
180	</v-flex>	180	</v-flex>
181		181
182	<!-- **** TABLE DATA MARK **** -->	182	<!-- **** TABLE DATA MARK **** -->
183		183
184	<v-flex xs12 sm12 md9>	184	<v-flex xs12 sm12 md9>
185	<v-card class="fixcolors white--text" flat>	185	<v-card class="fixcolors white--text" flat>
186	<v-card-actions class="pa-0">	186	<v-card-actions class="pa-0">
187	<v-spacer></v-spacer>	187	<v-spacer></v-spacer>
188	<v-card-title class="pa-2">	188	<v-card-title class="pa-2">
189	<h3>Mark</h3>	189	<h3>Mark</h3>
190	</v-card-title>	190	</v-card-title>
191	<v-spacer></v-spacer>	191	<v-spacer></v-spacer>
192	</v-card-actions>	192	</v-card-actions>
193	</v-card>	193	</v-card>
194	<v-card	194	<v-card
195	v-for="(value, id, index) in filterData"	195	v-for="(value, id, index) in filterData"
196	:key="index"	196	:key="index"
197	flat	197	flat
198	style="border: 1px solid lightgrey;margin-bottom:14px;"	198	style="border: 1px solid lightgrey;margin-bottom:14px;"
199	>	199	>
200	<v-card-title class="subheading">{{value[0].examId.examName}}</v-card-title>	200	<v-card-title class="subheading">{{value[0].examId.examName}}</v-card-title>
201	<table	201	<table
202	class="mb-5 tableRsponsive feeTypeTable"	202	class="mb-5 tableRsponsive feeTypeTable"
203	style="border: 1px solid lightgrey;	203	style="border: 1px solid lightgrey;
204	border-collapse: collapse;!important	204	border-collapse: collapse;!important
205	table-layout: auto !important;	205	table-layout: auto !important;
206	width: 100% !important;"	206	width: 100% !important;"
207	>	207	>
208	<thead style="border: 1px solid lightgrey !important;">	208	<thead style="border: 1px solid lightgrey !important;">
209	<tr	209	<tr
210	class="info white--text"	210	class="info white--text"
211	style="border: 1px solid lightgrey !important;padding:4px;"	211	style="border: 1px solid lightgrey !important;padding:4px;"
212	>	212	>
213	<td	213	<td
214	rowspan="2"	214	rowspan="2"
215	style="border: 1px solid lightgrey !important;padding: 10px;"	215	style="border: 1px solid lightgrey !important;padding: 10px;"
216	>Subject</td>	216	>Subject</td>
217	<td	217	<td
218	colspan="2"	218	colspan="2"
219	v-for="exam in value[index].studentsMarks"	219	v-for="exam in value[index].studentsMarks"
220	style="border: 1px solid lightgrey !important;padding: 10px;"	220	style="border: 1px solid lightgrey !important;padding: 10px;"
221	>{{exam.markDistributionId.distributionType}}</td>	221	>{{exam.markDistributionId.distributionType}}</td>
222	<td style="border: 1px solid lightgrey !important;padding: 10px;">Total</td>	222	<td style="border: 1px solid lightgrey !important;padding: 10px;">Total</td>
223	</tr>	223	</tr>
224	<tr	224	<tr
225	v-for="(subject, ind) in value"	225	v-for="(subject, ind) in value"
226	v-if="ind == 0"	226	v-if="ind == 0"
227	style="border: 1px solid lightgrey !important;"	227	style="border: 1px solid lightgrey !important;"
228	>	228	>
229	<template v-for="(exam, i) in subject.studentsMarks">	229	<template v-for="(exam, i) in subject.studentsMarks">
230	<td	230	<td
231	class="bg-sky white--text"	231	class="bg-sky white--text"
232	style="border: 1px solid lightgrey !important;padding: 10px;"	232	style="border: 1px solid lightgrey !important;padding: 10px;"
233	>Mark</td>	233	>Mark</td>
234	<td	234	<td
235	class="bg-sky-light white--text"	235	class="bg-sky-light white--text"
236	style="border: 1px solid lightgrey !important;padding: 10px;"	236	style="border: 1px solid lightgrey !important;padding: 10px;"
237	>Highest Mark</td>	237	>Highest Mark</td>
238	</template>	238	</template>
239	<td	239	<td
240	class="bg-sky white--text"	240	class="bg-sky white--text"
241	style="border: 1px solid lightgrey !important;padding: 10px;"	241	style="border: 1px solid lightgrey !important;padding: 10px;"
242	>Mark</td>	242	>Mark</td>
243	</tr>	243	</tr>
244	</thead>	244	</thead>
245	<tbody style="border: 1px solid lightgrey !important;">	245	<tbody style="border: 1px solid lightgrey !important;">
246	<tr v-for="subject in value" style="border: 1px solid lightgrey !important;">	246	<tr v-for="subject in value" style="border: 1px solid lightgrey !important;">
247	<td	247	<td
248	style="border: 1px solid lightgrey !important;padding: 10px;"	248	style="border: 1px solid lightgrey !important;padding: 10px;"
249	>{{subject.subjectName}}</td>	249	>{{subject.subjectName}}</td>
250	<template v-for="(exam, i) in subject.studentsMarks">	250	<template v-for="(exam, i) in subject.studentsMarks">
251	<td	251	<td
252	style="border: 1px solid lightgrey !important;padding: 10px;"	252	style="border: 1px solid lightgrey !important;padding: 10px;"
253	>{{exam.marksScored}}</td>	253	>{{exam.marksScored}}</td>
254	<td	254	<td
255	style="border: 1px solid lightgrey !important;padding: 10px;"	255	style="border: 1px solid lightgrey !important;padding: 10px;"
256	>{{exam.markDistributionId.markValue}}</td>	256	>{{exam.markDistributionId.markValue}}</td>
257	</template>	257	</template>
258	<td	258	<td
259	style="border: 1px solid lightgrey !important;padding: 10px;"	259	style="border: 1px solid lightgrey !important;padding: 10px;"
260	>{{subject.totalMarks}}</td>	260	>{{subject.totalMarks}}</td>
261	</tr>	261	</tr>
262	</tbody>	262	</tbody>
263	</table>	263	</table>
264	</v-card>	264	</v-card>
265	</v-flex>	265	</v-flex>
266	</v-layout>	266	</v-layout>
267	</v-flex>	267	</v-flex>
268	</v-container>	268	</v-container>
269	<div class="loader" v-if="showLoader">	269	<div class="loader" v-if="showLoader">
270	<v-progress-circular indeterminate color="white"></v-progress-circular>	270	<v-progress-circular indeterminate color="white"></v-progress-circular>
271	</div>	271	</div>
272	</v-app>	272	</v-app>
273	</template>	273	</template>
274		274
275	<script>	275	<script>
276	import http from "@/Services/http.js";	276	import http from "@/Services/http.js";
277	import moment from "moment";	277	import moment from "moment";
278	import _ from "underscore";	278	import _ from "underscore";
279		279
280	export default {	280	export default {
281	data: () => ({	281	data: () => ({
282	showLoader: false,	282	showLoader: false,
283	markData: [],	283	markData: [],
284	token: "",	284	token: "",
285	markDistributions: [],	285	markDistributions: [],
286	markParticularDistributionData: [],	286	markParticularDistributionData: [],
287	loading: false,	287	loading: false,
288	valid: true,	288	valid: true,
289	loading: false,	289	loading: false,
290	showReport: false,	290	showReport: false,
291	addSection: [],	291	addSection: [],
292	filterData: [],	292	filterData: [],
293	getStudentsList: [],	293	getStudentsList: [],
294	classRules: [v => !!v \|\| "Class is required"],	294	classRules: [v => !!v \|\| "Class is required"],
295	sectionRules: [v => !!v \|\| "Class is required"],	295	sectionRules: [v => !!v \|\| "Class is required"],
296	studentRules: [v => !!v \|\| "Student is required"],	296	studentRules: [v => !!v \|\| "Student is required"],
297	getReport: {},	297	getReport: {},
298	classList: [],	298	classList: [],
299	output: null	299	output: null
300	}),	300	}),
301	mounted() {	301	mounted() {
302	this.token = this.$store.state.token;	302	this.token = this.$store.state.token;
303	this.getClass();	303	this.getClass();
304	},	304	},
305	methods: {	305	methods: {
306	clear() {	306	clear() {
307	this.$refs.form.reset();	307	this.$refs.form.reset();
308	},	308	},
309	getClass() {	309	getClass() {
310	this.showLoader = true;	310	this.showLoader = true;
311	http()	311	http()
312	.get("/getClassesList", {	312	.get("/getClassesList", {
313	headers: { Authorization: "Bearer " + this.token }	313	headers: { Authorization: "Bearer " + this.token }
314	})	314	})
315	.then(response => {	315	.then(response => {
316	this.classList = response.data.data;	316	this.classList = response.data.data;
317	this.showLoader = false;	317	this.showLoader = false;
318	})	318	})
319	.catch(err => {	319	.catch(err => {
320	this.showLoader = false;	320	this.showLoader = false;
321	// console.log("err====>", err);	321	// console.log("err====>", err);
322	});	322	});
323	},	323	},
324	getSections(_id) {	324	getSections(_id) {
325	http()	325	http()
326	.get(	326	.get(
327	"/getSectionsList",	327	"/getSectionsList",
328	{ params: { classId: _id } },	328	{ params: { classId: _id } },
329	{	329	{
330	headers: { Authorization: "Bearer " + this.token }	330	headers: { Authorization: "Bearer " + this.token }
331	}	331	}
332	)	332	)
333	.then(response => {	333	.then(response => {
334	this.addSection = response.data.data;	334	this.addSection = response.data.data;
335	})	335	})
336	.catch(err => {	336	.catch(err => {
337	// console.log("err====>", err);	337	// console.log("err====>", err);
338	});	338	});
339	},	339	},
340	getStudents() {	340	getStudents() {
341	this.showLoader = true;	341	this.showLoader = true;
342	http()	342	http()
343	.get("/getStudentWithClass", {	343	.get("/getStudentWithClass", {
344	params: {	344	params: {
345	classId: this.getReport.classId,	345	classId: this.getReport.classId,
346	sectionId: this.getReport.sectionId	346	sectionId: this.getReport.sectionId
347	}	347	}
348	})	348	})
349	.then(response => {	349	.then(response => {
350	this.getStudentsList = response.data.data;	350	this.getStudentsList = response.data.data;
351	this.showLoader = false;	351	this.showLoader = false;
352	console.log("getSectionsList=====>", response.data.data);	352	console.log("getSectionsList=====>", response.data.data);
353	})	353	})
354	.catch(error => {	354	.catch(error => {
355	console.log("err====>", error);	355	console.log("err====>", error);
356	this.showLoader = false;	356	this.showLoader = false;
357	});	357	});
358	},	358	},
359	getMarkReportList() {	359	getMarkReportList() {
360	this.showLoader = true;	360	this.showLoader = true;
361	this.showReport = true;	361	this.showReport = true;
362	http()	362	http()
363	.get("/getParticularMark", {	363	.get("/getParticularMark", {
364	params: { studentId: this.getReport.studentId },	364	params: { studentId: this.getReport.studentId },
365	headers: { Authorization: "Bearer " + this.token }	365	headers: { Authorization: "Bearer " + this.token }
366	})	366	})
367	.then(response => {	367	.then(response => {
368	let newData = response.data.data;	368	let newData = response.data.data;
369	for (var i = 0; i < newData.length; i++) {	369	for (var i = 0; i < newData.length; i++) {
370	newData[i].examination = newData[i].examId._id;	370	newData[i].examination = newData[i].examId._id;
371	}	371	}
372	this.filterData = _.groupBy(newData, ["examination"]);	372	this.filterData = _.groupBy(newData, ["examination"]);
373	for (let data in this.filterData) {	373	for (let data in this.filterData) {
374	for (let item in this.filterData[data]) {	374	for (let item in this.filterData[data]) {
375	var totalMarks = 0;	375	var totalMarks = 0;
376	for (	376	for (
377	let i = 0;	377	let i = 0;
378	i < this.filterData[data][item].studentsMarks.length;	378	i < this.filterData[data][item].studentsMarks.length;
379	i++	379	i++
380	) {	380	) {
381	totalMarks += this.filterData[data][item].studentsMarks[i]	381	totalMarks += this.filterData[data][item].studentsMarks[i]
382	.marksScored;	382	.marksScored;
383	}	383	}
384	this.filterData[data][item].totalMarks = totalMarks;	384	this.filterData[data][item].totalMarks = totalMarks;
385	}	385	}
386	}	386	}
387	this.showLoader = false;	387	this.showLoader = false;
388	})	388	})
389	.catch(error => {	389	.catch(error => {
390	// console.log("err====>", err);	390	// console.log("err====>", err);
391	this.showLoader = false;	391	this.showLoader = false;
392	this.snackbar = true;	392	this.snackbar = true;
393	this.text = error.response.data.message;	393	this.text = error.response.data.message;
394	if (error.response.status === 401) {	394	if (error.response.status === 401) {
395	this.$router.replace({ path: "/" });	395	this.$router.replace({ path: "/" });
396	this.$store.dispatch("setToken", null);	396	this.$store.dispatch("setToken", null);
397	this.$store.dispatch("Id", null);	397	this.$store.dispatch("Id", null);
398	}	398	}
399	});	399	});
400	},	400	},
401	print() {	401	print() {
402	// Pass the element id here	402	// Pass the element id here
403	this.$htmlToPaper("printMe");	403	this.$htmlToPaper("printMe");
404	}	404	}
405	}	405	}
406	};	406	};
407	</script>	407	</script>
408		408
409	<style scoped>	409	<style scoped>
410	table {	410	table {
411	border-collapse: collapse;	411	border-collapse: collapse;
412	border: 1px solid #e2e7eb;	412	border: 1px solid #e2e7eb;
413	}	413	}
414		414
415	th,	415	th,
416	td {	416	td {
417	border: 1px solid #e2e7eb;	417	border: 1px solid #e2e7eb;
418	padding: 10px;	418	padding: 10px;
419	text-align: center;	419	text-align: center;
420	}	420	}
421	table.feeTypeTable {	421	table.feeTypeTable {
422	table-layout: auto !important;	422	table-layout: auto !important;
423	width: 100% !important;	423	width: 100% !important;
424	}	424	}
425	.bg-sky {	425	.bg-sky {
426	background-color: #98b2cc !important;	426	background-color: #98b2cc !important;
427	}	427	}
428	.bg-sky-light {	428	.bg-sky-light {
429	background-color: #89a0b8;	429	background-color: #89a0b8;
430	}	430	}
431	.bg-purple {	431	.bg-purple {
432	background-color: #9583ac;	432	background-color: #9583ac;
433	}	433	}
434	.bg-skyDark {	434	.bg-skyDark {
435	background-color: #956785;	435	background-color: #956785;
436	}	436	}
437	@media screen and (max-width: 380px) {	437	@media screen and (max-width: 380px) {
438	.tableRsponsive {	438	.tableRsponsive {
439	display: block;	439	display: block;
440	position: relative;	440	position: relative;
441	overflow: scroll;	441	overflow: scroll;
442	}	442	}
443	}	443	}
444	</style> s	444	</style> s

src/pages/Section/section.vue

Diff comments View file @29ac0db

 <template>
   <v-app id="pages-dasboard">
     <v-tabs grow slider-color="gray">
       <v-tab
         ripple
         @click="activeTab('existing')"
         v-bind:class="{ active: isActive }"
         id="tab"
         class="subheading"
       >Existing Section</v-tab>
       <v-tab
         ripple
         @click="activeTab('new')"
         v-bind:class="{ active: newActive }"
         id="tab1"
         User
         class="subheading"
       >Add New Section</v-tab>
       <!-- ****** EDIT  SECTION  ****** -->
       <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-toolbar color="grey lighten-2">
             <v-spacer></v-spacer>
             <v-toolbar-title>
               <h3>Edit Section</h3>
             </v-toolbar-title>
             <v-spacer></v-spacer>
           </v-toolbar>
           <v-card>
             <v-container>
               <v-layout wrap justify-center>
                 <v-flex xs12 sm9>
                   <v-form>
                     <v-layout>
                       <v-flex xs5 sm4 class="pt-4 subheading">
                         <label class="pl-3">Class Name:</label>
                         <!-- <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label> -->
                       </v-flex>
                       <v-flex xs7 sm8>
                         <v-autocomplete
                           :items="addclass"
                           :label="editedItem.classData.classNum"
                           v-model="editItem.classId"
                           item-text="classNum"
                           item-value="_id"
                         ></v-autocomplete>
                       </v-flex>
                     </v-layout>
                     <v-layout>
                       <v-flex xs5 sm4 class="pt-4 subheading">
                         <label>Section Name:</label>
                       </v-flex>
                       <v-flex xs7 sm8>
                         <v-autocomplete
                           v-model="editedItem.name"
                           placeholder="fill your Section Name"
                           :items="SectionName"
                         ></v-autocomplete>
                       </v-flex>
                     </v-layout>
                     <v-layout>
                       <v-flex xs5 sm4 class="pt-4 subheading">
                         <label>Class Incharge:</label>
                       </v-flex>
                       <v-flex xs7 sm8>
                         <v-select
                           :items="teacherList"
                           v-model="editedItem.classInchargeId"
                           :label="editedItem.teacherData[0].name"
                           item-text="name"
                           item-value="_id"
                         ></v-select>
                       </v-flex>
                     </v-layout>
                     <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-form>
                 </v-flex>
               </v-layout>
             </v-container>
           </v-card>
         </v-dialog>
         <!-- ****** PROFILE VIEW SECTION DATA ******  -->
         <v-dialog v-model="dialog1" max-width="600px">
           <v-toolbar color="grey lighten-2">
             <v-spacer></v-spacer>
             <v-toolbar-title>
               <h3>Section</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>
-                    <br />
-                    <br />
                     <v-layout>
                       <v-flex xs7 sm6>
                         <h5 class="right my-1 hidden-xs-only hidden-sm-only">
                           <b>Class Name:</b>
                         </h5>
                         <h5 class="right my-1 hidden-lg-only hidden-md-only hidden-xl-only">
                           <b>Class:</b>
                         </h5>
                       </v-flex>
                       <v-flex sm6 xs5>
                         <h5 class="my-1">{{ editedItem.classData.classNum }}</h5>
                       </v-flex>
                     </v-layout>
                     <v-layout>
                       <v-flex xs7 sm6>
                         <h5 class="right my-1">
                           <b>Section Name:</b>
                         </h5>
                       </v-flex>
                       <v-flex sm6 xs5>
                         <h5 class="my-1">{{ editedItem.name }}</h5>
                       </v-flex>
                     </v-layout>
                     <v-layout>
                       <v-flex xs7 sm6>
                         <h5 class="right my-1">
                           <b>Class Incharge:</b>
                         </h5>
                       </v-flex>
                       <v-flex sm6 xs5>
                         <h5 class="my-1">{{ editedItem.teacherData[0].name }}</h5>
                       </v-flex>
                     </v-layout>
                     <v-layout>
                       <v-flex xs7 sm6>
                         <h5 class="right my-1">
                           <b>Session:</b>
                         </h5>
                       </v-flex>
                       <v-flex sm6 xs5>
                         <h5 class="my-1">{{ editedItem.session }}</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 StudentS 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 + 1}}</td>
+            <td id="td" class="text-xs-center">{{ props.index + 1 }}</td>
-            <td id="td" class="text-xs-center">{{ props.item.classData.classNum}}</td>
+            <td id="td" class="text-xs-center">{{ props.item.classData.classNum }}</td>
-            <td id="td" class="text-xs-center">{{ props.item.name}}</td>
+            <td id="td" class="text-xs-center">{{ props.item.name }}</td>
-            <td id="td" class="text-xs-center">{{ props.item.session}}</td>
+            <td id="td" class="text-xs-center">{{ props.item.session }}</td>
             <td class="text-xs-center">
               <span>
                 <v-tooltip top>
                   <img
                     slot="activator"
                     style="cursor:pointer; width:25px; height:18px; "
                     class="mr5"
                     @click="profile(props.item)"
                     src="/static/icon/eye1.png"
                   />
                   <span>View</span>
                 </v-tooltip>
                 <v-tooltip top>
                   <img
                     slot="activator"
                     style="cursor:pointer; width:20px; height:18px; "
                     class="mr5"
                     @click="editItem(props.item)"
                     src="/static/icon/edit1.png"
                   />
                   <span>Edit</span>
                 </v-tooltip>
                 <v-tooltip top>
                   <img
                     slot="activator"
                     style="cursor:pointer; width:20px; height:20px; "
                     class="mr5"
                     @click="deleteItem(props.item)"
                     src="/static/icon/delete1.png"
                   />
                   <span>Delete</span>
                 </v-tooltip>
               </span>
             </td>
           </template>
           <v-alert
             slot="no-results"
             :value="true"
             color="error"
             icon="warning"
           >Your search for "{{ search }}" found no results.</v-alert>
         </v-data-table>
       </v-tab-item>
       <!-- ****** ADD multiple Students ****** -->
       <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 sm8 offset-sm2 class="top">
             <v-card flat>
               <v-container fluid fill-height>
                 <v-layout align-center>
                   <v-flex xs12 class="mt-4">
                     <v-form ref="form" v-model="valid" lazy-validation>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right">Section Name:</label>
                         </v-flex>
                         <v-flex xs6 class="ml-3">
                           <v-autocomplete
                             v-model="sectionData.name"
                             placeholder="fill your Section Name"
                             :items="SectionName"
                             :rules="nameRules"
                             required
                           ></v-autocomplete>
                         </v-flex>
                       </v-layout>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right">Select Class:</label>
                         </v-flex>
                         <v-flex xs6 class="ml-3">
                           <v-select
                             :items="addclass"
                             label="Select Class"
                             v-model="sectionData.classNum"
                             item-text="classNum"
                             item-value="_id"
                             name="Select Class"
                             :rules="classRules"
                             required
                           ></v-select>
                         </v-flex>
                       </v-layout>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right">Select Incharge:</label>
                         </v-flex>
                         <v-flex xs6 class="ml-3">
                           <v-select
                             :items="teacherList"
                             label="Select Incharge"
                             v-model="sectionData.sectionId"
                             item-text="name"
                             item-value="_id"
                             name="Select Class"
                             :rules="inchargeRules"
                             required
                           ></v-select>
                         </v-flex>
                       </v-layout>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right">Session:</label>
                         </v-flex>
                         <v-flex xs6 class="ml-3">
                           <v-text-field
                             v-model="sectionData.session"
                             placeholder="fill your Session"
                             name="name"
                             type="text"
                             :rules="sessionRules"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                       <v-layout>
                         <v-flex xs12 sm9 offset-sm2>
                           <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-form>
                   </v-flex>
                 </v-layout>
               </v-container>
             </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 { apiCollection } from "@/schoolApi/apiCollection";
+// const getSectionData = apiCollection.get("posts");
 export default {
   data: () => ({
     snackbar: false,
     y: "top",
     x: "right",
     mode: "",
     timeout: 3000,
     text: "",
     showLoader: false,
     loading: false,
     date: null,
     search: "",
     dialog: false,
     dialog1: false,
     valid: true,
     validEdit: true,
     isActive: true,
     newActive: false,
     details: [],
     AddUsercredentials: {},
     pagination: {
       rowsPerPage: 15
     },
     nameRules: [v => !!v || " Section Name is required"],
     classRules: [v => !!v || " Class Name is required"],
     sessionRules: [v => !!v || " Session is required"],
     inchargeRules: [v => !!v || " Incharge Name is required"],
     SectionName: ["A", "B", "C", "D", "E", "F"],
     headers: [
       {
         text: "No",
         align: "center",
         sortable: false,
         value: "No"
       },
       {
         text: "Class Name",
         value: "classData.classNum",
         sortable: false,
         align: "center"
       },
       { text: "Section Name", value: "name", sortable: false, align: "center" },
       { text: "Session", value: "session", sortable: false, align: "center" },
       { text: "Action", value: "", sortable: false, align: "center" }
     ],
     desserts: [],
     addclass: [],
     teacherList: [],
     select: "",
     selectId: "",
     token: "",
     editedIndex: -1,
     editedItem: {
       classData: {
         classNum: ""
       },
       classId: "",
       classInchargeId: "",
       teacherData: [
         {
           name: ""
         }
       ],
       name: "",
       session: new Date().getFullYear()
     },
     sectionData: {
       session: new Date().getFullYear()
     }
   }),
   methods: {
-    getSectionList() {
+    async getSectionList() {
+      // const { data } = await getSectionData.get();
       this.showLoader = true;
-      http()
+      await http()
         .get("/getAllSections", {
           headers: { Authorization: "Bearer " + this.token }
         })
         .then(response => {
           this.desserts = response.data.data;
           this.showLoader = false;
           // console.log("getAllSections=====>",response.data.data)
         })
         .catch(error => {
           this.showLoader = false;
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
           }
         });
     },
     editItem(item) {
       this.editedIndex = this.desserts.indexOf(item);
       this.editedItem = Object.assign({}, item);
       console.log(this.editedItem);
       this.dialog = true;
     },
     profile(item) {
       this.editedIndex = this.desserts.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.dialog1 = true;
     },
     deleteItem(item) {
       let deleteStudent = {
         sectionId: item._id
       };
       http()
         .delete(
           "/deleteSection",
           confirm("Are you sure you want to delete this?") && {
             params: deleteStudent
           }
         )
         .then(response => {
           if ((this.snackbar = true)) {
             this.text = "Successfully delete Existing Section";
           }
           this.getSectionList();
         })
         .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;
     },
     close2() {
       this.dialog2 = false;
     },
     submit() {
       if (this.$refs.form.validate()) {
         let addSection = {
           name: this.sectionData.name,
           classId: this.sectionData.classNum,
           session: this.sectionData.session,
           classInchargeId: this.sectionData._id
         };
         this.loading = true;
         http()
           .post("/createSection", addSection)
           .then(response => {
             console.log(response);
             this.getSectionList();
             if ((this.snackbar = true)) {
               this.text = "New Section added successfully";
             }
             this.clear();
             this.loading = false;
           })
           .catch(error => {
             // console.log(error);
             if ((this.snackbar = true)) {
               this.text = error.response.data.message;
             }
             this.loading = false;
           });
       }
     },
     clear() {
       this.$refs.form.reset();
     },
     save() {
       this.editedItem.sectionId = this.editedItem._id;
       http()
         .put("/updateSection", this.editedItem)
         .then(response => {
           // console.log("editStudent",editStudent);
           if ((this.snackbar = true)) {
             this.text = "Successfully Edit Existing Section";
           }
           this.getSectionList();
           this.close();
         })
         .catch(error => {
           this.text = error.response.data.message;
           // console.log(error);
         });
     },
     getAllTeacher() {
       http()
         .get("/getTeachersList", {
           headers: { Authorization: "Bearer " + this.token }
         })
         .then(response => {
           this.teacherList = response.data.data;
           this.showLoader = false;
         })
         .catch(err => {
           // console.log("err====>", err);
           this.showLoader = false;
         });
     },
     getAllClasses() {
       http()
         .get("/getClassesList", {
           headers: { Authorization: "Bearer " + this.token }
         })
         .then(response => {
           this.addclass = response.data.data;
         })
         .catch(err => {
           // console.log("err====>", err);
           // this.$router.replace({ path: "/" });
         });
     }
   },
   mounted() {
     this.token = this.$store.state.token;
     this.getSectionList();
     this.getAllClasses();
     this.getAllTeacher();
   },
   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>
 .active {
   background-color: gray;
   color: white !important;
 }
 .activebtn {
   color: black !important;

src/pages/Students/students.vue

Diff comments View file @29ac0db

 <template>
   <div>
     <v-tabs grow slider-color="gray">
       <v-tab
         ripple
         @click="activeTab('existing')"
         v-bind:class="{ active: isActive }"
         id="tab"
         class="subheading"
       >Existing Students</v-tab>
       <v-tab
         ripple
         @click="activeTab('new')"
         v-bind:class="{ active: newActive }"
         id="tab1"
         User
         class="subheading"
       >Add New Students</v-tab>
       <!-- ****** EDITS  STUDENTS DETAILS ****** -->
       <v-tab-item>
         <v-snackbar
           :timeout="timeout"
           :top="y === 'top'"
           :right="x === 'right'"
           :vertical="mode === 'vertical'"
           v-model="snackbar"
           color="success"
         >{{ text }}</v-snackbar>
         <v-dialog v-model="dialog" max-width="1500px" scrollable>
           <v-card flat>
             <v-toolbar color="grey lighten-2" flat>
               <v-spacer></v-spacer>
               <v-toolbar-title>
                 <h3>Edit Student Profile</h3>
               </v-toolbar-title>
               <v-spacer></v-spacer>
             </v-toolbar>
             <v-card-text style="height: 586px;">
               <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="160px">
                         <img
                           src="/static/icon/user.png"
                           v-if="!editedItem.profilePicUrl && !imageUrl"
                         />
                         <img
                           :src="editedItem.profilePicUrl"
                           v-else-if="editedItem.profilePicUrl && !imageUrl"
                         />
                         <img
                           v-if="imageUrl"
                           :src="imageUrl"
                           height="150"
                           style="border-radius:50%; width:200px"
                         />
                       </v-avatar>
                       <input
                         type="file"
                         style="display: none"
                         ref="image"
                         accept="image/*"
                         @change="onFilePicked"
                       />
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
                           <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Class:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-select
                             :items="addclass"
                             label="Select Class"
                             v-model="editedItem.select"
                             item-text="classNum"
                             item-value="_id"
                             name="Select Class"
                             @change="getSections(editedItem.select)"
                             required
                           ></v-select>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right hidden-xs-only hidden-sm-only">Select Section:</label>
                           <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Section:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-select
                             :items="addSection"
                             label="Select Section"
                             v-model="editedItem.selectSection"
                             item-text="name"
                             item-value="_id"
                             name="Select Section"
                             required
                           ></v-select>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right hidden-xs-only hidden-sm-only">Full Name:</label>
                           <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             v-model="editedItem.name"
                             placeholder="fill your full Name"
                             name="name"
                             type="text"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right">Email ID:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             placeholder="fill your email"
                             v-model="editedItem.email"
                             type="text"
                             name="email"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right hidden-sm-only hidden-xs-only">Date of Birth:</label>
                           <label class="right hidden-lg-only hidden-xl-only hidden-md-only">D.O.B:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-menu
                             ref="menu"
                             :close-on-content-click="false"
                             v-model="menu1"
                             :nudge-right="40"
                             lazy
                             transition="scale-transition"
                             offset-y
                             full-width
                             min-width="290px"
                           >
                             <v-text-field
                               slot="activator"
                               v-model="editedItem.dob"
                               placeholder="Select Dob"
                             ></v-text-field>
                             <v-date-picker
                               ref="picker"
                               v-model="editedItem.dob"
                               :max="new Date().toISOString().substr(0, 10)"
                               min="1950-01-01"
                               @input="menu1 = false"
                             ></v-date-picker>
                           </v-menu>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right">City:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             v-model="editedItem.city"
                             placeholder="fill your City Name"
                             name="City"
                             type="text"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right hidden-xs-only hidden-sm-only">Blood Group:</label>
                           <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Blood:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             v-model="editedItem.bloodGroup"
                             placeholder="fill your BloodGroup"
                             name="state"
                             type="text"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right">Allergies:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             v-model="editedItem.allergies"
                             placeholder="fill your Allergies"
                             name="pincode"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right">Medical Notes:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             v-model="editedItem.medicalNotes"
                             placeholder="fill your medicalNotes"
                             name="mobileNo"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right">Height:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             v-model="editedItem.height"
                             placeholder="fill your Height"
                             name="state"
                             type="text"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right">Weight:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             v-model="editedItem.weight"
                             placeholder="fill your Weight"
                             name="pincode"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
                           <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             label="Select Image"
                             @click="pickFile"
                             v-model="imageName"
                             append-icon="attach_file"
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right">State:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             v-model="editedItem.state"
                             placeholder="fill your State Name"
                             name="state"
                             type="text"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right">Pincode:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             v-model="editedItem.pincode"
                             placeholder="fill your pincode"
                             name="pincode"
                             type="number"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>
                           <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             v-model="editedItem.mobile"
                             placeholder="fill your MobileNo"
                             name="mobileNo"
                             type="number"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right hidden-xs-only hidden-sm-only">Select Country:</label>
                           <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-autocomplete
                             v-model="editedItem.country"
                             :items="countries"
                             placeholder="Select Country Name"
                             required
                           ></v-autocomplete>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right">Gender:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-select
                             :items="gender"
                             v-model="editedItem.gender"
                             placeholder="Select Gender"
                             required
                           ></v-select>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                     <v-flex xs12 sm4>
                       <v-layout>
                         <v-flex xs4 class="pt-4 subheading">
                           <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label>
                           <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Roll No:</label>
                         </v-flex>
                         <v-flex xs8 class="ml-3">
                           <v-text-field
                             :items="gender"
                             v-model="editedItem.rollNo"
                             placeholder="fill roll number"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                   </v-layout>
                   <v-layout class="hidden-xs-only hidden-sm-only">
                     <v-flex xs12 sm12>
                       <v-layout>
                         <v-flex xs4 sm2 class="pt-4 subheading ml-5">
                           <label class="right pr-4">Present Address:</label>
                         </v-flex>
                         <v-flex xs8 sm12>
                           <v-text-field
                             name="input-4-3"
                             v-model="editedItem.presentAddress"
                             placeholder="fill Your present Address"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                     <v-flex xs12 sm12>
                       <v-layout>
                         <v-flex xs4 sm2 class="pt-4 subheading ml-5 addressForm">
                           <label class>Permanent Address:</label>
                         </v-flex>
                         <v-flex xs12 sm12>
                           <v-text-field
                             name="input-4-3"
                             v-model="editedItem.permanentAddress"
                             placeholder="fill Your Permanent Address"
                             required
                           ></v-text-field>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                   </v-layout>
                   <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only">
                     <v-flex xs12 sm12>
                       <v-layout>
                         <v-flex xs12 sm3 class="pt-4 subheading text-xs-center">
                           <label class>Present Address :</label>
                         </v-flex>
                       </v-layout>
                       <v-layout>
                         <v-flex xs12 sm12>
                           <v-textarea
                             name="input-4-3"
                             v-model="editedItem.presentAddress"
                             placeholder="fill Your present Address"
                             required
                           ></v-textarea>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                     <v-flex xs12 sm12>
                       <v-layout>
                         <v-flex xs12 sm3 class="pt-4 pr-4 subheading text-xs-center addressForm">
                           <label>Permanent addr:</label>
                         </v-flex>
                       </v-layout>
                       <v-layout>
                         <v-flex xs12 sm12>
                           <v-textarea
                             name="input-4-3"
                             v-model="editedItem.permanentAddress"
                             placeholder="fill Your Permanent Address"
                             required
                           ></v-textarea>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs12 sm12>
                       <v-layout>
                         <v-flex xs6>
                           <v-btn round dark @click.native="close">Cancel</v-btn>
                         </v-flex>
                         <v-flex xs6>
                           <v-btn @click="save" round dark :loading="loading" class="right">Save</v-btn>
                         </v-flex>
                       </v-layout>
                     </v-flex>
                   </v-layout>
                 </v-container>
               </v-form>
             </v-card-text>
           </v-card>
         </v-dialog>
         <!-- ****** PROFILE VIEW STUDENTS DEATILS ******  -->
         <v-dialog v-model="dialog1" max-width="1100px" scrollable>
           <v-card>
             <v-toolbar color="grey lighten-2" flat>
               <v-spacer></v-spacer>
               <v-toolbar-title>Student Profile</v-toolbar-title>
               <v-spacer></v-spacer>
               <v-icon @click="close1">close</v-icon>
             </v-toolbar>
             <v-card-text style="height: 700px;">
               <v-flex align-center justify-center layout text-xs-center class="mt-3">
                 <v-avatar size="160px">
                   <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" />
                   <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" />
                 </v-avatar>
               </v-flex>
               <v-container grid-list-md>
                 <v-layout wrap>
                   <v-flex xs12 sm6>
                     <v-layout>
                       <v-flex xs6 sm5>
                         <h5 class="right my-1">
                           <b>Full Name:</b>
                         </h5>
                       </v-flex>
                       <v-flex sm7 xs6>
                         <h5 class="my-1 left">{{ editedItem.name }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                   <v-flex xs12 sm6>
                     <v-layout>
                       <v-flex xs6 sm4>
                         <h5 class="right my-1">
                           <b>Email:</b>
                         </h5>
                       </v-flex>
                       <v-flex sm8 xs6>
                         <h5 class="my-1 left">{{ editedItem.email }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                 </v-layout>
                 <v-layout wrap>
                   <v-flex xs12 sm6>
                     <v-layout>
                       <v-flex xs6 sm5>
                         <b>
                           <h5 class="right my-1">
                             <b>Gender:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm7 xs6>
                         <h5 class="my-1 left">{{ editedItem.gender }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                   <v-flex xs12 sm6>
                     <v-layout>
                       <v-flex xs6 sm4>
                         <b>
                           <h5 class="right my-1">
                             <b>D.O.B:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm7 xs6>
                         <h5 class="my-1">{{ dates(editedItem.dob) }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                 </v-layout>
                 <v-layout wrap>
                   <v-flex xs12 sm6>
                     <v-layout>
                       <v-flex xs6 sm5>
                         <b>
                           <h5 class="right my-1">
                             <b>Blood Group:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm7 xs6>
                         <h5 class="my-1 left">{{ editedItem.bloodGroup }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                   <v-flex xs12 sm6>
                     <v-layout>
                       <v-flex xs6 sm4>
                         <b>
                           <h5 class="right my-1">
                             <b>Allergies:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm8 xs6>
                         <h5 class="my-1">{{ editedItem.allergies }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                 </v-layout>
                 <v-layout wrap>
                   <v-flex xs12 sm6>
                     <v-layout>
                       <v-flex xs6 sm5>
                         <b>
                           <h5 class="right my-1">
                             <b>Height:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm7 xs6>
                         <h5 class="my-1 left">{{ editedItem.height }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                   <v-flex xs12 sm6>
                     <v-layout>
                       <v-flex xs6 sm4>
                         <b>
                           <h5 class="right my-1">
                             <b>Weight:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm8 xs6>
                         <h5 class="my-1">{{ editedItem.weight }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                 </v-layout>
                 <v-layout wrap>
                   <v-flex xs12 sm6>
                     <v-layout>
                       <v-flex xs6 sm5>
                         <b>
                           <h5 class="right my-1">
                             <b>City:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm7 xs6>
                         <h5 class="my-1 left">{{ editedItem.city }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                   <v-flex xs12 sm6>
                     <v-layout>
                       <v-flex xs6 sm4>
                         <b>
                           <h5 class="right my-1">
                             <b>State:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm8 xs6>
                         <h5 class="my-1">{{ editedItem.state }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                 </v-layout>
                 <v-layout wrap>
                   <v-flex xs12 sm6>
                     <v-layout>
                       <v-flex xs6 sm5>
                         <b>
                           <h5 class="right my-1">
                             <b>Pincode:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm7 xs6>
                         <h5 class="my-1">{{ editedItem.pincode }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                   <v-flex xs12 sm5>
                     <v-layout>
                       <v-flex xs6 sm5>
                         <b>
                           <h5 class="right my-1">
                             <b>Country:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm7 xs6>
                         <h5 class="my-1">{{ editedItem.country }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                 </v-layout>
                 <v-layout wrap>
                   <v-flex xs12 sm6>
                     <v-layout>
                       <v-flex sm5 xs6>
                         <b>
                           <h5 class="right my-1">
                             <b>Mobile No:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm6 xs6>
                         <h5 class="my-1">{{ editedItem.mobile }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                   <v-flex xs12 sm6>
                     <v-layout>
                       <v-flex xs6 sm4>
                         <b>
                           <h5 class="right my-1">
                             <b>Fahter Name:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm8 xs6>
                         <h5 class="my-1">{{ editedItem.fatherName }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                 </v-layout>
                 <v-layout wrap>
                   <v-flex xs12 sm5>
                     <v-layout>
                       <v-flex xs6 sm6>
                         <b>
                           <h5 class="right my-1">
                             <b>Mother Name:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm6 xs6>
                         <h5 class="my-1">{{ editedItem.motherName }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                   <v-flex xs12 sm6>
                     <v-layout>
                       <v-flex xs6 sm6>
                         <b>
                           <h5 class="right my-1">
                             <b>Father Cell No:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm6 xs6>
                         <h5 class="my-1">{{ editedItem.fatherCellNo }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                 </v-layout>
                 <v-layout wrap>
                   <v-flex xs12 sm5>
                     <v-layout>
                       <v-flex xs6 sm6>
                         <b>
                           <h5 class="right my-1">
                             <b>Mother Cell No:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm6 xs6>
                         <h5 class="my-1">{{ editedItem.motherCellNo }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                   <v-flex xs12 sm6>
                     <v-layout>
                       <v-flex xs6 sm6>
                         <b>
                           <h5 class="my-1 right">
                             <b>Academic Year:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm5 xs6>
                         <h5 class="my-1">{{ editedItem.establishmentYear }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                 </v-layout>
                 <v-layout wrap>
                   <v-flex xs12 sm5>
                     <v-layout>
                       <v-flex xs6 sm6>
                         <b>
                           <h5 class="my-1 right">
                             <b>Medical Notes:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm5 xs6>
                         <h5 class="my-1">{{ editedItem.medicalNotes }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                   <v-flex xs12 sm6>
                     <v-layout>
                       <v-flex xs6 sm6>
                         <b>
                           <h5 class="right my-1">
                             <b>Roll No. :</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm6 xs6>
                         <h5 class="my-1">{{ editedItem.rollNo }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                 </v-layout>
                 <v-layout wrap class="hidden-xs-only">
                   <v-flex xs12 sm5>
                     <v-layout wrap>
                       <v-flex sm6>
                         <b>
                           <h5 class="my-1 right">
                             <b>present Address:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm5>
                         <h5 class="my-1">{{ editedItem.presentAddress }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                   <v-flex sm6>
                     <v-layout wrap>
                       <v-flex sm6>
                         <b>
                           <h5 class="my-1 right">
                             <b>Permanent Address:</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm6>
                         <h5 class="my-1">{{ editedItem.permanentAddress }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                 </v-layout>
                 <v-layout wrap class="hidden-sm-only hidden-md-only hidden-lg-only hidden-xl-only">
                   <v-flex xs12 sm5>
                     <v-layout wrap>
                       <v-flex xs8 sm6>
                         <b>
                           <h5 class="my-1">
                             <b>present Address:-</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm5 xs12>
                         <h5 class="my-1">{{ editedItem.presentAddress }}</h5>
                       </v-flex>
                     </v-layout>
                   </v-flex>
                   <v-flex xs12 sm6>
                     <v-layout wrap>
                       <v-flex xs9 sm6>
                         <b>
                           <h5 class="my-1">
                             <b>Permanent Address:-</b>
                           </h5>
                         </b>
                       </v-flex>
                       <v-flex sm6 xs12>
                         <h5 class="my-1">{{ editedItem.permanentAddress }}</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 STUDENTS TABLE ****** -->
         <v-card flat>
           <v-card-actions class="hidden-xs-only hidden-sm-only">
             <v-layout>
               <label class="right mt-4 ml-5">Select Class:</label>
               <v-select
                 :items="addclass"
                 label="Select Class"
                 v-model="selectStudents.select"
                 item-text="classNum"
                 item-value="_id"
                 name="Select Class"
                 :rules="classRules"
                 @change="getSections(selectStudents.select)"
                 class="px-4"
                 required
               ></v-select>
               <label class="right mt-4">Select Section:</label>
               <v-select
                 :items="addSection"
                 label="Select Section"
                 v-model="selectStudents.selectSection"
                 item-text="name"
                 item-value="_id"
                 name="Select Section"
                 :rules="sectionRules"
                 class="pl-3"
                 required
               ></v-select>
             </v-layout>
             <v-spacer></v-spacer>
             <v-btn @click="findStudents()" round dark :loading="loading" class="left">Find</v-btn>
           </v-card-actions>
           <v-flex class="hidden-xl-only hidden-lg-only hidden-md-only">
             <v-layout>
               <v-flex xs4>
                 <label class="right mt-4">Select Class:</label>
               </v-flex>
               <v-flex xs8>
                 <v-select
                   :items="addclass"
                   label="Select Class"
                   v-model="selectStudents.select"
                   item-text="classNum"
                   item-value="_id"
                   name="Select Class"
                   :rules="classRules"
                   @change="getSections(selectStudents.select)"
                   class="px-2"
                   required
                 ></v-select>
               </v-flex>
             </v-layout>
             <v-layout>
               <v-flex xs4>
                 <label class="right mt-4">Select Section:</label>
               </v-flex>
               <v-flex xs8>
                 <v-select
                   :items="addSection"
                   label="Select Section"
                   v-model="selectStudents.selectSection"
                   item-text="name"
                   item-value="_id"
                   name="Select Section"
                   :rules="sectionRules"
                   class="px-2"
                   required
                 ></v-select>
               </v-flex>
             </v-layout>
             <v-layout>
               <v-flex xs5 class="mx-auto mb-2">
                 <v-btn @click="findStudents()" block round dark :loading="loading">Find</v-btn>
               </v-flex>
             </v-layout>
           </v-flex>
         </v-card>
         <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.item.rollNo}}</td>
             <td id="td" class="text-xs-center">
               <v-avatar>
                 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
                 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
               </v-avatar>
             </td>
             <td id="td" class="text-xs-center">{{ props.item.name}}</td>
             <td id="td" class="text-xs-center">{{ props.item.email }}</td>
             <td id="td" class="text-xs-center">{{ dates(props.item.dob) }}</td>
             <td id="td" class="text-xs-center">{{ props.item.gender }}</td>
             <td id="td" class="text-xs-center">{{ props.item.parentId.fatherName }}</td>
             <td id="td" class="text-xs-center">{{ props.item.parentId.motherName }}</td>
             <td id="td" class="text-xs-center">{{ props.item.establishmentYear }}</td>
             <td id="td" class="text-xs-center">{{ props.item.mobile}}</td>
             <td class="text-xs-center">
               <span>
                 <v-tooltip top>
                   <img
                     slot="activator"
                     style="cursor:pointer; width:25px; height:18px; "
                     class="mr5"
                     @click="profile(props.item)"
                     src="/static/icon/eye1.png"
                   />
                   <span>View</span>
                 </v-tooltip>
                 <v-tooltip top>
                   <img
                     slot="activator"
                     style="cursor:pointer; width:20px; height:18px; "
                     class="mr5"
                     @click="editItem(props.item)"
                     src="/static/icon/edit1.png"
                   />
                   <span>Edit</span>
                 </v-tooltip>
                 <v-tooltip top>
                   <img
                     slot="activator"
                     style="cursor:pointer; width:20px; height:20px; "
                     class="mr5"
                     @click="deleteItem(props.item)"
                     src="/static/icon/delete1.png"
                   />
                   <span>Delete</span>
                 </v-tooltip>
               </span>
             </td>
           </template>
           <v-alert
             slot="no-results"
             :value="true"
             color="error"
             icon="warning"
           >Your search for "{{ search }}" found no results.</v-alert>
         </v-data-table>
       </v-tab-item>
       <!-- ****** ADD STUDENTS DETAILS****** -->
       <v-tab-item>
         <v-container fluid>
           <v-layout align-center justify-center fill-height>
             <v-flex xs12 sm12 md10 lg11>
               <div>
                 <v-app>
                   <v-stepper v-model="e2">
                     <v-stepper-header>
                       <v-stepper-step :complete="e2 > 1" step="1">Fill parent Details</v-stepper-step>
                       <v-divider></v-divider>
                       <v-stepper-step step="2">Fill Student Details</v-stepper-step>
                     </v-stepper-header>
                     <v-stepper-items>
                       <v-stepper-content step="1">
                         <v-container fluid class>
                           <v-snackbar
                             :timeout="timeout"
                             :top="y === 'top'"
                             :right="x === 'right'"
                             :vertical="mode === 'vertical'"
                             v-model="snackbar"
                             color="success"
                           >{{ text }}</v-snackbar>
                           <v-flex xs12 sm12>
                             <v-form ref="parentForm" v-model="valid" lazy-validation>
                               <v-layout wrap>
                                 <v-flex xs12 sm6>
                                   <v-layout>
                                     <v-flex xs4 class="pt-4 subheading">
                                       <label class="right">Parent Email Id:</label>
                                     </v-flex>
                                     <v-flex xs8 class="ml-3">
                                       <v-text-field
                                         placeholder="fill Parent email"
                                         :rules="emailRules"
                                         v-model.trim="parentData.email"
                                         type="text"
                                         v-on:keyup="getParentDetails"
                                         name="email"
                                         required
                                       ></v-text-field>
                                     </v-flex>
                                   </v-layout>
                                 </v-flex>
                                 <v-flex xs12 sm6>
                                   <v-layout>
                                     <v-flex xs4 class="pt-4 subheading">
                                       <label class="right">Father Name:</label>
                                     </v-flex>
                                     <v-flex xs8 class="ml-3">
                                       <v-text-field
                                         v-model="parentData.fatherName"
                                         :rules="fatherNameRules"
                                         placeholder="Fill your father Name"
                                         required
                                       ></v-text-field>
                                     </v-flex>
                                   </v-layout>
                                 </v-flex>
                               </v-layout>
                               <v-layout wrap>
                                 <v-flex xs12 sm6>
                                   <v-layout>
                                     <v-flex xs4 class="pt-4 subheading">
                                       <label class="right">Father Cell No:</label>
                                     </v-flex>
                                     <v-flex xs8 class="ml-3">
                                       <v-text-field
                                         v-model="parentData.fatherCellNo"
                                         placeholder="fill your father Cell Number"
                                         name="state"
                                         type="number"
                                         :rules="fatheCellNoRules"
                                         required
                                       ></v-text-field>
                                     </v-flex>
                                   </v-layout>
                                 </v-flex>
                                 <v-flex xs12 sm6>
                                   <v-layout>
                                     <v-flex xs4 class="pt-4 subheading">
                                       <label class="right">Mother Name:</label>
                                     </v-flex>
                                     <v-flex xs8 class="ml-3">
                                       <v-text-field
                                         v-model="parentData.motherName"
                                         placeholder="fill your Mother Name"
                                         name="state"
                                         type="text"
                                         :rules="motherNameRules"
                                         required
                                       ></v-text-field>
                                     </v-flex>
                                   </v-layout>
                                 </v-flex>
                               </v-layout>
                               <v-layout wrap>
                                 <v-flex xs12 sm6>
                                   <v-layout>
                                     <v-flex xs4 class="pt-4 subheading">
                                       <label class="right">Mother Cell No:</label>
                                     </v-flex>
                                     <v-flex xs8 class="ml-3">
                                       <v-text-field
                                         v-model="parentData.motherCellNo"
                                         placeholder="fill your  Mother Cell Number"
                                         name="state"
                                         type="number"
                                         :rules="motherCellNoRules"
                                         required
                                       ></v-text-field>
                                     </v-flex>
                                   </v-layout>
                                 </v-flex>
                               </v-layout>
                               <v-flex sm12 class="hidden-xs-only">
                                 <v-card-actions>
                                   <v-spacer></v-spacer>
                                   <v-btn
                                     @click="submitParentDetails"
                                     round
                                     dark
                                     :loading="loading"
                                     v-show="showParent"
                                   >Add</v-btn>
                                   <v-btn v-show="showNext" @click="e2 = 2" round dark>Next</v-btn>
                                 </v-card-actions>
                               </v-flex>
                               <v-flex
                                 xs6
                                 class="hidden-md-only hidden-sm-only hidden-lg-only hidden-xl-only mx-auto mt-2"
                               >
                                 <v-btn
                                   @click="submitParentDetails"
                                   round
                                   dark
                                   :loading="loading"
                                   v-show="showParent"
                                 >Add</v-btn>
                                 <v-btn v-show="showNext" @click="e2 = 2" round dark>Next</v-btn>
                               </v-flex>
                             </v-form>
                           </v-flex>
                         </v-container>
                       </v-stepper-content>
                       <v-stepper-content step="2">
                         <!-- <v-container fluid> -->
                         <v-snackbar
                           :timeout="timeout"
                           :top="y === 'top'"
                           :right="x === 'right'"
                           :vertical="mode === 'vertical'"
                           v-model="snackbar"
                           color="success"
                         >{{ text }}</v-snackbar>
                         <v-flex xs12 sm12>
                           <v-form ref="form" v-model="valid" lazy-validation>
                             <!-- <v-container fluid> -->
                             <v-layout>
                               <v-flex
                                 xs12
                                 class="text-xs-center text-sm-center text-md-center text-lg-center"
                               >
                                 <v-avatar size="100px">
                                   <img src="/static/icon/user.png" v-if="!imageUrl" />
                                 </v-avatar>
                                 <input
                                   type="file"
                                   style="display: none"
                                   ref="image"
                                   accept="image/*"
                                   @change="onFilePicked"
                                 />
                                 <img
                                   :src="imageData.imageUrl"
                                   height="150"
                                   v-if="imageUrl"
                                   style="border-radius:50%; width:200px"
                                 />
                               </v-flex>
                             </v-layout>
                             <v-layout wrap>
                               <v-flex xs12 sm6>
                                 <v-layout>
                                   <v-flex x4 sm4 class="pt-4 subheading">
                                     <label class="right hidden-xs-only hidden-sm-only">Select Class:</label>
                                     <label
                                       class="right hidden-lg-only hidden-md-only hidden-xl-only"
                                     >Class:</label>
                                   </v-flex>
                                   <v-flex xs8 sm8 class="ml-3">
                                     <v-select
                                       :items="addclass"
                                       label="Select Class"
                                       v-model="addStudents.select"
                                       item-text="classNum"
                                       item-value="_id"
                                       name="Select Class"
                                       :rules="classRules"
                                       @change="getSection(addStudents.select)"
                                       required
                                     ></v-select>
                                   </v-flex>
                                 </v-layout>
                               </v-flex>
                               <v-flex xs12 sm6>
                                 <v-layout>
                                   <v-flex xs4 class="pt-4 subheading">
                                     <label
                                       class="right hidden-xs-only hidden-sm-only"
                                     >Select Section:</label>
                                     <label
                                       class="right hidden-lg-only hidden-md-only hidden-xl-only"
                                     >Section:</label>
                                   </v-flex>
                                   <v-flex xs8 class="ml-3">
                                     <v-select
                                       :items="addSection"
                                       label="Select Section"
                                       v-model="addStudents.selectSection"
                                       item-text="name"
                                       item-value="_id"
                                       name="Select Section"
                                       :rules="sectionRules"
                                       required
                                     ></v-select>
                                   </v-flex>
                                 </v-layout>
                               </v-flex>
                             </v-layout>
                             <v-layout wrap>
                               <v-flex xs12 sm6>
                                 <v-layout>
                                   <v-flex xs4 sm4 class="pt-4 subheading">
                                     <label class="right hidden-xs-only hidden-sm-only">Full Name:</label>
                                     <label
                                       class="right hidden-lg-only hidden-md-only hidden-xl-only"
                                     >Name:</label>
                                   </v-flex>
                                   <v-flex xs8 sm8 class="ml-3">
                                     <v-text-field
                                       v-model="addStudents.name"
                                       placeholder="fill your full Name"
                                       name="name"
                                       type="text"
                                       :rules="nameRules"
                                       required
                                     ></v-text-field>
                                   </v-flex>
                                 </v-layout>
                               </v-flex>
                               <v-flex xs12 sm6>
                                 <v-layout>
                                   <v-flex xs4 sm4 class="pt-4 subheading">
                                     <label class="right">Email ID:</label>
                                   </v-flex>
                                   <v-flex xs8 sm8 class="ml-3">
                                     <v-text-field
                                       placeholder="fill your email"
                                       :rules="emailRules"
                                       v-model="addStudents.email"
                                       type="text"
                                       name="email"
                                       required
                                     ></v-text-field>
                                   </v-flex>
                                 </v-layout>
                               </v-flex>
                             </v-layout>
                             <v-layout wrap>
                               <v-flex xs12 sm6>
                                 <v-layout>
                                   <v-flex xs4 sm4 class="pt-4 subheading">
                                     <label
                                       class="right hidden-sm-only hidden-xs-only"
                                     >Date of Birth:</label>
                                     <label
                                       class="right hidden-lg-only hidden-xl-only hidden-md-only"
                                     >D.O.B:</label>
                                   </v-flex>
                                   <v-flex xs8 sm8 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="addStudents.date"
                                         placeholder="Select date"
                                       ></v-text-field>
                                       <v-date-picker
                                         ref="picker"
                                         v-model="addStudents.date"
                                         :max="new Date().toISOString().substr(0, 10)"
                                         min="1950-01-01"
                                         @input="menu = false"
                                       ></v-date-picker>
                                     </v-menu>
                                   </v-flex>
                                 </v-layout>
                               </v-flex>
                               <v-flex xs12 sm6>
                                 <v-layout>
                                   <v-flex xs4 class="pt-4 subheading">
                                     <label class="right">City:</label>
                                   </v-flex>
                                   <v-flex xs8 class="ml-3">
                                     <v-text-field
                                       v-model="addStudents.city"
                                       placeholder="fill your City Name"
                                       name="City"
                                       type="text"
                                       :rules="cityRules"
                                       required
                                     ></v-text-field>
                                   </v-flex>
                                 </v-layout>
                               </v-flex>
                             </v-layout>
                             <v-layout wrap>
                               <v-flex xs12 sm6>
                                 <v-layout>
                                   <v-flex xs4 class="pt-4 subheading">
                                     <label class="right">State:</label>
                                   </v-flex>
                                   <v-flex xs8 class="ml-3">
                                     <v-text-field
                                       v-model="addStudents.state"
                                       placeholder="fill your State Name"
                                       name="state"
                                       type="text"
                                       :rules="stateRules"
                                       required
                                     ></v-text-field>
                                   </v-flex>
                                 </v-layout>
                               </v-flex>
                               <v-flex xs12 sm6>
                                 <v-layout>
                                   <v-flex xs4 class="pt-4 subheading">
                                     <label class="right">Pincode:</label>
                                   </v-flex>
                                   <v-flex xs8 class="ml-3">
                                     <v-text-field
                                       v-model="addStudents.pincode"
                                       placeholder="fill your pincode"
                                       name="pincode"
                                       type="number"
                                       :rules="pincode"
                                       required
                                     ></v-text-field>
                                   </v-flex>
                                 </v-layout>
                               </v-flex>
                             </v-layout>
                             <v-layout wrap>
                               <v-flex xs12 sm6>
                                 <v-layout>
                                   <v-flex xs4 class="pt-4 subheading">
                                     <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>
                                     <label
                                       class="right hidden-lg-only hidden-md-only hidden-xl-only"
                                     >Mobile:</label>
                                   </v-flex>
                                   <v-flex xs8 class="ml-3">
                                     <v-text-field
                                       v-model="addStudents.mobile"
                                       placeholder="fill your MobileNo"
                                       name="mobileNo"
                                       type="number"
                                       :rules="mobileNoRules"
                                       required
                                     ></v-text-field>
                                   </v-flex>
                                 </v-layout>
                               </v-flex>
                               <v-flex xs12 sm6>
                                 <v-layout>
                                   <v-flex xs4 class="pt-4 subheading">
                                     <label
                                       class="right hidden-xs-only hidden-sm-only"
                                     >Select Country:</label>
                                     <label
                                       class="right hidden-lg-only hidden-md-only hidden-xl-only"
                                     >Country:</label>
                                   </v-flex>
                                   <v-flex xs8 class="ml-3">
                                     <v-autocomplete
                                       v-model="addStudents.country"
                                       :rules="country"
                                       :items="countries"
                                       placeholder="Select Country Name"
                                       required
                                     ></v-autocomplete>
                                   </v-flex>
                                 </v-layout>
                               </v-flex>
                             </v-layout>
                             <v-layout wrap>
                               <v-flex xs12 sm6>
                                 <v-layout>
                                   <v-flex xs4 class="pt-4 subheading">
                                     <label class="right">Gender:</label>
                                   </v-flex>
                                   <v-flex xs8 class="ml-3">
                                     <v-select
                                       :items="gender"
                                       v-model="addStudents.gender"
                                       :rules="genderRules"
                                       label="Select Gender"
                                       required
                                     ></v-select>
                                   </v-flex>
                                 </v-layout>
                               </v-flex>
                               <v-flex xs12 sm6>
                                 <v-layout>
                                   <v-flex xs4 class="pt-4 subheading">
                                     <label class="right hidden-xs-only hidden-sm-only">Blood Group:</label>
                                     <label
                                       class="right hidden-lg-only hidden-md-only hidden-xl-only"
                                     >Blood:</label>
                                   </v-flex>
                                   <v-flex xs8 class="ml-3">
                                     <v-text-field
                                       v-model="addStudents.bloodGroup"
                                       placeholder="Fill your Blood Group"
                                       required
                                     ></v-text-field>
                                   </v-flex>
                                 </v-layout>
                               </v-flex>
                             </v-layout>
                             <v-layout wrap>
                               <v-flex xs12 sm6>
                                 <v-layout>
                                   <v-flex xs4 class="pt-4 subheading">
                                     <label class="right">Allergies:</label>
                                   </v-flex>
                                   <v-flex xs8 class="ml-3">
                                     <v-text-field
                                       v-model="addStudents.allergies"
                                       placeholder="Fill your Allergies"
                                       required
                                     ></v-text-field>
                                   </v-flex>
                                 </v-layout>
                               </v-flex>
                               <v-flex xs12 sm6>
                                 <v-layout>
                                   <v-flex xs4 class="pt-4 subheading">
                                     <label
                                       class="right hidden-xs-only hidden-sm-only"
                                     >Medical Notes:</label>
                                     <label
                                       class="right hidden-lg-only hidden-md-only hidden-xl-only"
                                     >Medical:</label>
                                   </v-flex>
                                   <v-flex xs8 class="ml-3">
                                     <v-text-field
                                       v-model="addStudents.medicalNotes"
                                       placeholder="Fill your Medical Notes"
                                       required
                                     ></v-text-field>
                                   </v-flex>
                                 </v-layout>
                               </v-flex>
                             </v-layout>
                             <v-layout wrap>
                               <v-flex xs12 sm6>
                                 <v-layout>
                                   <v-flex xs4 class="pt-4 subheading">
                                     <label class="right">Height:</label>
                                   </v-flex>
                                   <v-flex xs8 class="ml-3">
                                     <v-text-field
                                       v-model="addStudents.height"
                                       placeholder="Fill your Height"
                                       required
                                     ></v-text-field>
                                   </v-flex>
                                 </v-layout>
                               </v-flex>
                               <v-flex xs12 sm6>
                                 <v-layout>
                                   <v-flex xs4 class="pt-4 subheading">
                                     <label class="right">Weight:</label>
                                   </v-flex>
                                   <v-flex xs8 class="ml-3">
                                     <v-text-field
                                       v-model="addStudents.weight"
                                       placeholder="Fill your Weight"
                                       required
                                     ></v-text-field>
                                   </v-flex>
                                 </v-layout>
                               </v-flex>
                             </v-layout>
                             <v-layout wrap>
                               <v-flex xs12 sm6>
                                 <v-layout>
                                   <v-flex xs4 class="pt-4 subheading">
                                     <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
                                     <label
                                       class="right hidden-lg-only hidden-md-only hidden-xl-only"
                                     >Uplaod :</label>
                                   </v-flex>
                                   <v-flex xs8 class="ml-3">
                                     <v-text-field
                                       label="Select Image"
                                       @click="pickFile"
                                       v-model="imageName"
                                       append-icon="attach_file"
                                     ></v-text-field>
                                   </v-flex>
                                 </v-layout>
                               </v-flex>
                               <v-flex xs12 sm6>
                                 <v-layout>
                                   <v-flex xs4 class="pt-4 subheading">
                                     <label
                                       class="right hidden-xs-only hidden-sm-only"
                                     >Academic Year:</label>
                                     <label
                                       class="right hidden-lg-only hidden-md-only hidden-xl-only"
                                     >Year:</label>
                                   </v-flex>
                                   <v-flex xs8 class="ml-3">
                                     <v-text-field
                                       v-model="addStudents.establishmentYear"
                                       placeholder="fill your Academic Year"
                                       name="state"
                                       type="number"
                                       :rules="establishmentYearRules"
                                       required
                                     ></v-text-field>
                                   </v-flex>
                                 </v-layout>
                               </v-flex>
                             </v-layout>
                             <v-layout wrap>
                               <v-flex xs12 sm6>
                                 <v-layout>
                                   <v-flex xs4 class="pt-4 subheading">
                                     <label class="right hidden-xs-only hidden-sm-only">Roll Number:</label>
                                     <label
                                       class="right hidden-lg-only hidden-md-only hidden-xl-only"
                                     >Roll No:</label>
                                   </v-flex>
                                   <v-flex xs8 class="ml-3">
                                     <v-text-field
                                       v-model="addStudents.rollNo"
                                       placeholder="Fill your Roll Number"
                                       required
                                     ></v-text-field>
                                   </v-flex>
                                 </v-layout>
                               </v-flex>
                               <v-flex xs12 sm6 class="hidden-xs-only hidden-sm-only">
                                 <v-layout>
                                   <v-flex xs4 sm4 class="pt-4 subheading">
                                     <label class="right pr-4">Present Address:</label>
                                   </v-flex>
                                   <v-flex xs8 sm8 class="ml-3">
                                     <v-text-field
                                       name="input-4-3"
                                       v-model="addStudents.presentAddress"
                                       :rules="presentAddress"
                                       placeholder="fill Your present Address"
                                       required
                                     ></v-text-field>
                                   </v-flex>
                                 </v-layout>
                               </v-flex>
                             </v-layout>
                             <v-layout class="hidden-xs-only hidden-sm-only" wrap>
                               <v-flex xs12 sm6>
                                 <v-layout>
                                   <v-flex xs4 sm4 class="pt-4 subheading addressForm">
                                     <label class="right">Permanent Address:</label>
                                   </v-flex>
                                   <v-flex xs12 sm8 class="ml-3">
                                     <v-text-field
                                       name="input-4-3"
                                       v-model="addStudents.permanentAddress"
                                       :rules="permanentAddress"
                                       placeholder="fill Your Permanent Address"
                                       required
                                     ></v-text-field>
                                   </v-flex>
                                 </v-layout>
                               </v-flex>
                             </v-layout>
                             <v-layout class="hidden-lg-only hidden-md-only hidden-xl-only" wrap>
                               <v-flex xs12 sm12>
                                 <v-layout>
                                   <v-flex xs12 sm12 class="pt-4 subheading text-xs-center">
                                     <label class>Present Address :</label>
                                   </v-flex>
                                 </v-layout>
                                 <v-layout>
                                   <v-flex xs12 sm12>
                                     <v-textarea
                                       name="input-4-3"
                                       v-model="addStudents.presentAddress"
                                       :rules="presentAddress"
                                       placeholder="fill Your present Address"
                                       required
                                     ></v-textarea>
                                   </v-flex>
                                 </v-layout>
                               </v-flex>
                               <v-flex xs12 sm12>
                                 <v-layout>
                                   <v-flex
                                     xs12
                                     sm12
                                     class="pt-4 pr-4 subheading text-xs-center addressForm"
                                   >
                                     <label>Permanent addr:</label>
                                   </v-flex>
                                 </v-layout>
                                 <v-layout>
                                   <v-flex xs12 sm12>
                                     <v-textarea
                                       name="input-4-3"
                                       v-model="addStudents.permanentAddress"
                                       :rules="permanentAddress"
                                       placeholder="fill Your Permanent Address"
                                       required
                                     ></v-textarea>
                                   </v-flex>
                                 </v-layout>
                               </v-flex>
                             </v-layout>
                             <v-layout>
                               <v-flex xs12 sm12>
                                 <v-layout>
                                   <v-flex xs6>
                                     <v-btn round dark @click="e2 = 1">Back</v-btn>
                                   </v-flex>
                                   <v-flex xs6>
                                     <v-btn
                                       @click="submit"
                                       round
                                       dark
                                       :loading="loading"
                                       class="right"
                                     >Add</v-btn>
                                   </v-flex>
                                 </v-layout>
                               </v-flex>
                             </v-layout>
                           </v-form>
                         </v-flex>
                       </v-stepper-content>
                     </v-stepper-items>
                   </v-stepper>
                 </v-app>
               </div>
             </v-flex>
           </v-layout>
         </v-container>
       </v-tab-item>
     </v-tabs>
     <div class="loader" v-if="showLoader">
       <v-progress-circular indeterminate color="white"></v-progress-circular>
     </div>
   </div>
 </template>
 <script>
 import http from "@/Services/http.js";
 import moment from "moment";
 import countryList from "@/script/country.js";
+import parent from '@/script/parents.js'
 export default {
   data: () => ({
     e2: 0,
     showParent: true,
     showNext: false,
     snackbar: false,
     y: "top",
     x: "right",
     mode: "",
     timeout: 3000,
     text: "",
     showLoader: false,
     loading: false,
     date: null,
     search: "",
     menu: false,
     menu1: false,
     dialog: false,
     dialog1: false,
     valid: true,
     isActive: true,
     newActive: false,
     addclass: [],
     addSection: [],
     gender: ["Male", "Female"],
     pagination: {
       rowsPerPage: 15
     },
     imageData: {},
     imageName: "",
     imageUrl: "",
     imageFile: "",
     nameRules: [v => !!v || " Full Name is required"],
     dateRules: [v => !!v || " DOB is required"],
     cityRules: [v => !!v || " City Name is required"],
     pincode: [v => !!v || " Pincode is required"],
     country: [v => !!v || " Country Name is required"],
     permanentAddress: [v => !!v || " Permanent Address is required"],
     presentAddress: [v => !!v || " Present Address  is required"],
     mobileNoRules: [v => !!v || "Mobile Number is required"],
     stateRules: [v => !!v || "State Name is required"],
     classRules: [v => !!v || " Class Name is required"],
     sectionRules: [v => !!v || " Section Name is required"],
     genderRules: [v => !!v || " Select Gender is required"],
     fatherNameRules: [v => !!v || " Father Name is required"],
     fatheCellNoRules: [v => !!v || " father Cell Number  is required"],
     motherNameRules: [v => !!v || " Mother Name  is required"],
     motherCellNoRules: [v => !!v || " Mother Cell Number is required"],
     establishmentYearRules: [v => !!v || " Academic Year  is required"],
     errorMessages: "",
     emailRules: [
       v => !!v || "E-mail is required",
       v =>
         /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
         "E-mail must be valid"
     ],
     countries: [],
     headers: [
       {
         text: "Roll No.",
         align: "center",
         sortable: false,
         value: "rollNo"
       },
       {
         text: "Profile Pic",
         value: "profilePicUrl",
         sortable: false,
         align: "center"
       },
       { text: "Name", value: "name", sortable: false, align: "center" },
       { text: "Email", value: "email", sortable: false, align: "center" },
       { text: "Dob", value: "dob", sortable: false, align: "center" },
       { text: "Gender", value: "gender", sortable: false, align: "center" },
       {
         text: "Father Name",
         value: "fatherName",
         sortable: false,
         align: "center"
       },
       {
         text: "Mother Name",
         value: "motherName",
         sortable: false,
         align: "center"
       },
       {
         text: "Academic Year",
         value: "establishmentYear",
         sortable: false,
         align: "center"
       },
       { text: "Mobile No", value: "mobile", sortable: false, align: "center" },
       { text: "Action", value: "", sortable: false, align: "center" }
     ],
     desserts: [],
     parentId: "",
     editedIndex: -1,
     parentData: {},
     addStudents: {
       role: "STUDENT",
       name: "",
       email: "",
       date: "",
       city: "",
       pincode: "",
       country: "",
       permanentAddress: "",
       presentAddress: "",
       mobile: "",
       state: "",
       gender: "",
       select: "",
       selectSection: "",
       bloodGroup: "",
       allergies: "",
       medicalNotes: "",
       height: "",
       weight: "",
       rollNo: "",
       establishmentYear: new Date().getFullYear()
     },
     selectStudents: {
       select: "",
       selectSection: ""
     },
     editedItem: {
       role: "STUDENT",
       name: "",
       email: "",
       dob: "",
       city: "",
       pincode: "",
       country: "",
       permanentAddress: "",
       presentAddress: "",
       mobile: "",
       state: "",
       gender: "",
       select: "",
       selectSection: "",
       bloodGroup: "",
       allergies: "",
       medicalNotes: "",
       height: "",
       weight: "",
       rollNo: "",
       establishmentYear: new Date().getFullYear()
     }
   }),
   watch: {
     menu(val) {
       val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
     },
     menu1(val) {
       val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
     }
   },
   methods: {
     findStudents() {
       this.showLoader = true;
       http()
         .get("/getStudentWithClass", {
           params: {
             classId: this.selectStudents.select,
             sectionId: this.selectStudents.selectSection
           }
         })
         .then(response => {
           this.desserts = response.data.data;
           this.showLoader = false;
           console.log("getSectionsList=====>", this.addSection);
         })
         .catch(err => {
           console.log("err====>", err);
           this.showLoader = false;
         });
     },
     getSections(_id) {
       var token = this.$store.state.token;
       this.showLoader = true;
       http()
         .get(
           "/getSectionsList",
           { params: { classId: _id } },
           {
             headers: { Authorization: "Bearer " + token }
           }
         )
         .then(response => {
           this.addSection = response.data.data;
           this.showLoader = false;
           // console.log("getSectionsList=====>", this.addSection);
         })
         .catch(err => {
           this.showLoader = false;
           // console.log("err====>", err);
           // this.$router.replace({ path: '/' });
         });
     },
     getSection(_id) {
       var token = this.$store.state.token;
       this.showLoader = true;
       http()
         .get(
           "/getSectionsList",
           { params: { classId: _id } },
           {
             headers: { Authorization: "Bearer " + token }
           }
         )
         .then(response => {
           this.addSection = response.data.data;
           this.showLoader = false;
           // console.log("getSectionsList=====>", this.addSection);
         })
         .catch(err => {
           this.showLoader = false;
           // console.log("err====>", err);
           // this.$router.replace({ path: '/' });
         });
     },
     pickFile() {
       this.$refs.image.click();
     },
     dates: function(date) {
       return moment(date).format("MMMM DD, YYYY");
     },
     onFilePicked(e) {
       // console.log(e)
       const files = e.target.files;
       this.imageData.upload = e.target.files[0];
       if (files[0] !== undefined) {
         this.imageName = files[0].name;
         if (this.imageName.lastIndexOf(".") <= 0) {
           return;
         }
         const fr = new FileReader();
         fr.readAsDataURL(files[0]);
         fr.addEventListener("load", () => {
           this.imageUrl = fr.result;
           this.imageFile = files[0]; // this is an image file that can be sent to server...
           this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
         });
       } else {
         this.imageName = "";
         this.imageFile = "";
         this.imageUrl = "";
       }
     },
     // getStudentList() {
     //   this.showLoader = true;
     //   var token = this.$store.state.token;
     //   http()
     //     .get("/getStudentsList", {
     //       headers: { Authorization: "Bearer " + token }
     //     })
     //     .then(response => {
     //       this.desserts = response.data.data;
     //       this.showLoader = false;
     //       // console.log("getStudentList=====>",this.desserts)
     //     })
     //     .catch(err => {
     //       // console.log("err====>", err);
     //       this.showLoader = false;
     //       this.$router.replace({ path: "/" });
     //     });
     // },
     editItem(item) {
       this.editedIndex = this.desserts.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.editedItem.fatherName = item.parentId.fatherName;
       this.editedItem.fatherCellNo = item.parentId.fatherCellNo;
       this.editedItem.motherName = item.parentId.motherName;
       this.editedItem.motherCellNo = item.parentId.motherCellNo;
       this.editedItem.dob =
         this.editedItem.dob != undefined
           ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10))
           : (this.editedItem.dob = "");
       this.dialog = true;
     },
     profile(item) {
       console.log("item", item);
       this.editedIndex = this.desserts.indexOf(item);
       this.editedItem = Object.assign({}, item);
       this.editedItem.fatherName = item.parentId.fatherName;
       this.editedItem.fatherCellNo = item.parentId.fatherCellNo;
       this.editedItem.motherName = item.parentId.motherName;
       this.editedItem.motherCellNo = item.parentId.motherCellNo;
       this.dialog1 = true;
     },
     deleteItem(item) {
       let deleteStudent = {
         studentId: item._id
       };
       http()
         .delete(
           "/deleteStudent",
           confirm("Are you sure you want to delete this?") && {
             params: deleteStudent
           }
         )
         .then(response => {
           // console.log("deleteUers",deleteStudent)
           if ((this.snackbar = true)) {
             this.text = "Successfully delete Existing Student";
           }
           this.getStudentList();
         })
         .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()) {
         let addStudent = {
           parentId: this.parentId,
           name: this.addStudents.name,
           email: this.addStudents.email,
           role: this.addStudents.role,
           dob: this.addStudents.date,
           city: this.addStudents.city,
           pincode: this.addStudents.pincode,
           country: this.addStudents.country,
           permanentAddress: this.addStudents.permanentAddress,
           presentAddress: this.addStudents.presentAddress,
           mobile: this.addStudents.mobile,
           state: this.addStudents.state,
           gender: this.addStudents.gender,
           establishmentYear: this.addStudents.establishmentYear,
           classId: this.addStudents.select,
           sectionId: this.addStudents.selectSection,
           bloodGroup: this.addStudents.bloodGroup,
           allergies: this.addStudents.allergies,
           medicalNotes: this.addStudents.medicalNotes,
           height: this.addStudents.height,
           weight: this.addStudents.weight,
           rollNo: this.addStudents.rollNo
         };
         if (this.imageUrl) {
           var str = this.imageUrl;
           const [baseUrl, imageUrl] = str.split(/,/);
           addStudent.upload = imageUrl;
         }
         this.loading = true;
         http()
           .post("/createStudent", addStudent)
           .then(response => {
             console.log(addStudent);
             if ((this.snackbar = true)) {
               this.text = "New Student added successfully";
             }
             // this.getStudentList();
             this.clear();
             this.loading = false;
           })
           .catch(error => {
             // console.log(error);
             if ((this.snackbar = true)) {
               this.text = error.response.data.message;
             }
             this.loading = false;
           });
       }
     },
     clear() {
       this.$refs.form.reset();
       this.imageUrl = "";
     },
     save() {
       let editStudent = {
         studentId: this.editedItem._id,
         name: this.editedItem.name,
         email: this.editedItem.email,
         role: this.editedItem.role,
         dob: this.editedItem.dob,
         city: this.editedItem.city,
         pincode: this.editedItem.pincode,
         country: this.editedItem.country,
         permanentAddress: this.editedItem.permanentAddress,
         presentAddress: this.editedItem.presentAddress,
         mobile: this.editedItem.mobile,
         state: this.editedItem.state,
         gender: this.editedItem.gender,
         establishmentYear: this.editedItem.establishmentYear,
         classId: this.editedItem.select,
         sectionId: this.editedItem.selectSection,
         bloodGroup: this.editedItem.bloodGroup,
         allergies: this.editedItem.allergies,
         medicalNotes: this.editedItem.medicalNotes,
         height: this.editedItem.height,
         weight: this.editedItem.weight,
         rollNo: this.editedItem.rollNo
       };
       if (this.imageUrl) {
         var str = this.imageUrl;
         const [baseUrl, imageUrl] = str.split(/,/);
         editStudent.upload = imageUrl;
       }
       http()
         .put("/updateStudent", editStudent)
         .then(response => {
           this.snackbar = true;
           this.text = "Successfully Student Existing User";
           this.imageUrl = "";
           this.findStudents();
           this.close();
         })
         .catch(error => {
           // console.log(error);
           if ((this.snackbar = true)) {
             this.text = error.response.data.statusText;
           }
         });
     },
     submitParentDetails() {
       if (this.$refs.parentForm.validate()) {
         let addparentDetails = {
           email: this.parentData.email,
           fatherName: this.parentData.fatherName,
           fatherCellNo: this.parentData.fatherCellNo,
           motherName: this.parentData.motherName,
           motherCellNo: this.parentData.motherCellNo,
           role: "PARENT"
         };
         this.loading = true;
         http()
           .post("/createParent", addparentDetails)
           .then(response => {
             this.parentId = response.data.data.id;
             this.e2 = 2;
             if ((this.snackbar = true)) {
               this.text = "successfully";
             }
             // this.getStudentList();
             this.clear();
             this.loading = false;
           })
           .catch(error => {
             console.log(error.response.data);
             if ((this.snackbar = true)) {
               this.text = error.response.data.message;
               this.text = error.response.data.statusText;
             }
             this.loading = false;
           });
       }
     },
     getParentDetails() {
       if (this.parentData.email) {
         http()
           .get("getParticularParent", {
             params: { email: this.parentData.email },
             headers: {
               Authorization: "Bearer " + this.$store.state.token
             }
           })
           .then(response => {
             this.showNext = true;
             this.showParent = false;
             this.parentData = response.data.data;
             this.parentId = response.data.data._id;
           })
           .catch(error => {
             console.log("err====>", error.response.data.message);
           });
       }
     }
   },
   mounted() {
     const getCountryList = countryList();
     this.countries = getCountryList;
     var token = this.$store.state.token;
     http()
       .get("/getClassesList", {
         headers: { Authorization: "Bearer " + token }
       })
       .then(response => {
         this.addclass = response.data.data;
       })
       .catch(error => {
         this.showLoader = false;
         if (error.response.status === 401) {
           this.$router.replace({ path: "/" });
           this.$store.dispatch("setToken", null);
           this.$store.dispatch("Id", null);
           this.$store.dispatch("Role", null);
         }
       });
   },
   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>
 .active {
   background-color: gray;
   color: white !important;
 }
 .activebtn {
   color: black !important;
 }
 </style>

src/schoolApi/apiCollection.js

Diff comments View file @29ac0db

File was created	1	// import schoolApi from "./schoolApi";
	2	// // import GitHubRepository from "./gitHubRepository";
	3
	4	// const repositories = {
	5	// posts: schoolApi
	6	// // gitHub: GitHubRepository
	7	// // other repositories ...
	8	// };
	9
	10	// export const apiCollection = {
	11	// get: name => repositories[name]
	12	// };

src/schoolApi/schoolApi.js

Diff comments View file @29ac0db

File was created	1	// import http from "@/Services/http.js";
	2
	3	// const resource = "/getAllSections";
	4	// export default {
	5	// get() {
	6	// return http().get(`${resource}`)
	7	// },
	8
	9	// // getPost(postId) {
	10	// // return Repository.get(`${resource}/${postId}`);
	11	// // },
	12
	13	// // createPost(payload) {
	14	// // return Repository.post(`${resource}`, payload);
	15	// // }
	16	// };

src/script/students.js

Diff comments View file @29ac0db

1	export default () => {	1	export default () => {
2
3	const students = [{	2	const students = [{
4	"name": "Rishav Singla",	3	"name": "Rishav Singla",
5	"email": "rsingla.rishu@gmail.com",	4	"email": "rsingla.rishu@gmail.com",
6	"className": "1",	5	"className": "1",
7	"sectionName": "A",	6	"sectionName": "A",
8	"rollNo": "1",	7	"rollNo": "1",
9	"dob": "1993-10-08",	8	"dob": "1993-10-08",
10	"gender": "Male",	9	"gender": "Male",
11	"bloodGroup": "A+",	10	"bloodGroup": "A+",
12	"mobile": "9914092452",	11	"mobile": "9914092452",
13	"height": "5'11",	12	"height": "5'11",
14	"medicalNotes": "No",	13	"medicalNotes": "No",
15	"city": "Chandigarh",	14	"city": "Chandigarh",
16	"country": "India",	15	"country": "India",
17	"presentAddress": "Mohali Sector ",	16	"presentAddress": "Mohali Sector ",
18	"state": "Punjab",	17	"state": "Punjab",
19	"allergies": "No",	18	"allergies": "No",
20	"establishmentYear": "2019",	19	"establishmentYear": "2019",
21	"fatherCellNo": "09988772222",	20	"fatherCellNo": "09988772222",
22	"fatherName": "Raj",	21	"fatherName": "Raj",
23	"parentEmail": "rajkumar123@gmail.com",	22	"parentEmail": "rajkumar123@gmail.com",
24	"motherCellNo": "8877112266",	23	"motherCellNo": "8877112266",
25	"motherName": "Simran",	24	"motherName": "Simran",
26	"permanentAddress": "Mohali",	25	"permanentAddress": "Mohali",
27	"pincode": "160062",	26	"pincode": "160062",
28	"presentAddress": "Mohali Sector ",	27	"presentAddress": "Mohali Sector ",
29	"role": 4,	28	"role": 4,
30	"rollNo": "1",	29	"rollNo": "1",
31	"weight": "72"	30	"weight": "72"
32	},	31	},
33	{	32	{
34	"name": "Shubham Chugh",	33	"name": "Shubham Chugh",
35	"email": "shubham@theideazfactory.com",	34	"email": "shubham@theideazfactory.com",
36	"className": "10",	35	"className": "10",
37	"sectionName": "A",	36	"sectionName": "A",
38	"rollNo": "2",	37	"rollNo": "2",
39	"dob": "1994-05-29",	38	"dob": "1994-05-29",
40	"gender": "Male",	39	"gender": "Male",
41	"bloodGroup": "A+",	40	"bloodGroup": "A+",
42	"mobile": "8077362128",	41	"mobile": "8077362128",
43	"height": "5'8",	42	"height": "5'8",
44	"medicalNotes": "No",	43	"medicalNotes": "No",
45	"motherCellNo": "7878654323",	44	"motherCellNo": "7878654323",
46	"city": "Chandigarh",	45	"city": "Chandigarh",
47	"country": "India",	46	"country": "India",
48	"presentAddress": "#1571, ground floor, sector 7C",	47	"presentAddress": "#1571, ground floor, sector 7C",
49	"state": "Chandigarh",	48	"state": "Chandigarh",
50	"allergies": "No",	49	"allergies": "No",
51	"establishmentYear": "2019",	50	"establishmentYear": "2019",
52	"parentEmail": "SureshKumar321@gmail.com",	51	"parentEmail": "SureshKumar321@gmail.com",
53	"fatherCellNo": "09898787865",	52	"fatherCellNo": "09898787865",
54	"fatherName": "Suresh Kumar",	53	"fatherName": "Suresh Kumar",
55	"motherName": "Shinki",	54	"motherName": "Shinki",
56	"permanentAddress": "Sector 43 Chandigarh",	55	"permanentAddress": "Sector 43 Chandigarh",
57	"pincode": " 160036",	56	"pincode": " 160036",
58	"presentAddress": "Sector 43 Chandigarh",	57	"presentAddress": "Sector 43 Chandigarh",
59	"role": 4,	58	"role": 4,
60	"rollNo": "2",	59	"rollNo": "2",
61	"weight": "70"	60	"weight": "70"
62	},	61	},
63	]	62	]
64	return students;	63	return students;
65	}	64	}