viithiisys / School-Management-dashboard

Browse Code »

Commit 25205ccca8eb128374c75d99af940c04acf5ab0c

Authored by Shikha Mishra 2020-02-12 06:03:38 -0500

1 parent 7d08167583

Exists in master and in 3 other branches

show school logo and name modification in some pages and done task of global payment

Showing 10 changed files with 320 additions and 269 deletions Show diff stats

src/Services/http.js

Diff comments View file @25205cc

1	import axios from 'axios'	1	import axios from 'axios'
2	import store from '@/store/store'	2	import store from '@/store/store'
3		3
4	const baseDomain = "http://15.206.52.174:8001/v1";	4	const baseDomain = "http://15.206.52.174:8001/v1";
5		5
6	const baseURL = `${baseDomain}`;	6	const baseURL = `${baseDomain}`;
7		7	var token = ""
		8	if (store.state.role === "ADMIN") {
		9	token = `${store.state.token}`
		10	} else if (store.state.schoolRole === "SUPERADMIN") {
		11	token = `${store.state.schoolToken}`
		12	}
8	export default () => {	13	export default () => {
9	return axios.create({	14	return axios.create({
10	// baseURL: 'http://192.168.0.105:3002/v1',	15	// baseURL: 'http://192.168.0.127:3002/v1',
11	baseURL,	16	baseURL,
12	headers: {	17	headers: {
13	Authorization: `Bearer ${store.state.token}`	18	Authorization: `Bearer ${token}`
14	}	19	}
15	})	20	})
16	}	21	}

src/components/pageHeader/AppToolbar.vue

Diff comments View file @25205cc

 <template>
   <v-toolbar flat class="white pt-2" fixed app>
     <v-toolbar-title>
       <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide darkBlue-color"></v-toolbar-side-icon>
     </v-toolbar-title>
     <!-- ****** SEARCH ALL EXISTING STUDENTS ****** -->
     <v-flex xs12 class="white">
       <!-- <v-text-field
         flat
         append-icon="search"
         label="Seacrh"
         class="pl-3"
         color="white"
         @input.native="emitSearch"
         type="text"
         dark
       ></v-text-field>-->
       <v-toolbar-title class="header-route-name pl-2">{{ $route.name }}</v-toolbar-title>
     </v-flex>
     <v-spacer></v-spacer>
     <v-toolbar-items class="hidden-sm-and-down">
       <v-icon class="header-icon">notifications_none</v-icon>
     </v-toolbar-items>
     <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
       <v-btn icon large flat slot="activator">
         <v-avatar size="26">
           <img src="/static/icon/setting1.png" alt="icon" />
         </v-avatar>
       </v-btn>
       <v-list class="pa-0">
         <v-list-tile
           v-for="(item,index) in items"
           :to="!item.href ? { name: item.name } : null"
           :href="item.href"
           @click="item.click"
           ripple="ripple"
           :disabled="item.disabled"
           :target="item.target"
           rel="noopener"
           :key="index"
         >
           <v-list-tile-action v-if="item.icon">
             <v-icon class="iconSize">{{ item.icon }}</v-icon>
           </v-list-tile-action>
           <v-list-tile-content>
             <v-list-tile-title>{{ item.title }}</v-list-tile-title>
           </v-list-tile-content>
         </v-list-tile>
       </v-list>
     </v-menu>
   </v-toolbar>
 </template>
 <script>
 import http from "@/Services/http.js";
 export default {
   name: "app-toolbar",
   data: () => ({
     userName: "",
     search: "",
     userData: {},
     items: [
       {
         icon: "account_circle",
         href: "/resetPassword",
         title: "Change Password",
         click: e => {
           console.log(e);
         }
       },
       // {
       //   icon: 'settings',
       //   href: '#',
       //   title: 'Settings',
       //   click: (e) => {
       //     console.log(e);
       //   }
       // },
       {
         icon: "lock",
         href: "#",
         title: "Logout",
         click: e => {
           window.getApp.$emit("APP_LOGOUT");
         }
       }
     ]
   }),
   computed: {
     toolbarColor() {
       return this.$vuetify.options.extra.mainNav;
     }
   },
   mounted() {
     this.getUserData();
   },
   methods: {
     // emitSearch(ev) {
     //   this.$root.$emit("app:search", ev.target.value);
     // },
     handleDrawerToggle() {
       window.getApp.$emit("APP_DRAWER_TOGGLED");
     },
     handleFullScreen() {
       Util.toggleFullScreen();
     },
     getUserData() {
       http()
-        .get("/getParticularUserDetail")
+        .get("/getParticularUserDetail", {
+           headers: {
+            Authorization: "Bearer " + this.$store.state.token
+          }
+        })
         .then(response => {
           this.userData = response.data.data;
         })
         .catch(error => {
           // if (error.response.status === 401) {
           //   this.$router.replace({ path: "/" });
           //   this.$store.dispatch("setToken", null);
           //   this.$store.dispatch("Id", null);
           // }
         });
     }
   }
 };
 </script>
 <style>
 .v-icon {
   font-size: 30px;
 }
 .fixcolors {
   background: #444b54 !important;
 }
 @media screen and (min-width: 1270px) {
   .hide {
     display: none;
   }
   /* }
 @media screen and (max-width: 962px) {
 .imglogo{
     position: absolute;
     top: 13px;
     left: 13px !important;
     width: 70px;
     height: 24px;
 } */
 }
 @media screen and (max-width: 420px) {
   .v-list__tile {
     font-size: 14px;
     padding: 0 10px;
   }
   .name {
     font-size: 15px;
   }
 }
 </style>

src/pages/Account/globalPayment.vue

Diff comments View file @25205cc

1	<template>	1	<template>
2	<v-container fluid class="body-color">	2	<v-container fluid class="body-color">
3	<!-- **** EXISTING GLOBAL PAYMENT TABLE **** -->	3	<!-- **** EXISTING GLOBAL PAYMENT TABLE **** -->
4	<v-form ref="form" v-model="valid" lazy-validation>	4	<v-form ref="form" v-model="valid" lazy-validation>
5	<v-container fluid>	5	<v-container fluid>
6	<v-flex xs12 sm12 lg12>	6	<v-flex xs12 sm12 lg12>
7	<v-layout wrap>	7	<v-layout wrap>
8	<v-flex xs12 sm12 lg10>	8	<v-flex xs12 sm12 lg10>
9	<v-layout wrap>	9	<v-layout wrap>
10	<v-flex xs12 sm12 lg4>	10	<v-flex xs12 sm12 lg4>
11	<v-flex xs12 sm4 lg4 class="subheading">	11	<v-flex xs12 sm4 lg4 class="subheading">
12	<label class="mt-4">Class:</label>	12	<label class="mt-4">Class:</label>
13	</v-flex>	13	</v-flex>
14	<v-flex xs12 sm12 lg10>	14	<v-flex xs12 sm12 lg10>
15	<v-select	15	<v-select
16	:items="addclass"	16	:items="addclass"
17	label="Select Class"	17	label="Select Class"
18	v-model="selectStudents.selectClassId"	18	v-model="selectStudents.selectClassId"
19	item-text="classNum"	19	item-text="classNum"
20	item-value="_id"	20	item-value="_id"
21	name="Select Class"	21	name="Select Class"
22	:rules="classRules"	22	:rules="classRules"
23	@change="getSection()"	23	@change="getSection()"
24	required	24	required
25	></v-select>	25	></v-select>
26	</v-flex>	26	</v-flex>
27	</v-flex>	27	</v-flex>
28	<v-flex xs12 sm12 lg4>	28	<v-flex xs12 sm12 lg4>
29	<v-flex xs12 sm4 lg4 class="subheading">	29	<v-flex xs12 sm4 lg4 class="subheading">
30	<label class="mt-4">Section:</label>	30	<label class="mt-4">Section:</label>
31	</v-flex>	31	</v-flex>
32	<v-flex xs12 sm12 lg10 class>	32	<v-flex xs12 sm12 lg10 class>
33	<v-select	33	<v-select
34	:items="addSection"	34	:items="addSection"
35	label="Select Section"	35	label="Select Section"
36	v-model="selectStudents.selectSection"	36	v-model="selectStudents.selectSection"
37	item-text="name"	37	item-text="name"
38	item-value="_id"	38	item-value="_id"
39	name="Select Section"	39	name="Select Section"
40	:rules="sectionRules"	40	:rules="sectionRules"
41	@change="getStudents()"	41	@change="getStudents()"
42	required	42	required
43	></v-select>	43	></v-select>
44	</v-flex>	44	</v-flex>
45	</v-flex>	45	</v-flex>
46	<v-flex xs12 sm12 lg4>	46	<v-flex xs12 sm12 lg4>
47	<v-flex xs12 sm4 lg4 class="subheading">	47	<v-flex xs12 sm4 lg4 class="subheading">
48	<label class="mt-4">Student:</label>	48	<label class="mt-4">Student:</label>
49	</v-flex>	49	</v-flex>
50	<v-flex xs12 sm12 lg10 class>	50	<v-flex xs12 sm12 lg10 class>
51	<v-select	51	<v-select
52	:items="studentData"	52	:items="studentData"
53	label="Select Student"	53	label="Select Student"
54	v-model="selectStudents.selectId"	54	v-model="selectStudents.selectId"
55	item-text="name"	55	item-text="name"
56	item-value="_id"	56	item-value="_id"
57	:rules="studentRules"	57	:rules="studentRules"
58	required	58	required
59	></v-select>	59	></v-select>
60	</v-flex>	60	</v-flex>
61	</v-flex>	61	</v-flex>
62	</v-layout>	62	</v-layout>
63	</v-flex>	63	</v-flex>
64	<v-flex xs12 sm12 lg2>	64	<v-flex xs12 sm12 lg2>
65	<v-flex xs12 sm12 lg12>	65	<v-flex xs12 sm12 lg12>
66	<v-btn	66	<v-btn
67	@click="getInvoicesData()"	67	@click="getInvoicesData()"
68	round	68	round
69	dark	69	dark
70	:loading="loading"	70	:loading="loading"
71	class="right mt-4 open-dialog-button"	71	class="right mt-4 open-dialog-button"
72	>Search</v-btn>	72	>Search</v-btn>
73	</v-flex>	73	</v-flex>
74	</v-flex>	74	</v-flex>
75	</v-layout>	75	</v-layout>
76	</v-flex>	76	</v-flex>
77	</v-container>	77	</v-container>
78	</v-form>	78	</v-form>
79	<v-container fluid grid-list-md>	79	<v-container fluid grid-list-md>
80	<v-flex xs12>	80	<v-flex xs12>
81	<v-layout wrap>	81	<v-layout wrap>
82	<v-flex xs12 sm12 md4>	82	<v-flex xs12 sm12 md4>
83	<v-card	83	<v-card
84	flat	84	flat
85	class="pa-3"	85	class="pa-3"
86	v-for="(invoiceData,i) in studentInvoiceData"	86	v-for="(invoiceData,i) in studentInvoiceData"
87	:key="i"	87	:key="i"
88	v-if="i === 0"	88	v-if="i === 0"
89	>	89	>
90	<v-layout>	90	<v-layout>
91	<v-flex xs12>	91	<v-flex xs12>
92	<v-avatar	92	<v-avatar
93	size="80px"	93	size="80px"
94	style="margin: auto;display:block;margin-bottom:10px !important"	94	style="margin: auto;display:block;margin-bottom:10px !important"
95	>	95	>
96	<img src="/static/icon/user.png" v-if="!invoiceData.studentId.profilePicUrl" />	96	<img src="/static/icon/user.png" v-if="!invoiceData.studentId.profilePicUrl" />
97	<img	97	<img :src="invoiceData.studentId.profilePicUrl" v-else-if="invoiceData.studentId.profilePicUrl" />
98	:src="invoiceData.studentId.profilePicUrl"
99	v-else-if="invoiceData.studentId.profilePicUrl"
100	/>
101	</v-avatar>	98	</v-avatar>
102	</v-flex>	99	</v-flex>
103	</v-layout>	100	</v-layout>
104	<v-layout class="studentProfile">	101	<v-layout class="studentProfile">
105	<v-flex xs4 sm3 md3>	102	<v-flex xs4 sm3 md3>
106	<h4>	103	<h4>
107	<b>Name</b>	104	<b>Name</b>
108	</h4>	105	</h4>
109	</v-flex>	106	</v-flex>
110	<v-flex sm9 xs8 md9>	107	<v-flex sm9 xs8 md9>
111	<h4>: {{ invoiceData.studentId.name }}</h4>	108	<h4>: {{ invoiceData.studentId.name }}</h4>
112	</v-flex>	109	</v-flex>
113	</v-layout>	110	</v-layout>
114	<v-layout class="studentProfile">	111	<v-layout class="studentProfile">
115	<v-flex xs4 sm3 md3>	112	<v-flex xs4 sm3 md3>
116	<h4>	113	<h4>
117	<b>Class</b>	114	<b>Class</b>
118	</h4>	115	</h4>
119	</v-flex>	116	</v-flex>
120	<v-flex sm9 xs8 md9>	117	<v-flex sm9 xs8 md9>
121	<h4>: {{ invoiceData.classId.classNum }}</h4>	118	<h4>: {{ invoiceData.classId.classNum }}</h4>
122	</v-flex>	119	</v-flex>
123	</v-layout>	120	</v-layout>
124	<v-layout class="studentProfile">	121	<v-layout class="studentProfile">
125	<v-flex xs4 sm3 md3>	122	<v-flex xs4 sm3 md3>
126	<h4>	123	<h4>
127	<b>Roll No</b>	124	<b>Roll No</b>
128	</h4>	125	</h4>
129	</v-flex>	126	</v-flex>
130	<v-flex sm9 xs8 md9>	127	<v-flex sm9 xs8 md9>
131	<h4>: {{ invoiceData.studentId.rollNo }}</h4>	128	<h4>: {{ invoiceData.studentId.rollNo }}</h4>
132	</v-flex>	129	</v-flex>
133	</v-layout>	130	</v-layout>
134	</v-card>	131	</v-card>
135	</v-flex>	132	</v-flex>
136	<v-flex xs12 sm12 md8 v-show="showInvoiceTable">	133	<v-flex xs12 sm12 md8 v-show="showInvoiceTable">
137	<v-card>	134	<v-card class="transparent">
138	<v-data-table	135	<v-data-table
139	:headers="headers"	136	:headers="headers"
140	:items="studentInvoiceData"	137	:items="studentInvoiceData"
141	:search="search"	138	:search="search"
142	hide-actions	139	hide-actions
143	>	140	>
144	<template slot="items" slot-scope="props">	141	<template slot="items" slot-scope="props">
145	<td id="td" class="text-xs-center">{{ props.item.invoiceNumber }}</td>	142	<tr class="tr">
146	<td id="td" class="text-xs-center">{{ props.item.totalAmount }}</td>	143	<td class="td td-row text-xs-center">{{ props.item.invoiceNumber }}</td>
147	<td id="td" class="text-xs-center">{{ props.item.totalDiscount }}</td>	144	<td class="td td-row text-xs-center">{{ props.item.totalAmount }}</td>
148	<td id="td" class="text-xs-center">{{ props.item.totalSubTotal }}</td>	145	<td class="td td-row text-xs-center">{{ props.item.totalDiscount }}</td>
149	<td id="td" class="text-xs-center">{{ props.item.paymentStatus}}</td>	146	<td class="td td-row text-xs-center">{{ props.item.totalSubTotal }}</td>
150	<td id="td" class="text-xs-center">{{ dates(props.item.date) }}</td>	147	<td class="td td-row text-xs-center">{{ props.item.paymentStatus}}</td>
151	<td class="text-xs-center">	148	<td class="td td-row text-xs-center">{{ dates(props.item.date) }}</td>
152	<router-link	149	<td class="text-xs-center td td-row">
153	:to="{ name:'View Invoice',params: { viewInvoiceId:props.item._id } }"	150	<router-link
154	>	151	:to="{ name:'View Invoice',params: { viewInvoiceId:props.item._id } }"
155	<v-tooltip top>	152	>
156	<img	153	<v-tooltip top>
157	slot="activator"	154	<img
158	style="cursor:pointer; width:25px; height:18px; "	155	slot="activator"
159	@click="profile(props.item)"	156	style="cursor:pointer; width:25px; height:18px; "
160	src="/static/icon/eye1.png"	157	src="/static/icon/eye1.png"
161	/>	158	/>
162	<span>View</span>	159	<span>View</span>
163	</v-tooltip>	160	</v-tooltip>
164	</router-link>	161	</router-link>
165	</td>	162	</td>
		163	</tr>
166	</template>	164	</template>
167	<v-alert	165	<v-alert
168	slot="no-results"	166	slot="no-results"
169	:value="true"	167	:value="true"
170	color="error"	168	color="error"
171	icon="warning"	169	icon="warning"
172	>Your search for "{{ search }}" found no results.</v-alert>	170	>Your search for "{{ search }}" found no results.</v-alert>
173	</v-data-table>	171	</v-data-table>
174	</v-card>	172	</v-card>
175	</v-flex>	173	</v-flex>
176	</v-layout>	174	</v-layout>
177	</v-flex>	175	</v-flex>
178	<!-- &nbsp -->	176
179	<v-flex xs12>	177	<v-flex xs12>
180	<v-layout wrap>	178	<v-layout wrap>
181	<v-flex xs12 sm12 md8 v-show="showInvoiceTable">	179	<v-flex xs12 sm12 md12 v-show="showInvoiceTable">
182	<v-card>	180	<v-card class="transparent">
183	<v-data-table	181	<v-data-table
184	:headers="header"	182	:headers="header"
185	:items="studentInvoiceData"	183	:items="studentInvoiceData"
186	:search="search"	184	:search="search"
187	hide-actions	185	hide-actions
188	>	186	>
189	<template slot="items" slot-scope="props" >	187	<template slot="items" slot-scope="props">
190	<!-- <span v-for="feetype in props.item.feeType"> -->	188	<tr class="tr" v-for="feetype in props.item.feeType">
191	<!-- <td style="width:40px">{{ index + 1 }}</td> -->	189	<td class="td td-row">{{ props.index + 1}}</td>
192	<td id="td" class="text-xs-center" v-for="feetype in props.item.feeType">{{ feetype.feeTypeName}}</td>	190	<td
193	<td id="td" class="text-xs-center" v-for="feetype in props.item.feeType">{{ feetype.amount }}</td>	191	class="td td-row text-xs-center"
194	<td id="td" class="text-xs-center" v-for="feetype in props.item.feeType">{{ props.item.totalSubTotal - props.item.totalPaidAmount }}</td>	192	>{{ feetype.feeTypeName}}</td>
195	<td id="td" class="text-xs-center" v-for="feetype in props.item.feeType">{{ feetype.paidAmount }}</td>	193	<td
196	<!-- </span> -->	194	class="td td-row text-xs-center"
		195	>{{ feetype.amount }}</td>
		196	<td
		197	class="td td-row text-xs-center"
		198	>{{ props.item.totalSubTotal - props.item.totalPaidAmount }}</td>
		199	<td
		200	class="td td-row text-xs-center"
		201	>{{ feetype.paidAmount }}</td>
		202	<td
		203	class="td td-row text-xs-center"
		204	><input type="text" maxlength="20"></td>
		205	</tr>
197	</template>	206	</template>
198	<v-alert	207	<v-alert
199	slot="no-results"	208	slot="no-results"
200	:value="true"	209	:value="true"
201	color="error"	210	color="error"
202	icon="warning"	211	icon="warning"
203	>Your search for "{{ search }}" found no results.</v-alert>	212	>Your search for "{{ search }}" found no results.</v-alert>
204	</v-data-table>	213	</v-data-table>
205	</v-card>	214	</v-card>
206	</v-flex>	215	</v-flex>
207	</v-layout>	216	</v-layout>
208	</v-flex>	217	</v-flex>
209	</v-container>	218	</v-container>
210	<div class="loader" v-if="showLoader">	219	<div class="loader" v-if="showLoader">
211	<v-progress-circular indeterminate color="white"></v-progress-circular>	220	<v-progress-circular indeterminate color="white"></v-progress-circular>
212	</div>	221	</div>
213	</v-container>	222	</v-container>
214	</template>	223	</template>
215		224
216	<script>	225	<script>
217	import http from "@/Services/http.js";	226	import http from "@/Services/http.js";
218	import moment from "moment";	227	import moment from "moment";
219		228
220	export default {	229	export default {
221	data: () => ({	230	data: () => ({
222	snackbar: false,	231	snackbar: false,
223	showInvoiceTable: false,	232	showInvoiceTable: false,
224	y: "top",	233	y: "top",
225	x: "right",	234	x: "right",
226	mode: "",	235	mode: "",
227	timeout: 3000,	236	timeout: 3000,
228	text: "",	237	text: "",
229	showLoader: false,	238	showLoader: false,
230	loading: false,	239	loading: false,
231	search: "",	240	search: "",
232	valid: true,	241	valid: true,
233	addclass: [],	242	addclass: [],
234	// index: '',	243	// index: '',
235	feeType: {	244	feeType: {
236	amount: "",	245	amount: "",
237	discount: "",	246	discount: "",
238	totalPaidAmount: "",	247	totalPaidAmount: "",
239	subTotal: "",	248	subTotal: "",
240	feeTypeName: "",	249	feeTypeName: "",
241	userData: {}	250	userData: {}
242	},	251	},
243	feeTypeData: [],	252	feeTypeData: [],
244	selectStudents: {},	253	selectStudents: {},
245	addSection: [],	254	addSection: [],
246	classRules: [v => !!v \|\| " Class Name is required"],	255	classRules: [v => !!v \|\| " Class Name is required"],
247	sectionRules: [v => !!v \|\| " Section Name is required"],	256	sectionRules: [v => !!v \|\| " Section Name is required"],
248	studentRules: [v => !!v \|\| "Student Name is required"],	257	studentRules: [v => !!v \|\| "Student Name is required"],
249	headers: [	258	headers: [
250	{	259	{
251	text: "Invoice Number",	260	text: "Invoice Number",
252	align: "center",	261	align: "center",
253	sortable: false,	262	sortable: false,
254	value: "invoiceNumber"	263	value: "invoiceNumber"
255	},	264	},
256	{	265	{
257	text: "Total Pay",	266	text: "Total Pay",
258	value: "totalAmount",	267	value: "totalAmount",
259	sortable: false,	268	sortable: false,
260	align: "center"	269	align: "center"
261	},	270	},
262	{	271	{
263	text: "Weaver",	272	text: "Weaver",
264	value: "totalDiscount",	273	value: "totalDiscount",
265	sortable: false,	274	sortable: false,
266	align: "center"	275	align: "center"
267	},	276	},
268	{	277	{
269	text: " Total Collection",	278	text: " Total Collection",
270	value: "totalSubTotal",	279	value: "totalSubTotal",
271	sortable: false,	280	sortable: false,
272	align: "center"	281	align: "center"
273	},	282	},
274	{	283	{
275	text: "Clearance",	284	text: "Clearance",
276	value: "paymentStatus",	285	value: "paymentStatus",
277	sortable: false,	286	sortable: false,
278	align: "center"	287	align: "center"
279	},	288	},
280	{ text: "Payment Date", value: "date", sortable: false, align: "center" },	289	{ text: "Payment Date", value: "date", sortable: false, align: "center" },
281	{ text: "Action", value: "", sortable: false, align: "center" }	290	{ text: "Action", value: "", sortable: false, align: "center" }
282	],	291	],
283		292
284	header: [	293	header: [
285	// {	294	{
286	// text: "#",	295	text: "#",
287	// align: "center",	296	// align: "center",
288	// sortable: false	297	sortable: false
289	// },	298	},
290	{	299	{
291	text: "Fees Name",	300	text: "Fees Name",
292	align: "center",	301	align: "center",
293	sortable: false,	302	sortable: false,
294	value: "feeTypeName"	303	value: "feeTypeName"
295	},	304	},
296	{	305	{
297	text: "Fees Amount",	306	text: "Fees Amount",
298	align: "center",	307	align: "center",
299	sortable: false,	308	sortable: false,
300	value: "amount"	309	value: "amount"
301	},	310	},
302	{	311	{
303	text: "Due",	312	text: "Due",
304	align: "center",	313	align: "center",
305	sortable: false	314	sortable: false
306	},	315	},
307	{	316	{
308	text: "Paid Amount",	317	text: "Paid Amount",
309	align: "center",	318	align: "center",
310	sortable: false,	319	sortable: false,
311	value: "paidAmount"	320	value: "paidAmount"
		321	},
		322	{
		323	text: "Weaver",
		324	align: "center",
		325	sortable: false,
		326	value: "paidAmount"
312	}	327	}
313	],	328	],
314	studentData: [],	329	studentData: [],
315	studentInvoiceData: []	330	studentInvoiceData: []
316	}),	331	}),
317	methods: {	332	methods: {
318	dates: function(date) {	333	dates: function(date) {
319	return moment(date).format("MMMM DD, YYYY");	334	return moment(date).format("MMMM DD, YYYY");
320	},	335	},
321	getSection() {	336	getSection() {
322	var token = this.$store.state.token;	337	var token = this.$store.state.token;
323	this.showLoader = true;	338	this.showLoader = true;
324	http()	339	http()
325	.get(	340	.get(
326	"/getSectionsList",	341	"/getSectionsList",
327	{	342	{
328	params: {	343	params: {
329	classId: this.selectStudents.selectClassId,	344	classId: this.selectStudents.selectClassId,
330	schoolId: this.$store.state.schoolId	345	schoolId: this.$store.state.schoolId
331	}	346	}
332	},	347	},
333	{	348	{
334	headers: { Authorization: "Bearer " + token }	349	headers: { Authorization: "Bearer " + token }
335	}	350	}
336	)	351	)
337	.then(response => {	352	.then(response => {
338	this.addSection = response.data.data;	353	this.addSection = response.data.data;
339	this.showLoader = false;	354	this.showLoader = false;
340	// console.log("getSectionsList=====>", this.addSection);	355	// console.log("getSectionsList=====>", this.addSection);
341	})	356	})
342	.catch(error => {	357	.catch(error => {
343	this.showLoader = false;	358	this.showLoader = false;
344	// console.log("err====>", err);	359	// console.log("err====>", err);
345	// this.$router.replace({ path: '/' });	360	// this.$router.replace({ path: '/' });
346	});	361	});
347	},	362	},
348	getStudents() {	363	getStudents() {
349	this.showLoader = true;	364	this.showLoader = true;
350	http()	365	http()
351	.get("/getStudentWithClass", {	366	.get("/getStudentWithClass", {
352	params: {	367	params: {
353	classId: this.selectStudents.selectClassId,	368	classId: this.selectStudents.selectClassId,
354	sectionId: this.selectStudents.selectSection,	369	sectionId: this.selectStudents.selectSection,
355	schoolId: this.$store.state.schoolId	370	schoolId: this.$store.state.schoolId
356	}	371	}
357	})	372	})
358	.then(response => {	373	.then(response => {
359	this.studentData = response.data.data;	374	this.studentData = response.data.data;
360	this.showLoader = false;	375	this.showLoader = false;
361	})	376	})
362	.catch(err => {	377	.catch(err => {
363	console.log("err====>", err);	378	console.log("err====>", err);
364	this.showLoader = false;	379	this.showLoader = false;
365	});	380	});
366	},	381	},
367	getInvoicesData() {	382	getInvoicesData() {
368	this.showLoader = true;	383	this.showLoader = true;
369	this.showInvoiceTable = true;	384	this.showInvoiceTable = true;
370	http()	385	http()
371	.get("/getInvoicesList", {	386	.get("/getInvoicesList", {
372	params: {	387	params: {
373	classId: this.selectStudents.selectClassId,	388	classId: this.selectStudents.selectClassId,
374	studentId: this.selectStudents.selectId,	389	studentId: this.selectStudents.selectId,
375	schoolId: this.$store.state.schoolId	390	schoolId: this.$store.state.schoolId
376	}	391	}
377	})	392	})
378	.then(response => {	393	.then(response => {
379	this.studentInvoiceData = response.data.data;	394	this.studentInvoiceData = response.data.data;
380	console.log("this.studentInvoiceData", this.studentInvoiceData);	395	// console.log("this.studentInvoiceData", this.studentInvoiceData);
381	this.showLoader = false;	396	this.showLoader = false;
382	})	397	})
383	.catch(err => {	398	.catch(err => {
384	console.log("err====>", err);	399	console.log("err====>", err);
385	this.showLoader = false;	400	this.showLoader = false;
386	});	401	});
387	},	402	},
388	getAmmountDetails(feeTyp) {	403	getAmmountDetails(feeTyp) {
389	let feeType = {	404	let feeType = {
390	subTotal: "",	405	subTotal: "",
391	subParticularTotal: "",	406	subParticularTotal: "",
392	paidAmount: ""	407	paidAmount: ""
393	};	408	};
394	// ********* SUBTOTAL *********	409	// ********* SUBTOTAL *********
395	feeType.subTotal =	410	feeType.subTotal =
396	Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal);	411	Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal);
397	this.feeType.subTotal = feeType.subTotal.toFixed(2);	412	this.feeType.subTotal = feeType.subTotal.toFixed(2);
398	// ********* PAID-AMOUNT *********	413	// ********* PAID-AMOUNT *********
399	feeType.paidAmount =	414	feeType.paidAmount =
400	Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);	415	Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);
401	this.feeType.paidAmount = feeType.paidAmount.toFixed(2);	416	this.feeType.paidAmount = feeType.paidAmount.toFixed(2);
402	}	417	}
403	},	418	},
404	mounted() {	419	mounted() {
405	var token = this.$store.state.token;	420	var token = this.$store.state.token;
406	http()	421	http()
407	.get("/getClassesList", {	422	.get("/getClassesList", {
408	params: {	423	params: {
409	schoolId: this.$store.state.schoolId	424	schoolId: this.$store.state.schoolId
410	},	425	},
411	headers: { Authorization: "Bearer " + token }	426	headers: { Authorization: "Bearer " + token }
412	})	427	})
413	.then(response => {	428	.then(response => {
414	this.addclass = response.data.data;	429	this.addclass = response.data.data;
415	})	430	})
416	.catch(error => {	431	.catch(error => {
417	this.showLoader = false;	432	this.showLoader = false;
418	if (error.response.status === 401) {	433	if (error.response.status === 401) {
419	this.$router.replace({ path: "/" });	434	this.$router.replace({ path: "/" });
420	this.$store.dispatch("setToken", null);	435	this.$store.dispatch("setToken", null);
421	this.$store.dispatch("Id", null);	436	this.$store.dispatch("Id", null);
422	this.$store.dispatch("Role", null);	437	this.$store.dispatch("Role", null);
423	}	438	}
424	});	439	});
425	}	440	}
426	// created() {	441	// created() {
427	// this.$root.$on("app:search", search => {	442	// this.$root.$on("app:search", search => {
428	// this.search = search;	443	// this.search = search;
429	// });	444	// });
430	// },	445	// },
431	// beforeDestroy() {	446	// beforeDestroy() {
432	// // dont forget to remove the listener	447	// // dont forget to remove the listener
433	// this.$root.$off("app:search");	448	// this.$root.$off("app:search");
434	// }	449	// }
435	};	450	};
436	</script>	451	</script>
437		452
438		453
439	<style scoped>	454	<style scoped>
440	.studentProfile {	455	.studentProfile {

src/pages/Account/invoice.vue

Diff comments View file @25205cc

 <template>
   <v-container fluid class="body-color">
     <!-- ****** PROFILE VIEW SECTION DATA ******  -->
     <!-- <v-dialog v-model="dialog1" max-width="600px">
       <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 xs5 sm6>
                     <h5 class="right my-1">
                       <b>Class Name:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs5 sm6>
                     <h5 class="right my-1">
                       <b>Name:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.name }}</h5>
                   </v-flex>
                 </v-layout>
                 <v-layout>
                   <v-flex xs5 sm6>
                     <h5 class="right my-1">
                       <b>Class Incharge:</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>Session:</b>
                     </h5>
                   </v-flex>
                   <v-flex sm6 xs8>
                     <h5 class="my-1">{{ editedItem.paymentStatus }}</h5>
                   </v-flex>
                 </v-layout>
               </v-flex>
             </v-layout>
           </v-container>
         </v-card-text>
       </v-card>
     </v-dialog>-->
     <!-- ****** Invoice Table ****** -->
     <v-toolbar color="transparent" flat>
       <v-btn
         fab
         dark
         class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
         small
         @click="addInvoiceDialog = true"
       >
         <v-icon dark>add</v-icon>
       </v-btn>
       <v-btn
         round
         class="open-dialog-button hidden-sm-only hidden-xs-only"
         dark
         @click="addInvoiceDialog = true"
       >
         <v-icon class="white--text pr-1" size="20">add</v-icon>Add Invoice
       </v-btn>
       <v-spacer></v-spacer>
       <v-card-title class="body-1" v-show="show">
         <v-btn icon large flat @click="displaySearch">
           <v-avatar size="27">
             <img src="/static/icon/search.png" alt="icon" />
           </v-avatar>
         </v-btn>
       </v-card-title>
       <v-flex xs8 sm8 md3 lg2 v-show="showSearch">
         <v-layout>
           <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>
           <v-icon @click="closeSearch" color="error">close</v-icon>
         </v-layout>
       </v-flex>
     </v-toolbar>
     <v-data-table
       :headers="headers"
       :items="invoiceList"
       :pagination.sync="pagination"
       :search="search"
     >
       <template slot="items" slot-scope="props">
         <tr class="tr">
           <td class="td td-row">{{ props.index + 1 }}</td>
           <td class="text-xs-center td td-row">{{ props.item.studentId.name }}</td>
           <td class="text-xs-center td td-row">{{ props.item.classId.classNum }}</td>
           <td class="text-xs-center td td-row">{{ props.item.totalAmount }}</td>
           <td
             class="text-xs-center td td-row"
           >{{ props.item.totalAmount - props.item.totalSubTotal }}</td>
           <td
             class="text-xs-center td td-row"
           >{{ props.item.totalPaidAmount ? props.item.totalPaidAmount : 0}}</td>
           <td
             class="text-xs-center td td-row"
-          >{{ props.item.totalPaidAmount ? props.item.totalSubTotal - props.item.totalPaidAmount : props.item.totalSubTotal }}</td>
+          >{{ props.item.totalPaidAmount ? props.item.totalSubTotal  - props.item.totalPaidAmount  : props.item.totalSubTotal  }}</td>
           <td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'NOT_PAID'">
             <span
               class="red lighten-1 py-1 px-2 white--text paymentStatus"
             >{{ props.item.paymentStatus }}</span>
           </td>
           <td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'FULLY_PAID'">
             <span
               class="green lighten-1 py-1 px-2 white--text paymentStatus"
             >{{ props.item.paymentStatus }}</span>
           </td>
           <td class="text-xs-center td td-row" v-if="props.item.paymentStatus === 'PARTIALLY_PAID'">
             <span
               class="yellow darken-3 py-1 px-2 white--text paymentStatus"
             >{{ props.item.paymentStatus }}</span>
           </td>
           <td class="text-xs-center td td-row">{{ dates(props.item.date) }}</td>
           <td class="text-xs-center td td-row">
             <router-link :to="{ name:'View Invoice',params: { viewInvoiceId:props.item._id } }">
               <v-tooltip top>
                 <img
                   slot="activator"
                   style="cursor:pointer; width:25px; height:25px; "
                   class="mr-3"
                   src="/static/icon/view.png"
                 />
                 <span>View</span>
               </v-tooltip>
             </router-link>
             <span v-if="props.item.paymentStatus === 'NOT_PAID'">
               <router-link :to="{ name:'EditInvoice',params: { invoiceid:props.item._id }}" exact>
                 <v-tooltip top>
                   <img
                     slot="activator"
                     style="cursor:pointer; width:20px; height:18px; "
                     class="mr-3"
                     src="/static/icon/edit.png"
                   />
                   <span>Edit</span>
                 </v-tooltip>
               </router-link>
               <v-tooltip top>
                 <img
                   slot="activator"
                   style="cursor:pointer;width:20px; height:20px; "
                   class="mr-3"
                   @click="deleteItem(props.item)"
                   src="/static/icon/delete.png"
                 />
                 <span>Delete</span>
               </v-tooltip>
             </span>
           </td>
         </tr>
       </template>
       <v-alert
         slot="no-results"
         :value="true"
         color="error"
         icon="warning"
       >Your search for "{{ search }}" found no results.</v-alert>
     </v-data-table>
     <!-- ****** ADD INVOICE ****** -->
     <v-dialog v-model="addInvoiceDialog" max-width>
       <v-card flat class="text-xs-center white--text">
         <v-layout>
           <v-flex xs12  class="card-styles pa-2">
             <label class="title text-xs-center ">Add Invoice</label>
             <v-icon size="24" class="right white--text" @click="addInvoiceDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-flex xs12 sm12>
           <v-container fluid grid-list-md>
             <v-layout wrap>
               <v-flex xs12 sm12 md5>
                 <v-card flat>
                   <v-toolbar dark class="card-styles" flat>
                     <v-spacer></v-spacer>
                       <h3>Invoice</h3>
                     <v-spacer></v-spacer>
                   </v-toolbar>
                   <v-form ref="form" v-model="valid" lazy-validation class="py-4">
                     <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 xs6 class="ml-3">
                         <v-select
                           :items="addclass"
                           label="Select Class"
                           v-model="invoiceData.classNum"
                           item-text="classNum"
                           item-value="_id"
                           @change="getAllStudents()"
                           :rules="classRules"
                           required
                         ></v-select>
                       </v-flex>
                     </v-layout>
                     <v-layout>
                       <v-flex xs4 class="pt-4 subheading">
                         <label class="right hidden-xs-only hidden-sm-only">Select Student:</label>
                         <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Student:</label>
                       </v-flex>
                       <v-flex xs6 class="ml-3">
                         <v-select
                           :items="studentList"
                           label="Select Student"
                           v-model="invoiceData.studentId"
                           item-text="name"
                           item-value="_id"
                           :rules="inchargeRules"
                           @change="selectAllStudent()"
                           required
                         ></v-select>
                       </v-flex>
                     </v-layout>
                     <v-layout>
                       <v-flex xs4 class="pt-4 subheading">
                         <label class="right">Date:</label>
                       </v-flex>
                       <v-flex xs6 class="ml-3">
                         <v-menu
                           ref="menu1"
                           :close-on-content-click="false"
                           v-model="menu1"
                           :nudge-right="40"
                           lazy
                           :return-value.sync="invoiceData.date"
                           transition="scale-transition"
                           offset-y
                           full-width
                           min-width="290px"
                         >
                           <v-text-field
                             slot="activator"
                             :rules="dateRules"
                             v-model="invoiceData.date"
                             placeholder="Select date"
                           ></v-text-field>
                           <v-date-picker
                             v-model="invoiceData.date"
                             @input="$refs.menu1.save(invoiceData.date)"
                           ></v-date-picker>
                         </v-menu>
                       </v-flex>
                     </v-layout>
                     <v-layout>
                       <v-flex xs4 class="pt-4 subheading">
                         <label class="right hidden-xs-only hidden-sm-only">Payment Status:</label>
                         <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Payment:</label>
                       </v-flex>
                       <v-flex xs6 class="ml-3">
                         <v-select
                           :items="paymentStatus"
                           v-model="invoiceData.paymentStatus"
                           item-text="name"
                           item-value="value"
                           label="Select Payment Status"
                           @change="getPayMethodList"
                           :rules="paymentStatusRules"
                           required
                         ></v-select>
                       </v-flex>
                     </v-layout>
                     <v-layout v-show="showPayMethods">
                       <v-flex xs4 class="pt-4 subheading">
                         <label class="right">Payment Method:</label>
                       </v-flex>
                       <v-flex xs6 class="ml-3">
                         <v-select
                           :items="paymentMethods"
                           v-model="invoiceData.paymentMethod"
                           label="Select Payment Method"
                           required
                         ></v-select>
                       </v-flex>
                     </v-layout>
                     <v-layout>
                       <v-flex xs12 sm11>
                         <v-card-actions>
                           <v-spacer></v-spacer>
                           <v-btn @click="clear" round dark class="clear-button">clear</v-btn>
                           <v-btn @click="submit" round dark :loading="loading"  class="add-button">Add</v-btn>
                         </v-card-actions>
                       </v-flex>
                     </v-layout>
                   </v-form>
                 </v-card>
               </v-flex>
               <v-flex xs12 sm12 md7>
                 <v-card>
                   <v-toolbar dark class="card-styles " flat>
                     <v-spacer></v-spacer>
                       <h3>Fee Type List</h3>
                     <v-spacer></v-spacer>
                   </v-toolbar>
                   <v-layout>
                     <v-flex xs4 sm2 class="mt-4 hidden-xs-only hidden-sm-only">
                       <label class="right title ">Fee Type:</label>
                     </v-flex>
                     <v-flex xs8 sm4>
                       <v-select
                         :items="feeTypes"
                         v-model="feeType.feeTypeName"
                         item-text="feeType"
                         item-value="feeType"
                         label="Select Fee Type"
                       ></v-select>
                     </v-flex>
                     <v-flex xs4 sm6>
                       <v-btn color="open-dialog-button" round dark class="right mt-3" @click="selectFeeType">ADD</v-btn>
                     </v-flex>
                   </v-layout>
                   <table class="feeTypeTable tableRsponsive">
                     <tr class="info white--text">
                       <th>#</th>
                       <th>Fee Type</th>
                       <th>Amount</th>
                       <th>Discount(%)</th>
                       <th>Subtotal</th>
                       <th>Paid Amount</th>
                       <th>Action</th>
                     </tr>
                     <tr
                       v-show="showFeeType"
                       v-for="(feeType, index) in feeTypeData"
                       :key="index"
                       v-on:keyup="getAmmountDetails(feeType)"
                     >
                       <td style="width:40px" class="tdFeeType">{{ index + 1 }}</td>
                       <td style="width:120px" class="tdFeeType">{{ feeType.feeTypeName }}</td>
                       <td class="tdFeeType">
                         <v-text-field
                           placeholder="fill your Amount"
                           v-model="feeType.amount"
                           type="number"
                         ></v-text-field>
                       </td>
                       <td class="tdFeeType">
                         <v-text-field
                           placeholder="fill your Discount"
                           v-model="feeType.discount"
                           type="number"
                         ></v-text-field>
                       </td>
                       <td class="tdFeeType">{{ feeType.subTotal }}</td>
                       <!-- <td class="tdFeeType" v-if="invoiceData.paymentStatus === 'NOT_PAID'">
                         <v-text-field
                           placeholder="fill your Paid Amount"
                           v-model="feeType.paidAmount"
                           type="number"
                           :disabled="disabled"
                         ></v-text-field>
                       </td> -->
                       <td class="tdFeeType" v-if="invoiceData.paymentStatus == ''">
                         <v-text-field
                           placeholder="fill your Paid Amount"
                           v-model="feeType.paidAmount"
                           type="number"
                           :disabled="disabled"
                         ></v-text-field>
                       </td>
                       <td
                         class="tdFeeType"
                         v-if="invoiceData.paymentStatus != 'NOT_PAID' && invoiceData.paymentStatus != ''"
                       >
                         <v-text-field
                           placeholder="fill your Paid Amount"
                           v-model="feeType.paidAmount"
                           type="number"
                         ></v-text-field>
                       </td>
                       <td class="tdFeeType">
                         <v-icon color="error" @click="deleteSelectFee(index)">delete</v-icon>
                       </td>
                     </tr>
                     <tfoot>
                       <tr>
                         <td colspan="2" class="tdFeeType">Total:</td>
                         <td class="tdFeeType">{{ feeType.amount }}</td>
                         <td class="tdFeeType">{{ feeType.discount }}</td>
                         <td class="tdFeeType">{{ feeType.subTotal }}</td>
                         <td class="tdFeeType">{{ feeType.paidAmount }}</td>
                       </tr>
                     </tfoot>
                   </table>
                 </v-card>
               </v-flex>
             </v-layout>
           </v-container>
         </v-flex>
       </v-card>
     </v-dialog>
     <div class="loader" v-if="showLoader">
       <v-progress-circular indeterminate color="white"></v-progress-circular>
     </div>
   </v-container>
 </template>
 <script>
 import http from "@/Services/http.js";
 import moment from "moment";
 export default {
   data: () => ({
     snackbar: false,
     showPayMethods: false,
     y: "top",
     x: "right",
     mode: "",
     timeout: 5000,
     text: "",
     color: "",
     show: true,
     showSearch: false,
     showLoader: false,
     loading: false,
     date: null,
     search: "",
     dialog: false,
     dialog1: false,
     valid: true,
     validEdit: true,
     isActive: true,
     newActive: false,
     showFeeType: false,
     addInvoiceDialog: false,
     disabled: true,
     details: [],
     feeTypes: [],
     menu1: false,
     paymentMethods: ["Cash", "Cheque"],
     feeType: {
       amount: "0.00",
       discount: "0.00",
       paidAmount: 0.0,
       subTotal: "0.00",
       feeTypeName: ""
     },
     feeTypeData: [],
     pagination: {
       rowsPerPage: 10
     },
     classRules: [v => !!v || " Class Name is required"],
     inchargeRules: [v => !!v || "Student Name is required"],
     dateRules: [v => !!v || " Date is required"],
     paymentStatusRules: [v => !!v || "Payment Status is required"],
     paymentMethodsRules: [v => !!v || "payment Method is required"],
     headers: [
       {
         text: "No",
         align: "",
         sortable: false,
         value: "No"
       },
       {
         text: "Student",
         value: "student",
         sortable: false,
         align: "center"
       },
       { text: "Class", value: "class", sortable: false, align: "center" },
       { text: "Total", value: "subtotal", sortable: false, align: "center" },
       { text: "Discount", value: "discount", sortable: false, align: "center" },
       {
         text: "Paid Amount",
         value: "paidAmount",
         sortable: false,
         align: "center"
       },
       {
         text: "Balance",
         value: "Balance",
         sortable: false,
         align: "center"
       },
       {
         text: "Status",
         value: "paymentStatus",
         sortable: false,
         align: "center"
       },
       {
         text: "Date",
         value: "date",
         sortable: false,
         align: "center"
       },
       { text: "Action", value: "", sortable: false, align: "center" }
     ],
     invoiceList: [],
     token: "",
     editedItem: {},
     invoiceData: {
       paymentStatus: "",
       students: []
     },
     addclass: [],
     studentList: [],
     paymentStatus: [
       {
         name: "Not Paid",
         value: "NOT_PAID"
       },
       {
         name: "Partially Paid",
         value: "PARTIALLY_PAID"
       },
       {
         name: "Fully Paid",
         value: "FULLY_PAID"
       }
     ]
   }),
   methods: {
     save(date) {
       this.$refs.menu1.save(date);
     },
     dates: function(date) {
       return moment(date).format("MMMM DD, YYYY");
     },
     // profile(item) {
     //   this.editedIndex = this.InvoiceList.indexOf(item);
     //   this.editedItem = Object.assign({}, item);
     //   this.dialog1 = true;
     // },
     deleteItem(item) {
       let deleteInvoice = {
         invoiceId: item._id
       };
       http()
         .delete(
           "/deleteInvoice",
           confirm("Are you sure you want to delete this?") && {
             params: deleteInvoice
           }
         )
         .then(response => {
           this.snackbar = true;
           this.text = "Successfully delete Existing Invoice";
           this.color = "green";
           this.getInvoiceList();
         })
         .catch(error => {
           // console.log(error);
         });
     },
     close() {
       this.dialog = false;
     },
     // totalAmount() {
     //   // console.log("this.feeType.paidAmount ", this.feeType.paidAmount);
     //   // console.log(
     //   //   "this.feeType.subTotalAAAAAAAAAAAAAAA ",
     //   //   this.feeType.subTotal
     //   // );
     //   if (this.feeType.paidAmount < this.feeType.subTotal) {
     //     console.log("this.feeType.subTotalBBBBBBBBBBB ", this.feeType.subTotal);
     //     this.feeType.paidAmount = this.feeType.subTotal;
     //     console.log(
     //       "this.feeType.paidAmount BBBBBBBBBBB",
     //       this.feeType.paidAmount
     //     );
     //   }
     // },
     submit() {
       let feeTypeId = "";
       for (let i = 0; i < this.feeTypes.length; i++) {
         if (this.feeTypes[i].feeType === this.feeType.feeTypeName) {
           feeTypeId = this.feeTypes[i]._id;
         }
       }
-      if (this.$refs.form.validate()) {
+      // if (this.$refs.form.validate()) {
         let invoiceData = {
           classId: this.invoiceData.classNum,
           students: this.invoiceData.students,
           date: this.invoiceData.date,
           paymentStatus: this.invoiceData.paymentStatus,
           paymentMethod: this.invoiceData.paymentMethod,
           feeType: this.feeTypeData,
           totalAmount: this.feeType.amount,
           totalDiscount: this.feeType.discount,
           totalSubTotal: this.feeType.subTotal,
-          // totalPaidAmount: this.feeType.paidAmount
+          totalPaidAmount: this.feeType.paidAmount
         };
-        if (invoiceData.paymentStatus == "NOT_PAID") {
+        console.log("invoiceData",invoiceData)
-          delete invoiceData.totalPaidAmount;
+        // if (invoiceData.paymentStatus == "NOT_PAID") {
-        }
+        //   delete invoiceData.totalPaidAmount;
+        // }
         http()
           .post("/createInvoice", invoiceData)
           .then(response => {
             this.getInvoiceList();
             this.snackbar = true;
             this.text = "New Invoice added successfully";
             this.color = "green";
             this.clear();
             this.feeTypeData = [];
             if (this.feeTypeData.length == 0) {
               this.feeType = {
                 amount: "0.00",
                 discount: "0.00",
                 paidAmount: "0.00",
                 subTotal: "0.00",
                 feeTypeList: ""
               };
             }
             this.loading = false;
             this.addInvoiceDialog = false;
           })
           .catch(error => {
             this.snackbar = true;
             this.text = error.response.data.errors[0].messages[0];
             this.color = "error";
             this.loading = false;
           });
-      }
+      // }
     },
     clear() {
       this.$refs.form.reset();
     },
     getInvoiceList() {
       this.showLoader = true;
       http()
         .get("/getInvoicesList", {
           params: { schoolId: this.$store.state.schoolId },
           headers: { Authorization: "Bearer " + this.token }
         })
         .then(response => {
           this.invoiceList = response.data.data;
           this.showLoader = false;
         })
         .catch(error => {
           // console.log("err====>", err);
           this.showLoader = false;
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
           }
         });
     },
     selectFeeType() {
       this.showFeeType = true;
       this.feeTypeData.push({ feeTypeName: this.feeType.feeTypeName });
     },
     deleteSelectFee: function(index) {
       this.feeTypeData.splice(index, 1);
       for (let i = 0; i < this.feeTypeData.length; i++) {
         this.feeType = this.feeTypeData[i];
       }
       if (this.feeTypeData.length == 0) {
         this.feeType = {
           amount: "0.00",
           discount: "0.00",
           paidAmount: "0.00",
           subTotal: "0.00",
           feeTypeName: ""
         };
       }
     },
     getAllClasses() {
       http()
         .get("/getClassesList", {
           params: { schoolId: this.$store.state.schoolId },
           headers: { Authorization: "Bearer " + this.token }
         })
         .then(response => {
           this.addclass = response.data.data;
         })
         .catch(err => {
           // console.log("err====>", err);
           // this.$router.replace({ path: "/" });
         });
     },
     getAllStudents() {
       this.showLoader = true;
       http()
         .get("/getStudentsList", {
           params: {
             classId: this.invoiceData.classNum,
             schoolId: this.$store.state.schoolId
           },
           headers: { Authorization: "Bearer " + this.token }
         })
         .then(response => {
           response.data.data.unshift({
             name: "Select All",
             _id: "Select All"
           });
           this.studentList = response.data.data;
           this.showLoader = false;
         })
         .catch(err => {
           this.showLoader = false;
           // console.log("err====>", err);
           // this.$router.replace({ path: "/" });
         });
     },
     getfeeType() {
       http()
         .get("/getFeesList", {
           params: {
             schoolId: this.$store.state.schoolId
           },
           headers: { Authorization: "Bearer " + this.token }
         })
         .then(response => {
           this.feeTypes = response.data.data;
         })
         .catch(err => {
           // console.log("err====>", err);
           // this.$router.replace({ path: "/" });
         });
     },
     getAmmountDetails(feeTyp) {
       let feeType = {
         amount: "",
         discount: "",
         subTotal: "",
         subParticularTotal: "",
         paidAmount: ""
       };
       for (let i = 0; i < this.feeTypeData.length; i++) {
         // *********** AMOUNT ***********
         feeType.amount =
           Number(feeType.amount) + Number(this.feeTypeData[i].amount);
         // console.log("feeType.amount ", feeType.amount);
         this.feeType.amount = feeType.amount;
         this.feeType.subTotal = feeType.amount;
         this.feeTypeData[i].subTotal = this.feeTypeData[i].amount;
         // *********** DISCOUNT ***********
         if (this.feeTypeData[i].discount) {
           feeType.discount =
             Number(feeType.discount) + Number(this.feeTypeData[i].discount);
           // console.log("feeType.discount", feeType.discount);
           this.feeType.discount = feeType.discount;
           feeType.subParticularTotal =
             this.feeTypeData[i].amount -
             (this.feeTypeData[i].amount * this.feeTypeData[i].discount) / 100;
           this.feeTypeData[i].subTotal = feeType.subParticularTotal.toFixed(2);
         }
         // *********** SUBTOTAL ***********
         feeType.subTotal =
           Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal);
         this.feeType.subTotal = feeType.subTotal.toFixed(2);
         // *********** PAID-AMOUNT ***********
         feeType.paidAmount =
           Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);
         this.feeType.paidAmount = feeType.paidAmount.toFixed(2);
         // if paid Amount fill large of subtotal value so this condition are fixed filled subtotal value.
         if (feeType.paidAmount > feeType.subTotal) {
           this.feeTypeData[i].paidAmount = this.feeTypeData[i].subTotal;
           this.feeType.paidAmount = feeType.subTotal;
         }
       }
     },
     getPayMethodList() {
       if (this.invoiceData.paymentStatus == "PARTIALLY_PAID") {
         this.showPayMethods = true;
       } else if (this.invoiceData.paymentStatus == "FULLY_PAID") {
         this.showPayMethods = true;
       } else {
         this.showPayMethods = false;
       }
     },
     selectAllStudent() {
       console.log("this.studentId", this.invoiceData.studentId);
       this.invoiceData.students = [];
       if (this.invoiceData.studentId === "Select All") {
         for (let i = 1; i < this.studentList.length; i++) {
           this.invoiceData.students.push(this.studentList[i]._id);
           console.log("data", this.invoiceData.students);
           // data.push(this.studentList[i]._id);
           // console.log("data", data);
         }
       } else {
         this.invoiceData.students.push(this.invoiceData.studentId);
       }
     },
     displaySearch() {
       (this.show = false), (this.showSearch = true);
     },
     closeSearch() {
       this.showSearch = false;
       this.show = true;
       this.search = "";
     }
   },
   mounted() {
     this.token = this.$store.state.token;
     this.getInvoiceList();
     this.getAllClasses();
     this.getfeeType();
   }
 };
 </script>
 <style scoped>
 table {
   border-collapse: collapse;
   border: 1px solid #e2e7eb;
 }
 th,
 .tdFeeType {
   border: 1px solid #e2e7eb;
   padding: 10px;
   text-align: center;
 }
 table.feeTypeTable {
   table-layout: auto !important;
   width: 100% !important;
 }
 </style>

src/pages/Account/viewInvoice.vue

Diff comments View file @25205cc

1	<template>	1	<template>
2	<v-app id="pages-dasboard">	2	<v-app id="pages-dasboard">
3	<!-- **** Edit INVOICE **** -->	3	<!-- **** Edit INVOICE **** -->
4	<v-container fluid grid-list-md>	4	<v-container fluid grid-list-md>
5	<v-card>	5	<v-layout>
		6	<v-flex xs12 sm8 md10>
		7	<v-btn class="open-dialog-button mt-3" round dark @click="printInvoice()">
		8	Print
		9	<v-icon size="18" right dark>print</v-icon>
		10	</v-btn>
		11	</v-flex>
		12	</v-layout>
		13	<v-flex xs12 sm12 id="printMe">
6	<v-layout wrap>	14	<v-layout wrap>
7	<v-flex 12>	15	<!-- **** TABLE DATA MARK **** -->
8	<br />	16	<v-flex xs12 sm12 md12>
9	<v-layout wrap>	17	<v-card>
10	<v-flex xs12 sm6>	18	<v-layout wrap>
11	<v-layout>	19	<v-flex 12>
12	<v-flex xs4 sm2>	20	<br />
13	<h5 class="right my-1">	21	<v-layout>
14	<b>invoice:</b>	22	<v-flex xs12 sm12 md12 class="text-xs-center">
15	</h5>	23	<img :src="userData.schoolLogoUrl" width="140" alt="logo" />
16	</v-flex>	24	<p class="title">{{ userData.name }}</p>
17	<v-flex sm11 xs8>	25	<p>{{ userData.address }}</p>
18	<h5 class="my-1">#{{ invoiceParticularData.invoiceNumber }}</h5>	26	</v-flex>
19	</v-flex>	27
20	</v-layout>	28	<v-flex xs12 sm12 md12 class="text-xs-center">
21	<v-layout>	29	<v-layout>
22	<v-flex xs4 sm2>	30	<v-flex xs4 sm2>
23	<h5 class="right my-1">	31	<h5 class="right my-1">
24	<b>Name:</b>	32	<b>invoice:</b>
25	</h5>	33	</h5>
26	</v-flex>	34	</v-flex>
27	<v-flex sm11 xs8>	35	<v-flex sm11 xs8>
28	<h5 class="my-1">{{ invoiceParticularData.studentId.name }}</h5>	36	<h5 class="my-1">#{{ invoiceParticularData.invoiceNumber }}</h5>
29	</v-flex>	37	</v-flex>
30	</v-layout>	38	</v-layout>
31	<v-layout>	39	<v-layout>
32	<v-flex xs4 sm2>	40	<v-flex xs4 sm2>
33	<h5 class="right my-1">	41	<h5 class="right my-1">
34	<b>Class:</b>	42	<b>Name:</b>
35	</h5>	43	</h5>
36	</v-flex>	44	</v-flex>
37	<v-flex sm11 xs8>	45	<v-flex sm11 xs8>
38	<h5 class="my-1">{{ invoiceParticularData.classId.classNum }}</h5>	46	<h5 class="my-1">{{ invoiceParticularData.studentId.name }}</h5>
39	</v-flex>	47	</v-flex>
40	</v-layout>	48	</v-layout>
41	</v-flex>	49	<v-layout>
42	<v-flex xs12 sm6>	50	<v-flex xs4 sm2>
43	<v-layout>	51	<h5 class="right my-1">
44	<v-flex xs4 sm2>	52	<b>Class:</b>
45	<h5 class="right my-1">	53	</h5>
46	<b>Roll No:</b>	54	</v-flex>
47	</h5>	55	<v-flex sm11 xs8>
48	</v-flex>	56	<h5 class="my-1">{{ invoiceParticularData.classId.classNum }}</h5>
49	<v-flex sm6 xs8>	57	</v-flex>
50	<h5 class="my-1">{{ invoiceParticularData.studentId.rollNo }}</h5>	58	</v-layout>
51	</v-flex>	59	<!-- <v-flex xs12 sm6> -->
52	</v-layout>	60	<v-layout>
53	<v-layout>	61	<v-flex xs4 sm2>
54	<v-flex xs4 sm2>	62	<h5 class="right my-1">
55	<h5 class="right my-1">	63	<b>Roll No:</b>
56	<b>email:</b>	64	</h5>
57	</h5>	65	</v-flex>
58	</v-flex>	66	<v-flex sm6 xs8>
59	<v-flex sm6 xs8>	67	<h5 class="my-1">{{ invoiceParticularData.studentId.rollNo }}</h5>
60	<h5 class="my-1 linkCover">{{ invoiceParticularData.studentId.email }}</h5>	68	</v-flex>
61	</v-flex>	69	</v-layout>
62	</v-layout>	70	<v-layout>
63	<v-layout>	71	<v-flex xs4 sm2>
64	<v-flex xs4 sm2>	72	<h5 class="right my-1">
65	<h5 class="right my-1">	73	<b>email:</b>
66	<b>Status :</b>	74	</h5>
67	</h5>	75	</v-flex>
68	</v-flex>	76	<v-flex sm6 xs8>
69	<v-flex sm6 xs8>	77	<h5 class="my-1 linkCover">{{ invoiceParticularData.studentId.email }}</h5>
70	<h5 class="my-1">{{ invoiceParticularData.paymentStatus }}</h5>	78	</v-flex>
		79	</v-layout>
		80	<v-layout>
		81	<v-flex xs4 sm2>
		82	<h5 class="right my-1">
		83	<b>Status :</b>
		84	</h5>
		85	</v-flex>
		86	<v-flex sm6 xs8>
		87	<h5 class="my-1">{{ invoiceParticularData.paymentStatus }}</h5>
		88	</v-flex>
		89	</v-layout>
		90	</v-flex>
		91	</v-layout>
71	</v-flex>	92	</v-flex>
72	</v-layout>	93	</v-layout>
73	</v-flex>	94	<table class="feeTypeTable tableRsponsive">
74	</v-layout>	95	<tr class="info white--text">
		96	<th>#</th>
		97	<th>Fee Type</th>
		98	<th>Amount</th>
		99	<th>Discount</th>
		100	<th>Subtotal</th>
		101	</tr>
		102	<tr
		103	v-for="(feeType, index) in feeTypeData"
		104	:key="index"
		105	v-on:keyup="getAmmountDetails(feeType)"
		106	>
		107	<td style="width:40px">{{ index + 1 }}</td>
		108	<td style="width:120px">{{ feeType.feeTypeName }}</td>
		109	<td style="width:120px">{{ feeType.amount }}</td>
		110	<td style="width:120px">{{ feeType.amount-feeType.subTotal }}</td>
		111	<td style="width:120px">{{ feeType.subTotal }}</td>
		112	</tr>
		113	<!-- <tfoot>
		114	<tr>
		115	<td colspan="4">
		116	<span class="right subheding">Total Amount (RS) :</span>
		117	</td>
		118	<td>{{ feeType.subTotal }}</td>
		119	</tr>
		120	<tr>
		121	<td colspan="4">
		122	<span class="right subheding">Paid (RS) :</span>
		123	</td>
		124	<td>{{ feeType.totalPaidAmount ? feeType.totalPaidAmount : 0 }}</td>
		125	</tr>
		126	<tr>
		127	<td colspan="4">
		128	<span class="right subheding">Balance (RS) :</span>
		129	</td>
		130	<td>{{ feeType.totalPaidAmount ? feeType.subTotal - feeType.totalPaidAmount : feeType.subTotal }}</td>
		131	</tr>
		132	</tfoot>-->
		133	</table>
		134	</v-card>
75	</v-flex>	135	</v-flex>
76	</v-layout>	136	</v-layout>
77	</v-card>	137	</v-flex>
78	<table class="feeTypeTable tableRsponsive">
79	<tr class="info white--text">
80	<th>#</th>
81	<th>Fee Type</th>
82	<th>Amount</th>
83	<th>Discount</th>
84	<th>Subtotal</th>
85	</tr>
86	<tr
87	v-for="(feeType, index) in feeTypeData"
88	:key="index"
89	v-on:keyup="getAmmountDetails(feeType)"
90	>
91	<td style="width:40px">{{ index + 1 }}</td>
92	<td style="width:120px">{{ feeType.feeTypeName }}</td>
93	<td style="width:120px">{{ feeType.amount }}</td>
94	<td style="width:120px">{{ feeType.amount-feeType.subTotal }}</td>
95	<td style="width:120px">{{ feeType.subTotal }}</td>
96	</tr>
97	<tfoot>
98	<tr>
99	<td colspan="4">
100	<span class="right subheding">Total Amount (RS) :</span>
101	</td>
102	<td>{{ feeType.subTotal }}</td>
103	</tr>
104	<tr>
105	<td colspan="4">
106	<span class="right subheding">Paid (RS) :</span>
107	</td>
108	<td>{{ feeType.totalPaidAmount ? feeType.totalPaidAmount : 0 }}</td>
109	</tr>
110	<tr>
111	<td colspan="4">
112	<span class="right subheding">Balance (RS) :</span>
113	</td>
114	<td>{{ feeType.totalPaidAmount ? feeType.subTotal - feeType.totalPaidAmount : feeType.subTotal }}</td>
115	</tr>
116	</tfoot>
117	</table>
118	<!-- </v-card> -->
119	<!-- </v-flex> -->
120	<!-- </v-layout> -->
121	<!-- </v-container> -->
122	<!-- </v-flex> -->
123	</v-container>	138	</v-container>
124	<div class="loader" v-if="showLoader">	139	<div class="loader" v-if="showLoader">
125	<v-progress-circular indeterminate color="white"></v-progress-circular>	140	<v-progress-circular indeterminate color="white"></v-progress-circular>
126	</div>	141	</div>
127	</v-app>	142	</v-app>
128	</template>	143	</template>
129		144
130	<script>	145	<script>
131	import http from "@/Services/http.js";	146	import http from "@/Services/http.js";
132	import moment from "moment";	147	import moment from "moment";
133		148
134	export default {	149	export default {
135	data: () => ({	150	data: () => ({
136	showLoader: false,	151	showLoader: false,
137	feeTypes: [],	152	feeTypes: [],
		153	filterData: [],
138	invoiceData: {},	154	invoiceData: {},
139	feeType: {	155	feeType: {
140	amount: "",	156	amount: "",
141	discount: "",	157	discount: "",
142	totalPaidAmount: "",	158	totalPaidAmount: "",
143	subTotal: "",	159	subTotal: "",
144	feeTypeName: ""	160	feeTypeName: ""
145	},	161	},
146	feeTypeData: [],	162	feeTypeData: [],
147	token: "",	163	token: "",
148	invoiceParticularData: {}	164	invoiceParticularData: {},
		165	userData: {}
149	}),	166	}),
150		167
151	methods: {	168	methods: {
152	getInvoiceList() {	169	getInvoiceList() {
153	http()	170	http()
154	.get("/getParticularInvoice", {	171	.get("/getParticularInvoice", {
155	params: {	172	params: {
156	invoiceId: this.$route.params.viewInvoiceId,	173	invoiceId: this.$route.params.viewInvoiceId,
157	schoolId: this.$store.state.schoolId	174	schoolId: this.$store.state.schoolId
158	},	175	},
159	headers: { Authorization: "Bearer " + this.token }	176	headers: { Authorization: "Bearer " + this.token }
160	})	177	})
161	.then(response => {	178	.then(response => {
162	this.invoiceParticularData = response.data.data;	179	this.invoiceParticularData = response.data.data;
163	this.invoiceData = this.invoiceParticularData;	180	this.invoiceData = this.invoiceParticularData;
164	this.invoiceData.date = this.invoiceParticularData.date.slice(0, 10);	181	this.invoiceData.date = this.invoiceParticularData.date.slice(0, 10);
165	this.feeTypeData = this.invoiceParticularData.feeType;	182	this.feeTypeData = this.invoiceParticularData.feeType;
166	(this.feeType.amount = response.data.data.totalAmount),	183	(this.feeType.amount = response.data.data.totalAmount),
167	(this.feeType.discount = response.data.data.totalDiscount),	184	(this.feeType.discount = response.data.data.totalDiscount),
168	(this.feeType.subTotal = response.data.data.totalSubTotal),	185	(this.feeType.subTotal = response.data.data.totalSubTotal),
169	(this.feeType.totalPaidAmount = response.data.data.totalPaidAmount);	186	(this.feeType.totalPaidAmount = response.data.data.totalPaidAmount);
170	this.showLoader = false;	187	this.showLoader = false;
171	})	188	})
172	.catch(error => {	189	.catch(error => {
173	this.showLoader = false;	190	this.showLoader = false;
174	if (error.response.status === 401) {	191	if (error.response.status === 401) {
175	this.$router.replace({ path: "/" });	192	this.$router.replace({ path: "/" });
176	this.$store.dispatch("setToken", null);	193	this.$store.dispatch("setToken", null);
177	this.$store.dispatch("Id", null);	194	this.$store.dispatch("Id", null);
178	this.$store.dispatch("Role", null);	195	this.$store.dispatch("Role", null);
179	}	196	}
180	});	197	});
181	},	198	},
182	getfeeType() {	199	getfeeType() {
183	http()	200	http()
184	.get("/getFeesList", {	201	.get("/getFeesList", {
185	params: { schoolId: this.$store.state.schoolId },	202	params: { schoolId: this.$store.state.schoolId },
186	headers: { Authorization: "Bearer " + this.token }	203	headers: { Authorization: "Bearer " + this.token }
187	})	204	})
188	.then(response => {	205	.then(response => {
189	this.feeTypes = response.data.data;	206	this.feeTypes = response.data.data;
190	})	207	})
191	.catch(err => {	208	.catch(err => {
192	// console.log("err====>", err);	209	// console.log("err====>", err);
193	});	210	});
194	},	211	},
195	getAmmountDetails(feeTyp) {	212	getAmmountDetails(feeTyp) {
196	let feeType = {	213	let feeType = {
197	subTotal: "",	214	subTotal: "",
198	subParticularTotal: "",	215	subParticularTotal: "",
199	paidAmount: ""	216	paidAmount: ""
200	};	217	};
201	// ********* SUBTOTAL *********	218	// ********* SUBTOTAL *********
202	feeType.subTotal =	219	feeType.subTotal =
203	Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal);	220	Number(feeType.subTotal) + Number(this.feeTypeData[i].subTotal);
204	this.feeType.subTotal = feeType.subTotal.toFixed(2);	221	this.feeType.subTotal = feeType.subTotal.toFixed(2);
205	// ********* PAID-AMOUNT *********	222	// ********* PAID-AMOUNT *********
206	feeType.paidAmount =	223	feeType.paidAmount =
207	Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);	224	Number(feeType.paidAmount) + Number(this.feeTypeData[i].paidAmount);
208	this.feeType.paidAmount = feeType.paidAmount.toFixed(2);	225	this.feeType.paidAmount = feeType.paidAmount.toFixed(2);
		226	},
		227	printInvoice() {
		228	// Pass the element id here
		229	this.$htmlToPaper("printMe");
		230	},
		231	getUserData() {
		232	http()
		233	.get("/getParticularUserDetail")
		234	.then(response => {
		235	this.userData = response.data.data;
		236	})
		237	.catch(error => {
		238	// if (error.response.status === 401) {
		239	// this.$router.replace({ path: "/" });
		240	// this.$store.dispatch("setToken", null);
		241	// this.$store.dispatch("Id", null);
		242	// }
		243	});
209	}	244	}
210	},	245	},
211	mounted() {	246	mounted() {
212	this.token = this.$store.state.token;	247	this.token = this.$store.state.token;
213	this.getInvoiceList();	248	this.getInvoiceList();
214	this.getfeeType();	249	this.getfeeType();
		250	this.getUserData();
		251
215	},	252	},
216	created() {	253	created() {
217	this.$root.$on("app:search", search => {	254	this.$root.$on("app:search", search => {
218	this.search = search;	255	this.search = search;
219	});	256	});

src/pages/Dashboard/dashboard.vue

Diff comments View file @25205cc

1	<template>	1	<template>
2	<v-app id="pages-dasboard">	2	<v-app id="pages-dasboard">
3	<!-- **** VIEW PROFIL NOTICE BOARD **** -->	3	<!-- **** VIEW PROFIL NOTICE BOARD **** -->
4	<!-- <v-dialog v-model="dialogNotice" max-width="940px" scrollable>	4	<!-- <v-dialog v-model="dialogNotice" max-width="940px" scrollable>
5	<v-card>	5	<v-card>
6	<v-toolbar color="grey lighten-2" flat>	6	<v-toolbar color="grey lighten-2" flat>
7	<v-spacer></v-spacer>	7	<v-spacer></v-spacer>
8	<v-toolbar-title>	8	<v-toolbar-title>
9	<h3>Notice Board</h3>	9	<h3>Notice Board</h3>
10	</v-toolbar-title>	10	</v-toolbar-title>
11	<v-spacer></v-spacer>	11	<v-spacer></v-spacer>
12	<v-icon @click="closeNotice">close</v-icon>	12	<v-icon @click="closeNotice">close</v-icon>
13	</v-toolbar>	13	</v-toolbar>
14	<v-card-text>	14	<v-card-text>
15	<v-layout>	15	<v-layout>
16	<v-flex align-center justify-center layout text-xs-center class="mt-2">	16	<v-flex align-center justify-center layout text-xs-center class="mt-2">
17	<img src="/static/icon/user.png" width="70px" v-if="!notice.eventImageUrl" />	17	<img src="/static/icon/user.png" width="70px" v-if="!notice.eventImageUrl" />
18	<img :src="notice.eventImageUrl" width="280px" v-else-if="notice.eventImageUrl" />	18	<img :src="notice.eventImageUrl" width="280px" v-else-if="notice.eventImageUrl" />
19	</v-flex>	19	</v-flex>
20	</v-layout>	20	</v-layout>
21	<v-container grid-list-md>	21	<v-container grid-list-md>
22	<v-layout wrap>	22	<v-layout wrap>
23	<v-flex>	23	<v-flex>
24	<v-layout>	24	<v-layout>
25	<v-flex xs5 sm6>	25	<v-flex xs5 sm6>
26	<h5 class="right my-1">	26	<h5 class="right my-1">
27	<b>Title:</b>	27	<b>Title:</b>
28	</h5>	28	</h5>
29	</v-flex>	29	</v-flex>
30	<v-flex sm6 xs8>	30	<v-flex sm6 xs8>
31	<h5 class="my-1">{{ notice.title }}</h5>	31	<h5 class="my-1">{{ notice.title }}</h5>
32	</v-flex>	32	</v-flex>
33	</v-layout>	33	</v-layout>
34	<v-layout>	34	<v-layout>
35	<v-flex xs5 sm6>	35	<v-flex xs5 sm6>
36	<h5 class="right my-1">	36	<h5 class="right my-1">
37	<b>Description:</b>	37	<b>Description:</b>
38	</h5>	38	</h5>
39	</v-flex>	39	</v-flex>
40	<v-flex sm6 xs8>	40	<v-flex sm6 xs8>
41	<h5 class="my-1">{{ notice.description }}</h5>	41	<h5 class="my-1">{{ notice.description }}</h5>
42	</v-flex>	42	</v-flex>
43	</v-layout>	43	</v-layout>
44	</v-flex>	44	</v-flex>
45	</v-layout>	45	</v-layout>
46	</v-container>	46	</v-container>
47	</v-card-text>	47	</v-card-text>
48	</v-card>	48	</v-card>
49	</v-dialog>-->	49	</v-dialog>-->
50	<!-- <v-container fluid grid-list-xl> -->	50	<!-- <v-container fluid grid-list-xl> -->
51	<v-layout wrap>	51	<v-layout wrap>
52	<v-flex xs12>	52	<v-flex xs12>
53	<v-layout wrap row>	53	<v-layout wrap row>
54	<!-- *** Total Students *** -->	54	<!-- *** Total Students *** -->
55	<v-flex xs12 sm12 md9>	55	<v-flex xs12 sm12 md9>
56	<v-container fluid grid-list-xl>	56	<v-container fluid grid-list-xl>
57	<v-flex xs12 sm12 md12>	57	<v-flex xs12 sm12 md12>
58	<v-layout wrap class>	58	<v-layout wrap class>
59	<v-flex xs12 sm12 md3>	59	<v-flex xs12 sm12 md3>
60	<router-link :to="{ name:'Students' }">	60	<router-link :to="{ name:'Students' }">
61	<v-card class="card pink-bgcolor">	61	<v-card class="card pink-bgcolor">
62	<v-card-title primary-title class="titleCard white--text py-3">Students</v-card-title>	62	<v-card-title primary-title class="titleCard white--text py-3">Students</v-card-title>
63	<img src="/static/icon/student.png" class="ml-2" width="40" alt="icons" />	63	<img src="/static/icon/student.png" class="ml-2" width="40" alt="icons" />
64	<v-card-title class="headline py-1 white--text">{{ students.length }}</v-card-title>	64	<v-card-title class="headline py-1 white--text">{{ students.length }}</v-card-title>
65	</v-card>	65	</v-card>
66	</router-link>	66	</router-link>
67	</v-flex>	67	</v-flex>
68	<!-- *** Total Teachers*** -->	68	<!-- *** Total Teachers*** -->
69	<v-flex xs12 sm12 md3>	69	<v-flex xs12 sm12 md3>
70	<router-link :to="{ name:'Teachers' }">	70	<router-link :to="{ name:'Teachers' }">
71	<v-card flat class="card elevation-2 firozi-bgcolor">	71	<v-card flat class="card elevation-2 firozi-bgcolor">
72	<v-card-title primary-title class="titleCard white--text py-3">Teachers</v-card-title>	72	<v-card-title primary-title class="titleCard white--text py-3">Teachers</v-card-title>
73	<img src="/static/icon/teacher.png" class="ml-2" width="40" alt="icons" />	73	<img src="/static/icon/teacher.png" class="ml-2" width="40" alt="icons" />
74		74
75	<v-card-title class="headline py-1 white--text">{{ teachers.length }}</v-card-title>	75	<v-card-title class="headline py-1 white--text">{{ teachers.length }}</v-card-title>
76	</v-card>	76	</v-card>
77	</router-link>	77	</router-link>
78	</v-flex>	78	</v-flex>
79	<!-- *** Total Parents *** -->	79	<!-- *** Total Parents *** -->
80	<v-flex xs12 sm12 md3>	80	<v-flex xs12 sm12 md3>
81	<router-link :to="{ name:'Parents' }">	81	<router-link :to="{ name:'Parents' }">
82	<v-card flat class="card yellow darken-3">	82	<v-card flat class="card yellow darken-3">
83	<v-card-title primary-title class="titleCard white--text py-3">Parents</v-card-title>	83	<v-card-title primary-title class="titleCard white--text py-3">Parents</v-card-title>
84	<img src="/static/icon/parents.png" class="ml-3" width="40px" alt="icons" />	84	<img src="/static/icon/parents.png" class="ml-3" width="40px" alt="icons" />
85	<v-card-title class="headline py-1 white--text">{{ parents.length }}</v-card-title>	85	<v-card-title class="headline py-1 white--text">{{ parents.length }}</v-card-title>
86	</v-card>	86	</v-card>
87	</router-link>	87	</router-link>
88	</v-flex>	88	</v-flex>
89	<!-- *** Total Class*** -->	89	<!-- *** Total Class*** -->
90	<v-flex xs12 sm12 md3>	90	<v-flex xs12 sm12 md3>
91	<router-link :to="{ name:'Class' }">	91	<router-link :to="{ name:'Class' }">
92	<v-card flat class="card darkBlue-bgcolor">	92	<v-card flat class="card darkBlue-bgcolor">
93	<v-card-title primary-title class="titleCard white--text py-3">Class</v-card-title>	93	<v-card-title primary-title class="titleCard white--text py-3">Class</v-card-title>
94	<img src="/static/icon/class.png" width="40" alt="icons" class="ml-2" />	94	<img src="/static/icon/class.png" width="40" alt="icons" class="ml-2" />
95	<v-card-title class="headline py-1 white--text">{{ classes.length }}</v-card-title>	95	<v-card-title class="headline py-1 white--text">{{ classes.length }}</v-card-title>
96	</v-card>	96	</v-card>
97	</router-link>	97	</router-link>
98	</v-flex>	98	</v-flex>
99	</v-layout>	99	</v-layout>
100	</v-flex>	100	</v-flex>
101	<v-layout>	101	<v-layout>
102	<v-flex xs12>	102	<v-flex xs12>
103	<v-card class="card mt-2 account-Card">	103	<v-card class="card mt-2 account-Card">
104	<h4>	104	<h4>
105	<b>Account</b>	105	<b>Account</b>
106	</h4>	106	</h4>
107	<v-layout wrap>	107	<v-layout wrap>
108	<v-flex xs12 sm12 md3>	108	<v-flex xs12 sm12 md3>
109	<v-list two-line>	109	<v-list two-line>
110	<template>	110	<template>
111	<v-list-tile>	111	<v-list-tile>
112	<v-list-tile-avatar>	112	<v-list-tile-avatar>
113	<v-icon class="account-circle darkBlue-color">panorama_fish_eye</v-icon>	113	<v-icon class="account-circle darkBlue-color">panorama_fish_eye</v-icon>
114	</v-list-tile-avatar>	114	</v-list-tile-avatar>
115	<v-list-tile-content>	115	<v-list-tile-content>
116	<v-list-tile-title class="mt-2">	116	<v-list-tile-title class="mt-2">
117	<p class="subheading font-color">Fees</p>	117	<p class="subheading font-color">Fees</p>
118	</v-list-tile-title>	118	</v-list-tile-title>
119	<v-list-tile-title>Rs 1000</v-list-tile-title>	119	<v-list-tile-title>Rs 1000</v-list-tile-title>
120	</v-list-tile-content>	120	</v-list-tile-content>
121	</v-list-tile>	121	</v-list-tile>
122	<v-list-tile>	122	<v-list-tile>
123	<v-list-tile-avatar>	123	<v-list-tile-avatar>
124	<v-icon class="account-circle yellowDark-color">panorama_fish_eye</v-icon>	124	<v-icon class="account-circle yellowDark-color">panorama_fish_eye</v-icon>
125	</v-list-tile-avatar>	125	</v-list-tile-avatar>
126	<v-list-tile-content>	126	<v-list-tile-content>
127	<v-list-tile-title class="mt-2">	127	<v-list-tile-title class="mt-2">
128	<p class="subheading font-color">Collection</p>	128	<p class="subheading font-color">Collection</p>
129	</v-list-tile-title>	129	</v-list-tile-title>
130	<v-list-tile-title>Rs 2000</v-list-tile-title>	130	<v-list-tile-title>Rs 2000</v-list-tile-title>
131	</v-list-tile-content>	131	</v-list-tile-content>
132	</v-list-tile>	132	</v-list-tile>
133	<v-list-tile>	133	<v-list-tile>
134	<v-list-tile-avatar>	134	<v-list-tile-avatar>
135	<v-icon class="account-circle pink-color">panorama_fish_eye</v-icon>	135	<v-icon class="account-circle pink-color">panorama_fish_eye</v-icon>
136	</v-list-tile-avatar>	136	</v-list-tile-avatar>
137	<v-list-tile-content>	137	<v-list-tile-content>
138	<v-list-tile-title class="mt-2">	138	<v-list-tile-title class="mt-2">
139	<p class="subheading font-color">Expences</p>	139	<p class="subheading font-color">Expences</p>
140	</v-list-tile-title>	140	</v-list-tile-title>
141	<v-list-tile-title>Rs 3000</v-list-tile-title>	141	<v-list-tile-title>Rs 3000</v-list-tile-title>
142	</v-list-tile-content>	142	</v-list-tile-content>
143	</v-list-tile>	143	</v-list-tile>
144	</template>	144	</template>
145	</v-list>	145	</v-list>
146	</v-flex>	146	</v-flex>
147	<v-flex xs12 sm12 md9>	147	<v-flex xs12 sm12 md9>
148	<div id="chart">	148	<div id="chart">
149	<apexchart	149	<apexchart
150	type="bar"	150	type="bar"
151	height="250"	151	height="250"
152	:options="chartOptions"	152	:options="chartOptions"
153	:series="series"	153	:series="series"
154	></apexchart>	154	></apexchart>
155	</div>	155	</div>
156	</v-flex>	156	</v-flex>
157	</v-layout>	157	</v-layout>
158	</v-card>	158	</v-card>
159	</v-flex>	159	</v-flex>
160	</v-layout>	160	</v-layout>
161	<v-card class="mt-2 card">	161	<v-card class="mt-2 card">
162	<!-- <full-calendar	162	<!-- <full-calendar
163	ref="calendar"	163	ref="calendar"
164	defaultView="month"	164	defaultView="month"
165	droppable="false"	165	droppable="false"
166	:events="events"	166	:events="events"
167	:config="config"	167	:config="config"
168	></full-calendar>-->	168	></full-calendar>-->
169	<h4 class="pa-3">	169	<h4 class="pa-3">
170	<b>Notice</b>	170	<b>Notice</b>
171	</h4>	171	</h4>
172		172
173	<v-data-table	173	<v-data-table
174	:items="noticeData"	174	:items="noticeData"
175	class="elevation-0"	175	class="elevation-0"
176	flat	176	flat
177	hide-actions	177	hide-actions
178	hide-headers	178	hide-headers
179	style="border-spacing: 0 !important;"	179	style="border-spacing: 0 !important;"
180	>	180	>
181	<template	181	<template
182	slot="items"	182	slot="items"
183	slot-scope="props"	183	slot-scope="props"
184	v-if="props.index < 5"	184	v-if="props.index < 5"
185	style="border-spacing: 0 !important;"	185	style="border-spacing: 0 !important;"
186	>	186	>
187	<tr class="td-notice">	187	<tr class="td-notice">
188	<td class="grey--text" style="width:18px">{{ props.index + 1}}</td>	188	<td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
189	<td>	189	<td>
190	<span class="grey--text caption">{{ date(props.item.created) }}</span>	190	<span class="grey--text caption">{{ date(props.item.created) }}</span>
191	<br />	191	<br />
192	<span class="body-2">{{ props.item.title}}</span>	192	<span class="body-2">{{ props.item.title}}</span>
193	</td>	193	</td>
194	<td class="noticeDecritpion grey--text mt-2">{{ props.item.description}}</td>	194	<td class="noticeDecritpion grey--text mt-2">{{ props.item.description}}</td>
195		195
196	<td class="text-xs-center">	196	<td class="text-xs-center">
197	<span>	197	<span>
198	<v-tooltip top>	198	<v-tooltip top>
199	<img	199	<img
200	slot="activator"	200	slot="activator"
201	style="cursor:pointer; width:25px; height:25px; "	201	style="cursor:pointer; width:25px; height:25px; "
202	@click="profile"	202	@click="profile"
203	src="/static/icon/view.png"	203	src="/static/icon/view.png"
204	/>	204	/>
205	<span>View</span>	205	<span>View</span>
206	</v-tooltip>	206	</v-tooltip>
207	</span>	207	</span>
208	</td>	208	</td>
209	</tr>	209	</tr>
210	</template>	210	</template>
211	</v-data-table>	211	</v-data-table>
212	</v-card>	212	</v-card>
213	</v-container>	213	</v-container>
214	</v-flex>	214	</v-flex>
215	<v-flex xs12 sm12 md3>	215	<v-flex xs12 sm12 md3>
216	<v-card height="100%" class="elevation-0 mt-3 profileDasboard">	216	<v-card height="100%" class="elevation-0 mt-3 profileDasboard">
217	<v-card-text>	217	<v-card-text>
218	<h4 class="text-xs-center py-3">	218	<h4 class="text-xs-center py-3">
219	<b>Profile</b>	219	<b>Profile</b>
220	</h4>	220	</h4>
221	<v-flex xs12 class="py-3">	221	<v-flex xs12 class="py-3">
222	<v-layout wrap>	222	<v-layout wrap>
223	<v-flex xs12 sm12 md4>	223	<v-flex xs12 sm12 md4>
224	<img src="/static/icon/user.png" v-if="!userData.schoolLogoUrl" width="80" />	224	<img src="/static/icon/user.png" v-if="!userData.schoolLogoUrl" width="80" />
225	<img	225	<img
226	:src="userData.schoolLogoUrl"	226	:src="userData.schoolLogoUrl"
227	v-else-if="userData.schoolLogoUrl"	227	v-else-if="userData.schoolLogoUrl"
228	width="80"	228	width="80"
229	/>	229	/>
230	</v-flex>	230	</v-flex>
231	<v-flex xs12 sm12 md6>	231	<v-flex xs12 sm12 md6>
232	<p class="mb-0 body-1">	232	<p class="mb-0 body-1">
233	<i>{{ userData.name }}</i>	233	<i>{{ userData.name }}</i>
234	</p>	234	</p>
235	<p class="mb-0 caption grey--text">{{ userData.email }}</p>	235	<p class="mb-0 caption grey--text">{{ userData.email }}</p>
236	<p class="mb-0 caption grey--text">{{ userData.mobile }}</p>	236	<p class="mb-0 caption grey--text">{{ userData.mobile }}</p>
237	<address class="caption grey--text mb-3">{{ userData.address }}</address>	237	<address class="caption grey--text mb-3">{{ userData.address }}</address>
238	</v-flex>	238	</v-flex>
239	</v-layout>	239	</v-layout>
240	</v-flex>	240	</v-flex>
241	<hr />	241	<hr />
242	<h4 class="text-xs-center py-3">	242	<h4 class="text-xs-center py-3">
243	<b>Calender</b>	243	<b>Calender</b>
244	</h4>	244	</h4>
245	<vue-event-calendar :events="demoEvents"></vue-event-calendar>	245	<vue-event-calendar :events="demoEvents"></vue-event-calendar>
246	</v-card-text>	246	</v-card-text>
247	</v-card>	247	</v-card>
248	</v-flex>	248	</v-flex>
249	</v-layout>	249	</v-layout>
250	</v-flex>	250	</v-flex>
251	</v-layout>	251	</v-layout>
252	<v-dialog v-model="dialog" max-width="500">	252	<v-dialog v-model="dialog" max-width="500">
253	<v-card color="grey lighten-4" flat>	253	<v-card color="grey lighten-4" flat>
254	<v-toolbar dark color="fixcolors">	254	<v-toolbar dark color="fixcolors">
255	<v-spacer></v-spacer>	255	<v-spacer></v-spacer>
256	<v-btn icon @click="dialog= false">	256	<v-btn icon @click="dialog= false">
257	<v-icon>close</v-icon>	257	<v-icon>close</v-icon>
258	</v-btn>	258	</v-btn>
259	</v-toolbar>	259	</v-toolbar>
260	<v-flex class="py-4">	260	<v-flex class="py-4">
261	<v-list-tile>	261	<v-list-tile>
262	<v-list-tile-action>	262	<v-list-tile-action>
263	<v-icon>edit</v-icon>	263	<v-icon>edit</v-icon>
264	</v-list-tile-action>	264	</v-list-tile-action>
265	<v-list-tile-content>	265	<v-list-tile-content>
266	<v-list-tile-title>{{ selected.title }}</v-list-tile-title>	266	<v-list-tile-title>{{ selected.title }}</v-list-tile-title>
267	</v-list-tile-content>	267	</v-list-tile-content>
268	</v-list-tile>	268	</v-list-tile>
269	<v-list-tile>	269	<v-list-tile>
270	<v-list-tile-action>	270	<v-list-tile-action>
271	<v-icon>access_time</v-icon>	271	<v-icon>access_time</v-icon>
272	</v-list-tile-action>	272	</v-list-tile-action>
273	<v-list-tile-content>	273	<v-list-tile-content>
274	<v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title>	274	<v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title>
275	</v-list-tile-content>	275	</v-list-tile-content>
276	</v-list-tile>	276	</v-list-tile>
277	</v-flex>	277	</v-flex>
278	</v-card>	278	</v-card>
279	</v-dialog>	279	</v-dialog>
280	<div class="loader" v-if="showLoader">	280	<div class="loader" v-if="showLoader">
281	<v-progress-circular indeterminate color="white"></v-progress-circular>	281	<v-progress-circular indeterminate color="white"></v-progress-circular>
282	</div>	282	</div>
283	</v-app>	283	</v-app>
284	</template>	284	</template>
285		285
286	<script>	286	<script>
287	import http from "@/Services/http.js";	287	import http from "@/Services/http.js";
288	import moment from "moment";	288	import moment from "moment";
289	// import { FunctionalCalendar } from "vue-functional-calendar";	289	// import { FunctionalCalendar } from "vue-functional-calendar";
290		290
291	export default {	291	export default {
292	components: {	292	components: {
293	// FunctionalCalendar	293	// FunctionalCalendar
294	},	294	},
295	data() {	295	data() {
296	return {	296	return {
297	// data: {	297	// data: {
298	// clieckedToday: false	298	// clieckedToday: false
299	// },	299	// },
300	// markedDates: ["16/4/2019", "18/4/2019", "20/4/2019", "21/4/2019"],	300	// markedDates: ["16/4/2019", "18/4/2019", "20/4/2019", "21/4/2019"],
301	// calendarData: {},	301	// calendarData: {},
302	// calendar: {},	302	// calendar: {},
303	demoEvents: [	303	demoEvents: [
304	{	304	{
305	date: "2020/01/10", // Required	305	date: "2020/01/10", // Required
306	title: "Foo" // Required	306	title: "Foo" // Required
307	},	307	},
308	{	308	{
309	date: "2020/01/12",	309	date: "2020/01/12",
310	title: "Bar",	310	title: "Bar",
311	desc: "description",	311	desc: "description",
312	customClass: "disabled highlight" // Custom classes to an calendar cell	312	customClass: "disabled highlight" // Custom classes to an calendar cell
313	}	313	}
314	],	314	],
315		315
316	showLoader: false,	316	showLoader: false,
317	calendarData: {},	317	calendarData: {},
318	dialog: false,	318	dialog: false,
319	dialogNotice: false,	319	dialogNotice: false,
320	HolidaysList: [],	320	HolidaysList: [],
321	EventsList: [],	321	EventsList: [],
322	events: [],	322	events: [],
323	config: {	323	config: {
324	eventClick: event => {	324	eventClick: event => {
325	this.selected = event;	325	this.selected = event;
326	this.dialog = true;	326	this.dialog = true;
327	}	327	}
328	},	328	},
329	selected: {},	329	selected: {},
330	// notice: {},	330	// notice: {},
331	userData: {},	331	userData: {},
332	dated: new Date(2018, 0, 9),	332	dated: new Date(2018, 0, 9),
333	userList: [],	333	userList: [],
334	sectionList: [],	334	sectionList: [],
335	students: "",	335	students: "",
336	parents: "",	336	parents: "",
337	teachers: "",	337	teachers: "",
338	classes: "",	338	classes: "",
339	noticeData: [],	339	noticeData: [],
340	attrs: [	340	attrs: [
341	{	341	{
342	key: "today",	342	key: "today",
343	highlight: true,	343	highlight: true,
344	dates: new Date()	344	dates: new Date()
345	}	345	}
346	],	346	],
347	drawer: true,	347	drawer: true,
348	items: [	348	items: [
349	{ title: "Home", icon: "dashboard" },	349	{ title: "Home", icon: "dashboard" },
350	{ title: "About", icon: "question_answer" }	350	{ title: "About", icon: "question_answer" }
351	],	351	],
352	right: null,	352	right: null,
353		353
354	series: [	354	series: [
355	{	355	{
356	name: "Total",	356	name: "Total",
357	data: [66, 44, 33]	357	data: [66, 44, 33]
358	}	358	}
359	],	359	],
360	chartOptions: {	360	chartOptions: {
361	chart: {	361	chart: {
362	type: "bar",	362	type: "bar",
363	height: 150,	363	height: 150,
364	animations: {	364	animations: {
365	enabled: true,	365	enabled: true,
366	easing: "easeinout",	366	easing: "easeinout",
367	speed: 1200,	367	speed: 1200,
368	animateGradually: {	368	animateGradually: {
369	enabled: true,	369	enabled: true,
370	delay: 450	370	delay: 450
371	},	371	},
372	dynamicAnimation: {	372	dynamicAnimation: {
373	enabled: true,	373	enabled: true,
374	speed: 450	374	speed: 450
375	}	375	}
376	}	376	}
377	},	377	},
378	plotOptions: {	378	plotOptions: {
379	bar: {	379	bar: {
380	horizontal: false,	380	horizontal: false,
381	columnWidth: "25%",	381	columnWidth: "25%",
382	// endingShape: "rounded",	382	// endingShape: "rounded",
383	distributed: true	383	distributed: true
384	}	384	}
385	},	385	},
386	legend: {	386	legend: {
387	show: false	387	show: false
388	},	388	},
389	colors: ["#7852cc", "#f9a825", "#ff8a89"],	389	colors: ["#7852cc", "#f9a825", "#ff8a89"],
390	dataLabels: {	390	dataLabels: {
391	enabled: false	391	enabled: false
392	},	392	},
393	stroke: {	393	stroke: {
394	show: true,	394	show: true,
395	width: 2,	395	width: 2,
396	colors: ["transparent"]	396	colors: ["transparent"]
397	},	397	},
398	xaxis: {	398	xaxis: {
399	categories: ["Fee", "Collections", "Expences"]	399	categories: ["Fee", "Collections", "Expences"]
400	},	400	},
401	yaxis: {	401	yaxis: {
402	title: {	402	title: {
403	text: ""	403	text: ""
404	}	404	}
405	},	405	},
406	fill: {	406	fill: {
407	opacity: 1	407	opacity: 1
408	},	408	},
409	tooltip: {	409	tooltip: {
410	y: {	410	y: {
411	formatter: function(val, opts) {	411	formatter: function(val, opts) {
412	// console.log("opts",opts.w.config.xaxis.categories)	412	// console.log("opts",opts.w.config.xaxis.categories)
413	return "" + val + " ";	413	return "" + val + " ";
414	}	414	}
415	}	415	}
416	}	416	}
417	}	417	}
418	};	418	};
419	},	419	},
420	mounted() {	420	mounted() {
421	this.token = this.$store.state.token;	421	this.token = this.$store.state.token;
422	// console.log("this.$store.state.role", this.$store.state.schoolRole);	422	// console.log("this.$store.state.role", this.$store.state.schoolRole);
423	// this.getData();	423	// this.getData();
424	this.getStudents();	424	this.getStudents();
425	this.getTeachers();	425	this.getTeachers();
426	this.getParents();	426	this.getParents();
427	this.getClasses();	427	this.getClasses();
428	this.getNoticeData();	428	this.getNoticeData();
429	this.getUserData();	429	this.getUserData();
430	// this.getUsersList();	430	// this.getUsersList();
431	},	431	},
432	methods: {	432	methods: {
433	closeNotice() {	433	closeNotice() {
434	this.dialogNotice = false;	434	this.dialogNotice = false;
435	},	435	},
436	profile() {	436	profile() {
437	// this.editedIndex = this.desserts.indexOf(item);	437	// this.editedIndex = this.desserts.indexOf(item);
438	// this.notice = Object.assign({}, item);	438	// this.notice = Object.assign({}, item);
439	// this.dialogNotice = true;	439	// this.dialogNotice = true;
440	this.$router.push({ name: "NoticeBoard" });	440	this.$router.push({ name: "NoticeBoard" });
441	},	441	},
442	date: function(date) {	442	date: function(date) {
443	return moment(date).format("MMMM DD, YYYY HH:mm");	443	return moment(date).format("MMMM DD, YYYY HH:mm");
444	},	444	},
445	refreshEvents() {	445	refreshEvents() {
446	this.$refs.calendar.$emit("refetch-events");	446	this.$refs.calendar.$emit("refetch-events");
447	},	447	},
448	removeEvent() {	448	removeEvent() {
449	this.$refs.calendar.$emit("remove-event", this.selected);	449	this.$refs.calendar.$emit("remove-event", this.selected);
450	this.selected = {};	450	this.selected = {};
451	},	451	},
452	eventSelected(event) {	452	eventSelected(event) {
453	this.selected = event;	453	this.selected = event;
454	console.log("this.selected", this.selected);	454	console.log("this.selected", this.selected);
455	},	455	},
456	// eventDropStart: function(event) {	456	// eventDropStart: function(event) {
457	// event.editable = false;	457	// event.editable = false;
458	// },	458	// },
459	eventCreated(...test) {	459	eventCreated(...test) {
460	console.log(test);	460	console.log(test);
461	},	461	},
462	getStudents() {	462	getStudents() {
463	http()	463	http()
464	.get("/getStudentsList", {	464	.get("/getStudentsList", {
465	headers: { Authorization: "Bearer " + token }	465	headers: {
466		466	Authorization: "Bearer " + this.$store.state.token
		467	}
467	})	468	})
468	.then(response => {	469	.then(response => {
469	this.students = response.data.data;	470	this.students = response.data.data;
470	this.showLoader = false;	471	this.showLoader = false;
471	})	472	})
472	.catch(error => {	473	.catch(error => {
473	// console.log("err====>", err);	474	// console.log("err====>", err);
474	this.showLoader = false;	475	this.showLoader = false;
475	if (error.response.status === 401) {	476	if (error.response.status === 401) {
476	this.$router.replace({ path: "/" });	477	this.$router.replace({ path: "/" });
477	this.$store.dispatch("setToken", null);	478	this.$store.dispatch("setToken", null);
478	this.$store.dispatch("Id", null);	479	this.$store.dispatch("Id", null);
479	}	480	}
480	});	481	});
481	},	482	},
482	getParents() {	483	getParents() {
483	http()	484	http()
484	.get("/getParentsList")	485	.get("/getParentsList", {
		486	headers: {
		487	Authorization: "Bearer " + this.$store.state.token
		488	}
		489	})
485	.then(response => {	490	.then(response => {
486	this.parents = response.data.data;	491	this.parents = response.data.data;
487	this.showLoader = false;	492	this.showLoader = false;
488	})	493	})
489	.catch(error => {	494	.catch(error => {
490	// console.log("err====>", err);	495	// console.log("err====>", err);
491	this.showLoader = false;	496	this.showLoader = false;
492	if (error.response.status === 401) {	497	if (error.response.status === 401) {
493	this.$router.replace({ path: "/" });	498	this.$router.replace({ path: "/" });
494	this.$store.dispatch("setToken", null);	499	this.$store.dispatch("setToken", null);
495	this.$store.dispatch("Id", null);	500	this.$store.dispatch("Id", null);
496	}	501	}
497	});	502	});
498	},	503	},
499	getTeachers() {	504	getTeachers() {
500	http()	505	http()
501	.get("/getTeachersList", {	506	.get("/getTeachersList", {
502	headers: { Authorization: "Bearer " + token }	507	headers: {
503		508	Authorization: "Bearer " + this.$store.state.token
		509	}
504	})	510	})
505	.then(response => {	511	.then(response => {
506	this.teachers = response.data.data;	512	this.teachers = response.data.data;
507	this.showLoader = false;	513	this.showLoader = false;
508	})	514	})
509	.catch(error => {	515	.catch(error => {
510	// console.log("err====>", err);	516	// console.log("err====>", err);
511	this.showLoader = false;	517	this.showLoader = false;
512	if (error.response.status === 401) {	518	if (error.response.status === 401) {
513	this.$router.replace({ path: "/" });	519	this.$router.replace({ path: "/" });
514	this.$store.dispatch("setToken", null);	520	this.$store.dispatch("setToken", null);
515	this.$store.dispatch("Id", null);	521	this.$store.dispatch("Id", null);
516	}	522	}
517	});	523	});
518	},	524	},
519	getClasses() {	525	getClasses() {
520	http()	526	http()
521	.get("/getClassesList")	527	.get("/getClassesList", {
		528	headers: {
		529	Authorization: "Bearer " + this.$store.state.token
		530	}
		531	})
522	.then(response => {	532	.then(response => {
523	this.classes = response.data.data;	533	this.classes = response.data.data;
524	this.showLoader = false;	534	this.showLoader = false;
525	})	535	})
526	.catch(error => {	536	.catch(error => {
527	this.showLoader = false;	537	this.showLoader = false;
528	if (error.response.status === 401) {	538	if (error.response.status === 401) {
529	this.$router.replace({ path: "/" });	539	this.$router.replace({ path: "/" });
530	this.$store.dispatch("setToken", null);	540	this.$store.dispatch("setToken", null);
531	this.$store.dispatch("Id", null);	541	this.$store.dispatch("Id", null);
532	this.$store.dispatch("Role", null);	542	this.$store.dispatch("Role", null);
533	}	543	}
534	});	544	});
535	},	545	},
536	getNoticeData() {	546	getNoticeData() {
537	this.showLoader = true;	547	this.showLoader = true;
538	http()	548	http()
539	.get("/getEventsList")	549	.get("/getEventsList", {
		550	headers: {
		551	Authorization: "Bearer " + this.$store.state.token
		552	}
		553	})
540	.then(response => {	554	.then(response => {
541	this.noticeData = response.data.data;	555	this.noticeData = response.data.data;
542	this.showLoader = false;	556	this.showLoader = false;
543	})	557	})
544	.catch(error => {	558	.catch(error => {
545	this.showLoader = false;	559	this.showLoader = false;
546	if (error.response.status === 401) {	560	if (error.response.status === 401) {
547	this.$router.replace({ path: "/" });	561	this.$router.replace({ path: "/" });
548	this.$store.dispatch("setToken", null);	562	this.$store.dispatch("setToken", null);
549	this.$store.dispatch("Id", null);	563	this.$store.dispatch("Id", null);
550	}	564	}
551	});	565	});
552	},	566	},
553	getUserData() {	567	getUserData() {
554	// this.showLoader = true;	568	// this.showLoader = true;
555	http()	569	http()
556	.get("/getParticularUserDetail")	570	.get("/getParticularUserDetail", {
		571	headers: {
		572	Authorization: "Bearer " + this.$store.state.token
		573	}
		574	})
557	.then(response => {	575	.then(response => {
558	this.userData = response.data.data;	576	this.userData = response.data.data;
559	this.showLoader = false;	577	this.showLoader = false;
560	})	578	})
561	.catch(error => {	579	.catch(error => {
562	this.showLoader = false;	580	this.showLoader = false;
563	// if (error.response.status === 401) {	581	// if (error.response.status === 401) {
564	// this.$router.replace({ path: "/" });	582	// this.$router.replace({ path: "/" });
565	// this.$store.dispatch("setToken", null);	583	// this.$store.dispatch("setToken", null);
566	// this.$store.dispatch("Id", null);	584	// this.$store.dispatch("Id", null);
567	// }	585	// }
568	});	586	});
569	}	587	}
570	}	588	}
571	};	589	};
572	</script>	590	</script>
573		591
574	<style scoped>	592	<style scoped>
575	@import "fullcalendar/dist/fullcalendar.css";	593	@import "fullcalendar/dist/fullcalendar.css";
576	</style>	594	</style>

src/pages/Mark/viewMark.vue

Diff comments View file @25205cc

 <template>
   <v-app id="pages-dasboard">
     <!-- ****** PROFILE MARK  ****** -->
     <v-container fluid grid-list-md>
       <v-layout>
         <v-flex xs12 sm8 md10>
           <v-btn class="open-dialog-button mt-3" round dark @click="print()">
             Print
             <v-icon size="18" right dark>print</v-icon>
           </v-btn>
         </v-flex>
         <v-flex xs12 sm4 md2 class="right">
           <v-select
             class
             :items="selectMark"
             label="Select"
             v-model="selectMarkList"
             @change="selectMarkData(selectMarkList)"
           ></v-select>
         </v-flex>
       </v-layout>
       <v-flex xs12 sm12 id="printMe">
         <v-layout wrap>
           <!-- ****** TABLE DATA MARK  ****** -->
           <v-flex xs12 sm12 md12>
             <v-card
               v-for="(value, id, index) in filterData"
               :key="index"
               flat
               style="border: 1px solid lightgrey;margin-bottom:14px;padding:20px"
             >
-              <!-- <v-layout>
-                <v-flex xs12>
-                  <v-btn class="add-button right" round dark @click="printStudentReport()">
-                    Print
-                    <v-icon right dark>print</v-icon>
-                  </v-btn>
-                </v-flex>
-              </v-layout> -->
               <v-layout>
-                <v-flex xs12 class="text-xs-center">
+                <v-flex xs12 sm12 md12 class="text-xs-center">
                   <img :src="userData.schoolLogoUrl" width="140" alt="logo" />
                   <p class="title">{{ userData.name }}</p>
                   <p>{{ userData.address }}</p>
                 </v-flex>
-              </v-layout>
+                <v-flex xs12 sm12 md12 class="text-xs-center">
-              <v-layout style="padding-top:10px" v-if="index === 0">
-                <v-flex xs5>
-                  <p
-                    style="font-size:20px;margin:0px;margin-bottom:4px;"
-                  >{{ value[0].studentId.name }}</p>
-                  <p
-                    style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
-                  >Class : {{ value[0].classId.classNum }}</p>
-                  <p
-                    style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
-                  >Roll NO : {{ value[0].studentId.rollNo }}</p>
-                  <p
-                    style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
-                  >Section : {{ value[0].sectionId.name }}</p>
-                </v-flex>
-                <v-flex xs2>
                   <v-avatar size="100">
                     <img
                       :src="value[0].studentId.profilePicUrl"
                       v-if="value[0].studentId.profilePicUrl"
                       width="100px"
                     />
                     <img
                       src="/static/icon/user.png"
                       v-else-if="!value[0].studentId.profilePicUrl"
                       width="100px"
                     />
                   </v-avatar>
+                  <p
+                    style="font-size:20px;margin:0px;margin-bottom:4px;"
+                  >{{ value[0].studentId.name }}</p>
+                  <p
+                    style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
+                  >Class : {{ value[0].classId.classNum }}</p>
+                  <p
+                    style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
+                  >Roll NO : {{ value[0].studentId.rollNo }}</p>
+                  <p
+                    style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
+                  >Section : {{ value[0].sectionId.name }}</p>
                 </v-flex>
               </v-layout>
               <v-card-title class="subheading">{{value[0].examId.examName}}</v-card-title>
               <table
                 class="mb-5 tableRsponsive feeTypeTable"
                 style="border: 1px solid lightgrey;
                   border-collapse: collapse;!important
                   table-layout: auto !important;
                   width: 100% !important;
                  "
               >
                 <thead style="border: 1px solid lightgrey !important;">
                   <tr style="border: 1px solid lightgrey !important;padding:4px;">
                     <td
                       rowspan="2"
                       style="border: 1px solid lightgrey !important;padding: 10px;"
                     >Subject</td>
                     <template v-for="studentData in  value">
                       <td
                         colspan="2"
                         v-for="studentMark in studentData.studentsMarks"
                         style="border: 1px solid lightgrey !important;padding: 10px;"
                       >{{studentMark.markDistributionId.distributionType}}</td>
                       <td style="border: 1px solid lightgrey !important;padding: 10px;">Total</td>
                     </template>
                   </tr>
                   <tr
                     v-for="(subject, ind) in value"
                     v-if="ind == 0"
                     style="border: 1px solid lightgrey !important;"
                   >
                     <template v-for="(exam, i) in subject.studentsMarks">
                       <td style="border: 1px solid lightgrey !important;padding: 10px;">Mark</td>
                       <td style="border: 1px solid lightgrey !important;padding: 10px;">Highest Mark</td>
                     </template>
                     <td style="border: 1px solid lightgrey !important;padding: 10px;">Mark</td>
                   </tr>
                 </thead>
                 <tbody style="border: 1px solid lightgrey !important;">
                   <tr v-for="subject in value" style="border: 1px solid lightgrey !important;">
                     <td
                       style="border: 1px solid lightgrey !important;padding: 10px;"
                     >{{subject.subjectName}}</td>
                     <template v-for="(exam, i) in subject.studentsMarks">
                       <td
                         style="border: 1px solid lightgrey !important;padding: 10px;"
                       >{{exam.marksScored}}</td>
                       <td
                         style="border: 1px solid lightgrey !important;padding: 10px;"
                       >{{exam.markDistributionId.markValue}}</td>
                     </template>
                     <td
                       style="border: 1px solid lightgrey !important;padding: 10px;"
                     >{{subject.totalMarks}}</td>
                   </tr>
                 </tbody>
               </table>
             </v-card>
           </v-flex>
         </v-layout>
       </v-flex>
     </v-container>
     <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";
 import _ from "underscore";
 export default {
   data: () => ({
     showLoader: true,
     nameShow: false,
     showMark: true,
     showGrade: false,
     markData: [],
     token: "",
     markDistributions: [],
     markParticularDistributionData: [],
     filterData: [],
     output: null,
     gradeAPlus: "A+",
     gradeA: "A",
     gradeBPlus: "B+",
     gradeB: "B",
     gradeCPlus: "C+",
     gradeC: "C",
     selectMarkList: "Mark",
     selectMark: ["Mark", "Grade"],
     MarkData: "",
     userData: {}
   }),
   mounted() {
     this.token = this.$store.state.token;
     this.getMarkList();
     this.getUserData();
   },
   methods: {
     getMarkList() {
       this.showLoader = true;
       http()
         .get("/getParticularMark", {
           params: { studentId: this.$route.params.markId },
           headers: { Authorization: "Bearer " + this.token }
         })
         .then(response => {
           this.markData = response.data.data;
           let newData = response.data.data;
           // console.log("newData", newData);
           for (var i = 0; i < newData.length; i++) {
             newData[i].examination = newData[i].examId._id;
           }
           this.filterData = _.groupBy(newData, ["examination"]);
           // console.log("this.filterData", this.filterData);
           for (let data in this.filterData) {
             for (let item in this.filterData[data]) {
               var totalMarks = 0;
               for (
                 let i = 0;
                 i < this.filterData[data][item].studentsMarks.length;
                 i++
               ) {
                 // console.log("this.filterData[data][item].studentsMarks[i]",this.filterData[data][item].studentsMarks[i]
                 //   .marksScored)
                 totalMarks += this.filterData[data][item].studentsMarks[i]
                   .marksScored;
               }
               this.filterData[data][item].totalMarks = totalMarks;
               if (totalMarks > 90) {
                 this.filterData[data][item].grade = this.gradeAPlus;
               } else if (totalMarks > 80 && totalMarks < 90) {
                 this.filterData[data][item].grade = this.gradeA;
               } else if (totalMarks > 70 && totalMarks < 80) {
                 this.filterData[data][item].grade = this.gradeBPlus;
               } else if (totalMarks > 60 && totalMarks < 70) {
                 this.filterData[data][item].grade = this.gradeB;
               } else if (totalMarks > 50 && totalMarks < 60) {
                 this.filterData[data][item].grade = this.gradeCPlus;
               } else if (totalMarks > 40 && totalMarks < 50) {
                 this.filterData[data][item].grade = this.gradeC;
               }
             }
           }
           this.showLoader = false;
         })
         .catch(error => {
           this.showLoader = false;
           this.snackbar = true;
           this.text = error.response.data.message;
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
           }
         });
     },
     print() {
       // Pass the element id here
       this.$htmlToPaper("printMe");
     },
     getUserData() {
       http()
         .get("/getParticularUserDetail")
         .then(response => {
           this.userData = response.data.data;
         })
         .catch(error => {
-          if (error.response.status === 401) {
+          // if (error.response.status === 401) {
-            this.$router.replace({ path: "/" });
+          //   this.$router.replace({ path: "/" });
-            this.$store.dispatch("setToken", null);
+          //   this.$store.dispatch("setToken", null);
-            this.$store.dispatch("Id", null);
+          //   this.$store.dispatch("Id", null);
-          }
+          // }
         });
     },
     selectMarkData(select) {
       if (select == "Mark") {
         this.showMark = true;
         this.showGrade = false;
       } else if (select == "Grade") {
         this.showGrade = true;
         this.showMark = false;
       }
     }
   }
 };
 </script>
 <style scoped>
 .add-button {
   background: #feb83c !important;
   border-color: #feb83c !important;
   text-transform: none !important;
   -webkit-box-shadow: none !important;
   box-shadow: none !important;
 }
 .card-styles {
   background: #7f62f8 !important;
   border-color: #7f62f8 !important;
 }
 .open-dialog-button {
   background: #827bfa !important;
   border-color: #827bfa !important;
   text-transform: none !important;
 }
 table {
   border-collapse: collapse;
   border: 1px solid #e2e7eb;
 }
 th,
 td {
   border: 1px solid #e2e7eb;
   text-align: center;
 }
 table.feeTypeTable {
   table-layout: auto !important;
   width: 100% !important;
 }
 .bg-sky {
   background-color: #98b2cc !important;
 }
 .bg-sky-light {
   background-color: #89a0b8;
 }
 .bg-purple {
   background-color: #9583ac;
 }
 .bg-skyDark {
   background-color: #956785;
 }
 .loader {
   width: 100%;
   height: 100%;
   position: fixed;
   top: 0;
   left: 0;
   text-align: center;
   background-color: rgba(0, 0, 0, 0.5);
   z-index: 999;
 }
 .loader > div {
   position: relative;
   top: calc(50% - 16px);
 }
 @media screen and (max-width: 380px) {
   .tableRsponsive {
     /* display: block; */
     position: relative;
     overflow: scroll;
   }
 }
 </style>

src/pages/Report/progressCardReport.vue

Diff comments View file @25205cc

 <template>
   <v-container fluid class="body-color">
     <!-- ******  Progress Card Report Table****** -->
     <v-card flat class="elevation-0 transparent">
       <v-form ref="form" v-model="valid" lazy-validation>
         <v-flex xs12 sm12 lg12>
           <v-layout wrap>
             <v-flex xs12 sm12 lg3>
               <v-layout>
                 <v-flex xs3 sm6 lg2 class="subheading mt-4">
                   <label class="right">Class:</label>
                 </v-flex>
                 <v-flex xs9 sm6 lg8 class="ml-2">
                   <v-select
                     v-model="getReport.classId"
                     label="Select your class"
                     type="text"
                     :items="classList"
                     item-text="classNum"
                     item-value="_id"
                     :rules="classRules"
                     @change="getSections(getReport.classId)"
                     required
                   ></v-select>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12 sm12 lg3>
               <v-layout>
                 <v-flex xs3 sm6 lg2 class="subheading mt-4">
                   <label class="right">Section:</label>
                 </v-flex>
                 <v-flex xs9 sm6 lg8 class="ml-2">
                   <v-select
                     :items="addSection"
                     label="Select your Section"
                     v-model="getReport.sectionId"
                     item-text="name"
                     item-value="_id"
                     name="Select Section"
                     @change="getStudents"
                     :rules="sectionRules"
                     required
                   ></v-select>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12 sm12 lg3>
               <v-layout>
                 <v-flex xs3 sm6 lg2 class="subheading mt-4">
                   <label class="right">Student:</label>
                 </v-flex>
                 <v-flex xs9 sm6 lg8 class="ml-2">
                   <v-select
                     :items="getStudentsList"
                     label="Select your student"
                     v-model="getReport.studentId"
                     item-text="name"
                     item-value="_id"
                     :rules="studentRules"
                     required
                   ></v-select>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12 sm12 lg3 class="hidden-xs-only hidden-sm-only pl-5">
               <v-btn
                 @click="getMarkReportList"
                 round
                 dark
                 :loading="loading"
                 class="open-dialog-button mt-3 ml-5"
               >Get Report</v-btn>
             </v-flex>
           </v-layout>
         </v-flex>
       </v-form>
     </v-card>
     <v-layout v-show="showReport">
       <v-flex xs12>
         <v-card class="transparent elevation-0">
           <v-layout>
             <v-flex xs12>
               <v-btn class="open-dialog-button right" round dark @click="printProgressReport()">
                 Print
                 <v-icon right dark>print</v-icon>
               </v-btn>
             </v-flex>
           </v-layout>
-          <v-layout>
-            <v-flex xs12 class="text-xs-center">
-              <img :src="userData.schoolLogoUrl" width="140" alt="logo" />
-              <p class="title">{{ userData.name }}</p>
-              <p>{{ userData.address }}</p>
-            </v-flex>
-          </v-layout>
-          <!-- </v-card>
-      </v-flex>
-          </v-layout>-->
           <v-container grid-list-md v-show="showReport">
-            <!-- {{ filterData }} -->
-            <!-- <v-layout>
-        <v-flex xs12 sm12 v-if="filterData != {}">
-          <v-btn class="add-button right" round dark @click="printProgressReport()">
-            Print
-            <v-icon right dark>print</v-icon>
-          </v-btn>
-        </v-flex>
-            </v-layout>-->
             <v-flex xs12 sm12 id="printMe">
               <v-layout wrap>
                 <!-- ****** TABLE DATA MARK  ****** -->
                 <v-flex xs12 sm12 md12>
                   <v-card
                     v-for="(value, id, index) in filterData"
                     :key="index"
                     flat
                     style="border: 1px solid lightgrey;margin-bottom:14px;padding:20px"
                   >
-                    <v-layout style="padding-top:10px" v-if="index === 0">
+                    <v-layout>
-                      <v-flex xs5>
+                      <v-flex xs12 sm12 md12 class="text-xs-center">
-                        <p
+                          <img :src="userData.schoolLogoUrl" width="140" alt="logo" />
-                          style="font-size:20px;margin:0px;margin-bottom:4px;"
+                          <p class="title">{{ userData.name }}</p>
-                        >{{ value[0].studentId.name }}</p>
+                          <p>{{ userData.address }}</p>
-                        <p
-                          style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
-                        >Class : {{ value[0].classId.classNum }}</p>
-                        <p
-                          style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
-                        >Roll NO : {{ value[0].studentId.rollNo }}</p>
-                        <p
-                          style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
-                        >Section : {{ value[0].sectionId.name }}</p>
                       </v-flex>
-                      <v-flex xs2>
+                      <v-flex xs12 sm12 md12 class="text-xs-center">
-                        <v-avatar size="100">
+                          <v-avatar size="100">
-                          <img
+                            <img :src="value[0].studentId.profilePicUrl" v-if="value[0].studentId.profilePicUrl" width="100px" />
-                            :src="value[0].studentId.profilePicUrl"
+                            <img src="/static/icon/user.png" v-else-if="!value[0].studentId.profilePicUrl" width="100px" />
-                            v-if="value[0].studentId.profilePicUrl"
+                          </v-avatar>
-                            width="100px"
+                          <p
-                          />
+                            style="font-size:20px;margin:0px;margin-bottom:4px;"
-                          <img
+                          >{{ value[0].studentId.name }}</p>
-                            src="/static/icon/user.png"
+                          <p
-                            v-else-if="!value[0].studentId.profilePicUrl"
+                            style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
-                            width="100px"
+                          >Class : {{ value[0].classId.classNum }}</p>
-                          />
+                          <p
-                        </v-avatar>
+                            style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
+                          >Roll NO : {{ value[0].studentId.rollNo }}</p>
+                          <p
+                            style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
+                          >Section : {{ value[0].sectionId.name }}</p>
                       </v-flex>
                     </v-layout>
                     <v-card-title class="subheading">{{value[0].examId.examName}}</v-card-title>
                     <table
                       class="mb-5 tableRsponsive feeTypeTable"
                       style="border: 1px solid lightgrey;
                         border-collapse: collapse;!important
                         table-layout: auto !important;
                         width: 100% !important;
                         overflow: hidden;
                         display: block;"
-                          >
+                    >
                       <thead style="border: 1px solid lightgrey !important;">
                         <tr style="border: 1px solid lightgrey !important;padding:4px;">
                           <td
                             rowspan="2"
                             style="border: 1px solid lightgrey !important;padding: 10px;"
                           >Subject</td>
                           <td
                             v-for="(exam,i) in value[index].studentsMarks"
                             colspan="2"
                             style="border: 1px solid lightgrey !important;padding: 10px;"
                           >{{ exam.markDistributionId.distributionType }}</td>
                           <template v-for="studentData in  value">
                             <td
                               colspan="2"
                               v-for="studentMark in studentData.studentsMarks"
                             >{{ studentMark.markDistributionId.distributionType }}</td>
                           </template>
                           <td>{{value[0].studentsMarks[1].markDistributionId.distributionType}}</td>
                           <td style="border: 1px solid lightgrey !important;padding: 10px;">Total</td>
                         </tr>
                         <tr
                           v-for="(subject, ind) in value"
                           v-if="ind == 0"
                           style="border: 1px solid lightgrey !important;"
                         >
                           <template v-for="(exam, i) in subject.studentsMarks">
                             <td style="border: 1px solid lightgrey !important;padding: 10px;">Mark</td>
                             <td
                               style="border: 1px solid lightgrey !important;padding: 10px;"
                             >Highest Mark</td>
                           </template>
                           <td style="border: 1px solid lightgrey !important;padding: 10px;">Mark</td>
                         </tr>
                       </thead>
                       <tbody style="border: 1px solid lightgrey !important;">
                         <tr
                           v-for="subject in value"
                           style="border: 1px solid lightgrey !important;"
                         >
                           <td
                             style="border: 1px solid lightgrey !important;padding: 10px;"
                           >{{subject.subjectName}}</td>
                           <template v-for="(exam, i) in subject.studentsMarks">
                             <td
                               style="border: 1px solid lightgrey !important;padding: 10px;"
                             >{{exam.marksScored}}</td>
                             <td
                               style="border: 1px solid lightgrey !important;padding: 10px;"
                             >{{exam.markDistributionId.markValue}}</td>
                           </template>
                           <td
                             style="border: 1px solid lightgrey !important;padding: 10px;"
                           >{{subject.totalMarks}}</td>
                         </tr>
                       </tbody>
                       <!-- <tfoot>
                   <tr>
                     <td colspan="4">
                       <span class="right subheding">Total Amount (RS) :</span>
                     </td>
                     <td>{{ feeType.subTotal }}</td>
                   </tr>
                   <tr>
                     <td colspan="4">
                       <span class="right subheding">Paid (RS) :</span>
                     </td>
                     <td>{{ feeType.totalPaidAmount ? feeType.totalPaidAmount : 0 }}</td>
                   </tr>
                   <tr>
                     <td colspan="4">
                       <span class="right subheding">Balance (RS) :</span>
                     </td>
                     <td>{{ feeType.totalPaidAmount ? feeType.subTotal - feeType.totalPaidAmount : feeType.subTotal }}</td>
                   </tr>
                       </tfoot>-->
                     </table>
                   </v-card>
                 </v-flex>
               </v-layout>
             </v-flex>
           </v-container>
         </v-card>
       </v-flex>
     </v-layout>
     <div class="loader" v-if="showLoader">
       <v-progress-circular indeterminate color="white"></v-progress-circular>
     </div>
   </v-container>
 </template>
 <script>
 import http from "@/Services/http.js";
 import moment from "moment";
 import _ from "underscore";
 export default {
   data: () => ({
     showLoader: false,
     markData: [],
     token: "",
     markDistributions: [],
     markParticularDistributionData: [],
     loading: false,
     valid: true,
     loading: false,
     showReport: false,
     addSection: [],
     filterData: [],
     getStudentsList: [],
     classRules: [v => !!v || "Class is required"],
     sectionRules: [v => !!v || "Class is required"],
     studentRules: [v => !!v || "Student is required"],
     getReport: {},
     classList: [],
     output: null,
     userData: {}
   }),
   mounted() {
     this.token = this.$store.state.token;
     this.getClass();
     this.getUserData();
   },
   methods: {
     clear() {
       this.$refs.form.reset();
     },
     getClass() {
       this.showLoader = true;
       http()
         .get("/getClassesList", {
           headers: { Authorization: "Bearer " + this.token }
         })
         .then(response => {
           this.classList = response.data.data;
           this.showLoader = false;
         })
         .catch(error => {
           this.showLoader = false;
           // console.log("err====>", err);
         });
     },
     getSections(_id) {
       this.showLoader = true;
       http()
         .get(
           "/getSectionsList",
           { params: { classId: _id } },
           {
             headers: { Authorization: "Bearer " + this.token }
           }
         )
         .then(response => {
           this.addSection = response.data.data;
           this.showLoader = false;
         })
         .catch(err => {
           this.showLoader = false;
           // console.log("err====>", err);
         });
     },
     getStudents() {
       this.showLoader = true;
       http()
         .get("/getStudentWithClass", {
           params: {
             classId: this.getReport.classId,
             sectionId: this.getReport.sectionId
           }
         })
         .then(response => {
           this.getStudentsList = response.data.data;
           this.showLoader = false;
           // console.log("getSectionsList=====>", response.data.data);
         })
         .catch(error => {
           console.log("err====>", error);
           this.showLoader = false;
         });
     },
     getMarkReportList() {
       // this.showLoader = true;
       this.showReport = true;
       http()
         .get("/getParticularMark", {
           params: { studentId: this.getReport.studentId },
           headers: { Authorization: "Bearer " + this.token }
         })
         .then(response => {
           this.showLoader = false;
           let newData = response.data.data;
           // console.log("response", newData);
           for (var i = 0; i < newData.length; i++) {
             newData[i].examination = newData[i].examId._id;
             // console.log("newData[i].examination", newData[i].examination);
           }
           this.filterData = _.groupBy(newData, ["examination"]);
           for (let data in this.filterData) {
             // console.log("data+++++++++++++++++++++++++++++++++++", data);
             for (let item in this.filterData[data]) {
               // console.log(
               //   "filterData[data]==========================>",
               //   this.filterData[data]
               // );
               // console.log("filterData[item]==========================>", item);
               var totalMarks = 0;
               for (
                 let i = 0;
                 i < this.filterData[data][item].studentsMarks.length;
                 i++
               ) {
                 totalMarks += this.filterData[data][item].studentsMarks[i]
                   .marksScored;
               }
               this.filterData[data][item].totalMarks = totalMarks;
               // var total = 0;
               // total += this.filterData[data][item].totalMarks  ;
               // console.log("total", total);
             }
           }
         })
         .catch(error => {
           // console.log("err====>", err);
           this.showLoader = false;
           this.snackbar = true;
           this.text = error.response.data.message;
           if (error.response.status === 401) {
             this.$router.replace({ path: "/" });
             this.$store.dispatch("setToken", null);
             this.$store.dispatch("Id", null);
           }
         });
     },
     printProgressReport() {
       // Pass the element id here
       this.$htmlToPaper("printMe");
     },
     getUserData() {
       http()
         .get("/getParticularUserDetail")
         .then(response => {
           this.userData = response.data.data;
         })
         .catch(error => {
-          if (error.response.status === 401) {
+          // if (error.response.status === 401) {
-            this.$router.replace({ path: "/" });
+          //   this.$router.replace({ path: "/" });
-            this.$store.dispatch("setToken", null);
+          //   this.$store.dispatch("setToken", null);
-            this.$store.dispatch("Id", null);
+          //   this.$store.dispatch("Id", null);
-          }
+          // }
         });
     }
   }
 };
 </script>
 <style scoped>
 table {
   border-collapse: collapse;
   border: 1px solid #e2e7eb;
 }
 th,
 td {
   border: 1px solid #e2e7eb;
   padding: 10px;
   text-align: center;
 }
 table.feeTypeTable {
   table-layout: auto !important;
   width: 100% !important;
 }
 .bg-sky {
   background-color: #98b2cc !important;
 }
 .bg-sky-light {
   background-color: #89a0b8;
 }
 .bg-purple {
   background-color: #9583ac;
 }
 .bg-skyDark {
   background-color: #956785;
 }
 @media screen and (max-width: 380px) {
   .tableRsponsive {
     /* display: block; */
     position: relative;

src/pages/Report/studentReport.vue

Diff comments View file @25205cc

 <template>
   <v-container fluid class="body-color">
     <!-- ******  Student Report TABLE****** -->
     <v-card flat class="elevation-0 transparent">
       <v-form ref="form" v-model="valid" lazy-validation>
         <v-flex xs12 sm12 lg12>
           <v-layout wrap>
             <v-flex xs12 sm12 lg4>
               <v-layout>
                 <v-flex xs4 sm4 lg3 class="subheading mt-4">
                   <label class="right">Report For :</label>
                 </v-flex>
                 <v-flex xs7 sm6 lg8 class="ml-2">
                   <v-autocomplete
                     v-model="report.form"
                     label="Select your report for"
                     :items="formList"
                     item-text="name"
                     item-value="value"
                     @change="getReport(report.form)"
                     :rules="formRules"
                     required
                   ></v-autocomplete>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12 sm12 lg4 v-if="bloodGroup">
               <v-layout>
                 <v-flex xs4 sm4 lg4 class="subheading mt-4">
                   <label class="right">Blood Group :</label>
                 </v-flex>
                 <v-flex xs7 sm6 lg8 class="ml-2">
                   <v-autocomplete
                     v-model="report.bloodGroup"
                     label="Select your Blood Group "
                     :items="bloodGroupList"
                     :rules="bloodGroupRules"
                     required
                   ></v-autocomplete>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12 sm12 lg4 v-if="genderShow">
               <v-layout>
                 <v-flex xs4 sm4 lg4 class="subheading mt-4">
                   <label class="right">Gender:</label>
                 </v-flex>
                 <v-flex xs7 sm6 lg8 class="ml-2">
                   <v-autocomplete
                     v-model="report.gender"
                     label="Select your gender "
                     :items="gender"
                     :rules="genderRules"
                     required
                   ></v-autocomplete>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12 sm12 lg4 v-if="TransportShow">
               <v-layout>
                 <v-flex xs4 sm4 lg4 class="subheading mt-4">
                   <label class="right">Route:</label>
                 </v-flex>
                 <v-flex xs7 sm6 lg8 class="ml-2">
                   <v-autocomplete
                     v-model="report.route"
                     label="Select your gender "
                     :items="route"
                     :rules="routeRules"
                     required
                   ></v-autocomplete>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12 sm12 lg4 v-if="HostelShow">
               <v-layout>
                 <v-flex xs4 sm4 lg4 class="subheading mt-4">
                   <label class="right">Hostel:</label>
                 </v-flex>
                 <v-flex xs7 sm6 lg8 class="ml-2">
                   <v-autocomplete
                     v-model="report.route"
                     label="Select your hostel "
                     :items="hostelList"
                     :rules="hostelRules"
                     required
                   ></v-autocomplete>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12 sm12 lg4 v-if="countryShow">
               <v-layout>
                 <v-flex xs4 sm4 lg4 class="subheading mt-4">
                   <label class="right">Country :</label>
                 </v-flex>
                 <v-flex xs7 sm6 lg8 class="ml-2">
                   <v-autocomplete
                     v-model="report.country"
                     label="Select your Country "
                     :items="countryList"
                     :rules="countryRules"
                     required
                   ></v-autocomplete>
                 </v-flex>
               </v-layout>
             </v-flex>
             <!-- <v-flex xs12 sm12 lg4 v-show="BirthdayShow">
             <v-layout>
               <v-flex xs3 sm6 lg4 class="subheading mt-4">
                 <label class="right">Country :</label>
               </v-flex>
               <v-flex xs12 sm12 lg8 class="ml-2">
                 <v-select
                   v-model="report.country"
                   label="Select your Country "
                   :items="countryList"
                   required
                 ></v-select>
               </v-flex>
             </v-layout>
             </v-flex>-->
             <v-flex xs12 sm12 lg4 v-if="classShow">
               <v-layout>
                 <v-flex xs4 sm4 lg3 class="subheading mt-4">
                   <label class="right">Class:</label>
                 </v-flex>
                 <v-flex xs7 sm6 lg8 class="ml-2">
                   <v-autocomplete
                     v-model="report.classId"
                     label="Select your class"
                     type="text"
                     :rules="classRules"
                     :items="classList"
                     item-text="classNum"
                     item-value="_id"
                     @change="getSections(report.classId)"
                     required
                   ></v-autocomplete>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12 sm12 lg4 v-if="sectionShow">
               <v-layout>
                 <v-flex xs4 sm4 lg3 class="subheading mt-4">
                   <label class="right">Section:</label>
                 </v-flex>
                 <v-flex xs7 sm6 lg8 class="ml-2">
                   <v-autocomplete
                     :items="addSection"
                     label="Select your Section"
                     v-model="report.sectionId"
                     :rules="sectionRules"
                     item-text="name"
                     item-value="_id"
                     name="Select Section"
                     required
                   ></v-autocomplete>
                 </v-flex>
               </v-layout>
             </v-flex>
             <v-flex xs12 sm12 lg4 class="hidden-xs-only hidden-sm-only pl-5">
               <v-btn
                 @click="getStudents"
                 round
                 dark
                 :loading="loading"
                 class="open-dialog-button mt-3 ml-5"
               >Get Report</v-btn>
             </v-flex>
             <v-flex xs12 sm12 lg4 class="hidden-lg-only hidden-md-only hidden-xl-only">
               <v-btn
                 @click="getStudents"
                 round
                 dark
                 :loading="loading"
                 class="mt-3 right"
               >Get Report</v-btn>
             </v-flex>
           </v-layout>
         </v-flex>
       </v-form>
     </v-card>
     <v-layout v-show="showTable">
       <v-flex xs12>
         <v-card class="transparent elevation-0">
           <v-layout>
             <v-flex xs12>
-              <v-btn class="add-button right" round  dark @click="printStudentReport()">
+              <v-btn class="open-dialog-button right" round dark @click="printStudentReport()">
                 Print
                 <v-icon right dark>print</v-icon>
               </v-btn>
             </v-flex>
           </v-layout>
           <v-layout>
-            <v-flex xs12 class="text-xs-center">
+            <v-flex xs12 sm12 md12 class="text-xs-center">
               <img :src="userData.schoolLogoUrl" width="140" alt="logo" />
               <p class="title">{{ userData.name }}</p>
               <p>{{ userData.address }}</p>
             </v-flex>
+            <v-flex xs12 sm12 md12 class="text-xs-center">
+            </v-flex>
           </v-layout>
           <v-data-table
             :headers="headers"
             :items="getStudentsReportList"
             :pagination.sync="pagination"
             :search="search"
           >
             <template slot="items" slot-scope="props">
               <tr class="tr">
                 <td class="td td-row">{{ 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 class="td td-row text-xs-center">{{ props.item.name}}</td>
                 <td class="td td-row text-xs-center">{{ props.item.rollNo }}</td>
                 <td class="td td-row text-xs-center">{{ props.item.email }}</td>
                 <td class="td td-row text-xs-center">{{ props.item.classId.classNum }}</td>
                 <td class="td td-row text-xs-center">{{ props.item.sectionId.name }}</td>
               </tr>
             </template>
             <v-alert
               slot="no-results"
               :value="true"
               color="error"
               icon="warning"
             >Your search for "{{ search }}" found no results.</v-alert>
           </v-data-table>
         </v-card>
         <v-flex xs12 id="printMe" v-show="hidePrintStudentReport">
           <v-layout>
             <v-flex xs12 style="text-align:center;margin-bottom:10px">
               <img :src="userData.schoolLogoUrl" width="140" alt="logo" />
               <p class="title">{{ userData.name }}</p>
               <p>{{ userData.address }}</p>
             </v-flex>
           </v-layout>
           <table
             class="mb-5 tableRsponsive feeTypeTable"
             style="border: 1px solid lightgrey;
                   border-collapse: collapse;!important
                   table-layout: auto !important;
                   width: 100% !important;"
           >
             <thead style="border: 1px solid lightgrey !important;">
               <tr style="border: 1px solid lightgrey !important;padding:4px;">
                 <td style="border: 1px solid lightgrey !important;padding: 6px;">Profile Pic</td>
                 <td style="border: 1px solid lightgrey !important;padding: 6px;">Name</td>
                 <td style="border: 1px solid lightgrey !important;padding: 6px;">Roll No</td>
                 <td style="border: 1px solid lightgrey !important;padding: 6px;">Email</td>
                 <td style="border: 1px solid lightgrey !important;padding: 6px;">Class</td>
                 <td style="border: 1px solid lightgrey !important;padding: 6px;">Section</td>
               </tr>
             </thead>
             <tbody style="border: 1px solid lightgrey !important;">
               <tr v-for="(studentReport,i) in getStudentsReportList" :key="i">
                 <td style="border: 1px solid lightgrey !important;padding: 6px;">
                   <v-avatar>
                     <img :src="studentReport.profilePicUrl" v-if="studentReport.profilePicUrl" />
                     <img src="/static/icon/user.png" v-else-if="!studentReport.profilePicUrl" />
                   </v-avatar>
                 </td>
                 <td
                   style="border: 1px solid lightgrey !important;padding: 6px;"
                 >{{ studentReport.name }}</td>
                 <!-- <td
                   style="border: 1px solid lightgrey !important;padding: 6px;"
-                >{{ studentReport.rollNo }}</td> -->
+                >{{ studentReport.rollNo }}</td>-->
                 <td
                   style="border: 1px solid lightgrey !important;padding: 6px;"
                 >{{ studentReport.email }}</td>
                 <td
                   style="border: 1px solid lightgrey !important;padding: 6px;"
                 >{{ studentReport.classId.classNum }}</td>
                 <td
                   style="border: 1px solid lightgrey !important;padding: 6px;"
                 >{{ studentReport.sectionId.name }}</td>
               </tr>
             </tbody>
           </table>
         </v-flex>
       </v-flex>
     </v-layout>
     <div class="loader" v-if="showLoader">
       <v-progress-circular indeterminate color="white"></v-progress-circular>
     </div>
   </v-container>
 </template>
 <script>
 import http from "@/Services/http.js";
 import countryList from "@/script/country.js";
 import moment from "moment";
 export default {
   data: () => ({
     snackbar: false,
     color: "",
     y: "top",
     x: "right",
     mode: "",
     timeout: 10000,
     text: "",
     loading: false,
     valid: true,
     search: "",
     showLoader: false,
     bloodGroup: false,
     genderShow: false,
     countryShow: false,
     TransportShow: false,
     HostelShow: false,
     BirthdayShow: false,
     sectionShow: false,
     showTable: false,
     classShow: true,
     hidePrintStudentReport: false,
     addSection: [],
     pagination: {
       rowsPerPage: 10
     },
     formRules: [v => !!v || "Form For is required"],
     bloodGroupRules: [v => !!v || "Blood group is required"],
     classRules: [v => !!v || "Class is required"],
     sectionRules: [v => !!v || "Class is required"],
     genderRules: [v => !!v || "Gender is required"],
     routeRules: [v => !!v || "RouteI is required"],
     hostelRules: [v => !!v || "Hostel is required"],
     countryRules: [v => !!v || "Country is required"],
     headers: [
       {
         align: "",
         text: "No",
         sortable: false,
         value: "No"
       },
       {
         text: "Profile Pic",
         vaue: "profilePicUrl",
         sortable: false,
         align: "center"
       },
       {
         text: "Name",
         vaue: "name",
         sortable: false,
         align: "center"
       },
       {
         text: "Roll No.",
         value: "rollNo",
         sortable: false,
         align: "center"
       },
       {
         text: "Email",
         value: "email",
         sortable: false,
         align: "center"
       },
       {
         text: "Class",
         value: "classId",
         sortable: false,
         align: "center"
       },
       {
         text: "Section",
         value: "sectionId",
         sortable: false,
         align: "center"
       }
     ],
     classList: [],
     report: {},
     userData: {},
     markData: [],
     formList: [
       {
         name: "Blood Group",
         value: "bloodGroup"
       },
       "Country",
       "Gender",
       "Transport",
       "Hostel"
       //   "Birthday"
     ],
     bloodGroupList: ["A+", "A-", "B+", "B-", "O+", "O-", "AB+", "AB-"],
     gender: ["Male", "female"],
     getStudentsReportList: [],
     studentReort: "",
     countryList: [],
     route: [],
     Hostel: [],
     hostelList: [],
     token: ""
   }),
   methods: {
     clear() {
       this.$refs.form.reset();
     },
     getClass() {
       this.showLoader = true;
       http()
         .get("/getClassesList", {
           headers: { Authorization: "Bearer " + this.token }
         })
         .then(response => {
           this.classList = response.data.data;
           this.showLoader = false;
         })
         .catch(err => {
           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);
           }
         });
     },
     getReport() {
       if (this.report.form === "bloodGroup") {
         this.bloodGroup = true;
         this.genderShow = false;
         this.TransportShow = false;
         this.countryShow = false;
         this.BirthdayShow = false;
         this.HostelShow = false;
         this.classShow = false;
         this.sectionShow = false;
       }
       if (this.report.form === "Gender") {
         this.genderShow = true;
         this.bloodGroup = false;
         this.TransportShow = false;
         this.BirthdayShow = false;
         this.countryShow = false;
         this.HostelShow = false;
         this.classShow = true;
       }
       if (this.report.form === "Transport") {
         this.TransportShow = true;
         this.genderShow = false;
         this.bloodGroup = false;
         this.BirthdayShow = false;
         this.countryShow = false;
         this.HostelShow = false;
         this.classShow = true;
       }
       if (this.report.form === "Country") {
         this.countryShow = true;
         this.TransportShow = false;
         this.genderShow = false;
         this.bloodGroup = false;
         this.BirthdayShow = false;
         this.HostelShow = false;
         this.classShow = true;
       }
       if (this.report.form === "Hostel") {
         this.HostelShow = true;
         this.TransportShow = false;
         this.genderShow = false;
         this.bloodGroup = false;
         this.countryShow = false;
         this.BirthdayShow = false;
         this.classShow = true;
       }
       if (this.report.form === "Birthday") {
         this.BirthdayShow = true;
         this.TransportShow = false;
         this.genderShow = false;
         this.HostelShow = false;
         this.bloodGroup = false;
         this.countryShow = false;
         this.classShow = true;
       }
     },
     getStudents() {
       if (this.$refs.form.validate()) {
         this.showLoader = true;
         http()
           .get("/getStudentReport", {
             params: {
               bloodGroup: this.report.bloodGroup,
               country: this.report.country,
               gender: this.report.gender,
               classId: this.report.classId,
               sectionId: this.report.sectionId
             },
             headers: { Authorization: "Bearer " + this.token }
           })
           .then(response => {
             this.getStudentsReportList = response.data.data;
             this.showTable = true;
             this.showLoader = false;
             this.clear();
             // console.log("getSectionsList=====>", response.data.data);
           })
           .catch(error => {
             console.log("err====>", error);
             this.showLoader = false;
           });
       }
     },
     getSections() {
       this.sectionShow = true;
       this.showLoader = true;
       http()
         .get(
           "/getSectionsList",
           { params: { classId: this.report.classId } },
           {
             headers: { Authorization: "Bearer " + this.token }
           }
         )
         .then(response => {
           this.addSection = response.data.data;
           this.showLoader = false;
         })
         .catch(error => {
           console.log("err====>", error);
           this.showLoader = false;
         });
     },
     //     getFormList() {
     //       this.showLoader = true;
     //       http()
     //         .get("/getExamsList", {
     //           headers: { Authorization: "Bearer " + this.token }
     //         })
     //         .then(response => {
     //           this.formList = response.data.data;
     //           this.showLoader = false;
     //         })
     //         .catch(error => {
     //           // console.log("err====>", err);
     //           this.showLoader = false;
     //           this.snackbar = true;
     //           this.text = error.response.data.message;
     //           if (error.response.status === 401) {
     //             this.$router.replace({ path: "/" });
     //             this.$store.dispatch("setToken", null);
     //             this.$store.dispatch("Id", null);
     //           }
     //         });
     //     }
     printStudentReport() {
       this.$htmlToPaper("printMe");
     },
     getUserData() {
       http()
         .get("/getParticularUserDetail")
         .then(response => {
           this.userData = response.data.data;
         })
         .catch(error => {
-          if (error.response.status === 401) {
+          // if (error.response.status === 401) {
-            this.$router.replace({ path: "/" });
+          //   this.$router.replace({ path: "/" });
-            this.$store.dispatch("setToken", null);
+          //   this.$store.dispatch("setToken", null);
-            this.$store.dispatch("Id", null);
+          //   this.$store.dispatch("Id", null);
-          }
+          // }
         });
     }
   },
   mounted() {
     this.token = this.$store.state.token;
     const getCountryList = countryList();
     this.countryList = getCountryList;
     this.getUserData();
     // console.log("getindustryList", this.countryList);
     // this.getExamList();
     this.getClass();
   },
   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>s

src/pages/School/school.vue

Diff comments View file @25205cc

1	<template>	1	<template>
2	<div>	2	<div>
3	<v-tabs grow slider-color="gray">	3	<v-tabs grow slider-color="gray">
4	<v-tab	4	<v-tab
5	ripple	5	ripple
6	@click="activeTab('existing')"	6	@click="activeTab('existing')"
7	v-bind:class="{ active: isActive }"	7	v-bind:class="{ active: isActive }"
8	id="tab"	8	id="tab"
9	class="subheading"	9	class="subheading"
10	>Existing School</v-tab>	10	>Existing School</v-tab>
11	<v-tab	11	<v-tab
12	ripple	12	ripple
13	@click="activeTab('new')"	13	@click="activeTab('new')"
14	v-bind:class="{ active: newActive }"	14	v-bind:class="{ active: newActive }"
15	id="tab1"	15	id="tab1"
16	User	16	User
17	class="subheading"	17	class="subheading"
18	>Add New School</v-tab>	18	>Add New School</v-tab>
19		19
20	<!-- **** EDITS STUDENTS DETAILS **** -->	20	<!-- **** EDITS STUDENTS DETAILS **** -->
21		21
22	<v-tab-item>	22	<v-tab-item>
23	<v-snackbar	23	<v-snackbar
24	:timeout="timeout"	24	:timeout="timeout"
25	:top="y === 'top'"	25	:top="y === 'top'"
26	:right="x === 'right'"	26	:right="x === 'right'"
27	:vertical="mode === 'vertical'"	27	:vertical="mode === 'vertical'"
28	v-model="snackbar"	28	v-model="snackbar"
29	color="success"	29	color="success"
30	>{{ text }}</v-snackbar>	30	>{{ text }}</v-snackbar>
31	<v-dialog v-model="dialog" max-width="1500px" scrollable>	31	<v-dialog v-model="dialog" max-width="1500px" scrollable>
32	<v-card flat>	32	<v-card flat>
33	<v-toolbar color="grey lighten-2" flat>	33	<v-toolbar color="grey lighten-2" flat>
34	<v-spacer></v-spacer>	34	<v-spacer></v-spacer>
35	<v-toolbar-title>	35	<v-toolbar-title>
36	<h3>Edit School</h3>	36	<h3>Edit School</h3>
37	</v-toolbar-title>	37	</v-toolbar-title>
38	<v-spacer></v-spacer>	38	<v-spacer></v-spacer>
39	</v-toolbar>	39	</v-toolbar>
40	<v-card-text style="height: 686px;">	40	<v-card-text style="height: 686px;">
41	<v-form ref="form">	41	<v-form ref="form">
42	<v-container fluid>	42	<v-container fluid>
43	<v-layout>	43	<v-layout>
44	<v-flex	44	<v-flex
45	xs12	45	xs12
46	class="text-xs-center text-sm-center text-md-center text-lg-center"	46	class="text-xs-center text-sm-center text-md-center text-lg-center"
47	>	47	>
48	<v-avatar size="160px">	48	<v-avatar size="160px">
49	<img	49	<img
50	src="/static/icon/user.png"	50	src="/static/icon/user.png"
51	v-if="!editedItem.schoolLogoUrl && !imageUrl"	51	v-if="!editedItem.schoolLogoUrl && !imageUrl"
52	/>	52	/>
53	<img	53	<img
54	:src="editedItem.schoolLogoUrl"	54	:src="editedItem.schoolLogoUrl"
55	v-else-if="editedItem.schoolLogoUrl && !imageUrl"	55	v-else-if="editedItem.schoolLogoUrl && !imageUrl"
56	/>	56	/>
57	<img	57	<img
58	v-if="imageUrl"	58	v-if="imageUrl"
59	:src="imageUrl"	59	:src="imageUrl"
60	height="150"	60	height="150"
61	style="border-radius:50%; width:200px"	61	style="border-radius:50%; width:200px"
62	/>	62	/>
63	</v-avatar>	63	</v-avatar>
64	<input	64	<input
65	type="file"	65	type="file"
66	style="display: none"	66	style="display: none"
67	ref="image"	67	ref="image"
68	accept="image/*"	68	accept="image/*"
69	@change="onFilePicked"	69	@change="onFilePicked"
70	/>	70	/>
71	</v-flex>	71	</v-flex>
72	</v-layout>	72	</v-layout>
73	<v-layout>	73	<v-layout>
74	<v-flex xs12 sm4>	74	<v-flex xs12 sm4>
75	<v-layout>	75	<v-layout>
76	<v-flex xs4 class="pt-4 subheading">	76	<v-flex xs4 class="pt-4 subheading">
77	<label class="right hidden-xs-only hidden-sm-only">Full Name:</label>	77	<label class="right hidden-xs-only hidden-sm-only">Full Name:</label>
78	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label>	78	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label>
79	</v-flex>	79	</v-flex>
80	<v-flex xs8 class="ml-3">	80	<v-flex xs8 class="ml-3">
81	<v-text-field v-model="editedItem.name" placeholder="fill your full Name"></v-text-field>	81	<v-text-field v-model="editedItem.name" placeholder="fill your full Name"></v-text-field>
82	</v-flex>	82	</v-flex>
83	</v-layout>	83	</v-layout>
84	</v-flex>	84	</v-flex>
85	<v-flex xs12 sm4>	85	<v-flex xs12 sm4>
86	<v-layout>	86	<v-layout>
87	<v-flex xs4 class="pt-4 subheading">	87	<v-flex xs4 class="pt-4 subheading">
88	<label class="right hidden-xs-only hidden-sm-only">Email ID:</label>	88	<label class="right hidden-xs-only hidden-sm-only">Email ID:</label>
89	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">EmailID:</label>	89	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">EmailID:</label>
90	</v-flex>	90	</v-flex>
91	<v-flex xs8 class="ml-3">	91	<v-flex xs8 class="ml-3">
92	<v-text-field placeholder="fill your email" v-model="editedItem.email"></v-text-field>	92	<v-text-field placeholder="fill your email" v-model="editedItem.email"></v-text-field>
93	</v-flex>	93	</v-flex>
94	</v-layout>	94	</v-layout>
95	</v-flex>	95	</v-flex>
96	<v-flex xs12 sm4>	96	<v-flex xs12 sm4>
97	<v-layout>	97	<v-layout>
98	<v-flex xs4 class="pt-4 subheading">	98	<v-flex xs4 class="pt-4 subheading">
99	<label class="right">Society Name:</label>	99	<label class="right">Society Name:</label>
100	</v-flex>	100	</v-flex>
101	<v-flex xs8 class="ml-3">	101	<v-flex xs8 class="ml-3">
102	<v-text-field	102	<v-text-field
103	placeholder="fill your Society Name"	103	placeholder="fill your Society Name"
104	v-model="editedItem.societyName"	104	v-model="editedItem.societyName"
105	></v-text-field>	105	></v-text-field>
106	</v-flex>	106	</v-flex>
107	</v-layout>	107	</v-layout>
108	</v-flex>	108	</v-flex>
109	</v-layout>	109	</v-layout>
110	<v-layout>	110	<v-layout>
111	<v-flex xs12 sm4>	111	<v-flex xs12 sm4>
112	<v-layout>	112	<v-layout>
113	<v-flex xs4 class="pt-4 subheading">	113	<v-flex xs4 class="pt-4 subheading">
114	<label class="right">City:</label>	114	<label class="right">City:</label>
115	</v-flex>	115	</v-flex>
116	<v-flex xs8 class="ml-3">	116	<v-flex xs8 class="ml-3">
117	<v-text-field v-model="editedItem.city" placeholder="fill your City Name"></v-text-field>	117	<v-text-field v-model="editedItem.city" placeholder="fill your City Name"></v-text-field>
118	</v-flex>	118	</v-flex>
119	</v-layout>	119	</v-layout>
120	</v-flex>	120	</v-flex>
121	<v-flex xs12 sm4>	121	<v-flex xs12 sm4>
122	<v-layout>	122	<v-layout>
123	<v-flex xs4 class="pt-4 subheading">	123	<v-flex xs4 class="pt-4 subheading">
124	<label class="right">State:</label>	124	<label class="right">State:</label>
125	</v-flex>	125	</v-flex>
126	<v-flex xs8 class="ml-3">	126	<v-flex xs8 class="ml-3">
127	<v-text-field	127	<v-text-field
128	v-model="editedItem.state"	128	v-model="editedItem.state"
129	placeholder="fill your City Name"	129	placeholder="fill your City Name"
130	></v-text-field>	130	></v-text-field>
131	</v-flex>	131	</v-flex>
132	</v-layout>	132	</v-layout>
133	</v-flex>	133	</v-flex>
134	<v-flex xs12 sm4>	134	<v-flex xs12 sm4>
135	<v-layout>	135	<v-layout>
136	<v-flex xs4 class="pt-4 subheading">	136	<v-flex xs4 class="pt-4 subheading">
137	<label class="right">Pincode:</label>	137	<label class="right">Pincode:</label>
138	</v-flex>	138	</v-flex>
139	<v-flex xs8 class="ml-3">	139	<v-flex xs8 class="ml-3">
140	<v-text-field	140	<v-text-field
141	v-model="editedItem.pinCode"	141	v-model="editedItem.pinCode"
142	placeholder="fill your pincode"	142	placeholder="fill your pincode"
143	type="number"	143	type="number"
144	></v-text-field>	144	></v-text-field>
145	</v-flex>	145	</v-flex>
146	</v-layout>	146	</v-layout>
147	</v-flex>	147	</v-flex>
148	</v-layout>	148	</v-layout>
149	<v-layout>	149	<v-layout>
150	<v-flex xs12 sm4>	150	<v-flex xs12 sm4>
151	<v-layout>	151	<v-layout>
152	<v-flex xs4 class="pt-4 subheading">	152	<v-flex xs4 class="pt-4 subheading">
153	<label class="right">Fax No:</label>	153	<label class="right">Fax No:</label>
154	</v-flex>	154	</v-flex>
155	<v-flex xs8 class="ml-3">	155	<v-flex xs8 class="ml-3">
156	<v-text-field v-model="editedItem.faxNo" placeholder="fill your fax No"></v-text-field>	156	<v-text-field v-model="editedItem.faxNo" placeholder="fill your fax No"></v-text-field>
157	</v-flex>	157	</v-flex>
158	</v-layout>	158	</v-layout>
159	</v-flex>	159	</v-flex>
160	<v-flex xs12 sm4>	160	<v-flex xs12 sm4>
161	<v-layout>	161	<v-layout>
162	<v-flex xs4 class="pt-4 subheading">	162	<v-flex xs4 class="pt-4 subheading">
163	<label class="right">Country:</label>	163	<label class="right">Country:</label>
164	</v-flex>	164	</v-flex>
165	<v-flex xs8 class="ml-3">	165	<v-flex xs8 class="ml-3">
166	<v-text-field	166	<v-text-field
167	v-model="editedItem.country"	167	v-model="editedItem.country"
168	placeholder="fill your Country"	168	placeholder="fill your Country"
169	></v-text-field>	169	></v-text-field>
170	</v-flex>	170	</v-flex>
171	</v-layout>	171	</v-layout>
172	</v-flex>	172	</v-flex>
173	<v-flex xs12 sm4>	173	<v-flex xs12 sm4>
174	<v-layout>	174	<v-layout>
175	<v-flex xs4 class="pt-4 subheading">	175	<v-flex xs4 class="pt-4 subheading">
176	<label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>	176	<label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>
177	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label>	177	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label>
178	</v-flex>	178	</v-flex>
179	<v-flex xs8 class="ml-3">	179	<v-flex xs8 class="ml-3">
180	<v-text-field	180	<v-text-field
181	v-model="editedItem.mobile"	181	v-model="editedItem.mobile"
182	placeholder="fill your MobileNo"	182	placeholder="fill your MobileNo"
183	name="mobileNo"	183	name="mobileNo"
184	></v-text-field>	184	></v-text-field>
185	</v-flex>	185	</v-flex>
186	</v-layout>	186	</v-layout>
187	</v-flex>	187	</v-flex>
188	</v-layout>	188	</v-layout>
189	<v-layout>	189	<v-layout>
190	<v-flex xs12 sm4>	190	<v-flex xs12 sm4>
191	<v-layout>	191	<v-layout>
192	<v-flex xs4 class="pt-4 subheading">	192	<v-flex xs4 class="pt-4 subheading">
193	<label class="right hidden-xs-only hidden-sm-only">LandLine No:</label>	193	<label class="right hidden-xs-only hidden-sm-only">LandLine No:</label>
194	<label	194	<label
195	class="right hidden-lg-only hidden-md-only hidden-xl-only"	195	class="right hidden-lg-only hidden-md-only hidden-xl-only"
196	>LandLineNo:</label>	196	>LandLineNo:</label>
197	</v-flex>	197	</v-flex>
198	<v-flex xs8 class="ml-3">	198	<v-flex xs8 class="ml-3">
199	<v-text-field	199	<v-text-field
200	v-model="editedItem.landLineNo"	200	v-model="editedItem.landLineNo"
201	placeholder="fill your LandLine No"	201	placeholder="fill your LandLine No"
202	type="number"	202	type="number"
203	></v-text-field>	203	></v-text-field>
204	</v-flex>	204	</v-flex>
205	</v-layout>	205	</v-layout>
206	</v-flex>	206	</v-flex>
207	<v-flex xs12 sm4>	207	<v-flex xs12 sm4>
208	<v-layout>	208	<v-layout>
209	<v-flex xs4 class="pt-4 subheading">	209	<v-flex xs4 class="pt-4 subheading">
210	<label class="right hidden-xs-only hidden-sm-only">Registration No:</label>	210	<label class="right hidden-xs-only hidden-sm-only">Registration No:</label>
211	<label	211	<label
212	class="right hidden-lg-only hidden-md-only hidden-xl-only"	212	class="right hidden-lg-only hidden-md-only hidden-xl-only"
213	>Registration-No:</label>	213	>Registration-No:</label>
214	</v-flex>	214	</v-flex>
215	<v-flex xs8 class="ml-3">	215	<v-flex xs8 class="ml-3">
216	<v-text-field	216	<v-text-field
217	v-model="editedItem.registrationNo"	217	v-model="editedItem.registrationNo"
218	placeholder="fill your Registration No"	218	placeholder="fill your Registration No"
219	type="number"	219	type="number"
220	></v-text-field>	220	></v-text-field>
221	</v-flex>	221	</v-flex>
222	</v-layout>	222	</v-layout>
223	</v-flex>	223	</v-flex>
224	<v-flex xs12 sm4>	224	<v-flex xs12 sm4>
225	<v-layout>	225	<v-layout>
226	<v-flex xs4 class="pt-4 subheading">	226	<v-flex xs4 class="pt-4 subheading">
227	<label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>	227	<label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
228	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label>	228	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label>
229	</v-flex>	229	</v-flex>
230	<v-flex xs8 class="ml-3">	230	<v-flex xs8 class="ml-3">
231	<v-text-field	231	<v-text-field
232	label="Select Image"	232	label="Select Image"
233	@click="pickFile"	233	@click="pickFile"
234	v-model="imageName"	234	v-model="imageName"
235	append-icon="attach_file"	235	append-icon="attach_file"
236	></v-text-field>	236	></v-text-field>
237	</v-flex>	237	</v-flex>
238	</v-layout>	238	</v-layout>
239	</v-flex>	239	</v-flex>
240	</v-layout>	240	</v-layout>
241	<v-layout>	241	<v-layout>
242	<v-flex xs12 sm4>	242	<v-flex xs12 sm4>
243	<v-layout>	243	<v-layout>
244	<v-flex xs4 class="pt-4 subheading">	244	<v-flex xs4 class="pt-4 subheading">
245	<label class="right hidden-xs-only hidden-sm-only">School Details:</label>	245	<label class="right hidden-xs-only hidden-sm-only">School Details:</label>
246	<label	246	<label
247	class="right hidden-lg-only hidden-md-only hidden-xl-only"	247	class="right hidden-lg-only hidden-md-only hidden-xl-only"
248	>SchoolDetail:</label>	248	>SchoolDetail:</label>
249	</v-flex>	249	</v-flex>
250	<v-flex xs8 class="ml-3">	250	<v-flex xs8 class="ml-3">
251	<v-text-field	251	<v-text-field
252	v-model="editedItem.schoolDetails"	252	v-model="editedItem.schoolDetails"
253	placeholder="fill your School Details"	253	placeholder="fill your School Details"
254	></v-text-field>	254	></v-text-field>
255	</v-flex>	255	</v-flex>
256	</v-layout>	256	</v-layout>
257	</v-flex>	257	</v-flex>
258	<v-flex xs12 sm4>	258	<v-flex xs12 sm4>
259	<v-layout>	259	<v-layout>
260	<v-flex xs4 class="pt-4 subheading">	260	<v-flex xs4 class="pt-4 subheading">
261	<label class="right hidden-xs-only hidden-sm-only">Academic Year:</label>	261	<label class="right hidden-xs-only hidden-sm-only">Academic Year:</label>
262	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Year:</label>	262	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Year:</label>
263	</v-flex>	263	</v-flex>
264	<v-flex xs8 class="ml-3">	264	<v-flex xs8 class="ml-3">
265	<v-text-field	265	<v-text-field
266	v-model="editedItem.establishmentYear"	266	v-model="editedItem.establishmentYear"
267	placeholder="fill your Academic Year"	267	placeholder="fill your Academic Year"
268	></v-text-field>	268	></v-text-field>
269	</v-flex>	269	</v-flex>
270	</v-layout>	270	</v-layout>
271	</v-flex>	271	</v-flex>
272	<v-flex xs12 sm4>	272	<v-flex xs12 sm4>
273	<v-layout>	273	<v-layout>
274	<v-flex xs4 class="pt-4 subheading">	274	<v-flex xs4 class="pt-4 subheading">
275	<label class="right hidden-xs-only hidden-sm-only">Web Site Url:</label>	275	<label class="right hidden-xs-only hidden-sm-only">Web Site Url:</label>
276	<label	276	<label
277	class="right hidden-lg-only hidden-md-only hidden-xl-only"	277	class="right hidden-lg-only hidden-md-only hidden-xl-only"
278	>WebSiteUrl:</label>	278	>WebSiteUrl:</label>
279	</v-flex>	279	</v-flex>
280	<v-flex xs8 class="ml-3">	280	<v-flex xs8 class="ml-3">
281	<v-text-field	281	<v-text-field
282	v-model="editedItem.websiteUrl"	282	v-model="editedItem.websiteUrl"
283	placeholder="fill your MobileNo"	283	placeholder="fill your MobileNo"
284	></v-text-field>	284	></v-text-field>
285	</v-flex>	285	</v-flex>
286	</v-layout>	286	</v-layout>
287	</v-flex>	287	</v-flex>
288	</v-layout>	288	</v-layout>
289	<v-layout>	289	<v-layout>
290	<v-flex xs12 sm4>	290	<v-flex xs12 sm4>
291	<v-layout>	291	<v-layout>
292	<v-flex xs4 class="pt-4 subheading">	292	<v-flex xs4 class="pt-4 subheading">
293	<label class="right">Address:</label>	293	<label class="right">Address:</label>
294	</v-flex>	294	</v-flex>
295	<v-flex xs8 class="ml-3">	295	<v-flex xs8 class="ml-3">
296	<v-text-field	296	<v-text-field
297	v-model="editedItem.address"	297	v-model="editedItem.address"
298	placeholder="Select your Address"	298	placeholder="Select your Address"
299	></v-text-field>	299	></v-text-field>
300	</v-flex>	300	</v-flex>
301	</v-layout>	301	</v-layout>
302	</v-flex>	302	</v-flex>
303	</v-layout>	303	</v-layout>
304	<v-layout>	304	<v-layout>
305	<v-flex xs12 sm12>	305	<v-flex xs12 sm12>
306	<v-layout>	306	<v-layout>
307	<v-flex xs6>	307	<v-flex xs6>
308	<v-btn round dark @click.native="close">Cancel</v-btn>	308	<v-btn round dark @click.native="close">Cancel</v-btn>
309	</v-flex>	309	</v-flex>
310	<v-flex xs6>	310	<v-flex xs6>
311	<v-btn @click="save" round dark :loading="loading" class="right">Save</v-btn>	311	<v-btn @click="save" round dark :loading="loading" class="right">Save</v-btn>
312	</v-flex>	312	</v-flex>
313	</v-layout>	313	</v-layout>
314	</v-flex>	314	</v-flex>
315	</v-layout>	315	</v-layout>
316	</v-container>	316	</v-container>
317	</v-form>	317	</v-form>
318	</v-card-text>	318	</v-card-text>
319	</v-card>	319	</v-card>
320	</v-dialog>	320	</v-dialog>
321	<v-snackbar	321	<v-snackbar
322	:timeout="timeout"	322	:timeout="timeout"
323	:top="y === 'top'"	323	:top="y === 'top'"
324	:right="x === 'right'"	324	:right="x === 'right'"
325	:vertical="mode === 'vertical'"	325	:vertical="mode === 'vertical'"
326	v-model="snackbar"	326	v-model="snackbar"
327	color="success"	327	color="success"
328	>{{ text }}</v-snackbar>	328	>{{ text }}</v-snackbar>
329		329
330	<!-- **** EXISTING-USERS STUDENTS TABLE **** -->	330	<!-- **** EXISTING-USERS STUDENTS TABLE **** -->
331	<v-data-table	331	<v-data-table
332	:headers="headers"	332	:headers="headers"
333	:items="schoolList"	333	:items="schoolList"
334	:pagination.sync="pagination"	334	:pagination.sync="pagination"
335	:search="search"	335	:search="search"
336	>	336	>
337	<template slot="items" slot-scope="props">	337	<template slot="items" slot-scope="props">
338	<tr class="tr">	338	<tr class="tr">
339	<td class="td td-row text-xs-center">{{ props.index + 1}}</td>	339	<td class="td td-row text-xs-center">{{ props.index + 1}}</td>
340	<td class="td td-row text-xs-center">	340	<td class="td td-row text-xs-center">
341	<v-avatar>	341	<v-avatar>
342	<img :src="props.item.schoolLogoUrl" v-if="props.item.schoolLogoUrl" />	342	<img :src="props.item.schoolLogoUrl" v-if="props.item.schoolLogoUrl" />
343	<img src="/static/icon/user.png" v-else-if="!props.item.schoolLogoUrl" />	343	<img src="/static/icon/user.png" v-else-if="!props.item.schoolLogoUrl" />
344	</v-avatar>	344	</v-avatar>
345	</td>	345	</td>
346	<td class="td td-row text-xs-center">{{ props.item.name}}</td>	346	<td class="td td-row text-xs-center">{{ props.item.name}}</td>
347	<td class="td td-row text-xs-center">{{ props.item.email }}</td>	347	<td class="td td-row text-xs-center">{{ props.item.email }}</td>
348	<td class="td td-row text-xs-center">{{ props.item.city }}</td>	348	<td class="td td-row text-xs-center">{{ props.item.city }}</td>
349	<td class="td td-row text-xs-center">{{ props.item.state }}</td>	349	<td class="td td-row text-xs-center">{{ props.item.state }}</td>
350	<td class="td td-row text-xs-center">{{ props.item.mobile}}</td>	350	<td class="td td-row text-xs-center">{{ props.item.mobile}}</td>
351	<td class="td td-row text-xs-center">	351	<td class="td td-row text-xs-center">
352	<v-switch	352	<v-switch
353	class="pl-3"	353	class="pl-3"
354	v-model="props.item.status"	354	v-model="props.item.status"
355	@change="suspendSchoolStatus(props.item.status,props.item._id)"	355	@change="suspendSchoolStatus(props.item.status,props.item._id)"
356	></v-switch>	356	></v-switch>
357	</td>	357	</td>
358	<td class="td td-row text-xs-center">	358	<td class="td td-row text-xs-center">
359	<span>	359	<span>
360	<!-- <router-link :to="{ name:'viewSchoolDashboard',params: { schoolId:props.item._id } }"> -->	360	<!-- <router-link :to="{ name:'viewSchoolDashboard',params: { schoolId:props.item._id } }"> -->
361	<v-tooltip top>	361	<v-tooltip top>
362	<img	362	<img
363	slot="activator"	363	slot="activator"
364	style="cursor:pointer; width:25px; height:18px; "	364	style="cursor:pointer; width:25px; height:18px; "
365	class="mr5"	365	class="mr5"
366	src="/static/icon/eye1.png"	366	src="/static/icon/eye1.png"
367	@click="adminAccess(props.item)"	367	@click="adminAccess(props.item)"
368	/>	368	/>
369	<span>View</span>	369	<span>View</span>
370	</v-tooltip>	370	</v-tooltip>
371	<!-- </router-link> -->	371	<!-- </router-link> -->
372	<v-tooltip top>	372	<v-tooltip top>
373	<img	373	<img
374	slot="activator"	374	slot="activator"
375	style="cursor:pointer; width:20px; height:18px; "	375	style="cursor:pointer; width:20px; height:18px; "
376	class="mr5"	376	class="mr5"
377	@click="editItem(props.item)"	377	@click="editItem(props.item)"
378	src="/static/icon/edit1.png"	378	src="/static/icon/edit1.png"
379	/>	379	/>
380	<span>Edit</span>	380	<span>Edit</span>
381	</v-tooltip>	381	</v-tooltip>
382	</span>	382	</span>
383	</td>	383	</td>
384	</tr>	384	</tr>
385	</template>	385	</template>
386	<v-alert	386	<v-alert
387	slot="no-results"	387	slot="no-results"
388	:value="true"	388	:value="true"
389	color="error"	389	color="error"
390	icon="warning"	390	icon="warning"
391	>Your search for "{{ search }}" found no results.</v-alert>	391	>Your search for "{{ search }}" found no results.</v-alert>
392	</v-data-table>	392	</v-data-table>
393	</v-tab-item>	393	</v-tab-item>
394		394
395	<!-- **** ADD STUDENTS DETAILS**** -->	395	<!-- **** ADD STUDENTS DETAILS**** -->
396	<v-tab-item>	396	<v-tab-item>
397	<v-container fluid>	397	<v-container fluid>
398	<v-layout align-center justify-center fill-height>	398	<v-layout align-center justify-center fill-height>
399	<v-flex xs12 sm12 md10 lg11>	399	<v-flex xs12 sm12 md10 lg11>
400	<!-- <v-container fluid> -->	400	<!-- <v-container fluid> -->
401	<v-snackbar	401	<v-snackbar
402	:timeout="timeout"	402	:timeout="timeout"
403	:top="y === 'top'"	403	:top="y === 'top'"
404	:right="x === 'right'"	404	:right="x === 'right'"
405	:vertical="mode === 'vertical'"	405	:vertical="mode === 'vertical'"
406	v-model="snackbar"	406	v-model="snackbar"
407	color="success"	407	color="success"
408	>{{ text }}</v-snackbar>	408	>{{ text }}</v-snackbar>
409	<v-flex xs12 sm12>	409	<v-flex xs12 sm12>
410	<v-form ref="form" v-model="valid" lazy-validation>	410	<v-form ref="form" v-model="valid" lazy-validation>
411	<v-layout>	411	<v-layout>
412	<v-flex	412	<v-flex
413	xs12	413	xs12
414	class="text-xs-center text-sm-center text-md-center text-lg-center"	414	class="text-xs-center text-sm-center text-md-center text-lg-center"
415	>	415	>
416	<v-avatar size="100px">	416	<v-avatar size="100px">
417	<img src="/static/icon/user.png" v-if="!imageUrl" />	417	<img src="/static/icon/user.png" v-if="!imageUrl" />
418	</v-avatar>	418	</v-avatar>
419	<input	419	<input
420	type="file"	420	type="file"
421	style="display: none"	421	style="display: none"
422	ref="image"	422	ref="image"
423	accept="image/*"	423	accept="image/*"
424	@change="onFilePicked"	424	@change="onFilePicked"
425	/>	425	/>
426	<img	426	<img
427	:src="imageData.imageUrl"	427	:src="imageData.imageUrl"
428	height="150"	428	height="150"
429	v-if="imageUrl"	429	v-if="imageUrl"
430	style="border-radius:50%; width:200px"	430	style="border-radius:50%; width:200px"
431	/>	431	/>
432	</v-flex>	432	</v-flex>
433	</v-layout>	433	</v-layout>
434	<v-layout wrap>	434	<v-layout wrap>
435	<v-flex xs12 sm6>	435	<v-flex xs12 sm6>
436	<v-layout>	436	<v-layout>
437	<v-flex xs4 sm4 class="pt-4 subheading">	437	<v-flex xs4 sm4 class="pt-4 subheading">
438	<label class="right hidden-xs-only hidden-sm-only">Full Name:</label>	438	<label class="right hidden-xs-only hidden-sm-only">Full Name:</label>
439	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label>	439	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label>
440	</v-flex>	440	</v-flex>
441	<v-flex xs8 sm8 class="ml-3">	441	<v-flex xs8 sm8 class="ml-3">
442	<v-text-field	442	<v-text-field
443	v-model="addSchool.name"	443	v-model="addSchool.name"
444	placeholder="fill your full Name"	444	placeholder="fill your full Name"
445	name="name"	445	name="name"
446	type="text"	446	type="text"
447	:rules="nameRules"	447	:rules="nameRules"
448	required	448	required
449	></v-text-field>	449	></v-text-field>
450	</v-flex>	450	</v-flex>
451	</v-layout>	451	</v-layout>
452	</v-flex>	452	</v-flex>
453	<v-flex xs12 sm6>	453	<v-flex xs12 sm6>
454	<v-layout>	454	<v-layout>
455	<v-flex xs4 sm4 class="pt-4 subheading">	455	<v-flex xs4 sm4 class="pt-4 subheading">
456	<label class="right">Email ID:</label>	456	<label class="right">Email ID:</label>
457	</v-flex>	457	</v-flex>
458	<v-flex xs8 sm8 class="ml-3">	458	<v-flex xs8 sm8 class="ml-3">
459	<v-text-field	459	<v-text-field
460	placeholder="fill your email"	460	placeholder="fill your email"
461	:rules="emailRules"	461	:rules="emailRules"
462	v-model="addSchool.email"	462	v-model="addSchool.email"
463	type="text"	463	type="text"
464	required	464	required
465	></v-text-field>	465	></v-text-field>
466	</v-flex>	466	</v-flex>
467	</v-layout>	467	</v-layout>
468	</v-flex>	468	</v-flex>
469	</v-layout>	469	</v-layout>
470	<v-layout wrap>	470	<v-layout wrap>
471	<v-flex xs12 sm6>	471	<v-flex xs12 sm6>
472	<v-layout>	472	<v-layout>
473	<v-flex xs4 sm4 class="pt-4 subheading">	473	<v-flex xs4 sm4 class="pt-4 subheading">
474	<label class="right hidden-sm-only hidden-xs-only">Society Name:</label>	474	<label class="right hidden-sm-only hidden-xs-only">Society Name:</label>
475	<label	475	<label
476	class="right hidden-lg-only hidden-xl-only hidden-md-only"	476	class="right hidden-lg-only hidden-xl-only hidden-md-only"
477	>SocietyName:</label>	477	>SocietyName:</label>
478	</v-flex>	478	</v-flex>
479	<v-flex xs8 sm8 class="ml-3">	479	<v-flex xs8 sm8 class="ml-3">
480	<v-text-field	480	<v-text-field
481	v-model="addSchool.societyName"	481	v-model="addSchool.societyName"
482	placeholder="fill your Society Name"	482	placeholder="fill your Society Name"
483	required	483	required
484	></v-text-field>	484	></v-text-field>
485	</v-flex>	485	</v-flex>
486	</v-layout>	486	</v-layout>
487	</v-flex>	487	</v-flex>
488	<v-flex xs12 sm6>	488	<v-flex xs12 sm6>
489	<v-layout>	489	<v-layout>
490	<v-flex xs4 class="pt-4 subheading">	490	<v-flex xs4 class="pt-4 subheading">
491	<label class="right">City:</label>	491	<label class="right">City:</label>
492	</v-flex>	492	</v-flex>
493	<v-flex xs8 class="ml-3">	493	<v-flex xs8 class="ml-3">
494	<v-text-field	494	<v-text-field
495	v-model="addSchool.city"	495	v-model="addSchool.city"
496	placeholder="fill your City Name"	496	placeholder="fill your City Name"
497	name="City"	497	name="City"
498	type="text"	498	type="text"
499	:rules="cityRules"	499	:rules="cityRules"
500	required	500	required
501	></v-text-field>	501	></v-text-field>
502	</v-flex>	502	</v-flex>
503	</v-layout>	503	</v-layout>
504	</v-flex>	504	</v-flex>
505	</v-layout>	505	</v-layout>
506	<v-layout wrap>	506	<v-layout wrap>
507	<v-flex xs12 sm6>	507	<v-flex xs12 sm6>
508	<v-layout>	508	<v-layout>
509	<v-flex xs4 class="pt-4 subheading">	509	<v-flex xs4 class="pt-4 subheading">
510	<label class="right">State:</label>	510	<label class="right">State:</label>
511	</v-flex>	511	</v-flex>
512	<v-flex xs8 class="ml-3">	512	<v-flex xs8 class="ml-3">
513	<v-text-field	513	<v-text-field
514	v-model="addSchool.state"	514	v-model="addSchool.state"
515	placeholder="fill your State Name"	515	placeholder="fill your State Name"
516	name="state"	516	name="state"
517	type="text"	517	type="text"
518	:rules="stateRules"	518	:rules="stateRules"
519	required	519	required
520	></v-text-field>	520	></v-text-field>
521	</v-flex>	521	</v-flex>
522	</v-layout>	522	</v-layout>
523	</v-flex>	523	</v-flex>
524	<v-flex xs12 sm6>	524	<v-flex xs12 sm6>
525	<v-layout>	525	<v-layout>
526	<v-flex xs4 class="pt-4 subheading">	526	<v-flex xs4 class="pt-4 subheading">
527	<label class="right">Pincode:</label>	527	<label class="right">Pincode:</label>
528	</v-flex>	528	</v-flex>
529	<v-flex xs8 class="ml-3">	529	<v-flex xs8 class="ml-3">
530	<v-text-field	530	<v-text-field
531	v-model="addSchool.pinCode"	531	v-model="addSchool.pinCode"
532	placeholder="fill your pincode"	532	placeholder="fill your pincode"
533	name="pincode"	533	name="pincode"
534	type="number"	534	type="number"
535	:rules="pincode"	535	:rules="pincode"
536	required	536	required
537	></v-text-field>	537	></v-text-field>
538	</v-flex>	538	</v-flex>
539	</v-layout>	539	</v-layout>
540	</v-flex>	540	</v-flex>
541	</v-layout>	541	</v-layout>
542	<v-layout wrap>	542	<v-layout wrap>
543	<v-flex xs12 sm6>	543	<v-flex xs12 sm6>
544	<v-layout>	544	<v-layout>
545	<v-flex xs4 class="pt-4 subheading">	545	<v-flex xs4 class="pt-4 subheading">
546	<label class="right">Fax No:</label>	546	<label class="right">Fax No:</label>
547	</v-flex>	547	</v-flex>
548	<v-flex xs8 class="ml-3">	548	<v-flex xs8 class="ml-3">
549	<v-text-field v-model="addSchool.faxNo" label="fill your Fax No" required></v-text-field>	549	<v-text-field v-model="addSchool.faxNo" label="fill your Fax No" required></v-text-field>
550	</v-flex>	550	</v-flex>
551	</v-layout>	551	</v-layout>
552	</v-flex>	552	</v-flex>
553	<v-flex xs12 sm6>	553	<v-flex xs12 sm6>
554	<v-layout>	554	<v-layout>
555	<v-flex xs4 class="pt-4 subheading">	555	<v-flex xs4 class="pt-4 subheading">
556	<label class="right hidden-xs-only hidden-sm-only">Country:</label>	556	<label class="right hidden-xs-only hidden-sm-only">Country:</label>
557	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label>	557	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label>
558	</v-flex>	558	</v-flex>
559	<v-flex xs8 class="ml-3">	559	<v-flex xs8 class="ml-3">
560	<v-autocomplete	560	<v-autocomplete
561	v-model="addSchool.country"	561	v-model="addSchool.country"
562	:items="countries"	562	:items="countries"
563	:rules="country"	563	:rules="country"
564	placeholder="Select Country Name"	564	placeholder="Select Country Name"
565	required	565	required
566	></v-autocomplete>	566	></v-autocomplete>
567	</v-flex>	567	</v-flex>
568	</v-layout>	568	</v-layout>
569	</v-flex>	569	</v-flex>
570	</v-layout>	570	</v-layout>
571	<v-layout wrap>	571	<v-layout wrap>
572	<v-flex xs12 sm6>	572	<v-flex xs12 sm6>
573	<v-layout>	573	<v-layout>
574	<v-flex xs4 class="pt-4 subheading">	574	<v-flex xs4 class="pt-4 subheading">
575	<label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>	575	<label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>
576	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label>	576	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label>
577	</v-flex>	577	</v-flex>
578	<v-flex xs8 class="ml-3">	578	<v-flex xs8 class="ml-3">
579	<v-text-field	579	<v-text-field
580	v-model="addSchool.mobile"	580	v-model="addSchool.mobile"
581	placeholder="fill your Mobile No"	581	placeholder="fill your Mobile No"
582	name="mobileNo"	582	name="mobileNo"
583	type="number"	583	type="number"
584	:rules="mobileNoRules"	584	:rules="mobileNoRules"
585	required	585	required
586	></v-text-field>	586	></v-text-field>
587	</v-flex>	587	</v-flex>
588	</v-layout>	588	</v-layout>
589	</v-flex>	589	</v-flex>
590	<v-flex xs12 sm6>	590	<v-flex xs12 sm6>
591	<v-layout>	591	<v-layout>
592	<v-flex xs4 class="pt-4 subheading">	592	<v-flex xs4 class="pt-4 subheading">
593	<label class="right hidden-xs-only hidden-sm-only">LandLine No:</label>	593	<label class="right hidden-xs-only hidden-sm-only">LandLine No:</label>
594	<label	594	<label
595	class="right hidden-lg-only hidden-md-only hidden-xl-only"	595	class="right hidden-lg-only hidden-md-only hidden-xl-only"
596	>LandLineNo:</label>	596	>LandLineNo:</label>
597	</v-flex>	597	</v-flex>
598	<v-flex xs8 class="ml-3">	598	<v-flex xs8 class="ml-3">
599	<v-text-field	599	<v-text-field
600	v-model="addSchool.landLineNo"	600	v-model="addSchool.landLineNo"
601	:items="countries"	601	:items="countries"
602	placeholder="fill your LandLine No"	602	placeholder="fill your LandLine No"
603	type="number"	603	type="number"
604	required	604	required
605	></v-text-field>	605	></v-text-field>
606	</v-flex>	606	</v-flex>
607	</v-layout>	607	</v-layout>
608	</v-flex>	608	</v-flex>
609	</v-layout>	609	</v-layout>
610	<v-layout wrap>	610	<v-layout wrap>
611	<v-flex xs12 sm6>	611	<v-flex xs12 sm6>
612	<v-layout>	612	<v-layout>
613	<v-flex xs4 class="pt-4 subheading">	613	<v-flex xs4 class="pt-4 subheading">
614	<label class="right hidden-xs-only hidden-sm-only">Registration No:</label>	614	<label class="right hidden-xs-only hidden-sm-only">Registration No:</label>
615	<label	615	<label
616	class="right hidden-lg-only hidden-md-only hidden-xl-only"	616	class="right hidden-lg-only hidden-md-only hidden-xl-only"
617	>Registration-No:</label>	617	>Registration-No:</label>
618	</v-flex>	618	</v-flex>
619	<v-flex xs8 class="ml-3">	619	<v-flex xs8 class="ml-3">
620	<v-text-field	620	<v-text-field
621	v-model="addSchool.registrationNo"	621	v-model="addSchool.registrationNo"
622	placeholder="Fill your Registration No"	622	placeholder="Fill your Registration No"
623	required	623	required
624	></v-text-field>	624	></v-text-field>
625	</v-flex>	625	</v-flex>
626	</v-layout>	626	</v-layout>
627	</v-flex>	627	</v-flex>
628	<v-flex xs12 sm6>	628	<v-flex xs12 sm6>
629	<v-layout>	629	<v-layout>
630	<v-flex xs4 class="pt-4 subheading">	630	<v-flex xs4 class="pt-4 subheading">
631	<label class="right hidden-xs-only hidden-sm-only">School Details:</label>	631	<label class="right hidden-xs-only hidden-sm-only">School Details:</label>
632	<label	632	<label
633	class="right hidden-lg-only hidden-md-only hidden-xl-only"	633	class="right hidden-lg-only hidden-md-only hidden-xl-only"
634	>SchoolDetails:</label>	634	>SchoolDetails:</label>
635	</v-flex>	635	</v-flex>
636	<v-flex xs8 class="ml-3">	636	<v-flex xs8 class="ml-3">
637	<v-text-field	637	<v-text-field
638	v-model="addSchool.schoolDetails"	638	v-model="addSchool.schoolDetails"
639	placeholder="Fill your School Details"	639	placeholder="Fill your School Details"
640	:rules="schoolDetailRule"	640	:rules="schoolDetailRule"
641	required	641	required
642	></v-text-field>	642	></v-text-field>
643	</v-flex>	643	</v-flex>
644	</v-layout>	644	</v-layout>
645	</v-flex>	645	</v-flex>
646	</v-layout>	646	</v-layout>
647	<v-layout wrap>	647	<v-layout wrap>
648	<v-flex xs12 sm6>	648	<v-flex xs12 sm6>
649	<v-layout>	649	<v-layout>
650	<v-flex xs4 class="pt-4 subheading">	650	<v-flex xs4 class="pt-4 subheading">
651	<label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>	651	<label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
652	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label>	652	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label>
653	</v-flex>	653	</v-flex>
654	<v-flex xs8 class="ml-3">	654	<v-flex xs8 class="ml-3">
655	<v-text-field	655	<v-text-field
656	label="Select Image"	656	label="Select Image"
657	@click="pickFile"	657	@click="pickFile"
658	v-model="imageName"	658	v-model="imageName"
659	append-icon="attach_file"	659	append-icon="attach_file"
660	></v-text-field>	660	></v-text-field>
661	</v-flex>	661	</v-flex>
662	</v-layout>	662	</v-layout>
663	</v-flex>	663	</v-flex>
664	<v-flex xs12 sm6>	664	<v-flex xs12 sm6>
665	<v-layout>	665	<v-layout>
666	<v-flex xs4 class="pt-4 subheading">	666	<v-flex xs4 class="pt-4 subheading">
667	<label class="right hidden-xs-only hidden-sm-only">Academic Year:</label>	667	<label class="right hidden-xs-only hidden-sm-only">Academic Year:</label>
668	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Year:</label>	668	<label class="right hidden-lg-only hidden-md-only hidden-xl-only">Year:</label>
669	</v-flex>	669	</v-flex>
670	<v-flex xs8 class="ml-3">	670	<v-flex xs8 class="ml-3">
671	<v-text-field	671	<v-text-field
672	v-model="addSchool.establishmentYear"	672	v-model="addSchool.establishmentYear"
673	placeholder="fill your Academic Year"	673	placeholder="fill your Academic Year"
674	:rules="establishmentYearRules"	674	:rules="establishmentYearRules"
675	required	675	required
676	></v-text-field>	676	></v-text-field>
677	</v-flex>	677	</v-flex>
678	</v-layout>	678	</v-layout>
679	</v-flex>	679	</v-flex>
680	</v-layout>	680	</v-layout>
681	<v-layout wrap>	681	<v-layout wrap>
682	<v-flex xs12 sm6>	682	<v-flex xs12 sm6>
683	<v-layout>	683	<v-layout>
684	<v-flex xs4 sm4 class="pt-4 subheading">	684	<v-flex xs4 sm4 class="pt-4 subheading">
685	<label class="right hidden-xs-only hidden-sm-only">WebSite Url:</label>	685	<label class="right hidden-xs-only hidden-sm-only">WebSite Url:</label>
686	<label	686	<label
687	class="right hidden-lg-only hidden-md-only hidden-xl-only"	687	class="right hidden-lg-only hidden-md-only hidden-xl-only"
688	>WebSiteUrl:</label>	688	>WebSiteUrl:</label>
689	</v-flex>	689	</v-flex>
690	<v-flex xs8 sm8 class="ml-3">	690	<v-flex xs8 sm8 class="ml-3">
691	<v-text-field	691	<v-text-field
692	name="input-4-3"	692	name="input-4-3"
693	v-model="addSchool.websiteUrl"	693	v-model="addSchool.websiteUrl"
694	placeholder="fill Your WebSite Url"	694	placeholder="fill Your WebSite Url"
695	required	695	required
696	></v-text-field>	696	></v-text-field>
697	</v-flex>	697	</v-flex>
698	</v-layout>	698	</v-layout>
699	</v-flex>	699	</v-flex>
700	<v-flex xs12 sm6>	700	<v-flex xs12 sm6>
701	<v-layout>	701	<v-layout>
702	<v-flex xs4 sm4 class="pt-4 subheading">	702	<v-flex xs4 sm4 class="pt-4 subheading">
703	<label class="right">Address:</label>	703	<label class="right">Address:</label>
704	</v-flex>	704	</v-flex>
705	<v-flex xs8 sm8 class="ml-3">	705	<v-flex xs8 sm8 class="ml-3">
706	<v-text-field	706	<v-text-field
707	name="input-4-3"	707	name="input-4-3"
708	v-model="addSchool.address"	708	v-model="addSchool.address"
709	:rules="presentAddress"	709	:rules="presentAddress"
710	placeholder="fill Your Address"	710	placeholder="fill Your Address"
711	required	711	required
712	></v-text-field>	712	></v-text-field>
713	</v-flex>	713	</v-flex>
714	</v-layout>	714	</v-layout>
715	</v-flex>	715	</v-flex>
716	</v-layout>	716	</v-layout>
717	<v-layout>	717	<v-layout>
718	<v-flex xs12 sm11 offset-md1>	718	<v-flex xs12 sm11 offset-md1>
719	<v-layout>	719	<v-layout>
720	<v-flex xs6>	720	<v-flex xs6>
721	<v-btn round dark @click="clear()">Clear</v-btn>	721	<v-btn round dark @click="clear()">Clear</v-btn>
722	</v-flex>	722	</v-flex>
723	<v-flex xs6>	723	<v-flex xs6>
724	<v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn>	724	<v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn>
725	</v-flex>	725	</v-flex>
726	</v-layout>	726	</v-layout>
727	</v-flex>	727	</v-flex>
728	</v-layout>	728	</v-layout>
729	</v-form>	729	</v-form>
730	</v-flex>	730	</v-flex>
731	</v-flex>	731	</v-flex>
732	</v-layout>	732	</v-layout>
733	</v-container>	733	</v-container>
734	</v-tab-item>	734	</v-tab-item>
735	</v-tabs>	735	</v-tabs>
736	<div class="loader" v-if="showLoader">	736	<div class="loader" v-if="showLoader">
737	<v-progress-circular indeterminate color="white"></v-progress-circular>	737	<v-progress-circular indeterminate color="white"></v-progress-circular>
738	</div>	738	</div>
739	</div>	739	</div>
740	</template>	740	</template>
741		741
742	<script>	742	<script>
743	import http from "@/Services/http.js";	743	import http from "@/Services/http.js";
744	import moment from "moment";	744	import moment from "moment";
745	import countryList from "@/script/country.js";	745	import countryList from "@/script/country.js";
746		746
747	export default {	747	export default {
748	data: () => ({	748	data: () => ({
749	e2: 0,	749	e2: 0,
750	snackbar: false,	750	snackbar: false,
751	y: "top",	751	y: "top",
752	x: "right",	752	x: "right",
753	mode: "",	753	mode: "",
754	timeout: 3000,	754	timeout: 3000,
755	text: "",	755	text: "",
756	showLoader: false,	756	showLoader: false,
757	loading: false,	757	loading: false,
758	date: null,	758	date: null,
759	search: "",	759	search: "",
760	menu: false,	760	menu: false,
761	menu1: false,	761	menu1: false,
762	dialog: false,	762	dialog: false,
763	valid: true,	763	valid: true,
764	isActive: true,	764	isActive: true,
765	newActive: false,	765	newActive: false,
766	pagination: {	766	pagination: {
767	rowsPerPage: 15	767	rowsPerPage: 15
768	},	768	},
769	imageData: {},	769	imageData: {},
770	imageName: "",	770	imageName: "",
771	imageUrl: "",	771	imageUrl: "",
772	imageFile: "",	772	imageFile: "",
773	nameRules: [v => !!v \|\| "Full Name is required"],	773	nameRules: [v => !!v \|\| "Full Name is required"],
774	dateRules: [v => !!v \|\| "DOB is required"],	774	dateRules: [v => !!v \|\| "DOB is required"],
775	cityRules: [v => !!v \|\| "City Name is required"],	775	cityRules: [v => !!v \|\| "City Name is required"],
776	pincode: [v => !!v \|\| " Pincode is required"],	776	pincode: [v => !!v \|\| " Pincode is required"],
777	country: [v => !!v \|\| " Country Name is required"],	777	country: [v => !!v \|\| " Country Name is required"],
778	permanentAddress: [v => !!v \|\| " Permanent Address is requiclearred"],	778	permanentAddress: [v => !!v \|\| " Permanent Address is requiclearred"],
779	presentAddress: [v => !!v \|\| " Present Address is required"],	779	presentAddress: [v => !!v \|\| " Present Address is required"],
780	mobileNoRules: [v => !!v \|\| "Mobile Number is required"],	780	mobileNoRules: [v => !!v \|\| "Mobile Number is required"],
781	stateRules: [v => !!v \|\| "State Name is required"],	781	stateRules: [v => !!v \|\| "State Name is required"],
782	schoolDetailRule: [v => !!v \|\| "school Detail is required"],	782	schoolDetailRule: [v => !!v \|\| "school Detail is required"],
783	sectionRules: [v => !!v \|\| " Section Name is required"],	783	sectionRules: [v => !!v \|\| " Section Name is required"],
784	genderRules: [v => !!v \|\| " Select Gender is required"],	784	genderRules: [v => !!v \|\| " Select Gender is required"],
785	establishmentYearRules: [v => !!v \|\| " Academic Year is required"],	785	establishmentYearRules: [v => !!v \|\| " Academic Year is required"],
786	errorMessages: "",	786	errorMessages: "",
787	emailRules: [	787	emailRules: [
788	v => !!v \|\| "E-mail is required",	788	v => !!v \|\| "E-mail is required",
789	v =>	789	v =>
790	/^\w+([.-]?\w+)@\w+([.-]?\w+)(\.\w{2,3})+$/.test(v) \|\|	790	/^\w+([.-]?\w+)@\w+([.-]?\w+)(\.\w{2,3})+$/.test(v) \|\|
791	"E-mail must be valid"	791	"E-mail must be valid"
792	],	792	],
793	countries: [],	793	countries: [],
794	headers: [	794	headers: [
795	{	795	{
796	text: "No.",	796	text: "No.",
797	align: "center",	797	align: "center",
798	sortable: false,	798	sortable: false,
799	value: "rollNo"	799	value: "rollNo"
800	},	800	},
801	{	801	{
802	text: "school Logo",	802	text: "school Logo",
803	value: "schoolLogoUrl",	803	value: "schoolLogoUrl",
804	sortable: false,	804	sortable: false,
805	align: "center"	805	align: "center"
806	},	806	},
807	{ text: "Name", value: "name", sortable: false, align: "center" },	807	{ text: "Name", value: "name", sortable: false, align: "center" },
808	{ text: "Email", value: "email", sortable: false, align: "center" },	808	{ text: "Email", value: "email", sortable: false, align: "center" },
809	{ text: "City", value: "city", sortable: false, align: "center" },	809	{ text: "City", value: "city", sortable: false, align: "center" },
810	{	810	{
811	text: "State",	811	text: "State",
812	value: "state",	812	value: "state",
813	sortable: false,	813	sortable: false,
814	align: "center"	814	align: "center"
815	},	815	},
816	{	816	{
817	text: "Mobile",	817	text: "Mobile",
818	value: "mobile",	818	value: "mobile",
819	sortable: false,	819	sortable: false,
820	align: "center"	820	align: "center"
821	},	821	},
822	{ text: "Action", value: "", sortable: false, align: "center" }	822	{ text: "Action", value: "", sortable: false, align: "center" }
823	],	823	],
824	schoolList: [],	824	schoolList: [],
825	editedIndex: -1,	825	editedIndex: -1,
826	addSchool: {	826	addSchool: {
827	role: "ADMIN"	827	role: "ADMIN"
828	},	828	},
829	editedItem: {},	829	editedItem: {},
830	schoolToken: {}	830	schoolToken: {}
831	}),	831	}),
832	methods: {	832	methods: {
833	getSchool() {	833	getSchool() {
834	this.showLoader = true;	834	this.showLoader = true;
835	http()	835	http()
836	.get("/getSchoolList", {	836	.get("/getSchoolList", {
837	headers: { Authorization: "Bearer " + this.schoolToken }	837	headers: { Authorization: "Bearer " + this.$store.state.token }
838	})	838	})
839	.then(response => {	839	.then(response => {
840	this.schoolList = response.data.data;	840	this.schoolList = response.data.data;
841	this.showLoader = false;	841	this.showLoader = false;
842	})	842	})
843	.catch(error => {	843	.catch(error => {
844	this.showLoader = false;	844	this.showLoader = false;
845	// if (error.response.status === 401) {	845	// if (error.response.status === 401) {
846	// this.$router.replace({ path: "/" });	846	// this.$router.replace({ path: "/" });
847	// this.$store.dispatch("setToken", null);	847	// this.$store.dispatch("setToken", null);
848	// this.$store.dispatch("Id", null);	848	// this.$store.dispatch("Id", null);
849	// this.$store.dispatch("Role", null);	849	// this.$store.dispatch("Role", null);
850	// }	850	// }
851	});	851	});
852	},	852	},
853	pickFile() {	853	pickFile() {
854	this.$refs.image.click();	854	this.$refs.image.click();
855	},	855	},
856	dates: function(date) {	856	dates: function(date) {
857	return moment(date).format("MMMM DD, YYYY");	857	return moment(date).format("MMMM DD, YYYY");
858	},	858	},
859	onFilePicked(e) {	859	onFilePicked(e) {
860	// console.log(e)	860	// console.log(e)
861	const files = e.target.files;	861	const files = e.target.files;
862	this.imageData.upload = e.target.files[0];	862	this.imageData.upload = e.target.files[0];
863	if (files[0] !== undefined) {	863	if (files[0] !== undefined) {
864	this.imageName = files[0].name;	864	this.imageName = files[0].name;
865	if (this.imageName.lastIndexOf(".") <= 0) {	865	if (this.imageName.lastIndexOf(".") <= 0) {
866	return;	866	return;
867	}	867	}
868	const fr = new FileReader();	868	const fr = new FileReader();
869	fr.readAsDataURL(files[0]);	869	fr.readAsDataURL(files[0]);
870	fr.addEventListener("load", () => {	870	fr.addEventListener("load", () => {
871	this.imageUrl = fr.result;	871	this.imageUrl = fr.result;
872	this.imageFile = files[0]; // this is an image file that can be sent to server...	872	this.imageFile = files[0]; // this is an image file that can be sent to server...
873	this.imageData.imageUrl = URL.createObjectURL(this.imageFile);	873	this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
874	});	874	});
875	} else {	875	} else {
876	this.imageName = "";	876	this.imageName = "";
877	this.imageFile = "";	877	this.imageFile = "";
878	this.imageUrl = "";	878	this.imageUrl = "";
879	}	879	}
880	},	880	},
881	editItem(item) {	881	editItem(item) {
882	this.editedIndex = this.schoolList.indexOf(item);	882	this.editedIndex = this.schoolList.indexOf(item);
883	this.editedItem = Object.assign({}, item);	883	this.editedItem = Object.assign({}, item);
884	this.dialog = true;	884	this.dialog = true;
885	},	885	},
886	activeTab(type) {	886	activeTab(type) {
887	switch (type) {	887	switch (type) {
888	case "existing":	888	case "existing":
889	this.newActive = false;	889	this.newActive = false;
890	this.isActive = true;	890	this.isActive = true;
891	break;	891	break;
892		892
893	default:	893	default:
894	this.newActive = true;	894	this.newActive = true;
895	this.isActive = false;	895	this.isActive = false;
896	break;	896	break;
897	}	897	}
898	},	898	},
899	close() {	899	close() {
900	this.dialog = false;	900	this.dialog = false;
901	setTimeout(() => {	901	setTimeout(() => {
902	this.editedItem = Object.assign({}, this.defaultItem);	902	this.editedItem = Object.assign({}, this.defaultItem);
903	this.editedIndex = -1;	903	this.editedIndex = -1;
904	}, 300);	904	}, 300);
905	},	905	},
906	submit() {	906	submit() {
907	if (this.$refs.form.validate()) {	907	if (this.$refs.form.validate()) {
908	if (this.imageUrl) {	908	if (this.imageUrl) {
909	var str = this.imageUrl;	909	var str = this.imageUrl;
910	const [baseUrl, imageUrl] = str.split(/,/);	910	const [baseUrl, imageUrl] = str.split(/,/);
911	this.addSchool.upload = imageUrl;	911	this.addSchool.upload = imageUrl;
912	}	912	}
913	this.loading = true;	913	this.loading = true;
914	http()	914	http()
915	.post("/createSchool", this.addSchool, {	915	.post("/createSchool", this.addSchool, {
916	headers: { Authorization: "Bearer " + this.schoolToken }	916	headers: { Authorization: "Bearer " + this.schoolToken }
917		917
918	})	918	})
919	.then(response => {	919	.then(response => {
920	this.snackbar = true;	920	this.snackbar = true;
921	this.text = "New School added successfully";	921	this.text = "New School added successfully";
922	this.clear();	922	this.clear();
923	this.getSchool();	923	this.getSchool();
924	this.loading = false;	924	this.loading = false;
925	})	925	})
926	.catch(error => {	926	.catch(error => {
927	this.snackbar = true;	927	this.snackbar = true;
928	this.text = error.response.data.message;	928	this.text = error.response.data.message;
929	this.loading = false;	929	this.loading = false;
930	});	930	});
931	}	931	}
932	},	932	},
933	clear() {	933	clear() {
934	this.$refs.form.reset();	934	this.$refs.form.reset();
935	this.imageUrl = "";	935	this.imageUrl = "";
936	},	936	},
937	save() {	937	save() {
938	if (this.imageUrl) {	938	if (this.imageUrl) {
939	var str = this.imageUrl;	939	var str = this.imageUrl;
940	const [baseUrl, imageUrl] = str.split(/,/);	940	const [baseUrl, imageUrl] = str.split(/,/);
941	this.editedItem.upload = imageUrl;	941	this.editedItem.upload = imageUrl;
942	}	942	}
943	this.editedItem.schoolId = this.editedItem._id;	943	this.editedItem.schoolId = this.editedItem._id;
944	http()	944	http()
945	.put("/updateSchool", this.editedItem)	945	.put("/updateSchool", this.editedItem)
946	.then(response => {	946	.then(response => {
947	this.snackbar = true;	947	this.snackbar = true;
948	this.text = "Successfully School Existing User";	948	this.text = "Successfully School Existing User";
949	this.imageUrl = "";	949	this.imageUrl = "";
950	this.getSchool();	950	this.getSchool();
951	this.close();	951	this.close();
952	})	952	})
953	.catch(error => {	953	.catch(error => {
954	// console.log(error);	954	// console.log(error);
955	if ((this.snackbar = true)) {	955	if ((this.snackbar = true)) {
956	this.text = error.response.data.statusText;	956	this.text = error.response.data.statusText;
957	}	957	}
958	});	958	});
959	},	959	},
960	adminAccess(data) {	960	adminAccess(data) {
961	// console.log("dataaaaaaaaaaaaaa", data);	961	// console.log("dataaaaaaaaaaaaaa", data);
962	this.showLoader = true;	962	this.showLoader = true;
963	http()	963	http()
964	.get("/getAdminAccess", {	964	.get("/getAdminAccess", {
965	params: { schoolId: data._id },	965	params: { schoolId: data._id },
966	headers: { Authorization: "Bearer " + this.schoolToken }	966	headers: { Authorization: "Bearer " + this.schoolToken }
967	})	967	})
968	.then(response => {	968	.then(response => {
969	this.$store.dispatch("setToken", response.data.data.token);	969	this.$store.dispatch("setToken", response.data.data.token);
970	this.$store.dispatch("Id", response.data.data.id);	970	this.$store.dispatch("Id", response.data.data.id);
971	this.$store.dispatch("Role", response.data.data.role);	971	this.$store.dispatch("Role", response.data.data.role);
972	let routeData = this.$router.resolve({	972	let routeData = this.$router.resolve({
973	name: "dashboardAdmin"	973	name: "dashboardAdmin"
974	});	974	});
975	window.open(routeData.href, "_blank");	975	window.open(routeData.href, "_blank");
976	this.showLoader = false;	976	this.showLoader = false;
977	})	977	})
978	.catch(error => {	978	.catch(error => {
979	this.showLoader = false;	979	this.showLoader = false;
980	});	980	});
981	},	981	},
982	suspendSchoolStatus(suspendStatus, id) {	982	suspendSchoolStatus(suspendStatus, id) {
983	let suspendStatusData = {	983	let suspendStatusData = {
984	schoolId: id,	984	schoolId: id,
985	status: suspendStatus	985	status: suspendStatus
986	};	986	};
987	http()	987	http()
988	.put("/suspendSchoolAccount", suspendStatusData, {	988	.put("/suspendSchoolAccount", suspendStatusData, {
989	headers: { Authorization: "Bearer " + this.schoolToken }	989	headers: { Authorization: "Bearer " + this.schoolToken }
990	})	990	})
991	.then(response => {	991	.then(response => {
992	this.getSchool();	992	this.getSchool();
993	this.text = response.data.message;	993	this.text = response.data.message;
994	this.snackbar = true;	994	this.snackbar = true;
995	})	995	})
996	.catch(error => {	996	.catch(error => {
997	// console.log(error.response.data.data);	997	// console.log(error.response.data.data);
998	this.snackbar = true;	998	this.snackbar = true;
999	this.text = error.response.data.message;	999	this.text = error.response.data.message;
1000	});	1000	});
1001	}	1001	}
1002	},	1002	},
1003	mounted() {	1003	mounted() {
1004	const getCountryList = countryList();	1004	const getCountryList = countryList();
1005	this.countries = getCountryList;	1005	this.countries = getCountryList;
1006	this.token = this.$store.state.token;	1006	this.token = this.$store.state.token;
1007	this.schoolToken = this.$store.state.schoolToken;	1007	this.schoolToken = this.$store.state.schoolToken;
1008	this.getSchool();	1008	this.getSchool();
1009	},	1009	},
1010	created() {	1010	created() {
1011	this.$root.$on("app:search", search => {	1011	this.$root.$on("app:search", search => {
1012	this.search = search;	1012	this.search = search;
1013	});	1013	});
1014	},	1014	},
1015	beforeDestroy() {	1015	beforeDestroy() {
1016	// dont forget to remove the listener	1016	// dont forget to remove the listener
1017	this.$root.$off("app:search");	1017	this.$root.$off("app:search");
1018	}	1018	}
1019	};	1019	};
1020	</script>	1020	</script>
1021	<style scoped>	1021	<style scoped>
1022	.active {	1022	.active {
1023	background-color: gray;	1023	background-color: gray;
1024	color: white !important;	1024	color: white !important;
1025	}	1025	}
1026	.activebtn {	1026	.activebtn {
1027	color: black !important;	1027	color: black !important;
1028	}	1028	}
1029	</style>	1029	</style>