viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 96f88269ac36632f40dae1cb79c9698c1f9e3804

Authored by Neeraj Sharma
1 parent d9bb52b5bc
Exists in master and in 3 other branches amber-development, development, ui-design

implement Student Report Dashboard

Showing 5 changed files with 141 additions and 45 deletions   Show diff stats
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></router-view> 11 <router-view></router-view>
12 </div> 12 </div>
13 <!-- App Footer --> 13 <!-- App Footer -->
14 <v-footer height="auto" class="fixcolors pa-3 app--footer"></v-footer> 14 <v-footer height="auto" class="fixcolors pa-3 app--footer"></v-footer>
15 </v-content> 15 </v-content>
16 <!-- theme setting --> 16 <!-- theme setting -->
17 <!-- <v-btn small fab dark falt fixed top="top" right="right" class="setting-fab" color="red" @click="openThemeSettings"> 17 <!-- <v-btn small fab dark falt fixed top="top" right="right" class="setting-fab" color="red" @click="openThemeSettings">
18 <v-icon>settings</v-icon> 18 <v-icon>settings</v-icon>
19 </v-btn> 19 </v-btn>
20 <v-navigation-drawer 20 <v-navigation-drawer
21 class="setting-drawer" 21 class="setting-drawer"
22 temporary 22 temporary
23 right 23 right
24 v-model="rightDrawer" 24 v-model="rightDrawer"
25 hide-overlay 25 hide-overlay
26 fixed 26 fixed
27 > 27 >
28 <theme-settings></theme-settings> 28 <theme-settings></theme-settings>
29 </v-navigation-drawer> --> 29 </v-navigation-drawer>-->
30 </v-app> 30 </v-app>
31 </template> 31 </template>
32 <template v-else> 32 <template v-else>
33 <transition> 33 <transition>
34 <keep-alive> 34 <keep-alive>
35 <router-view></router-view> 35 <router-view></router-view>
36 </keep-alive> 36 </keep-alive>
37 </transition> 37 </transition>
38 </template> 38 </template>
39 <v-snackbar :timeout="3000" bottom right :color="snackbar.color" v-model="snackbar.show"> 39 <v-snackbar :timeout="3000" bottom right :color="snackbar.color" v-model="snackbar.show">
40 {{ snackbar.text }} 40 {{ snackbar.text }}
41 <v-btn dark flat @click.native="snackbar.show = false" icon> 41 <v-btn dark flat @click.native="snackbar.show = false" icon>
42 <v-icon>close</v-icon> 42 <v-icon>close</v-icon>
43 </v-btn> 43 </v-btn>
44 </v-snackbar> 44 </v-snackbar>
45 </div> 45 </div>
46 </template> 46 </template>
47 <script> 47 <script>
48 import AppDrawer from "@/components/pageHeader/AppDrawer"; 48 import AppDrawer from "@/components/pageHeader/AppDrawer";
49 import AppToolbar from "@/components/pageHeader/AppToolbar"; 49 import AppToolbar from "@/components/pageHeader/AppToolbar";
50 import menu from "@/api/menu"; 50 import menu from "@/api/menu";
51 import AppEvents from "./event"; 51 import AppEvents from "./event";
52 import ThemeSettings from "@/components/ThemeSettings" 52 import ThemeSettings from "@/components/ThemeSettings";
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 }, 59 },
60 data: () => ({ 60 data: () => ({
61 expanded: true, 61 expanded: true,
62 rightDrawer: false, 62 rightDrawer: false,
63 snackbar: { 63 snackbar: {
64 show: false, 64 show: false,
65 text: "", 65 text: "",
66 color: "" 66 color: ""
67 } 67 }
68 }), 68 }),
69 69
70 computed: {}, 70 computed: {},
71 71
72 created() { 72 created() {
73 AppEvents.forEach(item => { 73 AppEvents.forEach(item => {
74 this.$on(item.name, item.callback); 74 this.$on(item.name, item.callback);
75 }); 75 });
76 window.getApp = this; 76 window.getApp = this;
77 }, 77 },
78 methods: { 78 methods: {
79 openThemeSettings () { 79 openThemeSettings() {
80 this.$vuetify.goTo(0); 80 this.$vuetify.goTo(0);
81 this.rightDrawer = (!this.rightDrawer); 81 this.rightDrawer = !this.rightDrawer;
82 } 82 }
83 }, 83 }
84 }; 84 };
85 </script> 85 </script>
86 86
87 87
88 <style lang="stylus" scoped> 88 <style lang="stylus" scoped>
89 .setting-fab { 89 .setting-fab {
90 top: 50% !important; 90 top: 50% !important;
91 right: 0; 91 right: 0;
92 border-radius: 0; 92 border-radius: 0;
93 } 93 }
94 94
95 .page-wrapper { 95 .page-wrapper {
96 min-height: calc(1200px - 64px - 50px - 81px); 96 min-height: calc(1200px - 64px - 50px - 81px);
97 } 97 }
98 </style> 98 </style>
99 <style> 99 <style>
100 .application { 100 .application {
101 background-color: white !important; 101 background-color: white !important;
102 font-family: "Poppins", sans-serif; 102 font-family: "Poppins", sans-serif;
103 -webkit-font-smoothing: antialiased; 103 -webkit-font-smoothing: antialiased;
104 -moz-osx-font-smoothing: grayscale; 104 -moz-osx-font-smoothing: grayscale;
105 scroll-behavior: smooth; 105 scroll-behavior: smooth;
106 } 106 }
107 </style> 107 </style>
108 108
src/Services/http.js
Diff comments   View file @96f8826
1 import axios from 'axios' 1 import axios from 'axios'
2 import store from '@/store/store' 2 import store from '@/store/store'
3 3
4 const baseDomain = "http://13.234.251.173:8001/v1"; 4 const baseDomain = "http://13.234.251.173:8001/v1";
5 5
6 const baseURL = `${baseDomain}`; 6 const baseURL = `${baseDomain}`;
7 7
8 export default () => { 8 export default () => {
9 return axios.create({ 9 return axios.create({
10 // baseURL: 'http://192.168.0.120:3002/v1', 10 baseURL: 'http://192.168.4.220:3002/v1',
11 baseURL, 11 // baseURL,
12 headers: { 12 headers: {
13 Authorization: `Bearer ${store.state.token}` 13 Authorization: `Bearer ${store.state.token}`
14 } 14 }
15 }) 15 })
16 } 16 }
src/components/pageHeader/AppToolbar.vue
Diff comments   View file @96f8826
1 <template> 1 <template>
2 <v-toolbar class="fixcolors" fixed app> 2 <v-toolbar class="fixcolors" fixed app>
3 <v-toolbar-title class="ml-0"> 3 <v-toolbar-title class="ml-0">
4 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide white--text"></v-toolbar-side-icon> 4 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide white--text"></v-toolbar-side-icon>
5 </v-toolbar-title> 5 </v-toolbar-title>
6 6
7 <!-- ****** SEARCH ALL EXISTING STUDENTS ****** --> 7 <!-- ****** SEARCH ALL EXISTING STUDENTS ****** -->
8 <v-flex 8 <v-flex
9 xs7 9 xs7
10 sm3 10 sm3
11 class="userSearch" 11 class="userSearch"
12 v-if="$route.name != 'Dashboard' && $route.name != 'changepassword' && $route.name != 'generalSetting' && $route.name != 'resetPassword' && $route.name != 'bulkImport'" 12 v-if="$route.name != 'Dashboard' && $route.name != 'changepassword' && $route.name != 'generalSetting' && $route.name != 'resetPassword' && $route.name != 'bulkImport'"
13 > 13 >
14 <v-text-field 14 <v-text-field
15 flat 15 flat
16 append-icon="search" 16 append-icon="search"
17 label="Seacrh" 17 label="Seacrh"
18 class="pl-3" 18 class="pl-3"
19 color="white" 19 color="white"
20 @input.native="emitSearch" 20 @input.native="emitSearch"
21 type="text" 21 type="text"
22 dark 22 dark
23 ></v-text-field> 23 ></v-text-field>
24 </v-flex> 24 </v-flex>
25 <v-spacer></v-spacer> 25 <v-spacer></v-spacer>
26 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition"> 26 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
27 <v-btn icon large flat slot="activator"> 27 <v-btn icon large flat slot="activator">
28 <v-avatar> 28 <v-avatar>
29 <!-- <img src="/static/icon/user.png" /> --> 29 <!-- <img src="/static/icon/user.png" /> -->
30 <v-icon dark size="40px" v-if="!userData.schoolLogoUrl && !userData.profilePicUrl">account_circle</v-icon> 30 <v-icon
31 dark
32 size="40px"
33 v-if="!userData.schoolLogoUrl && !userData.profilePicUrl"
34 >account_circle</v-icon>
31 <img :src="userData.schoolLogoUrl" v-else-if="userData.schoolLogoUrl" /> 35 <img :src="userData.schoolLogoUrl" v-else-if="userData.schoolLogoUrl" />
32 <img :src="userData.profilePicUrl" v-else-if="userData.profilePicUrl" /> 36 <img :src="userData.profilePicUrl" v-else-if="userData.profilePicUrl" />
33 </v-avatar> 37 </v-avatar>
34 </v-btn> 38 </v-btn>
35 <v-list class="pa-0"> 39 <v-list class="pa-0">
36 <v-list-tile 40 <v-list-tile
37 v-for="(item,index) in items" 41 v-for="(item,index) in items"
38 :to="!item.href ? { name: item.name } : null" 42 :to="!item.href ? { name: item.name } : null"
39 :href="item.href" 43 :href="item.href"
40 @click="item.click" 44 @click="item.click"
41 ripple="ripple" 45 ripple="ripple"
42 :disabled="item.disabled" 46 :disabled="item.disabled"
43 :target="item.target" 47 :target="item.target"
44 rel="noopener" 48 rel="noopener"
45 :key="index" 49 :key="index"
46 > 50 >
47 <v-list-tile-action v-if="item.icon"> 51 <v-list-tile-action v-if="item.icon">
48 <v-icon class="iconSize">{{ item.icon }}</v-icon> 52 <v-icon class="iconSize">{{ item.icon }}</v-icon>
49 </v-list-tile-action> 53 </v-list-tile-action>
50 <v-list-tile-content> 54 <v-list-tile-content>
51 <v-list-tile-title>{{ item.title }}</v-list-tile-title> 55 <v-list-tile-title>{{ item.title }}</v-list-tile-title>
52 </v-list-tile-content> 56 </v-list-tile-content>
53 </v-list-tile> 57 </v-list-tile>
54 </v-list> 58 </v-list>
55 </v-menu> 59 </v-menu>
56 </v-toolbar> 60 </v-toolbar>
57 </template> 61 </template>
58 <script> 62 <script>
59 import http from "@/Services/http.js"; 63 import http from "@/Services/http.js";
60 64
61 export default { 65 export default {
62 name: "app-toolbar", 66 name: "app-toolbar",
63 data: () => ({ 67 data: () => ({
64 userName: "", 68 userName: "",
65 search: "", 69 search: "",
66 userData: {}, 70 userData: {},
67 items: [ 71 items: [
68 { 72 {
69 icon: "account_circle", 73 icon: "account_circle",
70 href: "/resetPassword", 74 href: "/resetPassword",
71 title: "Change Password", 75 title: "Change Password",
72 click: e => { 76 click: e => {
73 console.log(e); 77 console.log(e);
74 } 78 }
75 }, 79 },
76 // { 80 // {
77 // icon: 'settings', 81 // icon: 'settings',
78 // href: '#', 82 // href: '#',
79 // title: 'Settings', 83 // title: 'Settings',
80 // click: (e) => { 84 // click: (e) => {
81 // console.log(e); 85 // console.log(e);
82 // } 86 // }
83 // }, 87 // },
84 { 88 {
85 icon: "lock", 89 icon: "lock",
86 href: "#", 90 href: "#",
87 title: "Logout", 91 title: "Logout",
88 click: e => { 92 click: e => {
89 window.getApp.$emit("APP_LOGOUT"); 93 window.getApp.$emit("APP_LOGOUT");
90 } 94 }
91 } 95 }
92 ] 96 ]
93 }), 97 }),
94 computed: { 98 computed: {
95 toolbarColor() { 99 toolbarColor() {
96 return this.$vuetify.options.extra.mainNav; 100 return this.$vuetify.options.extra.mainNav;
97 } 101 }
98 }, 102 },
99 mounted() { 103 mounted() {
100 this.getUserData(); 104 this.getUserData();
101 }, 105 },
102 methods: { 106 methods: {
103 emitSearch(ev) { 107 emitSearch(ev) {
104 this.$root.$emit("app:search", ev.target.value); 108 this.$root.$emit("app:search", ev.target.value);
105 console.log("ev.target.value", ev.target.value); 109 // console.log("ev.target.value", ev.target.value);
106 }, 110 },
107 handleDrawerToggle() { 111 handleDrawerToggle() {
108 window.getApp.$emit("APP_DRAWER_TOGGLED"); 112 window.getApp.$emit("APP_DRAWER_TOGGLED");
109 }, 113 },
110 handleFullScreen() { 114 handleFullScreen() {
111 Util.toggleFullScreen(); 115 Util.toggleFullScreen();
112 }, 116 },
113 getUserData() { 117 getUserData() {
114 http() 118 http()
115 .get("/getParticularUserDetail") 119 .get("/getParticularUserDetail")
116 .then(response => { 120 .then(response => {
117 this.userData = response.data.data; 121 this.userData = response.data.data;
118 }) 122 })
119 .catch(error => { 123 .catch(error => {
120 if (error.response.status === 401) { 124 if (error.response.status === 401) {
121 this.$router.replace({ path: "/" }); 125 this.$router.replace({ path: "/" });
122 this.$store.dispatch("setToken", null); 126 this.$store.dispatch("setToken", null);
123 this.$store.dispatch("Id", null); 127 this.$store.dispatch("Id", null);
124 } 128 }
125 }); 129 });
126 } 130 }
127 } 131 }
128 }; 132 };
129 </script> 133 </script>
130 <style> 134 <style>
131 .v-icon { 135 .v-icon {
132 font-size: 30px; 136 font-size: 30px;
133 } 137 }
134 .fixcolors { 138 .fixcolors {
135 background: #444b54 !important; 139 background: #444b54 !important;
136 } 140 }
137 @media screen and (min-width: 1270px) { 141 @media screen and (min-width: 1270px) {
138 .hide { 142 .hide {
139 display: none; 143 display: none;
140 } 144 }
141 /* } 145 /* }
142 @media screen and (max-width: 962px) { 146 @media screen and (max-width: 962px) {
143 .imglogo{ 147 .imglogo{
144 position: absolute; 148 position: absolute;
145 top: 13px; 149 top: 13px;
146 left: 13px !important; 150 left: 13px !important;
147 width: 70px; 151 width: 70px;
148 height: 24px; 152 height: 24px;
149 } */ 153 } */
150 } 154 }
151 @media screen and (max-width: 420px) { 155 @media screen and (max-width: 420px) {
152 .v-list__tile { 156 .v-list__tile {
153 font-size: 14px; 157 font-size: 14px;
154 padding: 0 10px; 158 padding: 0 10px;
155 } 159 }
156 .name { 160 .name {
157 font-size: 15px; 161 font-size: 15px;
158 } 162 }
159 } 163 }
160 </style> 164 </style>
161 165
src/pages/Authentication/Login.vue
Diff comments   View file @96f8826
1 <template> 1 <template>
2 <v-app id="login"> 2 <v-app id="login">
3 <v-toolbar class="fixcolors"> 3 <v-toolbar class="fixcolors">
4 <v-toolbar-items> 4 <v-toolbar-items>
5 <img src="/static/logoIntrack.png" height="40" width="140" alt="logo" /> 5 <img src="/static/logoIntrack.png" height="40" width="140" alt="logo" />
6 <!-- <h3 class="white--text my-3 ml-5 logoSchool">School-Management</h3> --> 6 <!-- <h3 class="white--text my-3 ml-5 logoSchool">School-Management</h3> -->
7 </v-toolbar-items> 7 </v-toolbar-items>
8 </v-toolbar> 8 </v-toolbar>
9 <v-content> 9 <v-content>
10 <v-container fluid fill-height> 10 <v-container fluid fill-height>
11 <v-snackbar 11 <v-snackbar
12 :timeout="timeout" 12 :timeout="timeout"
13 :top="y === 'top'" 13 :top="y === 'top'"
14 :right="x === 'right'" 14 :right="x === 'right'"
15 :vertical="mode === 'vertical'" 15 :vertical="mode === 'vertical'"
16 v-model="snackbar" 16 v-model="snackbar"
17 :color="color" 17 :color="color"
18 >{{ text }}</v-snackbar> 18 >{{ text }}</v-snackbar>
19 <v-layout align-center justify-center> 19 <v-layout align-center justify-center>
20 <v-flex xs12 sm10 md6 lg4> 20 <v-flex xs12 sm10 md6 lg4>
21 <v-toolbar class="fixcolors" dark> 21 <v-toolbar class="fixcolors" dark>
22 <v-spacer></v-spacer> 22 <v-spacer></v-spacer>
23 <v-toolbar-title>School Login</v-toolbar-title> 23 <v-toolbar-title>School Login</v-toolbar-title>
24 <v-spacer></v-spacer> 24 <v-spacer></v-spacer>
25 </v-toolbar> 25 </v-toolbar>
26 26
27 <v-card class="elevation-1 pa-1"> 27 <v-card class="elevation-1 pa-1">
28 <v-card-text> 28 <v-card-text>
29 <v-flex xs12 sm12 md12 lg12> 29 <v-flex xs12 sm12 md12 lg12>
30 <v-form ref="form" v-model="valid" lazy-validation> 30 <v-form ref="form" v-model="valid" lazy-validation>
31 <v-text-field 31 <v-text-field
32 v-model="userLogincredentials.email" 32 v-model.trim="userLogincredentials.email"
33 :rules="nameRules" 33 :rules="nameRules"
34 label="Username" 34 label="Username"
35 required 35 required
36 ></v-text-field> 36 ></v-text-field>
37 <v-text-field 37 <v-text-field
38 :rules="[rules.required]" 38 :rules="[rules.required]"
39 v-model="userLogincredentials.password" 39 v-model.trim="userLogincredentials.password"
40 :append-icon="e1 ? 'visibility_off' : 'visibility'" 40 :append-icon="e1 ? 'visibility_off' : 'visibility'"
41 :append-icon-cb="() => (e1 = !e1)" 41 :append-icon-cb="() => (e1 = !e1)"
42 :type="e1 ? 'password' : 'text'" 42 :type="e1 ? 'password' : 'text'"
43 name="input-10-1" 43 name="input-10-1"
44 label="Password" 44 label="Password"
45 @keyup.enter="login" 45 @keyup.enter="login"
46 counter 46 counter
47 ></v-text-field> 47 ></v-text-field>
48 </v-form> 48 </v-form>
49 <v-layout row wrap> 49 <v-layout row wrap>
50 <v-flex xs6> 50 <v-flex xs6>
51 <!-- <v-checkbox :label="`Remember me`" v-model="remember"></v-checkbox> --> 51 <!-- <v-checkbox :label="`Remember me`" v-model="remember"></v-checkbox> -->
52 </v-flex> 52 </v-flex>
53 <v-flex xs6> 53 <v-flex xs6>
54 <h5 class="right mt-4"> 54 <h5 class="right mt-4">
55 <router-link 55 <router-link
56 class="link" 56 class="link"
57 to="/forgetpassword" 57 to="/forgetpassword"
58 style="border-bottom: 2px solid #aaa;" 58 style="border-bottom: 2px solid #aaa;"
59 >Forgot Password</router-link> 59 >Forgot Password</router-link>
60 </h5> 60 </h5>
61 </v-flex> 61 </v-flex>
62 </v-layout> 62 </v-layout>
63 </v-flex> 63 </v-flex>
64 </v-card-text> 64 </v-card-text>
65 <v-layout> 65 <v-layout>
66 <v-flex sm12 class="my-3"> 66 <v-flex sm12 class="my-3">
67 <v-btn 67 <v-btn
68 style="margin: auto;display: block;b" 68 style="margin: auto;display: block;b"
69 class="fixcolors" 69 class="fixcolors"
70 round 70 round
71 dark 71 dark
72 large 72 large
73 @click="login" 73 @click="login"
74 :loading="loading" 74 :loading="loading"
75 >Login</v-btn> 75 >Login</v-btn>
76 </v-flex> 76 </v-flex>
77 </v-layout> 77 </v-layout>
78 <v-layout></v-layout> 78 <v-layout></v-layout>
79 </v-card> 79 </v-card>
80 </v-flex> 80 </v-flex>
81 </v-layout> 81 </v-layout>
82 </v-container> 82 </v-container>
83 </v-content> 83 </v-content>
84 <v-footer class="pa-4 fixcolors"></v-footer> 84 <v-footer class="pa-4 fixcolors"></v-footer>
85 </v-app> 85 </v-app>
86 </template> 86 </template>
87 87
88 <script> 88 <script>
89 import http from "@/Services/http.js"; 89 import http from "@/Services/http.js";
90 export default { 90 export default {
91 data() { 91 data() {
92 return { 92 return {
93 snackbar: false, 93 snackbar: false,
94 y: "top", 94 y: "top",
95 x: "right", 95 x: "right",
96 mode: "", 96 mode: "",
97 timeout: 3000, 97 timeout: 3000,
98 text: "", 98 text: "",
99 e1: true, 99 e1: true,
100 loading: false, 100 loading: false,
101 remember: false, 101 remember: false,
102 valid: false, 102 valid: false,
103 userLogincredentials: {}, 103 userLogincredentials: {},
104 nameRules: [v => !!v || "Username is required"], 104 nameRules: [v => !!v || "Username is required"],
105 password: "", 105 password: "",
106 email: "", 106 email: "",
107 rules: { 107 rules: {
108 required: value => !!value || "password is Required." 108 required: value => !!value || "password is Required."
109 } 109 }
110 }; 110 };
111 }, 111 },
112 methods: { 112 methods: {
113 login() { 113 login() {
114 this.loading = true; 114 this.loading = true;
115 var userdata = { 115 var userdata = {
116 email: this.userLogincredentials.email, 116 email: this.userLogincredentials.email,
117 password: this.userLogincredentials.password 117 password: this.userLogincredentials.password
118 }; 118 };
119 http() 119 http()
120 .post("/schoolLogin", userdata) 120 .post("/schoolLogin", userdata)
121 .then(response => { 121 .then(response => {
122 this.$store.dispatch("setToken", response.data.data.token); 122 this.$store.dispatch("setToken", response.data.data.token);
123 this.$store.dispatch("Id", response.data.data.id); 123 this.$store.dispatch("Id", response.data.data.id);
124 this.$store.dispatch("Role", response.data.data.role); 124 this.$store.dispatch("Role", response.data.data.role);
125 this.$store.dispatch("SchoolId", response.data.data.schoolId); 125 this.$store.dispatch("SchoolId", response.data.data.schoolId);
126 this.loading = false; 126 this.loading = false;
127 // console.log("{this.$store.state.state.role}",this.$store.state.role) 127 // console.log("{this.$store.state.state.role}",this.$store.state.role)
128 if (this.$store.state.role === "ADMIN") { 128 if (this.$store.state.role === "ADMIN") {
129 this.$router.push("/dashboard"); 129 this.$router.push("/dashboard");
130 } else if (this.$store.state.role === "SUPERADMIN") { 130 } else if (this.$store.state.role === "SUPERADMIN") {
131 this.$router.push("/school"); 131 this.$router.push("/school");
132 } else if (this.$store.state.role === "LIBRARIAN") { 132 } else if (this.$store.state.role === "LIBRARIAN") {
133 this.$router.push("/libraryMember"); 133 this.$router.push("/libraryMember");
134 } else if (this.$store.state.role === "ACCOUNTANT") { 134 } else if (this.$store.state.role === "ACCOUNTANT") {
135 this.$router.push("/feeTypes"); 135 this.$router.push("/feeTypes");
136 } 136 }
137 }) 137 })
138 .catch(error => { 138 .catch(error => {
139 if (error) { 139 if (error) {
140 this.text = "Server appears to be offline"; 140 this.text = "Server appears to be offline";
141 this.snackbar = true; 141 this.snackbar = true;
142 this.loading = false; 142 this.loading = false;
143 } 143 }
144 if (error.response.data.message) { 144 if (error.response.data.message) {
145 this.text = error.response.data.message; 145 this.text = error.response.data.message;
146 this.snackbar = true; 146 this.snackbar = true;
147 } 147 }
148 this.loading = false; 148 this.loading = false;
149 }); 149 });
150 } 150 }
151 }, 151 },
152 mounted() { 152 mounted() {
153 if (this.$store.state.isUserLoggedIn == true) { 153 if (this.$store.state.isUserLoggedIn == true) {
154 this.$router.push("/dashboard"); 154 this.$router.push("/dashboard");
155 } 155 }
156 }, 156 },
157 computed: { 157 computed: {
158 color() { 158 color() {
159 return this.loading ? "success" : "error"; 159 return this.loading ? "success" : "error";
160 } 160 }
161 } 161 }
162 }; 162 };
163 </script> 163 </script>
164 164
165 <style scoped lang="css"> 165 <style scoped lang="css">
166 #login { 166 #login {
167 width: 100%; 167 width: 100%;
168 position: absolute; 168 position: absolute;
169 top: 0; 169 top: 0;
170 left: 0; 170 left: 0;
171 content: ""; 171 content: "";
172 z-index: 0; 172 z-index: 0;
173 } 173 }
174 </style> 174 </style>
175 <style scoped> 175 <style scoped>
176 img { 176 img {
177 position: absolute; 177 position: absolute;
178 top: 13px; 178 top: 13px;
179 left: 8px; 179 left: 8px;
180 } 180 }
181 .v-btn--large { 181 .v-btn--large {
182 padding: 0px 84px; 182 padding: 0px 84px;
183 } 183 }
184 .link { 184 .link {
185 text-decoration: none; 185 text-decoration: none;
186 } 186 }
187 a { 187 a {
188 color: #696969; 188 color: #696969;
189 } 189 }
190 .forget { 190 .forget {
191 margin-top: 20px; 191 margin-top: 20px;
192 } 192 }
193 .mt-4 { 193 .mt-4 {
194 margin-top: 21px !important; 194 margin-top: 21px !important;
195 } 195 }
196 @media screen and (max-width: 600px) { 196 @media screen and (max-width: 600px) {
197 .forget { 197 .forget {
198 margin-top: none; 198 margin-top: none;
199 margin-left: 18px; 199 margin-left: 18px;
200 } 200 }
201 img { 201 img {
202 left: 10px; 202 left: 10px;
203 height: 34px; 203 height: 34px;
204 width: 120px; 204 width: 120px;
205 } 205 }
206 .logoSchool { 206 .logoSchool {
207 font-size: 18px; 207 font-size: 18px;
208 margin-top: 20px !important; 208 margin-top: 20px !important;
209 } 209 }
210 h5 { 210 h5 {
211 font-size: 14px !important; 211 font-size: 14px !important;
212 } 212 }
213 } 213 }
214 </style> 214 </style>
src/pages/Report/studentReport.vue
Diff comments   View file @96f8826
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-snackbar 3 <v-snackbar
4 :timeout="timeout" 4 :timeout="timeout"
5 :top="y === 'top'" 5 :top="y === 'top'"
6 :right="x === 'right'" 6 :right="x === 'right'"
7 :vertical="mode === 'vertical'" 7 :vertical="mode === 'vertical'"
8 v-model="snackbar" 8 v-model="snackbar"
9 color="success" 9 color="success"
10 >{{ text }}</v-snackbar> 10 >{{ text }}</v-snackbar>
11 11
12 <!-- ****** Student Report TABLE****** --> 12 <!-- ****** Student Report TABLE****** -->
13 <v-card flat> 13 <v-card flat>
14 <v-card-actions> 14 <v-card-actions>
15 <v-layout> 15 <v-layout>
16 <h4 class="right mt-2 ml-2">Student Report</h4> 16 <h4 class="right mt-2 ml-2">Student Report</h4>
17 </v-layout> 17 </v-layout>
18 <v-spacer></v-spacer> 18 <v-spacer></v-spacer>
19 </v-card-actions> 19 </v-card-actions>
20 </v-card> 20 </v-card>
21 <v-card flat class="elevation-0"> 21 <v-card flat class="elevation-0">
22 <v-form ref="form" v-model="valid" lazy-validation> 22 <v-form ref="form" v-model="valid" lazy-validation>
23 <v-flex xs12 sm12 lg12> 23 <v-flex xs12 sm12 lg12>
24 <v-layout wrap> 24 <v-layout wrap>
25 <v-flex xs12 sm12 lg4> 25 <v-flex xs12 sm12 lg4>
26 <v-layout> 26 <v-layout>
27 <v-flex xs4 sm4 lg3 class="subheading mt-4"> 27 <v-flex xs4 sm4 lg3 class="subheading mt-4">
28 <label class="right">Report For :</label> 28 <label class="right">Report For :</label>
29 </v-flex> 29 </v-flex>
30 <v-flex xs7 sm6 lg8 class="ml-2"> 30 <v-flex xs7 sm6 lg8 class="ml-2">
31 <v-autocomplete 31 <v-autocomplete
32 v-model="report.form" 32 v-model="report.form"
33 label="Select your report for" 33 label="Select your report for"
34 :items="formList" 34 :items="formList"
35 item-text="name" 35 item-text="name"
36 item-value="value" 36 item-value="value"
37 @change="getReport(report.form)" 37 @change="getReport(report.form)"
38 :rules="formRules" 38 :rules="formRules"
39 required 39 required
40 ></v-autocomplete> 40 ></v-autocomplete>
41 </v-flex> 41 </v-flex>
42 </v-layout> 42 </v-layout>
43 </v-flex> 43 </v-flex>
44 <v-flex xs12 sm12 lg4 v-if="bloodGroup"> 44 <v-flex xs12 sm12 lg4 v-if="bloodGroup">
45 <v-layout> 45 <v-layout>
46 <v-flex xs4 sm4 lg4 class="subheading mt-4"> 46 <v-flex xs4 sm4 lg4 class="subheading mt-4">
47 <label class="right">Blood Group :</label> 47 <label class="right">Blood Group :</label>
48 </v-flex> 48 </v-flex>
49 <v-flex xs7 sm6 lg8 class="ml-2"> 49 <v-flex xs7 sm6 lg8 class="ml-2">
50 <v-autocomplete 50 <v-autocomplete
51 v-model="report.bloodGroup" 51 v-model="report.bloodGroup"
52 label="Select your Blood Group " 52 label="Select your Blood Group "
53 :items="bloodGroupList" 53 :items="bloodGroupList"
54 :rules="bloodGroupRules" 54 :rules="bloodGroupRules"
55 required 55 required
56 ></v-autocomplete> 56 ></v-autocomplete>
57 </v-flex> 57 </v-flex>
58 </v-layout> 58 </v-layout>
59 </v-flex> 59 </v-flex>
60 <v-flex xs12 sm12 lg4 v-if="genderShow"> 60 <v-flex xs12 sm12 lg4 v-if="genderShow">
61 <v-layout> 61 <v-layout>
62 <v-flex xs4 sm4 lg4 class="subheading mt-4"> 62 <v-flex xs4 sm4 lg4 class="subheading mt-4">
63 <label class="right">Gender:</label> 63 <label class="right">Gender:</label>
64 </v-flex> 64 </v-flex>
65 <v-flex xs7 sm6 lg8 class="ml-2"> 65 <v-flex xs7 sm6 lg8 class="ml-2">
66 <v-autocomplete 66 <v-autocomplete
67 v-model="report.gender" 67 v-model="report.gender"
68 label="Select your gender " 68 label="Select your gender "
69 :items="gender" 69 :items="gender"
70 :rules="genderRules" 70 :rules="genderRules"
71 required 71 required
72 ></v-autocomplete> 72 ></v-autocomplete>
73 </v-flex> 73 </v-flex>
74 </v-layout> 74 </v-layout>
75 </v-flex> 75 </v-flex>
76 <v-flex xs12 sm12 lg4 v-if="TransportShow"> 76 <v-flex xs12 sm12 lg4 v-if="TransportShow">
77 <v-layout> 77 <v-layout>
78 <v-flex xs4 sm4 lg4 class="subheading mt-4"> 78 <v-flex xs4 sm4 lg4 class="subheading mt-4">
79 <label class="right">Route:</label> 79 <label class="right">Route:</label>
80 </v-flex> 80 </v-flex>
81 <v-flex xs7 sm6 lg8 class="ml-2"> 81 <v-flex xs7 sm6 lg8 class="ml-2">
82 <v-autocomplete 82 <v-autocomplete
83 v-model="report.route" 83 v-model="report.route"
84 label="Select your gender " 84 label="Select your gender "
85 :items="route" 85 :items="route"
86 :rules="routeRules" 86 :rules="routeRules"
87 required 87 required
88 ></v-autocomplete> 88 ></v-autocomplete>
89 </v-flex> 89 </v-flex>
90 </v-layout> 90 </v-layout>
91 </v-flex> 91 </v-flex>
92 <v-flex xs12 sm12 lg4 v-if="HostelShow"> 92 <v-flex xs12 sm12 lg4 v-if="HostelShow">
93 <v-layout> 93 <v-layout>
94 <v-flex xs4 sm4 lg4 class="subheading mt-4"> 94 <v-flex xs4 sm4 lg4 class="subheading mt-4">
95 <label class="right">Hostel:</label> 95 <label class="right">Hostel:</label>
96 </v-flex> 96 </v-flex>
97 <v-flex xs7 sm6 lg8 class="ml-2"> 97 <v-flex xs7 sm6 lg8 class="ml-2">
98 <v-autocomplete 98 <v-autocomplete
99 v-model="report.route" 99 v-model="report.route"
100 label="Select your hostel " 100 label="Select your hostel "
101 :items="hostelList" 101 :items="hostelList"
102 :rules="hostelRules" 102 :rules="hostelRules"
103 required 103 required
104 ></v-autocomplete> 104 ></v-autocomplete>
105 </v-flex> 105 </v-flex>
106 </v-layout> 106 </v-layout>
107 </v-flex> 107 </v-flex>
108 <v-flex xs12 sm12 lg4 v-if="countryShow"> 108 <v-flex xs12 sm12 lg4 v-if="countryShow">
109 <v-layout> 109 <v-layout>
110 <v-flex xs4 sm4 lg4 class="subheading mt-4"> 110 <v-flex xs4 sm4 lg4 class="subheading mt-4">
111 <label class="right">Country :</label> 111 <label class="right">Country :</label>
112 </v-flex> 112 </v-flex>
113 <v-flex xs7 sm6 lg8 class="ml-2"> 113 <v-flex xs7 sm6 lg8 class="ml-2">
114 <v-autocomplete 114 <v-autocomplete
115 v-model="report.country" 115 v-model="report.country"
116 label="Select your Country " 116 label="Select your Country "
117 :items="countryList" 117 :items="countryList"
118 :rules="countryRules" 118 :rules="countryRules"
119 required 119 required
120 ></v-autocomplete> 120 ></v-autocomplete>
121 </v-flex> 121 </v-flex>
122 </v-layout> 122 </v-layout>
123 </v-flex> 123 </v-flex>
124 <!-- <v-flex xs12 sm12 lg4 v-show="BirthdayShow"> 124 <!-- <v-flex xs12 sm12 lg4 v-show="BirthdayShow">
125 <v-layout> 125 <v-layout>
126 <v-flex xs3 sm6 lg4 class="subheading mt-4"> 126 <v-flex xs3 sm6 lg4 class="subheading mt-4">
127 <label class="right">Country :</label> 127 <label class="right">Country :</label>
128 </v-flex> 128 </v-flex>
129 <v-flex xs12 sm12 lg8 class="ml-2"> 129 <v-flex xs12 sm12 lg8 class="ml-2">
130 <v-select 130 <v-select
131 v-model="report.country" 131 v-model="report.country"
132 label="Select your Country " 132 label="Select your Country "
133 :items="countryList" 133 :items="countryList"
134 required 134 required
135 ></v-select> 135 ></v-select>
136 </v-flex> 136 </v-flex>
137 </v-layout> 137 </v-layout>
138 </v-flex>--> 138 </v-flex>-->
139 <v-flex xs12 sm12 lg4 v-if="classShow"> 139 <v-flex xs12 sm12 lg4 v-if="classShow">
140 <v-layout> 140 <v-layout>
141 <v-flex xs4 sm4 lg3 class="subheading mt-4"> 141 <v-flex xs4 sm4 lg3 class="subheading mt-4">
142 <label class="right">Class:</label> 142 <label class="right">Class:</label>
143 </v-flex> 143 </v-flex>
144 <v-flex xs7 sm6 lg8 class="ml-2"> 144 <v-flex xs7 sm6 lg8 class="ml-2">
145 <v-autocomplete 145 <v-autocomplete
146 v-model="report.classId" 146 v-model="report.classId"
147 label="Select your class" 147 label="Select your class"
148 type="text" 148 type="text"
149 :rules="classRules" 149 :rules="classRules"
150 :items="classList" 150 :items="classList"
151 item-text="classNum" 151 item-text="classNum"
152 item-value="_id" 152 item-value="_id"
153 @change="getSections(report.classId)" 153 @change="getSections(report.classId)"
154 required 154 required
155 ></v-autocomplete> 155 ></v-autocomplete>
156 </v-flex> 156 </v-flex>
157 </v-layout> 157 </v-layout>
158 </v-flex> 158 </v-flex>
159 <v-flex xs12 sm12 lg4 v-if="sectionShow"> 159 <v-flex xs12 sm12 lg4 v-if="sectionShow">
160 <v-layout> 160 <v-layout>
161 <v-flex xs4 sm4 lg3 class="subheading mt-4"> 161 <v-flex xs4 sm4 lg3 class="subheading mt-4">
162 <label class="right">Section:</label> 162 <label class="right">Section:</label>
163 </v-flex> 163 </v-flex>
164 <v-flex xs7 sm6 lg8 class="ml-2"> 164 <v-flex xs7 sm6 lg8 class="ml-2">
165 <v-autocomplete 165 <v-autocomplete
166 :items="addSection" 166 :items="addSection"
167 label="Select your Section" 167 label="Select your Section"
168 v-model="report.sectionId" 168 v-model="report.sectionId"
169 :rules="sectionRules" 169 :rules="sectionRules"
170 item-text="name" 170 item-text="name"
171 item-value="_id" 171 item-value="_id"
172 name="Select Section" 172 name="Select Section"
173 required 173 required
174 ></v-autocomplete> 174 ></v-autocomplete>
175 </v-flex> 175 </v-flex>
176 </v-layout> 176 </v-layout>
177 </v-flex> 177 </v-flex>
178 <v-flex xs12 sm12 lg4 class="hidden-xs-only hidden-sm-only"> 178 <v-flex xs12 sm12 lg4 class="hidden-xs-only hidden-sm-only pl-5">
179 <v-btn @click="getStudents" round dark :loading="loading" class="mt-3 ml-5">Get Report</v-btn> 179 <v-btn @click="getStudents" round dark :loading="loading" class="mt-3 ml-5">Get Report</v-btn>
180 </v-flex> 180 </v-flex>
181 <v-flex xs12 sm12 lg4 class="hidden-lg-only hidden-md-only hidden-xl-only"> 181 <v-flex xs12 sm12 lg4 class="hidden-lg-only hidden-md-only hidden-xl-only">
182 <v-btn 182 <v-btn
183 @click="getStudents" 183 @click="getStudents"
184 round 184 round
185 dark 185 dark
186 :loading="loading" 186 :loading="loading"
187 class="mt-3 right" 187 class="mt-3 right"
188 >Get Report</v-btn> 188 >Get Report</v-btn>
189 </v-flex> 189 </v-flex>
190 </v-layout> 190 </v-layout>
191 </v-flex> 191 </v-flex>
192 </v-form> 192 </v-form>
193 </v-card> 193 </v-card>
194 <v-data-table 194 <v-layout v-show="showTable">
195 :headers="headers" 195 <v-flex xs12>
196 :items="getStudentsReportList" 196 <v-card>
197 :pagination.sync="pagination" 197 <v-layout>
198 :search="search" 198 <v-flex xs12>
199 v-show="showTable" 199 <v-btn class="grey right" dark @click="printStudentReport()">
200 > 200 Print
201 <template slot="items" slot-scope="props"> 201 <v-icon right dark>print</v-icon>
202 <td class="text-xs-center">{{ props.index + 1}}</td> 202 </v-btn>
203 <td id="td" class="text-xs-center"> 203 </v-flex>
204 <v-avatar> 204 </v-layout>
205 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> 205 <v-layout>
206 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> 206 <v-flex xs12 class="text-xs-center">
207 </v-avatar> 207 <img :src="userData.schoolLogoUrl" width="140" alt="logo" />
208 </td> 208 <p class="title">{{ userData.name }}</p>
209 <td id="td" class="text-xs-center">{{ props.item.name}}</td> 209 <p>{{ userData.address }}</p>
210 <td id="td" class="text-xs-center">{{ props.item.rollNo }}</td> 210 </v-flex>
211 <td id="td" class="text-xs-center">{{ props.item.email }}</td> 211 </v-layout>
212 <td id="td" class="text-xs-center">{{ props.item.classId.classNum }}</td> 212 <v-data-table
213 <td id="td" class="text-xs-center">{{ props.item.sectionId.name }}</td> 213 :headers="headers"
214 </template> 214 :items="getStudentsReportList"
215 <v-alert 215 :pagination.sync="pagination"
216 slot="no-results" 216 :search="search"
217 :value="true" 217 >
218 color="error" 218 <template slot="items" slot-scope="props">
219 icon="warning" 219 <td class="text-xs-center">{{ props.index + 1}}</td>
220 >Your search for "{{ search }}" found no results.</v-alert> 220 <td id="td" class="text-xs-center">
221 </v-data-table> 221 <v-avatar>
222 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
223 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
224 </v-avatar>
225 </td>
226 <td id="td" class="text-xs-center">{{ props.item.name}}</td>
227 <td id="td" class="text-xs-center">{{ props.item.rollNo }}</td>
228 <td id="td" class="text-xs-center">{{ props.item.email }}</td>
229 <td id="td" class="text-xs-center">{{ props.item.classId.classNum }}</td>
230 <td id="td" class="text-xs-center">{{ props.item.sectionId.name }}</td>
231 </template>
232 <v-alert
233 slot="no-results"
234 :value="true"
235 color="error"
236 icon="warning"
237 >Your search for "{{ search }}" found no results.</v-alert>
238 </v-data-table>
239 </v-card>
240 <v-flex xs12 id="printMe" v-show="hidePrintStudentReport">
241 <v-layout>
242 <v-flex xs12 style="text-align:center;margin-bottom:10px">
243 <img :src="userData.schoolLogoUrl" width="140" alt="logo" />
244 <p class="title">{{ userData.name }}</p>
245 <p>{{ userData.address }}</p>
246 </v-flex>
247 </v-layout>
248 <table
249 class="mb-5 tableRsponsive feeTypeTable"
250 style="border: 1px solid lightgrey;
251 border-collapse: collapse;!important
252 table-layout: auto !important;
253 width: 100% !important;"
254 >
255 <thead style="border: 1px solid lightgrey !important;">
256 <tr style="border: 1px solid lightgrey !important;padding:4px;">
257 <td style="border: 1px solid lightgrey !important;padding: 6px;">Profile Pic</td>
258 <td style="border: 1px solid lightgrey !important;padding: 6px;">Name</td>
259 <td style="border: 1px solid lightgrey !important;padding: 6px;">Roll No</td>
260 <td style="border: 1px solid lightgrey !important;padding: 6px;">Email</td>
261 <td style="border: 1px solid lightgrey !important;padding: 6px;">Class</td>
262 <td style="border: 1px solid lightgrey !important;padding: 6px;">Section</td>
263 </tr>
264 </thead>
265 <tbody style="border: 1px solid lightgrey !important;">
266 <tr v-for="(studentReport,i) in getStudentsReportList" :key="i">
267 <td style="border: 1px solid lightgrey !important;padding: 6px;">
268 <v-avatar>
269 <img :src="studentReport.profilePicUrl" v-if="studentReport.profilePicUrl" />
270 <img src="/static/icon/user.png" v-else-if="!studentReport.profilePicUrl" />
271 </v-avatar>
272 </td>
273 <td
274 style="border: 1px solid lightgrey !important;padding: 6px;"
275 >{{ studentReport.name }}</td>
276 <td
277 style="border: 1px solid lightgrey !important;padding: 6px;"
278 >{{ studentReport.rollNo }}</td>
279 <td
280 style="border: 1px solid lightgrey !important;padding: 6px;"
281 >{{ studentReport.email }}</td>
282 <td
283 style="border: 1px solid lightgrey !important;padding: 6px;"
284 >{{ studentReport.classId.classNum }}</td>
285 <td
286 style="border: 1px solid lightgrey !important;padding: 6px;"
287 >{{ studentReport.sectionId.name }}</td>
288 </tr>
289 </tbody>
290 </table>
291 </v-flex>
292 </v-flex>
293 </v-layout>
222 <div class="loader" v-if="showLoader"> 294 <div class="loader" v-if="showLoader">
223 <v-progress-circular indeterminate color="white"></v-progress-circular> 295 <v-progress-circular indeterminate color="white"></v-progress-circular>
224 </div> 296 </div>
225 </v-app> 297 </v-app>
226 </template> 298 </template>
227 299
228 <script> 300 <script>
229 import http from "@/Services/http.js"; 301 import http from "@/Services/http.js";
230 import countryList from "@/script/country.js"; 302 import countryList from "@/script/country.js";
231 303
232 import moment from "moment"; 304 import moment from "moment";
233 305
234 export default { 306 export default {
235 data: () => ({ 307 data: () => ({
236 snackbar: false, 308 snackbar: false,
237 color: "", 309 color: "",
238 y: "top", 310 y: "top",
239 x: "right", 311 x: "right",
240 mode: "", 312 mode: "",
241 timeout: 10000, 313 timeout: 10000,
242 text: "", 314 text: "",
243 loading: false, 315 loading: false,
244 valid: true, 316 valid: true,
245 search: "", 317 search: "",
246 showLoader: false, 318 showLoader: false,
247 bloodGroup: false, 319 bloodGroup: false,
248 genderShow: false, 320 genderShow: false,
249 countryShow: false, 321 countryShow: false,
250 TransportShow: false, 322 TransportShow: false,
251 HostelShow: false, 323 HostelShow: false,
252 BirthdayShow: false, 324 BirthdayShow: false,
253 sectionShow: false, 325 sectionShow: false,
254 showTable: false, 326 showTable: false,
255 ClassShow: true, 327 classShow: true,
328 hidePrintStudentReport: false,
256 addSection: [], 329 addSection: [],
257 pagination: { 330 pagination: {
258 rowsPerPage: 15 331 rowsPerPage: 15
259 }, 332 },
260 formRules: [v => !!v || "Form For is required"], 333 formRules: [v => !!v || "Form For is required"],
261 bloodGroupRules: [v => !!v || "Blood group is required"], 334 bloodGroupRules: [v => !!v || "Blood group is required"],
262 classRules: [v => !!v || "Class is required"], 335 classRules: [v => !!v || "Class is required"],
263 sectionRules: [v => !!v || "Class is required"], 336 sectionRules: [v => !!v || "Class is required"],
264 genderRules: [v => !!v || "Gender is required"], 337 genderRules: [v => !!v || "Gender is required"],
265 routeRules: [v => !!v || "RouteI is required"], 338 routeRules: [v => !!v || "RouteI is required"],
266 hostelRules: [v => !!v || "Hostel is required"], 339 hostelRules: [v => !!v || "Hostel is required"],
267 countryRules: [v => !!v || "Country is required"], 340 countryRules: [v => !!v || "Country is required"],
268 headers: [ 341 headers: [
269 { 342 {
270 align: "justify-center", 343 align: "justify-center",
271 text: "No", 344 text: "No",
272 sortable: false, 345 sortable: false,
273 value: "No" 346 value: "No"
274 }, 347 },
275 { 348 {
276 text: "Profile Pic", 349 text: "Profile Pic",
277 vaue: "profilePicUrl", 350 vaue: "profilePicUrl",
278 sortable: false, 351 sortable: false,
279 align: "center" 352 align: "center"
280 }, 353 },
281 { 354 {
282 text: "Name", 355 text: "Name",
283 vaue: "name", 356 vaue: "name",
284 sortable: false, 357 sortable: false,
285 align: "center" 358 align: "center"
286 }, 359 },
287 { 360 {
288 text: "Roll No.", 361 text: "Roll No.",
289 value: "rollNo", 362 value: "rollNo",
290 sortable: false, 363 sortable: false,
291 align: "center" 364 align: "center"
292 }, 365 },
293 { 366 {
294 text: "Email", 367 text: "Email",
295 value: "email", 368 value: "email",
296 sortable: false, 369 sortable: false,
297 align: "center" 370 align: "center"
298 }, 371 },
299 { 372 {
300 text: "Class", 373 text: "Class",
301 value: "classId", 374 value: "classId",
302 sortable: false, 375 sortable: false,
303 align: "center" 376 align: "center"
304 }, 377 },
305 { 378 {
306 text: "Section", 379 text: "Section",
307 value: "sectionId", 380 value: "sectionId",
308 sortable: false, 381 sortable: false,
309 align: "center" 382 align: "center"
310 } 383 }
311 ], 384 ],
312 classList: [], 385 classList: [],
313 report: {}, 386 report: {},
387 userData: {},
314 markData: [], 388 markData: [],
315 formList: [ 389 formList: [
316 { 390 {
317 name: "Blood Group", 391 name: "Blood Group",
318 value: "bloodGroup" 392 value: "bloodGroup"
319 }, 393 },
320 "Country", 394 "Country",
321 "Gender", 395 "Gender",
322 "Transport", 396 "Transport",
323 "Hostel" 397 "Hostel"
324 // "Birthday" 398 // "Birthday"
325 ], 399 ],
326 bloodGroupList: ["A+", "A-", "B+", "B-", "O+", "O-", "AB+", "AB-"], 400 bloodGroupList: ["A+", "A-", "B+", "B-", "O+", "O-", "AB+", "AB-"],
327 gender: ["Male", "female"], 401 gender: ["Male", "female"],
328 getStudentsReportList: [], 402 getStudentsReportList: [],
329 studentReort: "", 403 studentReort: "",
330 countryList: [], 404 countryList: [],
331 route: [], 405 route: [],
332 Hostel: [], 406 Hostel: [],
333 hostelList: [], 407 hostelList: [],
334 token: "" 408 token: ""
335 }), 409 }),
336 methods: { 410 methods: {
337 clear() { 411 clear() {
338 this.$refs.form.reset(); 412 this.$refs.form.reset();
339 }, 413 },
340 getClass() { 414 getClass() {
341 this.showLoader = true; 415 this.showLoader = true;
342 http() 416 http()
343 .get("/getClassesList", { 417 .get("/getClassesList", {
344 headers: { Authorization: "Bearer " + this.token } 418 headers: { Authorization: "Bearer " + this.token }
345 }) 419 })
346 .then(response => { 420 .then(response => {
347 this.classList = response.data.data; 421 this.classList = response.data.data;
348 this.showLoader = false; 422 this.showLoader = false;
349 }) 423 })
350 .catch(err => { 424 .catch(err => {
351 this.showLoader = false; 425 this.showLoader = false;
352 if (error.response.status === 401) { 426 if (error.response.status === 401) {
353 this.$router.replace({ path: "/" }); 427 this.$router.replace({ path: "/" });
354 this.$store.dispatch("setToken", null); 428 this.$store.dispatch("setToken", null);
355 this.$store.dispatch("Id", null); 429 this.$store.dispatch("Id", null);
356 this.$store.dispatch("Role", null); 430 this.$store.dispatch("Role", null);
357 } 431 }
358 }); 432 });
359 }, 433 },
360 getReport() { 434 getReport() {
361 if (this.report.form === "bloodGroup") { 435 if (this.report.form === "bloodGroup") {
362 this.bloodGroup = true; 436 this.bloodGroup = true;
363 this.genderShow = false; 437 this.genderShow = false;
364 this.TransportShow = false; 438 this.TransportShow = false;
365 this.countryShow = false; 439 this.countryShow = false;
366 this.BirthdayShow = false; 440 this.BirthdayShow = false;
367 this.HostelShow = false; 441 this.HostelShow = false;
368 this.classShow = false; 442 this.classShow = false;
369 this.sectionShow = false; 443 this.sectionShow = false;
370 } 444 }
371 if (this.report.form === "Gender") { 445 if (this.report.form === "Gender") {
372 this.genderShow = true; 446 this.genderShow = true;
373 this.bloodGroup = false; 447 this.bloodGroup = false;
374 this.TransportShow = false; 448 this.TransportShow = false;
375 this.BirthdayShow = false; 449 this.BirthdayShow = false;
376 this.countryShow = false; 450 this.countryShow = false;
377 this.HostelShow = false; 451 this.HostelShow = false;
378 this.classShow = true; 452 this.classShow = true;
379 } 453 }
380 if (this.report.form === "Transport") { 454 if (this.report.form === "Transport") {
381 this.TransportShow = true; 455 this.TransportShow = true;
382 this.genderShow = false; 456 this.genderShow = false;
383 this.bloodGroup = false; 457 this.bloodGroup = false;
384 this.BirthdayShow = false; 458 this.BirthdayShow = false;
385 this.countryShow = false; 459 this.countryShow = false;
386 this.HostelShow = false; 460 this.HostelShow = false;
387 this.classShow = true; 461 this.classShow = true;
388 } 462 }
389 if (this.report.form === "Country") { 463 if (this.report.form === "Country") {
390 this.countryShow = true; 464 this.countryShow = true;
391 this.TransportShow = false; 465 this.TransportShow = false;
392 this.genderShow = false; 466 this.genderShow = false;
393 this.bloodGroup = false; 467 this.bloodGroup = false;
394 this.BirthdayShow = false; 468 this.BirthdayShow = false;
395 this.HostelShow = false; 469 this.HostelShow = false;
396 this.classShow = true; 470 this.classShow = true;
397 } 471 }
398 if (this.report.form === "Hostel") { 472 if (this.report.form === "Hostel") {
399 this.HostelShow = true; 473 this.HostelShow = true;
400 this.TransportShow = false; 474 this.TransportShow = false;
401 this.genderShow = false; 475 this.genderShow = false;
402 this.bloodGroup = false; 476 this.bloodGroup = false;
403 this.countryShow = false; 477 this.countryShow = false;
404 this.BirthdayShow = false; 478 this.BirthdayShow = false;
405 this.classShow = true; 479 this.classShow = true;
406 } 480 }
407 if (this.report.form === "Birthday") { 481 if (this.report.form === "Birthday") {
408 this.BirthdayShow = true; 482 this.BirthdayShow = true;
409 this.TransportShow = false; 483 this.TransportShow = false;
410 this.genderShow = false; 484 this.genderShow = false;
411 this.HostelShow = false; 485 this.HostelShow = false;
412 this.bloodGroup = false; 486 this.bloodGroup = false;
413 this.countryShow = false; 487 this.countryShow = false;
414 this.classShow = true; 488 this.classShow = true;
415 } 489 }
416 }, 490 },
417 getStudents() { 491 getStudents() {
418 if (this.$refs.form.validate()) { 492 if (this.$refs.form.validate()) {
419 this.showLoader = true; 493 this.showLoader = true;
420 http() 494 http()
421 .get("/getStudentReport", { 495 .get("/getStudentReport", {
422 params: { 496 params: {
423 bloodGroup: this.report.bloodGroup, 497 bloodGroup: this.report.bloodGroup,
424 country: this.report.country, 498 country: this.report.country,
425 gender: this.report.gender, 499 gender: this.report.gender,
426 classId: this.report.classId, 500 classId: this.report.classId,
427 sectionId: this.report.sectionId 501 sectionId: this.report.sectionId
428 }, 502 },
429 headers: { Authorization: "Bearer " + this.token } 503 headers: { Authorization: "Bearer " + this.token }
430 }) 504 })
431 .then(response => { 505 .then(response => {
432 this.getStudentsReportList = response.data.data; 506 this.getStudentsReportList = response.data.data;
433 this.showTable = true; 507 this.showTable = true;
434 this.showLoader = false; 508 this.showLoader = false;
435 this.clear(); 509 this.clear();
436 // console.log("getSectionsList=====>", response.data.data); 510 // console.log("getSectionsList=====>", response.data.data);
437 }) 511 })
438 .catch(error => { 512 .catch(error => {
439 console.log("err====>", error); 513 console.log("err====>", error);
440 this.showLoader = false; 514 this.showLoader = false;
441 }); 515 });
442 } 516 }
443 }, 517 },
444 getSections() { 518 getSections() {
445 this.sectionShow = true; 519 this.sectionShow = true;
446 this.showLoader = true; 520 this.showLoader = true;
447 http() 521 http()
448 .get( 522 .get(
449 "/getSectionsList", 523 "/getSectionsList",
450 { params: { classId: this.report.classId } }, 524 { params: { classId: this.report.classId } },
451 { 525 {
452 headers: { Authorization: "Bearer " + this.token } 526 headers: { Authorization: "Bearer " + this.token }
453 } 527 }
454 ) 528 )
455 .then(response => { 529 .then(response => {
456 this.addSection = response.data.data; 530 this.addSection = response.data.data;
457 this.showLoader = false; 531 this.showLoader = false;
458 }) 532 })
459 .catch(error => { 533 .catch(error => {
460 console.log("err====>", error); 534 console.log("err====>", error);
461 this.showLoader = false; 535 this.showLoader = false;
462 }); 536 });
463 } 537 },
464 // getFormList() { 538 // getFormList() {
465 // this.showLoader = true; 539 // this.showLoader = true;
466 // http() 540 // http()
467 // .get("/getExamsList", { 541 // .get("/getExamsList", {
468 // headers: { Authorization: "Bearer " + this.token } 542 // headers: { Authorization: "Bearer " + this.token }
469 // }) 543 // })
470 // .then(response => { 544 // .then(response => {
471 // this.formList = response.data.data; 545 // this.formList = response.data.data;
472 // this.showLoader = false; 546 // this.showLoader = false;
473 // }) 547 // })
474 // .catch(error => { 548 // .catch(error => {
475 // // console.log("err====>", err); 549 // // console.log("err====>", err);
476 // this.showLoader = false; 550 // this.showLoader = false;
477 // this.snackbar = true; 551 // this.snackbar = true;
478 // this.text = error.response.data.message; 552 // this.text = error.response.data.message;
479 // if (error.response.status === 401) { 553 // if (error.response.status === 401) {
480 // this.$router.replace({ path: "/" }); 554 // this.$router.replace({ path: "/" });
481 // this.$store.dispatch("setToken", null); 555 // this.$store.dispatch("setToken", null);
482 // this.$store.dispatch("Id", null); 556 // this.$store.dispatch("Id", null);
483 // } 557 // }
484 // }); 558 // });
485 // } 559 // }
560 printStudentReport() {
561 this.$htmlToPaper("printMe");
562 },
563 getUserData() {
564 http()
565 .get("/getParticularUserDetail")
566 .then(response => {
567 this.userData = response.data.data;
568 })
569 .catch(error => {
570 if (error.response.status === 401) {
571 this.$router.replace({ path: "/" });
572 this.$store.dispatch("setToken", null);
573 this.$store.dispatch("Id", null);
574 }
575 });
576 }
486 }, 577 },
487 mounted() { 578 mounted() {
488 this.token = this.$store.state.token; 579 this.token = this.$store.state.token;
489 const getCountryList = countryList(); 580 const getCountryList = countryList();
490 this.countryList = getCountryList; 581 this.countryList = getCountryList;
582 this.getUserData();
491 // console.log("getindustryList", this.countryList); 583 // console.log("getindustryList", this.countryList);
492 // this.getExamList(); 584 // this.getExamList();
493 this.getClass(); 585 this.getClass();
494 }, 586 },
495 created() { 587 created() {
496 this.$root.$on("app:search", search => { 588 this.$root.$on("app:search", search => {
497 this.search = search; 589 this.search = search;
498 }); 590 });
499 }, 591 },
500 beforeDestroy() { 592 beforeDestroy() {
501 // dont forget to remove the listener 593 // dont forget to remove the listener
502 this.$root.$off("app:search"); 594 this.$root.$off("app:search");
503 } 595 }
504 }; 596 };
505 </script> 597 </script>
506 <style scoped> 598 <style scoped>
507 .active { 599 .active {
508 background-color: gray; 600 background-color: gray;
509 color: white !important; 601 color: white !important;
510 } 602 }
511 .activebtn { 603 .activebtn {
512 color: black !important; 604 color: black !important;
513 } 605 }
514 </style>s 606 </style>s