viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 68d600c976a661e4a091de5a9259b2850d42c020

Authored by Shikha Mishra
1 parent dfd943df60
Exists in master and in 3 other branches amber-development, development, ui-design

improve dashboard ui and set route of school while superadmin login

Showing 5 changed files with 86 additions and 44 deletions   Show diff stats
src/components/pageHeader/AppToolbar.vue
Diff comments   View file @68d600c
1 <template> 1 <template>
2 <v-toolbar flat class="white pt-2" fixed app> 2 <v-toolbar flat class="white pt-2" fixed app>
3 <v-toolbar-title> 3 <v-toolbar-title>
4 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide darkBlue-color"></v-toolbar-side-icon> 4 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide darkBlue-color"></v-toolbar-side-icon>
5 </v-toolbar-title> 5 </v-toolbar-title>
6 <!-- ****** SEARCH ALL EXISTING STUDENTS ****** --> 6 <!-- ****** SEARCH ALL EXISTING STUDENTS ****** -->
7 <v-flex xs12 class="white"> 7 <v-flex xs12 class="white">
8 <!-- <v-text-field 8 <!-- <v-text-field
9 flat 9 flat
10 append-icon="search" 10 append-icon="search"
11 label="Seacrh" 11 label="Seacrh"
12 class="pl-3" 12 class="pl-3"
13 color="white" 13 color="white"
14 @input.native="emitSearch" 14 @input.native="emitSearch"
15 type="text" 15 type="text"
16 dark 16 dark
17 ></v-text-field>--> 17 ></v-text-field>-->
18 <v-toolbar-title class="header-route-name pl-2">{{ $route.name }}</v-toolbar-title> 18 <v-toolbar-title class="header-route-name pl-2">{{ $route.name }}</v-toolbar-title>
19 </v-flex> 19 </v-flex>
20 <v-spacer></v-spacer> 20 <v-spacer></v-spacer>
21 <v-btn type="button" @click="goToSchool" v-if="adminRole">Towards School!</v-btn>
21 <v-toolbar-items class="hidden-sm-and-down"> 22 <v-toolbar-items class="hidden-sm-and-down">
22 <v-icon class="header-icon">notifications_none</v-icon> 23 <v-icon class="header-icon">notifications_none</v-icon>
23 </v-toolbar-items> 24 </v-toolbar-items>
24 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition"> 25 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
25 <v-btn icon large flat slot="activator"> 26 <v-btn icon large flat slot="activator">
26 <v-avatar size="26"> 27 <v-avatar size="26">
27 <img src="/static/icon/setting1.png" alt="icon" /> 28 <img src="/static/icon/setting1.png" alt="icon" />
28 </v-avatar> 29 </v-avatar>
29 </v-btn> 30 </v-btn>
30 <v-list class="pa-0"> 31 <v-list class="pa-0">
31 <v-list-tile 32 <v-list-tile
32 v-for="(item,index) in items" 33 v-for="(item,index) in items"
33 :to="!item.href ? { name: item.name } : null" 34 :to="!item.href ? { name: item.name } : null"
34 :href="item.href" 35 :href="item.href"
35 @click="item.click" 36 @click="item.click"
36 ripple="ripple" 37 ripple="ripple"
37 :disabled="item.disabled" 38 :disabled="item.disabled"
38 :target="item.target" 39 :target="item.target"
39 rel="noopener" 40 rel="noopener"
40 :key="index" 41 :key="index"
41 > 42 >
42 <v-list-tile-action v-if="item.icon"> 43 <v-list-tile-action v-if="item.icon">
43 <v-icon class="iconSize">{{ item.icon }}</v-icon> 44 <v-icon class="iconSize">{{ item.icon }}</v-icon>
44 </v-list-tile-action> 45 </v-list-tile-action>
45 <v-list-tile-content> 46 <v-list-tile-content>
46 <v-list-tile-title>{{ item.title }}</v-list-tile-title> 47 <v-list-tile-title>{{ item.title }}</v-list-tile-title>
47 </v-list-tile-content> 48 </v-list-tile-content>
48 </v-list-tile> 49 </v-list-tile>
49 </v-list> 50 </v-list>
50 </v-menu> 51 </v-menu>
51 </v-toolbar> 52 </v-toolbar>
52 </template> 53 </template>
53 <script> 54 <script>
54 import http from "@/Services/http.js"; 55 import http from "@/Services/http.js";
55 56
56 export default { 57 export default {
57 name: "app-toolbar", 58 name: "app-toolbar",
58 data: () => ({ 59 data: () => ({
59 userName: "", 60 userName: "",
60 search: "", 61 search: "",
61 userData: {}, 62 userData: {},
62 items: [ 63 items: [
63 { 64 {
64 icon: "account_circle", 65 icon: "account_circle",
65 href: "/resetPassword", 66 href: "/resetPassword",
66 title: "Change Password", 67 title: "Change Password",
67 click: e => { 68 click: e => {
68 console.log(e); 69 console.log(e);
69 } 70 }
70 }, 71 },
71 // { 72 // {
72 // icon: 'settings', 73 // icon: 'settings',
73 // href: '#', 74 // href: '#',
74 // title: 'Settings', 75 // title: 'Settings',
75 // click: (e) => { 76 // click: (e) => {
76 // console.log(e); 77 // console.log(e);
77 // } 78 // }
78 // }, 79 // },
79 { 80 {
80 icon: "lock", 81 icon: "lock",
81 href: "#", 82 href: "#",
82 title: "Logout", 83 title: "Logout",
83 click: e => { 84 click: e => {
84 window.getApp.$emit("APP_LOGOUT"); 85 window.getApp.$emit("APP_LOGOUT");
85 } 86 }
86 } 87 }
87 ] 88 ],
89 adminRole: ""
88 }), 90 }),
89 computed: { 91 computed: {
90 toolbarColor() { 92 toolbarColor() {
91 return this.$vuetify.options.extra.mainNav; 93 return this.$vuetify.options.extra.mainNav;
92 } 94 }
93 }, 95 },
94 mounted() { 96 mounted() {
95 // this.getUserData(); 97 // this.getUserData();
98 this.adminRole = this.$store.state.role;
99 console.log("this.adminRole", this.adminRole);
96 }, 100 },
97 methods: { 101 methods: {
98 // emitSearch(ev) { 102 // emitSearch(ev) {
99 // this.$root.$emit("app:search", ev.target.value); 103 // this.$root.$emit("app:search", ev.target.value);
100 // }, 104 // },
101 handleDrawerToggle() { 105 handleDrawerToggle() {
102 window.getApp.$emit("APP_DRAWER_TOGGLED"); 106 window.getApp.$emit("APP_DRAWER_TOGGLED");
103 }, 107 },
104 handleFullScreen() { 108 handleFullScreen() {
105 Util.toggleFullScreen(); 109 Util.toggleFullScreen();
106 }, 110 },
107 getUserData() { 111 getUserData() {
108 http() 112 http()
109 .get("/getParticularUserDetail", { 113 .get("/getParticularUserDetail", {
110 // headers: { 114 // headers: {
111 // Authorization: "Bearer " + this.$store.state.token 115 // Authorization: "Bearer " + this.$store.state.token
112 // } 116 // }
113 }) 117 })
114 .then(response => { 118 .then(response => {
115 this.userData = response.data.data; 119 this.userData = response.data.data;
116 }) 120 })
117 .catch(error => { 121 .catch(error => {
118 // if (error.response.status === 401) { 122 // if (error.response.status === 401) {
119 // this.$router.replace({ path: "/" }); 123 // this.$router.replace({ path: "/" });
120 // this.$store.dispatch("setToken", null); 124 // this.$store.dispatch("setToken", null);
121 // this.$store.dispatch("Id", null); 125 // this.$store.dispatch("Id", null);
122 // } 126 // }
123 }); 127 });
128 },
129 goToSchool() {
130 console.log("click");
131 if (this.$store.state.role === "ADMIN") {
132 this.$store.dispatch("Role", null);
133 this.$store.dispatch("setToken", null);
134 this.$router.push("/schooldashboard");
135 setTimeout(() => {
136 location.reload();
137 }, 1000);
138 }
124 } 139 }
125 } 140 }
126 }; 141 };
127 </script> 142 </script>
128 <style> 143 <style>
129 .v-icon { 144 .v-icon {
130 font-size: 30px; 145 font-size: 30px;
131 } 146 }
132 .fixcolors { 147 .fixcolors {
133 background: #444b54 !important; 148 background: #444b54 !important;
134 } 149 }
135 150
136 @media screen and (min-width: 1270px) { 151 @media screen and (min-width: 1270px) {
137 .hide { 152 .hide {
138 display: none; 153 display: none;
139 } 154 }
140 /* } 155 /* }
141 @media screen and (max-width: 962px) { 156 @media screen and (max-width: 962px) {
142 .imglogo{ 157 .imglogo{
143 position: absolute; 158 position: absolute;
144 top: 13px; 159 top: 13px;
145 left: 13px !important; 160 left: 13px !important;
146 width: 70px; 161 width: 70px;
147 height: 24px; 162 height: 24px;
148 } */ 163 } */
149 } 164 }
150 @media screen and (max-width: 420px) { 165 @media screen and (max-width: 420px) {
151 .v-list__tile { 166 .v-list__tile {
152 font-size: 14px; 167 font-size: 14px;
153 padding: 0 10px; 168 padding: 0 10px;
154 } 169 }
155 .name { 170 .name {
156 font-size: 15px; 171 font-size: 15px;
157 } 172 }
158 } 173 }
159 </style> 174 </style>
160 175
src/pages/Dashboard/dashboard.vue
Diff comments   View file @68d600c
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <!-- ****** VIEW PROFIL NOTICE BOARD ****** --> 3 <!-- ****** VIEW PROFIL NOTICE BOARD ****** -->
4 <!-- <v-dialog v-model="dialogNotice" max-width="940px" scrollable> 4 <!-- <v-dialog v-model="dialogNotice" max-width="940px" scrollable>
5 <v-card> 5 <v-card>
6 <v-toolbar color="grey lighten-2" flat> 6 <v-toolbar color="grey lighten-2" flat>
7 <v-spacer></v-spacer> 7 <v-spacer></v-spacer>
8 <v-toolbar-title> 8 <v-toolbar-title>
9 <h3>Notice Board</h3> 9 <h3>Notice Board</h3>
10 </v-toolbar-title> 10 </v-toolbar-title>
11 <v-spacer></v-spacer> 11 <v-spacer></v-spacer>
12 <v-icon @click="closeNotice">close</v-icon> 12 <v-icon @click="closeNotice">close</v-icon>
13 </v-toolbar> 13 </v-toolbar>
14 <v-card-text> 14 <v-card-text>
15 <v-layout> 15 <v-layout>
16 <v-flex align-center justify-center layout text-xs-center class="mt-2"> 16 <v-flex align-center justify-center layout text-xs-center class="mt-2">
17 <img src="/static/icon/user.png" width="70px" v-if="!notice.eventImageUrl" /> 17 <img src="/static/icon/user.png" width="70px" v-if="!notice.eventImageUrl" />
18 <img :src="notice.eventImageUrl" width="280px" v-else-if="notice.eventImageUrl" /> 18 <img :src="notice.eventImageUrl" width="280px" v-else-if="notice.eventImageUrl" />
19 </v-flex> 19 </v-flex>
20 </v-layout> 20 </v-layout>
21 <v-container grid-list-md> 21 <v-container grid-list-md>
22 <v-layout wrap> 22 <v-layout wrap>
23 <v-flex> 23 <v-flex>
24 <v-layout> 24 <v-layout>
25 <v-flex xs5 sm6> 25 <v-flex xs5 sm6>
26 <h5 class="right my-1"> 26 <h5 class="right my-1">
27 <b>Title:</b> 27 <b>Title:</b>
28 </h5> 28 </h5>
29 </v-flex> 29 </v-flex>
30 <v-flex sm6 xs8> 30 <v-flex sm6 xs8>
31 <h5 class="my-1">{{ notice.title }}</h5> 31 <h5 class="my-1">{{ notice.title }}</h5>
32 </v-flex> 32 </v-flex>
33 </v-layout> 33 </v-layout>
34 <v-layout> 34 <v-layout>
35 <v-flex xs5 sm6> 35 <v-flex xs5 sm6>
36 <h5 class="right my-1"> 36 <h5 class="right my-1">
37 <b>Description:</b> 37 <b>Description:</b>
38 </h5> 38 </h5>
39 </v-flex> 39 </v-flex>
40 <v-flex sm6 xs8> 40 <v-flex sm6 xs8>
41 <h5 class="my-1">{{ notice.description }}</h5> 41 <h5 class="my-1">{{ notice.description }}</h5>
42 </v-flex> 42 </v-flex>
43 </v-layout> 43 </v-layout>
44 </v-flex> 44 </v-flex>
45 </v-layout> 45 </v-layout>
46 </v-container> 46 </v-container>
47 </v-card-text> 47 </v-card-text>
48 </v-card> 48 </v-card>
49 </v-dialog>--> 49 </v-dialog>-->
50 <!-- <v-container fluid grid-list-xl> --> 50 <!-- <v-container fluid grid-list-xl> -->
51 <v-layout wrap> 51 <v-layout wrap>
52 <v-flex xs12> 52 <v-flex xs12>
53 <v-layout wrap row> 53 <v-layout wrap row>
54 <!-- ***** Total Students ***** --> 54 <!-- ***** Total Students ***** -->
55 <v-flex xs12 sm12 md9> 55 <v-flex xs12 sm12 md9>
56 <v-container fluid grid-list-xl> 56 <v-container fluid grid-list-xl>
57 <v-flex xs12 sm12 md12> 57 <v-flex xs12 sm12 md12>
58 <v-layout wrap class> 58 <v-layout wrap class>
59 <v-flex xs12 sm12 md3> 59 <v-flex xs12 sm12 md3>
60 <router-link :to="{ name:'Students' }"> 60 <router-link :to="{ name:'Students' }">
61 <v-card class="card pink-bgcolor"> 61 <v-card class="card pink-bgcolor">
62 <v-card-title primary-title class="titleCard white--text py-3">Students</v-card-title> 62 <v-card-title primary-title class="titleCard white--text py-3">Students</v-card-title>
63 <img src="/static/icon/student.png" class="ml-2" width="40" alt="icons" /> 63 <img src="/static/icon/student.png" class="ml-2" width="40" alt="icons" />
64 <v-card-title class="headline py-1 white--text">{{ students.length }}</v-card-title> 64 <v-card-title class="headline py-1 white--text">{{ students.length }}</v-card-title>
65 </v-card> 65 </v-card>
66 </router-link> 66 </router-link>
67 </v-flex> 67 </v-flex>
68 <!-- ***** Total Teachers***** --> 68 <!-- ***** Total Teachers***** -->
69 <v-flex xs12 sm12 md3> 69 <v-flex xs12 sm12 md3>
70 <router-link :to="{ name:'Teachers' }"> 70 <router-link :to="{ name:'Teachers' }">
71 <v-card flat class="card elevation-2 firozi-bgcolor"> 71 <v-card flat class="card elevation-2 firozi-bgcolor">
72 <v-card-title primary-title class="titleCard white--text py-3">Teachers</v-card-title> 72 <v-card-title primary-title class="titleCard white--text py-3">Teachers</v-card-title>
73 <img src="/static/icon/teacher.png" class="ml-2" width="40" alt="icons" /> 73 <img src="/static/icon/teacher.png" class="ml-2" width="40" alt="icons" />
74 74
75 <v-card-title class="headline py-1 white--text">{{ teachers.length }}</v-card-title> 75 <v-card-title class="headline py-1 white--text">{{ teachers.length }}</v-card-title>
76 </v-card> 76 </v-card>
77 </router-link> 77 </router-link>
78 </v-flex> 78 </v-flex>
79 <!-- ***** Total Parents ***** --> 79 <!-- ***** Total Parents ***** -->
80 <v-flex xs12 sm12 md3> 80 <v-flex xs12 sm12 md3>
81 <router-link :to="{ name:'Parents' }"> 81 <router-link :to="{ name:'Parents' }">
82 <v-card flat class="card yellow darken-3"> 82 <v-card flat class="card yellow darken-3">
83 <v-card-title primary-title class="titleCard white--text py-3">Parents</v-card-title> 83 <v-card-title primary-title class="titleCard white--text py-3">Parents</v-card-title>
84 <img src="/static/icon/parents.png" class="ml-3" width="40px" alt="icons" /> 84 <img src="/static/icon/parents.png" class="ml-3" width="40px" alt="icons" />
85 <v-card-title class="headline py-1 white--text">{{ parents.length }}</v-card-title> 85 <v-card-title class="headline py-1 white--text">{{ parents.length }}</v-card-title>
86 </v-card> 86 </v-card>
87 </router-link> 87 </router-link>
88 </v-flex> 88 </v-flex>
89 <!-- ***** Total Class***** --> 89 <!-- ***** Total Class***** -->
90 <v-flex xs12 sm12 md3> 90 <v-flex xs12 sm12 md3>
91 <router-link :to="{ name:'Class' }"> 91 <router-link :to="{ name:'Class' }">
92 <v-card flat class="card darkBlue-bgcolor"> 92 <v-card flat class="card darkBlue-bgcolor">
93 <v-card-title primary-title class="titleCard white--text py-3">Class</v-card-title> 93 <v-card-title primary-title class="titleCard white--text py-3">Class</v-card-title>
94 <img src="/static/icon/class.png" width="40" alt="icons" class="ml-2" /> 94 <img src="/static/icon/class.png" width="40" alt="icons" class="ml-2" />
95 <v-card-title class="headline py-1 white--text">{{ classes.length }}</v-card-title> 95 <v-card-title class="headline py-1 white--text">{{ classes.length }}</v-card-title>
96 </v-card> 96 </v-card>
97 </router-link> 97 </router-link>
98 </v-flex> 98 </v-flex>
99 </v-layout> 99 </v-layout>
100 </v-flex> 100 </v-flex>
101 <v-layout> 101 <v-layout>
102 <v-flex xs12> 102 <v-flex xs12>
103 <v-card class="card mt-2 account-Card"> 103 <v-card class="card mt-2 account-Card">
104 <h4> 104 <h4>
105 <b>Account</b> 105 <b>Account</b>
106 </h4> 106 </h4>
107 <v-layout wrap> 107 <v-layout wrap>
108 <v-flex xs12 sm12 md3> 108 <v-flex xs12 sm12 md3>
109 <v-list two-line> 109 <v-list two-line>
110 <template> 110 <template>
111 <v-list-tile> 111 <v-list-tile>
112 <v-list-tile-avatar> 112 <v-list-tile-avatar>
113 <v-icon class="account-circle darkBlue-color">panorama_fish_eye</v-icon> 113 <v-icon class="account-circle darkBlue-color">panorama_fish_eye</v-icon>
114 </v-list-tile-avatar> 114 </v-list-tile-avatar>
115 <v-list-tile-content> 115 <v-list-tile-content>
116 <v-list-tile-title class="mt-2"> 116 <v-list-tile-title class="mt-2">
117 <p class="subheading font-color">Fees</p> 117 <p class="subheading font-color">Fees</p>
118 </v-list-tile-title> 118 </v-list-tile-title>
119 <v-list-tile-title>Rs 1000</v-list-tile-title> 119 <v-list-tile-title>Rs 1000</v-list-tile-title>
120 </v-list-tile-content> 120 </v-list-tile-content>
121 </v-list-tile> 121 </v-list-tile>
122 <v-list-tile> 122 <v-list-tile>
123 <v-list-tile-avatar> 123 <v-list-tile-avatar>
124 <v-icon class="account-circle yellowDark-color">panorama_fish_eye</v-icon> 124 <v-icon class="account-circle yellowDark-color">panorama_fish_eye</v-icon>
125 </v-list-tile-avatar> 125 </v-list-tile-avatar>
126 <v-list-tile-content> 126 <v-list-tile-content>
127 <v-list-tile-title class="mt-2"> 127 <v-list-tile-title class="mt-2">
128 <p class="subheading font-color">Collection</p> 128 <p class="subheading font-color">Collection</p>
129 </v-list-tile-title> 129 </v-list-tile-title>
130 <v-list-tile-title>Rs 2000</v-list-tile-title> 130 <v-list-tile-title>Rs 2000</v-list-tile-title>
131 </v-list-tile-content> 131 </v-list-tile-content>
132 </v-list-tile> 132 </v-list-tile>
133 <v-list-tile> 133 <v-list-tile>
134 <v-list-tile-avatar> 134 <v-list-tile-avatar>
135 <v-icon class="account-circle pink-color">panorama_fish_eye</v-icon> 135 <v-icon class="account-circle pink-color">panorama_fish_eye</v-icon>
136 </v-list-tile-avatar> 136 </v-list-tile-avatar>
137 <v-list-tile-content> 137 <v-list-tile-content>
138 <v-list-tile-title class="mt-2"> 138 <v-list-tile-title class="mt-2">
139 <p class="subheading font-color">Expences</p> 139 <p class="subheading font-color">Expences</p>
140 </v-list-tile-title> 140 </v-list-tile-title>
141 <v-list-tile-title>Rs 3000</v-list-tile-title> 141 <v-list-tile-title>Rs 3000</v-list-tile-title>
142 </v-list-tile-content> 142 </v-list-tile-content>
143 </v-list-tile> 143 </v-list-tile>
144 </template> 144 </template>
145 </v-list> 145 </v-list>
146 </v-flex> 146 </v-flex>
147 <v-flex xs12 sm12 md9> 147 <v-flex xs12 sm12 md9 lg9>
148 <div id="chart"> 148 <!-- <div id="chart"> -->
149 <apexchart 149 <apexchart
150 type="bar" 150 type="bar"
151 height="250" 151 height="250"
152 style="max-width: 800px !important"
152 :options="chartOptions" 153 :options="chartOptions"
153 :series="series" 154 :series="series"
154 ></apexchart> 155 ></apexchart>
155 </div> 156 <!-- </div> -->
156 </v-flex> 157 </v-flex>
157 </v-layout> 158 </v-layout>
158 </v-card> 159 </v-card>
159 </v-flex> 160 </v-flex>
160 </v-layout> 161 </v-layout>
161 <v-card class="mt-2 card"> 162 <v-card class="mt-2 card">
162 <!-- <full-calendar 163 <!-- <full-calendar
163 ref="calendar" 164 ref="calendar"
164 defaultView="month" 165 defaultView="month"
165 droppable="false" 166 droppable="false"
166 :events="events" 167 :events="events"
167 :config="config" 168 :config="config"
168 ></full-calendar>--> 169 ></full-calendar>-->
169 <h4 class="pa-3"> 170 <h4 class="pa-3">
170 <b>Notice</b> 171 <b>Notice</b>
171 </h4> 172 </h4>
172 173
173 <v-data-table 174 <v-data-table
174 :items="noticeData" 175 :items="noticeData"
175 class="elevation-0" 176 class="elevation-0"
176 flat 177 flat
177 hide-actions 178 hide-actions
178 hide-headers 179 hide-headers
179 style="border-spacing: 0 !important;" 180 style="border-spacing: 0 !important;"
180 > 181 >
181 <template 182 <template
182 slot="items" 183 slot="items"
183 slot-scope="props" 184 slot-scope="props"
184 v-if="props.index < 5" 185 v-if="props.index < 5"
185 style="border-spacing: 0 !important;" 186 style="border-spacing: 0 !important;"
186 > 187 >
187 <tr class="td-notice"> 188 <tr class="td-notice">
188 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td> 189 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
189 <td> 190 <td>
190 <span class="grey--text caption">{{ date(props.item.created) }}</span> 191 <span class="grey--text caption">{{ date(props.item.created) }}</span>
191 <br /> 192 <br />
192 <span class="body-2">{{ props.item.title}}</span> 193 <span class="body-2">{{ props.item.title}}</span>
193 </td> 194 </td>
194 <td class="noticeDecritpion grey--text mt-2">{{ props.item.description}}</td> 195 <td class="noticeDecritpion grey--text mt-2">{{ props.item.description}}</td>
195 196
196 <td class="text-xs-center"> 197 <td class="text-xs-center">
197 <span> 198 <span>
198 <v-tooltip top> 199 <v-tooltip top>
199 <img 200 <img
200 slot="activator" 201 slot="activator"
201 style="cursor:pointer; width:25px; height:25px; " 202 style="cursor:pointer; width:25px; height:25px; "
202 @click="profile" 203 @click="profile"
203 src="/static/icon/view.png" 204 src="/static/icon/view.png"
204 /> 205 />
205 <span>View</span> 206 <span>View</span>
206 </v-tooltip> 207 </v-tooltip>
207 </span> 208 </span>
208 </td> 209 </td>
209 </tr> 210 </tr>
210 </template> 211 </template>
211 </v-data-table> 212 </v-data-table>
212 </v-card> 213 </v-card>
213 </v-container> 214 </v-container>
214 </v-flex> 215 </v-flex>
215 <v-flex xs12 sm12 md3> 216 <v-flex xs12 sm12 md3>
216 <v-card height="100%" class="elevation-0 mt-3 profileDasboard"> 217 <v-card height="100%" class="elevation-0 mt-3 profileDasboard">
217 <v-card-text> 218 <v-card-text>
218 <h4 class="text-xs-center py-3"> 219 <h4 class="text-xs-center py-3">
219 <b>Profile</b> 220 <b>Profile</b>
220 </h4> 221 </h4>
221 <v-flex xs12 class="py-3"> 222 <v-flex xs12 class="py-3">
222 <v-layout wrap> 223 <v-layout wrap>
223 <v-flex xs12 sm12 md4> 224 <v-flex xs12 sm12 md4>
224 <img src="/static/icon/user.png" v-if="!userData.schoolLogoUrl" width="80" /> 225 <img src="/static/icon/user.png" v-if="!userData.schoolLogoUrl" width="80" />
225 <img 226 <img
226 :src="userData.schoolLogoUrl" 227 :src="userData.schoolLogoUrl"
227 v-else-if="userData.schoolLogoUrl" 228 v-else-if="userData.schoolLogoUrl"
228 width="80" 229 width="80"
229 /> 230 />
230 </v-flex> 231 </v-flex>
231 <v-flex xs12 sm12 md6> 232 <v-flex xs12 sm12 md6>
232 <p class="mb-0 body-1"> 233 <p class="mb-0 body-1">
233 <i>{{ userData.name }}</i> 234 <i>{{ userData.name }}</i>
234 </p> 235 </p>
235 <p class="mb-0 caption grey--text">{{ userData.email }}</p> 236 <p class="mb-0 caption grey--text">{{ userData.email }}</p>
236 <p class="mb-0 caption grey--text">{{ userData.mobile }}</p> 237 <p class="mb-0 caption grey--text">{{ userData.mobile }}</p>
237 <address class="caption grey--text mb-3">{{ userData.address }}</address> 238 <address class="caption grey--text mb-3">{{ userData.address }}</address>
238 </v-flex> 239 </v-flex>
239 </v-layout> 240 </v-layout>
240 </v-flex> 241 </v-flex>
241 <hr /> 242 <hr />
242 <h4 class="text-xs-center py-3"> 243 <h4 class="text-xs-center py-3">
243 <b>Calender</b> 244 <b>Calender</b>
244 </h4> 245 </h4>
245 <vue-event-calendar :events="demoEvents"></vue-event-calendar> 246 <vue-event-calendar :events="demoEvents"></vue-event-calendar>
246 </v-card-text> 247 </v-card-text>
247 </v-card> 248 </v-card>
248 </v-flex> 249 </v-flex>
249 </v-layout> 250 </v-layout>
250 </v-flex> 251 </v-flex>
251 </v-layout> 252 </v-layout>
252 <v-dialog v-model="dialog" max-width="500"> 253 <v-dialog v-model="dialog" max-width="500">
253 <v-card color="grey lighten-4" flat> 254 <v-card color="grey lighten-4" flat>
254 <v-toolbar dark color="fixcolors"> 255 <v-toolbar dark color="fixcolors">
255 <v-spacer></v-spacer> 256 <v-spacer></v-spacer>
256 <v-btn icon @click="dialog= false"> 257 <v-btn icon @click="dialog= false">
257 <v-icon>close</v-icon> 258 <v-icon>close</v-icon>
258 </v-btn> 259 </v-btn>
259 </v-toolbar> 260 </v-toolbar>
260 <v-flex class="py-4"> 261 <v-flex class="py-4">
261 <v-list-tile> 262 <v-list-tile>
262 <v-list-tile-action> 263 <v-list-tile-action>
263 <v-icon>edit</v-icon> 264 <v-icon>edit</v-icon>
264 </v-list-tile-action> 265 </v-list-tile-action>
265 <v-list-tile-content> 266 <v-list-tile-content>
266 <v-list-tile-title>{{ selected.title }}</v-list-tile-title> 267 <v-list-tile-title>{{ selected.title }}</v-list-tile-title>
267 </v-list-tile-content> 268 </v-list-tile-content>
268 </v-list-tile> 269 </v-list-tile>
269 <v-list-tile> 270 <v-list-tile>
270 <v-list-tile-action> 271 <v-list-tile-action>
271 <v-icon>access_time</v-icon> 272 <v-icon>access_time</v-icon>
272 </v-list-tile-action> 273 </v-list-tile-action>
273 <v-list-tile-content> 274 <v-list-tile-content>
274 <v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title> 275 <v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title>
275 </v-list-tile-content> 276 </v-list-tile-content>
276 </v-list-tile> 277 </v-list-tile>
277 </v-flex> 278 </v-flex>
278 </v-card> 279 </v-card>
279 </v-dialog> 280 </v-dialog>
280 <div class="loader" v-if="showLoader"> 281 <div class="loader" v-if="showLoader">
281 <v-progress-circular indeterminate color="white"></v-progress-circular> 282 <v-progress-circular indeterminate color="white"></v-progress-circular>
282 </div> 283 </div>
283 </v-app> 284 </v-app>
284 </template> 285 </template>
285 286
286 <script> 287 <script>
287 import http from "@/Services/http.js"; 288 import http from "@/Services/http.js";
288 import moment from "moment"; 289 import moment from "moment";
289 // import { FunctionalCalendar } from "vue-functional-calendar"; 290 // import { FunctionalCalendar } from "vue-functional-calendar";
290 291
291 export default { 292 export default {
292 components: { 293 components: {
293 // FunctionalCalendar 294 // FunctionalCalendar
294 }, 295 },
295 data() { 296 data() {
296 return { 297 return {
297 // data: { 298 // data: {
298 // clieckedToday: false 299 // clieckedToday: false
299 // }, 300 // },
300 // markedDates: ["16/4/2019", "18/4/2019", "20/4/2019", "21/4/2019"], 301 // markedDates: ["16/4/2019", "18/4/2019", "20/4/2019", "21/4/2019"],
301 // calendarData: {}, 302 // calendarData: {},
302 // calendar: {}, 303 // calendar: {},
303 demoEvents: [ 304 demoEvents: [
304 { 305 {
305 date: "2020/01/10", // Required 306 date: "2020/01/10", // Required
306 title: "Foo" // Required 307 title: "Foo" // Required
307 }, 308 },
308 { 309 {
309 date: "2020/01/12", 310 date: "2020/01/12",
310 title: "Bar", 311 title: "Bar",
311 desc: "description", 312 desc: "description",
312 customClass: "disabled highlight" // Custom classes to an calendar cell 313 customClass: "disabled highlight" // Custom classes to an calendar cell
313 } 314 }
314 ], 315 ],
315 316
316 showLoader: false, 317 showLoader: false,
317 calendarData: {}, 318 calendarData: {},
318 dialog: false, 319 dialog: false,
319 dialogNotice: false, 320 dialogNotice: false,
320 HolidaysList: [], 321 HolidaysList: [],
321 EventsList: [], 322 EventsList: [],
322 events: [], 323 events: [],
323 config: { 324 config: {
324 eventClick: event => { 325 eventClick: event => {
325 this.selected = event; 326 this.selected = event;
326 this.dialog = true; 327 this.dialog = true;
327 } 328 }
328 }, 329 },
329 selected: {}, 330 selected: {},
330 // notice: {}, 331 // notice: {},
331 userData: {}, 332 userData: {},
332 dated: new Date(2018, 0, 9), 333 dated: new Date(2018, 0, 9),
333 userList: [], 334 userList: [],
334 sectionList: [], 335 sectionList: [],
335 students: "", 336 students: "",
336 parents: "", 337 parents: "",
337 teachers: "", 338 teachers: "",
338 classes: "", 339 classes: "",
339 noticeData: [], 340 noticeData: [],
340 attrs: [ 341 attrs: [
341 { 342 {
342 key: "today", 343 key: "today",
343 highlight: true, 344 highlight: true,
344 dates: new Date() 345 dates: new Date()
345 } 346 }
346 ], 347 ],
347 drawer: true, 348 drawer: true,
348 items: [ 349 items: [
349 { title: "Home", icon: "dashboard" }, 350 { title: "Home", icon: "dashboard" },
350 { title: "About", icon: "question_answer" } 351 { title: "About", icon: "question_answer" }
351 ], 352 ],
352 right: null, 353 right: null,
353 354
354 series: [ 355 series: [
355 { 356 {
356 name: "Total", 357 name: "Total",
357 data: [66, 44, 33] 358 data: [66, 44, 33]
358 } 359 }
359 ], 360 ],
360 chartOptions: { 361 chartOptions: {
361 chart: { 362 chart: {
362 type: "bar", 363 type: "bar",
363 height: 150, 364 height: 150,
364 animations: { 365 stacked: true
365 enabled: true, 366 // animations: {
366 easing: "easeinout", 367 // enabled: true,
367 speed: 1200, 368 // easing: "easeinout",
368 animateGradually: { 369 // speed: 1200,
369 enabled: true, 370 // animateGradually: {
370 delay: 450 371 // enabled: true,
371 }, 372 // delay: 450
372 dynamicAnimation: { 373 // },
373 enabled: true, 374 // dynamicAnimation: {
374 speed: 450 375 // enabled: true,
375 } 376 // speed: 450
376 } 377 // }
378 // }
377 }, 379 },
378 plotOptions: { 380 plotOptions: {
379 bar: { 381 bar: {
380 horizontal: false, 382 horizontal: false,
381 columnWidth: "25%", 383 columnWidth: "25%",
382 // endingShape: "rounded", 384 // endingShape: "rounded",
383 distributed: true 385 distributed: true
384 } 386 }
385 }, 387 },
388 responsive: [
389 {
390 breakpoint: 480,
391 options: {
392 legend: {
393 position: "bottom",
394 offsetX: -10,
395 offsetY: 0
396 }
397 }
398 }
399 ],
386 legend: { 400 legend: {
387 show: false 401 show: false
388 }, 402 },
389 colors: ["#7852cc", "#f9a825", "#ff8a89"], 403 colors: ["#7852cc", "#f9a825", "#ff8a89"],
390 dataLabels: { 404 dataLabels: {
391 enabled: false 405 enabled: false
392 }, 406 },
393 stroke: { 407 stroke: {
394 show: true, 408 show: true,
395 width: 2, 409 width: 2,
396 colors: ["transparent"] 410 colors: ["transparent"]
397 }, 411 },
398 xaxis: { 412 xaxis: {
399 categories: ["Fee", "Collections", "Expences"] 413 categories: ["Fee", "Collections", "Expences"]
400 }, 414 },
401 yaxis: { 415 yaxis: {
402 title: { 416 title: {
403 text: "" 417 text: ""
404 } 418 }
405 }, 419 },
406 fill: { 420 fill: {
407 opacity: 1 421 opacity: 1
408 }, 422 },
409 tooltip: { 423 tooltip: {
410 y: { 424 y: {
411 formatter: function(val, opts) { 425 formatter: function(val, opts) {
412 // console.log("opts",opts.w.config.xaxis.categories) 426 // console.log("opts",opts.w.config.xaxis.categories)
413 return "" + val + " "; 427 return "" + val + " ";
414 } 428 }
415 } 429 }
416 } 430 }
417 } 431 }
418 }; 432 };
419 }, 433 },
420 mounted() { 434 mounted() {
421 // = this.$store.state.schoolToken; 435 // = this.$store.state.schoolToken;
422 // console.log("this.$store.state.role", this.token); 436 // console.log("this.$store.state.role", this.token);
423 if (this.$store.state.role === "ADMIN") { 437 if (this.$store.state.role === "ADMIN") {
424 this.token = this.$store.state.token; 438 this.token = this.$store.state.token;
425 } else if (this.$store.state.schoolRole === "SUPERADMIN") { 439 } else if (this.$store.state.schoolRole === "SUPERADMIN") {
426 this.token = this.$store.state.schoolToken; 440 this.token = this.$store.state.schoolToken;
427 } 441 }
428 // console.log("role", this.$store.state.schoolRole,"tt",this.$store.state.schoolToken); 442 // console.log("role", this.$store.state.schoolRole,"tt",this.$store.state.schoolToken);
429 // this.getData(); 443 // this.getData();
430 this.getStudents(); 444 this.getStudents();
431 this.getTeachers(); 445 this.getTeachers();
432 this.getParents(); 446 this.getParents();
433 this.getClasses(); 447 this.getClasses();
434 this.getNoticeData(); 448 this.getNoticeData();
435 this.getUserData(); 449 this.getUserData();
436 // this.getUsersList(); 450 // this.getUsersList();
437 }, 451 },
438 methods: { 452 methods: {
439 closeNotice() { 453 closeNotice() {
440 this.dialogNotice = false; 454 this.dialogNotice = false;
441 }, 455 },
442 profile() { 456 profile() {
443 // this.editedIndex = this.desserts.indexOf(item); 457 // this.editedIndex = this.desserts.indexOf(item);
444 // this.notice = Object.assign({}, item); 458 // this.notice = Object.assign({}, item);
445 // this.dialogNotice = true; 459 // this.dialogNotice = true;
446 this.$router.push({ name: "NoticeBoard" }); 460 this.$router.push({ name: "NoticeBoard" });
447 }, 461 },
448 date: function(date) { 462 date: function(date) {
449 return moment(date).format("MMMM DD, YYYY HH:mm"); 463 return moment(date).format("MMMM DD, YYYY HH:mm");
450 }, 464 },
451 refreshEvents() { 465 refreshEvents() {
452 this.$refs.calendar.$emit("refetch-events"); 466 this.$refs.calendar.$emit("refetch-events");
453 }, 467 },
454 removeEvent() { 468 removeEvent() {
455 this.$refs.calendar.$emit("remove-event", this.selected); 469 this.$refs.calendar.$emit("remove-event", this.selected);
456 this.selected = {}; 470 this.selected = {};
457 }, 471 },
458 eventSelected(event) { 472 eventSelected(event) {
459 this.selected = event; 473 this.selected = event;
460 console.log("this.selected", this.selected); 474 console.log("this.selected", this.selected);
461 }, 475 },
462 // eventDropStart: function(event) { 476 // eventDropStart: function(event) {
463 // event.editable = false; 477 // event.editable = false;
464 // }, 478 // },
465 eventCreated(...test) { 479 eventCreated(...test) {
466 console.log(test); 480 console.log(test);
467 }, 481 },
468 getStudents() { 482 getStudents() {
469 http() 483 http()
470 .get("/getStudentsList", { 484 .get("/getStudentsList", {
471 headers: { 485 headers: {
472 Authorization: "Bearer " + this.token 486 Authorization: "Bearer " + this.token
473 } 487 }
474 }) 488 })
475 .then(response => { 489 .then(response => {
476 this.students = response.data.data; 490 this.students = response.data.data;
477 this.showLoader = false; 491 this.showLoader = false;
478 }) 492 })
479 .catch(error => { 493 .catch(error => {
480 // console.log("err====>", err); 494 // console.log("err====>", err);
481 this.showLoader = false; 495 this.showLoader = false;
482 // if (error.response.status === 401) { 496 // if (error.response.status === 401) {
483 // this.$router.replace({ path: "/" }); 497 // this.$router.replace({ path: "/" });
484 // this.$store.dispatch("setToken", null); 498 // this.$store.dispatch("setToken", null);
485 // this.$store.dispatch("Id", null); 499 // this.$store.dispatch("Id", null);
486 // } 500 // }
487 }); 501 });
488 }, 502 },
489 getParents() { 503 getParents() {
490 http() 504 http()
491 .get("/getParentsList", { 505 .get("/getParentsList", {
492 headers: { 506 headers: {
493 Authorization: "Bearer " + this.token 507 Authorization: "Bearer " + this.token
494 } 508 }
495 }) 509 })
496 .then(response => { 510 .then(response => {
497 this.parents = response.data.data; 511 this.parents = response.data.data;
498 this.showLoader = false; 512 this.showLoader = false;
499 }) 513 })
500 .catch(error => { 514 .catch(error => {
501 // console.log("err====>", err); 515 // console.log("err====>", err);
502 this.showLoader = false; 516 this.showLoader = false;
503 // if (error.response.status === 401) { 517 // if (error.response.status === 401) {
504 // this.$router.replace({ path: "/" }); 518 // this.$router.replace({ path: "/" });
505 // this.$store.dispatch("setToken", null); 519 // this.$store.dispatch("setToken", null);
506 // this.$store.dispatch("Id", null); 520 // this.$store.dispatch("Id", null);
507 // } 521 // }
508 }); 522 });
509 }, 523 },
510 getTeachers() { 524 getTeachers() {
511 http() 525 http()
512 .get("/getTeachersList", { 526 .get("/getTeachersList", {
513 headers: { 527 headers: {
514 Authorization: "Bearer " + this.token 528 Authorization: "Bearer " + this.token
515 } 529 }
516 }) 530 })
517 .then(response => { 531 .then(response => {
518 this.teachers = response.data.data; 532 this.teachers = response.data.data;
519 this.showLoader = false; 533 this.showLoader = false;
520 }) 534 })
521 .catch(error => { 535 .catch(error => {
522 // console.log("err====>", err); 536 // console.log("err====>", err);
523 this.showLoader = false; 537 this.showLoader = false;
524 // if (error.response.status === 401) { 538 // if (error.response.status === 401) {
525 // this.$router.replace({ path: "/" }); 539 // this.$router.replace({ path: "/" });
526 // this.$store.dispatch("setToken", null); 540 // this.$store.dispatch("setToken", null);
527 // this.$store.dispatch("Id", null); 541 // this.$store.dispatch("Id", null);
528 // } 542 // }
529 }); 543 });
530 }, 544 },
531 getClasses() { 545 getClasses() {
532 http() 546 http()
533 .get("/getClassesList", { 547 .get("/getClassesList", {
534 headers: { 548 headers: {
535 Authorization: "Bearer " + this.token 549 Authorization: "Bearer " + this.token
536 } 550 }
537 }) 551 })
538 .then(response => { 552 .then(response => {
539 this.classes = response.data.data; 553 this.classes = response.data.data;
540 this.showLoader = false; 554 this.showLoader = false;
541 }) 555 })
542 .catch(error => { 556 .catch(error => {
543 this.showLoader = false; 557 this.showLoader = false;
544 // if (error.response.status === 401) { 558 // if (error.response.status === 401) {
545 // this.$router.replace({ path: "/" }); 559 // this.$router.replace({ path: "/" });
546 // this.$store.dispatch("setToken", null); 560 // this.$store.dispatch("setToken", null);
547 // this.$store.dispatch("Id", null); 561 // this.$store.dispatch("Id", null);
548 // this.$store.dispatch("Role", null); 562 // this.$store.dispatch("Role", null);
549 // } 563 // }
550 }); 564 });
551 }, 565 },
552 getNoticeData() { 566 getNoticeData() {
553 this.showLoader = true; 567 this.showLoader = true;
554 http() 568 http()
555 .get("/getEventsList", { 569 .get("/getEventsList", {
556 headers: { 570 headers: {
557 Authorization: "Bearer " + this.token 571 Authorization: "Bearer " + this.token
558 } 572 }
559 }) 573 })
560 .then(response => { 574 .then(response => {
561 this.noticeData = response.data.data; 575 this.noticeData = response.data.data;
562 this.showLoader = false; 576 this.showLoader = false;
563 }) 577 })
564 .catch(error => { 578 .catch(error => {
565 this.showLoader = false; 579 this.showLoader = false;
566 // if (error.response.status === 401) { 580 // if (error.response.status === 401) {
567 // this.$router.replace({ path: "/" }); 581 // this.$router.replace({ path: "/" });
568 // this.$store.dispatch("setToken", null); 582 // this.$store.dispatch("setToken", null);
569 // this.$store.dispatch("Id", null); 583 // this.$store.dispatch("Id", null);
570 // } 584 // }
571 }); 585 });
572 }, 586 },
573 getUserData() { 587 getUserData() {
574 // this.showLoader = true; 588 // this.showLoader = true;
575 http() 589 http()
576 .get("/getParticularUserDetail", { 590 .get("/getParticularUserDetail", {
577 headers: { 591 headers: {
578 Authorization: "Bearer " + this.token 592 Authorization: "Bearer " + this.token
579 } 593 }
580 }) 594 })
581 .then(response => { 595 .then(response => {
582 this.userData = response.data.data; 596 this.userData = response.data.data;
583 this.showLoader = false; 597 this.showLoader = false;
584 }) 598 })
585 .catch(error => { 599 .catch(error => {
586 this.showLoader = false; 600 this.showLoader = false;
587 // if (error.response.status === 401) { 601 // if (error.response.status === 401) {
588 // this.$router.replace({ path: "/" }); 602 // this.$router.replace({ path: "/" });
589 // this.$store.dispatch("setToken", null); 603 // this.$store.dispatch("setToken", null);
590 // this.$store.dispatch("Id", null); 604 // this.$store.dispatch("Id", null);
591 // } 605 // }
592 }); 606 });
593 } 607 }
594 } 608 }
595 }; 609 };
596 </script> 610 </script>
597 611
598 <style scoped> 612 <style scoped>
599 @import "fullcalendar/dist/fullcalendar.css"; 613 @import "fullcalendar/dist/fullcalendar.css";
600 </style> 614 </style>
src/pages/School/school.vue
Diff comments   View file @68d600c
1 <template> 1 <template>
2 <div> 2 <div>
3 <v-tabs grow slider-color="gray"> 3 <v-tabs grow slider-color="gray">
4 <v-tab 4 <v-tab
5 ripple 5 ripple
6 @click="activeTab('existing')" 6 @click="activeTab('existing')"
7 v-bind:class="{ active: isActive }" 7 v-bind:class="{ active: isActive }"
8 id="tab" 8 id="tab"
9 class="subheading" 9 class="subheading"
10 >Existing School</v-tab> 10 >Existing School</v-tab>
11 <v-tab 11 <v-tab
12 ripple 12 ripple
13 @click="activeTab('new')" 13 @click="activeTab('new')"
14 v-bind:class="{ active: newActive }" 14 v-bind:class="{ active: newActive }"
15 id="tab1" 15 id="tab1"
16 User 16 User
17 class="subheading" 17 class="subheading"
18 >Add New School</v-tab> 18 >Add New School</v-tab>
19 19
20 <!-- ****** EDITS STUDENTS DETAILS ****** --> 20 <!-- ****** EDITS STUDENTS DETAILS ****** -->
21 21
22 <v-tab-item> 22 <v-tab-item>
23 <v-snackbar 23 <v-snackbar
24 :timeout="timeout" 24 :timeout="timeout"
25 :top="y === 'top'" 25 :top="y === 'top'"
26 :right="x === 'right'" 26 :right="x === 'right'"
27 :vertical="mode === 'vertical'" 27 :vertical="mode === 'vertical'"
28 v-model="snackbar" 28 v-model="snackbar"
29 color="success" 29 color="success"
30 >{{ text }}</v-snackbar> 30 >{{ text }}</v-snackbar>
31 <v-dialog v-model="dialog" max-width="1500px" scrollable> 31 <v-dialog v-model="dialog" max-width="1500px" scrollable>
32 <v-card flat> 32 <v-card flat>
33 <v-toolbar color="grey lighten-2" flat> 33 <v-toolbar color="grey lighten-2" flat>
34 <v-spacer></v-spacer> 34 <v-spacer></v-spacer>
35 <v-toolbar-title> 35 <v-toolbar-title>
36 <h3>Edit School</h3> 36 <h3>Edit School</h3>
37 </v-toolbar-title> 37 </v-toolbar-title>
38 <v-spacer></v-spacer> 38 <v-spacer></v-spacer>
39 </v-toolbar> 39 </v-toolbar>
40 <v-card-text style="height: 686px;"> 40 <v-card-text style="height: 686px;">
41 <v-form ref="form"> 41 <v-form ref="form">
42 <v-container fluid> 42 <v-container fluid>
43 <v-layout> 43 <v-layout>
44 <v-flex 44 <v-flex
45 xs12 45 xs12
46 class="text-xs-center text-sm-center text-md-center text-lg-center" 46 class="text-xs-center text-sm-center text-md-center text-lg-center"
47 > 47 >
48 <v-avatar size="160px"> 48 <v-avatar size="160px">
49 <img 49 <img
50 src="/static/icon/user.png" 50 src="/static/icon/user.png"
51 v-if="!editedItem.schoolLogoUrl && !imageUrl" 51 v-if="!editedItem.schoolLogoUrl && !imageUrl"
52 /> 52 />
53 <img 53 <img
54 :src="editedItem.schoolLogoUrl" 54 :src="editedItem.schoolLogoUrl"
55 v-else-if="editedItem.schoolLogoUrl && !imageUrl" 55 v-else-if="editedItem.schoolLogoUrl && !imageUrl"
56 /> 56 />
57 <img 57 <img
58 v-if="imageUrl" 58 v-if="imageUrl"
59 :src="imageUrl" 59 :src="imageUrl"
60 height="150" 60 height="150"
61 style="border-radius:50%; width:200px" 61 style="border-radius:50%; width:200px"
62 /> 62 />
63 </v-avatar> 63 </v-avatar>
64 <input 64 <input
65 type="file" 65 type="file"
66 style="display: none" 66 style="display: none"
67 ref="image" 67 ref="image"
68 accept="image/*" 68 accept="image/*"
69 @change="onFilePicked" 69 @change="onFilePicked"
70 /> 70 />
71 </v-flex> 71 </v-flex>
72 </v-layout> 72 </v-layout>
73 <v-layout> 73 <v-layout>
74 <v-flex xs12 sm4> 74 <v-flex xs12 sm4>
75 <v-layout> 75 <v-layout>
76 <v-flex xs4 class="pt-4 subheading"> 76 <v-flex xs4 class="pt-4 subheading">
77 <label class="right hidden-xs-only hidden-sm-only">Full Name:</label> 77 <label class="right hidden-xs-only hidden-sm-only">Full Name:</label>
78 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label> 78 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label>
79 </v-flex> 79 </v-flex>
80 <v-flex xs8 class="ml-3"> 80 <v-flex xs8 class="ml-3">
81 <v-text-field v-model="editedItem.name" placeholder="fill your full Name"></v-text-field> 81 <v-text-field v-model="editedItem.name" placeholder="fill your full Name"></v-text-field>
82 </v-flex> 82 </v-flex>
83 </v-layout> 83 </v-layout>
84 </v-flex> 84 </v-flex>
85 <v-flex xs12 sm4> 85 <v-flex xs12 sm4>
86 <v-layout> 86 <v-layout>
87 <v-flex xs4 class="pt-4 subheading"> 87 <v-flex xs4 class="pt-4 subheading">
88 <label class="right hidden-xs-only hidden-sm-only">Email ID:</label> 88 <label class="right hidden-xs-only hidden-sm-only">Email ID:</label>
89 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">EmailID:</label> 89 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">EmailID:</label>
90 </v-flex> 90 </v-flex>
91 <v-flex xs8 class="ml-3"> 91 <v-flex xs8 class="ml-3">
92 <v-text-field placeholder="fill your email" v-model="editedItem.email"></v-text-field> 92 <v-text-field placeholder="fill your email" v-model="editedItem.email"></v-text-field>
93 </v-flex> 93 </v-flex>
94 </v-layout> 94 </v-layout>
95 </v-flex> 95 </v-flex>
96 <v-flex xs12 sm4> 96 <v-flex xs12 sm4>
97 <v-layout> 97 <v-layout>
98 <v-flex xs4 class="pt-4 subheading"> 98 <v-flex xs4 class="pt-4 subheading">
99 <label class="right">Society Name:</label> 99 <label class="right">Society Name:</label>
100 </v-flex> 100 </v-flex>
101 <v-flex xs8 class="ml-3"> 101 <v-flex xs8 class="ml-3">
102 <v-text-field 102 <v-text-field
103 placeholder="fill your Society Name" 103 placeholder="fill your Society Name"
104 v-model="editedItem.societyName" 104 v-model="editedItem.societyName"
105 ></v-text-field> 105 ></v-text-field>
106 </v-flex> 106 </v-flex>
107 </v-layout> 107 </v-layout>
108 </v-flex> 108 </v-flex>
109 </v-layout> 109 </v-layout>
110 <v-layout> 110 <v-layout>
111 <v-flex xs12 sm4> 111 <v-flex xs12 sm4>
112 <v-layout> 112 <v-layout>
113 <v-flex xs4 class="pt-4 subheading"> 113 <v-flex xs4 class="pt-4 subheading">
114 <label class="right">City:</label> 114 <label class="right">City:</label>
115 </v-flex> 115 </v-flex>
116 <v-flex xs8 class="ml-3"> 116 <v-flex xs8 class="ml-3">
117 <v-text-field v-model="editedItem.city" placeholder="fill your City Name"></v-text-field> 117 <v-text-field v-model="editedItem.city" placeholder="fill your City Name"></v-text-field>
118 </v-flex> 118 </v-flex>
119 </v-layout> 119 </v-layout>
120 </v-flex> 120 </v-flex>
121 <v-flex xs12 sm4> 121 <v-flex xs12 sm4>
122 <v-layout> 122 <v-layout>
123 <v-flex xs4 class="pt-4 subheading"> 123 <v-flex xs4 class="pt-4 subheading">
124 <label class="right">State:</label> 124 <label class="right">State:</label>
125 </v-flex> 125 </v-flex>
126 <v-flex xs8 class="ml-3"> 126 <v-flex xs8 class="ml-3">
127 <v-text-field 127 <v-text-field
128 v-model="editedItem.state" 128 v-model="editedItem.state"
129 placeholder="fill your City Name" 129 placeholder="fill your City Name"
130 ></v-text-field> 130 ></v-text-field>
131 </v-flex> 131 </v-flex>
132 </v-layout> 132 </v-layout>
133 </v-flex> 133 </v-flex>
134 <v-flex xs12 sm4> 134 <v-flex xs12 sm4>
135 <v-layout> 135 <v-layout>
136 <v-flex xs4 class="pt-4 subheading"> 136 <v-flex xs4 class="pt-4 subheading">
137 <label class="right">Pincode:</label> 137 <label class="right">Pincode:</label>
138 </v-flex> 138 </v-flex>
139 <v-flex xs8 class="ml-3"> 139 <v-flex xs8 class="ml-3">
140 <v-text-field 140 <v-text-field
141 v-model="editedItem.pinCode" 141 v-model="editedItem.pinCode"
142 placeholder="fill your pincode" 142 placeholder="fill your pincode"
143 type="number" 143 type="number"
144 ></v-text-field> 144 ></v-text-field>
145 </v-flex> 145 </v-flex>
146 </v-layout> 146 </v-layout>
147 </v-flex> 147 </v-flex>
148 </v-layout> 148 </v-layout>
149 <v-layout> 149 <v-layout>
150 <v-flex xs12 sm4> 150 <v-flex xs12 sm4>
151 <v-layout> 151 <v-layout>
152 <v-flex xs4 class="pt-4 subheading"> 152 <v-flex xs4 class="pt-4 subheading">
153 <label class="right">Fax No:</label> 153 <label class="right">Fax No:</label>
154 </v-flex> 154 </v-flex>
155 <v-flex xs8 class="ml-3"> 155 <v-flex xs8 class="ml-3">
156 <v-text-field v-model="editedItem.faxNo" placeholder="fill your fax No"></v-text-field> 156 <v-text-field v-model="editedItem.faxNo" placeholder="fill your fax No"></v-text-field>
157 </v-flex> 157 </v-flex>
158 </v-layout> 158 </v-layout>
159 </v-flex> 159 </v-flex>
160 <v-flex xs12 sm4> 160 <v-flex xs12 sm4>
161 <v-layout> 161 <v-layout>
162 <v-flex xs4 class="pt-4 subheading"> 162 <v-flex xs4 class="pt-4 subheading">
163 <label class="right">Country:</label> 163 <label class="right">Country:</label>
164 </v-flex> 164 </v-flex>
165 <v-flex xs8 class="ml-3"> 165 <v-flex xs8 class="ml-3">
166 <v-text-field 166 <v-text-field
167 v-model="editedItem.country" 167 v-model="editedItem.country"
168 placeholder="fill your Country" 168 placeholder="fill your Country"
169 ></v-text-field> 169 ></v-text-field>
170 </v-flex> 170 </v-flex>
171 </v-layout> 171 </v-layout>
172 </v-flex> 172 </v-flex>
173 <v-flex xs12 sm4> 173 <v-flex xs12 sm4>
174 <v-layout> 174 <v-layout>
175 <v-flex xs4 class="pt-4 subheading"> 175 <v-flex xs4 class="pt-4 subheading">
176 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> 176 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>
177 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label> 177 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label>
178 </v-flex> 178 </v-flex>
179 <v-flex xs8 class="ml-3"> 179 <v-flex xs8 class="ml-3">
180 <v-text-field 180 <v-text-field
181 v-model="editedItem.mobile" 181 v-model="editedItem.mobile"
182 placeholder="fill your MobileNo" 182 placeholder="fill your MobileNo"
183 name="mobileNo" 183 name="mobileNo"
184 ></v-text-field> 184 ></v-text-field>
185 </v-flex> 185 </v-flex>
186 </v-layout> 186 </v-layout>
187 </v-flex> 187 </v-flex>
188 </v-layout> 188 </v-layout>
189 <v-layout> 189 <v-layout>
190 <v-flex xs12 sm4> 190 <v-flex xs12 sm4>
191 <v-layout> 191 <v-layout>
192 <v-flex xs4 class="pt-4 subheading"> 192 <v-flex xs4 class="pt-4 subheading">
193 <label class="right hidden-xs-only hidden-sm-only">LandLine No:</label> 193 <label class="right hidden-xs-only hidden-sm-only">LandLine No:</label>
194 <label 194 <label
195 class="right hidden-lg-only hidden-md-only hidden-xl-only" 195 class="right hidden-lg-only hidden-md-only hidden-xl-only"
196 >LandLineNo:</label> 196 >LandLineNo:</label>
197 </v-flex> 197 </v-flex>
198 <v-flex xs8 class="ml-3"> 198 <v-flex xs8 class="ml-3">
199 <v-text-field 199 <v-text-field
200 v-model="editedItem.landLineNo" 200 v-model="editedItem.landLineNo"
201 placeholder="fill your LandLine No" 201 placeholder="fill your LandLine No"
202 type="number" 202 type="number"
203 ></v-text-field> 203 ></v-text-field>
204 </v-flex> 204 </v-flex>
205 </v-layout> 205 </v-layout>
206 </v-flex> 206 </v-flex>
207 <v-flex xs12 sm4> 207 <v-flex xs12 sm4>
208 <v-layout> 208 <v-layout>
209 <v-flex xs4 class="pt-4 subheading"> 209 <v-flex xs4 class="pt-4 subheading">
210 <label class="right hidden-xs-only hidden-sm-only">Registration No:</label> 210 <label class="right hidden-xs-only hidden-sm-only">Registration No:</label>
211 <label 211 <label
212 class="right hidden-lg-only hidden-md-only hidden-xl-only" 212 class="right hidden-lg-only hidden-md-only hidden-xl-only"
213 >Registration-No:</label> 213 >Registration-No:</label>
214 </v-flex> 214 </v-flex>
215 <v-flex xs8 class="ml-3"> 215 <v-flex xs8 class="ml-3">
216 <v-text-field 216 <v-text-field
217 v-model="editedItem.registrationNo" 217 v-model="editedItem.registrationNo"
218 placeholder="fill your Registration No" 218 placeholder="fill your Registration No"
219 type="number" 219 type="number"
220 ></v-text-field> 220 ></v-text-field>
221 </v-flex> 221 </v-flex>
222 </v-layout> 222 </v-layout>
223 </v-flex> 223 </v-flex>
224 <v-flex xs12 sm4> 224 <v-flex xs12 sm4>
225 <v-layout> 225 <v-layout>
226 <v-flex xs4 class="pt-4 subheading"> 226 <v-flex xs4 class="pt-4 subheading">
227 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> 227 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
228 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label> 228 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod:</label>
229 </v-flex> 229 </v-flex>
230 <v-flex xs8 class="ml-3"> 230 <v-flex xs8 class="ml-3">
231 <v-text-field 231 <v-text-field
232 label="Select Image" 232 label="Select Image"
233 @click="pickFile" 233 @click="pickFile"
234 v-model="imageName" 234 v-model="imageName"
235 append-icon="attach_file" 235 append-icon="attach_file"
236 ></v-text-field> 236 ></v-text-field>
237 </v-flex> 237 </v-flex>
238 </v-layout> 238 </v-layout>
239 </v-flex> 239 </v-flex>
240 </v-layout> 240 </v-layout>
241 <v-layout> 241 <v-layout>
242 <v-flex xs12 sm4> 242 <v-flex xs12 sm4>
243 <v-layout> 243 <v-layout>
244 <v-flex xs4 class="pt-4 subheading"> 244 <v-flex xs4 class="pt-4 subheading">
245 <label class="right hidden-xs-only hidden-sm-only">School Details:</label> 245 <label class="right hidden-xs-only hidden-sm-only">School Details:</label>
246 <label 246 <label
247 class="right hidden-lg-only hidden-md-only hidden-xl-only" 247 class="right hidden-lg-only hidden-md-only hidden-xl-only"
248 >SchoolDetail:</label> 248 >SchoolDetail:</label>
249 </v-flex> 249 </v-flex>
250 <v-flex xs8 class="ml-3"> 250 <v-flex xs8 class="ml-3">
251 <v-text-field 251 <v-text-field
252 v-model="editedItem.schoolDetails" 252 v-model="editedItem.schoolDetails"
253 placeholder="fill your School Details" 253 placeholder="fill your School Details"
254 ></v-text-field> 254 ></v-text-field>
255 </v-flex> 255 </v-flex>
256 </v-layout> 256 </v-layout>
257 </v-flex> 257 </v-flex>
258 <v-flex xs12 sm4> 258 <v-flex xs12 sm4>
259 <v-layout> 259 <v-layout>
260 <v-flex xs4 class="pt-4 subheading"> 260 <v-flex xs4 class="pt-4 subheading">
261 <label class="right hidden-xs-only hidden-sm-only">Academic Year:</label> 261 <label class="right hidden-xs-only hidden-sm-only">Academic Year:</label>
262 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Year:</label> 262 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Year:</label>
263 </v-flex> 263 </v-flex>
264 <v-flex xs8 class="ml-3"> 264 <v-flex xs8 class="ml-3">
265 <v-text-field 265 <v-text-field
266 v-model="editedItem.establishmentYear" 266 v-model="editedItem.establishmentYear"
267 placeholder="fill your Academic Year" 267 placeholder="fill your Academic Year"
268 ></v-text-field> 268 ></v-text-field>
269 </v-flex> 269 </v-flex>
270 </v-layout> 270 </v-layout>
271 </v-flex> 271 </v-flex>
272 <v-flex xs12 sm4> 272 <v-flex xs12 sm4>
273 <v-layout> 273 <v-layout>
274 <v-flex xs4 class="pt-4 subheading"> 274 <v-flex xs4 class="pt-4 subheading">
275 <label class="right hidden-xs-only hidden-sm-only">Web Site Url:</label> 275 <label class="right hidden-xs-only hidden-sm-only">Web Site Url:</label>
276 <label 276 <label
277 class="right hidden-lg-only hidden-md-only hidden-xl-only" 277 class="right hidden-lg-only hidden-md-only hidden-xl-only"
278 >WebSiteUrl:</label> 278 >WebSiteUrl:</label>
279 </v-flex> 279 </v-flex>
280 <v-flex xs8 class="ml-3"> 280 <v-flex xs8 class="ml-3">
281 <v-text-field 281 <v-text-field
282 v-model="editedItem.websiteUrl" 282 v-model="editedItem.websiteUrl"
283 placeholder="fill your MobileNo" 283 placeholder="fill your MobileNo"
284 ></v-text-field> 284 ></v-text-field>
285 </v-flex> 285 </v-flex>
286 </v-layout> 286 </v-layout>
287 </v-flex> 287 </v-flex>
288 </v-layout> 288 </v-layout>
289 <v-layout> 289 <v-layout>
290 <v-flex xs12 sm4> 290 <v-flex xs12 sm4>
291 <v-layout> 291 <v-layout>
292 <v-flex xs4 class="pt-4 subheading"> 292 <v-flex xs4 class="pt-4 subheading">
293 <label class="right">Address:</label> 293 <label class="right">Address:</label>
294 </v-flex> 294 </v-flex>
295 <v-flex xs8 class="ml-3"> 295 <v-flex xs8 class="ml-3">
296 <v-text-field 296 <v-text-field
297 v-model="editedItem.address" 297 v-model="editedItem.address"
298 placeholder="Select your Address" 298 placeholder="Select your Address"
299 ></v-text-field> 299 ></v-text-field>
300 </v-flex> 300 </v-flex>
301 </v-layout> 301 </v-layout>
302 </v-flex> 302 </v-flex>
303 </v-layout> 303 </v-layout>
304 <v-layout> 304 <v-layout>
305 <v-flex xs12 sm12> 305 <v-flex xs12 sm12>
306 <v-layout> 306 <v-layout>
307 <v-flex xs6> 307 <v-flex xs6>
308 <v-btn round dark @click.native="close">Cancel</v-btn> 308 <v-btn round dark @click.native="close">Cancel</v-btn>
309 </v-flex> 309 </v-flex>
310 <v-flex xs6> 310 <v-flex xs6>
311 <v-btn @click="save" round dark :loading="loading" class="right">Save</v-btn> 311 <v-btn @click="save" round dark :loading="loading" class="right">Save</v-btn>
312 </v-flex> 312 </v-flex>
313 </v-layout> 313 </v-layout>
314 </v-flex> 314 </v-flex>
315 </v-layout> 315 </v-layout>
316 </v-container> 316 </v-container>
317 </v-form> 317 </v-form>
318 </v-card-text> 318 </v-card-text>
319 </v-card> 319 </v-card>
320 </v-dialog> 320 </v-dialog>
321 <v-snackbar 321 <v-snackbar
322 :timeout="timeout" 322 :timeout="timeout"
323 :top="y === 'top'" 323 :top="y === 'top'"
324 :right="x === 'right'" 324 :right="x === 'right'"
325 :vertical="mode === 'vertical'" 325 :vertical="mode === 'vertical'"
326 v-model="snackbar" 326 v-model="snackbar"
327 color="success" 327 color="success"
328 >{{ text }}</v-snackbar> 328 >{{ text }}</v-snackbar>
329 329
330 <!-- ****** EXISTING-USERS STUDENTS TABLE ****** --> 330 <!-- ****** EXISTING-USERS STUDENTS TABLE ****** -->
331 <v-data-table 331 <v-data-table
332 :headers="headers" 332 :headers="headers"
333 :items="schoolList" 333 :items="schoolList"
334 :pagination.sync="pagination" 334 :pagination.sync="pagination"
335 :search="search" 335 :search="search"
336 > 336 >
337 <template slot="items" slot-scope="props"> 337 <template slot="items" slot-scope="props">
338 <tr class="tr"> 338 <tr class="tr">
339 <td class="td td-row text-xs-center">{{ props.index + 1}}</td> 339 <td class="td td-row text-xs-center">{{ props.index + 1}}</td>
340 <td class="td td-row text-xs-center"> 340 <td class="td td-row text-xs-center">
341 <v-avatar> 341 <v-avatar>
342 <img :src="props.item.schoolLogoUrl" v-if="props.item.schoolLogoUrl" /> 342 <img :src="props.item.schoolLogoUrl" v-if="props.item.schoolLogoUrl" />
343 <img src="/static/icon/user.png" v-else-if="!props.item.schoolLogoUrl" /> 343 <img src="/static/icon/user.png" v-else-if="!props.item.schoolLogoUrl" />
344 </v-avatar> 344 </v-avatar>
345 </td> 345 </td>
346 <td class="td td-row text-xs-center">{{ props.item.name}}</td> 346 <td class="td td-row text-xs-center">{{ props.item.name}}</td>
347 <td class="td td-row text-xs-center">{{ props.item.email }}</td> 347 <td class="td td-row text-xs-center">{{ props.item.email }}</td>
348 <td class="td td-row text-xs-center">{{ props.item.city }}</td> 348 <td class="td td-row text-xs-center">{{ props.item.city }}</td>
349 <td class="td td-row text-xs-center">{{ props.item.state }}</td> 349 <td class="td td-row text-xs-center">{{ props.item.state }}</td>
350 <td class="td td-row text-xs-center">{{ props.item.mobile}}</td> 350 <td class="td td-row text-xs-center">{{ props.item.mobile}}</td>
351 <td class="td td-row text-xs-center"> 351 <td class="td td-row text-xs-center">
352 <v-switch 352 <v-switch
353 class="pl-3" 353 class="pl-3"
354 v-model="props.item.status" 354 v-model="props.item.status"
355 @change="suspendSchoolStatus(props.item.status,props.item._id)" 355 @change="suspendSchoolStatus(props.item.status,props.item._id)"
356 ></v-switch> 356 ></v-switch>
357 </td> 357 </td>
358 <td class="td td-row text-xs-center"> 358 <td class="td td-row text-xs-center">
359 <span> 359 <span>
360 <!-- <router-link :to="{ name:'viewSchoolDashboard',params: { schoolId:props.item._id } }"> --> 360 <!-- <router-link :to="{ name:'viewSchoolDashboard',params: { schoolId:props.item._id } }"> -->
361 <v-tooltip top> 361 <v-tooltip top>
362 <img 362 <img
363 slot="activator" 363 slot="activator"
364 style="cursor:pointer; width:25px; height:18px; " 364 style="cursor:pointer; width:25px; height:18px; "
365 class="mr5" 365 class="mr5"
366 src="/static/icon/eye1.png" 366 src="/static/icon/eye1.png"
367 @click="adminAccess(props.item)" 367 @click="adminAccess(props.item)"
368 /> 368 />
369 <span>View</span> 369 <span>View</span>
370 </v-tooltip> 370 </v-tooltip>
371 <!-- </router-link> --> 371 <!-- </router-link> -->
372 <v-tooltip top> 372 <v-tooltip top>
373 <img 373 <img
374 slot="activator" 374 slot="activator"
375 style="cursor:pointer; width:20px; height:18px; " 375 style="cursor:pointer; width:20px; height:18px; "
376 class="mr5" 376 class="mr5"
377 @click="editItem(props.item)" 377 @click="editItem(props.item)"
378 src="/static/icon/edit1.png" 378 src="/static/icon/edit1.png"
379 /> 379 />
380 <span>Edit</span> 380 <span>Edit</span>
381 </v-tooltip> 381 </v-tooltip>
382 </span> 382 </span>
383 </td> 383 </td>
384 </tr> 384 </tr>
385 </template> 385 </template>
386 <v-alert 386 <v-alert
387 slot="no-results" 387 slot="no-results"
388 :value="true" 388 :value="true"
389 color="error" 389 color="error"
390 icon="warning" 390 icon="warning"
391 >Your search for "{{ search }}" found no results.</v-alert> 391 >Your search for "{{ search }}" found no results.</v-alert>
392 </v-data-table> 392 </v-data-table>
393 </v-tab-item> 393 </v-tab-item>
394 394
395 <!-- ****** ADD STUDENTS DETAILS****** --> 395 <!-- ****** ADD STUDENTS DETAILS****** -->
396 <v-tab-item> 396 <v-tab-item>
397 <v-container fluid> 397 <v-container fluid>
398 <v-layout align-center justify-center fill-height> 398 <v-layout align-center justify-center fill-height>
399 <v-flex xs12 sm12 md10 lg11> 399 <v-flex xs12 sm12 md10 lg11>
400 <!-- <v-container fluid> --> 400 <!-- <v-container fluid> -->
401 <v-snackbar 401 <v-snackbar
402 :timeout="timeout" 402 :timeout="timeout"
403 :top="y === 'top'" 403 :top="y === 'top'"
404 :right="x === 'right'" 404 :right="x === 'right'"
405 :vertical="mode === 'vertical'" 405 :vertical="mode === 'vertical'"
406 v-model="snackbar" 406 v-model="snackbar"
407 color="success" 407 color="success"
408 >{{ text }}</v-snackbar> 408 >{{ text }}</v-snackbar>
409 <v-flex xs12 sm12> 409 <v-flex xs12 sm12>
410 <v-form ref="form" v-model="valid" lazy-validation> 410 <v-form ref="form" v-model="valid" lazy-validation>
411 <v-layout> 411 <v-layout>
412 <v-flex 412 <v-flex
413 xs12 413 xs12
414 class="text-xs-center text-sm-center text-md-center text-lg-center" 414 class="text-xs-center text-sm-center text-md-center text-lg-center"
415 > 415 >
416 <v-avatar size="100px"> 416 <v-avatar size="100px">
417 <img src="/static/icon/user.png" v-if="!imageUrl" /> 417 <img src="/static/icon/user.png" v-if="!imageUrl" />
418 </v-avatar> 418 </v-avatar>
419 <input 419 <input
420 type="file" 420 type="file"
421 style="display: none" 421 style="display: none"
422 ref="image" 422 ref="image"
423 accept="image/*" 423 accept="image/*"
424 @change="onFilePicked" 424 @change="onFilePicked"
425 /> 425 />
426 <img 426 <img
427 :src="imageData.imageUrl" 427 :src="imageData.imageUrl"
428 height="150" 428 height="150"
429 v-if="imageUrl" 429 v-if="imageUrl"
430 style="border-radius:50%; width:200px" 430 style="border-radius:50%; width:200px"
431 /> 431 />
432 </v-flex> 432 </v-flex>
433 </v-layout> 433 </v-layout>
434 <v-layout wrap> 434 <v-layout wrap>
435 <v-flex xs12 sm6> 435 <v-flex xs12 sm6>
436 <v-layout> 436 <v-layout>
437 <v-flex xs4 sm4 class="pt-4 subheading"> 437 <v-flex xs4 sm4 class="pt-4 subheading">
438 <label class="right hidden-xs-only hidden-sm-only">Full Name:</label> 438 <label class="right hidden-xs-only hidden-sm-only">Full Name:</label>
439 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label> 439 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Name:</label>
440 </v-flex> 440 </v-flex>
441 <v-flex xs8 sm8 class="ml-3"> 441 <v-flex xs8 sm8 class="ml-3">
442 <v-text-field 442 <v-text-field
443 v-model="addSchool.name" 443 v-model="addSchool.name"
444 placeholder="fill your full Name" 444 placeholder="fill your full Name"
445 name="name" 445 name="name"
446 type="text" 446 type="text"
447 :rules="nameRules" 447 :rules="nameRules"
448 required 448 required
449 ></v-text-field> 449 ></v-text-field>
450 </v-flex> 450 </v-flex>
451 </v-layout> 451 </v-layout>
452 </v-flex> 452 </v-flex>
453 <v-flex xs12 sm6> 453 <v-flex xs12 sm6>
454 <v-layout> 454 <v-layout>
455 <v-flex xs4 sm4 class="pt-4 subheading"> 455 <v-flex xs4 sm4 class="pt-4 subheading">
456 <label class="right">Email ID:</label> 456 <label class="right">Email ID:</label>
457 </v-flex> 457 </v-flex>
458 <v-flex xs8 sm8 class="ml-3"> 458 <v-flex xs8 sm8 class="ml-3">
459 <v-text-field 459 <v-text-field
460 placeholder="fill your email" 460 placeholder="fill your email"
461 :rules="emailRules" 461 :rules="emailRules"
462 v-model="addSchool.email" 462 v-model="addSchool.email"
463 type="text" 463 type="text"
464 required 464 required
465 ></v-text-field> 465 ></v-text-field>
466 </v-flex> 466 </v-flex>
467 </v-layout> 467 </v-layout>
468 </v-flex> 468 </v-flex>
469 </v-layout> 469 </v-layout>
470 <v-layout wrap> 470 <v-layout wrap>
471 <v-flex xs12 sm6> 471 <v-flex xs12 sm6>
472 <v-layout> 472 <v-layout>
473 <v-flex xs4 sm4 class="pt-4 subheading"> 473 <v-flex xs4 sm4 class="pt-4 subheading">
474 <label class="right hidden-sm-only hidden-xs-only">Society Name:</label> 474 <label class="right hidden-sm-only hidden-xs-only">Society Name:</label>
475 <label 475 <label
476 class="right hidden-lg-only hidden-xl-only hidden-md-only" 476 class="right hidden-lg-only hidden-xl-only hidden-md-only"
477 >SocietyName:</label> 477 >SocietyName:</label>
478 </v-flex> 478 </v-flex>
479 <v-flex xs8 sm8 class="ml-3"> 479 <v-flex xs8 sm8 class="ml-3">
480 <v-text-field 480 <v-text-field
481 v-model="addSchool.societyName" 481 v-model="addSchool.societyName"
482 placeholder="fill your Society Name" 482 placeholder="fill your Society Name"
483 required 483 required
484 ></v-text-field> 484 ></v-text-field>
485 </v-flex> 485 </v-flex>
486 </v-layout> 486 </v-layout>
487 </v-flex> 487 </v-flex>
488 <v-flex xs12 sm6> 488 <v-flex xs12 sm6>
489 <v-layout> 489 <v-layout>
490 <v-flex xs4 class="pt-4 subheading"> 490 <v-flex xs4 class="pt-4 subheading">
491 <label class="right">City:</label> 491 <label class="right">City:</label>
492 </v-flex> 492 </v-flex>
493 <v-flex xs8 class="ml-3"> 493 <v-flex xs8 class="ml-3">
494 <v-text-field 494 <v-text-field
495 v-model="addSchool.city" 495 v-model="addSchool.city"
496 placeholder="fill your City Name" 496 placeholder="fill your City Name"
497 name="City" 497 name="City"
498 type="text" 498 type="text"
499 :rules="cityRules" 499 :rules="cityRules"
500 required 500 required
501 ></v-text-field> 501 ></v-text-field>
502 </v-flex> 502 </v-flex>
503 </v-layout> 503 </v-layout>
504 </v-flex> 504 </v-flex>
505 </v-layout> 505 </v-layout>
506 <v-layout wrap> 506 <v-layout wrap>
507 <v-flex xs12 sm6> 507 <v-flex xs12 sm6>
508 <v-layout> 508 <v-layout>
509 <v-flex xs4 class="pt-4 subheading"> 509 <v-flex xs4 class="pt-4 subheading">
510 <label class="right">State:</label> 510 <label class="right">State:</label>
511 </v-flex> 511 </v-flex>
512 <v-flex xs8 class="ml-3"> 512 <v-flex xs8 class="ml-3">
513 <v-text-field 513 <v-text-field
514 v-model="addSchool.state" 514 v-model="addSchool.state"
515 placeholder="fill your State Name" 515 placeholder="fill your State Name"
516 name="state" 516 name="state"
517 type="text" 517 type="text"
518 :rules="stateRules" 518 :rules="stateRules"
519 required 519 required
520 ></v-text-field> 520 ></v-text-field>
521 </v-flex> 521 </v-flex>
522 </v-layout> 522 </v-layout>
523 </v-flex> 523 </v-flex>
524 <v-flex xs12 sm6> 524 <v-flex xs12 sm6>
525 <v-layout> 525 <v-layout>
526 <v-flex xs4 class="pt-4 subheading"> 526 <v-flex xs4 class="pt-4 subheading">
527 <label class="right">Pincode:</label> 527 <label class="right">Pincode:</label>
528 </v-flex> 528 </v-flex>
529 <v-flex xs8 class="ml-3"> 529 <v-flex xs8 class="ml-3">
530 <v-text-field 530 <v-text-field
531 v-model="addSchool.pinCode" 531 v-model="addSchool.pinCode"
532 placeholder="fill your pincode" 532 placeholder="fill your pincode"
533 name="pincode" 533 name="pincode"
534 type="number" 534 type="number"
535 :rules="pincode" 535 :rules="pincode"
536 required 536 required
537 ></v-text-field> 537 ></v-text-field>
538 </v-flex> 538 </v-flex>
539 </v-layout> 539 </v-layout>
540 </v-flex> 540 </v-flex>
541 </v-layout> 541 </v-layout>
542 <v-layout wrap> 542 <v-layout wrap>
543 <v-flex xs12 sm6> 543 <v-flex xs12 sm6>
544 <v-layout> 544 <v-layout>
545 <v-flex xs4 class="pt-4 subheading"> 545 <v-flex xs4 class="pt-4 subheading">
546 <label class="right">Fax No:</label> 546 <label class="right">Fax No:</label>
547 </v-flex> 547 </v-flex>
548 <v-flex xs8 class="ml-3"> 548 <v-flex xs8 class="ml-3">
549 <v-text-field v-model="addSchool.faxNo" label="fill your Fax No" required></v-text-field> 549 <v-text-field v-model="addSchool.faxNo" label="fill your Fax No" required></v-text-field>
550 </v-flex> 550 </v-flex>
551 </v-layout> 551 </v-layout>
552 </v-flex> 552 </v-flex>
553 <v-flex xs12 sm6> 553 <v-flex xs12 sm6>
554 <v-layout> 554 <v-layout>
555 <v-flex xs4 class="pt-4 subheading"> 555 <v-flex xs4 class="pt-4 subheading">
556 <label class="right hidden-xs-only hidden-sm-only">Country:</label> 556 <label class="right hidden-xs-only hidden-sm-only">Country:</label>
557 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label> 557 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Country:</label>
558 </v-flex> 558 </v-flex>
559 <v-flex xs8 class="ml-3"> 559 <v-flex xs8 class="ml-3">
560 <v-autocomplete 560 <v-autocomplete
561 v-model="addSchool.country" 561 v-model="addSchool.country"
562 :items="countries" 562 :items="countries"
563 :rules="country" 563 :rules="country"
564 placeholder="Select Country Name" 564 placeholder="Select Country Name"
565 required 565 required
566 ></v-autocomplete> 566 ></v-autocomplete>
567 </v-flex> 567 </v-flex>
568 </v-layout> 568 </v-layout>
569 </v-flex> 569 </v-flex>
570 </v-layout> 570 </v-layout>
571 <v-layout wrap> 571 <v-layout wrap>
572 <v-flex xs12 sm6> 572 <v-flex xs12 sm6>
573 <v-layout> 573 <v-layout>
574 <v-flex xs4 class="pt-4 subheading"> 574 <v-flex xs4 class="pt-4 subheading">
575 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label> 575 <label class="right hidden-xs-only hidden-sm-only">Mobile No:</label>
576 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label> 576 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Mobile:</label>
577 </v-flex> 577 </v-flex>
578 <v-flex xs8 class="ml-3"> 578 <v-flex xs8 class="ml-3">
579 <v-text-field 579 <v-text-field
580 v-model="addSchool.mobile" 580 v-model="addSchool.mobile"
581 placeholder="fill your Mobile No" 581 placeholder="fill your Mobile No"
582 name="mobileNo" 582 name="mobileNo"
583 type="number" 583 type="number"
584 :rules="mobileNoRules" 584 :rules="mobileNoRules"
585 required 585 required
586 ></v-text-field> 586 ></v-text-field>
587 </v-flex> 587 </v-flex>
588 </v-layout> 588 </v-layout>
589 </v-flex> 589 </v-flex>
590 <v-flex xs12 sm6> 590 <v-flex xs12 sm6>
591 <v-layout> 591 <v-layout>
592 <v-flex xs4 class="pt-4 subheading"> 592 <v-flex xs4 class="pt-4 subheading">
593 <label class="right hidden-xs-only hidden-sm-only">LandLine No:</label> 593 <label class="right hidden-xs-only hidden-sm-only">LandLine No:</label>
594 <label 594 <label
595 class="right hidden-lg-only hidden-md-only hidden-xl-only" 595 class="right hidden-lg-only hidden-md-only hidden-xl-only"
596 >LandLineNo:</label> 596 >LandLineNo:</label>
597 </v-flex> 597 </v-flex>
598 <v-flex xs8 class="ml-3"> 598 <v-flex xs8 class="ml-3">
599 <v-text-field 599 <v-text-field
600 v-model="addSchool.landLineNo" 600 v-model="addSchool.landLineNo"
601 :items="countries" 601 :items="countries"
602 placeholder="fill your LandLine No" 602 placeholder="fill your LandLine No"
603 type="number" 603 type="number"
604 required 604 required
605 ></v-text-field> 605 ></v-text-field>
606 </v-flex> 606 </v-flex>
607 </v-layout> 607 </v-layout>
608 </v-flex> 608 </v-flex>
609 </v-layout> 609 </v-layout>
610 <v-layout wrap> 610 <v-layout wrap>
611 <v-flex xs12 sm6> 611 <v-flex xs12 sm6>
612 <v-layout> 612 <v-layout>
613 <v-flex xs4 class="pt-4 subheading"> 613 <v-flex xs4 class="pt-4 subheading">
614 <label class="right hidden-xs-only hidden-sm-only">Registration No:</label> 614 <label class="right hidden-xs-only hidden-sm-only">Registration No:</label>
615 <label 615 <label
616 class="right hidden-lg-only hidden-md-only hidden-xl-only" 616 class="right hidden-lg-only hidden-md-only hidden-xl-only"
617 >Registration-No:</label> 617 >Registration-No:</label>
618 </v-flex> 618 </v-flex>
619 <v-flex xs8 class="ml-3"> 619 <v-flex xs8 class="ml-3">
620 <v-text-field 620 <v-text-field
621 v-model="addSchool.registrationNo" 621 v-model="addSchool.registrationNo"
622 placeholder="Fill your Registration No" 622 placeholder="Fill your Registration No"
623 required 623 required
624 ></v-text-field> 624 ></v-text-field>
625 </v-flex> 625 </v-flex>
626 </v-layout> 626 </v-layout>
627 </v-flex> 627 </v-flex>
628 <v-flex xs12 sm6> 628 <v-flex xs12 sm6>
629 <v-layout> 629 <v-layout>
630 <v-flex xs4 class="pt-4 subheading"> 630 <v-flex xs4 class="pt-4 subheading">
631 <label class="right hidden-xs-only hidden-sm-only">School Details:</label> 631 <label class="right hidden-xs-only hidden-sm-only">School Details:</label>
632 <label 632 <label
633 class="right hidden-lg-only hidden-md-only hidden-xl-only" 633 class="right hidden-lg-only hidden-md-only hidden-xl-only"
634 >SchoolDetails:</label> 634 >SchoolDetails:</label>
635 </v-flex> 635 </v-flex>
636 <v-flex xs8 class="ml-3"> 636 <v-flex xs8 class="ml-3">
637 <v-text-field 637 <v-text-field
638 v-model="addSchool.schoolDetails" 638 v-model="addSchool.schoolDetails"
639 placeholder="Fill your School Details" 639 placeholder="Fill your School Details"
640 :rules="schoolDetailRule" 640 :rules="schoolDetailRule"
641 required 641 required
642 ></v-text-field> 642 ></v-text-field>
643 </v-flex> 643 </v-flex>
644 </v-layout> 644 </v-layout>
645 </v-flex> 645 </v-flex>
646 </v-layout> 646 </v-layout>
647 <v-layout wrap> 647 <v-layout wrap>
648 <v-flex xs12 sm6> 648 <v-flex xs12 sm6>
649 <v-layout> 649 <v-layout>
650 <v-flex xs4 class="pt-4 subheading"> 650 <v-flex xs4 class="pt-4 subheading">
651 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label> 651 <label class="right hidden-xs-only hidden-sm-only">Uplaod Image:</label>
652 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label> 652 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Uplaod :</label>
653 </v-flex> 653 </v-flex>
654 <v-flex xs8 class="ml-3"> 654 <v-flex xs8 class="ml-3">
655 <v-text-field 655 <v-text-field
656 label="Select Image" 656 label="Select Image"
657 @click="pickFile" 657 @click="pickFile"
658 v-model="imageName" 658 v-model="imageName"
659 append-icon="attach_file" 659 append-icon="attach_file"
660 ></v-text-field> 660 ></v-text-field>
661 </v-flex> 661 </v-flex>
662 </v-layout> 662 </v-layout>
663 </v-flex> 663 </v-flex>
664 <v-flex xs12 sm6> 664 <v-flex xs12 sm6>
665 <v-layout> 665 <v-layout>
666 <v-flex xs4 class="pt-4 subheading"> 666 <v-flex xs4 class="pt-4 subheading">
667 <label class="right hidden-xs-only hidden-sm-only">Academic Year:</label> 667 <label class="right hidden-xs-only hidden-sm-only">Academic Year:</label>
668 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Year:</label> 668 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Year:</label>
669 </v-flex> 669 </v-flex>
670 <v-flex xs8 class="ml-3"> 670 <v-flex xs8 class="ml-3">
671 <v-text-field 671 <v-text-field
672 v-model="addSchool.establishmentYear" 672 v-model="addSchool.establishmentYear"
673 placeholder="fill your Academic Year" 673 placeholder="fill your Academic Year"
674 :rules="establishmentYearRules" 674 :rules="establishmentYearRules"
675 required 675 required
676 ></v-text-field> 676 ></v-text-field>
677 </v-flex> 677 </v-flex>
678 </v-layout> 678 </v-layout>
679 </v-flex> 679 </v-flex>
680 </v-layout> 680 </v-layout>
681 <v-layout wrap> 681 <v-layout wrap>
682 <v-flex xs12 sm6> 682 <v-flex xs12 sm6>
683 <v-layout> 683 <v-layout>
684 <v-flex xs4 sm4 class="pt-4 subheading"> 684 <v-flex xs4 sm4 class="pt-4 subheading">
685 <label class="right hidden-xs-only hidden-sm-only">WebSite Url:</label> 685 <label class="right hidden-xs-only hidden-sm-only">WebSite Url:</label>
686 <label 686 <label
687 class="right hidden-lg-only hidden-md-only hidden-xl-only" 687 class="right hidden-lg-only hidden-md-only hidden-xl-only"
688 >WebSiteUrl:</label> 688 >WebSiteUrl:</label>
689 </v-flex> 689 </v-flex>
690 <v-flex xs8 sm8 class="ml-3"> 690 <v-flex xs8 sm8 class="ml-3">
691 <v-text-field 691 <v-text-field
692 name="input-4-3" 692 name="input-4-3"
693 v-model="addSchool.websiteUrl" 693 v-model="addSchool.websiteUrl"
694 placeholder="fill Your WebSite Url" 694 placeholder="fill Your WebSite Url"
695 required 695 required
696 ></v-text-field> 696 ></v-text-field>
697 </v-flex> 697 </v-flex>
698 </v-layout> 698 </v-layout>
699 </v-flex> 699 </v-flex>
700 <v-flex xs12 sm6> 700 <v-flex xs12 sm6>
701 <v-layout> 701 <v-layout>
702 <v-flex xs4 sm4 class="pt-4 subheading"> 702 <v-flex xs4 sm4 class="pt-4 subheading">
703 <label class="right">Address:</label> 703 <label class="right">Address:</label>
704 </v-flex> 704 </v-flex>
705 <v-flex xs8 sm8 class="ml-3"> 705 <v-flex xs8 sm8 class="ml-3">
706 <v-text-field 706 <v-text-field
707 name="input-4-3" 707 name="input-4-3"
708 v-model="addSchool.address" 708 v-model="addSchool.address"
709 :rules="presentAddress" 709 :rules="presentAddress"
710 placeholder="fill Your Address" 710 placeholder="fill Your Address"
711 required 711 required
712 ></v-text-field> 712 ></v-text-field>
713 </v-flex> 713 </v-flex>
714 </v-layout> 714 </v-layout>
715 </v-flex> 715 </v-flex>
716 </v-layout> 716 </v-layout>
717 <v-layout> 717 <v-layout>
718 <v-flex xs12 sm11 offset-md1> 718 <v-flex xs12 sm11 offset-md1>
719 <v-layout> 719 <v-layout>
720 <v-flex xs6> 720 <v-flex xs6>
721 <v-btn round dark @click="clear()">Clear</v-btn> 721 <v-btn round dark @click="clear()">Clear</v-btn>
722 </v-flex> 722 </v-flex>
723 <v-flex xs6> 723 <v-flex xs6>
724 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn> 724 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn>
725 </v-flex> 725 </v-flex>
726 </v-layout> 726 </v-layout>
727 </v-flex> 727 </v-flex>
728 </v-layout> 728 </v-layout>
729 </v-form> 729 </v-form>
730 </v-flex> 730 </v-flex>
731 </v-flex> 731 </v-flex>
732 </v-layout> 732 </v-layout>
733 </v-container> 733 </v-container>
734 </v-tab-item> 734 </v-tab-item>
735 </v-tabs> 735 </v-tabs>
736 <div class="loader" v-if="showLoader"> 736 <div class="loader" v-if="showLoader">
737 <v-progress-circular indeterminate color="white"></v-progress-circular> 737 <v-progress-circular indeterminate color="white"></v-progress-circular>
738 </div> 738 </div>
739 </div> 739 </div>
740 </template> 740 </template>
741 741
742 <script> 742 <script>
743 import http from "@/Services/http.js"; 743 import http from "@/Services/http.js";
744 import moment from "moment"; 744 import moment from "moment";
745 import countryList from "@/script/country.js"; 745 import countryList from "@/script/country.js";
746 746
747 export default { 747 export default {
748 data: () => ({ 748 data: () => ({
749 e2: 0, 749 e2: 0,
750 snackbar: false, 750 snackbar: false,
751 y: "top", 751 y: "top",
752 x: "right", 752 x: "right",
753 mode: "", 753 mode: "",
754 timeout: 3000, 754 timeout: 3000,
755 text: "", 755 text: "",
756 showLoader: false, 756 showLoader: false,
757 loading: false, 757 loading: false,
758 date: null, 758 date: null,
759 search: "", 759 search: "",
760 menu: false, 760 menu: false,
761 menu1: false, 761 menu1: false,
762 dialog: false, 762 dialog: false,
763 valid: true, 763 valid: true,
764 isActive: true, 764 isActive: true,
765 newActive: false, 765 newActive: false,
766 pagination: { 766 pagination: {
767 rowsPerPage: 15 767 rowsPerPage: 15
768 }, 768 },
769 imageData: {}, 769 imageData: {},
770 imageName: "", 770 imageName: "",
771 imageUrl: "", 771 imageUrl: "",
772 imageFile: "", 772 imageFile: "",
773 nameRules: [v => !!v || "Full Name is required"], 773 nameRules: [v => !!v || "Full Name is required"],
774 dateRules: [v => !!v || "DOB is required"], 774 dateRules: [v => !!v || "DOB is required"],
775 cityRules: [v => !!v || "City Name is required"], 775 cityRules: [v => !!v || "City Name is required"],
776 pincode: [v => !!v || " Pincode is required"], 776 pincode: [v => !!v || " Pincode is required"],
777 country: [v => !!v || " Country Name is required"], 777 country: [v => !!v || " Country Name is required"],
778 permanentAddress: [v => !!v || " Permanent Address is requiclearred"], 778 permanentAddress: [v => !!v || " Permanent Address is requiclearred"],
779 presentAddress: [v => !!v || " Present Address is required"], 779 presentAddress: [v => !!v || " Present Address is required"],
780 mobileNoRules: [v => !!v || "Mobile Number is required"], 780 mobileNoRules: [v => !!v || "Mobile Number is required"],
781 stateRules: [v => !!v || "State Name is required"], 781 stateRules: [v => !!v || "State Name is required"],
782 schoolDetailRule: [v => !!v || "school Detail is required"], 782 schoolDetailRule: [v => !!v || "school Detail is required"],
783 sectionRules: [v => !!v || " Section Name is required"], 783 sectionRules: [v => !!v || " Section Name is required"],
784 genderRules: [v => !!v || " Select Gender is required"], 784 genderRules: [v => !!v || " Select Gender is required"],
785 establishmentYearRules: [v => !!v || " Academic Year is required"], 785 establishmentYearRules: [v => !!v || " Academic Year is required"],
786 errorMessages: "", 786 errorMessages: "",
787 emailRules: [ 787 emailRules: [
788 v => !!v || "E-mail is required", 788 v => !!v || "E-mail is required",
789 v => 789 v =>
790 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 790 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
791 "E-mail must be valid" 791 "E-mail must be valid"
792 ], 792 ],
793 countries: [], 793 countries: [],
794 headers: [ 794 headers: [
795 { 795 {
796 text: "No.", 796 text: "No.",
797 align: "center", 797 align: "center",
798 sortable: false, 798 sortable: false,
799 value: "rollNo" 799 value: "rollNo"
800 }, 800 },
801 { 801 {
802 text: "school Logo", 802 text: "school Logo",
803 value: "schoolLogoUrl", 803 value: "schoolLogoUrl",
804 sortable: false, 804 sortable: false,
805 align: "center" 805 align: "center"
806 }, 806 },
807 { text: "Name", value: "name", sortable: false, align: "center" }, 807 { text: "Name", value: "name", sortable: false, align: "center" },
808 { text: "Email", value: "email", sortable: false, align: "center" }, 808 { text: "Email", value: "email", sortable: false, align: "center" },
809 { text: "City", value: "city", sortable: false, align: "center" }, 809 { text: "City", value: "city", sortable: false, align: "center" },
810 { 810 {
811 text: "State", 811 text: "State",
812 value: "state", 812 value: "state",
813 sortable: false, 813 sortable: false,
814 align: "center" 814 align: "center"
815 }, 815 },
816 { 816 {
817 text: "Mobile", 817 text: "Mobile",
818 value: "mobile", 818 value: "mobile",
819 sortable: false, 819 sortable: false,
820 align: "center" 820 align: "center"
821 }, 821 },
822 { text: "Action", value: "", sortable: false, align: "center" } 822 { text: "Action", value: "", sortable: false, align: "center" }
823 ], 823 ],
824 schoolList: [], 824 schoolList: [],
825 editedIndex: -1, 825 editedIndex: -1,
826 addSchool: { 826 addSchool: {
827 role: "ADMIN" 827 role: "ADMIN"
828 }, 828 },
829 editedItem: {}, 829 editedItem: {},
830 schoolToken: {} 830 schoolToken: {}
831 }), 831 }),
832 methods: { 832 methods: {
833 getSchool() { 833 getSchool() {
834 this.showLoader = true; 834 this.showLoader = true;
835 http() 835 http()
836 .get("/getSchoolList", { 836 .get("/getSchoolList", {
837 headers: { Authorization: "Bearer " + this.$store.state.schoolToken } 837 headers: { Authorization: "Bearer " + this.$store.state.schoolToken }
838 }) 838 })
839 .then(response => { 839 .then(response => {
840 this.schoolList = response.data.data; 840 this.schoolList = response.data.data;
841 this.showLoader = false; 841 this.showLoader = false;
842 }) 842 })
843 .catch(error => { 843 .catch(error => {
844 this.showLoader = false; 844 this.showLoader = false;
845 // if (error.response.status === 401) { 845 // if (error.response.status === 401) {
846 // this.$router.replace({ path: "/" }); 846 // this.$router.replace({ path: "/" });
847 // this.$store.dispatch("setToken", null); 847 // this.$store.dispatch("setToken", null);
848 // this.$store.dispatch("Id", null); 848 // this.$store.dispatch("Id", null);
849 // this.$store.dispatch("Role", null); 849 // this.$store.dispatch("Role", null);
850 // } 850 // }
851 }); 851 });
852 }, 852 },
853 pickFile() { 853 pickFile() {
854 this.$refs.image.click(); 854 this.$refs.image.click();
855 }, 855 },
856 dates: function(date) { 856 dates: function(date) {
857 return moment(date).format("MMMM DD, YYYY"); 857 return moment(date).format("MMMM DD, YYYY");
858 }, 858 },
859 onFilePicked(e) { 859 onFilePicked(e) {
860 // console.log(e) 860 // console.log(e)
861 const files = e.target.files; 861 const files = e.target.files;
862 this.imageData.upload = e.target.files[0]; 862 this.imageData.upload = e.target.files[0];
863 if (files[0] !== undefined) { 863 if (files[0] !== undefined) {
864 this.imageName = files[0].name; 864 this.imageName = files[0].name;
865 if (this.imageName.lastIndexOf(".") <= 0) { 865 if (this.imageName.lastIndexOf(".") <= 0) {
866 return; 866 return;
867 } 867 }
868 const fr = new FileReader(); 868 const fr = new FileReader();
869 fr.readAsDataURL(files[0]); 869 fr.readAsDataURL(files[0]);
870 fr.addEventListener("load", () => { 870 fr.addEventListener("load", () => {
871 this.imageUrl = fr.result; 871 this.imageUrl = fr.result;
872 this.imageFile = files[0]; // this is an image file that can be sent to server... 872 this.imageFile = files[0]; // this is an image file that can be sent to server...
873 this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 873 this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
874 }); 874 });
875 } else { 875 } else {
876 this.imageName = ""; 876 this.imageName = "";
877 this.imageFile = ""; 877 this.imageFile = "";
878 this.imageUrl = ""; 878 this.imageUrl = "";
879 } 879 }
880 }, 880 },
881 editItem(item) { 881 editItem(item) {
882 this.editedIndex = this.schoolList.indexOf(item); 882 this.editedIndex = this.schoolList.indexOf(item);
883 this.editedItem = Object.assign({}, item); 883 this.editedItem = Object.assign({}, item);
884 this.dialog = true; 884 this.dialog = true;
885 }, 885 },
886 activeTab(type) { 886 activeTab(type) {
887 switch (type) { 887 switch (type) {
888 case "existing": 888 case "existing":
889 this.newActive = false; 889 this.newActive = false;
890 this.isActive = true; 890 this.isActive = true;
891 break; 891 break;
892 892
893 default: 893 default:
894 this.newActive = true; 894 this.newActive = true;
895 this.isActive = false; 895 this.isActive = false;
896 break; 896 break;
897 } 897 }
898 }, 898 },
899 close() { 899 close() {
900 this.dialog = false; 900 this.dialog = false;
901 setTimeout(() => { 901 setTimeout(() => {
902 this.editedItem = Object.assign({}, this.defaultItem); 902 this.editedItem = Object.assign({}, this.defaultItem);
903 this.editedIndex = -1; 903 this.editedIndex = -1;
904 }, 300); 904 }, 300);
905 }, 905 },
906 submit() { 906 submit() {
907 if (this.$refs.form.validate()) { 907 if (this.$refs.form.validate()) {
908 if (this.imageUrl) { 908 if (this.imageUrl) {
909 var str = this.imageUrl; 909 var str = this.imageUrl;
910 const [baseUrl, imageUrl] = str.split(/,/); 910 const [baseUrl, imageUrl] = str.split(/,/);
911 this.addSchool.upload = imageUrl; 911 this.addSchool.upload = imageUrl;
912 } 912 }
913 this.loading = true; 913 this.loading = true;
914 http() 914 http()
915 .post("/createSchool", this.addSchool, { 915 .post("/createSchool", this.addSchool, {
916 headers: { Authorization: "Bearer " + this.schoolToken } 916 headers: { Authorization: "Bearer " + this.schoolToken }
917 }) 917 })
918 .then(response => { 918 .then(response => {
919 this.snackbar = true; 919 this.snackbar = true;
920 this.text = "New School added successfully"; 920 this.text = "New School added successfully";
921 this.clear(); 921 this.clear();
922 this.getSchool(); 922 this.getSchool();
923 this.loading = false; 923 this.loading = false;
924 }) 924 })
925 .catch(error => { 925 .catch(error => {
926 this.snackbar = true; 926 this.snackbar = true;
927 this.text = error.response.data.message; 927 this.text = error.response.data.message;
928 this.loading = false; 928 this.loading = false;
929 }); 929 });
930 } 930 }
931 }, 931 },
932 clear() { 932 clear() {
933 this.$refs.form.reset(); 933 this.$refs.form.reset();
934 this.imageUrl = ""; 934 this.imageUrl = "";
935 }, 935 },
936 save() { 936 save() {
937 if (this.imageUrl) { 937 if (this.imageUrl) {
938 var str = this.imageUrl; 938 var str = this.imageUrl;
939 const [baseUrl, imageUrl] = str.split(/,/); 939 const [baseUrl, imageUrl] = str.split(/,/);
940 this.editedItem.upload = imageUrl; 940 this.editedItem.upload = imageUrl;
941 } 941 }
942 this.editedItem.schoolId = this.editedItem._id; 942 this.editedItem.schoolId = this.editedItem._id;
943 http() 943 http()
944 .put("/updateSchool", this.editedItem) 944 .put("/updateSchool", this.editedItem)
945 .then(response => { 945 .then(response => {
946 this.snackbar = true; 946 this.snackbar = true;
947 this.text = "Successfully School Existing User"; 947 this.text = "Successfully School Existing User";
948 this.imageUrl = ""; 948 this.imageUrl = "";
949 this.getSchool(); 949 this.getSchool();
950 this.close(); 950 this.close();
951 }) 951 })
952 .catch(error => { 952 .catch(error => {
953 // console.log(error); 953 // console.log(error);
954 if ((this.snackbar = true)) { 954 if ((this.snackbar = true)) {
955 this.text = error.response.data.statusText; 955 this.text = error.response.data.statusText;
956 } 956 }
957 }); 957 });
958 }, 958 },
959 adminAccess(data) { 959 adminAccess(data) {
960 // console.log("dataaaaaaaaaaaaaa", data); 960 // console.log("dataaaaaaaaaaaaaa", data);
961 this.showLoader = true; 961 this.showLoader = true;
962 http() 962 http()
963 .get("/getAdminAccess", { 963 .get("/getAdminAccess", {
964 params: { schoolId: data._id }, 964 params: { schoolId: data._id },
965 headers: { Authorization: "Bearer " + this.schoolToken } 965 headers: { Authorization: "Bearer " + this.schoolToken }
966 }) 966 })
967 .then(response => { 967 .then(response => {
968 this.$store.dispatch("setToken", response.data.data.token); 968 this.$store.dispatch("setToken", response.data.data.token);
969 this.$store.dispatch("Id", response.data.data.id); 969 this.$store.dispatch("Id", response.data.data.id);
970 this.$store.dispatch("Role", response.data.data.role); 970 this.$store.dispatch("Role", response.data.data.role);
971 this.$router.push("/dashboard"); 971 this.$router.push("/dashboard");
972 location.reload(); 972 setTimeout(() => {
973 location.reload();
974 }, 1000);
973 // let routeData = this.$router.resolve({ 975 // let routeData = this.$router.resolve({
974 // name: "dashboardAdmin" 976 // name: "dashboardAdmin"
975 // }); 977 // });
976 // window.open(routeData.href, "_blank"); 978 // window.open(routeData.href, "_blank");
977 979
978 this.showLoader = false; 980 this.showLoader = false;
979 }) 981 })
980 .catch(error => { 982 .catch(error => {
981 this.showLoader = false; 983 this.showLoader = false;
982 }); 984 });
983 }, 985 },
984 suspendSchoolStatus(suspendStatus, id) { 986 suspendSchoolStatus(suspendStatus, id) {
985 let suspendStatusData = { 987 let suspendStatusData = {
986 schoolId: id, 988 schoolId: id,
987 status: suspendStatus 989 status: suspendStatus
988 }; 990 };
989 http() 991 http()
990 .put("/suspendSchoolAccount", suspendStatusData, { 992 .put("/suspendSchoolAccount", suspendStatusData, {
991 headers: { Authorization: "Bearer " + this.schoolToken } 993 headers: { Authorization: "Bearer " + this.schoolToken }
992 }) 994 })
993 .then(response => { 995 .then(response => {
994 this.getSchool(); 996 this.getSchool();
995 this.text = response.data.message; 997 this.text = response.data.message;
996 this.snackbar = true; 998 this.snackbar = true;
997 }) 999 })
998 .catch(error => { 1000 .catch(error => {
999 // console.log(error.response.data.data); 1001 // console.log(error.response.data.data);
1000 this.snackbar = true; 1002 this.snackbar = true;
1001 this.text = error.response.data.message; 1003 this.text = error.response.data.message;
1002 }); 1004 });
1003 } 1005 }
1004 }, 1006 },
1005 mounted() { 1007 mounted() {
1006 const getCountryList = countryList(); 1008 const getCountryList = countryList();
1007 this.countries = getCountryList; 1009 this.countries = getCountryList;
1008 this.token = this.$store.state.token; 1010 this.token = this.$store.state.token;
1009 this.schoolToken = this.$store.state.schoolToken; 1011 this.schoolToken = this.$store.state.schoolToken;
1010 this.getSchool(); 1012 this.getSchool();
1011 }, 1013 },
1012 created() { 1014 created() {
1013 this.$root.$on("app:search", search => { 1015 this.$root.$on("app:search", search => {
1014 this.search = search; 1016 this.search = search;
1015 }); 1017 });
1016 }, 1018 },
1017 beforeDestroy() { 1019 beforeDestroy() {
1018 // dont forget to remove the listener 1020 // dont forget to remove the listener
1019 this.$root.$off("app:search"); 1021 this.$root.$off("app:search");
1020 } 1022 }
1021 }; 1023 };
1022 </script> 1024 </script>
1023 <style scoped> 1025 <style scoped>
1024 .active { 1026 .active {
1025 background-color: gray; 1027 background-color: gray;
1026 color: white !important; 1028 color: white !important;
1027 } 1029 }
1028 .activebtn { 1030 .activebtn {
1029 color: black !important; 1031 color: black !important;
1030 } 1032 }
1031 </style> 1033 </style>
src/pages/School/viewSchoolDashboard.vue
Diff comments   View file @68d600c
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <!-- ****** VIEW PROFIL NOTICE BOARD ****** --> 3 <!-- ****** VIEW PROFIL NOTICE BOARD ****** -->
4 <!-- <v-dialog v-model="dialogNotice" max-width="940px" scrollable> 4 <!-- <v-dialog v-model="dialogNotice" max-width="940px" scrollable>
5 <v-card> 5 <v-card>
6 <v-toolbar color="grey lighten-2" flat> 6 <v-toolbar color="grey lighten-2" flat>
7 <v-spacer></v-spacer> 7 <v-spacer></v-spacer>
8 <v-toolbar-title> 8 <v-toolbar-title>
9 <h3>Notice Board</h3> 9 <h3>Notice Board</h3>
10 </v-toolbar-title> 10 </v-toolbar-title>
11 <v-spacer></v-spacer> 11 <v-spacer></v-spacer>
12 <v-icon @click="closeNotice">close</v-icon> 12 <v-icon @click="closeNotice">close</v-icon>
13 </v-toolbar> 13 </v-toolbar>
14 <v-card-text> 14 <v-card-text>
15 <v-layout> 15 <v-layout>
16 <v-flex align-center justify-center layout text-xs-center class="mt-2"> 16 <v-flex align-center justify-center layout text-xs-center class="mt-2">
17 <img src="/static/icon/user.png" width="70px" v-if="!notice.eventImageUrl" /> 17 <img src="/static/icon/user.png" width="70px" v-if="!notice.eventImageUrl" />
18 <img :src="notice.eventImageUrl" width="280px" v-else-if="notice.eventImageUrl" /> 18 <img :src="notice.eventImageUrl" width="280px" v-else-if="notice.eventImageUrl" />
19 </v-flex> 19 </v-flex>
20 </v-layout> 20 </v-layout>
21 <v-container grid-list-md> 21 <v-container grid-list-md>
22 <v-layout wrap> 22 <v-layout wrap>
23 <v-flex> 23 <v-flex>
24 <v-layout> 24 <v-layout>
25 <v-flex xs5 sm6> 25 <v-flex xs5 sm6>
26 <h5 class="right my-1"> 26 <h5 class="right my-1">
27 <b>Title:</b> 27 <b>Title:</b>
28 </h5> 28 </h5>
29 </v-flex> 29 </v-flex>
30 <v-flex sm6 xs8> 30 <v-flex sm6 xs8>
31 <h5 class="my-1">{{ notice.title }}</h5> 31 <h5 class="my-1">{{ notice.title }}</h5>
32 </v-flex> 32 </v-flex>
33 </v-layout> 33 </v-layout>
34 <v-layout> 34 <v-layout>
35 <v-flex xs5 sm6> 35 <v-flex xs5 sm6>
36 <h5 class="right my-1"> 36 <h5 class="right my-1">
37 <b>Description:</b> 37 <b>Description:</b>
38 </h5> 38 </h5>
39 </v-flex> 39 </v-flex>
40 <v-flex sm6 xs8> 40 <v-flex sm6 xs8>
41 <h5 class="my-1">{{ notice.description }}</h5> 41 <h5 class="my-1">{{ notice.description }}</h5>
42 </v-flex> 42 </v-flex>
43 </v-layout> 43 </v-layout>
44 </v-flex> 44 </v-flex>
45 </v-layout> 45 </v-layout>
46 </v-container> 46 </v-container>
47 </v-card-text> 47 </v-card-text>
48 </v-card> 48 </v-card>
49 </v-dialog>--> 49 </v-dialog>-->
50 <!-- <v-container fluid grid-list-xl> --> 50 <!-- <v-container fluid grid-list-xl> -->
51 <v-layout wrap> 51 <v-layout wrap>
52 <v-flex xs12> 52 <v-flex xs12>
53 <v-layout wrap row> 53 <v-layout wrap row>
54 <!-- ***** Total Students ***** --> 54 <!-- ***** Total Students ***** -->
55 <v-flex xs12 sm12 md9> 55 <v-flex xs12 sm12 md9>
56 <v-container fluid grid-list-xl> 56 <v-container fluid grid-list-xl>
57 <v-flex xs12 sm12 md12> 57 <v-flex xs12 sm12 md12>
58 <v-layout wrap class> 58 <v-layout wrap class>
59 <v-flex xs12 sm12 md3> 59 <v-flex xs12 sm12 md3>
60 <router-link :to="{ name:'Students' }"> 60 <router-link :to="{ name:'Students' }">
61 <v-card class="card pink-bgcolor"> 61 <v-card class="card pink-bgcolor">
62 <v-card-title primary-title class="titleCard white--text py-3">Students</v-card-title> 62 <v-card-title primary-title class="titleCard white--text py-3">Students</v-card-title>
63 <img src="/static/icon/student.png" class="ml-2" width="40" alt="icons" /> 63 <img src="/static/icon/student.png" class="ml-2" width="40" alt="icons" />
64 <v-card-title class="headline py-1 white--text">{{ students.length }}</v-card-title> 64 <v-card-title class="headline py-1 white--text">{{ students.length }}</v-card-title>
65 </v-card> 65 </v-card>
66 </router-link> 66 </router-link>
67 </v-flex> 67 </v-flex>
68 <!-- ***** Total Teachers***** --> 68 <!-- ***** Total Teachers***** -->
69 <v-flex xs12 sm12 md3> 69 <v-flex xs12 sm12 md3>
70 <router-link :to="{ name:'Teachers' }"> 70 <router-link :to="{ name:'Teachers' }">
71 <v-card flat class="card elevation-2 firozi-bgcolor"> 71 <v-card flat class="card elevation-2 firozi-bgcolor">
72 <v-card-title primary-title class="titleCard white--text py-3">Teachers</v-card-title> 72 <v-card-title primary-title class="titleCard white--text py-3">Teachers</v-card-title>
73 <img src="/static/icon/teacher.png" class="ml-2" width="40" alt="icons" /> 73 <img src="/static/icon/teacher.png" class="ml-2" width="40" alt="icons" />
74 74
75 <v-card-title class="headline py-1 white--text">{{ teachers.length }}</v-card-title> 75 <v-card-title class="headline py-1 white--text">{{ teachers.length }}</v-card-title>
76 </v-card> 76 </v-card>
77 </router-link> 77 </router-link>
78 </v-flex> 78 </v-flex>
79 <!-- ***** Total Parents ***** --> 79 <!-- ***** Total Parents ***** -->
80 <v-flex xs12 sm12 md3> 80 <v-flex xs12 sm12 md3>
81 <router-link :to="{ name:'Parents' }"> 81 <router-link :to="{ name:'Parents' }">
82 <v-card flat class="card yellow darken-3"> 82 <v-card flat class="card yellow darken-3">
83 <v-card-title primary-title class="titleCard white--text py-3">Parents</v-card-title> 83 <v-card-title primary-title class="titleCard white--text py-3">Parents</v-card-title>
84 <img src="/static/icon/parents.png" class="ml-3" width="40px" alt="icons" /> 84 <img src="/static/icon/parents.png" class="ml-3" width="40px" alt="icons" />
85 <v-card-title class="headline py-1 white--text">{{ parents.length }}</v-card-title> 85 <v-card-title class="headline py-1 white--text">{{ parents.length }}</v-card-title>
86 </v-card> 86 </v-card>
87 </router-link> 87 </router-link>
88 </v-flex> 88 </v-flex>
89 <!-- ***** Total Class***** --> 89 <!-- ***** Total Class***** -->
90 <v-flex xs12 sm12 md3> 90 <v-flex xs12 sm12 md3>
91 <router-link :to="{ name:'Class' }"> 91 <router-link :to="{ name:'Class' }">
92 <v-card flat class="card darkBlue-bgcolor"> 92 <v-card flat class="card darkBlue-bgcolor">
93 <v-card-title primary-title class="titleCard white--text py-3">Class</v-card-title> 93 <v-card-title primary-title class="titleCard white--text py-3">Class</v-card-title>
94 <img src="/static/icon/class.png" width="40" alt="icons" class="ml-2" /> 94 <img src="/static/icon/class.png" width="40" alt="icons" class="ml-2" />
95 <v-card-title class="headline py-1 white--text">{{ classes.length }}</v-card-title> 95 <v-card-title class="headline py-1 white--text">{{ classes.length }}</v-card-title>
96 </v-card> 96 </v-card>
97 </router-link> 97 </router-link>
98 </v-flex> 98 </v-flex>
99 </v-layout> 99 </v-layout>
100 </v-flex> 100 </v-flex>
101 <v-layout> 101 <v-layout>
102 <v-flex xs12> 102 <v-flex xs12>
103 <v-card class="card mt-2 account-Card"> 103 <v-card class="card mt-2 account-Card">
104 <h4> 104 <h4>
105 <b>Account</b> 105 <b>Account</b>
106 </h4> 106 </h4>
107 <v-layout wrap> 107 <v-layout wrap>
108 <v-flex xs12 sm12 md3> 108 <v-flex xs12 sm12 md3>
109 <v-list two-line> 109 <v-list two-line>
110 <template> 110 <template>
111 <v-list-tile> 111 <v-list-tile>
112 <v-list-tile-avatar> 112 <v-list-tile-avatar>
113 <v-icon class="account-circle darkBlue-color">panorama_fish_eye</v-icon> 113 <v-icon class="account-circle darkBlue-color">panorama_fish_eye</v-icon>
114 </v-list-tile-avatar> 114 </v-list-tile-avatar>
115 <v-list-tile-content> 115 <v-list-tile-content>
116 <v-list-tile-title class="mt-2"> 116 <v-list-tile-title class="mt-2">
117 <p class="subheading font-color">Fees</p> 117 <p class="subheading font-color">Fees</p>
118 </v-list-tile-title> 118 </v-list-tile-title>
119 <v-list-tile-title>Rs 1000</v-list-tile-title> 119 <v-list-tile-title>Rs 1000</v-list-tile-title>
120 </v-list-tile-content> 120 </v-list-tile-content>
121 </v-list-tile> 121 </v-list-tile>
122 <v-list-tile> 122 <v-list-tile>
123 <v-list-tile-avatar> 123 <v-list-tile-avatar>
124 <v-icon class="account-circle yellowDark-color">panorama_fish_eye</v-icon> 124 <v-icon class="account-circle yellowDark-color">panorama_fish_eye</v-icon>
125 </v-list-tile-avatar> 125 </v-list-tile-avatar>
126 <v-list-tile-content> 126 <v-list-tile-content>
127 <v-list-tile-title class="mt-2"> 127 <v-list-tile-title class="mt-2">
128 <p class="subheading font-color">Collection</p> 128 <p class="subheading font-color">Collection</p>
129 </v-list-tile-title> 129 </v-list-tile-title>
130 <v-list-tile-title>Rs 2000</v-list-tile-title> 130 <v-list-tile-title>Rs 2000</v-list-tile-title>
131 </v-list-tile-content> 131 </v-list-tile-content>
132 </v-list-tile> 132 </v-list-tile>
133 <v-list-tile> 133 <v-list-tile>
134 <v-list-tile-avatar> 134 <v-list-tile-avatar>
135 <v-icon class="account-circle pink-color">panorama_fish_eye</v-icon> 135 <v-icon class="account-circle pink-color">panorama_fish_eye</v-icon>
136 </v-list-tile-avatar> 136 </v-list-tile-avatar>
137 <v-list-tile-content> 137 <v-list-tile-content>
138 <v-list-tile-title class="mt-2"> 138 <v-list-tile-title class="mt-2">
139 <p class="subheading font-color">Expences</p> 139 <p class="subheading font-color">Expences</p>
140 </v-list-tile-title> 140 </v-list-tile-title>
141 <v-list-tile-title>Rs 3000</v-list-tile-title> 141 <v-list-tile-title>Rs 3000</v-list-tile-title>
142 </v-list-tile-content> 142 </v-list-tile-content>
143 </v-list-tile> 143 </v-list-tile>
144 </template> 144 </template>
145 </v-list> 145 </v-list>
146 </v-flex> 146 </v-flex>
147 <v-flex xs12 sm12 md9> 147 <v-flex xs12 sm12 md9 lg9 >
148 <div id="chart"> 148 <!-- <div id="chart"> -->
149 <apexchart 149 <apexchart type="bar" height="250" style="max-width:800px !important" :options="chartOptions" :series="series"></apexchart>
150 type="bar" 150 <!-- </div> -->
151 height="250"
152 :options="chartOptions"
153 :series="series"
154 ></apexchart>
155 </div>
156 </v-flex> 151 </v-flex>
157 </v-layout> 152 </v-layout>
158 </v-card> 153 </v-card>
159 </v-flex> 154 </v-flex>
160 </v-layout> 155 </v-layout>
161 <v-card class="mt-2 card"> 156 <v-card class="mt-2 card">
162 <!-- <full-calendar 157 <!-- <full-calendar
163 ref="calendar" 158 ref="calendar"
164 defaultView="month" 159 defaultView="month"
165 droppable="false" 160 droppable="false"
166 :events="events" 161 :events="events"
167 :config="config" 162 :config="config"
168 ></full-calendar>--> 163 ></full-calendar>-->
169 <h4 class="pa-3"> 164 <h4 class="pa-3">
170 <b>Notice</b> 165 <b>Notice</b>
171 </h4> 166 </h4>
172 167
173 <v-data-table 168 <v-data-table
174 :items="noticeData" 169 :items="noticeData"
175 class="elevation-0" 170 class="elevation-0"
176 flat 171 flat
177 hide-actions 172 hide-actions
178 hide-headers 173 hide-headers
179 style="border-spacing: 0 !important;" 174 style="border-spacing: 0 !important;"
180 > 175 >
181 <template 176 <template
182 slot="items" 177 slot="items"
183 slot-scope="props" 178 slot-scope="props"
184 v-if="props.index < 5" 179 v-if="props.index < 5"
185 style="border-spacing: 0 !important;" 180 style="border-spacing: 0 !important;"
186 > 181 >
187 <tr class="td-notice"> 182 <tr class="td-notice">
188 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td> 183 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
189 <td> 184 <td>
190 <span class="grey--text caption">{{ date(props.item.created) }}</span> 185 <span class="grey--text caption">{{ date(props.item.created) }}</span>
191 <br /> 186 <br />
192 <span class="body-2">{{ props.item.title}}</span> 187 <span class="body-2">{{ props.item.title}}</span>
193 </td> 188 </td>
194 <td class="noticeDecritpion grey--text mt-2">{{ props.item.description}}</td> 189 <td class="noticeDecritpion grey--text mt-2">{{ props.item.description}}</td>
195 190
196 <td class="text-xs-center"> 191 <td class="text-xs-center">
197 <span> 192 <span>
198 <v-tooltip top> 193 <v-tooltip top>
199 <img 194 <img
200 slot="activator" 195 slot="activator"
201 style="cursor:pointer; width:25px; height:25px; " 196 style="cursor:pointer; width:25px; height:25px; "
202 @click="profile" 197 @click="profile"
203 src="/static/icon/view.png" 198 src="/static/icon/view.png"
204 /> 199 />
205 <span>View</span> 200 <span>View</span>
206 </v-tooltip> 201 </v-tooltip>
207 </span> 202 </span>
208 </td> 203 </td>
209 </tr> 204 </tr>
210 </template> 205 </template>
211 </v-data-table> 206 </v-data-table>
212 </v-card> 207 </v-card>
213 </v-container> 208 </v-container>
214 </v-flex> 209 </v-flex>
215 <v-flex xs12 sm12 md3> 210 <v-flex xs12 sm12 md3>
216 <v-card height="100%" class="elevation-0 mt-3 profileDasboard"> 211 <v-card height="100%" class="elevation-0 mt-3 profileDasboard">
217 <v-card-text> 212 <v-card-text>
218 <h4 class="text-xs-center py-3"> 213 <h4 class="text-xs-center py-3">
219 <b>Profile</b> 214 <b>Profile</b>
220 </h4> 215 </h4>
221 <v-flex xs12 class="py-3"> 216 <v-flex xs12 class="py-3">
222 <v-layout wrap> 217 <v-layout wrap>
223 <v-flex xs12 sm12 md4> 218 <v-flex xs12 sm12 md4>
224 <img src="/static/icon/user.png" v-if="!userData.schoolLogoUrl" width="80" /> 219 <img src="/static/icon/user.png" v-if="!userData.schoolLogoUrl" width="80" />
225 <img 220 <img
226 :src="userData.schoolLogoUrl" 221 :src="userData.schoolLogoUrl"
227 v-else-if="userData.schoolLogoUrl" 222 v-else-if="userData.schoolLogoUrl"
228 width="80" 223 width="80"
229 /> 224 />
230 </v-flex> 225 </v-flex>
231 <v-flex xs12 sm12 md6> 226 <v-flex xs12 sm12 md6>
232 <p class="mb-0 body-1"> 227 <p class="mb-0 body-1">
233 <i>{{ userData.name }}</i> 228 <i>{{ userData.name }}</i>
234 </p> 229 </p>
235 <p class="mb-0 caption grey--text">{{ userData.email }}</p> 230 <p class="mb-0 caption grey--text">{{ userData.email }}</p>
236 <p class="mb-0 caption grey--text">{{ userData.mobile }}</p> 231 <p class="mb-0 caption grey--text">{{ userData.mobile }}</p>
237 <address class="caption grey--text mb-3">{{ userData.address }}</address> 232 <address class="caption grey--text mb-3">{{ userData.address }}</address>
238 </v-flex> 233 </v-flex>
239 </v-layout> 234 </v-layout>
240 </v-flex> 235 </v-flex>
241 <hr /> 236 <hr />
242 <h4 class="text-xs-center py-3"> 237 <h4 class="text-xs-center py-3">
243 <b>Calender</b> 238 <b>Calender</b>
244 </h4> 239 </h4>
245 <vue-event-calendar :events="demoEvents"></vue-event-calendar> 240 <vue-event-calendar :events="demoEvents"></vue-event-calendar>
246 </v-card-text> 241 </v-card-text>
247 </v-card> 242 </v-card>
248 </v-flex> 243 </v-flex>
249 </v-layout> 244 </v-layout>
250 </v-flex> 245 </v-flex>
251 </v-layout> 246 </v-layout>
252 <v-dialog v-model="dialog" max-width="500"> 247 <v-dialog v-model="dialog" max-width="500">
253 <v-card color="grey lighten-4" flat> 248 <v-card color="grey lighten-4" flat>
254 <v-toolbar dark color="fixcolors"> 249 <v-toolbar dark color="fixcolors">
255 <v-spacer></v-spacer> 250 <v-spacer></v-spacer>
256 <v-btn icon @click="dialog= false"> 251 <v-btn icon @click="dialog= false">
257 <v-icon>close</v-icon> 252 <v-icon>close</v-icon>
258 </v-btn> 253 </v-btn>
259 </v-toolbar> 254 </v-toolbar>
260 <v-flex class="py-4"> 255 <v-flex class="py-4">
261 <v-list-tile> 256 <v-list-tile>
262 <v-list-tile-action> 257 <v-list-tile-action>
263 <v-icon>edit</v-icon> 258 <v-icon>edit</v-icon>
264 </v-list-tile-action> 259 </v-list-tile-action>
265 <v-list-tile-content> 260 <v-list-tile-content>
266 <v-list-tile-title>{{ selected.title }}</v-list-tile-title> 261 <v-list-tile-title>{{ selected.title }}</v-list-tile-title>
267 </v-list-tile-content> 262 </v-list-tile-content>
268 </v-list-tile> 263 </v-list-tile>
269 <v-list-tile> 264 <v-list-tile>
270 <v-list-tile-action> 265 <v-list-tile-action>
271 <v-icon>access_time</v-icon> 266 <v-icon>access_time</v-icon>
272 </v-list-tile-action> 267 </v-list-tile-action>
273 <v-list-tile-content> 268 <v-list-tile-content>
274 <v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title> 269 <v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title>
275 </v-list-tile-content> 270 </v-list-tile-content>
276 </v-list-tile> 271 </v-list-tile>
277 </v-flex> 272 </v-flex>
278 </v-card> 273 </v-card>
279 </v-dialog> 274 </v-dialog>
280 <div class="loader" v-if="showLoader"> 275 <div class="loader" v-if="showLoader">
281 <v-progress-circular indeterminate color="white"></v-progress-circular> 276 <v-progress-circular indeterminate color="white"></v-progress-circular>
282 </div> 277 </div>
283 </v-app> 278 </v-app>
284 </template> 279 </template>
285 280
286 <script> 281 <script>
287 import http from "@/Services/http.js"; 282 import http from "@/Services/http.js";
288 import moment from "moment"; 283 import moment from "moment";
289 // import { FunctionalCalendar } from "vue-functional-calendar"; 284 // import { FunctionalCalendar } from "vue-functional-calendar";
290 285
291 export default { 286 export default {
292 components: { 287 components: {
293 // FunctionalCalendar 288 // FunctionalCalendar
294 }, 289 },
295 data() { 290 data() {
296 return { 291 return {
297 // data: { 292 // data: {
298 // clieckedToday: false 293 // clieckedToday: false
299 // }, 294 // },
300 // markedDates: ["16/4/2019", "18/4/2019", "20/4/2019", "21/4/2019"], 295 // markedDates: ["16/4/2019", "18/4/2019", "20/4/2019", "21/4/2019"],
301 // calendarData: {}, 296 // calendarData: {},
302 // calendar: {}, 297 // calendar: {},
303 demoEvents: [ 298 demoEvents: [
304 { 299 {
305 date: "2020/01/10", // Required 300 date: "2020/01/10", // Required
306 title: "Foo" // Required 301 title: "Foo" // Required
307 }, 302 },
308 { 303 {
309 date: "2020/01/12", 304 date: "2020/01/12",
310 title: "Bar", 305 title: "Bar",
311 desc: "description", 306 desc: "description",
312 customClass: "disabled highlight" // Custom classes to an calendar cell 307 customClass: "disabled highlight" // Custom classes to an calendar cell
313 } 308 }
314 ], 309 ],
315 310
316 showLoader: false, 311 showLoader: false,
317 calendarData: {}, 312 calendarData: {},
318 dialog: false, 313 dialog: false,
319 dialogNotice: false, 314 dialogNotice: false,
320 HolidaysList: [], 315 HolidaysList: [],
321 EventsList: [], 316 EventsList: [],
322 events: [], 317 events: [],
323 config: { 318 config: {
324 eventClick: event => { 319 eventClick: event => {
325 this.selected = event; 320 this.selected = event;
326 this.dialog = true; 321 this.dialog = true;
327 } 322 }
328 }, 323 },
329 selected: {}, 324 selected: {},
330 // notice: {}, 325 // notice: {},
331 userData: {}, 326 userData: {},
332 dated: new Date(2018, 0, 9), 327 dated: new Date(2018, 0, 9),
333 userList: [], 328 userList: [],
334 sectionList: [], 329 sectionList: [],
335 students: "", 330 students: "",
336 parents: "", 331 parents: "",
337 teachers: "", 332 teachers: "",
338 classes: "", 333 classes: "",
339 noticeData: [], 334 noticeData: [],
340 attrs: [ 335 attrs: [
341 { 336 {
342 key: "today", 337 key: "today",
343 highlight: true, 338 highlight: true,
344 dates: new Date() 339 dates: new Date()
345 } 340 }
346 ], 341 ],
347 drawer: true, 342 drawer: true,
348 items: [ 343 items: [
349 { title: "Home", icon: "dashboard" }, 344 { title: "Home", icon: "dashboard" },
350 { title: "About", icon: "question_answer" } 345 { title: "About", icon: "question_answer" }
351 ], 346 ],
352 right: null, 347 right: null,
353 348
354 series: [ 349 series: [
355 { 350 {
356 name: "Total", 351 name: "Total",
357 data: [66, 44, 33] 352 data: [66, 44, 33]
358 } 353 }
359 ], 354 ],
360 chartOptions: { 355 chartOptions: {
361 chart: { 356 chart: {
362 type: "bar", 357 // type: "bar",
363 height: 150, 358 height: 150,
364 animations: { 359 stacked: true
365 enabled: true, 360
366 easing: "easeinout", 361 // animations: {
367 speed: 1200, 362 // enabled: true,
368 animateGradually: { 363 // easing: "easeinout",
369 enabled: true, 364 // speed: 1200,
370 delay: 450 365 // animateGradually: {
371 }, 366 // enabled: true,
372 dynamicAnimation: { 367 // delay: 450
373 enabled: true, 368 // },
374 speed: 450 369 // dynamicAnimation: {
375 } 370 // enabled: true,
376 } 371 // speed: 450
372 // }
373 // }
377 }, 374 },
378 plotOptions: { 375 plotOptions: {
379 bar: { 376 bar: {
380 horizontal: false, 377 horizontal: false,
381 columnWidth: "25%", 378 columnWidth: "25%",
382 // endingShape: "rounded", 379 // endingShape: "rounded",
383 distributed: true 380 distributed: true
384 } 381 }
385 }, 382 },
383 responsive: [
384 {
385 breakpoint: 480,
386 options: {
387 legend: {
388 position: "bottom",
389 offsetX: -10,
390 offsetY: 0
391 }
392 }
393 }
394 ],
395
386 legend: { 396 legend: {
387 show: false 397 position: "right",
398 offsetY: 40
388 }, 399 },
389 colors: ["#7852cc", "#f9a825", "#ff8a89"], 400 colors: ["#7852cc", "#f9a825", "#ff8a89"],
390 dataLabels: { 401 dataLabels: {
391 enabled: false 402 enabled: false
392 }, 403 },
393 stroke: { 404 stroke: {
394 show: true, 405 show: true,
395 width: 2, 406 width: 2,
396 colors: ["transparent"] 407 colors: ["transparent"]
397 }, 408 },
398 xaxis: { 409 xaxis: {
399 categories: ["Fee", "Collections", "Expences"] 410 categories: ["Fee", "Collections", "Expences"]
400 }, 411 },
401 yaxis: { 412 yaxis: {
402 title: { 413 title: {
403 text: "" 414 text: ""
404 } 415 }
405 }, 416 },
406 fill: { 417 fill: {
407 opacity: 1 418 opacity: 1
408 }, 419 },
409 tooltip: { 420 tooltip: {
410 y: { 421 y: {
411 formatter: function(val, opts) { 422 formatter: function(val, opts) {
412 // console.log("opts",opts.w.config.xaxis.categories) 423 // console.log("opts",opts.w.config.xaxis.categories)
413 return "" + val + " "; 424 return "" + val + " ";
414 } 425 }
415 } 426 }
416 } 427 }
417 } 428 }
418 }; 429 };
419 }, 430 },
420 mounted() { 431 mounted() {
421 // = this.$store.state.schoolToken; 432 // = this.$store.state.schoolToken;
422 // console.log("this.$store.state.role", this.token); 433 // console.log("this.$store.state.role", this.token);
423 if (this.$store.state.role === "ADMIN") { 434 if (this.$store.state.role === "ADMIN") {
424 this.token = this.$store.state.token; 435 this.token = this.$store.state.token;
425 } else if (this.$store.state.schoolRole === "SUPERADMIN") { 436 } else if (this.$store.state.schoolRole === "SUPERADMIN") {
426 this.token = this.$store.state.schoolToken; 437 this.token = this.$store.state.schoolToken;
427 } 438 }
428 // console.log("role", this.$store.state.schoolRole,"tt",this.$store.state.schoolToken); 439 // console.log("role", this.$store.state.schoolRole,"tt",this.$store.state.schoolToken);
429 // this.getData(); 440 // this.getData();
430 this.getStudents(); 441 this.getStudents();
431 this.getTeachers(); 442 this.getTeachers();
432 this.getParents(); 443 this.getParents();
433 this.getClasses(); 444 this.getClasses();
434 this.getNoticeData(); 445 this.getNoticeData();
435 this.getUserData(); 446 this.getUserData();
436 // this.getUsersList(); 447 // this.getUsersList();
437 }, 448 },
438 methods: { 449 methods: {
439 closeNotice() { 450 closeNotice() {
440 this.dialogNotice = false; 451 this.dialogNotice = false;
441 }, 452 },
442 profile() { 453 profile() {
443 // this.editedIndex = this.desserts.indexOf(item); 454 // this.editedIndex = this.desserts.indexOf(item);
444 // this.notice = Object.assign({}, item); 455 // this.notice = Object.assign({}, item);
445 // this.dialogNotice = true; 456 // this.dialogNotice = true;
446 this.$router.push({ name: "NoticeBoard" }); 457 this.$router.push({ name: "NoticeBoard" });
447 }, 458 },
448 date: function(date) { 459 date: function(date) {
449 return moment(date).format("MMMM DD, YYYY HH:mm"); 460 return moment(date).format("MMMM DD, YYYY HH:mm");
450 }, 461 },
451 refreshEvents() { 462 refreshEvents() {
452 this.$refs.calendar.$emit("refetch-events"); 463 this.$refs.calendar.$emit("refetch-events");
453 }, 464 },
454 removeEvent() { 465 removeEvent() {
455 this.$refs.calendar.$emit("remove-event", this.selected); 466 this.$refs.calendar.$emit("remove-event", this.selected);
456 this.selected = {}; 467 this.selected = {};
457 }, 468 },
458 eventSelected(event) { 469 eventSelected(event) {
459 this.selected = event; 470 this.selected = event;
460 console.log("this.selected", this.selected); 471 console.log("this.selected", this.selected);
461 }, 472 },
462 // eventDropStart: function(event) { 473 // eventDropStart: function(event) {
463 // event.editable = false; 474 // event.editable = false;
464 // }, 475 // },
465 eventCreated(...test) { 476 eventCreated(...test) {
466 console.log(test); 477 console.log(test);
467 }, 478 },
468 getStudents() { 479 getStudents() {
469 http() 480 http()
470 .get("/getStudentsList", { 481 .get("/getStudentsList", {
471 headers: { 482 headers: {
472 Authorization: "Bearer " + this.token 483 Authorization: "Bearer " + this.token
473 } 484 }
474 }) 485 })
475 .then(response => { 486 .then(response => {
476 this.students = response.data.data; 487 this.students = response.data.data;
477 this.showLoader = false; 488 this.showLoader = false;
478 }) 489 })
479 .catch(error => { 490 .catch(error => {
480 // console.log("err====>", err); 491 // console.log("err====>", err);
481 this.showLoader = false; 492 this.showLoader = false;
482 // if (error.response.status === 401) { 493 // if (error.response.status === 401) {
483 // this.$router.replace({ path: "/" }); 494 // this.$router.replace({ path: "/" });
484 // this.$store.dispatch("setToken", null); 495 // this.$store.dispatch("setToken", null);
485 // this.$store.dispatch("Id", null); 496 // this.$store.dispatch("Id", null);
486 // } 497 // }
487 }); 498 });
488 }, 499 },
489 getParents() { 500 getParents() {
490 http() 501 http()
491 .get("/getParentsList", { 502 .get("/getParentsList", {
492 headers: { 503 headers: {
493 Authorization: "Bearer " + this.token 504 Authorization: "Bearer " + this.token
494 } 505 }
495 }) 506 })
496 .then(response => { 507 .then(response => {
497 this.parents = response.data.data; 508 this.parents = response.data.data;
498 this.showLoader = false; 509 this.showLoader = false;
499 }) 510 })
500 .catch(error => { 511 .catch(error => {
501 // console.log("err====>", err); 512 // console.log("err====>", err);
502 this.showLoader = false; 513 this.showLoader = false;
503 // if (error.response.status === 401) { 514 // if (error.response.status === 401) {
504 // this.$router.replace({ path: "/" }); 515 // this.$router.replace({ path: "/" });
505 // this.$store.dispatch("setToken", null); 516 // this.$store.dispatch("setToken", null);
506 // this.$store.dispatch("Id", null); 517 // this.$store.dispatch("Id", null);
507 // } 518 // }
508 }); 519 });
509 }, 520 },
510 getTeachers() { 521 getTeachers() {
511 http() 522 http()
512 .get("/getTeachersList", { 523 .get("/getTeachersList", {
513 headers: { 524 headers: {
514 Authorization: "Bearer " + this.token 525 Authorization: "Bearer " + this.token
515 } 526 }
516 }) 527 })
517 .then(response => { 528 .then(response => {
518 this.teachers = response.data.data; 529 this.teachers = response.data.data;
519 this.showLoader = false; 530 this.showLoader = false;
520 }) 531 })
521 .catch(error => { 532 .catch(error => {
522 // console.log("err====>", err); 533 // console.log("err====>", err);
523 this.showLoader = false; 534 this.showLoader = false;
524 // if (error.response.status === 401) { 535 // if (error.response.status === 401) {
525 // this.$router.replace({ path: "/" }); 536 // this.$router.replace({ path: "/" });
526 // this.$store.dispatch("setToken", null); 537 // this.$store.dispatch("setToken", null);
527 // this.$store.dispatch("Id", null); 538 // this.$store.dispatch("Id", null);
528 // } 539 // }
529 }); 540 });
530 }, 541 },
531 getClasses() { 542 getClasses() {
532 http() 543 http()
533 .get("/getClassesList", { 544 .get("/getClassesList", {
534 headers: { 545 headers: {
535 Authorization: "Bearer " + this.token 546 Authorization: "Bearer " + this.token
536 } 547 }
537 }) 548 })
538 .then(response => { 549 .then(response => {
539 this.classes = response.data.data; 550 this.classes = response.data.data;
540 this.showLoader = false; 551 this.showLoader = false;
541 }) 552 })
542 .catch(error => { 553 .catch(error => {
543 this.showLoader = false; 554 this.showLoader = false;
544 // if (error.response.status === 401) { 555 // if (error.response.status === 401) {
545 // this.$router.replace({ path: "/" }); 556 // this.$router.replace({ path: "/" });
546 // this.$store.dispatch("setToken", null); 557 // this.$store.dispatch("setToken", null);
547 // this.$store.dispatch("Id", null); 558 // this.$store.dispatch("Id", null);
548 // this.$store.dispatch("Role", null); 559 // this.$store.dispatch("Role", null);
549 // } 560 // }
550 }); 561 });
551 }, 562 },
552 getNoticeData() { 563 getNoticeData() {
553 this.showLoader = true; 564 this.showLoader = true;
554 http() 565 http()
555 .get("/getEventsList", { 566 .get("/getEventsList", {
556 headers: { 567 headers: {
557 Authorization: "Bearer " + this.token 568 Authorization: "Bearer " + this.token
558 } 569 }
559 }) 570 })
560 .then(response => { 571 .then(response => {
561 this.noticeData = response.data.data; 572 this.noticeData = response.data.data;
562 this.showLoader = false; 573 this.showLoader = false;
563 }) 574 })
564 .catch(error => { 575 .catch(error => {
565 this.showLoader = false; 576 this.showLoader = false;
566 // if (error.response.status === 401) { 577 // if (error.response.status === 401) {
567 // this.$router.replace({ path: "/" }); 578 // this.$router.replace({ path: "/" });
568 // this.$store.dispatch("setToken", null); 579 // this.$store.dispatch("setToken", null);
569 // this.$store.dispatch("Id", null); 580 // this.$store.dispatch("Id", null);
570 // } 581 // }
571 }); 582 });
572 }, 583 },
573 getUserData() { 584 getUserData() {
574 // this.showLoader = true; 585 // this.showLoader = true;
575 http() 586 http()
576 .get("/getParticularUserDetail", { 587 .get("/getParticularUserDetail", {
577 headers: { 588 headers: {
578 Authorization: "Bearer " + this.token 589 Authorization: "Bearer " + this.token
579 } 590 }
580 }) 591 })
581 .then(response => { 592 .then(response => {
582 this.userData = response.data.data; 593 this.userData = response.data.data;
583 this.showLoader = false; 594 this.showLoader = false;
584 }) 595 })
585 .catch(error => { 596 .catch(error => {
586 this.showLoader = false; 597 this.showLoader = false;
587 // if (error.response.status === 401) { 598 // if (error.response.status === 401) {
588 // this.$router.replace({ path: "/" }); 599 // this.$router.replace({ path: "/" });
589 // this.$store.dispatch("setToken", null); 600 // this.$store.dispatch("setToken", null);
590 // this.$store.dispatch("Id", null); 601 // this.$store.dispatch("Id", null);
591 // } 602 // }
592 }); 603 });
593 } 604 }
594 } 605 }
595 }; 606 };
static/css/custom.css
Diff comments   View file @68d600c
1 .custom-input-align .v-label { 1 .custom-input-align .v-label {
2 text-align: center !important; 2 text-align: center !important;
3 width: 100% !important; 3 width: 100% !important;
4 } 4 }
5 5
6 .custom-input-align input { 6 .custom-input-align input {
7 text-align: center !important; 7 text-align: center !important;
8 } 8 }
9 9
10 .fixcolor { 10 .fixcolor {
11 background: linear-gradient(90deg, #f58753 30%, #f15e5f 110%) 11 background: linear-gradient(90deg, #f58753 30%, #f15e5f 110%)
12 } 12 }
13 13
14 .fixcolors { 14 .fixcolors {
15 background: #444B54 !important; 15 background: #444B54 !important;
16 } 16 }
17 17
18 .fc-toolbar .fc-state-active, 18 .fc-toolbar .fc-state-active,
19 .fc-toolbar .ui-state-active { 19 .fc-toolbar .ui-state-active {
20 z-index: 0 !important; 20 z-index: 0 !important;
21 } 21 }
22 22
23 .loader { 23 .loader {
24 width: 100%; 24 width: 100%;
25 height: 100%; 25 height: 100%;
26 position: fixed; 26 position: fixed;
27 top: 0; 27 top: 0;
28 left: 0; 28 left: 0;
29 text-align: center; 29 text-align: center;
30 background-color: rgba(0, 0, 0, 0.5); 30 background-color: rgba(0, 0, 0, 0.5);
31 z-index: 999; 31 z-index: 999;
32 } 32 }
33 33
34 .profile-image-wrapper { 34 .profile-image-wrapper {
35 position: relative; 35 position: relative;
36 } 36 }
37 37
38 .edit-profile-icon { 38 .edit-profile-icon {
39 position: absolute; 39 position: absolute;
40 right: 15px; 40 right: 15px;
41 top: 15px; 41 top: 15px;
42 cursor: pointer; 42 cursor: pointer;
43 } 43 }
44 44
45 .profile-image-wrapper>.edit-profile-icon { 45 .profile-image-wrapper>.edit-profile-icon {
46 right: 10%; 46 right: 10%;
47 top: 0%; 47 top: 0%;
48 margin-top: 8px; 48 margin-top: 8px;
49 border-radius: 50%; 49 border-radius: 50%;
50 padding: 7px; 50 padding: 7px;
51 font-size: 20px; 51 font-size: 20px;
52 } 52 }
53 53
54 .loader>div { 54 .loader>div {
55 position: relative; 55 position: relative;
56 top: calc(50% - 16px); 56 top: calc(50% - 16px);
57 } 57 }
58 58
59 .v-tabs__div { 59 .v-tabs__div {
60 text-transform: none !important; 60 text-transform: none !important;
61 } 61 }
62 62
63 .v-input__prepend-outer { 63 .v-input__prepend-outer {
64 margin-right: 0px !important; 64 margin-right: 0px !important;
65 } 65 }
66 66
67 .v-card__actions .v-btn { 67 .v-card__actions .v-btn {
68 margin: 0 15px !important; 68 margin: 0 15px !important;
69 min-width: 96px !important; 69 min-width: 96px !important;
70 } 70 }
71 71
72 .paymentStatus { 72 .paymentStatus {
73 border-radius: 4px; 73 border-radius: 4px;
74 } 74 }
75 75
76 .linkCover { 76 .linkCover {
77 overflow: auto !important; 77 overflow: auto !important;
78 } 78 }
79 79
80 .primary { 80 .primary {
81 background-color: #aaa !important; 81 background-color: #aaa !important;
82 border-color: #aaa !important; 82 border-color: #aaa !important;
83 } 83 }
84 84
85 h4 { 85 h4 {
86 background-repeat: no-repeat; 86 background-repeat: no-repeat;
87 padding: 8px; 87 padding: 8px;
88 margin: auto; 88 margin: auto;
89 font-size: 25px; 89 font-size: 25px;
90 } 90 }
91 91
92 #name { 92 #name {
93 position: absolute; 93 position: absolute;
94 left: 100px; 94 left: 100px;
95 top: 17px; 95 top: 17px;
96 } 96 }
97 97
98 #icon { 98 #icon {
99 position: absolute; 99 position: absolute;
100 right: 8px; 100 right: 8px;
101 top: 8px; 101 top: 8px;
102 } 102 }
103 103
104 #m { 104 #m {
105 position: relative; 105 position: relative;
106 left: 135px; 106 left: 135px;
107 top: -15px; 107 top: -15px;
108 } 108 }
109 109
110 #G { 110 #G {
111 position: absolute; 111 position: absolute;
112 top: 38px; 112 top: 38px;
113 color: white; 113 color: white;
114 } 114 }
115 115
116 #bt { 116 #bt {
117 position: relative; 117 position: relative;
118 top: -20px; 118 top: -20px;
119 left: 115px; 119 left: 115px;
120 } 120 }
121 121
122 #e { 122 #e {
123 position: relative; 123 position: relative;
124 top: 5px; 124 top: 5px;
125 right: -30px; 125 right: -30px;
126 height: 17px; 126 height: 17px;
127 cursor: pointer; 127 cursor: pointer;
128 } 128 }
129 129
130 #d { 130 #d {
131 position: relative; 131 position: relative;
132 top: 5px; 132 top: 5px;
133 right: -70px; 133 right: -70px;
134 height: 17px; 134 height: 17px;
135 cursor: pointer; 135 cursor: pointer;
136 } 136 }
137 137
138 #indexId { 138 #indexId {
139 padding: 0 0px !important; 139 padding: 0 0px !important;
140 } 140 }
141 141
142 #td { 142 #td {
143 border: 1px solid #dddddd; 143 border: 1px solid #dddddd;
144 text-align: left; 144 text-align: left;
145 padding: 8px; 145 padding: 8px;
146 } 146 }
147 147
148 .apexcharts-canvas { 148 /* .apexcharts-canvas {
149 width: 100% !important; 149 width: 100% !important;
150 } 150 }
151 .apexcharts-canvas > svg{ 151 .apexcharts-canvas > svg{
152 width: 100% !important; 152 width: 100% !important;
153 } 153 }
154 .apexcharts-canvas > svg > apexcharts-inner > apexcharts-graphical { 154 .apexcharts-canvas > svg > apexcharts-inner > apexcharts-graphical {
155 transform: translate(0); 155 transform: translate(0);
156 } 156 } */
157 157
158 #dialog { 158 #dialog {
159 height: 550px; 159 height: 550px;
160 } 160 }
161 161
162 #flex { 162 #flex {
163 height: 300px; 163 height: 300px;
164 } 164 }
165 165
166 .top { 166 .top {
167 margin-top: 100px; 167 margin-top: 100px;
168 } 168 }
169 169
170 .v-tabs__item a { 170 .v-tabs__item a {
171 font-size: 16px !important; 171 font-size: 16px !important;
172 } 172 }
173 173
174 .iconSize { 174 .iconSize {
175 font-size: 22px !important; 175 font-size: 22px !important;
176 } 176 }
177 177
178 .mr5 { 178 .mr5 {
179 margin-right: 48px !important; 179 margin-right: 48px !important;
180 } 180 }
181 181
182 .addressForm { 182 .addressForm {
183 max-width: 17%; 183 max-width: 17%;
184 } 184 }
185 185
186 .noticeDecritpion { 186 .noticeDecritpion {
187 white-space: nowrap; 187 white-space: nowrap;
188 width: 250px; 188 width: 250px;
189 overflow: hidden; 189 overflow: hidden;
190 text-overflow: ellipsis; 190 text-overflow: ellipsis;
191 display: block; 191 display: block;
192 } 192 }
193 193
194 .header-icon { 194 .header-icon {
195 color: #5f2171 !important; 195 color: #5f2171 !important;
196 } 196 }
197 197
198 .pink-bgcolor { 198 .pink-bgcolor {
199 background: #ff8a89 !important 199 background: #ff8a89 !important
200 } 200 }
201 201
202 .firozi-bgcolor { 202 .firozi-bgcolor {
203 background: #71d9ea !important 203 background: #71d9ea !important
204 } 204 }
205 205
206 .darkBlue-bgcolor { 206 .darkBlue-bgcolor {
207 background: #7852cc !important 207 background: #7852cc !important
208 } 208 }
209 209
210 .darkBlue-color { 210 .darkBlue-color {
211 color: #7852cc !important 211 color: #7852cc !important
212 } 212 }
213 213
214 .yellowDark-color { 214 .yellowDark-color {
215 color: #f9a825 !important; 215 color: #f9a825 !important;
216 } 216 }
217 217
218 .account-Card { 218 .account-Card {
219 border: 1px solid #71d9ea !important 219 border: 1px solid #71d9ea !important
220 } 220 }
221 221
222 .pink-color { 222 .pink-color {
223 color: #ff8a89 !important 223 color: #ff8a89 !important
224 } 224 }
225 225
226 .account-circle { 226 .account-circle {
227 font-size: 27px !important; 227 font-size: 27px !important;
228 font-weight: 900 !important 228 font-weight: 900 !important
229 } 229 }
230 230
231 .font-color { 231 .font-color {
232 color: #9ba0c0 !important 232 color: #9ba0c0 !important
233 } 233 }
234 234
235 .profileDasboard { 235 .profileDasboard {
236 background: #f6f9ff !important; 236 background: #f6f9ff !important;
237 border-top-left-radius: 78px; 237 border-top-left-radius: 78px;
238 } 238 }
239 239
240 a { 240 a {
241 text-decoration: none !important; 241 text-decoration: none !important;
242 } 242 }
243 243
244 .td { 244 .td {
245 background-color: #fefeff; 245 background-color: #fefeff;
246 padding: 5px; 246 padding: 5px;
247 color: #142453; 247 color: #142453;
248 } 248 }
249 249
250 .td-notice { 250 .td-notice {
251 border-bottom: inherit !important; 251 border-bottom: inherit !important;
252 } 252 }
253 253
254 .td-notice:nth-child(even) { 254 .td-notice:nth-child(even) {
255 color: rgb(120, 82, 204) !important; 255 color: rgb(120, 82, 204) !important;
256 } 256 }
257 257
258 .td-notice:nth-child(odd) { 258 .td-notice:nth-child(odd) {
259 color: #f9a825 !important; 259 color: #f9a825 !important;
260 } 260 }
261 261
262 .td-notice { 262 .td-notice {
263 border-bottom: inherit !important; 263 border-bottom: inherit !important;
264 } 264 }
265 265
266 .td-notice:nth-child(even) { 266 .td-notice:nth-child(even) {
267 color: rgb(120, 82, 204); 267 color: rgb(120, 82, 204);
268 } 268 }
269 269
270 .td-notice:nth-child(odd) { 270 .td-notice:nth-child(odd) {
271 color: #f9a825; 271 color: #f9a825;
272 } 272 }
273 273
274 .card { 274 .card {
275 border-radius: 6px !important; 275 border-radius: 6px !important;
276 } 276 }
277 277
278 .card:hover { 278 .card:hover {
279 -webkit-box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12) !important; 279 -webkit-box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12) !important;
280 box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12) !important; 280 box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12) !important;
281 } 281 }
282 282
283 .td-row { 283 .td-row {
284 border-right: hidden; 284 border-right: hidden;
285 } 285 }
286 286
287 table.v-table { 287 table.v-table {
288 border-radius: 2px; 288 border-radius: 2px;
289 border-collapse: separate !important; 289 border-collapse: separate !important;
290 border-spacing: 0 15px !important; 290 border-spacing: 0 15px !important;
291 width: 100%; 291 width: 100%;
292 max-width: 100%; 292 max-width: 100%;
293 } 293 }
294 294
295 .gfg { 295 .gfg {
296 border-collapse: separate; 296 border-collapse: separate;
297 border-spacing: 0 15px; 297 border-spacing: 0 15px;
298 } 298 }
299 299
300 .theme--light.v-table { 300 .theme--light.v-table {
301 background-color: transparent !important; 301 background-color: transparent !important;
302 color: rgba(0, 0, 0, 0.87); 302 color: rgba(0, 0, 0, 0.87);
303 } 303 }
304 304
305 .open-dialog-button { 305 .open-dialog-button {
306 background: #827bfa !important; 306 background: #827bfa !important;
307 border-color: #827bfa !important; 307 border-color: #827bfa !important;
308 text-transform: none !important; 308 text-transform: none !important;
309 } 309 }
310 310
311 .add-button { 311 .add-button {
312 background: #feb83c !important; 312 background: #feb83c !important;
313 border-color: #feb83c !important; 313 border-color: #feb83c !important;
314 text-transform: none !important; 314 text-transform: none !important;
315 -webkit-box-shadow: none !important; 315 -webkit-box-shadow: none !important;
316 box-shadow: none !important; 316 box-shadow: none !important;
317 } 317 }
318 318
319 table.v-table thead th { 319 table.v-table thead th {
320 font-size: 14px !important; 320 font-size: 14px !important;
321 } 321 }
322 322
323 .titleCard { 323 .titleCard {
324 font-size: 20px !important; 324 font-size: 20px !important;
325 font-weight: 500; 325 font-weight: 500;
326 line-height: 1 !important; 326 line-height: 1 !important;
327 letter-spacing: 0.02em !important; 327 letter-spacing: 0.02em !important;
328 font-family: 'Roboto', sans-serif !important; 328 font-family: 'Roboto', sans-serif !important;
329 } 329 }
330 330
331 331
332 /* .v-text-field input { 332 /* .v-text-field input {
333 text-align: center; 333 text-align: center;
334 } */ 334 } */
335 335
336 .card-style { 336 .card-style {
337 background: #7f62f8 !important; 337 background: #7f62f8 !important;
338 border-color: #7f62f8 !important; 338 border-color: #7f62f8 !important;
339 border-radius: 12px; 339 border-radius: 12px;
340 text-align: center !important; 340 text-align: center !important;
341 padding-top: 10px !important; 341 padding-top: 10px !important;
342 } 342 }
343 343
344 .title { 344 .title {
345 line-height: 2 !important; 345 line-height: 2 !important;
346 } 346 }
347 347
348 .v-dialog { 348 .v-dialog {
349 -webkit-box-shadow: none !important; 349 -webkit-box-shadow: none !important;
350 box-shadow: none !important; 350 box-shadow: none !important;
351 } 351 }
352 352
353 .tr { 353 .tr {
354 border-radius: 6px !important; 354 border-radius: 6px !important;
355 } 355 }
356 356
357 .tr:hover { 357 .tr:hover {
358 -webkit-box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12) !important; 358 -webkit-box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12) !important;
359 box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12) !important; 359 box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12) !important;
360 } 360 }
361 361
362 .__vev_calendar-wrapper .events-wrapper { 362 .__vev_calendar-wrapper .events-wrapper {
363 display: none; 363 display: none;
364 } 364 }
365 365
366 .__vev_calendar-wrapper .cal-wrapper { 366 .__vev_calendar-wrapper .cal-wrapper {
367 width: 100% !important; 367 width: 100% !important;
368 padding: 0 !important; 368 padding: 0 !important;
369 background: white; 369 background: white;
370 border-radius: 8px; 370 border-radius: 8px;
371 } 371 }
372 372
373 .body-color { 373 .body-color {
374 background: #f6f9ff 374 background: #f6f9ff
375 } 375 }
376 376
377 .clear-button { 377 .clear-button {
378 background: #fa7676 !important; 378 background: #fa7676 !important;
379 border-color: #fa7676 !important; 379 border-color: #fa7676 !important;
380 text-transform: none !important; 380 text-transform: none !important;
381 -webkit-box-shadow: none !important; 381 -webkit-box-shadow: none !important;
382 box-shadow: none !important; 382 box-shadow: none !important;
383 } 383 }
384 384
385 .card-styles { 385 .card-styles {
386 background: #7f62f8 !important; 386 background: #7f62f8 !important;
387 border-color: #7f62f8 !important; 387 border-color: #7f62f8 !important;
388 } 388 }
389 389
390 390
391 /* Side Scroll Bar */ 391 /* Side Scroll Bar */
392 392
393 ::-webkit-scrollbar { 393 ::-webkit-scrollbar {
394 width: 6px; 394 width: 6px;
395 height: 3px; 395 height: 3px;
396 } 396 }
397 397
398 398
399 /* Track */ 399 /* Track */
400 400
401 ::-webkit-scrollbar-track { 401 ::-webkit-scrollbar-track {
402 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 402 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
403 -webkit-border-radius: 10px; 403 -webkit-border-radius: 10px;
404 border-radius: 10px; 404 border-radius: 10px;
405 background-color: #f5f5f5; 405 background-color: #f5f5f5;
406 } 406 }
407 407
408 408
409 /* Handle */ 409 /* Handle */
410 410
411 ::-webkit-scrollbar-thumb { 411 ::-webkit-scrollbar-thumb {
412 -webkit-border-radius: 10px; 412 -webkit-border-radius: 10px;
413 border-radius: 10px; 413 border-radius: 10px;
414 background: rgba(255, 0, 0, 0.8); 414 background: rgba(255, 0, 0, 0.8);
415 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); 415 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
416 background-color: #f5f5f5; 416 background-color: #f5f5f5;
417 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))); 417 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)));
418 } 418 }
419 419
420 ::-webkit-scrollbar-thumb:window-inactive { 420 ::-webkit-scrollbar-thumb:window-inactive {
421 background: rgba(255, 0, 0, 0.4); 421 background: rgba(255, 0, 0, 0.4);
422 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))); 422 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)));
423 } 423 }
424 424
425 @media screen and (max-width: 769px) { 425 @media screen and (max-width: 769px) {
426 .top { 426 .top {
427 margin-top: 0 !important; 427 margin-top: 0 !important;
428 } 428 }
429 .userSearch .v-icon { 429 .userSearch .v-icon {
430 font-size: 20px !important; 430 font-size: 20px !important;
431 margin-left: 20px; 431 margin-left: 20px;
432 } 432 }
433 } 433 }
434 434
435 @media screen and (max-width: 380px) { 435 @media screen and (max-width: 380px) {
436 .pl-3 { 436 .pl-3 {
437 padding-left: 0px !important; 437 padding-left: 0px !important;
438 } 438 }
439 .right { 439 .right {
440 float: none !important; 440 float: none !important;
441 } 441 }
442 .subheading { 442 .subheading {
443 font-size: 14px !important; 443 font-size: 14px !important;
444 } 444 }
445 .v-card__actions .v-btn { 445 .v-card__actions .v-btn {
446 margin: 0 0px; 446 margin: 0 0px;
447 min-width: 100px; 447 min-width: 100px;
448 } 448 }
449 .subheading { 449 .subheading {
450 font-size: 12px !important; 450 font-size: 12px !important;
451 } 451 }
452 h5 { 452 h5 {
453 font-size: 13px; 453 font-size: 13px;
454 } 454 }
455 } 455 }
456 456
457 .v-icon { 457 .v-icon {
458 font-size: 30px; 458 font-size: 30px;
459 } 459 }
460 460
461 @media screen and (min-width: 1270px) { 461 @media screen and (min-width: 1270px) {
462 .hide { 462 .hide {
463 display: none; 463 display: none;
464 } 464 }
465 } 465 }
466 466
467 @media screen and (max-width: 420px) { 467 @media screen and (max-width: 420px) {
468 .userSearch .v-text-field .v-label { 468 .userSearch .v-text-field .v-label {
469 line-height: 24px !important; 469 line-height: 24px !important;
470 } 470 }
471 .userSearch .v-label { 471 .userSearch .v-label {
472 font-size: 13px !important; 472 font-size: 13px !important;
473 } 473 }
474 .v-list__tile { 474 .v-list__tile {
475 font-size: 14px !important; 475 font-size: 14px !important;
476 padding: 0 10px !important; 476 padding: 0 10px !important;
477 } 477 }
478 .name { 478 .name {
479 font-size: 15px !important; 479 font-size: 15px !important;
480 } 480 }
481 .mr5 { 481 .mr5 {
482 margin-right: 14px !important; 482 margin-right: 14px !important;
483 } 483 }
484 .addressForm { 484 .addressForm {
485 max-width: 0; 485 max-width: 0;
486 } 486 }
487 .tableRsponsive { 487 .tableRsponsive {
488 display: block; 488 display: block;
489 position: relative; 489 position: relative;
490 overflow: scroll; 490 overflow: scroll;
491 } 491 }
492 } 492 }
493 493
494 @media screen and (max-width: 600px) { 494 @media screen and (max-width: 600px) {
495 img { 495 img {
496 /* position: absolute; */ 496 /* position: absolute; */
497 top: 13px; 497 top: 13px;
498 left: 10px; 498 left: 10px;
499 height: 28px; 499 height: 28px;
500 width: 28px; 500 width: 28px;
501 margin-top: 5px; 501 margin-top: 5px;
502 } 502 }
503 .iconOfDashboard { 503 .iconOfDashboard {
504 top: 0px !important; 504 top: 0px !important;
505 left: 0px !important; 505 left: 0px !important;
506 height: 80px !important; 506 height: 80px !important;
507 width: 80px !important; 507 width: 80px !important;
508 margin-top: 0px !important; 508 margin-top: 0px !important;
509 } 509 }
510 .v-list__tile__title { 510 .v-list__tile__title {
511 padding-left: 12px !important; 511 padding-left: 12px !important;
512 } 512 }
513 } 513 }
514 514
515 .img { 515 .img {
516 height: 200px; 516 height: 200px;
517 width: auto; 517 width: auto;
518 } 518 }
519 519
520 .imgNews { 520 .imgNews {
521 height: auto; 521 height: auto;
522 width: 100px !important; 522 width: 100px !important;
523 } 523 }
524 524
525 .text-center { 525 .text-center {
526 text-align: center !important; 526 text-align: center !important;
527 } 527 }