viithiisys / School-Management-dashboard

Browse Code »

Commit 37150e7c188034358ce05c0f05dfc15ee8b22147

Authored by Neeraj Sharma 2019-11-28 08:04:53 -0500

1 parent ec5677f432

Exists in master and in 3 other branches

implement school functionality with role

Showing 12 changed files with 1456 additions and 161 deletions Show diff stats

src/Services/http.js

Diff comments View file @37150e7

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	export default () => {	4	export default () => {
5	return axios.create({	5	return axios.create({
6	// baseURL: 'http://192.168.0.101:3002/v1',	6	// baseURL: 'http://192.168.2.221:3002/v1',
7	baseURL: 'http://13.234.251.173:8001/v1',	7	baseURL: 'http://13.234.251.173:8001/v1',
8	headers: {	8	headers: {
9	Authorization: `Bearer ${store.state.token}`	9	Authorization: `Bearer ${store.state.token}`
10	}	10	}
11	})	11	})
12	}	12	}

src/api/menu.js

Diff comments View file @37150e7

-const Menu = [
+const adminMenu = [
     //  { header: 'Apps' },
     {
         title: 'Dashboard',
         // group: 'apps',
         path: '/dashboard',
         icon: '/static/schoolIcons/Dashboard.png',
     },
     {
         title: 'Class',
         // group: 'apps',
         path: '/addclass',
         icon: '/static/schoolIcons/Class.png',
     },
     {
         title: 'Section',
         // group: 'apps',
         path: '/section',
         icon: '/static/schoolIcons/Section.png',
     },
     {
         title: 'Subjects',
         path: '/subject',
         icon: '/static/schoolIcons/Subjects.png',
     },
     {
         title: 'Parents',
         // group: 'apps',
         path: '/parents',
         icon: '/static/schoolIcons/Parents.png',
     },
     {
         title: 'Teachers',
         // group: '',
         path: 'teachers',
         icon: '/static/schoolIcons/Teachers.png',
     },
     {
         title: 'Students',
         // group: 'apps',
         path: '/Students',
         icon: '/static/schoolIcons/Students.png',
     },
     {
         title: 'User',
         path: '/User',
         icon: '/static/schoolIcons/User.png',
     },
     {
         title: 'Attendance',
         group: 'Attendance',
         component: 'Attendance',
         icon: '/static/schoolIcons/Attendance.png',
         items: [
             { name: 'studentAttendence', title: 'Student Attendance', component: 'studentAttendence', action: '', },
             // { name: 'teacherAttendence', title: 'Teacher Attendance', component: 'teacherAttendence', action: '', },
             // { name: 'userAttendence', title: 'User Attendance', component: 'userAttendence', action: '', },
         ]
     },
     {
         title: 'Exam',
         group: 'Exam',
         component: 'Exam',
         icon: '/static/schoolIcons/exam.png',
         items: [
             { name: 'Exam', title: 'Exam', component: 'Exam', action: '', },
             { name: 'ExamSchedule', title: 'Exam Schedule', component: 'ExamSchedule', action: '', },
             { name: 'Grade', title: 'Grade', component: 'Grade', action: '', },
             // { name: 'userAttendence', title: 'User Attendance', component: 'userAttendence', action: '', },
         ]
     },
     {
         title: 'Mark',
         group: 'Mark',
         component: 'Mark',
         icon: '/static/schoolIcons/marks.png',
         items: [
             { name: 'Mark', title: 'Mark', component: 'Mark', action: '', },
             { name: 'markDistribution', title: 'Mark Distribution', component: 'markDistribution', action: '', },
             { name: 'Promotion', title: 'promotion', component: 'Promotion', action: '', },
             // { name: 'userAttendence', title: 'User Attendance', component: 'userAttendence', action: '', },
         ]
     },
     {
         title: 'Administrator',
         group: 'Administrator',
         component: 'Administrator',
         icon: '/static/schoolIcons/administrator.png',
         items: [
             { name: 'academicYear', title: 'Academic Year', component: 'academicYear', action: '', },
             { name: 'systemAdmin', title: 'System Admin', component: 'systemAdmin', action: '', },
             { name: 'resetPassword', title: 'Reset Password', component: 'resetPassword', action: '', },
             { name: 'Role', title: 'Role', component: 'Role', action: '', },
         ]
     },
     {
         title: 'Notice Board',
         path: '/NoticeBoard',
         icon: '/static/schoolIcons/Notice_board.png',
     },
     {
         title: 'News',
         path: '/news',
         icon: '/static/schoolIcons/News.png',
     },
     // {
     //   title: 'Reminder',
     //   name: 'reminder',
     //   icon: 'alarm_add',
     // },
     {
         title: 'Time Table',
         path: '/timeTable',
         icon: '/static/schoolIcons/Time_table.png',
     },
     {
         title: 'Library',
         group: 'Library',
         component: 'Library',
         icon: '/static/schoolIcons/Library.png',
         items: [
             { name: 'libraryMember', title: ' Library Member', component: 'libraryMember', action: '', },
             { name: 'Books', title: 'Books', component: 'Books', action: '', },
             { name: 'Issue', title: ' Issue', component: 'Issue', action: '', },
             { name: 'eBooks', title: 'E-Books', component: 'eBooks', action: '', }
         ]
     },
     {
         title: 'Report',
         group: 'Report',
         component: 'Report',
         icon: '/static/schoolIcons/reports.png',
         items: [
             { name: 'studentReport', title: 'Student Report', component: 'studentReport', action: '', },
             { name: 'progressCardReport', title: 'Progress Card Report', component: 'progressCardReport', action: '', }
         ]
     },
     {
         title: 'Notification',
         path: '/notification',
         icon: '/static/schoolIcons/Notification.png',
     },
     {
         title: 'Social Media',
         path: '/SocialMedia',
         icon: '/static/schoolIcons/Social_Media.png',
     },
     {
         title: 'Gallery',
         path: '/Gallery',
         icon: '/static/schoolIcons/Gallery.png',
     },
     {
         title: 'Event',
         path: '/Event',
         icon: '/static/schoolIcons/Events.png',
     },
     {
         title: 'Account',
         group: 'Account',
         component: 'Account',
         icon: '/static/schoolIcons/Account.png',
         items: [
             { name: 'feeTypes', title: 'Fee Types', component: 'feeTypes', action: '', },
             { name: 'Invoice', title: 'Invoice', component: 'Invoice', action: '', },
             { name: 'paymentHistory', title: 'Payment History', component: 'paymentHistory', action: '', },
             { name: 'Expense', title: 'Expense', component: 'Expense', action: '', },
             { name: 'Income', title: 'Income', component: 'Income', action: '', },
         ]
     },
     {
         title: 'Holiday',
         path: '/Holiday',
         icon: '/static/schoolIcons/Holidays.png',
     },
     {
         title: 'General Setting',
         path: '/generalSetting',
         icon: '/static/schoolIcons/settings.png',
     }
 ];
+const schoolMenu = [
+    //  { header: 'Apps' },
+    {
+        title: 'School',
+        // group: 'apps',
+        path: '/school',
+        icon: '/static/schoolIcons/Dashboard.png',
+    },
+];
 // reorder menu
-Menu.forEach((item) => {
+// Menu.forEach((item) => {
-    // if (item.items) {
+// if (item.items) {
-    //     item.items.sort((x, y) => {
+//     item.items.sort((x, y) => {
-    //         let textA = x.title.toUpperCase();
+//         let textA = x.title.toUpperCase();
-    //         let textB = y.title.toUpperCase();
+//         let textB = y.title.toUpperCase();
-    //         return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
+//         return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
-    //     });
+//     });
-    // }
+// }
-});
+// });
-export default Menu;

src/components/pageHeader/AppDrawer.vue

Diff comments View file @37150e7

 <template>
   <v-navigation-drawer
     id="appDrawer"
     :mini-variant.sync="mini"
     fixed
     :dark="$vuetify.dark"
     app
     v-model="drawer"
     width="260"
   >
     <v-toolbar class="fixcolors">
       <img v-bind:src="computeLogo" height="40" width="150" class="imgLogo" alt="ana" />
       <v-toolbar-title class="ml-0 pl-3"></v-toolbar-title>
     </v-toolbar>
     <vue-perfect-scrollbar class="drawer-menu--scroll" :settings="scrollSettings">
       <v-list dense expand>
         <template v-for="(item, i) in menus">
           <!--group with subitems-->
           <v-list-group
             v-if="item.items"
             :key="item.name"
             :group="item.group"
             no-action="no-action"
           >
             <v-list-tile slot="activator" ripple="ripple">
               <v-list-tile-action v-if="item.icon" class="pr-3">
                 <img :src="item.icon" width="40" alt="icons" />
               </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>
             <template v-for="(subItem, i) in item.items">
               <!--sub group-->
               <v-list-group
                 v-if="subItem.items"
                 :key="subItem.name"
                 :group="subItem.group"
                 sub-group="sub-group"
               >
                 <v-list-tile slot="activator" ripple="ripple">
                   <v-list-tile-content>
                     <v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
                   </v-list-tile-content>
                 </v-list-tile>
                 <v-list-tile
                   v-for="(grand, i) in subItem.children"
                   :key="i"
                   :to="genChildTarget(item, grand)"
                   :href="grand.href"
                   ripple="ripple"
                 >
                   <v-list-tile-content>
                     <v-list-tile-title>{{ grand.title }}</v-list-tile-title>
                   </v-list-tile-content>
                 </v-list-tile>
               </v-list-group>
               <!--child item-->
               <v-list-tile
                 v-else
                 :key="i"
                 :to="genChildTarget(item, subItem)"
                 :href="subItem.href"
                 :disabled="subItem.disabled"
                 :target="subItem.target"
                 ripple="ripple"
               >
                 <v-list-tile-action v-if="subItem.action">
                   <img
                     width="30"
                     :src="subItem.action"
                     :class="[subItem.actionClass || 'success--text']"
                   />
                 </v-list-tile-action>
                 <v-list-tile-content>
                   <v-list-tile-title class="body-2">
                     <span>{{ subItem.title }}</span>
                   </v-list-tile-title>
                 </v-list-tile-content>
                 <!-- <v-circle class="white--text pa-0 circle-pill" v-if="subItem.badge" color="red" disabled="disabled">{{ subItem.badge }}</v-circle> -->
               </v-list-tile>
             </template>
           </v-list-group>
           <v-subheader v-else-if="item.header" :key="i">{{ item.header }}</v-subheader>
           <v-divider v-else-if="item.divider" :key="i"></v-divider>
           <!--top-level link-->
           <v-list-tile
             v-else
             ripple="ripple"
             :disabled="item.disabled"
             :target="item.target"
             rel="noopener"
             :key="item.path"
           >
             <a :href="item.path">
               <v-list-tile-action v-if="item.icon">
                 <img :src="item.icon" width="40" alt="icons" />
               </v-list-tile-action>
               <v-list-tile-content class="pl-3 mt-2">
                 <v-list-tile-title>{{ item.title }}</v-list-tile-title>
               </v-list-tile-content>
               <!-- <v-circle class="white--text pa-0 chip--x-small" v-if="item.badge" :color="item.color || 'primary'" disabled="disabled">{{ item.badge }}</v-circle> -->
               <v-list-tile-action v-if="item.subAction">
                 <!-- <v-icon class="success--text">{{ item.subAction }}</v-icon> -->
                 <img :src="item.icon" width="40" alt="icons" />
               </v-list-tile-action>
               <!-- <v-circle class="caption blue lighten-2 white--text mx-0" v-else-if="item.chip" label="label" small="small">{{ item.chip }}</v-circle> -->
             </a>
           </v-list-tile>
         </template>
       </v-list>
     </vue-perfect-scrollbar>
   </v-navigation-drawer>
 </template>
 <script>
 import menu from "@/api/menu";
 import VuePerfectScrollbar from "vue-perfect-scrollbar";
 export default {
   name: "app-drawer",
   components: {
     VuePerfectScrollbar
   },
   props: {
     expanded: {
       type: Boolean,
       default: true
     }
   },
   data: () => ({
     mini: false,
     drawer: true,
-    menus: menu,
+    menus: [],
     scrollSettings: {
       maxScrollbarLength: 160
     }
   }),
   computed: {
     computeGroupActive() {
       return true;
     },
     computeLogo() {
       return "/static/logoIntrack.png";
     },
     sideToolbarColor() {
       return this.$vuetify.options.extra.sideNav;
     }
   },
   created() {
+    if (this.$store.state.role === "ADMIN") {
+      this.menus = menu.adminMenu;
+    } else if (this.$store.state.role === "SUPERADMIN") {
+      this.menus = menu.schoolMenu;
+    }
     window.getApp.$on("APP_DRAWER_TOGGLED", () => {
       this.drawer = !this.drawer;
     });
   },
   methods: {
     genChildTarget(item, subItem) {
       if (subItem.href) return;
       if (subItem.component) {
         return {
           name: subItem.component
         };
       }
       return { name: `${item.group}/${subItem.name}` };
     }
   }
 };
 </script>
 <style lang="stylus">
 // @import '../../node_modules/vuetify/src/stylus/settings/_elevations.styl';
 #appDrawer {
   overflow: hidden;
   .drawer-menu--scroll {
     height: calc(100vh - 48px);
     overflow: auto;
   }
 }
 .v-list__group__items--no-action .v-list__tile {
-    padding-left: 72px !important;
+  padding-left: 72px !important;
 }
 .v-list--dense .v-list__tile:not(.v-list__tile--avatar) {
   height: 60px;
   font-size: 17px;
 }
 .v-list__tile__action {
   min-width: 36px;
 }
 .v-list__tile.primary--text a {
   color: black !important;
   border-left: 4px solid black;
   border-radius: 4px;
 }
 @media screen and (max-width: 420px) {
   .v-list--dense .v-list__tile:not(.v-list__tile--avatar) {
     font-size: 14px;
   }
   .imgLogo {
     height: 32px;
     width: 120px;
   }
 }
 </style>
 <style scoped>
 .theme--light .v-icon,
 .application .theme--light.v-icon {
   color: #39b982;
 }
 a {
   text-decoration: none;
   display: inherit;
   color: black;
 }
 a:hover {
   color: gray !important;
   /* border-left: 4px solid black; */
   /* border-radius: 4px; */
 }
 /* a:active {
   color: red !important;
 } */
 /* a:visited {
   border-left: 4px solid black;
   border-radius: 4px;
 } */
 /* visited link */
 /* a:visited {
   color: black !important;
   border-left: 4px solid black;
   border-radius: 4px;
 }
 a:active {
   color: black !important;
   border-left: 4px solid black;
   border-radius: 4px;
 }  */
 </style>

src/event.js

Diff comments View file @37150e7

1	export default [	1	export default [{
2	{	2	name: 'APP_LOGIN_SUCCESS',
3	name: 'APP_LOGIN_SUCCESS',	3	callback: function(e) {
4	callback: function (e) {	4	this.$router.push({ path: 'dashboard' });
5	this.$router.push({ path: 'dashboard' });	5	}
6	}	6	},
7	},	7	{
8	{	8	name: 'APP_LOGOUT',
9	name: 'APP_LOGOUT',	9	callback: function(e) {
10	callback: function (e) {	10	this.snackbar = {
11	this.snackbar = {	11	show: true,
12	show: true,	12	color: 'green',
13	color: 'green',	13	text: 'Logout successfully.'
14	text: 'Logout successfully.'	14	};
15	};	15	this.$store.dispatch('setToken', null)
16	this.$store.dispatch('setToken', null)	16	this.$store.dispatch('Id', null)
17	this.$store.dispatch('Id', null)	17	this.$store.dispatch('Role', null)
18	this.$router.replace({ path: '/' });	18	this.$router.replace({ path: '/' });
19	}	19	}
20	},	20	},
21	{	21	{
22	name: 'APP_CHANGE',	22	name: 'APP_CHANGE',
23	callback: function (e) {	23	callback: function(e) {
24	this.snackbar = {	24	this.snackbar = {
25	show: true,	25	show: true,
26	color: 'green',	26	color: 'green',
27	text: 'Logout successfully.'	27	text: 'Logout successfully.'
28	};	28	};
29	this.$router.replace({	29	this.$router.replace({
30	path: '/'	30	path: '/'
31	});	31	});
32	}	32	}
33	},	33	},
34	{	34	{
35	name: 'APP_PAGE_LOADED',	35	name: 'APP_PAGE_LOADED',
36	callback: function (e) {	36	callback: function(e) {}
37	}	37	},
38	},	38	{
39	{	39	name: 'APP_AUTH_FAILED',
40	name: 'APP_AUTH_FAILED',	40	callback: function(e) {
41	callback: function (e) {	41	this.$router.push('/login');
42	this.$router.push('/login');	42	this.$message.error('Token has expired');
43	this.$message.error('Token has expired');	43	}
44	}	44	},
45	},	45	{
46	{	46	name: 'APP_BAD_REQUEST',
47	name: 'APP_BAD_REQUEST',	47	// @error api response data
48	// @error api response data	48	callback: function(msg) {
49	callback: function (msg) {	49	this.$message.error(msg);
50	this.$message.error(msg);	50	}
51	}	51	},
52	},	52	{
53	{	53	name: 'APP_ACCESS_DENIED',
54	name: 'APP_ACCESS_DENIED',	54	// @error api response data
55	// @error api response data	55	callback: function(msg) {
56	callback: function (msg) {	56	this.$message.error(msg);
57	this.$message.error(msg);	57	this.$router.push('/forbidden');
58	this.$router.push('/forbidden');	58	}
59	}	59	},
60	},	60	{
61	{	61	name: 'APP_RESOURCE_DELETED',
62	name: 'APP_RESOURCE_DELETED',	62	// @error api response data
63	// @error api response data	63	callback: function(msg) {
64	callback: function (msg) {	64	this.$message.success(msg);
65	this.$message.success(msg);	65	}
66	}	66	},
67	},	67	{
68	{	68	name: 'APP_RESOURCE_UPDATED',
69	name: 'APP_RESOURCE_UPDATED',	69	// @error api response data
70	// @error api response data	70	callback: function(msg) {
71	callback: function (msg) {	71	this.$message.success(msg);
72	this.$message.success(msg);	72	}
73	}	73	},
74	},
75		74
76	];	75	];
		76

src/pages/Attendence/viewStudentsAttendence.vue

Diff comments View file @37150e7

1	<template>	1	<template>
2	<v-container fluid grid-list-md>	2	<v-container fluid grid-list-md>
3	<div v-show="hideData">	3	<div v-show="hideData">
4	<v-layout row>	4	<v-layout row>
5	<v-btn color="grey" @click="exportPdf" class="right" dark>	5	<v-btn color="grey" @click="exportPdf" class="right" dark>
6	Export Pdf	6	Export Pdf
7	<v-icon dark right size="20">save_alt</v-icon>	7	<v-icon dark right size="20">save_alt</v-icon>
8	</v-btn>	8	</v-btn>
9	<v-dialog v-model="dialogExport" max-width="500px">	9	<v-dialog v-model="dialogExport" max-width="500px">
10	<v-btn slot="activator" color="grey" class="right" dark>	10	<v-btn slot="activator" color="grey" class="right" dark>
11	Export csv	11	Export csv
12	<v-icon dark right size="20">save_alt</v-icon>	12	<v-icon dark right size="20">save_alt</v-icon>
13	</v-btn>	13	</v-btn>
14	<v-card>	14	<v-card>
15	<h3 class="text-xs-center py-2 grey lighten-1 white--text">Export</h3>	15	<h3 class="text-xs-center py-2 grey lighten-1 white--text">Export</h3>
16	<v-card-text>	16	<v-card-text>
17	<v-container grid-list-md>	17	<v-container grid-list-md>
18	<v-layout wrap>	18	<v-layout wrap>
19	<v-flex xs12>	19	<v-flex xs12>
20	<v-menu	20	<v-menu
21	ref="menuStartDate"	21	ref="menuStartDate"
22	:close-on-content-click="false"	22	:close-on-content-click="false"
23	v-model="menuStartDate"	23	v-model="menuStartDate"
24	:nudge-right="40"	24	:nudge-right="40"
25	:return-value.sync="startDate"	25	:return-value.sync="startDate"
26	lazy	26	lazy
27	transition="scale-transition"	27	transition="scale-transition"
28	offset-y	28	offset-y
29	full-width	29	full-width
30	min-width="290px"	30	min-width="290px"
31	>	31	>
32	<v-text-field	32	<v-text-field
33	slot="activator"	33	slot="activator"
34	v-model="startDate"	34	v-model="startDate"
35	label="Select Start Date"	35	label="Select Start Date"
36	prepend-icon="event"	36	prepend-icon="event"
37	readonly	37	readonly
38	></v-text-field>	38	></v-text-field>
39	<v-date-picker	39	<v-date-picker
40	v-model="startDate"	40	v-model="startDate"
41	@input="$refs.menuStartDate.save(startDate)"	41	@input="$refs.menuStartDate.save(startDate)"
42	></v-date-picker>	42	></v-date-picker>
43	</v-menu>	43	</v-menu>
44	</v-flex>	44	</v-flex>
45	<v-flex xs12>	45	<v-flex xs12>
46	<v-menu	46	<v-menu
47	ref="menuEndDate"	47	ref="menuEndDate"
48	:close-on-content-click="false"	48	:close-on-content-click="false"
49	v-model="menuEndDate"	49	v-model="menuEndDate"
50	:nudge-right="40"	50	:nudge-right="40"
51	:return-value.sync="endDate"	51	:return-value.sync="endDate"
52	lazy	52	lazy
53	transition="scale-transition"	53	transition="scale-transition"
54	offset-y	54	offset-y
55	full-width	55	full-width
56	min-width="290px"	56	min-width="290px"
57	>	57	>
58	<v-text-field	58	<v-text-field
59	slot="activator"	59	slot="activator"
60	v-model="endDate"	60	v-model="endDate"
61	label="Select End Date"	61	label="Select End Date"
62	prepend-icon="event"	62	prepend-icon="event"
63	readonly	63	readonly
64	></v-text-field>	64	></v-text-field>
65	<v-date-picker v-model="endDate" @input="$refs.menuEndDate.save(endDate)"></v-date-picker>	65	<v-date-picker v-model="endDate" @input="$refs.menuEndDate.save(endDate)"></v-date-picker>
66	</v-menu>	66	</v-menu>
67	</v-flex>	67	</v-flex>
68	</v-layout>	68	</v-layout>
69	</v-container>	69	</v-container>
70	</v-card-text>	70	</v-card-text>
71	<v-card-actions>	71	<v-card-actions>
72	<v-spacer></v-spacer>	72	<v-spacer></v-spacer>
73	<v-btn color="blue darken-1" flat @click.native="dialogExport = false">Close</v-btn>	73	<v-btn color="blue darken-1" flat @click.native="dialogExport = false">Close</v-btn>
74	<download-csv :data="json_data">	74	<download-csv :data="json_data">
75	<v-btn color="blue darken-1" flat @click.native="exportData">Export</v-btn>	75	<v-btn color="blue darken-1" flat @click.native="exportData">Export</v-btn>
76	</download-csv>	76	</download-csv>
77	</v-card-actions>	77	</v-card-actions>
78	</v-card>	78	</v-card>
79	</v-dialog>	79	</v-dialog>
80	</v-layout>	80	</v-layout>
81	<v-layout wrap>	81	<v-layout wrap>
82	<v-flex xs12 sm12 md4>	82	<v-flex xs12 sm12 md4>
83	<v-card flat>	83	<v-card flat>
84	<h3 class="text-xs-center py-2 grey lighten-1 white--text">Profile</h3>	84	<h3 class="text-xs-center py-2 grey lighten-1 white--text">Profile</h3>
85	<v-card-text>	85	<v-card-text>
86	<v-container>	86	<v-container>
87	<v-layout wrap>	87	<v-layout wrap>
88	<v-flex xs12>	88	<v-flex xs12>
89	<v-layout>	89	<v-layout>
90	<v-flex	90	<v-flex
91	xs12	91	xs12
92	class="text-xs-center text-sm-center text-md-center text-lg-center"	92	class="text-xs-center text-sm-center text-md-center text-lg-center"
93	>	93	>
94	<v-avatar size="160px">	94	<v-avatar size="160px">
95	<img src="/static/icon/user.png" v-if="!studentData.profilePicUrl" />	95	<img src="/static/icon/user.png" v-if="!studentData.profilePicUrl" />
96	<img	96	<img
97	:src="studentData.profilePicUrl"	97	:src="studentData.profilePicUrl"
98	v-else-if="studentData.profilePicUrl"	98	v-else-if="studentData.profilePicUrl"
99	/>	99	/>
100	</v-avatar>	100	</v-avatar>
101	</v-flex>	101	</v-flex>
102	</v-layout>	102	</v-layout>
103	<v-layout>	103	<v-layout>
104	<v-flex xs12 sm12>	104	<v-flex xs12 sm12>
105	<h3 class="text-xs-center">	105	<h3 class="text-xs-center">
106	<b>{{ studentData.name }}</b>	106	<b>{{ studentData.name }}</b>
107	</h3>	107	</h3>
108	<p class="text-xs-center grey--text">Student</p>	108	<p class="text-xs-center grey--text">Student</p>
109	</v-flex>	109	</v-flex>
110	</v-layout>	110	</v-layout>
111	<v-layout style="border: 1px solid lightgrey;">	111	<v-layout style="border: 1px solid lightgrey;">
112	<v-flex xs6 sm6 class="pa-0">	112	<v-flex xs6 sm6 class="pa-0">
113	<h4 class="right">	113	<h4 class="right">
114	<b>Roll No :</b>	114	<b>Roll No :</b>
115	</h4>	115	</h4>
116	</v-flex>	116	</v-flex>
117	<v-flex sm6 xs6 class="pa-0">	117	<v-flex sm6 xs6 class="pa-0">
118	<h4>{{ studentData.rollNo }}</h4>	118	<h4>{{ studentData.rollNo }}</h4>
119	</v-flex>	119	</v-flex>
120	</v-layout>	120	</v-layout>
121	<v-layout style="border: 1px solid lightgrey;">	121	<v-layout style="border: 1px solid lightgrey;">
122	<v-flex xs6 sm6 class="pa-0">	122	<v-flex xs6 sm6 class="pa-0">
123	<h4 class="right">	123	<h4 class="right">
124	<b>Class :</b>	124	<b>Class :</b>
125	</h4>	125	</h4>
126	</v-flex>	126	</v-flex>
127	<v-flex sm6 xs6 class="right pa-0">	127	<v-flex sm6 xs6 class="right pa-0">
128	<h4>{{ studentData.classId.classNum }}</h4>	128	<h4>{{ studentData.classId.classNum }}</h4>
129	</v-flex>	129	</v-flex>
130	</v-layout>	130	</v-layout>
131	<v-layout style="border: 1px solid lightgrey;">	131	<v-layout style="border: 1px solid lightgrey;">
132	<v-flex xs6 sm6 class="right pa-0">	132	<v-flex xs6 sm6 class="right pa-0">
133	<h4 class="right">	133	<h4 class="right">
134	<b>Section :</b>	134	<b>Section :</b>
135	</h4>	135	</h4>
136	</v-flex>	136	</v-flex>
137	<v-flex sm6 xs6 class="right pa-0">	137	<v-flex sm6 xs6 class="right pa-0">
138	<h4>{{ studentData.sectionId.name}}</h4>	138	<h4>{{ studentData.sectionId.name}}</h4>
139	</v-flex>	139	</v-flex>
140	</v-layout>	140	</v-layout>
141	</v-flex>	141	</v-flex>
142	</v-layout>	142	</v-layout>
143	</v-container>	143	</v-container>
144	</v-card-text>	144	</v-card-text>
145	</v-card>	145	</v-card>
146	</v-flex>	146	</v-flex>
147	<v-flex xs12 sm12 md8>	147	<v-flex xs12 sm12 md8>
148	<v-card flat>	148	<v-card flat>
149	<h3 class="py-2 text-xs-center grey lighten-1 white--text">	149	<h3 class="py-2 text-xs-center grey lighten-1 white--text">
150	Attendence	150	Attendence
151	<span class="ml-4">	151	<span class="ml-4">
152	<v-avatar class="green caption" size="12"></v-avatar>	152	<v-avatar class="green caption" size="12"></v-avatar>
153	<span class="subheading">Present</span>	153	<span class="subheading">Present</span>
154	</span>	154	</span>
155	<span class="ml-4">	155	<span class="ml-4">
156	<v-avatar color="red caption" size="12" class></v-avatar>	156	<v-avatar color="red caption" size="12" class></v-avatar>
157	<span class="subheading">Absent</span>	157	<span class="subheading">Absent</span>
158	</span>	158	</span>
159	</h3>	159	</h3>
160	<YearCalendar	160	<YearCalendar
161	v-model="year"	161	v-model="year"
162	:activeDates="activeDates"	162	:activeDates="activeDates"
163	prefixClass="your_customized_wrapper_class"	163	prefixClass="your_customized_wrapper_class"
164	:activeClass="activeClass"	164	:activeClass="activeClass"
165	></YearCalendar>	165	></YearCalendar>
166	</v-card>	166	</v-card>
167	</v-flex>	167	</v-flex>
168	</v-layout>	168	</v-layout>
169	</div>	169	</div>
170	<v-layout v-show="showPdfData">	170	<v-layout v-show="showPdfData">
171	<v-container>	171	<v-container>
172	<v-flex xs12 sm12 md8 offset-sm2>	172	<v-flex xs12 sm12 md8 offset-sm2>
173	<v-btn	173	<v-btn
174	color="grey"	174	color="grey"
175	@click="generatePDF2Canvas()"	175	@click="generatePDF2Canvas()"
176	:loading="loadingPdf"	176	:loading="loadingPdf"
177	class="right"	177	class="right"
178	dark	178	dark
179	>	179	>
180	Download	180	Download
181	<v-icon dark right size="20">save_alt</v-icon>	181	<v-icon dark right size="20">save_alt</v-icon>
182	</v-btn>	182	</v-btn>
183	</v-flex>	183	</v-flex>
184	</v-container>	184	</v-container>
185	</v-layout>	185	</v-layout>
186	<v-layout v-show="showPdfData">	186	<v-layout v-show="showPdfData">
187	<v-container>	187	<v-container>
188	<v-layout v-show="showPdfData">	188	<v-layout v-show="showPdfData">
189	<v-flex xs12 sm12 md8 offset-sm2>	189	<v-flex xs12 sm12 md8 offset-sm2>
190	<div ref="printMe">	190	<div ref="printMe">
191	<v-flex xs12 class="pl-3">	191	<v-flex xs12 class="pl-3">
192	<v-layout>	192	<v-layout>
193	<v-flex xs6 sm2 class="pa-0 mb-1">	193	<v-flex xs6 sm2 class="pa-0 mb-1">
194	<h4>	194	<h4>
195	<b>Name</b>	195	<b>Name</b>
196	</h4>	196	</h4>
197	</v-flex>	197	</v-flex>
198	<v-flex sm10 xs6 class="pa-0">	198	<v-flex sm10 xs6 class="pa-0">
199	<h4>: {{ studentData.name }}</h4>	199	<h4>: {{ studentData.name }}</h4>
200	</v-flex>	200	</v-flex>
201	</v-layout>	201	</v-layout>
202	<v-layout>	202	<v-layout>
203	<v-flex xs6 sm2 class="pa-0 mb-1">	203	<v-flex xs6 sm2 class="pa-0 mb-1">
204	<h4>	204	<h4>
205	<b>Type</b>	205	<b>Type</b>
206	</h4>	206	</h4>
207	</v-flex>	207	</v-flex>
208	<v-flex sm10 xs6 class="pa-0 mb-1">	208	<v-flex sm10 xs6 class="pa-0 mb-1">
209	<h4>: Student</h4>	209	<h4>: Student</h4>
210	</v-flex>	210	</v-flex>
211	</v-layout>	211	</v-layout>
212	<v-layout>	212	<v-layout>
213	<v-flex xs6 sm2 class="pa-0 mb-1">	213	<v-flex xs6 sm2 class="pa-0 mb-1">
214	<h4>	214	<h4>
215	<b>Roll No</b>	215	<b>Roll No</b>
216	</h4>	216	</h4>
217	</v-flex>	217	</v-flex>
218	<v-flex sm10 xs6 class="pa-0 mb-1">	218	<v-flex sm10 xs6 class="pa-0 mb-1">
219	<h4>: {{ studentData.rollNo }}</h4>	219	<h4>: {{ studentData.rollNo }}</h4>
220	</v-flex>	220	</v-flex>
221	</v-layout>	221	</v-layout>
222	<v-layout>	222	<v-layout>
223	<v-flex xs6 sm2 class="pa-0 mb-1">	223	<v-flex xs6 sm2 class="pa-0 mb-1">
224	<h4>	224	<h4>
225	<b>Class</b>	225	<b>Class</b>
226	</h4>	226	</h4>
227	</v-flex>	227	</v-flex>
228	<v-flex sm10 xs6 class="pa-0 mb-1">	228	<v-flex sm10 xs6 class="pa-0 mb-1">
229	<h4>: {{ studentData.classId.classNum }}</h4>	229	<h4>: {{ studentData.classId.classNum }}</h4>
230	</v-flex>	230	</v-flex>
231	</v-layout>	231	</v-layout>
232	<v-layout>	232	<v-layout>
233	<v-flex xs6 sm2 class="pa-0 mb-1">	233	<v-flex xs6 sm2 class="pa-0 mb-1">
234	<h4>	234	<h4>
235	<b>Section</b>	235	<b>Section</b>
236	</h4>	236	</h4>
237	</v-flex>	237	</v-flex>
238	<v-flex sm10 xs6 class="pa-0 mb-3">	238	<v-flex sm10 xs6 class="pa-0 mb-3">
239	<h4>: {{ studentData.sectionId.name}}</h4>	239	<h4>: {{ studentData.sectionId.name}}</h4>
240	</v-flex>	240	</v-flex>
241	</v-layout>	241	</v-layout>
242	</v-flex>	242	</v-flex>
243	<v-card flat>	243	<v-card flat>
244	<h3 class="py-2 text-xs-center grey lighten-1 white--text">	244	<h3 class="py-2 text-xs-center grey lighten-1 white--text">
245	Attendence	245	Attendence
246	<span class="ml-4">	246	<span class="ml-4">
247	<v-avatar class="green caption" size="12"></v-avatar>	247	<v-avatar class="green caption" size="12"></v-avatar>
248	<span class="subheading">Present</span>	248	<span class="subheading">Present</span>
249	</span>	249	</span>
250	<span class="ml-4">	250	<span class="ml-4">
251	<v-avatar color="red caption" size="12" class></v-avatar>	251	<v-avatar color="red caption" size="12" class></v-avatar>
252	<span class="subheading">Absent</span>	252	<span class="subheading">Absent</span>
253	</span>	253	</span>
254	</h3>	254	</h3>
255	<YearCalendar	255	<YearCalendar
256	v-model="year"	256	v-model="year"
257	:activeDates="activeDates"	257	:activeDates="activeDates"
258	prefixClass="your_customized_wrapper_class"	258	prefixClass="your_customized_wrapper_class"
259	:activeClass="activeClass"	259	:activeClass="activeClass"
260	></YearCalendar>	260	></YearCalendar>
261	</v-card>	261	</v-card>
262	</div>	262	</div>
263	</v-flex>	263	</v-flex>
264	</v-layout>	264	</v-layout>
265	</v-container>	265	</v-container>
266	</v-layout>	266	</v-layout>
267	<img :src="output" v-show="false"/>	267	<img :src="output" v-show="false"/>
268	<div class="loader" v-if="showLoader">	268	<div class="loader" v-if="showLoader">
269	<v-progress-circular indeterminate color="white"></v-progress-circular>	269	<v-progress-circular indeterminate color="white"></v-progress-circular>
270	</div>	270	</div>
271	</v-container>	271	</v-container>
272	</template>	272	</template>
273		273
274	<script lang="js">	274	<script lang="js">
275	import moment from "moment";	275	import moment from "moment";
276	import http from "@/Services/http.js";	276	import http from "@/Services/http.js";
277	import YearCalendar from "vue-material-year-calendar";	277	import YearCalendar from "vue-material-year-calendar";
278	import jsPDF from 'jspdf';	278	import jsPDF from 'jspdf';
279	// eslint-disable-next-line	279	// eslint-disable-next-line
280	import autoTable from 'jspdf-autotable';	280	import autoTable from 'jspdf-autotable';
281		281
282	export default {	282	export default {
283	components: { YearCalendar },	283	components: { YearCalendar },
284	data() {	284	data() {
285	return {	285	return {
286	showPdfData:false,	286	showPdfData:false,
287	hideData:true,	287	hideData:true,
288	loadingPdf:false,	288	loadingPdf:false,
289	output:null,	289	output:null,
290	studentsList: [],	290	studentsList: [],
291	json_data: [],	291	json_data: [],
292	dialogExport: false,	292	dialogExport: false,
293	startDate: "",	293	startDate: "",
294	endDate: "",	294	endDate: "",
295	menuEndDate: false,	295	menuEndDate: false,
296	menuStartDate: false,	296	menuStartDate: false,
297	showLoader: false,	297	showLoader: false,
298	token: "",	298	token: "",
299	year: new Date().getFullYear(),	299	year: new Date().getFullYear(),
300	activeDates: [],	300	activeDates: [],
301	activeClass: "",	301	activeClass: "",
302	studentData: {}	302	studentData: {}
303	};	303	};
304	},	304	},
305	mounted() {	305	mounted() {
306	this.token = this.$store.state.token;	306	this.token = this.$store.state.token;
307	this.getStudentAttendence();	307	this.getStudentAttendence();
308	this.getStudentData();	308	this.getStudentData();
309	},	309	},
310	methods: {	310	methods: {
311	dates: function(date) {	311	dates: function(date) {
312	return moment(date).format("MMMM DD, YYYY");	312	return moment(date).format("MMMM DD, YYYY");
313	},	313	},
314	getStudentAttendence() {	314	getStudentAttendence() {
315	this.showLoader = true;	315	this.showLoader = true;
316	http()	316	http()
317	.get(	317	.get(
318	"/studentAttendance",	318	"/studentAttendance",
319	{ params: { studentId: this.$route.params.id } },	319	{ params: { studentId: this.$route.params.id } },
320	{	320	{
321	headers: { Authorization: "Bearer " + this.token }	321	headers: { Authorization: "Bearer " + this.token }
322	}	322	}
323	)	323	)
324	.then(response => {	324	.then(response => {
325	this.showLoader = false;	325	this.showLoader = false;
326	let array = [];	326	let array = [];
327	for (let i = 0; i < response.data.data.length; i++) {	327	for (let i = 0; i < response.data.data.length; i++) {
328	if (response.data.data[i].students[0].isPresent == true) {	328	if (response.data.data[i].students[0].isPresent == true) {
329	array.push({	329	array.push({
330	date: response.data.data[i].date,	330	date: response.data.data[i].date,
331	className: "green"	331	className: "green"
332	});	332	});
333	} else if (response.data.data[i].students[0].isPresent == false) {	333	} else if (response.data.data[i].students[0].isPresent == false) {
334	array.push({	334	array.push({
335	date: response.data.data[i].date,	335	date: response.data.data[i].date,
336	className: "red"	336	className: "red"
337	});	337	});
338	}	338	}
339	}	339	}
340	this.activeDates = array;	340	this.activeDates = array;
341	})	341	})
342	.catch(error => {	342	.catch(error => {
343	console.log("err====>", err);	343	console.log("err====>", err);
344	this.showLoader = false;	344	this.showLoader = false;
345	if (error.response.status === 401) {	345	if (error.response.status === 401) {
346	this.$router.replace({ path: "/" });	346	this.$router.replace({ path: "/" });
347	this.$store.dispatch("setToken", null);	347	this.$store.dispatch("setToken", null);
348	this.$store.dispatch("Id", null);	348	this.$store.dispatch("Id", null);
349	}	349	}
350	});	350	});
351	},	351	},
352	getStudentData() {	352	getStudentData() {
353	http()	353	http()
354	.get(	354	.get(
355	"/getParticularStudentDetail",	355	"/getParticularStudentDetail",
356	{ params: { studentId: this.$route.params.id } },	356	{ params: { studentId: this.$route.params.id } },
357	{	357	{
358	headers: { Authorization: "Bearer " + this.token }	358	headers: { Authorization: "Bearer " + this.token }
359	}	359	}
360	)	360	)
361	.then(response => {	361	.then(response => {
362	this.studentData = response.data.data;	362	this.studentData = response.data.data;
363	})	363	})
364	.catch(err => {	364	.catch(err => {
365	console.log("err====>", err);	365	console.log("err====>", err);
366	// this.$router.replace({ path: '/' });	366	// this.$router.replace({ path: '/' });
367	});	367	});
368	},	368	},
369	exportData() {	369	exportData() {
370	http()	370	http()
371	.get(	371	.get(
372	"/studentAttendanceByMonth",	372	"/studentAttendanceByMonth",
373	{	373	{
374	params: {	374	params: {
375	studentId: this.$route.params.id,	375	studentId: this.$route.params.id,
376	startDate: this.startDate,	376	startDate: this.startDate,
377	endDate: this.endDate	377	endDate: this.endDate
378	}	378	}
379	},	379	},
380	{	380	{
381	headers: { Authorization: "Bearer " + this.token }	381	headers: { Authorization: "Bearer " + this.token }
382	}	382	}
383	)	383	)
384	.then(response => {	384	.then(response => {
385	this.json_data = response.data.data;	385	this.json_data = response.data.data;
386	this.dialogExport = true;	386	this.dialogExport = true;
387	})	387	})
388	.catch(err => {	388	.catch(err => {
389	console.log("err====>", err);	389	console.log("err====>", err);
390	// this.$router.replace({ path: '/' });	390	// this.$router.replace({ path: '/' });
391	});	391	});
392	},	392	},
393	exportPdf(){	393	exportPdf(){
394	this.hideData = false;	394	this.hideData = false;
395	this.showPdfData = true	395	this.showPdfData = true
396	},	396	},
397	async generatePDF2Canvas(){	397	async generatePDF2Canvas(){
398	this.loadingPdf = true	398	this.loadingPdf = true
399	const el = this.$refs.printMe;	399	const el = this.$refs.printMe;
400	// add option type to get the image version	400	// add option type to get the image version
401	// if not provided the promise will return	401	// if not provided the promise will return
402	// the canvas.	402	// the canvas.
403	const options = {	403	const options = {
404	type: 'dataURL'	404	type: 'dataURL'
405	}	405	}
406	this.output = await this.$html2canvas(el, options);	406	this.output = await this.$html2canvas(el, options);
407	console.log(this.output);	407	console.log(this.output);
408	if(this.output) {	408	if(this.output) {
409	this.loadingPdf = false	409	this.loadingPdf = false
410	}	410	}
411	let doc = new jsPDF();	411	let doc = new jsPDF();
412	doc.addImage(this.output, 'JPEG', 5, 10, 200, 280);	412	doc.addImage(this.output, 'JPEG', 5, 10, 200, 280);
413	doc.save("export.pdf");	413	doc.save("Attendance.pdf");
414	}	414	}
415	}	415	}
416	};	416	};
417	</script>	417	</script>
418		418
419	<style lang="stylus">	419	<style lang="stylus">
420	.your_customized_wrapper_class {	420	.your_customized_wrapper_class {
421	background-color: #0aa;	421	background-color: #0aa;
422	color: white;	422	color: white;
423		423
424	&.red {	424	&.red {
425	background-color: red;	425	background-color: red;
426	color: white;	426	color: white;
427		427
428	&:after {	428	&:after {
429	background-size: 100% 100%;	429	background-size: 100% 100%;
430	}	430	}
431	}	431	}
432		432
433	&.blue {	433	&.blue {
434	background-color: #0000aa;	434	background-color: #0000aa;
435	color: white;	435	color: white;
436	}	436	}
437		437
438	&.your_customized_classname {	438	&.your_customized_classname {
439	background-color: yellow;	439	background-color: yellow;
440	color: black;	440	color: black;
441	}	441	}
442	}	442	}
443	</style>	443	</style>

src/pages/Authentication/Login.vue

Diff comments View file @37150e7

 <template>
   <v-app id="login">
     <v-toolbar class="fixcolors">
       <v-toolbar-items>
         <img src="/static/logoIntrack.png" height="40" width="140" alt="logo" />
         <!-- <h3 class="white--text my-3 ml-5 logoSchool">School-Management</h3> -->
       </v-toolbar-items>
     </v-toolbar>
     <v-content>
       <v-container fluid fill-height>
         <v-snackbar
           :timeout="timeout"
           :top="y === 'top'"
           :right="x === 'right'"
           :vertical="mode === 'vertical'"
           v-model="snackbar"
           :color="color"
         >{{ text }}</v-snackbar>
         <v-layout align-center justify-center>
           <v-flex xs12 sm10 md6 lg4>
             <v-toolbar class="fixcolors" dark>
               <v-spacer></v-spacer>
               <v-toolbar-title>School Login</v-toolbar-title>
               <v-spacer></v-spacer>
             </v-toolbar>
             <v-card class="elevation-1 pa-1">
               <v-card-text>
                 <v-flex xs12 sm12 md12 lg12>
                   <v-form ref="form" v-model="valid" lazy-validation>
                     <v-text-field
                       v-model="userLogincredentials.email"
                       :rules="nameRules"
                       label="Username"
                       required
                     ></v-text-field>
                     <v-text-field
                       :rules="[rules.required]"
                       v-model="userLogincredentials.password"
                       :append-icon="e1 ? 'visibility_off' : 'visibility'"
                       :append-icon-cb="() => (e1 = !e1)"
                       :type="e1 ? 'password' : 'text'"
                       name="input-10-1"
                       label="Password"
                       @keyup.enter="login"
                       counter
                     ></v-text-field>
                   </v-form>
                   <v-layout row wrap>
                     <v-flex xs6>
                       <!-- <v-checkbox :label="`Remember me`" v-model="remember"></v-checkbox> -->
                     </v-flex>
                     <v-flex xs6>
                       <h5 class="right mt-4">
                         <router-link
                           class="link"
                           to="/forgetpassword"
                           style="border-bottom: 2px solid #aaa;"
                         >Forgot Password</router-link>
                       </h5>
                     </v-flex>
                   </v-layout>
                 </v-flex>
               </v-card-text>
               <v-layout>
                 <v-flex sm12 class="my-3">
                   <v-btn
                     style="margin: auto;display: block;b"
                     class="fixcolors"
                     round
                     dark
                     large
                     @click="login"
                     :loading="loading"
                   >Login</v-btn>
                 </v-flex>
               </v-layout>
               <v-layout></v-layout>
             </v-card>
           </v-flex>
         </v-layout>
       </v-container>
     </v-content>
     <v-footer class="pa-4 fixcolors"></v-footer>
   </v-app>
 </template>
 <script>
 import http from "@/Services/http.js";
 export default {
   data() {
     return {
       snackbar: false,
       y: "top",
       x: "right",
       mode: "",
       timeout: 3000,
       text: "",
       e1: true,
       loading: false,
       remember: false,
       valid: false,
       userLogincredentials: {},
       nameRules: [v => !!v || "Username is required"],
       password: "",
       email: "",
       rules: {
         required: value => !!value || "password is Required."
       }
     };
   },
   methods: {
     login() {
       this.loading = true;
       var userdata = {
         email: this.userLogincredentials.email,
         password: this.userLogincredentials.password,
         role: "ADMIN"
       };
       http()
         .post("/schoolLogin", userdata)
         .then(response => {
           this.$store.dispatch("setToken", response.data.data.token);
           this.$store.dispatch("Id", response.data.data.id);
+          this.$store.dispatch("Role", response.data.data.role);
           this.loading = false;
-          this.$router.push("/dashboard");
+          // console.log("{this.$store.state.state.role}",this.$store.state.role)
+          if (this.$store.state.role === "ADMIN") {
+            this.$router.push("/dashboard");
+          } else if (this.$store.state.role === "SUPERADMIN") {
+            this.$router.push("/school");
+          }
         })
         .catch(error => {
           if (error) {
             this.text = "Server appears to be offline";
             this.snackbar = true;
             this.loading = false;
           }
           if (error.response.data.message) {
             this.text = error.response.data.message;
             this.snackbar = true;
           }
           this.loading = false;
         });
     }
   },
   mounted() {
     if (this.$store.state.isUserLoggedIn == true) {
       this.$router.push("/dashboard");
     }
   },
   computed: {
     color() {
       return this.loading ? "success" : "error";
     }
   }
 };
 </script>
 <style scoped lang="css">
 #login {
   width: 100%;
   position: absolute;
   top: 0;
   left: 0;
   content: "";
   z-index: 0;
 }
 </style>
 <style scoped>
 img {
   position: absolute;
   top: 13px;
   left: 8px;
 }
 .v-btn--large {
   padding: 0px 84px;
 }
 .link {
   text-decoration: none;
 }
 a {
   color: #696969;
 }
 .forget {
   margin-top: 20px;
 }
 .mt-4 {
   margin-top: 21px !important;
 }
 @media screen and (max-width: 600px) {
   .forget {
     margin-top: none;
     margin-left: 18px;
   }
   img {
     left: 10px;
     height: 34px;
     width: 120px;
   }
   .logoSchool {
     font-size: 18px;
     margin-top: 20px !important;
   }
   h5 {
     font-size: 14px !important;
   }
 }
 </style>

src/pages/Mark/viewMark.vue

Diff comments View file @37150e7

 <template>
   <v-app id="pages-dasboard">
     <!-- ****** PROFILE MARK  ****** -->
     <v-container fluid grid-list-md>
       <v-layout>
         <v-flex xs12 sm12>
           <v-btn class="grey" dark @click="print()">
             Print
             <v-icon right dark>print</v-icon>
           </v-btn>
         </v-flex>
       </v-layout>
       <v-flex xs12 sm12 id="printMe">
         <v-layout wrap>
           <v-flex xs12 sm12 md3>
             <v-card class="fixcolors white--text" flat>
               <v-card-actions class="pa-0">
                 <v-spacer></v-spacer>
                 <v-card-title class="pa-2">
                   <h3>Profile</h3>
                 </v-card-title>
                 <v-spacer></v-spacer>
               </v-card-actions>
             </v-card>
             <v-card flat>
               <v-layout
                 wrap
                 v-for="(value, id, index) in filterData"
                 v-if="index == 0"
                 :key="index"
               >
                 <v-flex xs12 style="margin:16px;">
                   <v-layout>
                     <v-flex xs12>
                       <v-avatar
                         size="100px"
                         class="mx-auto"
                         style="margin: auto;display:block;margin-bottom:10px !important"
                       >
                         <img src="/static/icon/user.png" v-if="!value[0].studentId.profilePicUrl" />
                         <img
                           :src="value[0].studentId.profilePicUrl"
                           v-else-if="value[0].studentId.profilePicUrl"
                         />
                       </v-avatar>
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs12 style="text-align:center;">
                       <h3>
                         <b>{{ value[0].studentId.name }}</b>
                       </h3>
                       <p class="grey--text">Student</p>
                     </v-flex>
                   </v-layout>
                   <v-layout
                     style="border: 1px solid lightgrey;padding: 4px;border-top-right-radius: 4px;
                      border-top-left-radius: 4px;"
                   >
                     <v-flex xs6 sm3 class="py-1">
                       <h4>
                         <b>RollNo</b>
                       </h4>
                     </v-flex>
                     <v-flex sm9 xs7 class="py-1">
                       <h4>: {{ value[0].studentId.rollNo }}</h4>
                     </v-flex>
                   </v-layout>
                   <v-layout style="border: 1px solid lightgrey;padding: 4px;">
                     <v-flex xs6 sm3 class="py-1">
                       <h4>
                         <b>Class</b>
                       </h4>
                     </v-flex>
                     <v-flex sm9 xs8 class="py-1">
                       <h4>: {{value[0].classId.classNum }}</h4>
                     </v-flex>
                   </v-layout>
                   <v-layout
                     style="border: 1px solid lightgrey;padding: 4px;border-bottom-right-radius: 4px;
                      border-bottom-left-radius: 4px;"
                   >
                     <v-flex xs6 sm3 class>
                       <h4>
                         <b>Section</b>
                       </h4>
                     </v-flex>
                     <v-flex sm9 xs6 class>
                       <h4>: {{ value[0].sectionId.name}}</h4>
                     </v-flex>
                   </v-layout>
                 </v-flex>
               </v-layout>
+              <v-layout v-if="filterData">
+                <v-flex xs12>
+                  <h5 class="text-xs-center pa-3">No Data Found</h5>
+                </v-flex>
+              </v-layout>
             </v-card>
           </v-flex>
           <!-- ****** TABLE DATA MARK  ****** -->
           <v-flex xs12 sm12 md9>
             <v-card class="fixcolors white--text" flat>
               <v-card-actions class="pa-0">
                 <v-spacer></v-spacer>
                 <v-card-title class="pa-2">
                   <h3>Mark</h3>
                 </v-card-title>
                 <v-spacer></v-spacer>
               </v-card-actions>
             </v-card>
             <v-card
               v-for="(value, id, index) in filterData"
               :key="index"
               flat
               style="border: 1px solid lightgrey;margin-bottom:14px;"
             >
               <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
                     class="info white--text"
                     style="border: 1px solid lightgrey !important;padding:4px;"
                   >
                     <td
                       rowspan="2"
                       style="border: 1px solid lightgrey !important;padding: 10px;"
                     >Subject</td>
                     <td
                       colspan="2"
                       v-for="exam in value[index].studentsMarks"
                       style="border: 1px solid lightgrey !important;padding: 10px;"
                     >{{exam.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
                         class="bg-sky white--text"
                         style="border: 1px solid lightgrey !important;padding: 10px;"
                       >Mark</td>
                       <td
                         class="bg-sky-light white--text"
                         style="border: 1px solid lightgrey !important;padding: 10px;"
                       >Highest Mark</td>
                     </template>
                     <td
                       class="bg-sky white--text"
                       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-card v-if="filterData === []">
+              <v-layout>
+                <v-flex xs12>
+                  <h5 class="text-xs-center pa-3">No Data Found</h5>
+                </v-flex>
+              </v-layout>
+            </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,
     markData: [],
     token: "",
     markDistributions: [],
     markParticularDistributionData: [],
     filterData: [],
     output: null
   }),
   mounted() {
     this.token = this.$store.state.token;
     this.getMarkList();
   },
   methods: {
     getMarkList() {
       this.showLoader = true;
       http()
         .get("/getParticularMark", {
           params: { studentId: this.$route.params.markId },
           headers: { Authorization: "Bearer " + this.token }
         })
         .then(response => {
           let newData = response.data.data;
           for (var i = 0; i < newData.length; i++) {
             newData[i].examination = newData[i].examId._id;
           }
           this.filterData = _.groupBy(newData, ["examination"]);
-          console.log("check filtered data", this.filterData);
           for (let data in this.filterData) {
-            // console.log("this.filterData[data].length", this.filterData[data]);
             for (let item in this.filterData[data]) {
-              // console.log("check", this.filterData[data][item].studentsMarks);
               var totalMarks = 0;
               for (
                 let i = 0;
                 i < this.filterData[data][item].studentsMarks.length;
                 i++
               ) {
-                // console.log(
-                //   "check data",
-                //   this.filterData[data][item].studentsMarks[i]
-                // );
                 totalMarks += this.filterData[data][item].studentsMarks[i]
                   .marksScored;
               }
               this.filterData[data][item].totalMarks = totalMarks;
             }
           }
           // var aray = [];
           // this.markData = response.data.data;
           // for (let i = 0; i < this.markData.length; i++) {
           //   console.log(this.markData[i].examId.examName);
           //   let index = -1;
           //   aray.forEach((dat_, k) => {
           //     if (dat_.category == this.markData[i].examId.examName) {
           //       index = k;
           //     }
           //   });
           //   if (index == -1) {
           //     var obj = {
           //       category: this.markData[i].examId.examName,
           //       extraData: []
           //     };
           //     obj.extraData.push(this.markData[i]);
           //     aray.push(obj);
           //   } else {
-          //     console.log("=o", this.markData[i]);
-          //     //  aray[index].extraData =
           //     aray[index].extraData.push(this.markData[i]);
           //   }
-          //   console.log("aray-", aray);
-          // for (let j = 0; j < this.markData[i].studentsMarks.length; j++) {
-          //   //  console.log("this.studentsMarksSSSSSSSSSSSSS",this.markData[i].studentsMarks[j].marksObtained)
-          //   this.markDistributions = this.markData[i].studentsMarks[
-          //     j
-          //   ].marksObtained;
-          //   for (
-          //     let k = 0;
-          //     k < this.markData[i].studentsMarks[j].marksObtained.length;
-          //     k++
-          //   ) {
-          //     this.markParticularDistributionData.push(
-          //       this.markData[i].studentsMarks[j].marksObtained[k].marksScored
-          //     );
-          //     this.markParticularDistributionData.push(
-          //       this.markData[i].studentsMarks[j].marksObtained[k]
-          //         .markDistributionId.markValue
-          //     );
-          //     // console.log(
-          //     //   "this.markParticularDistributionData",
-          //     //   this.markParticularDistributionData
-          //     // );
-          //   }
-          // }
-          // }
-          // this.markData = aray;
-          // console.log("aray-2", aray);
           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);
           }
         });
     },
     print() {
       // Pass the element id here
       this.$htmlToPaper("printMe");
     }
   }
 };
 </script>
 <style scoped>
 table {
   border-collapse: collapse;
   border: 1px solid #e2e7eb;
 }
-tbody > tr > td,
-.table-bordered {
-  border: 1px solid #ddd;
-}
 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 @37150e7

 <template>
   <v-app id="pages-dasboard">
     <!-- ******  Progress Card Report Table****** -->
     <v-card flat>
       <v-card-actions>
         <v-layout>
           <h4 class="ml-2">Progress Card Report</h4>
         </v-layout>
       </v-card-actions>
     </v-card>
     <v-card flat>
       <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>
               <v-btn
                 @click="getMarkReportList"
                 round
                 dark
                 :loading="loading"
                 class="right mt-3"
               >Get Report</v-btn>
             </v-flex>
           </v-layout>
         </v-flex>
       </v-form>
     </v-card>
     <!-- ****** PROFILE MARK  ****** -->
     <v-container fluid grid-list-md v-show="showReport">
       <v-layout>
         <v-flex xs12 sm12>
           <v-btn class="grey" dark @click="print()">
             Print
             <v-icon right dark>print</v-icon>
           </v-btn>
         </v-flex>
       </v-layout>
       <v-flex xs12 sm12 id="printMe">
-        <!-- <v-container fluid grid-list-md> -->
         <v-layout wrap>
           <v-flex xs12 sm12 md3>
             <v-card class="fixcolors white--text" flat>
               <v-card-actions class="pa-0">
                 <v-spacer></v-spacer>
                 <v-card-title class="pa-2">
                   <h3>Profile</h3>
                 </v-card-title>
                 <v-spacer></v-spacer>
               </v-card-actions>
             </v-card>
             <v-card flat>
               <v-layout
                 wrap
                 v-for="(value, id, index) in filterData"
                 v-if="index == 0"
                 :key="index"
               >
                 <v-flex xs12 style="margin:16px;">
                   <v-layout>
                     <v-flex xs12>
                       <v-avatar
                         size="100px"
                         class="mx-auto"
                         style="margin: auto;display:block;margin-bottom:10px !important"
                       >
                         <img src="/static/icon/user.png" v-if="!value[0].studentId.profilePicUrl" />
                         <img
                           :src="value[0].studentId.profilePicUrl"
                           v-else-if="value[0].studentId.profilePicUrl"
                         />
                       </v-avatar>
                     </v-flex>
                   </v-layout>
                   <v-layout>
                     <v-flex xs12 style="text-align:center;">
                       <h3>
                         <b>{{ value[0].studentId.name }}</b>
                       </h3>
                       <p class="grey--text">Student</p>
                     </v-flex>
                   </v-layout>
                   <v-layout
                     style="border: 1px solid lightgrey;padding: 4px;border-top-right-radius: 4px;
                      border-top-left-radius: 4px;"
                   >
                     <v-flex xs6 sm3 class="py-1">
                       <h4>
                         <b>RollNo</b>
                       </h4>
                     </v-flex>
                     <v-flex sm9 xs7 class="py-1">
                       <h4>: {{ value[0].studentId.rollNo }}</h4>
                     </v-flex>
                   </v-layout>
                   <v-layout style="border: 1px solid lightgrey;padding: 4px;">
                     <v-flex xs6 sm3 class="py-1">
                       <h4>
                         <b>Class</b>
                       </h4>
                     </v-flex>
                     <v-flex sm9 xs8 class="py-1">
                       <h4>: {{value[0].classId.classNum }}</h4>
                     </v-flex>
                   </v-layout>
                   <v-layout
                     style="border: 1px solid lightgrey;padding: 4px;border-bottom-right-radius: 4px;
                      border-bottom-left-radius: 4px;"
                   >
                     <v-flex xs6 sm3 class>
                       <h4>
                         <b>Section</b>
                       </h4>
                     </v-flex>
                     <v-flex sm9 xs6 class>
                       <h4>: {{ value[0].sectionId.name}}</h4>
                     </v-flex>
                   </v-layout>
                 </v-flex>
               </v-layout>
             </v-card>
           </v-flex>
           <!-- ****** TABLE DATA MARK  ****** -->
           <v-flex xs12 sm12 md9>
             <v-card class="fixcolors white--text" flat>
               <v-card-actions class="pa-0">
                 <v-spacer></v-spacer>
                 <v-card-title class="pa-2">
                   <h3>Mark</h3>
                 </v-card-title>
                 <v-spacer></v-spacer>
               </v-card-actions>
             </v-card>
             <v-card
               v-for="(value, id, index) in filterData"
               :key="index"
               flat
               style="border: 1px solid lightgrey;margin-bottom:14px;"
             >
               <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
                     class="info white--text"
                     style="border: 1px solid lightgrey !important;padding:4px;"
                   >
                     <td
                       rowspan="2"
                       style="border: 1px solid lightgrey !important;padding: 10px;"
                     >Subject</td>
                     <td
                       colspan="2"
                       v-for="exam in value[index].studentsMarks"
                       style="border: 1px solid lightgrey !important;padding: 10px;"
                     >{{exam.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
                         class="bg-sky white--text"
                         style="border: 1px solid lightgrey !important;padding: 10px;"
                       >Mark</td>
                       <td
                         class="bg-sky-light white--text"
                         style="border: 1px solid lightgrey !important;padding: 10px;"
                       >Highest Mark</td>
                     </template>
                     <td
                       class="bg-sky white--text"
                       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-container> -->
       </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: 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
   }),
   mounted() {
     this.token = this.$store.state.token;
     this.getClass();
   },
   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;
           // console.log("err====>", err);
         });
     },
     getSections(_id) {
       http()
         .get(
           "/getSectionsList",
           { params: { classId: _id } },
           {
             headers: { Authorization: "Bearer " + this.token }
           }
         )
         .then(response => {
           this.addSection = response.data.data;
         })
         .catch(err => {
           // 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 => {
           let newData = response.data.data;
           for (var i = 0; i < newData.length; i++) {
             newData[i].examination = newData[i].examId._id;
           }
           this.filterData = _.groupBy(newData, ["examination"]);
           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++
               ) {
                 totalMarks += this.filterData[data][item].studentsMarks[i]
                   .marksScored;
               }
               this.filterData[data][item].totalMarks = totalMarks;
             }
           }
           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);
           }
         });
     },
     print() {
       // Pass the element id here
       this.$htmlToPaper("printMe");
     }
   }
 };
 </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;
     overflow: scroll;
   }
 }
 </style> s

src/pages/School/school.vue

Diff comments View file @37150e7

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

src/pages/Section/section.vue

Diff comments View file @37150e7

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

src/router/paths.js

Diff comments View file @37150e7

 export default [{
         path: '*',
         meta: {
             public: true,
         },
         redirect: {
             path: '/404'
         }
     },
     {
         path: '/404',
         meta: {
             public: true,
         },
         name: 'NotFound',
         component: () =>
             import (
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/NotFound/NotFound.vue`
             )
     },
     {
         path: '/500',
         meta: {
             public: true,
         },
         name: 'ServerError',
         component: () =>
             import (
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/NotFound/Error.vue`
             )
     },
     {
         path: '/changepassword',
         meta: {},
         name: 'changepassword',
         props: (route) => ({ type: route.query.type }),
         component: () =>
             import (
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Authentication/changepassword.vue`
             )
     },
     {
         path: '/teachers',
         meta: { breadcrumb: false },
         name: 'teachers',
         component: () =>
             import (
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Teachers/teachers.vue`
             )
     },
     {
         path: '/',
         meta: {
             public: true,
         },
         name: 'Login',
         component: () =>
             import (
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Authentication/Login.vue`
             )
     },
     {
         path: '/forgetpassword',
         meta: {
             public: true,
         },
         name: 'forgetpassword',
         component: () =>
             import (
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Authentication/forgetpassword.vue`
             )
     },
     {
         path: '/students',
         meta: {},
         name: 'Students',
         props: (route) => ({ type: route.query.type }),
         component: () =>
             import (
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Students/students.vue`
             )
     },
     {
         path: '/addclass',
         meta: {},
         name: 'addclass',
         props: (route) => ({ type: route.query.type }),
         component: () =>
             import (
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Class/addclass.vue`
             )
     },
     {
         path: '/section',
         meta: {},
         name: 'section',
         props: (route) => ({ type: route.query.type }),
         component: () =>
             import (
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Section/section.vue`
             )
     },
     {
         path: '/noticeBoard',
         meta: {},
         name: 'NoticeBoard',
         props: (route) => ({ type: route.query.type }),
         component: () =>
             import (
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/NoticeBoard/noticeBoard.vue`
             )
     },
     {
         path: '/news',
         meta: {},
         name: 'news',
         props: (route) => ({ type: route.query.type }),
         component: () =>
             import (
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/News/news.vue`
             )
     },
     // {
     //   path: '/reminder',
     //   meta: { },
     //   name: 'reminder',
     //   props: (route) => ({ type: route.query.type }),
     //   component: () => import(
     //     /* webpackChunkName: "routes" */
     //     /* webpackMode: "lazy-once" */
     //     `@/pages/Reminder/reminder.vue`
     //   )
     // },
     {
         path: '/timeTable',
         meta: {},
         name: 'timeTable',
         props: (route) => ({ type: route.query.type }),
         component: () =>
             import (
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/TimeTable/timeTable.vue`
             )
     },
     {
         path: '/notification',
         meta: {},
         name: 'notification',
         props: (route) => ({ type: route.query.type }),
         component: () =>
             import (
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Notification/notification.vue`
             )
     },
     {
         path: '/parents',
         meta: {},
         name: 'parents',
         props: (route) => ({ type: route.query.type }),
         component: () =>
             import (
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Parent/parents.vue`
             )
     },
     {
         path: '/subject',
         meta: {},
         name: 'subject',
         props: (route) => ({ type: route.query.type }),
         component: () =>
             import (
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Subjects/subjects.vue`
             )
     },
     {
         path: '/dashboard',
         meta: {},
         name: 'Dashboard',
         props: (route) => ({ type: route.query.type }),
         component: () =>
             import (
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Dashboard/dashboard.vue`
             )
     },
     {
         path: '/socialMedia',
         meta: {},
         name: 'SocialMedia',
         props: (route) => ({ type: route.query.type }),
         component: () =>
             import (
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/socialMedia/socialMedia.vue`
             )
     },
     {
         path: '/gallery',
         meta: {},
         name: 'Gallery',
         props: (route) => ({ type: route.query.type }),
         component: () =>
             import (
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Gallery/gallery.vue`
             )
     },
     {
         path: '/event',
         meta: {},
         name: 'Event',
         props: (route) => ({ type: route.query.type }),
         component: () =>
             import (
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Event/event.vue`
             )
     },
     {
         path: '/holiday',
         meta: {},
         name: 'Holiday',
         props: (route) => ({ type: route.query.type }),
         component: () =>
             import (
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Holiday/holiday.vue`
             )
     },
     {
         path: '/user',
         meta: {},
         name: 'User',
         props: (route) => ({ type: route.query.type }),
         component: () =>
             import (
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/User/user.vue`
             )
     },
     {
         path: '/AttendenceStudent',
         meta: {},
         name: 'studentAttendence',
         props: (route) => ({ type: route.query.type }),
         component: () =>
             import (
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Attendence/studentAttendence.vue`
             )
     },
     {
         path: '/AttendenceTeacher',
         meta: {},
         name: 'teacherAttendence',
         props: (route) => ({ type: route.query.type }),
         component: () =>
             import (
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Attendence/teacherAttendence.vue`
             )
     },
     {
         path: '/AttendenceUser',
         meta: {},
         name: 'userAttendence',
         props: (route) => ({ type: route.query.type }),
         component: () =>
             import (
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Attendence/userAttendence.vue`
             )
     },
     {
         path: '/feeTypes',
         meta: {},
         name: 'feeTypes',
         props: (route) => ({ type: route.query.type }),
         component: () =>
             import (
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Account/feeTypes.vue`
             )
     },
     {
         path: '/invoice',
         meta: {},
         name: 'Invoice',
         props: (route) => ({ type: route.query.type }),
         component: () =>
             import (
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Account/invoice.vue`
             )
     },
     {
         path: '/paymentHistory',
         meta: {},
         name: 'paymentHistory',
         props: (route) => ({ type: route.query.type }),
         component: () =>
             import (
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Account/paymentHistory.vue`
             )
     },
     {
         path: '/expense',
         meta: {},
         name: 'Expense',
         props: (route) => ({ type: route.query.type }),
         component: () =>
             import (
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Account/expense.vue`
             )
     },
     {
         path: '/income',
         meta: {},
         name: 'Income',
         props: (route) => ({ type: route.query.type }),
         component: () =>
             import (
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Account/income.vue`
             )
     },
     {
         path: '/libraryMember',
         meta: {},
         name: 'libraryMember',
         props: (route) => ({ type: route.query.type }),
         component: () =>
             import (
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Library/member.vue`
             )
     },
     {
         path: '/books',
         meta: {},
         name: 'Books',
         props: (route) => ({ type: route.query.type }),
         component: () =>
             import (
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Library/books.vue`
             )
     },
     {
         path: '/issue',
         meta: {},
         name: 'Issue',
         props: (route) => ({ type: route.query.type }),
         component: () =>
             import (
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Library/issue.vue`
             )
     },
     {
         path: '/e-books',
         meta: {},
         name: 'eBooks',
         props: (route) => ({ type: route.query.type }),
         component: () =>
             import (
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Library/eBook.vue`
             )
     },
     {
         path: '/invoiceId/:invoiceid',
         meta: {},
         name: 'EditInvoice',
         // props: (route) => ({ type: route.query.type }),
         component: () =>
             import (
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Account/editInvoice.vue`
             )
     },
     {
         path: '/StudentsAttendence/:id',
         meta: {},
         name: 'ViewStudentsAttendence',
         props: (route) => ({ type: route.query.type }),
         component: () =>
             import (
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Attendence/viewStudentsAttendence.vue`
             )
     },
     {
         path: '/viewInvoice/:viewInvoiceId',
         meta: {},
         name: 'ViewInvoice',
         props: (route) => ({ type: route.query.type }),
         component: () =>
             import (
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Account/viewInvoice.vue`
             )
     },
     {
         path: '/exam',
         meta: {},
         name: 'Exam',
         props: (route) => ({ type: route.query.type }),
         component: () =>
             import (
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Exam/exam.vue`
             )
     },
     {
         path: '/grade',
         meta: {},
         name: 'Grade',
         props: (route) => ({ type: route.query.type }),
         component: () =>
             import (
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Exam/grade.vue`
             )
     },
     {
         path: '/examSchedule',
         meta: {},
         name: 'ExamSchedule',
         props: (route) => ({ type: route.query.type }),
         component: () =>
             import (
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Exam/examSchedule.vue`
             )
     },
     {
         path: '/mark',
         meta: {},
         name: 'Mark',
         props: (route) => ({ type: route.query.type }),
         component: () =>
             import (
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Mark/mark.vue`
             )
     },
     {
         path: '/viewMark/:markId',
         meta: {},
         name: 'viewMark',
         props: (route) => ({ type: route.query.type }),
         component: () =>
             import (
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Mark/viewMark.vue`
             )
     },
     {
         path: '/markDistribution',
         meta: {},
         name: 'markDistribution',
         props: (route) => ({ type: route.query.type }),
         component: () =>
             import (
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Mark/markDistribution.vue`
             )
     },
     {
         path: '/promotion',
         meta: {},
         name: 'Promotion',
         props: (route) => ({ type: route.query.type }),
         component: () =>
             import (
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Mark/promotion.vue`
             )
     },
     {
         path: '/academicYear',
         meta: {},
         name: 'academicYear',
         props: (route) => ({ type: route.query.type }),
         component: () =>
             import (
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Administrator/academicYear.vue`
             )
     },
     {
         path: '/systemAdmin',
         meta: {},
         name: 'systemAdmin',
         props: (route) => ({ type: route.query.type }),
         component: () =>
             import (
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Administrator/systemAdmin.vue`
             )
     },
     {
         path: '/resetPassword',
         meta: {},
         name: 'resetPassword',
         props: (route) => ({ type: route.query.type }),
         component: () =>
             import (
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Administrator/resetPassword.vue`
             )
     },
     {
         path: '/role',
         meta: {},
         name: 'Role',
         props: (route) => ({ type: route.query.type }),
         component: () =>
             import (
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Administrator/role.vue`
             )
     },
     {
         path: '/studentReport',
         meta: {},
         name: 'studentReport',
         props: (route) => ({ type: route.query.type }),
         component: () =>
             import (
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Report/studentReport.vue`
             )
     },
     {
         path: '/progressCardReport',
         meta: {},
         name: 'progressCardReport',
         props: (route) => ({ type: route.query.type }),
         component: () =>
             import (
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/Report/progressCardReport.vue`
             )
     },
     {
         path: '/generalSetting',
         meta: {},
         name: 'generalSetting',
         props: (route) => ({ type: route.query.type }),
         component: () =>
             import (
                 /* webpackChunkName: "routes" */
                 /* webpackMode: "lazy-once" */
                 `@/pages/generalSetting/generalSetting.vue`
             )
+    },
+    {
+        path: '/school',
+        meta: {},
+        name: 'School',
+        props: (route) => ({ type: route.query.type }),
+        component: () =>
+            import (
+                /* webpackChunkName: "routes" */
+                /* webpackMode: "lazy-once" */
+                `@/pages/School/school.vue`
+            )
     }
 ];

src/store/store.js

Diff comments View file @37150e7

 import Vue from 'vue'
 import Vuex from 'vuex'
 import createPersistedState from 'vuex-persistedstate'
 Vue.use(Vuex)
 export default new Vuex.Store({
-    strict:true,
+    strict: true,
-    plugins:[
+    plugins: [
         createPersistedState()
     ],
     state: {
         token: null,
         data: null,
         isUserLoggedIn: false,
         id: null,
+        role: null
     },
     // serve as the one and only way to change the state of the data in the state object
     mutations: {
-        setToken (state, token) {
+        setToken(state, token) {
             state.token = token
-            //state.isUserLoggedIn = !!(token)
+                //state.isUserLoggedIn = !!(token)
-        if (token != null) {
+            if (token != null) {
-            state.isUserLoggedIn = true
+                state.isUserLoggedIn = true
-           } else {
+            } else {
-            state.isUserLoggedIn = false
+                state.isUserLoggedIn = false
-        }
+            }
         },
-        setUser (state, data) {
+        setUser(state, data) {
             state.data = data
         },
-        Id (state, id) {
+        Id(state, id) {
-              state.id = id
+            state.id = id
         },
-    },
+        Role(state, role) {
+            state.role = role
+        }
+    },
     //Action methods are referred to as being "dispatched"
     actions: {
-        setToken ({commit}, token) {
+        setToken({ commit }, token) {
             commit('setToken', token)
         },
-        setUser ({commit}, data) {
+        setUser({ commit }, data) {
             commit('setUser', data)
         },
-        Id ({commit}, id) {
+        Id({ commit }, id) {
             commit('Id', id)
+        },
+        Role({ commit }, role) {
+            commit('Role', role)
         }
     }
 })