viithiisys / School-Management-dashboard

Browse Code »

Commit f5329b707cdfc7d36a22f6648739804d946b1dcf

Authored by Amber Dev 2020-08-13 02:00:42 -0400

1 parent dcbf19cba4

Exists in master and in 2 other branches

added form reset to announcement

Showing 6 changed files with 9 additions and 7 deletions Show diff stats

index.html

Diff comments View file @f5329b7

1	<!DOCTYPE html>	1	<!DOCTYPE html>
2	<html>	2	<html>
3		3
4	<head>	4	<head>
5	<meta charset="utf-8">	5	<meta charset="utf-8">
6	<meta name="viewport" content="width=device-width,initial-scale=1.0">	6	<meta name="viewport" content="width=device-width,initial-scale=1.0">
7	<!-- <link href="https://fonts.googleapis.com/css?family=Nunito,700%7CMaterial+Icons" rel="stylesheet"> -->	7	<!-- <link href="https://fonts.googleapis.com/css?family=Nunito,700%7CMaterial+Icons" rel="stylesheet"> -->
8	<!-- <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500i,800\|Material+Icons&display=swap" rel="stylesheet"> -->	8	<!-- <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500i,800\|Material+Icons&display=swap" rel="stylesheet"> -->
9	<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,700,800\|Material+Icons&display=swap" rel="stylesheet">	9	<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,700,800\|Material+Icons&display=swap" rel="stylesheet">
10	<title>School Management</title>	10	<title>School Management</title>
11	<link rel="shortcut icon" href="/static/logo.png" type="image/x-icon">	11	<link rel="shortcut icon" href="/static/logo.png" type="image/x-icon">
12	<meta name="description" content="School Management">	12	<meta name="description" content="School Management">
13	<script src='https://meet.intrack.in/external_api.js'></script>	13	<script src='https://meet.intrack.in/external_api.js'></script>
14	<link href="./static/css/custom.css" rel="stylesheet" />	14	<link href="./static/css/custom.css" rel="stylesheet" />
15	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">	15	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
16	<!-- <style>	16	<!-- <style>
17	[v-cloak] {	17	[v-cloak] {
18	display: none;	18	display: none;
19	}	19	}
20	</style> -->	20	</style> -->
21	</head>	21	</head>
22		22
23	<body>	23	<body >
24	<div id="app">	24	<div id="app">
25	</div>	25	</div>
26	<!-- built files will be auto injected -->	26	<!-- built files will be auto injected -->
27	<!-- Global site tag (gtag.js) - Google Analytics -->	27	<!-- Global site tag (gtag.js) - Google Analytics -->
28	<!-- <script async src="https://www.googletagmanager.com/gtag/js?id=UA-3881136-11"></script> -->	28	<!-- <script async src="https://www.googletagmanager.com/gtag/js?id=UA-3881136-11"></script> -->
29	<!-- <script>	29	<!-- <script>
30	window.dataLayer = window.dataLayer \|\| [];	30	window.dataLayer = window.dataLayer \|\| [];
31		31
32	function gtag() {	32	function gtag() {
33	dataLayer.push(arguments);	33	dataLayer.push(arguments);
34	}	34	}
35	gtag('js', new Date());	35	gtag('js', new Date());
36	gtag('config', 'UA-3881136-11');	36	gtag('config', 'UA-3881136-11');
37	</script> -->	37	</script> -->
38	</body>	38	</body>
39		39
40	</html>	40	</html>

src/App.vue

Diff comments View file @f5329b7

1	<template>	1	<template>
2	<div id="appRoot">	2	<div id="appRoot">
3	<template v-if="!$route.meta.public">	3	<template v-if="!$route.meta.public">
4	<!-- Go to top -->	4	<!-- Go to top -->
5	<v-app id="inspire" class="app">	5	<v-app id="inspire" class="app">
6	<app-drawer class="app--drawer"></app-drawer>	6	<app-drawer class="app--drawer"></app-drawer>
7	<v-content>	7	<v-content >
8	<div class="page-wrapper">	8	<div class="page-wrapper">
9	<!-- Header toolbar with Seacrh -->	9	<!-- Header toolbar with Seacrh -->
10	<app-toolbar class="app--toolbar"></app-toolbar>	10	<app-toolbar class="app--toolbar" ></app-toolbar>
11	<router-view :key="$route.fullPath"></router-view>	11	<router-view :key="$route.fullPath"></router-view>
12	</div>	12	</div>
13	<!-- App Footer -->	13	<!-- App Footer -->
14	</v-content>	14	</v-content>
15	<!-- theme setting -->	15	<!-- theme setting -->
16	<!-- <v-btn small fab dark falt fixed top="top" right="right" class="setting-fab" color="red" @click="openThemeSettings">	16	<!-- <v-btn small fab dark falt fixed top="top" right="right" class="setting-fab" color="red" @click="openThemeSettings">
17	<v-icon>settings</v-icon>	17	<v-icon>settings</v-icon>
18	</v-btn>	18	</v-btn>
19	<v-navigation-drawer	19	<v-navigation-drawer
20	class="setting-drawer"	20	class="setting-drawer"
21	temporary	21	temporary
22	right	22	right
23	v-model="rightDrawer"	23	v-model="rightDrawer"
24	hide-overlay	24	hide-overlay
25	fixed	25	fixed
26	>	26	>
27	<theme-settings></theme-settings>	27	<theme-settings></theme-settings>
28	</v-navigation-drawer>-->	28	</v-navigation-drawer>-->
29	</v-app>	29	</v-app>
30	</template>	30	</template>
31	<template v-else>	31	<template v-else>
32	<transition>	32	<transition>
33	<keep-alive>	33	<keep-alive>
34	<router-view></router-view>	34	<router-view></router-view>
35	</keep-alive>	35	</keep-alive>
36	</transition>	36	</transition>
37	</template>	37	</template>
38	<v-snackbar :timeout="3000" bottom right :color="snackbar.color" v-model="snackbar.show">	38	<v-snackbar :timeout="3000" bottom right :color="snackbar.color" v-model="snackbar.show">
39	{{ snackbar.text }}	39	{{ snackbar.text }}
40	<v-btn dark flat @click.native="snackbar.show = false" icon>	40	<v-btn dark flat @click.native="snackbar.show = false" icon>
41	<v-icon>close</v-icon>	41	<v-icon>close</v-icon>
42	</v-btn>	42	</v-btn>
43	</v-snackbar>	43	</v-snackbar>
44	</div>	44	</div>
45	</template>	45	</template>
46	<script>	46	<script>
47	import AppDrawer from "@/components/pageHeader/AppDrawer";	47	import AppDrawer from "@/components/pageHeader/AppDrawer";
48	import AppToolbar from "@/components/pageHeader/AppToolbar";	48	import AppToolbar from "@/components/pageHeader/AppToolbar";
49	import menu from "@/api/menu";	49	import menu from "@/api/menu";
50	import AppEvents from "./event";	50	import AppEvents from "./event";
51	import ThemeSettings from "@/components/ThemeSettings";	51	import ThemeSettings from "@/components/ThemeSettings";
52	// import { FunctionalCalendar } from "vue-functional-calendar";	52	// import { FunctionalCalendar } from "vue-functional-calendar";
53		53
54	export default {	54	export default {
55	components: {	55	components: {
56	AppDrawer,	56	AppDrawer,
57	AppToolbar,	57	AppToolbar,
58	ThemeSettings	58	ThemeSettings
59	// FunctionalCalendar	59	// FunctionalCalendar
60	},	60	},
61	data: () => ({	61	data: () => ({
62	expanded: true,	62	expanded: true,
63	rightDrawer: false,	63	rightDrawer: false,
64	snackbar: {	64	snackbar: {
65	show: false,	65	show: false,
66	text: "",	66	text: "",
67	color: ""	67	color: ""
68	}	68	}
69	}),	69	}),
70		70
71	computed: {},	71	computed: {},
72		72
73	created() {	73	created() {
74	AppEvents.forEach(item => {	74	AppEvents.forEach(item => {
75	this.$on(item.name, item.callback);	75	this.$on(item.name, item.callback);
76	});	76	});
77	window.getApp = this;	77	window.getApp = this;
78	},	78	},
79	methods: {	79	methods: {
80	openThemeSettings() {	80	openThemeSettings() {
81	this.$vuetify.goTo(0);	81	this.$vuetify.goTo(0);
82	this.rightDrawer = !this.rightDrawer;	82	this.rightDrawer = !this.rightDrawer;
83	}	83	}
84	}	84	}
85	};	85	};
86	</script>	86	</script>
87		87
88		88
89	<style lang="stylus" scoped>	89	<style lang="stylus" scoped>
90	.setting-fab {	90	.setting-fab {
91	top: 50% !important;	91	top: 50% !important;
92	right: 0;	92	right: 0;
93	border-radius: 0;	93	border-radius: 0;
94	}	94	}
95		95
96	.page-wrapper {	96	.page-wrapper {
97	min-height: calc(1200px - 64px - 50px - 81px);	97	min-height: calc(1200px - 64px - 50px - 81px);
98	}	98	}
99	</style>	99	</style>
100	<style>	100	<style>
101	.application {	101	.application {
102	background-color: white !important;	102	background-color: white !important;
103	font-family: "Poppins", sans-serif;	103	font-family: "Poppins", sans-serif;
104	-webkit-font-smoothing: antialiased;	104	-webkit-font-smoothing: antialiased;
105	-moz-osx-font-smoothing: grayscale;	105	-moz-osx-font-smoothing: grayscale;
106	scroll-behavior: smooth;	106	scroll-behavior: smooth;
107	}	107	}
108	</style>	108	</style>
109		109

src/components/pageHeader/AppDrawer.vue

Diff comments View file @f5329b7

 <template>
   <v-navigation-drawer
     id="appDrawer"
     :mini-variant.sync="mini"
     :dark="$vuetify.dark"
     app
     fixed
     v-model="drawer"
     hide-overlay
     width="260"
     class="white--text side-bar-color"
+    style='height: 100%;'
   >
     <!-- <vue-perfect-scrollbar
       class="drawer-menu--scroll side-bar-color mt-3"
       :settings="scrollSettings"
     >-->
     <v-toolbar class="white" flat>
       <img
         v-bind:src="computeLogo"
         height="40"
         width="130"
         class="imgLogo mb-3 mt-3"
         alt="logo"
         style="margin: auto;
       display: block;"
       />
     </v-toolbar>
     <v-list dense dark>
       <template v-for="(item, i) in menus" v-if="role === 'ADMIN'">
         <!-- {{menus}} -->
         <!--group with subitems-->
         <v-list-group v-if="item.items" :key="item.name" :group="item.group" no-action>
           <v-list-tile slot="activator" ripple="ripple">
             <v-list-tile-action v-if="item.icon">
               <img :src="item.icon" width="22" 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.name"
           :to="!item.href ? { name: item.name } : null"
           :href="item.href"
         >
           <!-- <a :href="item.path"> -->
           <v-list-tile-action v-if="item.icon">
             <img :src="item.icon" width="22" alt="icons" />
           </v-list-tile-action>
           <v-list-tile-content class="pt-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>
       <template v-for="(item, i) in menuAccount" v-if="role === 'ACCOUNTANT'">
         <!-- {{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">
               <img :src="item.icon" width="22" 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.name"
           :to="!item.href ? { name: item.name } : null"
           :href="item.href"
         >
           <!-- <a :href="item.path"> -->
           <v-list-tile-action v-if="item.icon">
             <img :src="item.icon" width="22" alt="icons" />
           </v-list-tile-action>
           <v-list-tile-content class="pt-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>
       <template v-for="(item, i) in menuLibrarian" v-if="role === 'LIBRARIAN'">
         <!-- {{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">
               <img :src="item.icon" width="22" 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.name"
           :to="!item.href ? { name: item.name } : null"
           :href="item.href"
         >
           <!-- <a :href="item.path"> -->
           <v-list-tile-action v-if="item.icon">
             <img :src="item.icon" width="22" alt="icons" />
           </v-list-tile-action>
           <v-list-tile-content class="pt-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>
       <template v-for="(item, i) in menuSchool" v-if="schoolRole === 'SUPERADMIN'">
         <!-- {{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">
               <img :src="item.icon" width="22" 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.name"
           :to="!item.href ? { name: item.name } : null"
           :href="item.href"
         >
           <!-- <a :href="item.path"> -->
           <v-list-tile-action v-if="item.icon">
             <img :src="item.icon" width="22" alt="icons" />
           </v-list-tile-action>
           <v-list-tile-content class="pt-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>
       <!-- NAVIGATION DRAWER IF ROLE IS TEACHER -->
       <template v-for="(item, i) in menuTeacher" v-if="role === 'TEACHER'">
         <!-- {{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">
               <img :src="item.icon" width="22" 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.name"
           :to="!item.href ? { name: item.name } : null"
           :href="item.href"
         >
           <!-- <a :href="item.path"> -->
           <v-list-tile-action v-if="item.icon">
             <img :src="item.icon" width="22" alt="icons" />
           </v-list-tile-action>
           <v-list-tile-content class="pt-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>
       <!-- NAVIGATION DRAWER IF ROLE IS PARENT -->
       <template v-for="(item, i) in menuParent" v-if="role === 'PARENT'">
         <!-- {{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">
               <img :src="item.icon" width="22" 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.name"
           :to="!item.href ? { name: item.name } : null"
           :href="item.href"
         >
           <!-- <a :href="item.path"> -->
           <v-list-tile-action v-if="item.icon">
             <img :src="item.icon" width="22" alt="icons" />
           </v-list-tile-action>
           <v-list-tile-action v-if="item.Vicon">
             <div style="position: relative; top: 3px;">
               <v-icon color="white" size="25">{{item.Vicon}}</v-icon>
             </div>
           </v-list-tile-action>
           <v-list-tile-content class="pt-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: [],
     menuSchool: [],
     menuTeacher: [],
     menuAccount: [],
     menuLibrarian: [],
     menuParent: [],
     schoolRole: "",
     role: "",
     scrollSettings: {
       maxScrollbarLength: 160
     }
   }),
   computed: {
     computeGroupActive() {
       return true;
     },
     computeLogo() {
       return "/static/icon.png";
     },
     sideToolbarColor() {
       return this.$vuetify.options.extra.sideNav;
     }
   },
   created() {
     this.schoolRole = this.$store.state.schoolRole;
     this.role = this.$store.state.role;
     this.menus = menu.adminMenu;
     this.menuSchool = menu.schoolMenu;
     this.menuTeacher = menu.teacherMenu;
     this.menuAccount = menu.accountMenu;
     this.menuLibrarian = menu.libraryMenu;
     this.menuParent = menu.parentMenu;
     // console.log("this.$route.name", this.$route.name);
     // if (this.$route.name === "School") {
     //   localStorage.setItem("SchoolName", this.$route.name);
     // }
     // if (this.$route.name === "Dashboard") {
     //   localStorage.setItem("AdminName", this.$route.name);
     // }
     // console.log("SN", localStorage.getItem("SchoolName"));
     // if (localStorage.getItem("SchoolName") === "School") {
     // if (this.$store.state.schoolRole === "SUPERADMIN") {
     //   console.log("rolA", this.$store.state.schoolRole);
     // if (this.$store.state.schoolRole === "SUPERADMIN") {
     // }
     //   console.log("this.menus", this.menus);
     // }
     // // }
     // // console.log("AN", localStorage.getItem("AdminName"));
     // // if (localStorage.getItem("AdminName") === "Dashboard") {
     // if (this.$store.state.role === "ADMIN") {
     //   console.log("role", this.$store.state.role);
     // else if (this.$store.state.role === "ADMIN") {
     // }
     //   // }
     // }
     // else if (this.$store.state.role === "LIBRARIAN") {
     //   this.menus = menu.libraryMenu;
     // } else if (this.$store.state.role === "ACCOUNTANT") {
     //   this.menus = menu.accountMenu;
     // }
     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}` };
     }
   },
   mounted() {
     if (this.$store.state.role === "ADMIN") {
       this.token = this.$store.state.token;
     }
     if (this.$store.state.schoolRole === "SUPERADMIN") {
       this.token = this.$store.schoolToken;
     }
     if (this.$store.state.role === "TEACHER") {
       this.token = this.$store.state.token;
     }
     if (this.$store.state.role === "ACCOUNTANT") {
       this.token = this.$store.state.token;
     }
     if (this.$store.state.role === "LIBRARIAN") {
       this.token = this.$store.state.token;
     }
     if (this.$store.state.role === "PARENT") {
       this.token = this.$store.state.token;
     }
   }
 };
 </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;
 }
 .v-list--dense .v-list__tile:not(.v-list__tile--avatar) {
   height: 54px;
   font-size: 17px;
 }
 .v-list__tile__action {
   min-width: 36px;
 }
 // .theme--light .v-icon, .application .theme--light.v-icon {
 // color: #f1f1f1;
 // }
 .ps>.ps__scrollbar-y-rail>.ps__scrollbar-y {
   background-color: #f5f5f5;
   background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.44, rgb(122, 153, 217)), color-stop(0.72, rgb(73, 125, 189)), color-stop(0.86, rgb(28, 58, 148)));
   width: 8px !important;
 }
 .ps>.ps__scrollbar-y-rail {
   width: 0px !important;
 }
 .ps:hover > .ps__scrollbar-y-rail:hover {
   background-color: #5f2171 !important;
   opacity: 0.9;
 }
 .ps > .ps__scrollbar-y-rail:hover > .ps__scrollbar-y {
   width: 8px !important;
   background-color: #f5f5f5;
   background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.44, rgb(122, 153, 217)), color-stop(0.72, rgb(73, 125, 189)), color-stop(0.86, rgb(28, 58, 148)));
 }
 .ps:hover > .ps__scrollbar-y-rail:hover > .ps__scrollbar-y {
   // background-color: #5f2171 !important;
   width: 8px !important;
   background-color: #f5f5f5;
   background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.44, rgb(122, 153, 217)), color-stop(0.72, rgb(73, 125, 189)), color-stop(0.86, rgb(28, 58, 148)));
 }
 .v-list__tile--active {
   color: #71d9ea !important;
 }
 .my-1 {
   text-align: left !important;
 }
 .title {
   line-height: 2 !important;
 }
 // .v-list__tile--hover {
 // color: white !important;
 // background: red !important;
 // }
 .v-list .v-list__tile--link:hover, .v-list .v-list__tile--highlighted, .v-list .v-list__group__header:hover, .v-list .v-list__group--active:before, .v-list .v-list__group--active:after {
   background: #7f62f8 !important;
   color: #71d9ea !important;
   box-shadow: 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 1px 8px 0 rgba(0, 0, 0, 0.12) !important;
   // border-radius: 12px !important;
 }
 @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;
 }
 .side-bar-color {
   background: #827bfa !important;
   /* border-top-right-radius: 74px !important; */
 }
 .v-navigation-drawer--fixed {
   position: absolute !important;
   min-height: calc(2000px - 64px - 50px - 81px) !important;
   /* max-height: inherit !important; */
 }
 .hover:hover {
   color: red !important;
   background: red !important;
 }
 </style>

src/pages/Annoucement/annoucement.vue

Diff comments View file @f5329b7

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

src/pages/Attendence/studentAttendence.vue

Diff comments View file @f5329b7

 <template>
   <v-container fluid class="body-color">
     <v-snackbar
       :timeout="timeout"
       :top="y === 'top'"
       :right="x === 'right'"
       :vertical="mode === 'vertical'"
       v-model="snackbar"
       color="success"
     >{{ text }}</v-snackbar>
     <!-- ****** ATTENDENCE STUDENTS TABLE ****** -->
     <!-- <download-csv :data="json_data">
             <v-btn>Download Data</v-btn>
     </download-csv>-->
     <v-toolbar color="transparent" flat>
       <v-btn
         fab
         dark
         class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
         small
         @click="addStudentAttendenceDialog = true"
       >
         <v-icon dark>add</v-icon>
       </v-btn>
       <v-btn
         v-if="role != 'ADMIN' && schoolRole != 'SCHOOLADMIN' "
         round
         class="open-dialog-button hidden-sm-only hidden-xs-only"
         dark
         @click="addStudentAttendenceDialog = true"
       >
         <v-icon class="white--text pr-1" size="20">add</v-icon>Add Student Attendence
       </v-btn>
       <v-spacer></v-spacer>
       <v-flex xs12 sm4 md2>
         <v-select
           small
           :items="addclass"
           label="Select Class"
           v-model="getAttendence.classId"
           item-text="classNum"
           item-value="_id"
           name="Select Class"
           @change="getSection(getAttendence.classId)"
           class="px-2"
           required
         ></v-select>
       </v-flex>
       <v-flex xs12 sm4 md2>
         <v-select
           small
           :items="addSection"
           label="Select Section"
           v-model="getAttendence.sectionId"
           item-text="name"
           item-value="_id"
           name="Select Section"
           @change="getStudents(getAttendence.sectionId)"
           class="px-2"
           required
         ></v-select>
       </v-flex>
       <v-card-title class="body-1" v-show="show">
         <v-btn icon large flat @click="displaySearch">
           <v-avatar size="27">
             <img src="/static/icon/search.png" alt="icon" />
           </v-avatar>
         </v-btn>
       </v-card-title>
       <v-flex xs8 sm8 md3 lg2 v-if="showSearch">
         <v-layout>
           <v-text-field autofocus v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>
           <v-icon @click="closeSearch" color="error">close</v-icon>
         </v-layout>
       </v-flex>
     </v-toolbar>
     <v-data-table
       :headers="headers"
       :items="studentsData"
       :pagination.sync="pagination"
       :search="search"
     >
       <template slot="items" slot-scope="props">
         <tr class="tr">
           <td class="td td-row">{{ props.index + 1}}</td>
           <td class="text-xs-center td td-row">
             <v-avatar size="40">
               <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
               <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
             </v-avatar>
           </td>
           <td class="text-xs-center td td-row">{{ props.item.name}}</td>
           <td class="text-xs-center td td-row">{{ props.item.fatherCellNo}}</td>
           <td class="text-xs-center td td-row">{{ props.item.email }}</td>
           <td class="text-xs-center td td-row">
             <router-link :to="{ name:'View Students Attendence',params: { id:props.item._id } }">
               <v-tooltip top>
                 <img
                   slot="activator"
                   style="cursor:pointer; width:20px; height:25px; "
                   class="mr-3"
                   src="/static/icon/view.png"
                 />
                 <span>View</span>
               </v-tooltip>
             </router-link>
           </td>
         </tr>
       </template>
       <v-alert
         slot="no-results"
         :value="true"
         color="error"
         icon="warning"
       >Your search for "{{ search }}" found no results.</v-alert>
     </v-data-table>
     <!-- ****** Add Students Attendece****** -->
     <v-dialog v-model="addStudentAttendenceDialog" width="1600">
       <v-card flat class="pa-2">
         <v-layout>
           <v-flex xs12>
             <label class="title text-xs-center">Add Student Attendence</label>
-            <v-icon size="24" class="right" @click="addStudentAttendenceDialog = false">cancel</v-icon>
+            <v-icon size="24" class="right" @click="$refs.form.reset();addStudentAttendenceDialog = false">cancel</v-icon>
           </v-flex>
         </v-layout>
         <v-flex xs12 class="mt-4">
           <v-form ref="form" v-model="valid" lazy-validation>
             <v-flex xs12 sm12 lg12>
               <v-layout wrap>
                 <v-flex xs6 sm6 lg3 md4>
                   <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="addclass"
                         item-text="classNum"
                         item-value="_id"
                         :rules="classRules"
                         @change="getSection(getReport.classId)"
                         required
                       ></v-select>
                     </v-flex>
                   </v-layout>
                 </v-flex>
                 <v-flex xs6 sm6 lg3 md8>
                   <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"
                         :rules="sectionRules"
                         required
                       ></v-select>
                     </v-flex>
                   </v-layout>
                 </v-flex>
                 <v-flex xs6 sm6 lg3 md4>
                   <v-menu
                     ref="menu"
                     :close-on-content-click="false"
                     v-model="menu"
                     :nudge-right="40"
                     lazy
                     transition="scale-transition"
                     offset-y
                     full-width
                     min-width="290px"
                   >
                     <v-text-field
                       slot="activator"
                       v-model="date"
                       label="Select Date"
                       append-icon="event"
                       :rules="dataValid"
                       readonly
                     ></v-text-field>
                     <v-date-picker
                       ref="picker"
                       v-model="date"
                       :max="new Date().toISOString().substr(0, 10)"
                       min="1950-01-01"
                       @change="save"
                     ></v-date-picker>
                   </v-menu>
                 </v-flex>
                 <v-flex xs6 sm6 lg9 md8>
                   <v-btn round dark class="add-button" @click="showTable">Attendence</v-btn>
                 </v-flex>
               </v-layout>
             </v-flex>
           </v-form>
         </v-flex>
         <v-flex xs12 v-show="attendeceTable" class>
           <v-data-table
             :headers="headers"
             :items="studentsData"
             :pagination.sync="pagination"
             :search="search"
           >
             <template slot="items" slot-scope="props">
               <tr class="tr">
                 <td class="td td-row">{{ props.index + 1}}</td>
                 <td class="text-xs-center td td-row">
                   <v-avatar size="40">
                     <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
                     <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
                   </v-avatar>
                 </td>
                 <td class="text-xs-center td td-row">{{ props.item.name}}</td>
                 <td class="text-xs-center td td-row">{{ props.item.fatherCellNo }}</td>
                 <td class="text-xs-center td td-row">{{ props.item.email }}</td>
                 <td class="text-xs-center td td-row">
                   <v-radio-group v-model="props.item.attendence" :mandatory="false" row>
                     <v-radio
                       v-for="attendences in attendenceType"
                       :key="attendences.value"
                       :label="`${attendences.label}`"
                       :value="attendences.value"
                     ></v-radio>
                   </v-radio-group>
                 </td>
               </tr>
             </template>
           </v-data-table>
           <v-flex xs12>
             <v-card-actions>
               <v-spacer></v-spacer>
               <v-btn @click="update()" class="add-button" round dark>Submit</v-btn>
             </v-card-actions>
           </v-flex>
         </v-flex>
       </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>
     <div class="loader" v-if="showLoader">
       <v-progress-circular indeterminate color="white"></v-progress-circular>
     </div>
   </v-container>
 </template>
 <script>
 import http from "@/Services/http.js";
 import moment from "moment";
 export default {
   data: () => ({
     snackbar: false,
     y: "top",
     x: "right",
     mode: "",
     timeout: 3000,
     text: "",
     show: true,
     showSearch: false,
     showLoader: false,
     loading: false,
     date: null,
     search: "",
     addclass: [],
     pagination: {
       rowsPerPage: 10,
     },
     imageData: {},
     imageName: "",
     imageUrl: "",
     imageFile: "",
     headers: [
       {
         text: "No",
         align: "",
         sortable: false,
         value: "index",
       },
       {
         text: "Profile Pic",
         value: "profilprofilePicUrlePicUrl",
         sortable: false,
         align: "center",
       },
       { text: "Name", value: "name", sortable: false, align: "center" },
       {
         text: "Mobile No",
         value: "fatherCellNo",
         sortable: false,
         align: "center",
       },
       { text: "Email", value: "email", sortable: false, align: "center" },
       { text: "Attendance", value: "", sortable: false, align: "center" },
     ],
     // json_data: [],
     parentId: "",
     token: "",
     selectStudents: {
       select: "",
       selectSection: "",
     },
     role: "",
     schoolRole: "",
     addStudentAttendenceDialog: false,
     attendeceTable: false,
     menu: false,
     valid: true,
     getReport: {},
     getAttendence: {},
     studentsList: [],
     studentsData: [],
     addSection: [],
     SectionName: ["A", "B", "C", "D", "E", "F"],
     classRules: [(v) => !!v || "Class is required"],
     sectionRules: [(v) => !!v || "Class is required"],
     studentRules: [(v) => !!v || "Student is required"],
     dataValid: [(v) => !!v || "Date is required"],
     attendenceType: [
       {
         label: "Present",
         value: true,
       },
       {
         label: "Absent",
         value: false,
       },
     ],
   }),
   methods: {
     save(date) {
       this.$refs.menu.save(date);
     },
     showTable() {
       this.attendeceTable = true;
       this.getStudents();
     },
     getAllClass() {
       http()
         .get("/getClassesList", {
           headers: { Authorization: "Bearer " + this.token },
         })
         .then((response) => {
           this.addclass = response.data.data;
         })
         .catch((error) => {
           // console.log("err====>", err);
           // this.$router.replace({ path: "/" });
         });
     },
     getSection(_id) {
       this.showLoader = true;
       http()
         .get(
           "/getSectionsList",
           { params: { classId: _id } },
           {
             headers: { Authorization: "Bearer " + this.token },
           }
         )
         .then((response) => {
           this.addSection = response.data.data;
           this.showLoader = false;
         })
         .catch((err) => {
           this.showLoader = false;
           // console.log("err====>", err);
         });
     },
     getStudents(_id) {
       this.showLoader = true;
       http()
         .get("/getStudentWithClass", {
           params: {
             classId: this.getAttendence.classId,
             sectionId: this.getAttendence.sectionId,
           },
         })
         .then((response) => {
           this.studentsData = response.data.data;
           this.showLoader = false;
           // this.addStudentAttendenceDialog = false;
           var attendence = "";
           for (let i = 0; i < this.studentsData.length; i++) {
             this.studentsData[i].attendence = true;
           }
         })
         .catch((error) => {
           console.log("err====>", error);
           this.showLoader = false;
         });
     },
     update() {
       var studentsAttendence = [];
       for (var j = 0; j < this.studentsData.length; j++) {
         studentsAttendence.push({
           studentId: this.studentsData[j]._id,
           isPresent: this.studentsData[j].attendence,
         });
       }
       if (this.$refs.form.validate()) {
         let attendanceData = {
           sectionId: this.getReport.sectionId,
           date: this.date,
           students: studentsAttendence,
         };
         http()
           .put("/updateAttendance", attendanceData)
           .then((response) => {
             this.snackbar = true;
             this.text = response.data.message;
             this.addStudentAttendenceDialog = false;
           })
           .catch((error) => {
             this.snackbar = true;
             this.text = error.response.data.message;
           });
       }
     },
     displaySearch() {
-      (this.show = false), (this.showSearch = true);
+      this.show = false
+       this.showSearch = true;
     },
     closeSearch() {
       this.showSearch = false;
       this.show = true;
       this.search = "";
     },
   },
   mounted() {
     // this.getStudentList();
     this.token = this.$store.state.token;
     this.getAllClass();
     this.role = this.$store.state.role;
   },
 };
 </script>

src/pages/Library/books.vue

Diff comments View file @f5329b7

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