viithiisys / School-Management-dashboard

Download as
Browse Code »

Commit 2b0e316eeb2a5332682d83dc8dc209c9e34b20a8

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

upload mytiple images and others changes

Showing 13 changed files with 177 additions and 117 deletions   Show diff stats
1 # Vue Material Admin 1 # SchoolManagement
2 2
3 3
4 4
5 ### 5 ###
6 ### Project Structure 6 ### Project Structure
7 ```bash 7 ```bash
8 ├── build 8 ├── build
9 ├── config (Webpack) 9 ├── config (Webpack)
10 ├── src 10 ├── src
11 │ ├── api 11 │ ├── api
12 │ ├── components 12 │ ├── components
13 │ ├── mixins 13 │ ├── mixins
14 │ ├── pages (or views) 14 │ ├── pages (or views)
15 │ ├── router 15 │ ├── router
16 │ ├── util 16 │ ├── util
17 │ ├── theme 17 │ ├── theme
18 │ │ ├── default.styl 18 │ │ ├── default.styl
19 │ └── App.vue 19 │ └── App.vue
20 │ └── event.js 20 │ └── event.js
21 │ └── main.js 21 │ └── main.js
22 ├── dist 22 ├── dist
23 ├── release 23 ├── release
24 ├── static (or asset) 24 ├── static (or asset)
25 ├── mock (or script to build mock data) 25 ├── mock (or script to build mock data)
26 ├── node_modules 26 ├── node_modules
27 ├── test 27 ├── test
28 ├── README.md 28 ├── README.md
29 ├── package.json 29 ├── package.json
30 ├── index.html 30 ├── index.html
31 └── .gitignore 31 └── .gitignore
32 32
33 ### Build Setup 33 ### Build Setup
34 34
35 ``` bash 35 ``` bash
36 # install dependencies 36 # install dependencies
37 npm install 37 npm install
38 38
39 # serve with hot reload at localhost:8080 39 # serve with hot reload at localhost:8080
40 npm run dev 40 npm run dev
41 41
42 # build for production with minification 42 # build for production with minification
43 npm run build 43 npm run build
44 44
45 # build for production and view the bundle analyzer report 45 # build for production and view the bundle analyzer report
46 npm run build --report 46 npm run build --report
47 47
48 # run unit tests 48 # run unit tests
49 npm run unit 49 npm run unit
50 50
51 # run e2e tests 51 # run e2e tests
52 npm run e2e 52 npm run e2e
53 53
54 # run all tests 54 # run all tests
55 npm test 55 npm test
56 ``` 56 ```
57 57
58 For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). 58 For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
59 59
60 ### Reference 60 ### Reference
61 61
62 * [Vuetifyjs](https://vuetifyjs.com/) 62 * [Vuetifyjs](https://vuetifyjs.com/)
63 * [Vue](https://vuejs.org/index.html/) 63 * [Vue](https://vuejs.org/index.html/)
64 * [ECharts](http://echarts.baidu.com/option.html) 64 * [ECharts](http://echarts.baidu.com/option.html)
65 * [Stylus](http://stylus-lang.com/) 65 * [Stylus](http://stylus-lang.com/)
66 66
67 ### Donate 67 ### Donate
68 If you find this project useful, you can buy author a glass of juice :tropical_drink: 68 If you find this project useful, you can buy author a glass of juice :tropical_drink:
69 69
70 70
71 [Paypal Me](https://www.paypal.me/tookit) 71 [Paypal Me](https://www.paypal.me/tookit)
72 72
73 [Buy me a coffee](https://www.buymeacoffee.com/tookit) 73 [Buy me a coffee](https://www.buymeacoffee.com/tookit)
74 74
75 <a href="https://www.buymeacoffee.com/tookit" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: auto !important;width: auto !important;" ></a> 75 <a href="https://www.buymeacoffee.com/tookit" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: auto !important;width: auto !important;" ></a>
76 76
77 ## License 77 ## License
78 78
79 [MIT](https://github.com/tookit/vue-material-admin/blob/master/LICENSE) 79 [MIT](https://github.com/tookit/vue-material-admin/blob/master/LICENSE)
src/Services/http.js
Diff comments   View file @2b0e316
1 import axios from 'axios' 1 import axios from 'axios'
2 import store from '@/store/store' 2 import store from '@/store/store'
3 3
4 export default () => { 4 export default () => {
5 return axios.create({ 5 return axios.create({
6 baseURL:'http://192.168.4.220:3002/v1', 6 // baseURL:'http://d246be2d.ngrok.io/v1',
7 baseURL:'http://192.168.4.220:3002/v1',
7 // baseURL:'http://139.59.58.160:8001/v1', 8 // baseURL:'http://139.59.58.160:8001/v1',
8 headers: { 9 headers: {
9 Authorization: `Bearer ${store.state.token}` 10 Authorization: `Bearer ${store.state.token}`
11 // Authorization:"Basic YWRtaW46b2ZiaXo="
10 } 12 }
11 }) 13 })
12 } 14 }
13 15
1 const Menu = [ 1 const Menu = [
2 // { header: 'Apps' }, 2 // { header: 'Apps' },
3 { 3 // {
4 // title: 'Dashboard',
5 // // group: 'apps',
6 // name: 'dashboard',
7 // icon: 'view_module',
8 // },
9 {
4 title: 'Class', 10 title: 'Class',
5 // group: 'apps', 11 // group: 'apps',
6 name: 'addclass', 12 name: 'addclass',
7 icon: 'local_library', 13 icon: 'local_library',
8 }, 14 },
9 { 15 {
10 title: 'Section', 16 title: 'Section',
11 // group: 'apps', 17 // group: 'apps',
12 name: 'section', 18 name: 'section',
13 icon: 'view_module', 19 icon: 'view_module',
14 }, 20 },
15 { 21 {
16 title: 'Teachers', 22 title: 'Teachers',
17 // group: '', 23 // group: '',
18 name: 'teachers', 24 name: 'teachers',
19 icon: 'group', 25 icon: 'group',
20 }, 26 },
21 { 27 {
22 title: 'Students', 28 title: 'Students',
23 // group: 'apps', 29 // group: 'apps',
24 name: 'Students', 30 name: 'Students',
25 icon: 'school', 31 icon: 'school',
26 }, 32 },
27 { 33 // {
28 title: 'Event', 34 // title: 'Event',
29 name: 'event', 35 // name: 'event',
30 icon: 'event_available', 36 // icon: 'event_available',
31 }, 37 // },
32 { 38 {
33 title: 'News', 39 title: 'News',
34 name: 'news', 40 name: 'news',
35 icon: 'notification_important', 41 icon: 'notification_important',
36 }, 42 },
37 { 43 // {
38 title: 'Reminder', 44 // title: 'Reminder',
39 name: 'reminder', 45 // name: 'reminder',
40 icon: 'alarm_add', 46 // icon: 'alarm_add',
41 }, 47 // },
42 { 48 {
43 title: 'Time Table', 49 title: 'Time Table',
44 name: 'timeTable', 50 name: 'timeTable',
45 icon: 'event_note', 51 icon: 'event_note',
46 }, 52 },
47 { 53 {
48 title: 'Notification', 54 title: 'Notification',
49 name: 'notification', 55 name: 'notification',
50 icon: 'notifications_active', 56 icon: 'notifications_active',
51 }, 57 },
52 ]; 58 ];
53 59
54 60
55 // reorder menu 61 // reorder menu
56 Menu.forEach((item) => { 62 Menu.forEach((item) => {
57 if (item.items) { 63 if (item.items) {
58 item.items.sort((x, y) => { 64 item.items.sort((x, y) => {
59 let textA = x.title.toUpperCase(); 65 let textA = x.title.toUpperCase();
60 let textB = y.title.toUpperCase(); 66 let textB = y.title.toUpperCase();
61 return (textA < textB) ? -1 : (textA > textB) ? 1 : 0; 67 return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
62 }); 68 });
63 } 69 }
64 }); 70 });
65 71
66 export default Menu; 72 export default Menu;
67 73
src/components/pageHeader/AppDrawer.vue
Diff comments   View file @2b0e316
1 <template> 1 <template>
2 <v-navigation-drawer 2 <v-navigation-drawer
3 id="appDrawer" 3 id="appDrawer"
4 :mini-variant.sync="mini" 4 :mini-variant.sync="mini"
5 fixed 5 fixed
6 :dark="$vuetify.dark" 6 :dark="$vuetify.dark"
7 app 7 app
8 v-model="drawer" 8 v-model="drawer"
9 width="260" 9 width="260"
10 > 10 >
11 <v-toolbar style="background:#39b982" > 11 <v-toolbar style="background:#39b982" >
12 <img v-bind:src="computeLogo" height="30" class="imgLogo" alt="ana"> 12 <img v-bind:src="computeLogo" height="30" class="imgLogo" alt="ana">
13 <h5 class="white--text my-3 ml-2">School-Managament</h5> 13 <h5 class="white--text my-3 ml-2">Technology Succes</h5>
14 <v-toolbar-title class="ml-0 pl-3" > 14 <v-toolbar-title class="ml-0 pl-3" >
15 </v-toolbar-title> 15 </v-toolbar-title>
16 </v-toolbar> 16 </v-toolbar>
17 <vue-perfect-scrollbar class="drawer-menu--scroll" :settings="scrollSettings"> 17 <vue-perfect-scrollbar class="drawer-menu--scroll" :settings="scrollSettings">
18 <v-list dense expand> 18 <v-list dense expand>
19 <template v-for="(item, i) in menus"> 19 <template v-for="(item, i) in menus">
20 <!--group with subitems--> 20 <!--group with subitems-->
21 <v-list-group v-if="item.items" :key="item.name" :group="item.group" :prepend-icon="item.icon" no-action="no-action"> 21 <v-list-group v-if="item.items" :key="item.name" :group="item.group" :prepend-icon="item.icon" no-action="no-action">
22 <v-list-tile slot="activator" ripple="ripple"> 22 <v-list-tile slot="activator" ripple="ripple">
23 <v-list-tile-content> 23 <v-list-tile-content>
24 <v-list-tile-title>{{ item.title }}</v-list-tile-title> 24 <v-list-tile-title>{{ item.title }}</v-list-tile-title>
25 </v-list-tile-content> 25 </v-list-tile-content>
26 </v-list-tile> 26 </v-list-tile>
27 <template v-for="(subItem, i) in item.items"> 27 <template v-for="(subItem, i) in item.items">
28 <!--sub group--> 28 <!--sub group-->
29 <v-list-group v-if="subItem.items" :key="subItem.name" :group="subItem.group" sub-group="sub-group"> 29 <v-list-group v-if="subItem.items" :key="subItem.name" :group="subItem.group" sub-group="sub-group">
30 <v-list-tile slot="activator" ripple="ripple"> 30 <v-list-tile slot="activator" ripple="ripple">
31 <v-list-tile-content> 31 <v-list-tile-content>
32 <v-list-tile-title>{{ subItem.title }}</v-list-tile-title> 32 <v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
33 </v-list-tile-content> 33 </v-list-tile-content>
34 </v-list-tile> 34 </v-list-tile>
35 <v-list-tile v-for="(grand, i) in subItem.children" :key="i" :to="genChildTarget(item, grand)" :href="grand.href" ripple="ripple"> 35 <v-list-tile v-for="(grand, i) in subItem.children" :key="i" :to="genChildTarget(item, grand)" :href="grand.href" ripple="ripple">
36 <v-list-tile-content> 36 <v-list-tile-content>
37 <v-list-tile-title>{{ grand.title }}</v-list-tile-title> 37 <v-list-tile-title>{{ grand.title }}</v-list-tile-title>
38 </v-list-tile-content> 38 </v-list-tile-content>
39 </v-list-tile> 39 </v-list-tile>
40 </v-list-group> 40 </v-list-group>
41 <!--child item--> 41 <!--child item-->
42 <v-list-tile v-else :key="i" :to="genChildTarget(item, subItem)" :href="subItem.href" :disabled="subItem.disabled" :target="subItem.target" ripple="ripple"> 42 <v-list-tile v-else :key="i" :to="genChildTarget(item, subItem)" :href="subItem.href" :disabled="subItem.disabled" :target="subItem.target" ripple="ripple">
43 <v-list-tile-content> 43 <v-list-tile-content>
44 <v-list-tile-title><span>{{ subItem.title }}</span></v-list-tile-title> 44 <v-list-tile-title><span>{{ subItem.title }}</span></v-list-tile-title>
45 </v-list-tile-content> 45 </v-list-tile-content>
46 <!-- <v-circle class="white--text pa-0 circle-pill" v-if="subItem.badge" color="red" disabled="disabled">{{ subItem.badge }}</v-circle> --> 46 <!-- <v-circle class="white--text pa-0 circle-pill" v-if="subItem.badge" color="red" disabled="disabled">{{ subItem.badge }}</v-circle> -->
47 <v-list-tile-action v-if="subItem.action"> 47 <v-list-tile-action v-if="subItem.action">
48 <v-icon :class="[subItem.actionClass || 'success--text']">{{ subItem.action }}</v-icon> 48 <v-icon :class="[subItem.actionClass || 'success--text']">{{ subItem.action }}</v-icon>
49 </v-list-tile-action> 49 </v-list-tile-action>
50 </v-list-tile> 50 </v-list-tile>
51 </template> 51 </template>
52 </v-list-group> 52 </v-list-group>
53 <v-subheader v-else-if="item.header" :key="i">{{ item.header }}</v-subheader> 53 <v-subheader v-else-if="item.header" :key="i">{{ item.header }}</v-subheader>
54 <v-divider v-else-if="item.divider" :key="i"></v-divider> 54 <v-divider v-else-if="item.divider" :key="i"></v-divider>
55 <!--top-level link--> 55 <!--top-level link-->
56 <v-list-tile v-else :to="!item.href ? { name: item.name } : null" :href="item.href" ripple="ripple" :disabled="item.disabled" :target="item.target" rel="noopener" :key="item.name"> 56 <v-list-tile v-else :to="!item.href ? { name: item.name } : null" :href="item.href" ripple="ripple" :disabled="item.disabled" :target="item.target" rel="noopener" :key="item.name">
57 <v-list-tile-action v-if="item.icon"> 57 <v-list-tile-action v-if="item.icon">
58 <v-icon>{{ item.icon }}</v-icon> 58 <v-icon>{{ item.icon }}</v-icon>
59 </v-list-tile-action> 59 </v-list-tile-action>
60 <v-list-tile-content> 60 <v-list-tile-content>
61 <v-list-tile-title>{{ item.title }}</v-list-tile-title> 61 <v-list-tile-title>{{ item.title }}</v-list-tile-title>
62 </v-list-tile-content> 62 </v-list-tile-content>
63 <!-- <v-circle class="white--text pa-0 chip--x-small" v-if="item.badge" :color="item.color || 'primary'" disabled="disabled">{{ item.badge }}</v-circle> --> 63 <!-- <v-circle class="white--text pa-0 chip--x-small" v-if="item.badge" :color="item.color || 'primary'" disabled="disabled">{{ item.badge }}</v-circle> -->
64 <v-list-tile-action v-if="item.subAction"> 64 <v-list-tile-action v-if="item.subAction">
65 <v-icon class="success--text">{{ item.subAction }}</v-icon> 65 <v-icon class="success--text">{{ item.subAction }}</v-icon>
66 </v-list-tile-action> 66 </v-list-tile-action>
67 <!-- <v-circle class="caption blue lighten-2 white--text mx-0" v-else-if="item.chip" label="label" small="small">{{ item.chip }}</v-circle> --> 67 <!-- <v-circle class="caption blue lighten-2 white--text mx-0" v-else-if="item.chip" label="label" small="small">{{ item.chip }}</v-circle> -->
68 </v-list-tile> 68 </v-list-tile>
69 </template> 69 </template>
70 </v-list> 70 </v-list>
71 </vue-perfect-scrollbar> 71 </vue-perfect-scrollbar>
72 </v-navigation-drawer> 72 </v-navigation-drawer>
73 </template> 73 </template>
74 <script> 74 <script>
75 import menu from '@/api/menu'; 75 import menu from '@/api/menu';
76 import VuePerfectScrollbar from 'vue-perfect-scrollbar'; 76 import VuePerfectScrollbar from 'vue-perfect-scrollbar';
77 export default { 77 export default {
78 name: 'app-drawer', 78 name: 'app-drawer',
79 components: { 79 components: {
80 VuePerfectScrollbar, 80 VuePerfectScrollbar,
81 }, 81 },
82 props: { 82 props: {
83 expanded: { 83 expanded: {
84 type: Boolean, 84 type: Boolean,
85 default: true 85 default: true
86 }, 86 },
87 }, 87 },
88 data: () => ({ 88 data: () => ({
89 mini: false, 89 mini: false,
90 drawer: true, 90 drawer: true,
91 menus: menu, 91 menus: menu,
92 scrollSettings: { 92 scrollSettings: {
93 maxScrollbarLength: 160 93 maxScrollbarLength: 160
94 } 94 }
95 }), 95 }),
96 computed: { 96 computed: {
97 computeGroupActive () { 97 computeGroupActive () {
98 return true; 98 return true;
99 }, 99 },
100 computeLogo () { 100 computeLogo () {
101 return '/static/icon.jpeg'; 101 return '/static/icon.jpeg';
102 }, 102 },
103 103
104 sideToolbarColor () { 104 sideToolbarColor () {
105 return this.$vuetify.options.extra.sideNav; 105 return this.$vuetify.options.extra.sideNav;
106 } 106 }
107 }, 107 },
108 created () { 108 created () {
109 window.getApp.$on('APP_DRAWER_TOGGLED', () => { 109 window.getApp.$on('APP_DRAWER_TOGGLED', () => {
110 this.drawer = (!this.drawer); 110 this.drawer = (!this.drawer);
111 }); 111 });
112 }, 112 },
113 113
114 114
115 methods: { 115 methods: {
116 genChildTarget (item, subItem) { 116 genChildTarget (item, subItem) {
117 if (subItem.href) return; 117 if (subItem.href) return;
118 if (subItem.component) { 118 if (subItem.component) {
119 return { 119 return {
120 name: subItem.component, 120 name: subItem.component,
121 }; 121 };
122 } 122 }
123 return { name: `${item.group}/${(subItem.name)}` }; 123 return { name: `${item.group}/${(subItem.name)}` };
124 }, 124 },
125 } 125 }
126 }; 126 };
127 </script> 127 </script>
128 128
129 129
130 <style lang="stylus"> 130 <style lang="stylus">
131 // @import '../../node_modules/vuetify/src/stylus/settings/_elevations.styl'; 131 // @import '../../node_modules/vuetify/src/stylus/settings/_elevations.styl';
132 132
133 #appDrawer 133 #appDrawer
134 overflow: hidden 134 overflow: hidden
135 .drawer-menu--scroll 135 .drawer-menu--scroll
136 height: calc(100vh - 48px) 136 height: calc(100vh - 48px)
137 overflow: auto 137 overflow: auto
138 .v-list--dense .v-list__tile:not(.v-list__tile--avatar) { 138 .v-list--dense .v-list__tile:not(.v-list__tile--avatar) {
139 height: 60px; 139 height: 60px;
140 font-size:17px; 140 font-size:17px;
141 } 141 }
142 .v-list__tile__action { 142 .v-list__tile__action {
143 min-width:36px; 143 min-width:36px;
144 } 144 }
145 .v-list__tile.primary--text { 145 .v-list__tile.primary--text {
146 color:black !important; 146 color:black !important;
147 border-left: 4px solid black; 147 border-left: 4px solid black;
148 border-radius: 4px; 148 border-radius: 4px;
149 } 149 }
150 @media screen and (max-width: 420px) { 150 @media screen and (max-width: 420px) {
151 .v-list--dense .v-list__tile:not(.v-list__tile--avatar) { 151 .v-list--dense .v-list__tile:not(.v-list__tile--avatar) {
152 font-size: 14px; 152 font-size: 14px;
153 } 153 }
154 .imgLogo{ 154 .imgLogo{
155 height: 22px; 155 height: 22px;
156 width: 20px;; 156 width: 20px;;
157 } 157 }
158 } 158 }
159 </style> 159 </style>
160 160
161 161
162 <style scoped> 162 <style scoped>
163 .theme--light .v-icon, .application .theme--light.v-icon { 163 .theme--light .v-icon, .application .theme--light.v-icon {
164 color: #39b982; 164 color: #39b982;
165 } 165 }
166 166
167 </style> 167 </style>
168 168
169 169
src/pages/Authentication/Login.vue
Diff comments   View file @2b0e316
1 <template> 1 <template>
2 <v-app id="login"> 2 <v-app id="login">
3 <v-toolbar class="fixcolor"> 3 <v-toolbar class="fixcolor">
4 <v-toolbar-items> 4 <v-toolbar-items>
5 <img src="/static/icon.jpeg" height="36" alt="logo"> 5 <img src="/static/icon.jpeg" height="36" alt="logo">
6 <h3 class="white--text my-3 ml-5 logoSchool">School-Management</h3> 6 <h3 class="white--text my-3 ml-5 logoSchool">School-Maagement</h3>
7 </v-toolbar-items> 7 </v-toolbar-items>
8 </v-toolbar> 8 </v-toolbar>
9 <v-content> 9 <v-content>
10 <v-container fluid fill-height> 10 <v-container fluid fill-height>
11 <v-snackbar 11 <v-snackbar
12 :timeout="timeout" 12 :timeout="timeout"
13 :top="y === 'top'" 13 :top="y === 'top'"
14 :right="x === 'right'" 14 :right="x === 'right'"
15 :vertical="mode === 'vertical'" 15 :vertical="mode === 'vertical'"
16 v-model="snackbar" 16 v-model="snackbar"
17 :color="color" 17 :color="color"
18 >{{ text }}</v-snackbar> 18 >{{ text }}</v-snackbar>
19 <v-layout align-center justify-center> 19 <v-layout align-center justify-center>
20 <v-flex xs12 sm10 md6 lg4> 20 <v-flex xs12 sm10 md6 lg4>
21 <v-toolbar class="fixcolor" dark> 21 <v-toolbar class="fixcolor" dark>
22 <v-spacer></v-spacer> 22 <v-spacer></v-spacer>
23 <v-toolbar-title>School Login</v-toolbar-title> 23 <v-toolbar-title>School Login</v-toolbar-title>
24 <v-spacer></v-spacer> 24 <v-spacer></v-spacer>
25 </v-toolbar> 25 </v-toolbar>
26 26
27 <v-card class="elevation-1 pa-1"> 27 <v-card class="elevation-1 pa-1">
28 <v-card-text> 28 <v-card-text>
29 <v-flex xs12 sm12 md12 lg12> 29 <v-flex xs12 sm12 md12 lg12>
30 <v-form ref="form" v-model="valid" lazy-validation> 30 <v-form ref="form" v-model="valid" lazy-validation>
31 <v-text-field 31 <v-text-field
32 v-model="userLogincredentials.email" 32 v-model="userLogincredentials.email"
33 :rules="nameRules" 33 :rules="nameRules"
34 label="Username" 34 label="Username"
35 required 35 required
36 ></v-text-field> 36 ></v-text-field>
37 <v-text-field 37 <v-text-field
38 :rules="[rules.required]" 38 :rules="[rules.required]"
39 v-model="userLogincredentials.password" 39 v-model="userLogincredentials.password"
40 :append-icon="e1 ? 'visibility_off' : 'visibility'" 40 :append-icon="e1 ? 'visibility_off' : 'visibility'"
41 :append-icon-cb="() => (e1 = !e1)" 41 :append-icon-cb="() => (e1 = !e1)"
42 :type="e1 ? 'password' : 'text'" 42 :type="e1 ? 'password' : 'text'"
43 name="input-10-1" 43 name="input-10-1"
44 label="Password" 44 label="Password"
45 counter 45 counter
46 ></v-text-field> 46 ></v-text-field>
47 </v-form> 47 </v-form>
48 <v-layout row wrap> 48 <v-layout row wrap>
49 <v-flex xs6> 49 <v-flex xs6>
50 <!-- <v-checkbox :label="`Remember me`" v-model="remember"></v-checkbox> --> 50 <!-- <v-checkbox :label="`Remember me`" v-model="remember"></v-checkbox> -->
51 </v-flex> 51 </v-flex>
52 <v-flex xs6> 52 <v-flex xs6>
53 <h5 class="right mt-4"> <router-link class="link" to="/forgetpassword" style="border-bottom: 2px solid #aaa;">Forgot Password</router-link></h5> 53 <h5 class="right mt-4"> <router-link class="link" to="/forgetpassword" style="border-bottom: 2px solid #aaa;">Forgot Password</router-link></h5>
54 </v-flex> 54 </v-flex>
55 </v-layout> 55 </v-layout>
56 </v-flex> 56 </v-flex>
57 </v-card-text> 57 </v-card-text>
58 <v-layout> 58 <v-layout>
59 <v-flex sm12 class="my-3"> 59 <v-flex sm12 class="my-3">
60 <v-btn style="margin: auto;display: block;b" class="fixcolor" round dark large @click="login" :loading="loading">Login</v-btn> 60 <v-btn style="margin: auto;display: block;b" class="fixcolor" round dark large @click="login" :loading="loading">Login</v-btn>
61 </v-flex> 61 </v-flex>
62 </v-layout> 62 </v-layout>
63 <v-layout> 63 <v-layout>
64 </v-layout> 64 </v-layout>
65 </v-card> 65 </v-card>
66 </v-flex> 66 </v-flex>
67 </v-layout> 67 </v-layout>
68 </v-container> 68 </v-container>
69 </v-content> 69 </v-content>
70 <v-footer class="pa-4" style="background:linear-gradient(90deg,#f58753 30%,#f15e5f 110%)"></v-footer> 70 <v-footer class="pa-4" style="background:linear-gradient(90deg,#f58753 30%,#f15e5f 110%)"></v-footer>
71 </v-app> 71 </v-app>
72 </template> 72 </template>
73 73
74 <script> 74 <script>
75 import http from "@/Services/http.js"; 75 import http from "@/Services/http.js";
76 export default { 76 export default {
77 data() { 77 data() {
78 return { 78 return {
79 snackbar: false, 79 snackbar: false,
80 y: "top", 80 y: "top",
81 x: "right", 81 x: "right",
82 mode: "", 82 mode: "",
83 timeout: 3000, 83 timeout: 3000,
84 text: "", 84 text: "",
85 e1: true, 85 e1: true,
86 loading: false, 86 loading: false,
87 remember: false, 87 remember: false,
88 valid: false, 88 valid: false,
89 userLogincredentials: {}, 89 userLogincredentials: {},
90 nameRules: [ 90 nameRules: [
91 v => !!v || "Username is required" 91 v => !!v || "Username is required"
92 92
93 ], 93 ],
94 password: "", 94 password: "",
95 email:"", 95 email:"",
96 rules: { 96 rules: {
97 required: value => !!value || "password is Required.", 97 required: value => !!value || "password is Required.",
98 // min: v => 98 // min: v =>
99 // (/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/.test( 99 // (/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/.test(
100 // v 100 // v
101 // ) && 101 // ) &&
102 // v.length >= 6) || 102 // v.length >= 6) ||
103 // "Min 4 characters upper case lower case symbol required" 103 // "Min 4 characters upper case lower case symbol required"
104 } 104 }
105 }; 105 };
106 }, 106 },
107 methods: { 107 methods: {
108 login() { 108 login() {
109 this.loading = true; 109 this.loading = true;
110 var userdata = { 110 var userdata = {
111 email: this.userLogincredentials.email, 111 email: this.userLogincredentials.email,
112 password: this.userLogincredentials.password, 112 password: this.userLogincredentials.password,
113 role:"ADMIN" 113 role:"ADMIN"
114 114
115 }; 115 };
116 http() 116 http()
117 .post("/schoolLogin", userdata) 117 .post("/schoolLogin", userdata)
118 .then(response => { 118 .then(response => {
119 this.$store.dispatch("setToken", response.data.data.token); 119 this.$store.dispatch("setToken", response.data.data.token);
120 this.$store.dispatch("Id", response.data.data.id); 120 this.$store.dispatch("Id", response.data.data.id);
121 this.loading = false; 121 this.loading = false;
122 this.$router.push("/teachers"); 122 this.$router.push("/teachers");
123 }) 123 })
124 .catch(error => { 124 .catch(error => {
125 this.text = error.response.data.message 125 this.text = error.response.data.message
126 this.snackbar = true; 126 this.snackbar = true;
127 this.loading = false; 127 this.loading = false;
128 }); 128 });
129 this.$router.push("/teachers");
129 } 130 }
130 }, 131 },
131 computed: { 132 computed: {
132 color() { 133 color() {
133 return this.loading ? "success" : "error"; 134 return this.loading ? "success" : "error";
134 } 135 }
135 } 136 }
136 }; 137 };
137 </script> 138 </script>
138 139
139 <style scoped lang="css"> 140 <style scoped lang="css">
140 #login { 141 #login {
141 width: 100%; 142 width: 100%;
142 position: absolute; 143 position: absolute;
143 top: 0; 144 top: 0;
144 left: 0; 145 left: 0;
145 content: ""; 146 content: "";
146 z-index: 0; 147 z-index: 0;
147 } 148 }
148 </style> 149 </style>
149 <style scoped> 150 <style scoped>
150 img { 151 img {
151 position: absolute; 152 position: absolute;
152 top: 13px; 153 top: 13px;
153 left: 8px; 154 left: 8px;
154 } 155 }
155 .v-btn--large { 156 .v-btn--large {
156 padding: 0px 84px; 157 padding: 0px 84px;
157 } 158 }
158 .link{ 159 .link{
159 text-decoration:none; 160 text-decoration:none;
160 } 161 }
161 a { 162 a {
162 color: #696969; 163 color: #696969;
163 } 164 }
164 .forget{ 165 .forget{
165 margin-top:20px; 166 margin-top:20px;
166 } 167 }
167 .mt-4 { 168 .mt-4 {
168 margin-top: 21px !important; 169 margin-top: 21px !important;
169 } 170 }
170 @media screen and (max-width: 600px) { 171 @media screen and (max-width: 600px) {
171 .forget{ 172 .forget{
172 margin-top:none; 173 margin-top:none;
173 margin-left:18px; 174 margin-left:18px;
174 } 175 }
175 img{ 176 img{
176 top: 21px; 177 top: 21px;
177 left: 10px; 178 left: 10px;
178 height: 24px; 179 height: 24px;
179 width: 33px; 180 width: 33px;
180 } 181 }
181 .logoSchool{ 182 .logoSchool{
182 font-size: 18px; 183 font-size: 18px;
183 margin-top: 20px !important; 184 margin-top: 20px !important;
184 } 185 }
185 h5 { 186 h5 {
186 font-size: 14px !important; 187 font-size: 14px !important;
187 } 188 }
188 } 189 }
189 </style> 190 </style>
src/pages/Authentication/changepassword.vue
Diff comments   View file @2b0e316
1 <template> 1 <template>
2 <v-app id="login"> 2 <v-app id="login">
3 <app-toolbar class="app--toolbar"></app-toolbar> 3 <app-toolbar class="app--toolbar"></app-toolbar>
4 <v-container fluid fill-height> 4 <v-container fluid fill-height>
5 <v-layout> 5 <v-layout>
6 <v-flex xs12 sm8 md8 lg5 offset-sm2 offset-lg3 class="mt-5"> 6 <v-flex xs12 sm8 md8 lg5 offset-sm2 offset-lg3 class="mt-5">
7 <v-toolbar class="fixcolors mt-5" dark> 7 <v-toolbar class="fixcolors mt-5" dark>
8 <v-spacer></v-spacer> 8 <v-spacer></v-spacer>
9 <v-toolbar-title>Change Password</v-toolbar-title> 9 <v-toolbar-title>Technology Succes</v-toolbar-title>
10 <v-spacer></v-spacer> 10 <v-spacer></v-spacer>
11 11
12 </v-toolbar> 12 </v-toolbar>
13 <v-card class="elevation-1 pa-3" id="form"> 13 <v-card class="elevation-1 pa-3" id="form">
14 <v-card-text> 14 <v-card-text>
15 <v-flex xs12 sm8 md8 lg8 offset-sm2> 15 <v-flex xs12 sm8 md8 lg8 offset-sm2>
16 <v-form class="mt-3" > 16 <v-form class="mt-3" >
17 <v-text-field 17 <v-text-field
18 :rules="[rules.required]" 18 :rules="[rules.required]"
19 v-model="adminChangePasswordcredentials.oldPassword" 19 v-model="adminChangePasswordcredentials.oldPassword"
20 label="Old Password"> 20 label="Old Password">
21 </v-text-field> 21 </v-text-field>
22 <v-text-field 22 <v-text-field
23 v-model="adminChangePasswordcredentials.newPassword" 23 v-model="adminChangePasswordcredentials.newPassword"
24 :rules="[rules.required]" 24 :rules="[rules.required]"
25 25
26 label="New Password" 26 label="New Password"
27 ></v-text-field> 27 ></v-text-field>
28 </v-form></v-flex> 28 </v-form></v-flex>
29 </v-card-text> 29 </v-card-text>
30 <v-card-actions> 30 <v-card-actions>
31 31
32 <v-flex text-xs-center> 32 <v-flex text-xs-center>
33 <v-btn class="mt-3" 33 <v-btn class="mt-3"
34 round 34 round
35 color="black" 35 color="black"
36 dark large 36 dark large
37 :loading="loading" 37 :loading="loading"
38 @click="reset">Reset Password</v-btn></v-flex> 38 @click="reset">Reset Password</v-btn></v-flex>
39 </v-card-actions> 39 </v-card-actions>
40 <v-snackbar 40 <v-snackbar
41 :timeout="timeout" 41 :timeout="timeout"
42 :top="y === 'top'" 42 :top="y === 'top'"
43 :right="x === 'right'" 43 :right="x === 'right'"
44 :vertical="mode === 'vertical'" 44 :vertical="mode === 'vertical'"
45 v-model="snackbar" 45 v-model="snackbar"
46 :color= color 46 :color= color
47 > 47 >
48 {{ text }} 48 {{ text }}
49 </v-snackbar> 49 </v-snackbar>
50 </v-card> 50 </v-card>
51 </v-flex> 51 </v-flex>
52 </v-layout> 52 </v-layout>
53 </v-container> 53 </v-container>
54 </v-app> 54 </v-app>
55 </template> 55 </template>
56 <script> 56 <script>
57 import http from '@/Services/http.js'; 57 import http from '@/Services/http.js';
58 import AppToolbar from '@/components/pageHeader/AppToolbar'; 58 import AppToolbar from '@/components/pageHeader/AppToolbar';
59 59
60 export default { 60 export default {
61 components: { 61 components: {
62 AppToolbar, 62 AppToolbar,
63 }, 63 },
64 data () { 64 data () {
65 return { 65 return {
66 snackbar: false, 66 snackbar: false,
67 y: 'top', 67 y: 'top',
68 x: 'right', 68 x: 'right',
69 mode: '', 69 mode: '',
70 timeout: 4000, 70 timeout: 4000,
71 text: '', 71 text: '',
72 adminChangePasswordcredentials: {}, 72 adminChangePasswordcredentials: {},
73 e1: true, 73 e1: true,
74 e2: true, 74 e2: true,
75 e3: true, 75 e3: true,
76 loading: false, 76 loading: false,
77 valid: false, 77 valid: false,
78 text: 'Password Changed', 78 text: 'Password Changed',
79 currentPassword: '', 79 currentPassword: '',
80 newPassword: '', 80 newPassword: '',
81 confirmPassword: '', 81 confirmPassword: '',
82 rules: { 82 rules: {
83 required: value => !!value || 'This password field is Required.', 83 required: value => !!value || 'This password field is Required.',
84 // min: v => (/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/).test(v) && v.length >= 8 || 'Min 8 characters upper case lower case symbol required' 84 // min: v => (/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/).test(v) && v.length >= 8 || 'Min 8 characters upper case lower case symbol required'
85 }, 85 },
86 }; 86 };
87 }, 87 },
88 methods: { 88 methods: {
89 reset () { 89 reset () {
90 var token = this.$store.state.token; 90 var token = this.$store.state.token;
91 var userdata = { 91 var userdata = {
92 "oldPassword":this.adminChangePasswordcredentials.oldPassword, 92 "oldPassword":this.adminChangePasswordcredentials.oldPassword,
93 "newPassword":this.adminChangePasswordcredentials.newPassword, 93 "newPassword":this.adminChangePasswordcredentials.newPassword,
94 } 94 }
95 http().put('/schoolChangePassword',userdata,{headers: { Authorization: 'Bearer '+ token }}) 95 http().put('/schoolChangePassword',userdata,{headers: { Authorization: 'Bearer '+ token }})
96 .then(response => { 96 .then(response => {
97 this.loading = true; 97 this.loading = true;
98 if(this.snackbar=true){ 98 if(this.snackbar=true){
99 this.text= "Successfully changed password !!" 99 this.text= "Successfully changed password !!"
100 console.log("snackbar",response.data.message) 100 console.log("snackbar",response.data.message)
101 } 101 }
102 setTimeout(() => { 102 setTimeout(() => {
103 this.$router.push('/dashboard'); 103 this.$router.push('/dashboard');
104 }, 2000); 104 }, 2000);
105 }).catch(err => { 105 }).catch(err => {
106 // console.log("err====>",err); 106 // console.log("err====>",err);
107 this.text="User Not Found or Incorrect currentPassword" 107 this.text="User Not Found or Incorrect currentPassword"
108 this.snackbar= true; 108 this.snackbar= true;
109 this.loading = false; 109 this.loading = false;
110 }) 110 })
111 } 111 }
112 }, 112 },
113 computed:{ 113 computed:{
114 color(){ 114 color(){
115 return this.loading ? 'success' : 'error' 115 return this.loading ? 'success' : 'error'
116 } 116 }
117 } 117 }
118 }; 118 };
119 </script> 119 </script>
120 <style scoped> 120 <style scoped>
121 img{ 121 img{
122 position:absolute; 122 position:absolute;
123 top:13px; 123 top:13px;
124 left:50px; 124 left:50px;
125 } 125 }
126 .v-btn--large { 126 .v-btn--large {
127 padding: 0px 74px; 127 padding: 0px 74px;
128 } 128 }
129 @media screen and (max-width: 769px){ 129 @media screen and (max-width: 769px){
130 .v-btn--large { 130 .v-btn--large {
131 font-size: 14px; 131 font-size: 14px;
132 height: 44px; 132 height: 44px;
133 padding: 0 32px; 133 padding: 0 32px;
134 134
135 } 135 }
136 } 136 }
137 </style> 137 </style>
138 138
src/pages/Authentication/forgetpassword.vue
Diff comments   View file @2b0e316
1 <template> 1 <template>
2 <v-app id="login"> 2 <v-app id="login">
3 <v-toolbar class="fixcolors"> 3 <v-toolbar class="fixcolors">
4 <v-toolbar-items> 4 <v-toolbar-items>
5 <img src="/static/icon.jpeg" height="36" alt="logo"> 5 <img src="/static/icon.jpeg" height="36" alt="logo">
6 <h3 class="white--text my-3 ml-5 logoSchool">School-Management</h3> 6 <h3 class="white--text my-3 ml-5 logoSchool">Technology Succes</h3>
7 </v-toolbar-items> 7 </v-toolbar-items>
8 </v-toolbar> 8 </v-toolbar>
9 <v-container fluid> 9 <v-container fluid>
10 <v-layout align-center justify-center fill-height> 10 <v-layout align-center justify-center fill-height>
11 <v-flex xs12 sm8 md7 lg8> 11 <v-flex xs12 sm8 md7 lg8>
12 <div> 12 <div>
13 <v-app> 13 <v-app>
14 <v-stepper v-model="e2"> 14 <v-stepper v-model="e2">
15 <v-stepper-header> 15 <v-stepper-header>
16 <v-stepper-step :complete="e2 > 1" step="1">Fill Your Email</v-stepper-step> 16 <v-stepper-step :complete="e2 > 1" step="1">Fill Your Email</v-stepper-step>
17 <v-divider></v-divider> 17 <v-divider></v-divider>
18 <v-stepper-step step="2">Last Step of Forget Password</v-stepper-step> 18 <v-stepper-step step="2">Last Step of Forget Password</v-stepper-step>
19 </v-stepper-header> 19 </v-stepper-header>
20 <v-stepper-items> 20 <v-stepper-items>
21 <v-stepper-content step="1"> 21 <v-stepper-content step="1">
22 <v-content> 22 <v-content>
23 <v-container fluid class="content"> 23 <v-container fluid class="content">
24 <v-layout align-center justify-center fill-height> 24 <v-layout align-center justify-center fill-height>
25 <v-flex xs12 sm8 md7 lg8> 25 <v-flex xs12 sm8 md7 lg8>
26 <v-toolbar class="fixcolors" dark> 26 <v-toolbar class="fixcolors" dark>
27 <v-spacer></v-spacer> 27 <v-spacer></v-spacer>
28 <v-toolbar-title>Forget Password</v-toolbar-title> 28 <v-toolbar-title>Forget Password</v-toolbar-title>
29 <v-spacer></v-spacer> 29 <v-spacer></v-spacer>
30 </v-toolbar> 30 </v-toolbar>
31 <v-card class="elevation-1 pa-1"> 31 <v-card class="elevation-1 pa-1">
32 <v-card-text> 32 <v-card-text>
33 <h5 class="text-xs-center"> Not to Worry! Enter to your registered Email ID. </h5> 33 <h5 class="text-xs-center"> Not to Worry! Enter to your registered Email ID. </h5>
34 <h5 class="text-xs-center"> We'll send you a reset.</h5> 34 <h5 class="text-xs-center"> We'll send you a reset.</h5>
35 <v-flex lg6 sm6 xs10 offset-sm3 offset-xs1 offset-lg3> 35 <v-flex lg6 sm6 xs10 offset-sm3 offset-xs1 offset-lg3>
36 <v-form ref="form" v-model="valid" lazy-validation> 36 <v-form ref="form" v-model="valid" lazy-validation>
37 <div class="custom-input-align"> 37 <div class="custom-input-align">
38 <v-text-field 38 <v-text-field
39 class="text-md-center" 39 class="text-md-center"
40 :rules="emailRules" 40 :rules="emailRules"
41 v-model="forgetemail" 41 v-model="forgetemail"
42 label="Enter Your email ID" 42 label="Enter Your email ID"
43 required></v-text-field> 43 required></v-text-field>
44 </div> 44 </div>
45 </v-form> 45 </v-form>
46 </v-flex> 46 </v-flex>
47 </v-card-text> 47 </v-card-text>
48 <v-card-actions> 48 <v-card-actions>
49 <v-flex text-xs-center> 49 <v-flex text-xs-center>
50 <v-btn round class="mt-1 button fixcolors" dark large @click="reset">Send Request</v-btn> 50 <v-btn round class="mt-1 button fixcolors" dark large @click="reset">Send Request</v-btn>
51 </v-flex> 51 </v-flex>
52 </v-card-actions> 52 </v-card-actions>
53 <v-snackbar 53 <v-snackbar
54 :timeout="timeout" 54 :timeout="timeout"
55 :top="y === 'top'" 55 :top="y === 'top'"
56 :right="x === 'right'" 56 :right="x === 'right'"
57 :vertical="mode === 'vertical'" 57 :vertical="mode === 'vertical'"
58 v-model="snackbar" 58 v-model="snackbar"
59 :color= color 59 :color= color
60 > 60 >
61 {{ text }} 61 {{ text }}
62 </v-snackbar> 62 </v-snackbar>
63 </v-snackbar> 63 </v-snackbar>
64 </v-card> 64 </v-card>
65 </v-flex> 65 </v-flex>
66 </v-layout> 66 </v-layout>
67 </v-container> 67 </v-container>
68 </v-content> 68 </v-content>
69 </v-stepper-content> 69 </v-stepper-content>
70 <v-stepper-content step="2"> 70 <v-stepper-content step="2">
71 <v-content> 71 <v-content>
72 <v-container fluid fill-height> 72 <v-container fluid fill-height>
73 <v-layout align-center justify-center> 73 <v-layout align-center justify-center>
74 <v-flex xs12 sm8 md7 lg8> 74 <v-flex xs12 sm8 md7 lg8>
75 <v-toolbar class="fixcolors" dark> 75 <v-toolbar class="fixcolors" dark>
76 <v-spacer></v-spacer> 76 <v-spacer></v-spacer>
77 <v-toolbar-title>Forget Password</v-toolbar-title> 77 <v-toolbar-title>Forget Password</v-toolbar-title>
78 <v-spacer></v-spacer> 78 <v-spacer></v-spacer>
79 </v-toolbar> 79 </v-toolbar>
80 <v-card class="elevation-1 pa-1"> 80 <v-card class="elevation-1 pa-1">
81 <v-card-text> 81 <v-card-text>
82 <h5 class="text-xs-center"> Not to Worry! Enter to your registered Email ID And New Password. </h5> 82 <h5 class="text-xs-center"> Not to Worry! Enter to your registered Email ID And New Password. </h5>
83 <h5 class="text-xs-center"> We'll send you a reset.</h5> 83 <h5 class="text-xs-center"> We'll send you a reset.</h5>
84 <v-flex lg6 sm6 xs10 offset-sm3 offset-xs1 offset-lg3> 84 <v-flex lg6 sm6 xs10 offset-sm3 offset-xs1 offset-lg3>
85 <v-form class="mt-4"> 85 <v-form class="mt-4">
86 <div class="custom-input-align"> 86 <div class="custom-input-align">
87 <v-text-field 87 <v-text-field
88 class="text-md-center" 88 class="text-md-center"
89 v-model="email" 89 v-model="email"
90 :rules="emailRules" 90 :rules="emailRules"
91 label="Enter Your email ID" 91 label="Enter Your email ID"
92 required></v-text-field> 92 required></v-text-field>
93 <v-text-field 93 <v-text-field
94 :rules="[rules.required,rules.min]" 94 :rules="[rules.required,rules.min]"
95 v-model="changepassword" 95 v-model="changepassword"
96 :append-icon="e1 ? 'visibility_off' : 'visibility'" 96 :append-icon="e1 ? 'visibility_off' : 'visibility'"
97 :append-icon-cb="() => (e1 = !e1)" 97 :append-icon-cb="() => (e1 = !e1)"
98 :type="e1 ? 'password' : 'text'" 98 :type="e1 ? 'password' : 'text'"
99 name="input-10-1" 99 name="input-10-1"
100 label="Password" 100 label="Password"
101 counter 101 counter
102 ></v-text-field> 102 ></v-text-field>
103 </div> 103 </div>
104 </v-form> 104 </v-form>
105 </v-flex> 105 </v-flex>
106 </v-card-text> 106 </v-card-text>
107 <v-card-actions> 107 <v-card-actions>
108 <v-flex text-xs-center> 108 <v-flex text-xs-center>
109 <v-btn round class="mt-1 button fixcolors" dark large @click="resetPassword">Send Request</v-btn> 109 <v-btn round class="mt-1 button fixcolors" dark large @click="resetPassword">Send Request</v-btn>
110 </v-flex> 110 </v-flex>
111 </v-card-actions> 111 </v-card-actions>
112 <v-snackbar 112 <v-snackbar
113 :timeout="timeout" 113 :timeout="timeout"
114 :top="y === 'top'" 114 :top="y === 'top'"
115 :right="x === 'right'" 115 :right="x === 'right'"
116 :vertical="mode === 'vertical'" 116 :vertical="mode === 'vertical'"
117 v-model="snackbar" 117 v-model="snackbar"
118 :color= color 118 :color= color
119 > 119 >
120 {{ text }} 120 {{ text }}
121 </v-snackbar> 121 </v-snackbar>
122 </v-snackbar> 122 </v-snackbar>
123 </v-card> 123 </v-card>
124 </v-flex> 124 </v-flex>
125 </v-layout> 125 </v-layout>
126 </v-container> 126 </v-container>
127 </v-content> 127 </v-content>
128 <v-btn 128 <v-btn
129 color="primary" 129 color="primary"
130 dark 130 dark
131 @click="e2 = 1" 131 @click="e2 = 1"
132 > 132 >
133 Back 133 Back
134 </v-btn> 134 </v-btn>
135 </v-stepper-content> 135 </v-stepper-content>
136 </v-stepper-items> 136 </v-stepper-items>
137 </v-stepper> 137 </v-stepper>
138 </v-app> 138 </v-app>
139 </div> 139 </div>
140 </v-flex> 140 </v-flex>
141 </v-layout> 141 </v-layout>
142 </v-container> 142 </v-container>
143 <v-footer class="pa-4 fixcolors"> 143 <v-footer class="pa-4 fixcolors">
144 </v-footer> 144 </v-footer>
145 </v-app> 145 </v-app>
146 </template> 146 </template>
147 147
148 148
149 149
150 <script> 150 <script>
151 import http from '@/Services/http.js'; 151 import http from '@/Services/http.js';
152 152
153 export default { 153 export default {
154 data: () => ({ 154 data: () => ({
155 e1: true, 155 e1: true,
156 e2:0, 156 e2:0,
157 snackbar: false, 157 snackbar: false,
158 y: 'top', 158 y: 'top',
159 x: 'right', 159 x: 'right',
160 mode: '', 160 mode: '',
161 timeout: 4000, 161 timeout: 4000,
162 text: '', 162 text: '',
163 loading: false, 163 loading: false,
164 email: '', 164 email: '',
165 forgetemail:'', 165 forgetemail:'',
166 password:'', 166 password:'',
167 changepassword:'', 167 changepassword:'',
168 valid: true, 168 valid: true,
169 emailRules: [ 169 emailRules: [
170 v => !!v || "E-mail is required", 170 v => !!v || "E-mail is required",
171 v => 171 v =>
172 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 172 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
173 "E-mail must be valid" 173 "E-mail must be valid"
174 ], 174 ],
175 rules: { 175 rules: {
176 required: value => !!value || "password is Required.", 176 required: value => !!value || "password is Required.",
177 min: v => 177 min: v =>
178 (/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/.test( 178 (/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/.test(
179 v 179 v
180 ) && 180 ) &&
181 v.length >= 6) || 181 v.length >= 6) ||
182 "Min 4 characters upper case lower case symbol required" 182 "Min 4 characters upper case lower case symbol required"
183 } 183 }
184 }), 184 }),
185 185
186 methods: { 186 methods: {
187 reset () { 187 reset () {
188 if (this.$refs.form.validate()) { 188 if (this.$refs.form.validate()) {
189 http().get('/schoolForgotPassword?email='+ this.forgetemail) 189 http().get('/schoolForgotPassword?email='+ this.forgetemail)
190 .then(response => { 190 .then(response => {
191 // console.log("response=====>",response.data.data.token); 191 // console.log("response=====>",response.data.data.token);
192 this.$store.dispatch("setToken", response.data.data.token); 192 this.$store.dispatch("setToken", response.data.data.token);
193 this.loading = true; 193 this.loading = true;
194 this.e2 = 2 ; 194 this.e2 = 2 ;
195 if(this.snackbar=true){ 195 if(this.snackbar=true){
196 this.text= "Please you Fill Last Step of Forget Password!" 196 this.text= "Please you Fill Last Step of Forget Password!"
197 } 197 }
198 }).catch(err => { 198 }).catch(err => {
199 this.text="User Not Found or Incorrect Email" 199 this.text="User Not Found or Incorrect Email"
200 this.snackbar= true; 200 this.snackbar= true;
201 this.loading = false; 201 this.loading = false;
202 }) 202 })
203 } 203 }
204 }, 204 },
205 resetPassword(){ 205 resetPassword(){
206 let forgotPassword = { 206 let forgotPassword = {
207 resetToken: this.$store.state.token, 207 resetToken: this.$store.state.token,
208 email: this.email, 208 email: this.email,
209 password: this.changepassword 209 password: this.changepassword
210 } 210 }
211 http().post('/schoolResetPassword',forgotPassword) 211 http().post('/schoolResetPassword',forgotPassword)
212 .then(response => { 212 .then(response => {
213 console.log("response=====>",response); 213 console.log("response=====>",response);
214 this.loading = true; 214 this.loading = true;
215 if(this.snackbar=true){ 215 if(this.snackbar=true){
216 this.text= "Successfully Change your Password" 216 this.text= "Successfully Change your Password"
217 } 217 }
218 setTimeout(() => { 218 setTimeout(() => {
219 this.$router.push('/'); 219 this.$router.push('/');
220 }, 1000); 220 }, 1000);
221 }).catch(err => { 221 }).catch(err => {
222 this.text="User Not Found or Incorrect Email" 222 this.text="User Not Found or Incorrect Email"
223 this.snackbar= true; 223 this.snackbar= true;
224 this.loading = false; 224 this.loading = false;
225 }) 225 })
226 } 226 }
227 }, 227 },
228 computed:{ 228 computed:{
229 color(){ 229 color(){
230 return this.loading ? 'success' : 'error' 230 return this.loading ? 'success' : 'error'
231 } 231 }
232 } 232 }
233 233
234 }; 234 };
235 </script> 235 </script>
236 <style scoped lang="css"> 236 <style scoped lang="css">
237 .content { 237 .content {
238 padding: 100px 0px 100px 0px !important; 238 padding: 100px 0px 100px 0px !important;
239 } 239 }
240 #login { 240 #login {
241 height: 50%; 241 height: 50%;
242 width: 100%; 242 width: 100%;
243 position: absolute; 243 position: absolute;
244 top: 0; 244 top: 0;
245 left: 0; 245 left: 0;
246 content: ""; 246 content: "";
247 z-index: 0; 247 z-index: 0;
248 } 248 }
249 img{ 249 img{
250 position:absolute; 250 position:absolute;
251 top:13px; 251 top:13px;
252 left:8px; 252 left:8px;
253 } 253 }
254 .v-btn--large { 254 .v-btn--large {
255 padding: 0px 74px; 255 padding: 0px 74px;
256 } 256 }
257 .button{ 257 .button{
258 text-transform: none; 258 text-transform: none;
259 } 259 }
260 @media screen and (max-width: 472px) { 260 @media screen and (max-width: 472px) {
261 .v-btn--large { 261 .v-btn--large {
262 padding:0px 20px !important; 262 padding:0px 20px !important;
263 font-size:13px; 263 font-size:13px;
264 } 264 }
265 h5 { 265 h5 {
266 font-size: 11px; 266 font-size: 11px;
267 } 267 }
268 } 268 }
269 @media screen and (max-width: 600px) { 269 @media screen and (max-width: 600px) {
270 .theme--light .v-btn, .application .theme--light.v-btn { 270 .theme--light .v-btn, .application .theme--light.v-btn {
271 color: white !important; 271 color: white !important;
272 } 272 }
273 img{ 273 img{
274 top: 21px; 274 top: 21px;
275 left: 10px; 275 left: 10px;
276 height: 24px; 276 height: 24px;
277 width: 33px; 277 width: 33px;
278 } 278 }
279 .logoSchool{ 279 .logoSchool{
280 font-size: 18px; 280 font-size: 18px;
281 margin-top: 20px !important; 281 margin-top: 20px !important;
282 } 282 }
283 .content { 283 .content {
284 padding: 0px 0px 0px 0px !important; 284 padding: 0px 0px 0px 0px !important;
285 } 285 }
286 } 286 }
287 </style> 287 </style>
src/pages/Class/addclass.vue
Diff comments   View file @2b0e316
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-toolbar class="fixcolors" fixed app> 3 <v-toolbar class="fixcolors" fixed app>
4 <v-toolbar-title class="ml-0 pl-3"> 4 <v-toolbar-title class="ml-0 pl-3">
5 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon> 5 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon>
6 </v-toolbar-title> 6 </v-toolbar-title>
7 7
8 <!-- ****** SEARCH ALL EXISTING STUDENTS ****** --> 8 <!-- ****** SEARCH ALL EXISTING STUDENTS ****** -->
9 <v-flex xs7 sm3 class="userSearch"> 9 <v-flex xs7 sm3 class="userSearch">
10 <v-text-field 10 <v-text-field
11 flat 11 flat
12 append-icon="search" 12 append-icon="search"
13 label="Find your Class" 13 label="Find your Class"
14 v-model="search" 14 v-model="search"
15 color="white" 15 color="white"
16 dark 16 dark
17 ></v-text-field> 17 ></v-text-field>
18 </v-flex> 18 </v-flex>
19 <v-spacer></v-spacer> 19 <v-spacer></v-spacer>
20 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition"> 20 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
21 <v-btn icon large flat slot="activator"> 21 <v-btn icon large flat slot="activator">
22 <v-avatar size="40px"> 22 <v-avatar size="40px">
23 <img src="/static/icon/user.png"> 23 <img src="/static/icon/user.png">
24 </v-avatar> 24 </v-avatar>
25 </v-btn> 25 </v-btn>
26 <v-list class="pa-0"> 26 <v-list class="pa-0">
27 <v-list-tile 27 <v-list-tile
28 v-for="(item,index) in items" 28 v-for="(item,index) in items"
29 :to="!item.href ? { name: item.name } : null" 29 :to="!item.href ? { name: item.name } : null"
30 :href="item.href" 30 :href="item.href"
31 @click="item.click" 31 @click="item.click"
32 ripple="ripple" 32 ripple="ripple"
33 :disabled="item.disabled" 33 :disabled="item.disabled"
34 :target="item.target" 34 :target="item.target"
35 rel="noopener" 35 rel="noopener"
36 :key="index" 36 :key="index"
37 > 37 >
38 <v-list-tile-action v-if="item.icon"> 38 <v-list-tile-action v-if="item.icon">
39 <v-icon>{{ item.icon }}</v-icon> 39 <v-icon>{{ item.icon }}</v-icon>
40 </v-list-tile-action> 40 </v-list-tile-action>
41 <v-list-tile-content> 41 <v-list-tile-content>
42 <v-list-tile-title>{{ item.title }}</v-list-tile-title> 42 <v-list-tile-title>{{ item.title }}</v-list-tile-title>
43 </v-list-tile-content> 43 </v-list-tile-content>
44 </v-list-tile> 44 </v-list-tile>
45 </v-list> 45 </v-list>
46 </v-menu> 46 </v-menu>
47 </v-toolbar> 47 </v-toolbar>
48 <v-tabs grow slider-color="black"> 48 <v-tabs grow slider-color="black">
49 <v-tab 49 <v-tab
50 ripple 50 ripple
51 @click="activeTab('existing')" 51 @click="activeTab('existing')"
52 v-bind:class="{ active: isActive }" 52 v-bind:class="{ active: isActive }"
53 id="tab" 53 id="tab"
54 class="subheading" 54 class="subheading"
55 >Existing Class</v-tab> 55 >Existing Class</v-tab>
56 <v-tab 56 <v-tab
57 ripple 57 ripple
58 @click="activeTab('new')" 58 @click="activeTab('new')"
59 v-bind:class="{ active: newActive }" 59 v-bind:class="{ active: newActive }"
60 id="tab1" 60 id="tab1"
61 User 61 User
62 class="subheading" 62 class="subheading"
63 >Add New Class</v-tab> 63 >Add New Class</v-tab>
64 64
65 <!-- ****** EDITS ADD ClASS ****** --> 65 <!-- ****** EDITS ADD ClASS ****** -->
66 <v-tab-item> 66 <v-tab-item>
67 <v-snackbar 67 <v-snackbar
68 :timeout="timeout" 68 :timeout="timeout"
69 :top="y === 'top'" 69 :top="y === 'top'"
70 :right="x === 'right'" 70 :right="x === 'right'"
71 :vertical="mode === 'vertical'" 71 :vertical="mode === 'vertical'"
72 v-model="snackbar" 72 v-model="snackbar"
73 color="success" 73 color="success"
74 >{{ text }}</v-snackbar> 74 >{{ text }}</v-snackbar>
75 <v-dialog v-model="dialog" max-width="500px"> 75 <v-dialog v-model="dialog" max-width="500px">
76 <v-toolbar color="white"> 76 <v-toolbar color="white">
77 <v-spacer></v-spacer> 77 <v-spacer></v-spacer>
78 <v-toolbar-title>Edit Class</v-toolbar-title> 78 <v-toolbar-title>Edit Class</v-toolbar-title>
79 <v-spacer></v-spacer> 79 <v-spacer></v-spacer>
80 </v-toolbar> 80 </v-toolbar>
81 <v-card> 81 <v-card>
82 <v-card-text> 82 <v-card-text>
83 <v-container> 83 <v-container>
84 <v-layout wrap justify-center> 84 <v-layout wrap justify-center>
85 <v-flex xs12 sm9> 85 <v-flex xs12 sm9>
86 <v-form ref="form" v-model="valid" lazy-validation> 86 <v-form ref="form" v-model="valid" lazy-validation>
87 <v-layout style="position:relative;"> 87 <v-layout style="position:relative;">
88 <v-flex xs4 class="pt-4 subheading"> 88 <v-flex xs4 class="pt-4 subheading">
89 <label>Class Name:</label> 89 <label>Class Name:</label>
90 </v-flex> 90 </v-flex>
91 <v-flex xs8> 91 <v-flex xs8>
92 <v-text-field 92 <v-text-field
93 v-model="editedItem.classNum" 93 v-model="editedItem.classNum"
94 v-validate="'required'" 94 v-validate="'required'"
95 :rules="nameRules" 95 :rules="nameRules"
96 data-vv-name="Name" 96 data-vv-name="Name"
97 required 97 required
98 ></v-text-field> 98 ></v-text-field>
99 </v-flex> 99 </v-flex>
100 </v-layout> 100 </v-layout>
101 <v-card-actions> 101 <v-card-actions>
102 <v-btn round dark @click.native="close">Cancel</v-btn> 102 <v-btn round dark @click.native="close">Cancel</v-btn>
103 <v-spacer></v-spacer> 103 <v-spacer></v-spacer>
104 <v-btn round dark @click="save">Save</v-btn> 104 <v-btn round dark @click="save">Save</v-btn>
105 </v-card-actions> 105 </v-card-actions>
106 </v-form> 106 </v-form>
107 </v-flex> 107 </v-flex>
108 </v-layout> 108 </v-layout>
109 </v-container> 109 </v-container>
110 </v-card-text> 110 </v-card-text>
111 </v-card> 111 </v-card>
112 </v-dialog> 112 </v-dialog>
113 113
114 <!-- ****** PROFILE VIEW STUDENTS ****** --> 114 <!-- ****** PROFILE VIEW STUDENTS ****** -->
115 <v-dialog v-model="dialog1" max-width="600px"> 115 <v-dialog v-model="dialog1" max-width="600px">
116 <v-toolbar color="white"> 116 <v-toolbar color="white">
117 <v-spacer></v-spacer> 117 <v-spacer></v-spacer>
118 <v-toolbar-title>Profile</v-toolbar-title> 118 <v-toolbar-title>Profile</v-toolbar-title>
119 <v-spacer></v-spacer> 119 <v-spacer></v-spacer>
120 <v-icon @click="close1">close</v-icon> 120 <v-icon @click="close1">close</v-icon>
121 </v-toolbar> 121 </v-toolbar>
122 <v-card> 122 <v-card>
123 <v-flex align-center justify-center layout text-xs-center> 123 <v-flex align-center justify-center layout text-xs-center>
124 <v-avatar size="50px" style="position:absolute; top:20px;"> 124 <v-avatar size="50px" style="position:absolute; top:20px;">
125 <img src="/static/icon/user.png"> 125 <img src="/static/icon/user.png">
126 </v-avatar> 126 </v-avatar>
127 </v-flex> 127 </v-flex>
128 <v-card-text> 128 <v-card-text>
129 <v-container grid-list-md> 129 <v-container grid-list-md>
130 <v-layout wrap> 130 <v-layout wrap>
131 <v-flex> 131 <v-flex>
132 <br> 132 <br>
133 <br> 133 <br>
134 <v-layout> 134 <v-layout>
135 <v-flex xs5 sm6> 135 <v-flex xs5 sm6>
136 <h5 class="right my-1">Class Name:</h5> 136 <h5 class="right my-1">Class Name:</h5>
137 </v-flex> 137 </v-flex>
138 <v-flex sm6 xs8> 138 <v-flex sm6 xs8>
139 <h5 class="my-1">{{ editedItem.classNum }}</h5> 139 <h5 class="my-1">{{ editedItem.classNum }}</h5>
140 </v-flex> 140 </v-flex>
141 </v-layout> 141 </v-layout>
142 </v-flex> 142 </v-flex>
143 </v-layout> 143 </v-layout>
144 </v-container> 144 </v-container>
145 </v-card-text> 145 </v-card-text>
146 </v-card> 146 </v-card>
147 </v-dialog> 147 </v-dialog>
148 148
149 <v-snackbar 149 <v-snackbar
150 :timeout="timeout" 150 :timeout="timeout"
151 :top="y === 'top'" 151 :top="y === 'top'"
152 :right="x === 'right'" 152 :right="x === 'right'"
153 :vertical="mode === 'vertical'" 153 :vertical="mode === 'vertical'"
154 v-model="snackbar" 154 v-model="snackbar"
155 color="success" 155 color="success"
156 >{{ text }}</v-snackbar> 156 >{{ text }}</v-snackbar>
157 157
158 <!-- ****** EXISTING-USERS Classess Table ****** --> 158 <!-- ****** EXISTING-USERS Classess Table ****** -->
159 <v-data-table 159 <v-data-table
160 :headers="headers" 160 :headers="headers"
161 :items="desserts" 161 :items="desserts"
162 :pagination.sync="pagination" 162 :pagination.sync="pagination"
163 :search="search" 163 :search="search"
164 > 164 >
165 <template slot="items" slot-scope="props"> 165 <template slot="items" slot-scope="props">
166 <td id="td" class="text-xs-center">{{ props.index}}</td> 166 <td id="td" class="text-xs-center">{{ props.index}}</td>
167 <td id="td" class="text-xs-center">{{ props.item.classNum}}</td> 167 <td id="td" class="text-xs-center">{{ props.item.classNum}}</td>
168 <td class="text-xs-center"> 168 <td class="text-xs-center">
169 <span> 169 <span>
170 <img 170 <img
171 style="cursor:pointer; width:25px; height:18px; " 171 style="cursor:pointer; width:25px; height:18px; "
172 class="mr-5" 172 class="mr-5"
173 @click="profile(props.item)" 173 @click="profile(props.item)"
174 src="/static/icon/eye1.png" 174 src="/static/icon/eye1.png"
175 > 175 >
176 <img 176 <img
177 style="cursor:pointer; width:20px; height:18px; " 177 style="cursor:pointer; width:20px; height:18px; "
178 class="mr-5" 178 class="mr-5"
179 @click="editItem(props.item)" 179 @click="editItem(props.item)"
180 src="/static/icon/edit1.png" 180 src="/static/icon/edit1.png"
181 > 181 >
182 <img 182 <img
183 style="cursor:pointer; height:20px; " 183 style="cursor:pointer; height:20px; "
184 class="mr-5" 184 class="mr-5"
185 @click="deleteItem(props.item)" 185 @click="deleteItem(props.item)"
186 src="/static/icon/delete1.png" 186 src="/static/icon/delete1.png"
187 > 187 >
188 </span> 188 </span>
189 </td> 189 </td>
190 </template> 190 </template>
191 <v-alert 191 <v-alert
192 slot="no-results" 192 slot="no-results"
193 :value="true" 193 :value="true"
194 color="error" 194 color="error"
195 icon="warning" 195 icon="warning"
196 >Your search for "{{ search }}" found no results.</v-alert> 196 >Your search for "{{ search }}" found no results.</v-alert>
197 </v-data-table> 197 </v-data-table>
198 </v-tab-item> 198 </v-tab-item>
199 199
200 <!-- ****** ADD multiple Classess ****** --> 200 <!-- ****** ADD multiple Classess ****** -->
201 <v-tab-item> 201 <v-tab-item>
202 <v-container> 202 <v-container>
203 <v-snackbar 203 <v-snackbar
204 :timeout="timeout" 204 :timeout="timeout"
205 :top="y === 'top'" 205 :top="y === 'top'"
206 :right="x === 'right'" 206 :right="x === 'right'"
207 :vertical="mode === 'vertical'" 207 :vertical="mode === 'vertical'"
208 v-model="snackbar" 208 v-model="snackbar"
209 color="success" 209 color="success"
210 >{{ text }}</v-snackbar> 210 >{{ text }}</v-snackbar>
211 <v-flex xs12 sm8 offset-sm2 class="top"> 211 <v-flex xs12 sm8 offset-sm2 class="top">
212 <v-card flat> 212 <v-card flat>
213 <v-container fluid fill-height> 213 <v-container fluid fill-height>
214 <v-layout align-center> 214 <v-layout align-center>
215 <v-flex xs12> 215 <v-flex xs12>
216 <v-flex offset-xs5> 216 <v-flex offset-xs5>
217 <v-avatar size="55px"> 217 <v-avatar size="55px">
218 <img src="/static/icon/user.png"> 218 <img src="/static/icon/user.png">
219 </v-avatar> 219 </v-avatar>
220 </v-flex> 220 </v-flex>
221 <v-form ref="form" v-model="valid" lazy-validation> 221 <v-form ref="form" v-model="valid" lazy-validation>
222 <v-layout> 222 <v-layout>
223 <v-flex xs4 class="pt-4 subheading"> 223 <v-flex xs4 class="pt-4 subheading">
224 <label class="right">Class Name:</label> 224 <label class="right">Class Name:</label>
225 </v-flex> 225 </v-flex>
226 <v-flex xs6 class="ml-3"> 226 <v-flex xs6 class="ml-3">
227 <v-text-field 227 <v-text-field
228 v-model="addclasses.classNum" 228 v-model="addclasses.classNum"
229 placeholder="fill your class Name" 229 placeholder="fill your class Name"
230 name="name" 230 name="name"
231 type="text" 231 type="text"
232 :rules="nameRules" 232 :rules="nameRules"
233 required 233 required
234 ></v-text-field> 234 ></v-text-field>
235 </v-flex> 235 </v-flex>
236 </v-layout> 236 </v-layout>
237 <v-layout> 237 <v-layout>
238 <v-flex xs12 sm9 offset-sm2> 238 <v-flex xs12 sm9 offset-sm2>
239 <v-card-actions> 239 <v-card-actions>
240 <v-btn @click="clear" round dark>clear</v-btn> 240 <v-btn @click="clear" round dark>clear</v-btn>
241 <v-spacer></v-spacer> 241 <v-spacer></v-spacer>
242 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 242 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
243 </v-card-actions> 243 </v-card-actions>
244 </v-flex> 244 </v-flex>
245 </v-layout> 245 </v-layout>
246 </v-form> 246 </v-form>
247 </v-flex> 247 </v-flex>
248 </v-layout> 248 </v-layout>
249 </v-container> 249 </v-container>
250 </v-card> 250 </v-card>
251 </v-flex> 251 </v-flex>
252 </v-container> 252 </v-container>
253 </v-tab-item> 253 </v-tab-item>
254 </v-tabs> 254 </v-tabs>
255 <div class="loader" v-if="showLoader"> 255 <div class="loader" v-if="showLoader">
256 <v-progress-circular indeterminate color="white"></v-progress-circular> 256 <v-progress-circular indeterminate color="white"></v-progress-circular>
257 </div> 257 </div>
258 </v-app> 258 </v-app>
259 </template> 259 </template>
260 260
261 <script> 261 <script>
262 import http from "@/Services/http.js"; 262 import http from "@/Services/http.js";
263 import Util from "@/util"; 263 import Util from "@/util";
264 264
265 export default { 265 export default {
266 data: () => ({ 266 data: () => ({
267 snackbar: false, 267 snackbar: false,
268 y: "top", 268 y: "top",
269 x: "right", 269 x: "right",
270 mode: "", 270 mode: "",
271 timeout: 3000, 271 timeout: 3000,
272 text: "", 272 text: "",
273 showLoader:false, 273 showLoader:false,
274 loading: false, 274 loading: false,
275 date: null, 275 date: null,
276 search: "", 276 search: "",
277 dialog: false, 277 dialog: false,
278 dialog1: false, 278 dialog1: false,
279 valid: true, 279 valid: true,
280 isActive: true, 280 isActive: true,
281 newActive: false, 281 newActive: false,
282 AddUsercredentials: {}, 282 AddUsercredentials: {},
283 pagination: { 283 pagination: {
284 rowsPerPage: 15 284 rowsPerPage: 15
285 }, 285 },
286 nameRules: [v => !!v || " Full Name is required"], 286 nameRules: [v => !!v || " Full Name is required"],
287 headers: [ 287 headers: [
288 { 288 {
289 text: "No", 289 text: "No",
290 align: "center", 290 align: "center",
291 sortable: false, 291 sortable: false,
292 value: "No" 292 value: "No"
293 }, 293 },
294 { text: "Class Name", value: "classNum", sortable: false, align: "center" }, 294 { text: "Class No", value: "classNum", sortable: false, align: "center" },
295
295 { text: "Action", value: "", sortable: false, align: "center" } 296 { text: "Action", value: "", sortable: false, align: "center" }
296 ], 297 ],
297 desserts: [], 298 desserts: [],
298 editedIndex: -1, 299 editedIndex: -1,
299 editedItem: { 300 editedItem: {
300 classNum: "" 301 classNum: ""
301 }, 302 },
302 addclasses:{ 303 addclasses:{
303 classNum: "" 304 classNum: ""
304 }, 305 },
305 defaultItem: { 306 defaultItem: {
306 classNum: "" 307 classNum: ""
307 }, 308 },
308 items: [ 309 items: [
309 { 310 {
310 href: "/changepassword", 311 href: "/changepassword",
311 title: "Change Password", 312 title: "Change Password",
312 click: e => { 313 click: e => {
313 console.log(e); 314 console.log(e);
314 } 315 }
315 }, 316 },
316 { 317 {
317 href: "#", 318 href: "#",
318 title: "Logout", 319 title: "Logout",
319 click: e => { 320 click: e => {
320 window.getApp.$emit("APP_LOGOUT"); 321 window.getApp.$emit("APP_LOGOUT");
321 } 322 }
322 } 323 }
323 ] 324 ]
324 }), 325 }),
325 methods: { 326 methods: {
326 getClassList() { 327 getClassList() {
327 this.showLoader = true; 328 this.showLoader = true;
328 var token = this.$store.state.token; 329 var token = this.$store.state.token;
329 http() 330 http()
330 .get("/getClassesList", { 331 .get("/getClassesList")
331 headers: { Authorization: "Bearer " + token }
332 })
333 .then(response => { 332 .then(response => {
334 this.desserts = response.data.data; 333 this.desserts = response.data.data;
335 this.showLoader = false; 334 this.showLoader = false;
336 // console.log("getClassList=====>", this.desserts); 335 // console.log("getClassList=====>", response);
337 }) 336 })
338 .catch(err => { 337 .catch(err => {
339 // console.log("err====>", err); 338 console.log("err====>", err);
340 this.showLoader = false; 339 this.showLoader = false;
341 this.$router.replace({ path: "/" }); 340 this.$router.replace({ path: "/" });
342 }); 341 });
343 }, 342 },
344 editItem(item) { 343 editItem(item) {
345 this.editedIndex = this.desserts.indexOf(item); 344 this.editedIndex = this.desserts.indexOf(item);
346 this.editedItem = Object.assign({}, item); 345 this.editedItem = Object.assign({}, item);
347 this.dialog = true; 346 this.dialog = true;
348 }, 347 },
349 profile(item) { 348 profile(item) {
350 this.editedIndex = this.desserts.indexOf(item); 349 this.editedIndex = this.desserts.indexOf(item);
351 this.editedItem = Object.assign({}, item); 350 this.editedItem = Object.assign({}, item);
352 this.dialog1 = true; 351 this.dialog1 = true;
353 }, 352 },
354 deleteItem(item) { 353 deleteItem(item) {
355 let deleteStudent = { 354 let deleteStudent = {
356 classId: item._id 355 classId: item._id
357 }; 356 };
358 http() 357 http()
359 .delete( 358 .delete(
360 "/deleteClass", 359 "/deleteClass",
361 confirm("Are you sure you want to delete this?") && { 360 confirm("Are you sure you want to delete this?") && {
362 params: deleteStudent 361 params: deleteStudent
363 } 362 }
364 ) 363 )
365 .then(response => { 364 .then(response => {
366 // console.log("deleteUers",deleteStudent) 365 // console.log("deleteUers",deleteStudent)
367 if ((this.snackbar = true)) { 366 if ((this.snackbar = true)) {
368 this.text = "Successfully delete Existing User"; 367 this.text = "Successfully delete Existing User";
369 } 368 }
370 this.getClassList(); 369 this.getClassList();
371 }) 370 })
372 .catch(error => { 371 .catch(error => {
373 // console.log(error); 372 // console.log(error);
374 }); 373 });
375 }, 374 },
376 activeTab(type) { 375 activeTab(type) {
377 switch (type) { 376 switch (type) {
378 case "existing": 377 case "existing":
379 this.newActive = false; 378 this.newActive = false;
380 this.isActive = true; 379 this.isActive = true;
381 break; 380 break;
382 381
383 default: 382 default:
384 this.newActive = true; 383 this.newActive = true;
385 this.isActive = false; 384 this.isActive = false;
386 break; 385 break;
387 } 386 }
388 }, 387 },
389 close() { 388 close() {
390 this.dialog = false; 389 this.dialog = false;
391 setTimeout(() => { 390 setTimeout(() => {
392 this.editedItem = Object.assign({}, this.defaultItem); 391 this.editedItem = Object.assign({}, this.defaultItem);
393 this.editedIndex = -1; 392 this.editedIndex = -1;
394 }, 300); 393 }, 300);
395 }, 394 },
396 close1() { 395 close1() {
397 this.dialog1 = false; 396 this.dialog1 = false;
398 }, 397 },
399 submit() { 398 submit() {
400 if (this.$refs.form.validate()) { 399 if (this.$refs.form.validate()) {
401 let addClass = { 400 let addClass = {
402 classNum: this.addclasses.classNum 401 classNum: this.addclasses.classNum
403 }; 402 };
404 console.log(addClass); 403 console.log(addClass);
405 http() 404 http()
406 .post("/createClass", addClass) 405 .post("/createClass", addClass)
407 .then(response => { 406 .then(response => {
408 this.getClassList(); 407 this.getClassList();
409 if ((this.snackbar = true)) { 408 if ((this.snackbar = true)) {
410 this.text = "New user added successfully"; 409 this.text = "New user added successfully";
411 } 410 }
412 411
413 this.clear(); 412 this.clear();
414 }) 413 })
415 .catch(error => { 414 .catch(error => {
416 // console.log(error); 415 // console.log(error);
417 if ((this.snackbar = true)) { 416 if ((this.snackbar = true)) {
418 this.text = error.response.data.message; 417 this.text = error.response.data.message;
419 } 418 }
420 }); 419 });
421 } 420 }
422 }, 421 },
423 mail() {}, 422 mail() {},
424 download() {}, 423 download() {},
425 clear() { 424 clear() {
426 this.$refs.form.reset(); 425 this.$refs.form.reset();
427 }, 426 },
428 save() { 427 save() {
429 let editClass = { 428 let editClass = {
430 classId: this.editedItem._id, 429 classId: this.editedItem._id,
431 classNum: this.editedItem.classNum 430 classNum: this.editedItem.classNum
432 }; 431 };
433 http() 432 http()
434 .put("/updateClass", editClass) 433 .put("/updateClass", editClass)
435 .then(response => { 434 .then(response => {
436 console.log("editClass", editClass); 435 console.log("editClass", editClass);
437 if ((this.snackbar = true)) { 436 if ((this.snackbar = true)) {
438 this.text = "Successfully Edit Existing User"; 437 this.text = "Successfully Edit Existing User";
439 } 438 }
440 this.getClassList(); 439 this.getClassList();
441 }) 440 })
442 .catch(error => { 441 .catch(error => {
443 // console.log(error); 442 // console.log(error);
444 }); 443 });
445 this.close(); 444 this.close();
446 }, 445 },
447 handleDrawerToggle() { 446 handleDrawerToggle() {
448 window.getApp.$emit("APP_DRAWER_TOGGLED"); 447 window.getApp.$emit("APP_DRAWER_TOGGLED");
449 }, 448 },
450 handleFullScreen() { 449 handleFullScreen() {
451 Util.toggleFullScreen(); 450 Util.toggleFullScreen();
452 } 451 }
453 }, 452 },
454 mounted() { 453 mounted() {
455 this.getClassList(); 454 this.getClassList();
456 // console.log("Id",this.$store.state.id) 455 // console.log("Id",this.$store.state.id)
457 // console.log("token",this.$store.state.token) 456 // console.log("token",this.$store.state.token)
458 }, 457 },
459 computed: { 458 computed: {
460 toolbarColor() { 459 toolbarColor() {
461 return this.$vuetify.options.extra.mainNav; 460 return this.$vuetify.options.extra.mainNav;
462 } 461 }
463 } 462 }
464 }; 463 };
465 </script> 464 </script>
466 <style scoped> 465 <style scoped>
467 .v-tabs__div { 466 .v-tabs__div {
468 text-transform: none; 467 text-transform: none;
469 } 468 }
470 .v-input__prepend-outer { 469 .v-input__prepend-outer {
471 margin-right: 0px !important; 470 margin-right: 0px !important;
472 } 471 }
473 .v-card__actions .v-btn { 472 .v-card__actions .v-btn {
474 margin: 0 15px; 473 margin: 0 15px;
475 min-width: 120px; 474 min-width: 120px;
476 } 475 }
477 .primary { 476 .primary {
478 background-color: #aaa !important; 477 background-color: #aaa !important;
479 border-color: #aaa !important; 478 border-color: #aaa !important;
480 } 479 }
481 h4 { 480 h4 {
482 background-repeat: no-repeat; 481 background-repeat: no-repeat;
483 padding: 8px; 482 padding: 8px;
484 margin: auto; 483 margin: auto;
485 font-size: 25px; 484 font-size: 25px;
486 } 485 }
487 #name { 486 #name {
488 position: absolute; 487 position: absolute;
489 left: 100px; 488 left: 100px;
490 top: 17px; 489 top: 17px;
491 } 490 }
492 #icon { 491 #icon {
493 position: absolute; 492 position: absolute;
494 right: 8px; 493 right: 8px;
495 top: 8px; 494 top: 8px;
496 } 495 }
497 #m { 496 #m {
498 position: relative; 497 position: relative;
499 left: 135px; 498 left: 135px;
500 top: -15px; 499 top: -15px;
501 } 500 }
502 #G { 501 #G {
503 position: absolute; 502 position: absolute;
504 top: 38px; 503 top: 38px;
505 color: white; 504 color: white;
506 } 505 }
507 #bt { 506 #bt {
508 position: relative; 507 position: relative;
509 top: -20px; 508 top: -20px;
510 left: 115px; 509 left: 115px;
511 } 510 }
512 #e { 511 #e {
513 position: relative; 512 position: relative;
514 top: 5px; 513 top: 5px;
515 right: -30px; 514 right: -30px;
516 height: 17px; 515 height: 17px;
517 cursor: pointer; 516 cursor: pointer;
518 } 517 }
519 #d { 518 #d {
520 position: relative; 519 position: relative;
521 top: 5px; 520 top: 5px;
522 right: -70px; 521 right: -70px;
523 height: 17px; 522 height: 17px;
524 cursor: pointer; 523 cursor: pointer;
525 } 524 }
526 #td { 525 #td {
527 border: 1px solid #dddddd; 526 border: 1px solid #dddddd;
528 text-align: left; 527 text-align: left;
529 padding: 8px; 528 padding: 8px;
530 } 529 }
531 #dialog { 530 #dialog {
532 height: 550px; 531 height: 550px;
533 } 532 }
534 .active { 533 .active {
535 background-color: black; 534 background-color: black;
536 color: white !important; 535 color: white !important;
537 } 536 }
538 .activebtn { 537 .activebtn {
539 color: black !important; 538 color: black !important;
540 } 539 }
541 #flex { 540 #flex {
542 height: 300px; 541 height: 300px;
543 } 542 }
544 .top { 543 .top {
545 margin-top: 100px; 544 margin-top: 100px;
546 } 545 }
547 .v-tabs__item a { 546 .v-tabs__item a {
548 font-size: 16px !important; 547 font-size: 16px !important;
549 } 548 }
550 @media screen and (max-width: 769px) { 549 @media screen and (max-width: 769px) {
551 .top { 550 .top {
552 margin-top: 0 !important; 551 margin-top: 0 !important;
553 } 552 }
554 .userSearch .v-icon { 553 .userSearch .v-icon {
555 font-size: 20px !important; 554 font-size: 20px !important;
556 margin-left: 20px; 555 margin-left: 20px;
557 } 556 }
558 } 557 }
559 @media screen and (max-width: 380px) { 558 @media screen and (max-width: 380px) {
560 .pl-3 { 559 .pl-3 {
561 padding-left: 0px !important; 560 padding-left: 0px !important;
562 } 561 }
563 .right { 562 .right {
564 float: none !important; 563 float: none !important;
565 } 564 }
566 .subheading { 565 .subheading {
567 font-size: 14px !important; 566 font-size: 14px !important;
568 } 567 }
569 .v-card__actions .v-btn { 568 .v-card__actions .v-btn {
570 margin: 0 0px; 569 margin: 0 0px;
571 min-width: 100px; 570 min-width: 100px;
572 } 571 }
573 .subheading { 572 .subheading {
574 font-size: 12px !important; 573 font-size: 12px !important;
575 } 574 }
576 h5 { 575 h5 {
577 font-size: 13px; 576 font-size: 13px;
578 } 577 }
579 } 578 }
580 .v-icon { 579 .v-icon {
581 font-size: 30px; 580 font-size: 30px;
582 } 581 }
583 @media screen and (min-width: 1270px) { 582 @media screen and (min-width: 1270px) {
584 .hide { 583 .hide {
585 display: none; 584 display: none;
586 } 585 }
587 } 586 }
588 @media screen and (max-width: 420px) { 587 @media screen and (max-width: 420px) {
589 .userSearch .v-text-field .v-label { 588 .userSearch .v-text-field .v-label {
590 line-height: 24px !important; 589 line-height: 24px !important;
591 } 590 }
592 .userSearch .v-label { 591 .userSearch .v-label {
593 font-size: 13px !important; 592 font-size: 13px !important;
594 } 593 }
595 .v-list__tile { 594 .v-list__tile {
596 font-size: 14px; 595 font-size: 14px;
597 padding: 0 10px; 596 padding: 0 10px;
598 } 597 }
599 .name { 598 .name {
600 font-size: 15px; 599 font-size: 15px;
601 } 600 }
602 } 601 }
src/pages/Event/event.vue
Diff comments   View file @2b0e316
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-toolbar class="fixcolors" fixed app> 3 <v-toolbar class="fixcolors" fixed app>
4 <v-toolbar-title class="ml-0 pl-3"> 4 <v-toolbar-title class="ml-0 pl-3">
5 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon> 5 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon>
6 </v-toolbar-title> 6 </v-toolbar-title>
7
7 <!-- ****** SEARCH ALL EXISTING EVENTS ****** --> 8 <!-- ****** SEARCH ALL EXISTING EVENTS ****** -->
9
8 <v-flex xs7 sm3 class="userSearch"> 10 <v-flex xs7 sm3 class="userSearch">
9 <v-text-field 11 <v-text-field
10 flat 12 flat
11 append-icon="search" 13 append-icon="search"
12 label="Find your Events" 14 label="Find your Events"
13 v-model="search" 15 v-model="search"
14 color="white" 16 color="white"
15 dark 17 dark
16 ></v-text-field> 18 ></v-text-field>
17 </v-flex> 19 </v-flex>
18 <v-spacer></v-spacer> 20 <v-spacer></v-spacer>
19 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition"> 21 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
20 <v-btn icon large flat slot="activator"> 22 <v-btn icon large flat slot="activator">
21 <v-avatar size="40px"> 23 <v-avatar size="40px">
22 <img src="/static/icon/user.png"> 24 <img src="/static/icon/user.png">
23 </v-avatar> 25 </v-avatar>
24 </v-btn> 26 </v-btn>
25 <v-list class="pa-0"> 27 <v-list class="pa-0">
26 <v-list-tile 28 <v-list-tile
27 v-for="(item,index) in items" 29 v-for="(item,index) in items"
28 :to="!item.href ? { name: item.name } : null" 30 :to="!item.href ? { name: item.name } : null"
29 :href="item.href" 31 :href="item.href"
30 @click="item.click" 32 @click="item.click"
31 ripple="ripple" 33 ripple="ripple"
32 :disabled="item.disabled" 34 :disabled="item.disabled"
33 :target="item.target" 35 :target="item.target"
34 rel="noopener" 36 rel="noopener"
35 :key="index" 37 :key="index"
36 > 38 >
37 <v-list-tile-action v-if="item.icon"> 39 <v-list-tile-action v-if="item.icon">
38 <v-icon>{{ item.icon }}</v-icon> 40 <v-icon>{{ item.icon }}</v-icon>
39 </v-list-tile-action> 41 </v-list-tile-action>
40 <v-list-tile-content> 42 <v-list-tile-content>
41 <v-list-tile-title>{{ item.title }}</v-list-tile-title> 43 <v-list-tile-title>{{ item.title }}</v-list-tile-title>
42 </v-list-tile-content> 44 </v-list-tile-content>
43 </v-list-tile> 45 </v-list-tile>
44 </v-list> 46 </v-list>
45 </v-menu> 47 </v-menu>
46 </v-toolbar> 48 </v-toolbar>
47 <v-tabs grow slider-color="black"> 49 <v-tabs grow slider-color="black">
48 <v-tab 50 <v-tab
49 ripple 51 ripple
50 @click="activeTab('existing')" 52 @click="activeTab('existing')"
51 v-bind:class="{ active: isActive }" 53 v-bind:class="{ active: isActive }"
52 id="tab" 54 id="tab"
53 class="subheading" 55 class="subheading"
54 >Existing Event</v-tab> 56 >Existing Event</v-tab>
55 <v-tab 57 <v-tab
56 ripple 58 ripple
57 @click="activeTab('new')" 59 @click="activeTab('new')"
58 v-bind:class="{ active: newActive }" 60 v-bind:class="{ active: newActive }"
59 id="tab1" 61 id="tab1"
60 User 62 User
61 class="subheading" 63 class="subheading"
62 >Add New Event</v-tab> 64 >Add New Event</v-tab>
63 65
64 <!-- ****** EDITS EVENTS DETAILS ****** --> 66 <!-- ****** EDITS EVENTS DETAILS ****** -->
65 67
66 <v-tab-item> 68 <v-tab-item>
67 <v-snackbar 69 <v-snackbar
68 :timeout="timeout" 70 :timeout="timeout"
69 :top="y === 'top'" 71 :top="y === 'top'"
70 :right="x === 'right'" 72 :right="x === 'right'"
71 :vertical="mode === 'vertical'" 73 :vertical="mode === 'vertical'"
72 v-model="snackbar" 74 v-model="snackbar"
73 color="success" 75 color="success"
74 >{{ text }}</v-snackbar> 76 >{{ text }}</v-snackbar>
75 <v-dialog v-model="dialog" max-width="600px"> 77 <v-dialog v-model="dialog" max-width="600px">
76 <v-flex xs12 sm12 class> 78 <v-flex xs12 sm12 class>
77 <v-toolbar color="white"> 79 <v-toolbar color="white">
78 <v-spacer></v-spacer> 80 <v-spacer></v-spacer>
79 <v-toolbar-title>Edit Event</v-toolbar-title> 81 <v-toolbar-title>Edit Event</v-toolbar-title>
80 <v-spacer></v-spacer> 82 <v-spacer></v-spacer>
81 </v-toolbar> 83 </v-toolbar>
82 <v-card flat> 84 <v-card flat>
83 <v-form ref="form"> 85 <v-form ref="form">
84 <v-container fluid> 86 <v-container fluid>
85 <v-layout> 87 <v-layout>
86 <v-flex 88 <v-flex
87 xs12 89 xs12
88 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4" 90 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4"
89 > 91 >
90 <v-avatar size="100px"> 92 <v-avatar size="100px">
91 <img src="/static/icon/user.png" v-if="!imageUrl"> 93 <!-- <img src="/static/icon/user.png" v-if="!imageUrl"> -->
92 </v-avatar> 94 </v-avatar>
93 <input 95 <input
94 type="file" 96 type="file"
95 style="display: none" 97 style="display: none"
96 ref="image" 98 ref="image"
97 accept="image/*" 99 accept="image/*"
98 @change="onFilePicked" 100 @change="onFilePicked"
101
99 > 102 >
100 <img 103 <img
101 :src="imageData.imageUrl" 104 src="https://kencil.sgp1.digitaloceanspaces.com/1554276999775"
102 height="150" 105 height="150"
103 v-if="imageUrl"
104 style="border-radius:50%; width:200px" 106 style="border-radius:50%; width:200px"
105 > 107 >
106 </v-flex> 108 </v-flex>
107 </v-layout> 109 </v-layout>
108 <v-layout> 110 <v-layout>
109 <!-- <v-flex xs12 sm6> --> 111 <!-- <v-flex xs12 sm6> -->
110 <v-layout> 112 <v-layout>
111 <v-flex xs4 class="pt-4 subheading"> 113 <v-flex xs4 class="pt-4 subheading">
112 <label class="right">Title:</label> 114 <label class="right">Title:</label>
113 </v-flex> 115 </v-flex>
114 <v-flex xs6 class="ml-3"> 116 <v-flex xs6 class="ml-3">
115 <v-text-field 117 <v-text-field
116 v-model="editedItem.title" 118 v-model="editedItem.title"
117 placeholder="fill your Title" 119 placeholder="fill your Title"
118 name="name" 120 name="name"
119 type="text" 121 type="text"
120 required 122 required
121 ></v-text-field> 123 ></v-text-field>
122 </v-flex> 124 </v-flex>
123 </v-layout> 125 </v-layout>
124 <!-- </v-flex> --> 126 <!-- </v-flex> -->
125 <!-- <v-flex xs12 sm6> --> 127 <!-- <v-flex xs12 sm6> -->
126 <v-layout> 128 <v-layout>
127 <v-flex xs4 class="pt-4 subheading"> 129 <v-flex xs4 class="pt-4 subheading">
128 <label class="right">Description:</label> 130 <label class="right">Description:</label>
129 </v-flex> 131 </v-flex>
130 <v-flex xs6 class="ml-3"> 132 <v-flex xs6 class="ml-3">
131 <v-text-field 133 <v-text-field
132 placeholder="fill your Description" 134 placeholder="fill your Description"
133 v-model="editedItem.description" 135 v-model="editedItem.description"
134 type="text" 136 type="text"
135 name="email" 137 name="email"
136 required 138 required
137 ></v-text-field> 139 ></v-text-field>
138 </v-flex> 140 </v-flex>
139 </v-layout> 141 </v-layout>
140 <v-flex xs12 sm9 offset-sm2> 142 <v-flex xs12 sm9 offset-sm2>
141 <v-card-actions> 143 <v-card-actions>
142 <v-btn round dark @click.native="close">Cancel</v-btn> 144 <v-btn round dark @click.native="close">Cancel</v-btn>
143 <v-spacer></v-spacer> 145 <v-spacer></v-spacer>
144 <v-btn round dark @click="save">Save</v-btn> 146 <v-btn round dark @click="save">Save</v-btn>
145 </v-card-actions> 147 </v-card-actions>
146 </v-flex> 148 </v-flex>
147 </v-layout> 149 </v-layout>
148 </v-container> 150 </v-container>
149 </v-form> 151 </v-form>
150 </v-card> 152 </v-card>
151 </v-flex> 153 </v-flex>
152 </v-dialog> 154 </v-dialog>
153 155
154 <!-- ****** VIEW PROFIL EVENTS ****** --> 156 <!-- ****** VIEW PROFIL EVENTS ****** -->
155 157
156 <v-dialog v-model="dialog1" max-width="600px"> 158 <v-dialog v-model="dialog1" max-width="600px">
157 <v-toolbar color="white"> 159 <v-toolbar color="white">
158 <v-spacer></v-spacer> 160 <v-spacer></v-spacer>
159 <v-toolbar-title>Profile</v-toolbar-title> 161 <v-toolbar-title>Profile</v-toolbar-title>
160 <v-spacer></v-spacer> 162 <v-spacer></v-spacer>
161 <v-icon @click="close1">close</v-icon> 163 <v-icon @click="close1">close</v-icon>
162 </v-toolbar> 164 </v-toolbar>
163 <v-card> 165 <v-card>
164 <v-flex align-center justify-center layout text-xs-center> 166 <v-flex align-center justify-center layout text-xs-center>
165 <v-avatar size="50px" style="position:absolute; top:20px;"> 167 <v-avatar size="50px" style="position:absolute; top:20px;">
166 <img src="/static/icon/user.png"> 168 <img src="/static/icon/user.png">
167 </v-avatar> 169 </v-avatar>
168 </v-flex> 170 </v-flex>
169 <v-card-text> 171 <v-card-text>
170 <v-container grid-list-md> 172 <v-container grid-list-md>
171 <v-layout wrap> 173 <v-layout wrap>
172 <v-flex> 174 <v-flex>
173 <br> 175 <br>
174 <br> 176 <br>
175 <v-layout> 177 <v-layout>
176 <v-flex xs5 sm6> 178 <v-flex xs5 sm6>
177 <h5 class="right my-1">Title:</h5> 179 <h5 class="right my-1">Title:</h5>
178 </v-flex> 180 </v-flex>
179 <v-flex sm6 xs8> 181 <v-flex sm6 xs8>
180 <h5 class="my-1">{{ editedItem.title }}</h5> 182 <h5 class="my-1">{{ editedItem.title }}</h5>
181 </v-flex> 183 </v-flex>
182 </v-layout> 184 </v-layout>
183 <v-layout> 185 <v-layout>
184 <v-flex xs5 sm6> 186 <v-flex xs5 sm6>
185 <h5 class="right my-1">Description:</h5> 187 <h5 class="right my-1">Description:</h5>
186 </v-flex> 188 </v-flex>
187 <v-flex sm6 xs8> 189 <v-flex sm6 xs8>
188 <h5 class="my-1">{{ editedItem.description }}</h5> 190 <h5 class="my-1">{{ editedItem.description }}</h5>
189 </v-flex> 191 </v-flex>
190 </v-layout> 192 </v-layout>
191 </v-flex> 193 </v-flex>
192 </v-layout> 194 </v-layout>
193 </v-container> 195 </v-container>
194 </v-card-text> 196 </v-card-text>
195 </v-card> 197 </v-card>
196 </v-dialog> 198 </v-dialog>
197 199
198 <v-snackbar 200 <v-snackbar
199 :timeout="timeout" 201 :timeout="timeout"
200 :top="y === 'top'" 202 :top="y === 'top'"
201 :right="x === 'right'" 203 :right="x === 'right'"
202 :vertical="mode === 'vertical'" 204 :vertical="mode === 'vertical'"
203 v-model="snackbar" 205 v-model="snackbar"
204 color="success" 206 color="success"
205 >{{ text }}</v-snackbar> 207 >{{ text }}</v-snackbar>
206 208
207 <!-- ****** EXISTING-USERS EVENTS TABLE ****** --> 209 <!-- ****** EXISTING-USERS EVENTS TABLE ****** -->
210
208 <v-data-table 211 <v-data-table
209 :headers="headers" 212 :headers="headers"
210 :items="desserts" 213 :items="desserts"
211 :pagination.sync="pagination" 214 :pagination.sync="pagination"
212 :search="search" 215 :search="search"
213 > 216 >
214 <template slot="items" slot-scope="props"> 217 <template slot="items" slot-scope="props">
215 <td id="td" class="text-xs-center">{{ props.index}}</td> 218 <td id="td" class="text-xs-center">{{ props.index}}</td>
216 <td id="td" class="text-xs-center">{{ props.item.title}}</td> 219 <td id="td" class="text-xs-center">{{ props.item.title}}</td>
217 <td id="td" class="text-xs-center">{{ props.item.description}}</td> 220 <td id="td" class="text-xs-center">{{ props.item.description}}</td>
218 221
219 <td class="text-xs-center"> 222 <td class="text-xs-center">
220 <span> 223 <span>
221 <img 224 <img
222 style="cursor:pointer; width:25px; height:18px; " 225 style="cursor:pointer; width:25px; height:18px; "
223 class="mr-5" 226 class="mr-5"
224 @click="profile(props.item)" 227 @click="profile(props.item)"
225 src="/static/icon/eye1.png" 228 src="/static/icon/eye1.png"
226 > 229 >
227 <img 230 <img
228 style="cursor:pointer; width:20px; height:18px; " 231 style="cursor:pointer; width:20px; height:18px; "
229 class="mr-5" 232 class="mr-5"
230 @click="editItem(props.item)" 233 @click="editItem(props.item)"
231 src="/static/icon/edit1.png" 234 src="/static/icon/edit1.png"
232 > 235 >
233 <img 236 <img
234 style="cursor:pointer; height:20px; " 237 style="cursor:pointer; height:20px; "
235 class="mr-5" 238 class="mr-5"
236 @click="deleteItem(props.item)" 239 @click="deleteItem(props.item)"
237 src="/static/icon/delete1.png" 240 src="/static/icon/delete1.png"
238 > 241 >
239 </span> 242 </span>
240 </td> 243 </td>
241 </template> 244 </template>
242 <v-alert 245 <v-alert
243 slot="no-results" 246 slot="no-results"
244 :value="true" 247 :value="true"
245 color="error" 248 color="error"
246 icon="warning" 249 icon="warning"
247 >Your search for "{{ search }}" found no results.</v-alert> 250 >Your search for "{{ search }}" found no results.</v-alert>
248 </v-data-table> 251 </v-data-table>
249 </v-tab-item> 252 </v-tab-item>
250 253
251 <!-- ****** ADD MULTIPLE EVENTS ****** --> 254 <!-- ****** ADD MULTIPLE EVENTS ****** -->
252 255
253 <v-tab-item> 256 <v-tab-item>
254 <v-container> 257 <v-container>
255 <v-snackbar 258 <v-snackbar
256 :timeout="timeout" 259 :timeout="timeout"
257 :top="y === 'top'" 260 :top="y === 'top'"
258 :right="x === 'right'" 261 :right="x === 'right'"
259 :vertical="mode === 'vertical'" 262 :vertical="mode === 'vertical'"
260 v-model="snackbar" 263 v-model="snackbar"
261 color="success" 264 color="success"
262 >{{ text }}</v-snackbar> 265 >{{ text }}</v-snackbar>
263 <v-flex xs12 sm8 offset-sm2 class="top"> 266 <v-flex xs12 sm8 offset-sm2 class="top">
264 <v-card flat> 267 <v-card flat>
265 <v-container fluid fill-height> 268 <v-container fluid fill-height>
266 <v-layout align-center> 269 <v-layout align-center>
267 <v-flex xs12> 270 <v-flex xs12>
268 <v-form ref="form" v-model="valid" lazy-validation> 271 <v-form ref="form" v-model="valid" lazy-validation>
269 <v-layout> 272 <v-layout>
270 <v-flex 273 <v-flex
271 xs12 274 xs12
272 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" 275 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
273 > 276 >
274 <v-avatar size="100px"> 277 <v-avatar size="100px">
275 <img src="/static/icon/user.png" v-if="!imageUrl"> 278 <img src="/static/icon/user.png" v-if="!imageUrl">
276 </v-avatar> 279 </v-avatar>
277 <input 280 <input
278 type="file" 281 type="file"
279 style="display: none" 282 style="display: none"
280 ref="image" 283 ref="image"
281 accept="image/*" 284 accept="image/*"
282 @change="onFilePicked" 285 @change="onFilePicked"
283 > 286 >
284 <img 287 <img
285 :src="imageData.imageUrl" 288 :src="imageUrl"
286 height="150" 289 height="150"
287 v-if="imageUrl" 290 v-if="imageUrl"
288 style="border-radius:50%; width:200px" 291 style="border-radius:50%; width:200px"
289 > 292 >
290 </v-flex> 293 </v-flex>
291 </v-layout> 294 </v-layout>
292 <v-layout> 295 <v-layout>
293 <v-flex xs4 class="pt-4 subheading"> 296 <v-flex xs4 class="pt-4 subheading">
294 <label class="right">Title:</label> 297 <label class="right">Title:</label>
295 </v-flex> 298 </v-flex>
296 <v-flex xs6 class="ml-3"> 299 <v-flex xs6 class="ml-3">
297 <v-text-field 300 <v-text-field
298 v-model="addEvents.title" 301 v-model="addEvents.title"
299 placeholder="fill your Title" 302 placeholder="fill your Title"
300 name="name" 303 name="name"
301 type="text" 304 type="text"
302 :rules="titleRules" 305 :rules="titleRules"
303 required 306 required
304 ></v-text-field> 307 ></v-text-field>
305 </v-flex> 308 </v-flex>
306 </v-layout> 309 </v-layout>
307 <v-layout> 310 <v-layout>
308 <v-flex xs4 class="pt-4 subheading"> 311 <v-flex xs4 class="pt-4 subheading">
309 <label class="right">Description:</label> 312 <label class="right">Description:</label>
310 </v-flex> 313 </v-flex>
311 <v-flex xs6 class="ml-3"> 314 <v-flex xs6 class="ml-3">
312 <v-text-field 315 <v-text-field
313 v-model="addEvents.description" 316 v-model="addEvents.description"
314 placeholder="fill your Description" 317 placeholder="fill your Description"
315 name="name" 318 name="name"
316 type="text" 319 type="text"
317 :rules="descriptionRules" 320 :rules="descriptionRules"
318 required 321 required
319 ></v-text-field> 322 ></v-text-field>
320 </v-flex> 323 </v-flex>
321 </v-layout> 324 </v-layout>
322 <v-layout> 325 <v-layout>
326 <v-flex xs4 class="pt-4 subheading">
327 <label class="right">Uplaod Image:</label>
328 </v-flex>
329 <v-flex xs6 class="ml-3">
330 <v-text-field
331 label="Select Image"
332 @click="pickFile"
333 v-model="imageName"
334 append-icon="attach_file"
335 ></v-text-field>
336 </v-flex>
337 </v-layout>
338 <v-layout>
323 <v-flex xs12 sm9 offset-sm2> 339 <v-flex xs12 sm9 offset-sm2>
324 <v-card-actions> 340 <v-card-actions>
325 <v-btn @click="clear" round dark>clear</v-btn> 341 <v-btn @click="clear" round dark>clear</v-btn>
326 <v-spacer></v-spacer> 342 <v-spacer></v-spacer>
327 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 343 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
328 </v-card-actions> 344 </v-card-actions>
329 </v-flex> 345 </v-flex>
330 </v-layout> 346 </v-layout>
331 </v-form> 347 </v-form>
332 </v-flex> 348 </v-flex>
333 </v-layout> 349 </v-layout>
334 </v-container> 350 </v-container>
335 </v-card> 351 </v-card>
336 </v-flex> 352 </v-flex>
337 </v-container> 353 </v-container>
338 </v-tab-item> 354 </v-tab-item>
339 </v-tabs> 355 </v-tabs>
340 <div class="loader" v-if="showLoader"> 356 <div class="loader" v-if="showLoader">
341 <v-progress-circular indeterminate color="white"></v-progress-circular> 357 <v-progress-circular indeterminate color="white"></v-progress-circular>
342 </div> 358 </div>
343 </v-app> 359 </v-app>
344 </template> 360 </template>
345 361
346 <script> 362 <script>
347 import http from "@/Services/http.js"; 363 import http from "@/Services/http.js";
348 import Util from "@/util"; 364 import Util from "@/util";
349 365
350 export default { 366 export default {
351 data: () => ({ 367 data: () => ({
352 snackbar: false, 368 snackbar: false,
353 y: "top", 369 y: "top",
354 x: "right", 370 x: "right",
355 mode: "", 371 mode: "",
356 timeout: 3000, 372 timeout: 3000,
357 text: "", 373 text: "",
358 showLoader: false, 374 showLoader: false,
359 loading: false, 375 loading: false,
360 date: null, 376 date: null,
361 search: "", 377 search: "",
362 dialog: false, 378 dialog: false,
363 dialog1: false, 379 dialog1: false,
364 valid: true, 380 valid: true,
365 isActive: true, 381 isActive: true,
366 newActive: false, 382 newActive: false,
367 addclass: [], 383 addclass: [],
368 addSection: [], 384 addSection: [],
369 gender: ["Male", "Female"], 385 gender: ["Male", "Female"],
370 AddUsercredentials: {}, 386 AddUsercredentials: {},
371 pagination: { 387 pagination: {
372 rowsPerPage: 15 388 rowsPerPage: 19
373 }, 389 },
374 imageData: {},
375 imageName: "", 390 imageName: "",
376 imageUrl: "", 391 imageUrl: "",
377 imageFile: "", 392 imageFile: "",
393 upload: '',
378 titleRules: [v => !!v || " Title is required"], 394 titleRules: [v => !!v || " Title is required"],
379 descriptionRules: [v => !!v || " Description is required"], 395 descriptionRules: [v => !!v || " Description is required"],
380 headers: [ 396 headers: [
381 { 397 {
382 text: "No", 398 text: "No",
383 align: "center", 399 align: "center",
384 sortable: false, 400 sortable: false,
385 value: "No" 401 value: "No"
386 }, 402 },
387 { text: "Title", value: "title", sortable: false, align: "center" }, 403 { text: "Title", value: "title", sortable: false, align: "center" },
388 { 404 {
389 text: "Description", 405 text: "Description",
390 value: "description", 406 value: "description",
391 sortable: false, 407 sortable: false,
392 align: "center" 408 align: "center"
393 }, 409 },
394 { text: "Action", value: "", sortable: false, align: "center" } 410 { text: "Action", value: "", sortable: false, align: "center" }
395 ], 411 ],
396 desserts: [], 412 desserts: [],
397 editedIndex: -1, 413 editedIndex: -1,
398 addEvents: { 414 addEvents: {
399 title: "", 415 title: "",
400 description: "" 416 description: ""
401 }, 417 },
402 editedItem: { 418 editedItem: {
403 title: "", 419 title: "",
404 description: "" 420 description: ""
405 }, 421 },
406 defaultItem: { 422 defaultItem: {
407 title: "", 423 title: "",
408 description: "" 424 description: ""
409 }, 425 },
410 userName: "", 426 userName: "",
411 items: [ 427 items: [
412 { 428 {
413 href: "/changepassword", 429 href: "/changepassword",
414 title: "Change Password", 430 title: "Change Password",
415 click: e => { 431 click: e => {
416 console.log(e); 432 console.log(e);
417 } 433 }
418 }, 434 },
419 { 435 {
420 href: "#", 436 href: "#",
421 title: "Logout", 437 title: "Logout",
422 click: e => { 438 click: e => {
423 window.getApp.$emit("APP_LOGOUT"); 439 window.getApp.$emit("APP_LOGOUT");
424 } 440 }
425 } 441 }
426 ] 442 ]
427 }), 443 }),
428 methods: { 444 methods: {
429 pickFile() { 445 pickFile() {
430 this.$refs.image.click(); 446 this.$refs.image.click();
431 }, 447 },
432 448
433 onFilePicked(e) { 449 onFilePicked(e) {
434 // console.log(e) 450 // console.log(e)
435 const files = e.target.files; 451 const files = e.target.files;
436 this.imageData.upload = e.target.files[0]; 452 this.upload = e.target.files[0];
453 console.log("thisupload==>", this.upload)
437 if (files[0] !== undefined) { 454 if (files[0] !== undefined) {
438 this.imageName = files[0].name; 455 this.imageName = files[0].name;
439 if (this.imageName.lastIndexOf(".") <= 0) { 456 if (this.imageName.lastIndexOf(".") <= 0) {
440 return; 457 return;
441 } 458 }
442 const fr = new FileReader(); 459 const fr = new FileReader();
443 fr.readAsDataURL(files[0]); 460 fr.readAsDataURL(files[0]);
444 fr.addEventListener("load", () => { 461 fr.addEventListener("load", () => {
445 this.imageUrl = fr.result; 462 this.imageUrl = fr.result;
446 this.imageFile = files[0]; // this is an image file that can be sent to server... 463 this.imageFile = files[0]; // this is an image file that can be sent to server...
447 this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 464 // this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
448 console.log("upload=======>", this.imageData.imageUrl); 465 console.log("upload=======>", this.imageUrl);
449 console.log("imageFile", this.imageFile); 466 console.log("imageFile", this.imageFile);
450 }); 467 });
451 } else { 468 } else {
452 this.imageName = ""; 469 this.imageName = "";
453 this.imageFile = ""; 470 this.imageFile = "";
454 this.imageUrl = ""; 471 this.imageUrl = "";
455 } 472 }
456 }, 473 },
457 getEventList() { 474 getEventList() {
458 this.showLoader = true; 475 this.showLoader = true;
459 var token = this.$store.state.token; 476 var token = this.$store.state.token;
460 http() 477 http()
461 .get("/getEventsList", { 478 .get("/getEventsList", {
462 headers: { Authorization: "Bearer " + token } 479 headers: { Authorization: "Bearer " + token }
463 }) 480 })
464 .then(response => { 481 .then(response => {
465 this.desserts = response.data.data; 482 this.desserts = response.data.data;
466 this.showLoader = false; 483 this.showLoader = false;
467 // console.log("getEventList=====>",this.desserts) 484 // console.log("getEventList=====>",this.desserts)
468 }) 485 })
469 .catch(err => { 486 .catch(err => {
470 this.showLoader = false; 487 this.showLoader = false;
471 // console.log("err====>", err); 488 // console.log("err====>", err);
472 this.$router.replace({ path: "/" }); 489 this.$router.replace({ path: "/" });
473 }); 490 });
474 }, 491 },
475 editItem(item) { 492 editItem(item) {
476 this.editedIndex = this.desserts.indexOf(item); 493 this.editedIndex = this.desserts.indexOf(item);
477 this.editedItem = Object.assign({}, item); 494 this.editedItem = Object.assign({}, item);
478 this.dialog = true; 495 this.dialog = true;
479 }, 496 },
480 profile(item) { 497 profile(item) {
481 this.editedIndex = this.desserts.indexOf(item); 498 this.editedIndex = this.desserts.indexOf(item);
482 this.editedItem = Object.assign({}, item); 499 this.editedItem = Object.assign({}, item);
483 this.dialog1 = true; 500 this.dialog1 = true;
484 }, 501 },
485 deleteItem(item) { 502 deleteItem(item) {
486 let deleteEvent = { 503 let deleteEvent = {
487 eventId: item._id 504 eventId: item._id
488 }; 505 };
489 http() 506 http()
490 .delete( 507 .delete(
491 "/deleteEvent", 508 "/deleteEvent",
492 confirm("Are you sure you want to delete this?") && { 509 confirm("Are you sure you want to delete this?") && {
493 params: deleteEvent 510 params: deleteEvent
494 } 511 }
495 ) 512 )
496 .then(response => { 513 .then(response => {
497 // console.log("deleteUers",deleteEvent) 514 // console.log("deleteUers",deleteEvent)
498 if ((this.snackbar = true)) { 515 if ((this.snackbar = true)) {
499 this.text = "Successfully delete Existing User"; 516 this.text = "Successfully delete Existing User";
500 } 517 }
501 this.getEventList(); 518 this.getEventList();
502 }) 519 })
503 .catch(error => { 520 .catch(error => {
504 // console.log(error); 521 // console.log(error);
505 }); 522 });
506 }, 523 },
507 activeTab(type) { 524 activeTab(type) {
508 switch (type) { 525 switch (type) {
509 case "existing": 526 case "existing":
510 this.newActive = false; 527 this.newActive = false;
511 this.isActive = true; 528 this.isActive = true;
512 break; 529 break;
513 530
514 default: 531 default:
515 this.newActive = true; 532 this.newActive = true;
516 this.isActive = false; 533 this.isActive = false;
517 break; 534 break;
518 } 535 }
519 }, 536 },
520 close() { 537 close() {
521 this.dialog = false; 538 this.dialog = false;
522 setTimeout(() => { 539 setTimeout(() => {
523 this.editedItem = Object.assign({}, this.defaultItem); 540 this.editedItem = Object.assign({}, this.defaultItem);
524 this.editedIndex = -1; 541 this.editedIndex = -1;
525 }, 300); 542 }, 300);
526 }, 543 },
527 close1() { 544 close1() {
528 this.dialog1 = false; 545 this.dialog1 = false;
529 }, 546 },
530 submit() { 547 submit() {
531 if (this.$refs.form.validate()) { 548 if (this.$refs.form.validate()) {
532 let imageData = new FormData(); 549 let imageData = new FormData();
533 imageData.append("upload", this.imageFile); 550 imageData.append("upload", this.imageFile);
551 imageData.append("title", this.addEvents.title);
552 imageData.append("description", this.addEvents.description);
534 console.log(imageData); 553 console.log(imageData);
535 let addEvent = { 554 // let addEvent = {
536 title: this.addEvents.title, 555 // title: this.addEvents.title,
537 description: this.addEvents.description 556 // description: this.addEvents.description,
538 }; 557 // imageData
558 // };
539 http() 559 http()
540 .post("/createEvent", addEvent) 560 .post("/createEvent", imageData)
541 .then(response => { 561 .then(response => {
542 // console.log("addEvent=====>",addEvent) 562 console.log("addEvent=====>",imageData)
543 if ((this.snackbar = true)) { 563 if ((this.snackbar = true)) {
544 this.text = "New user added successfully"; 564 this.text = "New user added successfully";
545 } 565 }
546 this.getEventList(); 566 this.getEventList();
547 this.clear(); 567 this.clear();
548 }) 568 })
549 .catch(error => { 569 .catch(error => {
550 // console.log(error); 570 // console.log(error);
551 if ((this.snackbar = true)) { 571 if ((this.snackbar = true)) {
552 this.text = error.response.data.message; 572 this.text = error.response.data.message;
553 } 573 }
554 }); 574 });
575 var form_data = new FormData();
576 for (var key in addEvent) {
577 if (key === 'upload') {
578 form_data.append(key, this.imageFile);
579 }
580 else {
581 form_data.append(key, addEvent[key])
582 }
583 }
555 } 584 }
556 }, 585 },
557 mail() {}, 586 mail() {},
558 download() {}, 587 download() {},
559 clear() { 588 clear() {
560 this.$refs.form.reset(); 589 this.$refs.form.reset();
561 }, 590 },
562 save() { 591 save() {
563 let imageData = new FormData(); 592 let imageData = new FormData();
564 imageData.append("upload", this.imageFile); 593 imageData.append("upload", this.imageFile);
565 console.log(imageData); 594 console.log("imageData",imageData);
566 let editEvent = { 595 let editEvent = {
567 eventId: this.editedItem._id, 596 eventId: this.editedItem._id,
568 title: this.editedItem.title, 597 title: this.editedItem.title,
569 description: this.editedItem.description, 598 description: this.editedItem.description,
570 imageData 599 imageData
571 }; 600 };
572 http() 601 http()
573 .put("/updateEvent", editEvent) 602 .put("/updateEvent", editEvent)
574 .then(response => { 603 .then(response => {
575 // console.log("editEvent",editEvent); 604 // console.log("editEvent",editEvent);
576 if ((this.snackbar = true)) { 605 if ((this.snackbar = true)) {
577 this.text = "Successfully Edit Existing User"; 606 this.text = "Successfully Edit Existing User";
578 } 607 }
579 this.getEventList(); 608 this.getEventList();
580 }) 609 })
581 .catch(error => { 610 .catch(error => {
582 // console.log(error); 611 // console.log(error);
583 }); 612 });
584 this.close(); 613 this.close();
585 }, 614 },
586 handleDrawerToggle() { 615 handleDrawerToggle() {
587 window.getApp.$emit("APP_DRAWER_TOGGLED"); 616 window.getApp.$emit("APP_DRAWER_TOGGLED");
588 }, 617 },
589 handleFullScreen() { 618 handleFullScreen() {
590 Util.toggleFullScreen(); 619 Util.toggleFullScreen();
591 } 620 }
592 }, 621 },
593 mounted() { 622 mounted() {
594 this.getEventList(); 623 this.getEventList();
595 }, 624 },
596 computed: { 625 computed: {
597 toolbarColor() { 626 toolbarColor() {
598 return this.$vuetify.options.extra.mainNav; 627 return this.$vuetify.options.extra.mainNav;
599 } 628 }
600 } 629 }
601 }; 630 };
602 </script> 631 </script>
603 <style scoped> 632 <style scoped>
604 .v-tabs__div { 633 .v-tabs__div {
605 text-transform: none; 634 text-transform: none;
606 } 635 }
607 .v-input__prepend-outer { 636 .v-input__prepend-outer {
608 margin-right: 0px !important; 637 margin-right: 0px !important;
609 } 638 }
610 .v-card__actions .v-btn { 639 .v-card__actions .v-btn {
611 margin: 0 15px; 640 margin: 0 15px;
612 min-width: 120px; 641 min-width: 120px;
613 } 642 }
614 .primary { 643 .primary {
615 background-color: #aaa !important; 644 background-color: #aaa !important;
616 border-color: #aaa !important; 645 border-color: #aaa !important;
617 } 646 }
618 h4 { 647 h4 {
619 background-repeat: no-repeat; 648 background-repeat: no-repeat;
620 padding: 8px; 649 padding: 8px;
621 margin: auto; 650 margin: auto;
622 font-size: 25px; 651 font-size: 25px;
623 } 652 }
624 #name { 653 #name {
625 position: absolute; 654 position: absolute;
626 left: 100px; 655 left: 100px;
627 top: 17px; 656 top: 17px;
628 } 657 }
629 #icon { 658 #icon {
630 position: absolute; 659 position: absolute;
631 right: 8px; 660 right: 8px;
632 top: 8px; 661 top: 8px;
633 } 662 }
634 #m { 663 #m {
635 position: relative; 664 position: relative;
636 left: 135px; 665 left: 135px;
637 top: -15px; 666 top: -15px;
638 } 667 }
639 #G { 668 #G {
640 position: absolute; 669 position: absolute;
641 top: 38px; 670 top: 38px;
642 color: white; 671 color: white;
643 } 672 }
644 #bt { 673 #bt {
645 position: relative; 674 position: relative;
646 top: -20px; 675 top: -20px;
647 left: 115px; 676 left: 115px;
648 } 677 }
649 #e { 678 #e {
650 position: relative; 679 position: relative;
651 top: 5px; 680 top: 5px;
652 right: -30px; 681 right: -30px;
653 height: 17px; 682 height: 17px;
654 cursor: pointer; 683 cursor: pointer;
655 } 684 }
656 #d { 685 #d {
657 position: relative; 686 position: relative;
658 top: 5px; 687 top: 5px;
659 right: -70px; 688 right: -70px;
660 height: 17px; 689 height: 17px;
661 cursor: pointer; 690 cursor: pointer;
662 } 691 }
663 #td { 692 #td {
664 border: 1px solid #dddddd; 693 border: 1px solid #dddddd;
665 text-align: left; 694 text-align: left;
666 padding: 8px; 695 padding: 8px;
667 } 696 }
668 #dialog { 697 #dialog {
669 height: 550px; 698 height: 550px;
670 } 699 }
671 .active { 700 .active {
672 background-color: black; 701 background-color: black;
673 color: white !important; 702 color: white !important;
674 } 703 }
675 .activebtn { 704 .activebtn {
676 color: black !important; 705 color: black !important;
677 } 706 }
678 #flex { 707 #flex {
679 height: 300px; 708 height: 300px;
680 } 709 }
681 .top { 710 .top {
682 margin-top: 100px; 711 margin-top: 100px;
683 } 712 }
684 .v-tabs__item a { 713 .v-tabs__item a {
685 font-size: 16px !important; 714 font-size: 16px !important;
686 } 715 }
687 @media screen and (max-width: 769px) { 716 @media screen and (max-width: 769px) {
688 .top { 717 .top {
689 margin-top: 0 !important; 718 margin-top: 0 !important;
690 } 719 }
691 .userSearch .v-icon { 720 .userSearch .v-icon {
692 font-size: 20px !important; 721 font-size: 20px !important;
693 margin-left: 20px; 722 margin-left: 20px;
694 } 723 }
695 } 724 }
696 @media screen and (max-width: 380px) { 725 @media screen and (max-width: 380px) {
697 .pl-3 { 726 .pl-3 {
698 padding-left: 0px !important; 727 padding-left: 0px !important;
699 } 728 }
700 .right { 729 .right {
701 float: none !important; 730 float: none !important;
702 } 731 }
703 .subheading { 732 .subheading {
704 font-size: 14px !important; 733 font-size: 14px !important;
705 } 734 }
706 .v-card__actions .v-btn { 735 .v-card__actions .v-btn {
707 margin: 0 0px; 736 margin: 0 0px;
708 min-width: 100px; 737 min-width: 100px;
709 } 738 }
710 /* .searchIcon .v-icon { 739 /* .searchIcon .v-icon {
711 font-size: 20px; 740 font-size: 20px;
712 margin-left: 20px; 741 margin-left: 20px;
713 } */ 742 } */
714 .subheading { 743 .subheading {
715 font-size: 12px !important; 744 font-size: 12px !important;
716 } 745 }
717 h5 { 746 h5 {
718 font-size: 13px; 747 font-size: 13px;
719 } 748 }
720 } 749 }
721 .v-icon { 750 .v-icon {
722 font-size: 30px; 751 font-size: 30px;
723 } 752 }
724 @media screen and (min-width: 1270px) { 753 @media screen and (min-width: 1270px) {
725 .hide { 754 .hide {
726 display: none; 755 display: none;
727 } 756 }
728 /* } 757 /* }
729 @media screen and (max-width: 962px) { 758 @media screen and (max-width: 962px) {
730 .imglogo{ 759 .imglogo{
731 position: absolute; 760 position: absolute;
732 top: 13px; 761 top: 13px;
733 left: 13px !important; 762 left: 13px !important;
734 width: 70px; 763 width: 70px;
735 height: 24px; 764 height: 24px;
736 } */ 765 } */
737 } 766 }
738 @media screen and (max-width: 420px) { 767 @media screen and (max-width: 420px) {
739 .userSearch .v-text-field .v-label { 768 .userSearch .v-text-field .v-label {
740 line-height: 24px !important; 769 line-height: 24px !important;
741 } 770 }
742 .userSearch .v-label { 771 .userSearch .v-label {
743 font-size: 13px !important; 772 font-size: 13px !important;
744 } 773 }
745 .v-list__tile { 774 .v-list__tile {
746 font-size: 14px; 775 font-size: 14px;
747 padding: 0 10px; 776 padding: 0 10px;
748 } 777 }
749 .name { 778 .name {
750 font-size: 15px; 779 font-size: 15px;
751 } 780 }
src/pages/News/news.vue
Diff comments   View file @2b0e316
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-toolbar class="fixcolors" fixed app> 3 <v-toolbar class="fixcolors" fixed app>
4 <v-toolbar-title class="ml-0 pl-3"> 4 <v-toolbar-title class="ml-0 pl-3">
5 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon> 5 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon>
6 </v-toolbar-title> 6 </v-toolbar-title>
7 <!-- ****** SEARCH ALL EXISTING NEWS ****** --> 7 <!-- ****** SEARCH ALL EXISTING NEWS ****** -->
8 <v-flex xs7 sm3 class="userSearch"> 8 <v-flex xs7 sm3 class="userSearch ml-3">
9 <v-text-field 9 <v-text-field
10 flat 10 flat
11 append-icon="search" 11 append-icon="search"
12 label="Find your News" 12 label="Find your News"
13 v-model="search" 13 v-model="search"
14 color="white" 14 color="white"
15 dark 15 dark
16 ></v-text-field> 16 ></v-text-field>
17 </v-flex> 17 </v-flex>
18 <v-spacer></v-spacer> 18 <v-spacer></v-spacer>
19 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition"> 19 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
20 <v-btn icon large flat slot="activator"> 20 <v-btn icon large flat slot="activator">
21 <v-avatar size="40px"> 21 <v-avatar size="40px">
22 <img src="/static/icon/user.png"> 22 <img src="/static/icon/user.png">
23 </v-avatar> 23 </v-avatar>
24 </v-btn> 24 </v-btn>
25 <v-list class="pa-0"> 25 <v-list class="pa-0">
26 <v-list-tile 26 <v-list-tile
27 v-for="(item,index) in items" 27 v-for="(item,index) in items"
28 :to="!item.href ? { name: item.name } : null" 28 :to="!item.href ? { name: item.name } : null"
29 :href="item.href" 29 :href="item.href"
30 @click="item.click" 30 @click="item.click"
31 ripple="ripple" 31 ripple="ripple"
32 :disabled="item.disabled" 32 :disabled="item.disabled"
33 :target="item.target" 33 :target="item.target"
34 rel="noopener" 34 rel="noopener"
35 :key="index" 35 :key="index"
36 > 36 >
37 <v-list-tile-action v-if="item.icon"> 37 <v-list-tile-action v-if="item.icon">
38 <v-icon>{{ item.icon }}</v-icon> 38 <v-icon>{{ item.icon }}</v-icon>
39 </v-list-tile-action> 39 </v-list-tile-action>
40 <v-list-tile-content> 40 <v-list-tile-content>
41 <v-list-tile-title>{{ item.title }}</v-list-tile-title> 41 <v-list-tile-title>{{ item.title }}</v-list-tile-title>
42 </v-list-tile-content> 42 </v-list-tile-content>
43 </v-list-tile> 43 </v-list-tile>
44 </v-list> 44 </v-list>
45 </v-menu> 45 </v-menu>
46 </v-toolbar> 46 </v-toolbar>
47 <v-tabs grow slider-color="black"> 47 <v-tabs grow slider-color="black">
48 <v-tab 48 <v-tab
49 ripple 49 ripple
50 @click="activeTab('existing')" 50 @click="activeTab('existing')"
51 v-bind:class="{ active: isActive }" 51 v-bind:class="{ active: isActive }"
52 id="tab" 52 id="tab"
53 class="subheading" 53 class="subheading"
54 >Existing News</v-tab> 54 >Existing News</v-tab>
55 <v-tab 55 <v-tab
56 ripple 56 ripple
57 @click="activeTab('new')" 57 @click="activeTab('new')"
58 v-bind:class="{ active: newActive }" 58 v-bind:class="{ active: newActive }"
59 id="tab1" 59 id="tab1"
60 User 60 User
61 class="subheading" 61 class="subheading"
62 >Add News</v-tab> 62 >Add News</v-tab>
63 63
64 <!-- ****** EDITS ALL NEWS DETAILS ****** --> 64 <!-- ****** EDITS ALL NEWS DETAILS ****** -->
65 65
66 <v-tab-item> 66 <v-tab-item>
67 <v-snackbar 67 <v-snackbar
68 :timeout="timeout" 68 :timeout="timeout"
69 :top="y === 'top'" 69 :top="y === 'top'"
70 :right="x === 'right'" 70 :right="x === 'right'"
71 :vertical="mode === 'vertical'" 71 :vertical="mode === 'vertical'"
72 v-model="snackbar" 72 v-model="snackbar"
73 color="success" 73 color="success"
74 >{{ text }}</v-snackbar> 74 >{{ text }}</v-snackbar>
75 <v-dialog v-model="dialog" max-width="1000px"> 75 <v-dialog v-model="dialog" max-width="1000px">
76 <v-flex xs12 sm12 class> 76 <v-flex xs12 sm12 class>
77 <v-toolbar color="white"> 77 <v-toolbar color="white">
78 <v-spacer></v-spacer> 78 <v-spacer></v-spacer>
79 <v-toolbar-title>Edit News</v-toolbar-title> 79 <v-toolbar-title>Edit News</v-toolbar-title>
80 <v-spacer></v-spacer> 80 <v-spacer></v-spacer>
81 </v-toolbar> 81 </v-toolbar>
82 <v-card flat> 82 <v-card flat>
83 <v-form ref="form"> 83 <v-form ref="form">
84 <v-container fluid> 84 <v-container fluid>
85 <v-layout> 85 <v-layout>
86 <v-flex 86 <v-flex
87 xs12 87 xs12
88 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4" 88 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4"
89 > 89 >
90 <v-avatar size="100px"> 90 <v-avatar size="100px">
91 <img src="/static/icon/user.png" v-if="!imageUrl"> 91 <img src="/static/icon/user.png" v-if="!imageUrl">
92 </v-avatar> 92 </v-avatar>
93 <input 93 <input
94 type="file" 94 type="file"
95 style="display: none" 95 style="display: none"
96 ref="image" 96 ref="image"
97 accept="image/*" 97 accept="image/*"
98 @change="onFilePicked" 98 @change="onFilePicked"
99 > 99 >
100 <img 100 <img
101 :src="imageData.imageUrl" 101 :src="editItem.newsImageUrl"
102 height="150" 102 height="150"
103 v-if="imageUrl" 103 v-if="imageUrl"
104 style="border-radius:50%; width:200px" 104 style="border-radius:50%; width:200px"
105 > 105 >
106 </v-flex> 106 </v-flex>
107 </v-layout> 107 </v-layout>
108 <v-layout> 108 <v-layout>
109 <v-flex xs12 sm6> 109 <v-flex xs12 sm6>
110 <v-layout> 110 <v-layout>
111 <v-flex xs4 class="pt-4 subheading"> 111 <v-flex xs4 class="pt-4 subheading">
112 <label class="right">Select Class:</label> 112 <label class="right">Select Class:</label>
113 </v-flex> 113 </v-flex>
114 <v-flex xs8 class="ml-3"> 114 <v-flex xs8 class="ml-3">
115 <v-select 115 <v-select
116 :items="addclass" 116 :items="addclass"
117 label="Select Class" 117 label="Select Class"
118 v-model="editedItem.select" 118 v-model="editedItem.select"
119 item-text="classNum" 119 item-text="classNum"
120 item-value="_id" 120 item-value="_id"
121 name="Select Class" 121 name="Select Class"
122 @change="getSections(editedItem.select)" 122 @change="getSections(editedItem.select)"
123 required 123 required
124 ></v-select> 124 ></v-select>
125 </v-flex> 125 </v-flex>
126 </v-layout> 126 </v-layout>
127 </v-flex> 127 </v-flex>
128 <v-flex xs12 sm6> 128 <v-flex xs12 sm6>
129 <v-layout> 129 <v-layout>
130 <v-flex xs4 class="pt-4 subheading"> 130 <v-flex xs4 class="pt-4 subheading">
131 <label class="right">Select Section:</label> 131 <label class="right">Select Section:</label>
132 </v-flex> 132 </v-flex>
133 <v-flex xs8 class="ml-3"> 133 <v-flex xs8 class="ml-3">
134 <v-select 134 <v-select
135 :items="addSection" 135 :items="addSection"
136 label="Select Section" 136 label="Select Section"
137 v-model="editedItem.selectSection" 137 v-model="editedItem.selectSection"
138 item-text="name" 138 item-text="name"
139 item-value="_id" 139 item-value="_id"
140 name="Select Section" 140 name="Select Section"
141 required 141 required
142 ></v-select> 142 ></v-select>
143 </v-flex> 143 </v-flex>
144 </v-layout> 144 </v-layout>
145 </v-flex> 145 </v-flex>
146 </v-layout> 146 </v-layout>
147 <v-layout> 147 <v-layout>
148 <v-flex xs12 sm6> 148 <v-flex xs12 sm6>
149 <v-layout> 149 <v-layout>
150 <v-flex xs4 class="pt-4 subheading"> 150 <v-flex xs4 class="pt-4 subheading">
151 <label class="right">Title:</label> 151 <label class="right">Title:</label>
152 </v-flex> 152 </v-flex>
153 <v-flex xs8 class="ml-3"> 153 <v-flex xs8 class="ml-3">
154 <v-text-field 154 <v-text-field
155 v-model="editedItem.title" 155 v-model="editedItem.title"
156 placeholder="fill your Title" 156 placeholder="fill your Title"
157 name="name" 157 name="name"
158 type="text" 158 type="text"
159 required 159 required
160 ></v-text-field> 160 ></v-text-field>
161 </v-flex> 161 </v-flex>
162 </v-layout> 162 </v-layout>
163 </v-flex> 163 </v-flex>
164 <v-flex xs12 sm6> 164 <v-flex xs12 sm6>
165 <v-layout> 165 <v-layout>
166 <v-flex xs4 class="pt-4 subheading"> 166 <v-flex xs4 class="pt-4 subheading">
167 <label class="right">Description:</label> 167 <label class="right">Description:</label>
168 </v-flex> 168 </v-flex>
169 <v-flex xs8 class="ml-3"> 169 <v-flex xs8 class="ml-3">
170 <v-text-field 170 <v-text-field
171 placeholder="fill your Description" 171 placeholder="fill your Description"
172 v-model="editedItem.description" 172 v-model="editedItem.description"
173 type="text" 173 type="text"
174 name="email" 174 name="email"
175 required 175 required
176 ></v-text-field> 176 ></v-text-field>
177 </v-flex> 177 </v-flex>
178 </v-layout> 178 </v-layout>
179 </v-flex> 179 </v-flex>
180 </v-layout> 180 </v-layout>
181 <v-layout> 181 <v-layout>
182 <v-flex xs12 sm12> 182 <v-flex xs12 sm12>
183 <v-card-actions> 183 <v-card-actions>
184 <v-btn round dark @click.native="close">Cancel</v-btn> 184 <v-btn round dark @click.native="close">Cancel</v-btn>
185 <v-spacer></v-spacer> 185 <v-spacer></v-spacer>
186 <v-btn round dark @click="save">Save</v-btn> 186 <v-btn round dark @click="save">Save</v-btn>
187 </v-card-actions> 187 </v-card-actions>
188 </v-flex> 188 </v-flex>
189 </v-layout> 189 </v-layout>
190 </v-container> 190 </v-container>
191 </v-form> 191 </v-form>
192 </v-card> 192 </v-card>
193 </v-flex> 193 </v-flex>
194 </v-dialog> 194 </v-dialog>
195 195
196 <!-- ****** PROFILE VIEW ALL NEWS DEATILS ****** --> 196 <!-- ****** PROFILE VIEW ALL NEWS DEATILS ****** -->
197 <v-dialog v-model="dialog1" max-width="600px"> 197 <v-dialog v-model="dialog1" max-width="600px">
198 <v-toolbar color="white"> 198 <v-toolbar color="white">
199 <v-spacer></v-spacer> 199 <v-spacer></v-spacer>
200 <v-toolbar-title>Profile</v-toolbar-title> 200 <v-toolbar-title>Profile</v-toolbar-title>
201 <v-spacer></v-spacer> 201 <v-spacer></v-spacer>
202 <v-icon @click="close1">close</v-icon> 202 <v-icon @click="close1">close</v-icon>
203 </v-toolbar> 203 </v-toolbar>
204 <v-card> 204 <v-card>
205 <v-flex align-center justify-center layout text-xs-center> 205 <v-flex align-center justify-center layout text-xs-center>
206 <v-avatar size="50px" style="position:absolute; top:20px;"> 206 <v-avatar size="50px" style="position:absolute; top:20px;">
207 <img src="/static/icon/user.png"> 207 <img src="/static/icon/user.png">
208 </v-avatar> 208 </v-avatar>
209 </v-flex> 209 </v-flex>
210 <v-card-text> 210 <v-card-text>
211 <v-container grid-list-md> 211 <v-container grid-list-md>
212 <v-layout wrap> 212 <v-layout wrap>
213 <v-flex> 213 <v-flex>
214 <br> 214 <br>
215 <br> 215 <br>
216 <v-layout> 216 <v-layout>
217 <v-flex xs5 sm6> 217 <v-flex xs5 sm6>
218 <h5 class="right my-1">Title:</h5> 218 <h5 class="right my-1">Title:</h5>
219 </v-flex> 219 </v-flex>
220 <v-flex sm6 xs8> 220 <v-flex sm6 xs8>
221 <h5 class="my-1">{{ editedItem.title }}</h5> 221 <h5 class="my-1">{{ editedItem.title }}</h5>
222 </v-flex> 222 </v-flex>
223 </v-layout> 223 </v-layout>
224 <v-layout> 224 <v-layout>
225 <v-flex xs5 sm6> 225 <v-flex xs5 sm6>
226 <h5 class="right my-1">Description:</h5> 226 <h5 class="right my-1">Description:</h5>
227 </v-flex> 227 </v-flex>
228 <v-flex sm6 xs8> 228 <v-flex sm6 xs8>
229 <h5 class="my-1">{{ editedItem.description }}</h5> 229 <h5 class="my-1">{{ editedItem.description }}</h5>
230 </v-flex> 230 </v-flex>
231 </v-layout> 231 </v-layout>
232 </v-flex> 232 </v-flex>
233 </v-layout> 233 </v-layout>
234 </v-container> 234 </v-container>
235 </v-card-text> 235 </v-card-text>
236 </v-card> 236 </v-card>
237 </v-dialog> 237 </v-dialog>
238 238
239 <v-snackbar 239 <v-snackbar
240 :timeout="timeout" 240 :timeout="timeout"
241 :top="y === 'top'" 241 :top="y === 'top'"
242 :right="x === 'right'" 242 :right="x === 'right'"
243 :vertical="mode === 'vertical'" 243 :vertical="mode === 'vertical'"
244 v-model="snackbar" 244 v-model="snackbar"
245 color="success" 245 color="success"
246 >{{ text }}</v-snackbar> 246 >{{ text }}</v-snackbar>
247 247
248 <!-- ****** EXISTING-USERS NEWS TABLE ****** --> 248 <!-- ****** EXISTING-USERS NEWS TABLE ****** -->
249 <v-data-table 249 <v-data-table
250 :headers="headers" 250 :headers="headers"
251 :items="desserts" 251 :items="desserts"
252 :pagination.sync="pagination" 252 :pagination.sync="pagination"
253 :search="search" 253 :search="search"
254 > 254 >
255 <template slot="items" slot-scope="props"> 255 <template slot="items" slot-scope="props">
256 <td id="td" class="text-xs-center">{{ props.index}}</td> 256 <td id="td" class="text-xs-center">{{ props.index}}</td>
257 <td id="td" class="text-xs-center">{{ props.item.title}}</td> 257 <td id="td" class="text-xs-center">{{ props.item.title}}</td>
258 <td id="td" class="text-xs-center">{{ props.item.description}}</td> 258 <td id="td" class="text-xs-center">{{ props.item.description}}</td>
259 259
260 <td class="text-xs-center"> 260 <td class="text-xs-center">
261 <span> 261 <span>
262 <img 262 <img
263 style="cursor:pointer; width:25px; height:18px; " 263 style="cursor:pointer; width:25px; height:18px; "
264 class="mr-5" 264 class="mr-5"
265 @click="profile(props.item)" 265 @click="profile(props.item)"
266 src="/static/icon/eye1.png" 266 src="/static/icon/eye1.png"
267 > 267 >
268 <img 268 <img
269 style="cursor:pointer; width:20px; height:18px; " 269 style="cursor:pointer; width:20px; height:18px; "
270 class="mr-5" 270 class="mr-5"
271 @click="editItem(props.item)" 271 @click="editItem(props.item)"
272 src="/static/icon/edit1.png" 272 src="/static/icon/edit1.png"
273 > 273 >
274 <img 274 <img
275 style="cursor:pointer; height:20px; " 275 style="cursor:pointer; height:20px; "
276 class="mr-5" 276 class="mr-5"
277 @click="deleteItem(props.item)" 277 @click="deleteItem(props.item)"
278 src="/static/icon/delete1.png" 278 src="/static/icon/delete1.png"
279 > 279 >
280 </span> 280 </span>
281 </td> 281 </td>
282 </template> 282 </template>
283 <v-alert 283 <v-alert
284 slot="no-results" 284 slot="no-results"
285 :value="true" 285 :value="true"
286 color="error" 286 color="error"
287 icon="warning" 287 icon="warning"
288 >Your search for "{{ search }}" found no results.</v-alert> 288 >Your search for "{{ search }}" found no results.</v-alert>
289 </v-data-table> 289 </v-data-table>
290 </v-tab-item> 290 </v-tab-item>
291 291
292 <!-- ****** ADD MULTIPLE NEWS ****** --> 292 <!-- ****** ADD MULTIPLE NEWS ****** -->
293 293
294 <v-tab-item> 294 <v-tab-item>
295 <v-container> 295 <v-container>
296 <v-snackbar 296 <v-snackbar
297 :timeout="timeout" 297 :timeout="timeout"
298 :top="y === 'top'" 298 :top="y === 'top'"
299 :right="x === 'right'" 299 :right="x === 'right'"
300 :vertical="mode === 'vertical'" 300 :vertical="mode === 'vertical'"
301 v-model="snackbar" 301 v-model="snackbar"
302 color="success" 302 color="success"
303 >{{ text }}</v-snackbar> 303 >{{ text }}</v-snackbar>
304 <v-flex xs12 sm12 class="my-4"> 304 <v-flex xs12 sm12 class="my-4">
305 <v-card flat> 305 <v-card flat>
306 <v-form ref="form" v-model="valid" lazy-validation> 306 <v-form ref="form" v-model="valid" lazy-validation>
307 <v-container fluid> 307 <v-container fluid>
308 <v-layout> 308 <v-layout>
309 <v-flex 309 <v-flex
310 xs12 310 xs12
311 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" 311 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
312 > 312 >
313 <v-avatar size="100px"> 313 <v-avatar size="100px">
314 <img src="/static/icon/user.png" v-if="!imageUrl"> 314 <img src="/static/icon/user.png" v-if="!imageUrl">
315 </v-avatar> 315 </v-avatar>
316 <input 316 <input
317 type="file" 317 type="file"
318 style="display: none" 318 style="display: none"
319 ref="image" 319 ref="image"
320 accept="image/*" 320 accept="image/*"
321 multiple
321 @change="onFilePicked" 322 @change="onFilePicked"
322 > 323 >
323 <img 324 <img
324 :src="imageData.imageUrl" 325 :src="imageUrl"
325 height="150" 326 height="150"
326 v-if="imageUrl" 327 v-if="imageUrl"
327 style="border-radius:50%; width:200px" 328 style="border-radius:50%; width:200px"
328 > 329 >
329 </v-flex>
330 </v-layout>
331 <v-flex xs12>
332 <v-layout> 330 <v-layout>
333 <v-flex xs4 class="pt-4 subheading"> 331 <v-flex
334 <label class="right">Select Class:</label> 332 xs4 v-for="(file, index) in files" :key="index">
335 </v-flex> 333 <img :src="file.url" height="200" width="320px;">
336 <v-flex xs4 class="ml-3"> 334 </v-flex>
337 <v-select 335 </v-layout>
338 :items="addclass"
339 label="Select Class"
340 v-model="editedItem.select"
341 item-text="classNum"
342 item-value="_id"
343 name="Select Class"
344 @change="getSections(editedItem.select)"
345 required
346 ></v-select>
347 </v-flex>
348 </v-layout>
349 </v-flex>
350 <v-flex xs12>
351 <v-layout>
352 <v-flex xs4 class="pt-4 subheading">
353 <label class="right">Select Section:</label>
354 </v-flex>
355 <v-flex xs4 class="ml-3">
356 <v-select
357 :items="addSection"
358 label="Select Section"
359 v-model="editedItem.selectSection"
360 item-text="name"
361 item-value="_id"
362 name="Select Section"
363 required
364 ></v-select>
365 </v-flex>
366 </v-layout>
367 </v-flex> 336 </v-flex>
337 </v-layout>
368 <v-flex xs12> 338 <v-flex xs12>
369 <v-layout> 339 <v-layout>
370 <v-flex xs4 class="pt-4 subheading"> 340 <v-flex xs4 class="pt-4 subheading">
371 <label class="right">Title:</label> 341 <label class="right">Title:</label>
372 </v-flex> 342 </v-flex>
373 <v-flex xs4 class="ml-3"> 343 <v-flex xs4 class="ml-3">
374 <v-text-field 344 <v-text-field
375 v-model="addNews.title" 345 v-model="addNews.title"
376 placeholder="fill your Title" 346 placeholder="fill your Title"
377 name="name" 347 name="name"
378 type="text" 348 type="text"
379 :rules="titleRules" 349 :rules="titleRules"
380 required 350 required
381 ></v-text-field> 351 ></v-text-field>
382 </v-flex> 352 </v-flex>
383 </v-layout> 353 </v-layout>
384 </v-flex> 354 </v-flex>
385 <v-flex xs12> 355 <v-flex xs12>
386 <v-layout> 356 <v-layout>
387 <v-flex xs4 class="pt-4 subheading"> 357 <v-flex xs4 class="pt-4 subheading">
388 <label class="right">Description:</label> 358 <label class="right">Description:</label>
389 </v-flex> 359 </v-flex>
390 <v-flex xs4 class="ml-3"> 360 <v-flex xs4 class="ml-3">
391 <v-text-field 361 <v-text-field
392 placeholder="fill your Description" 362 placeholder="fill your Description"
393 :rules="descriptionRules" 363 :rules="descriptionRules"
394 v-model="addNews.description" 364 v-model="addNews.description"
395 type="text" 365 type="text"
396 name="email" 366 name="email"
397 required 367 required
398 ></v-text-field> 368 ></v-text-field>
399 </v-flex> 369 </v-flex>
400 </v-layout> 370 </v-layout>
401 </v-flex> 371 </v-flex>
372 <v-flex xs12>
373 <v-layout>
374 <v-flex xs4 class="pt-4 subheading">
375 <label class="right">Uplaod Image:</label>
376 </v-flex>
377 <v-flex xs4 class="ml-3">
378 <v-text-field
379 label="Select Image"
380 @click="pickFile"
381 v-model="imageName"
382 append-icon="attach_file"
383 multiple
384 ></v-text-field>
385 </v-flex>
386 </v-layout>
387 </v-flex>
402 <v-layout> 388 <v-layout>
403 <v-flex xs12 sm6 offset-sm3> 389 <v-flex xs12 sm6 offset-sm3>
404 <v-card-actions> 390 <v-card-actions>
405 <v-btn @click="clear" round dark>clear</v-btn> 391 <v-btn @click="clear" round dark>clear</v-btn>
406 <v-spacer></v-spacer> 392 <v-spacer></v-spacer>
407 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 393 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
408 </v-card-actions> 394 </v-card-actions>
409 </v-flex> 395 </v-flex>
410 </v-layout> 396 </v-layout>
411 </v-container> 397 </v-container>
412 </v-form> 398 </v-form>
413 </v-card> 399 </v-card>
414 </v-flex> 400 </v-flex>
415 </v-container> 401 </v-container>
416 </v-tab-item> 402 </v-tab-item>
417 </v-tabs> 403 </v-tabs>
418 <div class="loader" v-if="showLoader"> 404 <div class="loader" v-if="showLoader">
419 <v-progress-circular indeterminate color="white"></v-progress-circular> 405 <v-progress-circular indeterminate color="white"></v-progress-circular>
420 </div> 406 </div>
421 </v-app> 407 </v-app>
422 </template> 408 </template>
423 409
424 <script> 410 <script>
425 import http from "@/Services/http.js"; 411 import http from "@/Services/http.js";
426 import Util from "@/util"; 412 import Util from "@/util";
427 413
428 export default { 414 export default {
429 data: () => ({ 415 data: () => ({
430 snackbar: false, 416 snackbar: false,
431 y: "top", 417 y: "top",
432 x: "right", 418 x: "right",
433 mode: "", 419 mode: "",
434 timeout: 3000, 420 timeout: 3000,
435 text: "", 421 text: "",
436 loading: false, 422 loading: false,
437 date: null, 423 date: null,
438 search: "", 424 search: "",
439 showLoader:false, 425 showLoader:false,
440 dialog: false, 426 dialog: false,
441 dialog1: false, 427 dialog1: false,
442 valid: true, 428 valid: true,
443 isActive: true, 429 isActive: true,
444 newActive: false, 430 newActive: false,
445 addclass: [], 431 addclass: [],
446 addSection: [], 432 addSection: [],
447 AddUsercredentials: {}, 433 AddUsercredentials: {},
448 pagination: { 434 pagination: {
449 rowsPerPage: 15 435 rowsPerPage: 15
450 }, 436 },
451 imageData: {},
452 imageName: "", 437 imageName: "",
453 imageUrl: "", 438 imageUrl: "",
454 imageFile: "", 439 imageFile: "",
440 image: [],
441 upload:"",
442 files:[],
455 titleRules: [v => !!v || " Tilte is required"], 443 titleRules: [v => !!v || " Tilte is required"],
456 descriptionRules: [v => !!v || " Description is required"], 444 descriptionRules: [v => !!v || " Description is required"],
457 headers: [ 445 headers: [
458 { 446 {
459 text: "No", 447 text: "No",
460 align: "center", 448 align: "center",
461 sortable: false, 449 sortable: false,
462 value: "No" 450 value: "No"
463 }, 451 },
464 { text: "Title", value: "title", sortable: false, align: "center" }, 452 { text: "Title", value: "title", sortable: false, align: "center" },
465 { text: "Description", value: "description", sortable: false, align: "center" }, 453 { text: "Description", value: "description", sortable: false, align: "center" },
466 { text: "Action", value: "", sortable: false, align: "center" } 454 { text: "Action", value: "", sortable: false, align: "center" }
467 ], 455 ],
468 desserts: [], 456 desserts: [],
469 editedIndex: -1, 457 editedIndex: -1,
470 addNews: { 458 addNews: {
471 title: "", 459 title: "",
472 description: "" 460 description: "",
473 }, 461 },
474 editedItem: { 462 editedItem: {
475 title: "", 463 title: "",
476 description: "" 464 description: ""
477 }, 465 },
478 defaultItem: { 466 defaultItem: {
479 title: "", 467 title: "",
480 description: "" 468 description: ""
481 }, 469 },
482 userName: "", 470 userName: "",
483 items: [ 471 items: [
484 { 472 {
485 href: "/changepassword", 473 href: "/changepassword",
486 title: "Change Password", 474 title: "Change Password",
487 click: e => { 475 click: e => {
488 console.log(e); 476 console.log(e);
489 } 477 }
490 }, 478 },
491 { 479 {
492 href: "#", 480 href: "#",
493 title: "Logout", 481 title: "Logout",
494 click: e => { 482 click: e => {
495 window.getApp.$emit("APP_LOGOUT"); 483 window.getApp.$emit("APP_LOGOUT");
496 } 484 }
497 } 485 }
498 ] 486 ]
499 }), 487 }),
500 methods: { 488 methods: {
501 getSections(_id) { 489 getSections(_id) {
490 console.log("_id",_id)
502 var token = this.$store.state.token; 491 var token = this.$store.state.token;
503 http() 492 http()
504 .get( 493 .get(
505 "/getSectionsList", 494 "/getSectionsList",
506 { params: { classId: _id } }, 495 { params: { classId: _id } },
507 { 496 {
508 headers: { Authorization: "Bearer " + token } 497 headers: { Authorization: "Bearer " + token }
509 } 498 }
510 ) 499 )
511 .then(response => { 500 .then(response => {
512 this.addSection = response.data.data; 501 this.addSection = response.data.data;
513 // console.log("getSectionsList=====>", this.addSection); 502 // console.log("getSectionsList=====>", this.addSection);
514 }) 503 })
515 .catch(err => { 504 .catch(err => {
516 // console.log("err====>", err); 505 // console.log("err====>", err);
517 // this.$router.replace({ path: '/' }); 506 // this.$router.replace({ path: '/' });
518 }); 507 });
519 }, 508 },
520 pickFile() { 509 pickFile() {
521 this.$refs.image.click(); 510 this.$refs.image.click();
522 }, 511 },
523 512
524 onFilePicked(e) { 513 onFilePicked(e) {
525 // console.log(e) 514 // console.log(e)
526 const files = e.target.files; 515 const files = e.target.files;
527 this.imageData.upload = e.target.files[0]; 516 /** fetch Image Name **/
528 if (files[0] !== undefined) { 517 if (files[0] !== undefined) {
529 this.imageName = files[0].name; 518 this.imageName = files[0].name;
530 if (this.imageName.lastIndexOf(".") <= 0) { 519 if (this.imageName.lastIndexOf(".") <= 0) {
531 return; 520 return;
532 } 521 }
522 this.files = [];
523 console.log("files", this.files);
524 /** Select many image and showing many image add to news card **/
525 const test = Array.from(files).forEach((file, idx) => {
533 const fr = new FileReader(); 526 const fr = new FileReader();
534 fr.readAsDataURL(files[0]); 527 const getResult = new Promise(resolve => {
535 fr.addEventListener("load", () => { 528 fr.onload = e => {
536 this.imageUrl = fr.result; 529 this.files.push({
537 this.imageFile = files[0]; // this is an image file that can be sent to server... 530 id: idx,
538 this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 531 url: e.target.result
539 console.log("upload=======>", this.imageData.imageUrl); 532 });
540 console.log("imageFile", this.imageFile); 533 };
541 }); 534 });
535 fr.readAsDataURL(file);
536 return getResult.then(file => {
537 return file;
538 });
539 });
540 const fr = new FileReader();
541 fr.readAsDataURL(files[0]);
542 fr.addEventListener("load", () => {
543 this.imageFile = files; // this is an image file that can be sent to server...
544 console.log("uploadImage=======>", this.imageFile );
545 });
542 } else { 546 } else {
543 this.imageName = ""; 547 this.imageName = "";
544 this.imageFile = ""; 548 this.imageFile = "";
545 this.imageUrl = ""; 549 this.imageUrl = "";
546 } 550 }
547 }, 551 },
548 getNewsList() { 552 getNewsList() {
549 this.showLoader = true; 553 this.showLoader = true;
550 var token = this.$store.state.token; 554 var token = this.$store.state.token;
551 http() 555 http()
552 .get("/getNewsList", { 556 .get("/getNewsList", {
553 headers: { Authorization: "Bearer " + token } 557 headers: { Authorization: "Bearer " + token }
554 }) 558 })
555 .then(response => { 559 .then(response => {
556 this.desserts = response.data.data; 560 this.desserts = response.data.data;
557 this.showLoader = false; 561 this.showLoader = false;
558 // console.log("getNewsList=====>",this.desserts) 562 // console.log("getNewsList=====>",this.desserts)
559 }) 563 })
560 .catch(err => { 564 .catch(err => {
561 // console.log("err====>", err); 565 // console.log("err====>", err);
562 this.showLoader = false; 566 this.showLoader = false;
563 this.$router.replace({ path: "/" }); 567 this.$router.replace({ path: "/" });
564 }); 568 });
565 }, 569 },
566 editItem(item) { 570 editItem(item) {
567 this.editedIndex = this.desserts.indexOf(item); 571 this.editedIndex = this.desserts.indexOf(item);
568 this.editedItem = Object.assign({}, item); 572 this.editedItem = Object.assign({}, item);
569 this.dialog = true; 573 this.dialog = true;
570 }, 574 },
571 profile(item) { 575 profile(item) {
572 this.editedIndex = this.desserts.indexOf(item); 576 this.editedIndex = this.desserts.indexOf(item);
573 this.editedItem = Object.assign({}, item); 577 this.editedItem = Object.assign({}, item);
574 this.dialog1 = true; 578 this.dialog1 = true;
575 }, 579 },
576 deleteItem(item) { 580 deleteItem(item) {
577 let deleteNews = { 581 let deleteNews = {
578 newsId: item._id 582 newsId: item._id
579 }; 583 };
580 http() 584 http()
581 .delete( 585 .delete(
582 "/deleteNews", 586 "/deleteNews",
583 confirm("Are you sure you want to delete this?") && { 587 confirm("Are you sure you want to delete this?") && {
584 params: deleteNews 588 params: deleteNews
585 } 589 }
586 ) 590 )
587 .then(response => { 591 .then(response => {
588 // console.log("deleteNews",deleteNews) 592 // console.log("deleteNews",deleteNews)
589 if ((this.snackbar = true)) { 593 if ((this.snackbar = true)) {
590 this.text = "Successfully delete Existing User"; 594 this.text = "Successfully delete Existing User";
591 } 595 }
592 this.getNewsList(); 596 this.getNewsList();
593 }) 597 })
594 .catch(error => { 598 .catch(error => {
595 // console.log(error); 599 // console.log(error);
596 }); 600 });
597 }, 601 },
598 activeTab(type) { 602 activeTab(type) {
599 switch (type) { 603 switch (type) {
600 case "existing": 604 case "existing":
601 this.newActive = false; 605 this.newActive = false;
602 this.isActive = true; 606 this.isActive = true;
603 break; 607 break;
604 608
605 default: 609 default:
606 this.newActive = true; 610 this.newActive = true;
607 this.isActive = false; 611 this.isActive = false;
608 break; 612 break;
609 } 613 }
610 }, 614 },
611 close() { 615 close() {
612 this.dialog = false; 616 this.dialog = false;
613 setTimeout(() => { 617 setTimeout(() => {
614 this.editedItem = Object.assign({}, this.defaultItem); 618 this.editedItem = Object.assign({}, this.defaultItem);
615 this.editedIndex = -1; 619 this.editedIndex = -1;
616 }, 300); 620 }, 300);
617 }, 621 },
618 close1() { 622 close1() {
619 this.dialog1 = false; 623 this.dialog1 = false;
620 }, 624 },
621 submit() { 625 submit() {
626 console.log("===========>",this.image)
622 if (this.$refs.form.validate()) { 627 if (this.$refs.form.validate()) {
623 let imageData = new FormData(); 628 let newsData = new FormData();
624 imageData.append("upload", this.imageFile); 629 for( var i = 0; i < this.imageFile.length; i++ ){
625 console.log(imageData); 630 let file = this.imageFile[i];
626 let addNewses = { 631 newsData.append("upload", file );
627 title: this.addNews.title, 632 }
628 description: this.addNews.description, 633 newsData.append("title",this.addNews.title);
629 // imageData 634 newsData.append("description",this.addNews.description);
630 }; 635 console.log("newsDataData",newsData);
636
631 http() 637 http()
632 .post("/createNews", addNewses) 638 .post("/createNews", newsData)
633 .then(response => { 639 .then(response => {
634 // console.log(addNewses) 640 console.log(newsData)
635 if ((this.snackbar = true)) { 641 if ((this.snackbar = true)) {
636 this.text = "New user added successfully"; 642 this.text = "New user added successfully";
637 } 643 }
638 this.getNewsList(); 644 this.getNewsList();
639 this.clear(); 645 this.clear();
640 }) 646 })
641 .catch(error => { 647 .catch(error => {
642 // console.log(error);
643 if ((this.snackbar = true)) { 648 if ((this.snackbar = true)) {
644 this.text = error.response.data.message; 649 this.text = error.response.data.message;
645 } 650 }
646 }); 651 });
647 } 652 }
648 }, 653 },
649 mail() {}, 654 mail() {},
650 download() {}, 655 download() {},
651 clear() { 656 clear() {
652 this.$refs.form.reset(); 657 this.$refs.form.reset();
653 }, 658 },
654 save() { 659 save() {
655 let imageData = new FormData(); 660 let imageData = new FormData();
656 imageData.append("upload", this.imageFile); 661 imageData.append("upload", this.imageFile);
657 console.log(imageData); 662 console.log(imageData);
658 let editNews = { 663 let editNews = {
659 newsId: this.editedItem._id, 664 newsId: this.editedItem._id,
660 title: this.editedItem.title, 665 title: this.editedItem.title,
661 description: this.editedItem.description, 666 description: this.editedItem.description,
662 // imageData 667 // imageData
663 }; 668 };
664 http() 669 http()
665 .put("/updateNews", editNews) 670 .put("/updateNews", editNews)
666 .then(response => { 671 .then(response => {
667 // console.log("updateNews",updateNews); 672 // console.log("updateNews",updateNews);
668 if ((this.snackbar = true)) { 673 if ((this.snackbar = true)) {
669 this.text = "Successfully Edit Existing User"; 674 this.text = "Successfully Edit Existing User";
670 } 675 }
671 this.getNewsList(); 676 this.getNewsList();
672 }) 677 })
673 .catch(error => { 678 .catch(error => {
674 // console.log(error); 679 // console.log(error);
675 }); 680 });
676 this.close(); 681 this.close();
677 }, 682 },
678 handleDrawerToggle() { 683 handleDrawerToggle() {
679 window.getApp.$emit("APP_DRAWER_TOGGLED"); 684 window.getApp.$emit("APP_DRAWER_TOGGLED");
680 }, 685 },
681 handleFullScreen() { 686 handleFullScreen() {
682 Util.toggleFullScreen(); 687 Util.toggleFullScreen();
683 } 688 }
684 }, 689 },
685 mounted() { 690 mounted() {
686 this.getNewsList(); 691 this.getNewsList();
687 var token = this.$store.state.token; 692 var token = this.$store.state.token;
688 http() 693 http()
689 .get("/getClassesList", { 694 .get("/getClassesList", {
690 headers: { Authorization: "Bearer " + token } 695 headers: { Authorization: "Bearer " + token }
691 }) 696 })
692 .then(response => { 697 .then(response => {
693 this.addclass = response.data.data; 698 this.addclass = response.data.data;
694 // console.log("getClassesList=====>",this.addclass) 699 // console.log("getClassesList=====>",this.addclass)
695 }) 700 })
696 .catch(err => { 701 .catch(err => {
697 // console.log("err====>", err); 702 // console.log("err====>", err);
698 this.$router.replace({ path: "/" }); 703 this.$router.replace({ path: "/" });
699 }); 704 });
700 }, 705 },
701 computed: { 706 computed: {
702 toolbarColor() { 707 toolbarColor() {
703 return this.$vuetify.options.extra.mainNav; 708 return this.$vuetify.options.extra.mainNav;
704 } 709 }
705 } 710 }
706 }; 711 };
707 </script> 712 </script>
708 <style scoped> 713 <style scoped>
709 .pl-3 { 714 .pl-3 {
710 padding-left: 0px !important; 715 padding-left: 0px !important;
711 } 716 }
712 .v-tabs__div { 717 .v-tabs__div {
713 text-transform: none; 718 text-transform: none;
714 } 719 }
715 .v-input__prepend-outer { 720 .v-input__prepend-outer {
716 margin-right: 0px !important; 721 margin-right: 0px !important;
717 } 722 }
718 .v-card__actions .v-btn { 723 .v-card__actions .v-btn {
719 margin: 0 15px; 724 margin: 0 15px;
720 min-width: 120px; 725 min-width: 120px;
721 } 726 }
722 .primary { 727 .primary {
723 background-color: #aaa !important; 728 background-color: #aaa !important;
724 border-color: #aaa !important; 729 border-color: #aaa !important;
725 } 730 }
726 h4 { 731 h4 {
727 background-repeat: no-repeat; 732 background-repeat: no-repeat;
728 padding: 8px; 733 padding: 8px;
729 margin: auto; 734 margin: auto;
730 font-size: 25px; 735 font-size: 25px;
731 } 736 }
732 #name { 737 #name {
733 position: absolute; 738 position: absolute;
734 left: 100px; 739 left: 100px;
735 top: 17px; 740 top: 17px;
736 } 741 }
737 #icon { 742 #icon {
738 position: absolute; 743 position: absolute;
739 right: 8px; 744 right: 8px;
740 top: 8px; 745 top: 8px;
741 } 746 }
742 #m { 747 #m {
743 position: relative; 748 position: relative;
744 left: 135px; 749 left: 135px;
745 top: -15px; 750 top: -15px;
746 } 751 }
747 #G { 752 #G {
748 position: absolute; 753 position: absolute;
749 top: 38px; 754 top: 38px;
750 color: white; 755 color: white;
751 } 756 }
752 #bt { 757 #bt {
753 position: relative; 758 position: relative;
754 top: -20px; 759 top: -20px;
755 left: 115px; 760 left: 115px;
756 } 761 }
757 #e { 762 #e {
758 position: relative; 763 position: relative;
759 top: 5px; 764 top: 5px;
760 right: -30px; 765 right: -30px;
761 height: 17px; 766 height: 17px;
762 cursor: pointer; 767 cursor: pointer;
763 } 768 }
764 #d { 769 #d {
765 position: relative; 770 position: relative;
766 top: 5px; 771 top: 5px;
767 right: -70px; 772 right: -70px;
768 height: 17px; 773 height: 17px;
769 cursor: pointer; 774 cursor: pointer;
770 } 775 }
771 #td { 776 #td {
772 border: 1px solid #dddddd; 777 border: 1px solid #dddddd;
773 text-align: left; 778 text-align: left;
774 padding: 8px; 779 padding: 8px;
775 } 780 }
776 #dialog { 781 #dialog {
777 height: 550px; 782 height: 550px;
778 } 783 }
779 .active { 784 .active {
780 background-color: black; 785 background-color: black;
781 color: white !important; 786 color: white !important;
782 } 787 }
783 .activebtn { 788 .activebtn {
784 color: black !important; 789 color: black !important;
785 } 790 }
786 #flex { 791 #flex {
787 height: 300px; 792 height: 300px;
788 } 793 }
789 .top { 794 .top {
790 margin-top: 100px; 795 margin-top: 100px;
791 } 796 }
792 .v-tabs__item a { 797 .v-tabs__item a {
793 font-size: 16px !important; 798 font-size: 16px !important;
794 } 799 }
795 @media screen and (max-width: 769px) { 800 @media screen and (max-width: 769px) {
796 .top { 801 .top {
797 margin-top: 0 !important; 802 margin-top: 0 !important;
798 } 803 }
799 .userSearch .v-icon { 804 .userSearch .v-icon {
800 font-size: 20px !important; 805 font-size: 20px !important;
801 margin-left: 20px; 806 margin-left: 20px;
802 } 807 }
803 } 808 }
804 @media screen and (max-width: 380px) { 809 @media screen and (max-width: 380px) {
805 .right { 810 .right {
806 float: none !important; 811 float: none !important;
807 } 812 }
808 .subheading { 813 .subheading {
809 font-size: 14px !important; 814 font-size: 14px !important;
810 } 815 }
811 .v-card__actions .v-btn { 816 .v-card__actions .v-btn {
812 margin: 0 0px; 817 margin: 0 0px;
813 min-width: 100px; 818 min-width: 100px;
814 } 819 }
815 /* .searchIcon .v-icon { 820 /* .searchIcon .v-icon {
816 font-size: 20px; 821 font-size: 20px;
817 margin-left: 20px; 822 margin-left: 20px;
818 } */ 823 } */
819 .subheading { 824 .subheading {
820 font-size: 12px !important; 825 font-size: 12px !important;
821 } 826 }
822 h5 { 827 h5 {
823 font-size: 13px; 828 font-size: 13px;
824 } 829 }
src/pages/Section/section.vue
Diff comments   View file @2b0e316
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-toolbar 3 <v-toolbar
4 class="fixcolors" 4 class="fixcolors"
5 fixed 5 fixed
6 app 6 app
7 > 7 >
8 <v-toolbar-title class="ml-0 pl-3"> 8 <v-toolbar-title class="ml-0 pl-3">
9 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon> 9 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon>
10 </v-toolbar-title> 10 </v-toolbar-title>
11 <!-- ****** SEARCH ALL EXISTING SECTION ****** --> 11 <!-- ****** SEARCH ALL EXISTING SECTION ****** -->
12 <v-flex xs7 sm3 class="userSearch"> 12 <v-flex xs7 sm3 class="userSearch">
13 <v-text-field 13 <v-text-field
14 flat 14 flat
15 append-icon="search" 15 append-icon="search"
16 label="Find your Section Data" 16 label="Find your Section Data"
17 v-model="search" 17 v-model="search"
18 color="white" 18 color="white"
19 dark 19 dark
20 > 20 >
21 </v-text-field> 21 </v-text-field>
22 </v-flex> 22 </v-flex>
23 <v-spacer></v-spacer> 23 <v-spacer></v-spacer>
24 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition"> 24 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
25 <v-btn icon large flat slot="activator"> 25 <v-btn icon large flat slot="activator">
26 <v-avatar size="40px"> 26 <v-avatar size="40px">
27 <img src="/static/icon/user.png"/> 27 <img src="/static/icon/user.png"/>
28 </v-avatar> 28 </v-avatar>
29 </v-btn> 29 </v-btn>
30 <v-list class="pa-0"> 30 <v-list class="pa-0">
31 <v-list-tile v-for="(item,index) in items" :to="!item.href ? { name: item.name } : null" :href="item.href" @click="item.click" ripple="ripple" :disabled="item.disabled" :target="item.target" rel="noopener" :key="index"> 31 <v-list-tile v-for="(item,index) in items" :to="!item.href ? { name: item.name } : null" :href="item.href" @click="item.click" ripple="ripple" :disabled="item.disabled" :target="item.target" rel="noopener" :key="index">
32 <v-list-tile-action v-if="item.icon"> 32 <v-list-tile-action v-if="item.icon">
33 <v-icon>{{ item.icon }}</v-icon> 33 <v-icon>{{ item.icon }}</v-icon>
34 </v-list-tile-action> 34 </v-list-tile-action>
35 <v-list-tile-content> 35 <v-list-tile-content>
36 <v-list-tile-title>{{ item.title }}</v-list-tile-title> 36 <v-list-tile-title>{{ item.title }}</v-list-tile-title>
37 </v-list-tile-content> 37 </v-list-tile-content>
38 </v-list-tile> 38 </v-list-tile>
39 </v-list> 39 </v-list>
40 </v-menu> 40 </v-menu>
41 </v-toolbar> 41 </v-toolbar>
42 <v-tabs grow slider-color="black"> 42 <v-tabs grow slider-color="black">
43 <v-tab 43 <v-tab
44 ripple 44 ripple
45 @click="activeTab('existing')" 45 @click="activeTab('existing')"
46 v-bind:class="{ active: isActive }" 46 v-bind:class="{ active: isActive }"
47 id="tab" 47 id="tab"
48 class="subheading" 48 class="subheading"
49 >Existing Section</v-tab> 49 >Existing Section</v-tab>
50 <v-tab 50 <v-tab
51 ripple 51 ripple
52 @click="activeTab('new')" 52 @click="activeTab('new')"
53 v-bind:class="{ active: newActive }" 53 v-bind:class="{ active: newActive }"
54 id="tab1"User 54 id="tab1"User
55 class="subheading" 55 class="subheading"
56 >Add New Section</v-tab> 56 >Add New Section</v-tab>
57 57
58 <!-- ****** EDIT SECTION ****** --> 58 <!-- ****** EDIT SECTION ****** -->
59 <v-tab-item> 59 <v-tab-item>
60 <v-snackbar 60 <v-snackbar
61 :timeout="timeout" 61 :timeout="timeout"
62 :top="y === 'top'" 62 :top="y === 'top'"
63 :right="x === 'right'" 63 :right="x === 'right'"
64 :vertical="mode === 'vertical'" 64 :vertical="mode === 'vertical'"
65 v-model="snackbar" 65 v-model="snackbar"
66 color="success" 66 color="success"
67 >{{ text }}</v-snackbar> 67 >{{ text }}</v-snackbar>
68 <v-dialog v-model="dialog" max-width="600px"> 68 <v-dialog v-model="dialog" max-width="600px">
69 <v-toolbar color="white"> 69 <v-toolbar color="white">
70 <v-spacer></v-spacer> 70 <v-spacer></v-spacer>
71 <v-toolbar-title>Edit Section</v-toolbar-title> 71 <v-toolbar-title>Edit Section</v-toolbar-title>
72 <v-spacer></v-spacer> 72 <v-spacer></v-spacer>
73 </v-toolbar> 73 </v-toolbar>
74 <v-card> 74 <v-card>
75 <v-card-text> 75 <v-card-text>
76 <v-container> 76 <v-container>
77 <v-layout wrap justify-center> 77 <v-layout wrap justify-center>
78 <v-flex xs12 sm9> 78 <v-flex xs12 sm9>
79 <v-form ref="forms" v-model="validEdit" lazy-validation> 79 <v-form ref="forms" v-model="validEdit" lazy-validation>
80 <v-layout style="position:relative;"> 80 <v-layout style="position:relative;">
81 <v-flex xs4 class="pt-4 subheading pl-3"> 81 <v-flex xs4 class="pt-4 subheading pl-3">
82 <label>Class Name:</label> 82 <label>Class Name:</label>
83 </v-flex> 83 </v-flex>
84 <v-flex xs8> 84 <v-flex xs8>
85 <v-autocomplete 85 <v-autocomplete
86 :items="addclass" 86 :items="addclass"
87 :label="editedItem.classData.classNum" 87 :label="editedItem.classData.classNum"
88 v-model="select" 88 v-model="select"
89 item-text="classNum" 89 item-text="classNum"
90 :rules="classRules" 90 :rules="classRules"
91 item-value="_id" 91 item-value="_id"
92 name="Select Class" 92 name="Select Class"
93 ></v-autocomplete> 93 ></v-autocomplete>
94 </v-flex> 94 </v-flex>
95 </v-layout> 95 </v-layout>
96 <v-layout style="position:relative;"> 96 <v-layout style="position:relative;">
97 <v-flex xs4 class="pt-4 subheading"> 97 <v-flex xs4 class="pt-4 subheading">
98 <label>Section Name:</label> 98 <label>Section Name:</label>
99 </v-flex> 99 </v-flex>
100 <v-flex xs8> 100 <v-flex xs8>
101 <v-text-field 101 <v-text-field
102 v-model="editedItem.name" 102 v-model="editedItem.name"
103 placeholder="fill your Section Name" 103 placeholder="fill your Section Name"
104 type="text" 104 type="text"
105 required 105 required
106 ></v-text-field> 106 ></v-text-field>
107 </v-flex> 107 </v-flex>
108 108
109 </v-layout> 109 </v-layout>
110 <v-card-actions> 110 <v-card-actions>
111 <v-btn round dark @click.native="close">Cancel</v-btn> 111 <v-btn round dark @click.native="close">Cancel</v-btn>
112 <v-spacer></v-spacer> 112 <v-spacer></v-spacer>
113 <v-btn round dark @click="save">Save</v-btn> 113 <v-btn round dark @click="save">Save</v-btn>
114 </v-card-actions> 114 </v-card-actions>
115 </v-form> 115 </v-form>
116 </v-flex> 116 </v-flex>
117 </v-layout> 117 </v-layout>
118 </v-container> 118 </v-container>
119 </v-card-text> 119 </v-card-text>
120 </v-card> 120 </v-card>
121 </v-dialog> 121 </v-dialog>
122 122
123 <!-- ****** PROFILE VIEW SECTION DATA ****** --> 123 <!-- ****** PROFILE VIEW SECTION DATA ****** -->
124 124
125 <v-dialog v-model="dialog1" max-width="600px"> 125 <v-dialog v-model="dialog1" max-width="600px">
126 <v-toolbar color="white"> 126 <v-toolbar color="white">
127 <v-spacer></v-spacer> 127 <v-spacer></v-spacer>
128 <v-toolbar-title>Section</v-toolbar-title> 128 <v-toolbar-title>Section</v-toolbar-title>
129 <v-spacer></v-spacer> 129 <v-spacer></v-spacer>
130 <v-icon @click="close1">close</v-icon> 130 <v-icon @click="close1">close</v-icon>
131 </v-toolbar> 131 </v-toolbar>
132 <v-card> 132 <v-card>
133 <v-flex align-center justify-center layout text-xs-center> 133 <v-flex align-center justify-center layout text-xs-center>
134 <v-avatar size="50px" style="position:absolute; top:20px;"> 134 <v-avatar size="50px" style="position:absolute; top:20px;">
135 <img src="/static/icon/user.png"> 135 <img src="/static/icon/user.png">
136 </v-avatar> 136 </v-avatar>
137 </v-flex> 137 </v-flex>
138 <v-card-text> 138 <v-card-text>
139 <v-container grid-list-md> 139 <v-container grid-list-md>
140 <v-layout wrap> 140 <v-layout wrap>
141 <v-flex><br><br> 141 <v-flex><br><br>
142 <v-layout> 142 <v-layout>
143 <v-flex xs5 sm6> 143 <v-flex xs5 sm6>
144 <h5 class="right my-1">Class Name:</h5> 144 <h5 class="right my-1">Class Name:</h5>
145 </v-flex> 145 </v-flex>
146 <v-flex sm6 xs8> 146 <v-flex sm6 xs8>
147 <h5 class="my-1">{{ editedItem.classData.classNum }}</h5> 147 <h5 class="my-1">{{ editedItem.classData.classNum }}</h5>
148 </v-flex> 148 </v-flex>
149 </v-layout> 149 </v-layout>
150 <v-layout> 150 <v-layout>
151 <v-flex xs5 sm6> 151 <v-flex xs5 sm6>
152 <h5 class="right my-1">Section Name:</h5> 152 <h5 class="right my-1">Section Name:</h5>
153 </v-flex> 153 </v-flex>
154 <v-flex sm6 xs8> 154 <v-flex sm6 xs8>
155 <h5 class="my-1">{{ editedItem.name }}</h5> 155 <h5 class="my-1">{{ editedItem.name }}</h5>
156 </v-flex> 156 </v-flex>
157 </v-layout> 157 </v-layout>
158 </v-flex> 158 </v-flex>
159 </v-layout> 159 </v-layout>
160 </v-container> 160 </v-container>
161 </v-card-text> 161 </v-card-text>
162 </v-card> 162 </v-card>
163 </v-dialog> 163 </v-dialog>
164 164
165 <v-snackbar 165 <v-snackbar
166 :timeout="timeout" 166 :timeout="timeout"
167 :top="y === 'top'" 167 :top="y === 'top'"
168 :right="x === 'right'" 168 :right="x === 'right'"
169 :vertical="mode === 'vertical'" 169 :vertical="mode === 'vertical'"
170 v-model="snackbar" 170 v-model="snackbar"
171 color="success" 171 color="success"
172 >{{ text }}</v-snackbar> 172 >{{ text }}</v-snackbar>
173 173
174 <!-- ****** EXISTING-USERS StudentS Table ****** --> 174 <!-- ****** EXISTING-USERS StudentS Table ****** -->
175 175
176 <v-data-table 176 <v-data-table
177 :headers="headers" 177 :headers="headers"
178 :items="desserts" 178 :items="desserts"
179 :pagination.sync="pagination" 179 :pagination.sync="pagination"
180 :search="search" 180 :search="search"
181 > 181 >
182 <template slot="items" slot-scope="props"> 182 <template slot="items" slot-scope="props">
183 <td id="td" class="text-xs-center">{{ props.index}}</td> 183 <td id="td" class="text-xs-center">{{ props.index}}</td>
184 <td id="td" class="text-xs-center">{{ props.item.classData.classNum}}</td> 184 <td id="td" class="text-xs-center">{{ props.item.classData.classNum}}</td>
185 <td id="td" class="text-xs-center">{{ props.item.name}}</td> 185 <td id="td" class="text-xs-center">{{ props.item.name}}</td>
186 <td class="text-xs-center"> 186 <td class="text-xs-center">
187 <span> 187 <span>
188 <img 188 <img
189 style="cursor:pointer; width:25px; height:18px; " 189 style="cursor:pointer; width:25px; height:18px; "
190 class="mr-5" 190 class="mr-5"
191 @click="profile(props.item)" 191 @click="profile(props.item)"
192 src="/static/icon/eye1.png" 192 src="/static/icon/eye1.png"
193 > 193 >
194 <img 194 <img
195 style="cursor:pointer; width:20px; height:18px; " 195 style="cursor:pointer; width:20px; height:18px; "
196 class="mr-5" 196 class="mr-5"
197 @click="editItem(props.item)" 197 @click="editItem(props.item)"
198 src="/static/icon/edit1.png" 198 src="/static/icon/edit1.png"
199 > 199 >
200 <img 200 <img
201 style="cursor:pointer; height:20px; " 201 style="cursor:pointer; height:20px; "
202 class="mr-5" 202 class="mr-5"
203 @click="deleteItem(props.item)" 203 @click="deleteItem(props.item)"
204 src="/static/icon/delete1.png" 204 src="/static/icon/delete1.png"
205 > 205 >
206 </span> 206 </span>
207 </td> 207 </td>
208 </template> 208 </template>
209 <v-alert 209 <v-alert
210 slot="no-results" 210 slot="no-results"
211 :value="true" 211 :value="true"
212 color="error" 212 color="error"
213 icon="warning" 213 icon="warning"
214 >Your search for "{{ search }}" found no results.</v-alert> 214 >Your search for "{{ search }}" found no results.</v-alert>
215 </v-data-table> 215 </v-data-table>
216 </v-tab-item> 216 </v-tab-item>
217 217
218 <!-- ****** ADD multiple Students ****** --> 218 <!-- ****** ADD multiple Students ****** -->
219 219
220 <v-tab-item> 220 <v-tab-item>
221 <v-container> 221 <v-container>
222 <v-snackbar 222 <v-snackbar
223 :timeout="timeout" 223 :timeout="timeout"
224 :top="y === 'top'" 224 :top="y === 'top'"
225 :right="x === 'right'" 225 :right="x === 'right'"
226 :vertical="mode === 'vertical'" 226 :vertical="mode === 'vertical'"
227 v-model="snackbar" 227 v-model="snackbar"
228 color="success" 228 color="success"
229 >{{ text }}</v-snackbar> 229 >{{ text }}</v-snackbar>
230 <v-flex xs12 sm8 offset-sm2 class="top"> 230 <v-flex xs12 sm8 offset-sm2 class="top">
231 <v-card flat> 231 <v-card flat>
232 <v-container fluid fill-height> 232 <v-container fluid fill-height>
233 <v-layout align-center> 233 <v-layout align-center>
234 <v-flex xs12> 234 <v-flex xs12>
235 <v-flex offset-xs5> 235 <v-flex offset-xs5>
236 <v-avatar size="55px"> 236 <v-avatar size="55px">
237 <img src="/static/icon/user.png"> 237 <img src="/static/icon/user.png">
238 </v-avatar> 238 </v-avatar>
239 </v-flex> 239 </v-flex>
240 <v-form ref="form" v-model="valid" lazy-validation> 240 <v-form ref="form" v-model="valid" lazy-validation>
241 <v-layout> 241 <v-layout>
242 <v-flex xs4 class="pt-4 subheading"> 242 <v-flex xs4 class="pt-4 subheading">
243 <label class="right">Section Name:</label> 243 <label class="right">Section Name:</label>
244 </v-flex> 244 </v-flex>
245 <v-flex xs6 class="ml-3"> 245 <v-flex xs6 class="ml-3">
246 <v-text-field 246 <v-text-field
247 v-model="editedItem.name" 247 v-model="add.name"
248 placeholder="fill your Section Name" 248 placeholder="fill your Section Name"
249 name="name" 249 name="name"
250 type="text" 250 type="text"
251 :rules="nameRules" 251 :rules="nameRules"
252 required 252 required
253 ></v-text-field> 253 ></v-text-field>
254 </v-flex> 254 </v-flex>
255 </v-layout> 255 </v-layout>
256 <v-layout> 256 <v-layout>
257 <v-flex xs4 class="pt-4 subheading"> 257 <v-flex xs4 class="pt-4 subheading">
258 <label class="right">Select Class:</label> 258 <label class="right">Select Class:</label>
259 </v-flex> 259 </v-flex>
260 <v-flex xs6 class="ml-3"> 260 <v-flex xs6 class="ml-3">
261 <v-autocomplete 261 <v-autocomplete
262 :items="addclass" 262 :items="addclass"
263 label="Select Class" 263 label="Select Class"
264 v-model="select" 264 v-model="select"
265 item-text="classNum" 265 item-text="classNum"
266 item-value="_id" 266 item-value="_id"
267 name="Select Class" 267 name="Select Class"
268 :rules="classRules" 268 :rules="classRules"
269 required 269 required
270 ></v-autocomplete> 270 ></v-autocomplete>
271 </v-flex> 271 </v-flex>
272 </v-layout> 272 </v-layout>
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">Session:</label> 275 <label class="right">Session:</label>
276 </v-flex> 276 </v-flex>
277 <v-flex xs6 class="ml-3"> 277 <v-flex xs6 class="ml-3">
278 <v-text-field 278 <v-text-field
279 v-model="editedItem.session" 279 v-model="add.session"
280 placeholder="fill your Session" 280 placeholder="fill your Session"
281 name="name" 281 name="name"
282 type="text" 282 type="text"
283 :rules="sessionRules" 283 :rules="sessionRules"
284 required 284 required
285 ></v-text-field> 285 ></v-text-field>
286 </v-flex> 286 </v-flex>
287 </v-layout> 287 </v-layout>
288 <v-layout> 288 <v-layout>
289 <v-flex xs12 sm9 offset-sm2> 289 <v-flex xs12 sm9 offset-sm2>
290 <v-card-actions> 290 <v-card-actions>
291 <v-btn @click="clear" round dark>clear</v-btn> 291 <v-btn @click="clear" round dark>clear</v-btn>
292 <v-spacer></v-spacer> 292 <v-spacer></v-spacer>
293 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 293 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
294 </v-card-actions> 294 </v-card-actions>
295 </v-flex> 295 </v-flex>
296 </v-layout> 296 </v-layout>
297 </v-form> 297 </v-form>
298 </v-flex> 298 </v-flex>
299 </v-layout> 299 </v-layout>
300 </v-container> 300 </v-container>
301 </v-card> 301 </v-card>
302 </v-flex> 302 </v-flex>
303 </v-container> 303 </v-container>
304 </v-tab-item> 304 </v-tab-item>
305 </v-tabs> 305 </v-tabs>
306 <div class="loader" v-if="showLoader"> 306 <div class="loader" v-if="showLoader">
307 <v-progress-circular indeterminate color="white"></v-progress-circular> 307 <v-progress-circular indeterminate color="white"></v-progress-circular>
308 </div> 308 </div>
309 </v-app> 309 </v-app>
310 </template> 310 </template>
311 311
312 <script> 312 <script>
313 import http from "@/Services/http.js"; 313 import http from "@/Services/http.js";
314 import Util from "@/util"; 314 import Util from "@/util";
315 315
316 export default { 316 export default {
317 data: () => ({ 317 data: () => ({
318 snackbar: false, 318 snackbar: false,
319 y: "top", 319 y: "top",
320 x: "right", 320 x: "right",
321 mode: "", 321 mode: "",
322 timeout: 3000, 322 timeout: 3000,
323 text: "", 323 text: "",
324 showLoader:false, 324 showLoader:false,
325 loading: false, 325 loading: false,
326 date:null, 326 date:null,
327 search: '', 327 search: '',
328 dialog: false, 328 dialog: false,
329 dialog1: false, 329 dialog1: false,
330 valid: true, 330 valid: true,
331 validEdit:true, 331 validEdit:true,
332 isActive: true, 332 isActive: true,
333 newActive: false, 333 newActive: false,
334 details: [], 334 details: [],
335 AddUsercredentials: {}, 335 AddUsercredentials: {},
336 pagination: { 336 pagination: {
337 rowsPerPage: 15 337 rowsPerPage: 15
338 }, 338 },
339 nameRules: [v => !!v || " Section Name is required"], 339 nameRules: [v => !!v || " Section Name is required"],
340 classRules: [v => !!v || " Class Name is required"], 340 classRules: [v => !!v || " Class Name is required"],
341 sessionRules: [v => !!v || " Session is required"], 341 sessionRules: [v => !!v || " Session is required"],
342 headers: [ 342 headers: [
343 { 343 {
344 text: "No", 344 text: "No",
345 align: "center", 345 align: "center",
346 sortable: false, 346 sortable: false,
347 value: "No" 347 value: "No"
348 }, 348 },
349 { text: "Class Name", value: "classData.classNum", sortable: false, align: "center" }, 349 { text: "Class Name", value: "classData.classNum", sortable: false, align: "center" },
350 { text: "Section Name", value: "name", sortable: false, align: "center" }, 350 { text: "Section Name", value: "name", sortable: false, align: "center" },
351 { text: "Action", value: "", sortable: false, align: "center" } 351 { text: "Action", value: "", sortable: false, align: "center" }
352 ], 352 ],
353 desserts: [], 353 desserts: [],
354 addclass:[], 354 addclass:[],
355 select:'', 355 select:'',
356 selectId:'', 356 selectId:'',
357 editedIndex: -1, 357 editedIndex: -1,
358 editedItem: { 358 editedItem: {
359 classData:{ 359 classData:{
360 classNum:"", 360 classNum:"",
361 }, 361 },
362 name:'', 362 name:'',
363 session:new Date().getFullYear() 363 session:new Date().getFullYear()
364 364
365 }, 365 },
366 add: {
367 classData:{
368 classNum:"",
369 },
370 name:'',
371 session:new Date().getFullYear()
372
373 },
366 items: [ 374 items: [
367 { 375 {
368 href: "/changepassword", 376 href: "/changepassword",
369 title: "Change Password", 377 title: "Change Password",
370 click: e => { 378 click: e => {
371 console.log(e); 379 console.log(e);
372 } 380 }
373 }, 381 },
374 { 382 {
375 href: "#", 383 href: "#",
376 title: "Logout", 384 title: "Logout",
377 click: e => { 385 click: e => {
378 window.getApp.$emit("APP_LOGOUT"); 386 window.getApp.$emit("APP_LOGOUT");
379 } 387 }
380 } 388 }
381 ] 389 ]
382 }), 390 }),
383 methods: { 391 methods: {
384 getSectionList() { 392 getSectionList() {
385 this.showLoader = true; 393 this.showLoader = true;
386 var token = this.$store.state.token; 394 var token = this.$store.state.token;
387 http() 395 http()
388 .get("/getAllSections", { 396 .get("/getAllSections", {
389 headers: { Authorization: "Bearer " + token } 397 headers: { Authorization: "Bearer " + token }
390 }) 398 })
391 .then(response => { 399 .then(response => {
392 this.desserts = response.data.data; 400 this.desserts = response.data.data;
393 this.showLoader = false; 401 this.showLoader = false;
394 // console.log("getAllSections=====>",response.data.data) 402 // console.log("getAllSections=====>",response.data.data)
395 403
396 }) 404 })
397 .catch(err => { 405 .catch(err => {
398 // console.log("err====>", err); 406 // console.log("err====>", err);
399 this.showLoader = false; 407 this.showLoader = false;
400 this.$router.replace({ path: '/' }); 408 // this.$router.replace({ path: '/' });
401 }); 409 });
402 }, 410 },
403 editItem(item) { 411 editItem(item) {
404 this.editedIndex = this.desserts.indexOf(item); 412 this.editedIndex = this.desserts.indexOf(item);
405 this.editedItem = Object.assign({}, item); 413 this.editedItem = Object.assign({}, item);
406 console.log(this.editedItem) 414 console.log(this.editedItem)
407 this.dialog = true; 415 this.dialog = true;
408 }, 416 },
409 profile(item) { 417 profile(item) {
410 this.editedIndex = this.desserts.indexOf(item); 418 this.editedIndex = this.desserts.indexOf(item);
411 this.editedItem = Object.assign({}, item); 419 this.editedItem = Object.assign({}, item);
412 this.dialog1 = true; 420 this.dialog1 = true;
413 }, 421 },
414 deleteItem(item) { 422 deleteItem(item) {
415 let deleteStudent = { 423 let deleteStudent = {
416 sectionId: item._id 424 sectionId: item._id
417 }; 425 };
418 http() 426 http()
419 .delete("/deleteSection", confirm('Are you sure you want to delete this?') && { params: deleteStudent }) 427 .delete("/deleteSection", confirm('Are you sure you want to delete this?') && { params: deleteStudent })
420 .then(response => { 428 .then(response => {
421 // console.log("deleteUers",deleteStudent) 429 // console.log("deleteUers",deleteStudent)
422 if ((this.snackbar = true)) { 430 if ((this.snackbar = true)) {
423 this.text = "Successfully delete Existing User"; 431 this.text = "Successfully delete Existing User";
424 } 432 }
425 this.getSectionList(); 433 this.getSectionList();
426 }) 434 })
427 .catch(error => { 435 .catch(error => {
428 // console.log(error); 436 // console.log(error);
429 }); 437 });
430 }, 438 },
431 activeTab(type) { 439 activeTab(type) {
432 switch (type) { 440 switch (type) {
433 case "existing": 441 case "existing":
434 this.newActive = false; 442 this.newActive = false;
435 this.isActive = true; 443 this.isActive = true;
436 break; 444 break;
437 445
438 default: 446 default:
439 this.newActive = true; 447 this.newActive = true;
440 this.isActive = false; 448 this.isActive = false;
441 break; 449 break;
442 } 450 }
443 }, 451 },
444 close() { 452 close() {
445 this.dialog = false; 453 this.dialog = false;
446 setTimeout(() => { 454 setTimeout(() => {
447 this.editedItem = Object.assign({}, this.defaultItem); 455 this.editedItem = Object.assign({}, this.defaultItem);
448 this.editedIndex = -1; 456 this.editedIndex = -1;
449 }, 300); 457 }, 300);
450 }, 458 },
451 close1() { 459 close1() {
452 this.dialog1 = false; 460 this.dialog1 = false;
453 }, 461 },
454 close2() { 462 close2() {
455 this.dialog2 = false; 463 this.dialog2 = false;
456 }, 464 },
457 submit() { 465 submit() {
458 if (this.$refs.forms.validate()) { 466 if (this.$refs.forms.validate()) {
459 let addSection = { 467 let addSection = {
460 name: this.editedItem.name, 468 name: this.add.name,
461 classId: this.select, 469 classId: this.select,
462 session:this.editedItem.session 470 session:this.add.session
463 }; 471 };
464 console.log(addSection) 472 console.log(addSection)
465 http() 473 http()
466 .post("/createSection", addSection) 474 .post("/createSection", addSection)
467 .then(response => { 475 .then(response => {
468 console.log(addSection) 476 console.log(addSection)
469 // this.getStudentList(); 477 this.getSectionList();
470 if (this.snackbar = true) { 478 if (this.snackbar = true) {
471 this.text = "New user added successfully"; 479 this.text = "New user added successfully";
472 } 480 }
473 481
474 this.clear(); 482 this.clear();
475 }) 483 })
476 .catch(error => { 484 .catch(error => {
477 // console.log(error); 485 // console.log(error);
478 if (this.snackbar = true) { 486 if (this.snackbar = true) {
479 this.text = error.response.data.message; 487 this.text = error.response.data.message;
480 } 488 }
481 }); 489 });
482 } 490 }
483 }, 491 },
484 mail() { 492 mail() {
485 }, 493 },
486 download() { 494 download() {
487 }, 495 },
488 clear() { 496 clear() {
489 this.$refs.form.reset(); 497 this.$refs.form.reset();
490 }, 498 },
491 save() { 499 save() {
492 // if (this.$refs.form.validate()) { 500 // if (this.$refs.form.validate()) {
493 let editStudent = { 501 let editStudent = {
494 name: this.editedItem.name, 502 name: this.editedItem.name,
495 classId: this.select, 503 classId: this.select,
496 sectionId: this.editedItem._id 504 sectionId: this.editedItem._id
497 }; 505 };
498 http() 506 http()
499 .put("/updateSection", editStudent) 507 .put("/updateSection", editStudent)
500 .then(response => { 508 .then(response => {
501 // console.log("editStudent",editStudent); 509 // console.log("editStudent",editStudent);
502 if ((this.snackbar = true)) { 510 if ((this.snackbar = true)) {
503 this.text = "Successfully Edit Existing User"; 511 this.text = "Successfully Edit Existing User";
504 } 512 }
505 this.getSectionList(); 513 this.getSectionList();
506 // this.showLoader = false; 514 // this.showLoader = false;
507 }) 515 })
508 .catch(error => { 516 .catch(error => {
509 this.text = error.response.data.message; 517 this.text = error.response.data.message;
510 // console.log(error); 518 // console.log(error);
511 }); 519 });
512 this.close(); 520 this.close();
513 // } 521 // }
514 }, 522 },
515 handleDrawerToggle() { 523 handleDrawerToggle() {
516 window.getApp.$emit("APP_DRAWER_TOGGLED"); 524 window.getApp.$emit("APP_DRAWER_TOGGLED");
517 }, 525 },
518 handleFullScreen() { 526 handleFullScreen() {
519 Util.toggleFullScreen(); 527 Util.toggleFullScreen();
520 } 528 }
521 }, 529 },
522 mounted() { 530 mounted() {
523 this.getSectionList(); 531 this.getSectionList();
524 532
525 var token = this.$store.state.token; 533 var token = this.$store.state.token;
526 http() 534 http()
527 .get("/getClassesList", { 535 .get("/getClassesList", {
528 headers: { Authorization: "Bearer " + token } 536 headers: { Authorization: "Bearer " + token }
529 }) 537 })
530 .then(response => { 538 .then(response => {
531 this.addclass = response.data.data; 539 this.addclass = response.data.data;
532 console.log("getClassesList=====>",this.addclass) 540 console.log("getClassesList=====>",this.addclass)
533 541
534 }) 542 })
535 .catch(err => { 543 .catch(err => {
536 // console.log("err====>", err); 544 // console.log("err====>", err);
537 this.$router.replace({ path: '/' }); 545 this.$router.replace({ path: '/' });
538 }); 546 });
539 }, 547 },
540 548
541 computed:{ 549 computed:{
542 toolbarColor() { 550 toolbarColor() {
543 return this.$vuetify.options.extra.mainNav; 551 return this.$vuetify.options.extra.mainNav;
544 } 552 }
545 } 553 }
546 }; 554 };
547 </script> 555 </script>
548 <style scoped> 556 <style scoped>
549 .v-tabs__div { 557 .v-tabs__div {
550 text-transform: none; 558 text-transform: none;
551 } 559 }
552 .v-input__prepend-outer { 560 .v-input__prepend-outer {
553 margin-right: 0px !important; 561 margin-right: 0px !important;
554 } 562 }
555 .v-card__actions .v-btn { 563 .v-card__actions .v-btn {
556 margin: 0 15px; 564 margin: 0 15px;
557 min-width: 120px; 565 min-width: 120px;
558 } 566 }
559 .primary { 567 .primary {
560 background-color: #aaa !important; 568 background-color: #aaa !important;
561 border-color: #aaa !important; 569 border-color: #aaa !important;
562 } 570 }
563 h4 { 571 h4 {
564 background-repeat: no-repeat; 572 background-repeat: no-repeat;
565 padding: 8px; 573 padding: 8px;
566 margin: auto; 574 margin: auto;
567 font-size: 25px; 575 font-size: 25px;
568 } 576 }
569 #name { 577 #name {
570 position: absolute; 578 position: absolute;
571 left: 100px; 579 left: 100px;
572 top: 17px; 580 top: 17px;
573 } 581 }
574 #icon { 582 #icon {
575 position: absolute; 583 position: absolute;
576 right: 8px; 584 right: 8px;
577 top: 8px; 585 top: 8px;
578 } 586 }
579 #m { 587 #m {
580 position: relative; 588 position: relative;
581 left: 135px; 589 left: 135px;
582 top: -15px; 590 top: -15px;
583 } 591 }
584 #G { 592 #G {
585 position: absolute; 593 position: absolute;
586 top: 38px; 594 top: 38px;
587 color: white; 595 color: white;
588 } 596 }
589 #bt { 597 #bt {
590 position: relative; 598 position: relative;
591 top: -20px; 599 top: -20px;
592 left: 115px; 600 left: 115px;
593 } 601 }
594 #e { 602 #e {
595 position: relative; 603 position: relative;
596 top: 5px; 604 top: 5px;
597 right: -30px; 605 right: -30px;
598 height: 17px; 606 height: 17px;
599 cursor: pointer; 607 cursor: pointer;
600 } 608 }
601 #d { 609 #d {
602 position: relative; 610 position: relative;
603 top: 5px; 611 top: 5px;
604 right: -70px; 612 right: -70px;
605 height: 17px; 613 height: 17px;
606 cursor: pointer; 614 cursor: pointer;
607 } 615 }
608 #td { 616 #td {
609 border: 1px solid #dddddd; 617 border: 1px solid #dddddd;
610 text-align: left; 618 text-align: left;
611 padding: 8px; 619 padding: 8px;
612 } 620 }
613 #dialog { 621 #dialog {
614 height: 550px; 622 height: 550px;
615 } 623 }
616 .active { 624 .active {
617 background-color: black; 625 background-color: black;
618 color: white !important; 626 color: white !important;
619 } 627 }
620 .activebtn { 628 .activebtn {
621 color: black !important; 629 color: black !important;
622 } 630 }
623 #flex { 631 #flex {
624 height: 300px; 632 height: 300px;
625 } 633 }
626 .top{ 634 .top{
627 margin-top:100px; 635 margin-top:100px;
628 } 636 }
629 .v-tabs__item a{ 637 .v-tabs__item a{
630 font-size:16px !important; 638 font-size:16px !important;
631 } 639 }
632 @media screen and (max-width: 769px){ 640 @media screen and (max-width: 769px){
633 .top{ 641 .top{
634 margin-top:0 !important; 642 margin-top:0 !important;
635 } 643 }
636 .userSearch .v-icon { 644 .userSearch .v-icon {
637 font-size: 20px !important; 645 font-size: 20px !important;
638 margin-left: 20px ; 646 margin-left: 20px ;
639 } 647 }
640 } 648 }
641 @media screen and (max-width: 380px) { 649 @media screen and (max-width: 380px) {
642 .pl-3 { 650 .pl-3 {
643 padding-left: 0px !important; 651 padding-left: 0px !important;
644 } 652 }
645 .right { 653 .right {
646 float: none !important; 654 float: none !important;
647 } 655 }
648 .subheading { 656 .subheading {
649 font-size: 14px !important; 657 font-size: 14px !important;
650 } 658 }
651 .v-card__actions .v-btn{ 659 .v-card__actions .v-btn{
652 margin: 0 0px; 660 margin: 0 0px;
653 min-width: 100px; 661 min-width: 100px;
654 } 662 }
655 /* .searchIcon .v-icon { 663 /* .searchIcon .v-icon {
656 font-size: 20px; 664 font-size: 20px;
657 margin-left: 20px; 665 margin-left: 20px;
658 } */ 666 } */
659 .subheading { 667 .subheading {
660 font-size: 12px !important; 668 font-size: 12px !important;
661 } 669 }
662 h5 { 670 h5 {
663 font-size: 13px; 671 font-size: 13px;
664 } 672 }
665 } 673 }
666 .v-icon{ 674 .v-icon{
667 font-size:30px; 675 font-size:30px;
668 } 676 }
669 @media screen and (min-width: 1270px){ 677 @media screen and (min-width: 1270px){
670 .hide{ 678 .hide{
671 display: none; 679 display: none;
672 } 680 }
673 /* } 681 /* }
674 @media screen and (max-width: 962px) { 682 @media screen and (max-width: 962px) {
675 .imglogo{ 683 .imglogo{
676 position: absolute; 684 position: absolute;
677 top: 13px; 685 top: 13px;
678 left: 13px !important; 686 left: 13px !important;
679 width: 70px; 687 width: 70px;
680 height: 24px; 688 height: 24px;
681 } */ 689 } */
682 } 690 }
683 @media screen and (max-width: 420px){ 691 @media screen and (max-width: 420px){
684 .userSearch .v-text-field .v-label{ 692 .userSearch .v-text-field .v-label{
685 line-height: 24px !important; 693 line-height: 24px !important;
686 } 694 }
687 .userSearch .v-label{ 695 .userSearch .v-label{
688 font-size: 13px !important; 696 font-size: 13px !important;
689 } 697 }
690 .v-list__tile { 698 .v-list__tile {
691 font-size:14px; 699 font-size:14px;
692 padding: 0 10px; 700 padding: 0 10px;
693 } 701 }
694 .name{ 702 .name{
695 font-size:15px; 703 font-size:15px;
696 } 704 }
697 } 705 }
698 </style> 706 </style>
src/pages/Teachers/teachers.vue
Diff comments   View file @2b0e316
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-toolbar class="fixcolors" fixed app> 3 <v-toolbar class="fixcolors" fixed app>
4 <v-toolbar-title class="ml-0 pl-3"> 4 <v-toolbar-title class="ml-0 pl-3">
5 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon> 5 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon>
6 </v-toolbar-title> 6 </v-toolbar-title>
7 <!-- ****** SEARCH ALL Teachers ****** --> 7 <!-- ****** SEARCH ALL Teachers ****** -->
8 <v-flex xs7 sm3 class="userSearch"> 8 <v-flex xs7 sm3 class="userSearch">
9 <v-text-field 9 <v-text-field
10 flat 10 flat
11 append-icon="search" 11 append-icon="search"
12 label="Find your Teachers" 12 label="Find your Teachers"
13 v-model="search" 13 v-model="search"
14 color="white" 14 color="white"
15 dark 15 dark
16 ></v-text-field> 16 ></v-text-field>
17 </v-flex> 17 </v-flex>
18 <v-spacer></v-spacer> 18 <v-spacer></v-spacer>
19 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition"> 19 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
20 <v-btn icon large flat slot="activator"> 20 <v-btn icon large flat slot="activator">
21 <v-avatar size="40px"> 21 <v-avatar size="40px">
22 <img src="/static/icon/user.png"> 22 <img src="/static/icon/user.png">
23 </v-avatar> 23 </v-avatar>
24 </v-btn> 24 </v-btn>
25 <v-list class="pa-0"> 25 <v-list class="pa-0">
26 <v-list-tile 26 <v-list-tile
27 v-for="(item,index) in items" 27 v-for="(item,index) in items"
28 :to="!item.href ? { name: item.name } : null" 28 :to="!item.href ? { name: item.name } : null"
29 :href="item.href" 29 :href="item.href"
30 @click="item.click" 30 @click="item.click"
31 ripple="ripple" 31 ripple="ripple"
32 :disabled="item.disabled" 32 :disabled="item.disabled"
33 :target="item.target" 33 :target="item.target"
34 rel="noopener" 34 rel="noopener"
35 :key="index" 35 :key="index"
36 > 36 >
37 <v-list-tile-action v-if="item.icon"> 37 <v-list-tile-action v-if="item.icon">
38 <v-icon>{{ item.icon }}</v-icon> 38 <v-icon>{{ item.icon }}</v-icon>
39 </v-list-tile-action> 39 </v-list-tile-action>
40 <v-list-tile-content> 40 <v-list-tile-content>
41 <v-list-tile-title>{{ item.title }}</v-list-tile-title> 41 <v-list-tile-title>{{ item.title }}</v-list-tile-title>
42 </v-list-tile-content> 42 </v-list-tile-content>
43 </v-list-tile> 43 </v-list-tile>
44 </v-list> 44 </v-list>
45 </v-menu> 45 </v-menu>
46 </v-toolbar> 46 </v-toolbar>
47 <v-tabs grow slider-color="black"> 47 <v-tabs grow slider-color="black">
48 <v-tab 48 <v-tab
49 ripple 49 ripple
50 @click="activeTab('existing')" 50 @click="activeTab('existing')"
51 v-bind:class="{ active: isActive }" 51 v-bind:class="{ active: isActive }"
52 id="tab" 52 id="tab"
53 class="subheading" 53 class="subheading"
54 >Existing Teachers</v-tab> 54 >Existing Teachers</v-tab>
55 <v-tab 55 <v-tab
56 ripple 56 ripple
57 @click="activeTab('new')" 57 @click="activeTab('new')"
58 v-bind:class="{ active: newActive }" 58 v-bind:class="{ active: newActive }"
59 id="tab1" 59 id="tab1"
60 User 60 User
61 class="subheading" 61 class="subheading"
62 >Add New Teachers</v-tab> 62 >Add New Teachers</v-tab>
63 <!-- ****** EDIT TEACHERS DETAILS ****** --> 63 <!-- ****** EDIT TEACHERS DETAILS ****** -->
64 <v-tab-item> 64 <v-tab-item>
65 <v-snackbar 65 <v-snackbar
66 :timeout="timeout" 66 :timeout="timeout"
67 :top="y === 'top'" 67 :top="y === 'top'"
68 :right="x === 'right'" 68 :right="x === 'right'"
69 :vertical="mode === 'vertical'" 69 :vertical="mode === 'vertical'"
70 v-model="snackbar" 70 v-model="snackbar"
71 color="success" 71 color="success"
72 >{{ text }}</v-snackbar> 72 >{{ text }}</v-snackbar>
73 <v-dialog v-model="dialog" max-width="1100px"> 73 <v-dialog v-model="dialog" max-width="1100px">
74 <v-flex xs12 sm12 class="my-4"> 74 <v-flex xs12 sm12 class="my-4">
75 <v-toolbar color="white"> 75 <v-toolbar color="white">
76 <v-spacer></v-spacer> 76 <v-spacer></v-spacer>
77 <v-toolbar-title>Edit Teacher Profile</v-toolbar-title> 77 <v-toolbar-title>Edit Teacher Profile</v-toolbar-title>
78 <v-spacer></v-spacer> 78 <v-spacer></v-spacer>
79 </v-toolbar> 79 </v-toolbar>
80 <v-card flat> 80 <v-card flat>
81 <v-form ref="form"> 81 <v-form ref="form">
82 <v-container fluid> 82 <v-container fluid>
83 <v-layout> 83 <v-layout>
84 <v-flex 84 <v-flex
85 xs12 85 xs12
86 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" 86 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
87 > 87 >
88 <v-avatar size="100px"> 88 <v-avatar size="100px">
89 <img src="/static/icon/user.png" v-if="!imageUrl"> 89 <img src="/static/icon/user.png" v-if="!imageUrl">
90 </v-avatar> 90 </v-avatar>
91 <input 91 <input
92 type="file" 92 type="file"
93 style="display: none" 93 style="display:none"
94 ref="image" 94 ref="image"
95 accept="image/*" 95 accept="image/*"
96 @change="onFilePicked" 96 @change="onFilePicked"
97 > 97 >
98 <img 98 <img
99 :src="imageData.imageUrl"
100 height="150"
101 v-if="imageUrl" 99 v-if="imageUrl"
100 :src="imageUrl"
101 height="150"
102 style="border-radius:50%; width:200px" 102 style="border-radius:50%; width:200px"
103 > 103 >
104 </v-flex> 104 </v-flex>
105 </v-layout> 105 </v-layout>
106 <v-layout> 106 <v-layout>
107 <v-flex xs12 sm6> 107 <v-flex xs12 sm6>
108 <v-layout> 108 <v-layout>
109 <v-flex xs4 class="pt-4 subheading"> 109 <v-flex xs4 class="pt-4 subheading">
110 <label class="right">Full Name:</label> 110 <label class="right">Full Name:</label>
111 </v-flex> 111 </v-flex>
112 <v-flex xs8 class="ml-3"> 112 <v-flex xs8 class="ml-3">
113 <v-text-field 113 <v-text-field
114 v-model="editedItem.name" 114 v-model="editedItem.name"
115 placeholder="fill your full Name" 115 placeholder="fill your full Name"
116 name="name" 116 name="name"
117 type="text" 117 type="text"
118 required 118 required
119 ></v-text-field> 119 ></v-text-field>
120 </v-flex> 120 </v-flex>
121 </v-layout> 121 </v-layout>
122 </v-flex> 122 </v-flex>
123 <v-flex xs12 sm6> 123 <v-flex xs12 sm6>
124 <v-layout> 124 <v-layout>
125 <v-flex xs4 class="pt-4 subheading"> 125 <v-flex xs4 class="pt-4 subheading">
126 <label class="right">Email ID:</label> 126 <label class="right">Email ID:</label>
127 </v-flex> 127 </v-flex>
128 <v-flex xs8 class="ml-3"> 128 <v-flex xs8 class="ml-3">
129 <v-text-field 129 <v-text-field
130 placeholder="fill your email" 130 placeholder="fill your email"
131 v-model="editedItem.email" 131 v-model="editedItem.email"
132 type="text" 132 type="text"
133 name="email" 133 name="email"
134 required 134 required
135 ></v-text-field> 135 ></v-text-field>
136 </v-flex> 136 </v-flex>
137 </v-layout> 137 </v-layout>
138 </v-flex> 138 </v-flex>
139 </v-layout> 139 </v-layout>
140 <v-layout> 140 <v-layout>
141 <v-flex xs12 sm6> 141 <v-flex xs12 sm6>
142 <v-layout> 142 <v-layout>
143 <v-flex xs4 class="pt-4 subheading"> 143 <v-flex xs4 class="pt-4 subheading">
144 <label class="right">Date of Birth:</label> 144 <label class="right">Date of Birth:</label>
145 </v-flex> 145 </v-flex>
146 <v-flex xs8 class="ml-3"> 146 <v-flex xs8 class="ml-3">
147 <v-menu 147 <v-menu
148 ref="menu" 148 ref="menu"
149 :close-on-content-click="false" 149 :close-on-content-click="false"
150 v-model="menu2" 150 v-model="menu2"
151 :nudge-right="40" 151 :nudge-right="40"
152 lazy 152 lazy
153 transition="scale-transition" 153 transition="scale-transition"
154 offset-y 154 offset-y
155 full-width 155 full-width
156 min-width="290px" 156 min-width="290px"
157 > 157 >
158 <v-text-field 158 <v-text-field
159 slot="activator" 159 slot="activator"
160 v-model="editedItem.dob" 160 v-model="editedItem.dob"
161 placeholder="Select date" 161 placeholder="Select date"
162 ></v-text-field> 162 ></v-text-field>
163 <v-date-picker 163 <v-date-picker
164 ref="picker" 164 ref="picker"
165 v-model="editedItem.dob" 165 v-model="editedItem.dob"
166 :max="new Date().toISOString().substr(0, 10)" 166 :max="new Date().toISOString().substr(0, 10)"
167 min="1950-01-01" 167 min="1950-01-01"
168 @input="menu2 = false" 168 @input="menu2 = false"
169 ></v-date-picker> 169 ></v-date-picker>
170 </v-menu> 170 </v-menu>
171 </v-flex> 171 </v-flex>
172 </v-layout> 172 </v-layout>
173 </v-flex> 173 </v-flex>
174 <v-flex xs12 sm6> 174 <v-flex xs12 sm6>
175 <v-layout> 175 <v-layout>
176 <v-flex xs4 class="pt-4 subheading"> 176 <v-flex xs4 class="pt-4 subheading">
177 <label class="right">City:</label> 177 <label class="right">City:</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.city" 181 v-model="editedItem.city"
182 placeholder="fill your City Name" 182 placeholder="fill your City Name"
183 name="City" 183 name="City"
184 type="text" 184 type="text"
185 required 185 required
186 ></v-text-field> 186 ></v-text-field>
187 </v-flex> 187 </v-flex>
188 </v-layout> 188 </v-layout>
189 </v-flex> 189 </v-flex>
190 </v-layout> 190 </v-layout>
191 <v-layout> 191 <v-layout>
192 <v-flex xs12 sm6> 192 <v-flex xs12 sm6>
193 <v-layout> 193 <v-layout>
194 <v-flex xs4 class="pt-4 subheading"> 194 <v-flex xs4 class="pt-4 subheading">
195 <label class="right">State:</label> 195 <label class="right">State:</label>
196 </v-flex> 196 </v-flex>
197 <v-flex xs8 class="ml-3"> 197 <v-flex xs8 class="ml-3">
198 <v-text-field 198 <v-text-field
199 v-model="editedItem.state" 199 v-model="editedItem.state"
200 placeholder="fill your State Name" 200 placeholder="fill your State Name"
201 name="state" 201 name="state"
202 type="text" 202 type="text"
203 required 203 required
204 ></v-text-field> 204 ></v-text-field>
205 </v-flex> 205 </v-flex>
206 </v-layout> 206 </v-layout>
207 </v-flex> 207 </v-flex>
208 <v-flex xs12 sm6> 208 <v-flex xs12 sm6>
209 <v-layout> 209 <v-layout>
210 <v-flex xs4 class="pt-4 subheading"> 210 <v-flex xs4 class="pt-4 subheading">
211 <label class="right">PinCode:</label> 211 <label class="right">PinCode:</label>
212 </v-flex> 212 </v-flex>
213 <v-flex xs8 class="ml-3"> 213 <v-flex xs8 class="ml-3">
214 <v-text-field 214 <v-text-field
215 v-model="editedItem.pincode" 215 v-model="editedItem.pincode"
216 placeholder="fill your pincode" 216 placeholder="fill your pincode"
217 name="pincode" 217 name="pincode"
218 type="number" 218 type="number"
219 required 219 required
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-layout> 224 </v-layout>
225 <v-layout> 225 <v-layout>
226 <v-flex xs12 sm6> 226 <v-flex xs12 sm6>
227 <v-layout> 227 <v-layout>
228 <v-flex xs4 class="pt-4 subheading"> 228 <v-flex xs4 class="pt-4 subheading">
229 <label class="right">Mobile NO:</label> 229 <label class="right">Mobile NO:</label>
230 </v-flex> 230 </v-flex>
231 <v-flex xs8 class="ml-3"> 231 <v-flex xs8 class="ml-3">
232 <v-text-field 232 <v-text-field
233 v-model="editedItem.mobileNo" 233 v-model="editedItem.mobileNo"
234 placeholder="fill your MobileNo" 234 placeholder="fill your MobileNo"
235 name="mobileNo" 235 name="mobileNo"
236 type="number" 236 type="number"
237 required 237 required
238 ></v-text-field> 238 ></v-text-field>
239 </v-flex> 239 </v-flex>
240 </v-layout> 240 </v-layout>
241 </v-flex> 241 </v-flex>
242 <v-flex xs12 sm6> 242 <v-flex xs12 sm6>
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">Select Country:</label> 245 <label class="right">Select Country:</label>
246 </v-flex> 246 </v-flex>
247 <v-flex xs8 class="ml-3"> 247 <v-flex xs8 class="ml-3">
248 <v-autocomplete 248 <v-autocomplete
249 v-model="editedItem.country" 249 v-model="editedItem.country"
250 :items="countries" 250 :items="countries"
251 placeholder="Select Country Name" 251 placeholder="Select Country Name"
252 required 252 required
253 ></v-autocomplete> 253 ></v-autocomplete>
254 </v-flex> 254 </v-flex>
255 </v-layout> 255 </v-layout>
256 </v-flex> 256 </v-flex>
257 </v-layout> 257 </v-layout>
258 <v-layout> 258 <v-layout>
259 <v-flex xs12 sm6> 259 <v-flex xs12 sm6>
260 <v-layout> 260 <v-layout>
261 <v-flex xs4 class="pt-4 subheading"> 261 <v-flex xs4 class="pt-4 subheading">
262 <label class="right">Join Date:</label> 262 <label class="right">Join Date:</label>
263 </v-flex> 263 </v-flex>
264 <v-flex xs8 class="ml-3"> 264 <v-flex xs8 class="ml-3">
265 <v-menu 265 <v-menu
266 ref="menu" 266 ref="menu"
267 :close-on-content-click="false" 267 :close-on-content-click="false"
268 v-model="menu3" 268 v-model="menu3"
269 :nudge-right="40" 269 :nudge-right="40"
270 lazy 270 lazy
271 transition="scale-transition" 271 transition="scale-transition"
272 offset-y 272 offset-y
273 full-width 273 full-width
274 min-width="290px" 274 min-width="290px"
275 > 275 >
276 <v-text-field 276 <v-text-field
277 slot="activator" 277 slot="activator"
278 v-model="editedItem.joinDate" 278 v-model="editedItem.joinDate"
279 placeholder="Select date" 279 placeholder="Select date"
280 ></v-text-field> 280 ></v-text-field>
281 <v-date-picker 281 <v-date-picker
282 ref="picker" 282 ref="picker"
283 v-model="editedItem.joinDate" 283 v-model="editedItem.joinDate"
284 :max="new Date().toISOString().substr(0, 10)" 284 :max="new Date().toISOString().substr(0, 10)"
285 min="1950-01-01" 285 min="1950-01-01"
286 @input="menu3 = false" 286 @input="menu3 = false"
287 ></v-date-picker> 287 ></v-date-picker>
288 </v-menu> 288 </v-menu>
289 </v-flex> 289 </v-flex>
290 </v-layout> 290 </v-layout>
291 </v-flex> 291 </v-flex>
292 <v-flex xs12 sm6> 292 <v-flex xs12 sm6>
293 <v-layout> 293 <v-layout>
294 <v-flex xs4 class="pt-4 subheading"> 294 <v-flex xs4 class="pt-4 subheading">
295 <label class="right">Uplaod Image:</label> 295 <label class="right">Uplaod Image:</label>
296 </v-flex> 296 </v-flex>
297 <v-flex xs8 class="ml-3"> 297 <v-flex xs8 class="ml-3">
298 <v-text-field 298 <v-text-field
299 label="Select Image" 299 label="Select Image"
300 @click="pickFile" 300 @click="pickFile"
301 v-model="imageName" 301 v-model="imageName"
302 prepend-icon="attach_file" 302 append-icon="attach_file"
303 ></v-text-field> 303 ></v-text-field>
304 </v-flex> 304 </v-flex>
305 </v-layout> 305 </v-layout>
306 </v-flex> 306 </v-flex>
307 </v-layout> 307 </v-layout>
308 <v-layout> 308 <v-layout>
309 <v-flex xs12 sm12> 309 <v-flex xs12 sm12>
310 <v-layout> 310 <v-layout>
311 <v-flex xs3 class="pt-4 subheading pl-3" style="max-width: 17%;"> 311 <v-flex xs3 class="pt-4 subheading pl-3" style="max-width: 17%;">
312 <label class>Present Address:</label> 312 <label class>Present Address:</label>
313 </v-flex> 313 </v-flex>
314 <v-flex xs12> 314 <v-flex xs12>
315 <v-text-field 315 <v-text-field
316 name="input-4-3" 316 name="input-4-3"
317 v-model="editedItem.presentAddress" 317 v-model="editedItem.presentAddress"
318 placeholder="fill Your present Address" 318 placeholder="fill Your present Address"
319 required 319 required
320 ></v-text-field> 320 ></v-text-field>
321 </v-flex> 321 </v-flex>
322 </v-layout> 322 </v-layout>
323 </v-flex> 323 </v-flex>
324 <v-flex xs12 sm12> 324 <v-flex xs12 sm12>
325 <v-layout> 325 <v-layout>
326 <v-flex xs3 class="pt-4 subheading" style="max-width: 17%;"> 326 <v-flex xs3 class="pt-4 subheading" style="max-width: 17%;">
327 <label>Permanent Address:</label> 327 <label>Permanent Address:</label>
328 </v-flex> 328 </v-flex>
329 <v-flex xs12> 329 <v-flex xs12>
330 <v-text-field 330 <v-text-field
331 name="input-4-3" 331 name="input-4-3"
332 v-model="editedItem.permanentAddress" 332 v-model="editedItem.permanentAddress"
333 placeholder="fill Your Permanent Address" 333 placeholder="fill Your Permanent Address"
334 required 334 required
335 ></v-text-field> 335 ></v-text-field>
336 </v-flex> 336 </v-flex>
337 </v-layout> 337 </v-layout>
338 </v-flex> 338 </v-flex>
339 </v-layout> 339 </v-layout>
340 <v-layout> 340 <v-layout>
341 <v-flex xs12 sm12> 341 <v-flex xs12 sm12>
342 <v-card-actions> 342 <v-card-actions>
343 <v-btn round dark @click.native="close">Cancel</v-btn> 343 <v-btn round dark @click.native="close">Cancel</v-btn>
344 <v-spacer></v-spacer> 344 <v-spacer></v-spacer>
345 <v-btn round dark @click="save">Save</v-btn> 345 <v-btn round dark @click="save">Save</v-btn>
346 </v-card-actions> 346 </v-card-actions>
347 </v-flex> 347 </v-flex>
348 </v-layout> 348 </v-layout>
349 </v-container> 349 </v-container>
350 </v-form> 350 </v-form>
351 </v-card> 351 </v-card>
352 </v-flex> 352 </v-flex>
353 </v-dialog> 353 </v-dialog>
354 354
355 <!-- ****** PROFILE VIEW TEACHERS DETAILS ****** --> 355 <!-- ****** PROFILE VIEW TEACHERS DETAILS ****** -->
356 356
357 <v-dialog v-model="dialog1" max-width="600px"> 357 <v-dialog v-model="dialog1" max-width="600px">
358 <v-toolbar color="white"> 358 <v-toolbar color="white">
359 <v-spacer></v-spacer> 359 <v-spacer></v-spacer>
360 <v-toolbar-title>Profile</v-toolbar-title> 360 <v-toolbar-title>Profile</v-toolbar-title>
361 <v-spacer></v-spacer> 361 <v-spacer></v-spacer>
362 <v-icon @click="close1">close</v-icon> 362 <v-icon @click="close1">close</v-icon>
363 </v-toolbar> 363 </v-toolbar>
364 <v-card> 364 <v-card>
365 <v-flex align-center justify-center layout text-xs-center> 365 <v-flex align-center justify-center layout text-xs-center>
366 <v-avatar size="50px" style="position:absolute; top:20px;"> 366 <v-avatar size="50px" style="position:absolute; top:20px;">
367 <img src="/static/icon/user.png"> 367 <img src="/static/icon/user.png">
368 </v-avatar> 368 </v-avatar>
369 </v-flex> 369 </v-flex>
370 <v-card-text> 370 <v-card-text>
371 <v-container grid-list-md> 371 <v-container grid-list-md>
372 <v-layout wrap> 372 <v-layout wrap>
373 <v-flex> 373 <v-flex>
374 <br> 374 <br>
375 <br> 375 <br>
376 <v-layout> 376 <v-layout>
377 <v-flex xs5 sm6> 377 <v-flex xs5 sm6>
378 <h5 class="right my-1">Full Name:</h5> 378 <h5 class="right my-1">Full Name:</h5>
379 </v-flex> 379 </v-flex>
380 <v-flex sm6 xs8> 380 <v-flex sm6 xs8>
381 <h5 class="my-1">{{ editedItem.name }}</h5> 381 <h5 class="my-1">{{ editedItem.name }}</h5>
382 </v-flex> 382 </v-flex>
383 </v-layout> 383 </v-layout>
384 <v-layout> 384 <v-layout>
385 <v-flex xs5 sm6> 385 <v-flex xs5 sm6>
386 <h5 class="right my-1">Email:</h5> 386 <h5 class="right my-1">Email:</h5>
387 </v-flex> 387 </v-flex>
388 <v-flex sm6 xs8> 388 <v-flex sm6 xs8>
389 <h5 class="my-1">{{ editedItem.email }}</h5> 389 <h5 class="my-1">{{ editedItem.email }}</h5>
390 </v-flex> 390 </v-flex>
391 </v-layout> 391 </v-layout>
392 <v-layout> 392 <v-layout>
393 <v-flex xs5 sm6> 393 <v-flex xs5 sm6>
394 <h5 class="right my-1">City:</h5> 394 <h5 class="right my-1">City:</h5>
395 </v-flex> 395 </v-flex>
396 <v-flex sm6 xs8> 396 <v-flex sm6 xs8>
397 <h5 class="my-1">{{ editedItem.city }}</h5> 397 <h5 class="my-1">{{ editedItem.city }}</h5>
398 </v-flex> 398 </v-flex>
399 </v-layout> 399 </v-layout>
400 <v-layout> 400 <v-layout>
401 <v-flex xs5 sm6> 401 <v-flex xs5 sm6>
402 <h5 class="right my-1">State:</h5> 402 <h5 class="right my-1">State:</h5>
403 </v-flex> 403 </v-flex>
404 <v-flex sm6 xs8> 404 <v-flex sm6 xs8>
405 <h5 class="my-1">{{ editedItem.state }}</h5> 405 <h5 class="my-1">{{ editedItem.state }}</h5>
406 </v-flex> 406 </v-flex>
407 </v-layout> 407 </v-layout>
408 <v-layout> 408 <v-layout>
409 <v-flex xs5 sm6> 409 <v-flex xs5 sm6>
410 <h5 class="right my-1">Country:</h5> 410 <h5 class="right my-1">Country:</h5>
411 </v-flex> 411 </v-flex>
412 <v-flex sm6 xs8> 412 <v-flex sm6 xs8>
413 <h5 class="my-1">{{ editedItem.country }}</h5> 413 <h5 class="my-1">{{ editedItem.country }}</h5>
414 </v-flex> 414 </v-flex>
415 </v-layout> 415 </v-layout>
416 <v-layout> 416 <v-layout>
417 <v-flex xs5 sm6> 417 <v-flex xs5 sm6>
418 <h5 class="right my-1">Pincode:</h5> 418 <h5 class="right my-1">Pincode:</h5>
419 </v-flex> 419 </v-flex>
420 <v-flex sm6 xs8> 420 <v-flex sm6 xs8>
421 <h5 class="my-1">{{ editedItem.pincode }}</h5> 421 <h5 class="my-1">{{ editedItem.pincode }}</h5>
422 </v-flex> 422 </v-flex>
423 </v-layout> 423 </v-layout>
424 <v-layout> 424 <v-layout>
425 <v-flex xs5 sm6> 425 <v-flex xs5 sm6>
426 <h5 class="right my-1">Mobile No:</h5> 426 <h5 class="right my-1">Mobile No:</h5>
427 </v-flex> 427 </v-flex>
428 <v-flex sm6 xs8> 428 <v-flex sm6 xs8>
429 <h5 class="my-1">{{ editedItem.mobileNo }}</h5> 429 <h5 class="my-1">{{ editedItem.mobileNo }}</h5>
430 </v-flex> 430 </v-flex>
431 </v-layout> 431 </v-layout>
432 <v-layout> 432 <v-layout>
433 <v-flex xs5 sm6> 433 <v-flex xs5 sm6>
434 <h5 class="right my-1">Join Date:</h5> 434 <h5 class="right my-1">Join Date:</h5>
435 </v-flex> 435 </v-flex>
436 <v-flex sm6 xs8> 436 <v-flex sm6 xs8>
437 <h5 class="my-1">{{ editedItem.joinDate }}</h5> 437 <h5 class="my-1">{{ editedItem.joinDate }}</h5>
438 </v-flex> 438 </v-flex>
439 </v-layout> 439 </v-layout>
440 <v-layout> 440 <v-layout>
441 <v-flex xs5 sm6> 441 <v-flex xs5 sm6>
442 <h5 class="right my-1">Date Of Birth:</h5> 442 <h5 class="right my-1">Date Of Birth:</h5>
443 </v-flex> 443 </v-flex>
444 <v-flex sm6 xs8> 444 <v-flex sm6 xs8>
445 <h5 class="my-1">{{ editedItem.dob }}</h5> 445 <h5 class="my-1">{{ editedItem.dob }}</h5>
446 </v-flex> 446 </v-flex>
447 </v-layout> 447 </v-layout>
448 <v-layout> 448 <v-layout>
449 <v-flex xs6 sm6 > 449 <v-flex xs6 sm6 >
450 <h5 class="right my-1">Permanent Address:</h5> 450 <h5 class="right my-1">Permanent Address:</h5>
451 </v-flex> 451 </v-flex>
452 <v-flex sm6 xs8> 452 <v-flex sm6 xs8>
453 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5> 453 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5>
454 </v-flex> 454 </v-flex>
455 </v-layout> 455 </v-layout>
456 <v-layout> 456 <v-layout>
457 <v-flex xs6 sm6 > 457 <v-flex xs6 sm6 >
458 <h5 class="right my-1">present Address:</h5> 458 <h5 class="right my-1">present Address:</h5>
459 </v-flex> 459 </v-flex>
460 <v-flex sm6 xs8> 460 <v-flex sm6 xs8>
461 <h5 class="my-1">{{ editedItem.presentAddress }}</h5> 461 <h5 class="my-1">{{ editedItem.presentAddress }}</h5>
462 </v-flex> 462 </v-flex>
463 </v-layout> 463 </v-layout>
464 </v-flex> 464 </v-flex>
465 </v-layout> 465 </v-layout>
466 </v-container> 466 </v-container>
467 </v-card-text> 467 </v-card-text>
468 </v-card> 468 </v-card>
469 </v-dialog> 469 </v-dialog>
470 <v-snackbar 470 <v-snackbar
471 :timeout="timeout" 471 :timeout="timeout"
472 :top="y === 'top'" 472 :top="y === 'top'"
473 :right="x === 'right'" 473 :right="x === 'right'"
474 :vertical="mode === 'vertical'" 474 :vertical="mode === 'vertical'"
475 v-model="snackbar" 475 v-model="snackbar"
476 color="success" 476 color="success"
477 >{{ text }}</v-snackbar> 477 >{{ text }}</v-snackbar>
478 478
479 <!-- ****** EXISTING-Teachers TABLE DATA****** --> 479 <!-- ****** EXISTING-Teachers TABLE DATA****** -->
480 <v-data-table 480 <v-data-table
481 :headers="headers" 481 :headers="headers"
482 :items="desserts" 482 :items="desserts"
483 :pagination.sync="pagination" 483 :pagination.sync="pagination"
484 :search="search" 484 :search="search"
485 > 485 >
486 <template slot="items" slot-scope="props"> 486 <template slot="items" slot-scope="props">
487 <td id="td" class="text-xs-center">{{ props.index}}</td> 487 <td id="td" class="text-xs-center">{{ props.index}}</td>
488 <td id="td" class="text-xs-center">{{ props.item.name}}</td> 488 <td id="td" class="text-xs-center">{{ props.item.name}}</td>
489 <td id="td" class="text-xs-center">{{ props.item.email }}</td> 489 <td id="td" class="text-xs-center">{{ props.item.email }}</td>
490 <td id="td" class="text-xs-center">{{ props.item.dob }}</td> 490 <td id="td" class="text-xs-center">{{ props.item.dob }}</td>
491 <td id="td" class="text-xs-center">{{ props.item.joinDate}}</td> 491 <td id="td" class="text-xs-center">{{ props.item.joinDate}}</td>
492 <td id="td" class="text-xs-center">{{ props.item.mobileNo }}</td> 492 <td id="td" class="text-xs-center">{{ props.item.mobileNo }}</td>
493 <td class="text-xs-center"> 493 <td class="text-xs-center">
494 <span> 494 <span>
495 <img 495 <img
496 style="cursor:pointer; width:25px; height:18px; " 496 style="cursor:pointer; width:25px; height:18px; "
497 class="mr-5" 497 class="mr-5"
498 @click="profile(props.item)" 498 @click="profile(props.item)"
499 src="/static/icon/eye1.png" 499 src="/static/icon/eye1.png"
500 > 500 >
501 <img 501 <img
502 style="cursor:pointer; width:20px; height:18px; " 502 style="cursor:pointer; width:20px; height:18px; "
503 class="mr-5" 503 class="mr-5"
504 @click="editItem(props.item)" 504 @click="editItem(props.item)"
505 src="/static/icon/edit1.png" 505 src="/static/icon/edit1.png"
506 > 506 >
507 <img 507 <img
508 style="cursor:pointer; height:20px; " 508 style="cursor:pointer; height:20px; "
509 class="mr-5" 509 class="mr-5"
510 @click="deleteItem(props.item)" 510 @click="deleteItem(props.item)"
511 src="/static/icon/delete1.png" 511 src="/static/icon/delete1.png"
512 > 512 >
513 </span> 513 </span>
514 </td> 514 </td>
515 </template> 515 </template>
516 <v-alert 516 <v-alert
517 slot="no-results" 517 slot="no-results"
518 :value="true" 518 :value="true"
519 color="error" 519 color="error"
520 icon="warning" 520 icon="warning"
521 >Your search for "{{ search }}" found no results.</v-alert> 521 >Your search for "{{ search }}" found no results.</v-alert>
522 </v-data-table> 522 </v-data-table>
523 </v-tab-item> 523 </v-tab-item>
524 524
525 <!-- ****** Add Teachers Data****** --> 525 <!-- ****** Add Teachers Data****** -->
526 <v-tab-item> 526 <v-tab-item>
527 <v-container> 527 <v-container>
528 <v-snackbar 528 <v-snackbar
529 :timeout="timeout" 529 :timeout="timeout"
530 :top="y === 'top'" 530 :top="y === 'top'"
531 :right="x === 'right'" 531 :right="x === 'right'"
532 :vertical="mode === 'vertical'" 532 :vertical="mode === 'vertical'"
533 v-model="snackbar" 533 v-model="snackbar"
534 color="success" 534 color="success"
535 >{{ text }}</v-snackbar> 535 >{{ text }}</v-snackbar>
536 <v-flex xs12 sm12 class="my-4"> 536 <v-flex xs12 sm12 class="my-4">
537 <v-card flat> 537 <v-card flat>
538 <v-form ref="form" v-model="valid" lazy-validation> 538 <v-form ref="form" v-model="valid" lazy-validation>
539 <v-container fluid> 539 <v-container fluid>
540 <v-layout> 540 <v-layout>
541 <v-flex 541 <v-flex
542 xs12 542 xs12
543 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" 543 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
544 > 544 >
545 <v-avatar size="100px"> 545 <v-avatar size="100px">
546 <img src="/static/icon/user.png" v-if="!imageUrl"> 546 <img src="/static/icon/user.png" v-if="!imageUrl">
547 </v-avatar> 547 </v-avatar>
548 <!-- <input 548 <!-- <input
549 type="file" 549 type="file"
550 style="display: none" 550 style="display: none"
551 ref="image" 551 ref="image"
552 accept="image/*" 552 accept="image/*"
553 @change="onFilePicked" 553 @change="onFilePicked"
554 > --> 554 > -->
555 <img 555 <img
556 :src="imageData.imageUrl" 556 :src="imageUrl"
557 height="150" 557 height="150"
558 v-if="imageUrl" 558 v-if="imageUrl"
559 style="border-radius:50%; width:200px" 559 style="border-radius:50%; width:200px"
560 > 560 >
561 </v-flex> 561 </v-flex>
562 </v-layout> 562 </v-layout>
563 <v-layout> 563 <v-layout>
564 <v-flex xs12 sm6> 564 <v-flex xs12 sm6>
565 <v-layout> 565 <v-layout>
566 <v-flex xs4 class="pt-4 subheading"> 566 <v-flex xs4 class="pt-4 subheading">
567 <label class="right">Full Name:</label> 567 <label class="right">Full Name:</label>
568 </v-flex> 568 </v-flex>
569 <v-flex xs8 class="ml-3"> 569 <v-flex xs8 class="ml-3">
570 <v-text-field 570 <v-text-field
571 v-model="addTeachers.name" 571 v-model="addTeachers.name"
572 placeholder="fill your full Name" 572 placeholder="fill your full Name"
573 name="name" 573 name="name"
574 type="text" 574 type="text"
575 :rules="nameRules" 575 :rules="nameRules"
576 required 576 required
577 ></v-text-field> 577 ></v-text-field>
578 </v-flex> 578 </v-flex>
579 </v-layout> 579 </v-layout>
580 </v-flex> 580 </v-flex>
581 <v-flex xs12 sm6> 581 <v-flex xs12 sm6>
582 <v-layout> 582 <v-layout>
583 <v-flex xs4 class="pt-4 subheading"> 583 <v-flex xs4 class="pt-4 subheading">
584 <label class="right">Email ID:</label> 584 <label class="right">Email ID:</label>
585 </v-flex> 585 </v-flex>
586 <v-flex xs8 class="ml-3"> 586 <v-flex xs8 class="ml-3">
587 <v-text-field 587 <v-text-field
588 placeholder="fill your email" 588 placeholder="fill your email"
589 :rules="emailRules" 589 :rules="emailRules"
590 v-model="addTeachers.email" 590 v-model="addTeachers.email"
591 type="text" 591 type="text"
592 name="email" 592 name="email"
593 required 593 required
594 ></v-text-field> 594 ></v-text-field>
595 </v-flex> 595 </v-flex>
596 </v-layout> 596 </v-layout>
597 </v-flex> 597 </v-flex>
598 </v-layout> 598 </v-layout>
599 <v-layout> 599 <v-layout>
600 <v-flex xs12 sm6> 600 <v-flex xs12 sm6>
601 <v-layout> 601 <v-layout>
602 <v-flex xs4 class="pt-4 subheading"> 602 <v-flex xs4 class="pt-4 subheading">
603 <label class="right">Date of Birth:</label> 603 <label class="right">Date of Birth:</label>
604 </v-flex> 604 </v-flex>
605 <v-flex xs8 class="ml-3"> 605 <v-flex xs8 class="ml-3">
606 <v-menu 606 <v-menu
607 ref="menu" 607 ref="menu"
608 :close-on-content-click="false" 608 :close-on-content-click="false"
609 v-model="menu" 609 v-model="menu"
610 :nudge-right="40" 610 :nudge-right="40"
611 lazy 611 lazy
612 transition="scale-transition" 612 transition="scale-transition"
613 offset-y 613 offset-y
614 full-width 614 full-width
615 min-width="290px" 615 min-width="290px"
616 > 616 >
617 <v-text-field 617 <v-text-field
618 slot="activator" 618 slot="activator"
619 :rules="dateRules" 619 :rules="dateRules"
620 v-model="addTeachers.date" 620 v-model="addTeachers.date"
621 placeholder="Select date" 621 placeholder="Select date"
622 ></v-text-field> 622 ></v-text-field>
623 <v-date-picker 623 <v-date-picker
624 ref="picker" 624 ref="picker"
625 v-model="addTeachers.date" 625 v-model="addTeachers.date"
626 :max="new Date().toISOString().substr(0, 10)" 626 :max="new Date().toISOString().substr(0, 10)"
627 min="1950-01-01" 627 min="1950-01-01"
628 @input="menu = false" 628 @input="menu = false"
629 ></v-date-picker> 629 ></v-date-picker>
630 </v-menu> 630 </v-menu>
631 </v-flex> 631 </v-flex>
632 </v-layout> 632 </v-layout>
633 </v-flex> 633 </v-flex>
634 <v-flex xs12 sm6> 634 <v-flex xs12 sm6>
635 <v-layout> 635 <v-layout>
636 <v-flex xs4 class="pt-4 subheading"> 636 <v-flex xs4 class="pt-4 subheading">
637 <label class="right">City:</label> 637 <label class="right">City:</label>
638 </v-flex> 638 </v-flex>
639 <v-flex xs8 class="ml-3"> 639 <v-flex xs8 class="ml-3">
640 <v-text-field 640 <v-text-field
641 v-model="addTeachers.city" 641 v-model="addTeachers.city"
642 placeholder="fill your City Name" 642 placeholder="fill your City Name"
643 name="City" 643 name="City"
644 type="text" 644 type="text"
645 :rules="cityRules" 645 :rules="cityRules"
646 required 646 required
647 ></v-text-field> 647 ></v-text-field>
648 </v-flex> 648 </v-flex>
649 </v-layout> 649 </v-layout>
650 </v-flex> 650 </v-flex>
651 </v-layout> 651 </v-layout>
652 <v-layout> 652 <v-layout>
653 <v-flex xs12 sm6> 653 <v-flex xs12 sm6>
654 <v-layout> 654 <v-layout>
655 <v-flex xs4 class="pt-4 subheading"> 655 <v-flex xs4 class="pt-4 subheading">
656 <label class="right">State:</label> 656 <label class="right">State:</label>
657 </v-flex> 657 </v-flex>
658 <v-flex xs8 class="ml-3"> 658 <v-flex xs8 class="ml-3">
659 <v-text-field 659 <v-text-field
660 v-model="addTeachers.state" 660 v-model="addTeachers.state"
661 placeholder="fill your State Name" 661 placeholder="fill your State Name"
662 name="state" 662 name="state"
663 type="text" 663 type="text"
664 :rules="stateRules" 664 :rules="stateRules"
665 required 665 required
666 ></v-text-field> 666 ></v-text-field>
667 </v-flex> 667 </v-flex>
668 </v-layout> 668 </v-layout>
669 </v-flex> 669 </v-flex>
670 <v-flex xs12 sm6> 670 <v-flex xs12 sm6>
671 <v-layout> 671 <v-layout>
672 <v-flex xs4 class="pt-4 subheading"> 672 <v-flex xs4 class="pt-4 subheading">
673 <label class="right">PinCode:</label> 673 <label class="right">PinCode:</label>
674 </v-flex> 674 </v-flex>
675 <v-flex xs8 class="ml-3"> 675 <v-flex xs8 class="ml-3">
676 <v-text-field 676 <v-text-field
677 v-model="addTeachers.pincode" 677 v-model="addTeachers.pincode"
678 placeholder="fill your pincode" 678 placeholder="fill your pincode"
679 name="pincode" 679 name="pincode"
680 type="number" 680 type="number"
681 :rules="pincode" 681 :rules="pincode"
682 required 682 required
683 ></v-text-field> 683 ></v-text-field>
684 </v-flex> 684 </v-flex>
685 </v-layout> 685 </v-layout>
686 </v-flex> 686 </v-flex>
687 </v-layout> 687 </v-layout>
688 <v-layout> 688 <v-layout>
689 <v-flex xs12 sm6> 689 <v-flex xs12 sm6>
690 <v-layout> 690 <v-layout>
691 <v-flex xs4 class="pt-4 subheading"> 691 <v-flex xs4 class="pt-4 subheading">
692 <label class="right">Mobile NO:</label> 692 <label class="right">Mobile NO:</label>
693 </v-flex> 693 </v-flex>
694 <v-flex xs8 class="ml-3"> 694 <v-flex xs8 class="ml-3">
695 <v-text-field 695 <v-text-field
696 v-model="addTeachers.mobileNo" 696 v-model="addTeachers.mobileNo"
697 placeholder="fill your MobileNo" 697 placeholder="fill your MobileNo"
698 name="mobileNo" 698 name="mobileNo"
699 type="number" 699 type="number"
700 :rules="mobileNoRules" 700 :rules="mobileNoRules"
701 required 701 required
702 ></v-text-field> 702 ></v-text-field>
703 </v-flex> 703 </v-flex>
704 </v-layout> 704 </v-layout>
705 </v-flex> 705 </v-flex>
706 <v-flex xs12 sm6> 706 <v-flex xs12 sm6>
707 <v-layout> 707 <v-layout>
708 <v-flex xs4 class="pt-4 subheading"> 708 <v-flex xs4 class="pt-4 subheading">
709 <label class="right">Select Country:</label> 709 <label class="right">Select Country:</label>
710 </v-flex> 710 </v-flex>
711 <v-flex xs8 class="ml-3"> 711 <v-flex xs8 class="ml-3">
712 <v-autocomplete 712 <v-autocomplete
713 v-model="addTeachers.country" 713 v-model="addTeachers.country"
714 :rules="country" 714 :rules="country"
715 :items="countries" 715 :items="countries"
716 placeholder="Select Country Name" 716 placeholder="Select Country Name"
717 required 717 required
718 ></v-autocomplete> 718 ></v-autocomplete>
719 </v-flex> 719 </v-flex>
720 </v-layout> 720 </v-layout>
721 </v-flex> 721 </v-flex>
722 </v-layout> 722 </v-layout>
723 <v-layout> 723 <v-layout>
724 <v-flex xs12 sm6> 724 <v-flex xs12 sm6>
725 <v-layout> 725 <v-layout>
726 <v-flex xs4 class="pt-4 subheading"> 726 <v-flex xs4 class="pt-4 subheading">
727 <label class="right">Join Date</label> 727 <label class="right">Join Date</label>
728 </v-flex> 728 </v-flex>
729 <v-flex xs8 class="ml-3"> 729 <v-flex xs8 class="ml-3">
730 <v-menu 730 <v-menu
731 ref="menu1" 731 ref="menu1"
732 :close-on-content-click="false" 732 :close-on-content-click="false"
733 v-model="menu1" 733 v-model="menu1"
734 :nudge-right="40" 734 :nudge-right="40"
735 lazy 735 lazy
736 transition="scale-transition" 736 transition="scale-transition"
737 offset-y 737 offset-y
738 full-width 738 full-width
739 min-width="290px" 739 min-width="290px"
740 > 740 >
741 <v-text-field 741 <v-text-field
742 slot="activator" 742 slot="activator"
743 :rules="joinDateRules" 743 :rules="joinDateRules"
744 v-model="addTeachers.joinDate" 744 v-model="addTeachers.joinDate"
745 placeholder="Select date" 745 placeholder="Select date"
746 ></v-text-field> 746 ></v-text-field>
747 <v-date-picker 747 <v-date-picker
748 ref="picker" 748 ref="picker"
749 v-model="addTeachers.joinDate" 749 v-model="addTeachers.joinDate"
750 :max="new Date().toISOString().substr(0, 10)" 750 :max="new Date().toISOString().substr(0, 10)"
751 min="1950-01-01" 751 min="1950-01-01"
752 @input="menu1 = false" 752 @input="menu1 = false"
753 ></v-date-picker> 753 ></v-date-picker>
754 </v-menu> 754 </v-menu>
755 </v-flex> 755 </v-flex>
756 </v-layout> 756 </v-layout>
757 </v-flex> 757 </v-flex>
758 <v-flex xs12 sm6> 758 <v-flex xs12 sm6>
759 <v-layout> 759 <v-layout>
760 <v-flex xs4 class="pt-4 subheading"> 760 <v-flex xs4 class="pt-4 subheading">
761 <label class="right">Uplaod Image:</label> 761 <label class="right">Uplaod Image:</label>
762 </v-flex> 762 </v-flex>
763 <v-flex xs8 class="ml-3"> 763 <v-flex xs8 class="ml-3">
764 <v-text-field 764 <v-text-field
765 label="Select Image" 765 label="Select Image"
766 @click="pickFile" 766 @click="pickFile"
767 v-model="imageName" 767 v-model="imageName"
768 append-icon="attach_file" 768 append-icon="attach_file"
769 ></v-text-field> 769 ></v-text-field>
770 <input 770 <input
771 type="file" 771 type="file"
772 style="display: none" 772 style="display:none"
773 ref="image" 773 ref="image"
774 accept="image/*" 774 accept="image/*"
775 @change="onFilePicked" 775 @change="onFilePicked"
776 > 776 >
777 </v-flex> 777 </v-flex>
778 </v-layout> 778 </v-layout>
779 </v-flex> 779 </v-flex>
780 </v-layout> 780 </v-layout>
781 <v-layout> 781 <v-layout>
782 <v-flex xs12 sm12> 782 <v-flex xs12 sm12>
783 <v-layout> 783 <v-layout>
784 <v-flex xs3 class="pt-4 subheading pl-4" style="max-width: 17%;"> 784 <v-flex xs3 class="pt-4 subheading pl-4" style="max-width: 17%;">
785 <label class>Present Address:</label> 785 <label class>Present Address:</label>
786 </v-flex> 786 </v-flex>
787 <v-flex xs12 class="presentInput"> 787 <v-flex xs12 class="presentInput">
788 <v-text-field 788 <v-text-field
789 name="input-4-3" 789 name="input-4-3"
790 v-model="addTeachers.presentAddress" 790 v-model="addTeachers.presentAddress"
791 :rules="presentAddress" 791 :rules="presentAddress"
792 placeholder="fill Your present Address" 792 placeholder="fill Your present Address"
793 required 793 required
794 ></v-text-field> 794 ></v-text-field>
795 </v-flex> 795 </v-flex>
796 </v-layout> 796 </v-layout>
797 </v-flex> 797 </v-flex>
798 <v-flex xs12 sm12> 798 <v-flex xs12 sm12>
799 <v-layout> 799 <v-layout>
800 <v-flex xs3 class="pt-4 subheading" style="max-width: 17%;"> 800 <v-flex xs3 class="pt-4 subheading" style="max-width: 17%;">
801 <label>Permanent Address:</label> 801 <label>Permanent Address:</label>
802 </v-flex> 802 </v-flex>
803 <v-flex xs12 class="presentInput"> 803 <v-flex xs12 class="presentInput">
804 <v-text-field 804 <v-text-field
805 name="input-4-3" 805 name="input-4-3"
806 v-model="addTeachers.permanentAddress" 806 v-model="addTeachers.permanentAddress"
807 :rules="permanentAddress" 807 :rules="permanentAddress"
808 placeholder="fill Your Permanent Address" 808 placeholder="fill Your Permanent Address"
809 required 809 required
810 ></v-text-field> 810 ></v-text-field>
811 </v-flex> 811 </v-flex>
812 </v-layout> 812 </v-layout>
813 </v-flex> 813 </v-flex>
814 </v-layout> 814 </v-layout>
815 <v-layout> 815 <v-layout>
816 <v-flex xs12 sm12> 816 <v-flex xs12 sm12>
817 <v-card-actions> 817 <v-card-actions>
818 <v-btn @click="clear" round dark>clear</v-btn> 818 <v-btn @click="clear" round dark>clear</v-btn>
819 <v-spacer></v-spacer> 819 <v-spacer></v-spacer>
820 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 820 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
821 </v-card-actions> 821 </v-card-actions>
822 </v-flex> 822 </v-flex>
823 </v-layout> 823 </v-layout>
824 </v-container> 824 </v-container>
825 </v-form> 825 </v-form>
826 </v-card> 826 </v-card>
827 </v-flex> 827 </v-flex>
828 </v-container> 828 </v-container>
829 </v-tab-item> 829 </v-tab-item>
830 </v-tabs> 830 </v-tabs>
831 <div class="loader" v-if="showLoader"> 831 <div class="loader" v-if="showLoader">
832 <v-progress-circular indeterminate color="white"></v-progress-circular> 832 <v-progress-circular indeterminate color="white"></v-progress-circular>
833 </div> 833 </div>
834 </v-app> 834 </v-app>
835 </template> 835 </template>
836 836
837 <script> 837 <script>
838 // import AppToolbar from '@/components/AppToolbar'; 838 // import AppToolbar from '@/components/AppToolbar';
839 import http from "@/Services/http.js"; 839 import http from "@/Services/http.js";
840 import Util from "@/util"; 840 import Util from "@/util";
841 841
842 export default { 842 export default {
843 components: { 843 components: {
844 // "one-month": onemonth, 844 // "one-month": onemonth,
845 }, 845 },
846 data: () => ({ 846 data: () => ({
847 component: "report-generate", 847 component: "report-generate",
848 snackbar: false, 848 snackbar: false,
849 y: "top", 849 y: "top",
850 x: "right", 850 x: "right",
851 mode: "", 851 mode: "",
852 timeout: 3000, 852 timeout: 3000,
853 text: "", 853 text: "",
854 showLoader:false, 854 showLoader:false,
855 loading: false, 855 loading: false,
856 date: null, 856 date: null,
857 search: "", 857 search: "",
858 menu: false, 858 menu: false,
859 menu1: false, 859 menu1: false,
860 menu2: false, 860 menu2: false,
861 menu3: false, 861 menu3: false,
862 dialog: false, 862 dialog: false,
863 dialog1: false, 863 dialog1: false,
864 valid: true, 864 valid: true,
865 isActive: true, 865 isActive: true,
866 newActive: false, 866 newActive: false,
867 pagination: { 867 pagination: {
868 rowsPerPage: 15 868 rowsPerPage: 15
869 }, 869 },
870 imageData: {}, 870 imageData: {},
871 imageName: "", 871 imageName: "",
872 imageUrl: "", 872 imageUrl: "",
873 imageFile: "", 873 imageFile: "",
874 nameRules: [v => !!v || " Full Name is required"], 874 nameRules: [v => !!v || " Full Name is required"],
875 dateRules: [v => !!v || " DOB is required"], 875 dateRules: [v => !!v || " DOB is required"],
876 cityRules: [v => !!v || " City Name is required"], 876 cityRules: [v => !!v || " City Name is required"],
877 pincode: [v => !!v || " Pincode is required"], 877 pincode: [v => !!v || " Pincode is required"],
878 country: [v => !!v || " Country Name is required"], 878 country: [v => !!v || " Country Name is required"],
879 permanentAddress: [v => !!v || " Permanent Address is required"], 879 permanentAddress: [v => !!v || " Permanent Address is required"],
880 presentAddress: [v => !!v || " Present Address is required"], 880 presentAddress: [v => !!v || " Present Address is required"],
881 mobileNoRules: [v => !!v || "Mobile Number is required"], 881 mobileNoRules: [v => !!v || "Mobile Number is required"],
882 stateRules: [v => !!v || "State Name is required"], 882 stateRules: [v => !!v || "State Name is required"],
883 joinDateRules: [v => !!v || " Join Date is required"], 883 joinDateRules: [v => !!v || " Join Date is required"],
884 errorMessages: "", 884 errorMessages: "",
885 emailRules: [ 885 emailRules: [
886 v => !!v || "E-mail is required", 886 v => !!v || "E-mail is required",
887 v => 887 v =>
888 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 888 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
889 "E-mail must be valid" 889 "E-mail must be valid"
890 ], 890 ],
891 countries: [ 891 countries: [
892 "Afghanistan", 892 "Afghanistan",
893 "Albania", 893 "Albania",
894 "Algeria", 894 "Algeria",
895 "Andorra", 895 "Andorra",
896 "Angola", 896 "Angola",
897 "Anguilla", 897 "Anguilla",
898 "Antigua &amp; Barbuda", 898 "Antigua &amp; Barbuda",
899 "Argentina", 899 "Argentina",
900 "Armenia", 900 "Armenia",
901 "Aruba", 901 "Aruba",
902 "Australia", 902 "Australia",
903 "Austria", 903 "Austria",
904 "Azerbaijan", 904 "Azerbaijan",
905 "Bahamas", 905 "Bahamas",
906 "Bahrain", 906 "Bahrain",
907 "Bangladesh", 907 "Bangladesh",
908 "Barbados", 908 "Barbados",
909 "Belarus", 909 "Belarus",
910 "Belgium", 910 "Belgium",
911 "Belize", 911 "Belize",
912 "Benin", 912 "Benin",
913 "Bermuda", 913 "Bermuda",
914 "Bhutan", 914 "Bhutan",
915 "Bolivia", 915 "Bolivia",
916 "Bosnia &amp; Herzegovina", 916 "Bosnia &amp; Herzegovina",
917 "Botswana", 917 "Botswana",
918 "Brazil", 918 "Brazil",
919 "British Virgin Islands", 919 "British Virgin Islands",
920 "Brunei", 920 "Brunei",
921 "Bulgaria", 921 "Bulgaria",
922 "Burkina Faso", 922 "Burkina Faso",
923 "Burundi", 923 "Burundi",
924 "Cambodia", 924 "Cambodia",
925 "Cameroon", 925 "Cameroon",
926 "Cape Verde", 926 "Cape Verde",
927 "Cayman Islands", 927 "Cayman Islands",
928 "Chad", 928 "Chad",
929 "Chile", 929 "Chile",
930 "China", 930 "China",
931 "Colombia", 931 "Colombia",
932 "Congo", 932 "Congo",
933 "Cook Islands", 933 "Cook Islands",
934 "Costa Rica", 934 "Costa Rica",
935 "Cote D Ivoire", 935 "Cote D Ivoire",
936 "Croatia", 936 "Croatia",
937 "Cruise Ship", 937 "Cruise Ship",
938 "Cuba", 938 "Cuba",
939 "Cyprus", 939 "Cyprus",
940 "Czech Republic", 940 "Czech Republic",
941 "Denmark", 941 "Denmark",
942 "Djibouti", 942 "Djibouti",
943 "Dominica", 943 "Dominica",
944 "Dominican Republic", 944 "Dominican Republic",
945 "Ecuador", 945 "Ecuador",
946 "Egypt", 946 "Egypt",
947 "El Salvador", 947 "El Salvador",
948 "Equatorial Guinea", 948 "Equatorial Guinea",
949 "Estonia", 949 "Estonia",
950 "Ethiopia", 950 "Ethiopia",
951 "Falkland Islands", 951 "Falkland Islands",
952 "Faroe Islands", 952 "Faroe Islands",
953 "Fiji", 953 "Fiji",
954 "Finland", 954 "Finland",
955 "France", 955 "France",
956 "French Polynesia", 956 "French Polynesia",
957 "French West Indies", 957 "French West Indies",
958 "Gabon", 958 "Gabon",
959 "Gambia", 959 "Gambia",
960 "Georgia", 960 "Georgia",
961 "Germany", 961 "Germany",
962 "Ghana", 962 "Ghana",
963 "Gibraltar", 963 "Gibraltar",
964 "Greece", 964 "Greece",
965 "Greenland", 965 "Greenland",
966 "Grenada", 966 "Grenada",
967 "Guam", 967 "Guam",
968 "Guatemala", 968 "Guatemala",
969 "Guernsey", 969 "Guernsey",
970 "Guinea", 970 "Guinea",
971 "Guinea Bissau", 971 "Guinea Bissau",
972 "Guyana", 972 "Guyana",
973 "Haiti", 973 "Haiti",
974 "Honduras", 974 "Honduras",
975 "Hong Kong", 975 "Hong Kong",
976 "Hungary", 976 "Hungary",
977 "Iceland", 977 "Iceland",
978 "India", 978 "India",
979 "Indonesia", 979 "Indonesia",
980 "Iran", 980 "Iran",
981 "Iraq", 981 "Iraq",
982 "Ireland", 982 "Ireland",
983 "Isle of Man", 983 "Isle of Man",
984 "Israel", 984 "Israel",
985 "Italy", 985 "Italy",
986 "Jamaica", 986 "Jamaica",
987 "Japan", 987 "Japan",
988 "Jersey", 988 "Jersey",
989 "Jordan", 989 "Jordan",
990 "Kazakhstan", 990 "Kazakhstan",
991 "Kenya", 991 "Kenya",
992 "Kuwait", 992 "Kuwait",
993 "Kyrgyz Republic", 993 "Kyrgyz Republic",
994 "Laos", 994 "Laos",
995 "Latvia", 995 "Latvia",
996 "Lebanon", 996 "Lebanon",
997 "Lesotho", 997 "Lesotho",
998 "Liberia", 998 "Liberia",
999 "Libya", 999 "Libya",
1000 "Liechtenstein", 1000 "Liechtenstein",
1001 "Lithuania", 1001 "Lithuania",
1002 "Luxembourg", 1002 "Luxembourg",
1003 "Macau", 1003 "Macau",
1004 "Macedonia", 1004 "Macedonia",
1005 "Madagascar", 1005 "Madagascar",
1006 "Malawi", 1006 "Malawi",
1007 "Malaysia", 1007 "Malaysia",
1008 "Maldives", 1008 "Maldives",
1009 "Mali", 1009 "Mali",
1010 "Malta", 1010 "Malta",
1011 "Mauritania", 1011 "Mauritania",
1012 "Mauritius", 1012 "Mauritius",
1013 "Mexico", 1013 "Mexico",
1014 "Moldova", 1014 "Moldova",
1015 "Monaco", 1015 "Monaco",
1016 "Mongolia", 1016 "Mongolia",
1017 "Montenegro", 1017 "Montenegro",
1018 "Montserrat", 1018 "Montserrat",
1019 "Morocco", 1019 "Morocco",
1020 "Mozambique", 1020 "Mozambique",
1021 "Namibia", 1021 "Namibia",
1022 "Nepal", 1022 "Nepal",
1023 "Netherlands", 1023 "Netherlands",
1024 "Netherlands Antilles", 1024 "Netherlands Antilles",
1025 "New Caledonia", 1025 "New Caledonia",
1026 "New Zealand", 1026 "New Zealand",
1027 "Nicaragua", 1027 "Nicaragua",
1028 "Niger", 1028 "Niger",
1029 "Nigeria", 1029 "Nigeria",
1030 "Norway", 1030 "Norway",
1031 "Oman", 1031 "Oman",
1032 "Pakistan", 1032 "Pakistan",
1033 "Palestine", 1033 "Palestine",
1034 "Panama", 1034 "Panama",
1035 "Papua New Guinea", 1035 "Papua New Guinea",
1036 "Paraguay", 1036 "Paraguay",
1037 "Peru", 1037 "Peru",
1038 "Philippines", 1038 "Philippines",
1039 "Poland", 1039 "Poland",
1040 "Portugal", 1040 "Portugal",
1041 "Puerto Rico", 1041 "Puerto Rico",
1042 "Qatar", 1042 "Qatar",
1043 "Reunion", 1043 "Reunion",
1044 "Romania", 1044 "Romania",
1045 "Russia", 1045 "Russia",
1046 "Rwanda", 1046 "Rwanda",
1047 "Saint Pierre &amp; Miquelon", 1047 "Saint Pierre &amp; Miquelon",
1048 "Samoa", 1048 "Samoa",
1049 "San Marino", 1049 "San Marino",
1050 "Satellite", 1050 "Satellite",
1051 "Saudi Arabia", 1051 "Saudi Arabia",
1052 "Senegal", 1052 "Senegal",
1053 "Serbia", 1053 "Serbia",
1054 "Seychelles", 1054 "Seychelles",
1055 "Sierra Leone", 1055 "Sierra Leone",
1056 "Singapore", 1056 "Singapore",
1057 "Slovakia", 1057 "Slovakia",
1058 "Slovenia", 1058 "Slovenia",
1059 "South Africa", 1059 "South Africa",
1060 "South Korea", 1060 "South Korea",
1061 "Spain", 1061 "Spain",
1062 "Sri Lanka", 1062 "Sri Lanka",
1063 "St Kitts &amp; Nevis", 1063 "St Kitts &amp; Nevis",
1064 "St Lucia", 1064 "St Lucia",
1065 "St Vincent", 1065 "St Vincent",
1066 "St. Lucia", 1066 "St. Lucia",
1067 "Sudan", 1067 "Sudan",
1068 "Suriname", 1068 "Suriname",
1069 "Swaziland", 1069 "Swaziland",
1070 "Sweden", 1070 "Sweden",
1071 "Switzerland", 1071 "Switzerland",
1072 "Syria", 1072 "Syria",
1073 "Taiwan", 1073 "Taiwan",
1074 "Tajikistan", 1074 "Tajikistan",
1075 "Tanzania", 1075 "Tanzania",
1076 "Thailand", 1076 "Thailand",
1077 "Timor L'Este", 1077 "Timor L'Este",
1078 "Togo", 1078 "Togo",
1079 "Tonga", 1079 "Tonga",
1080 "Trinidad &amp; Tobago", 1080 "Trinidad &amp; Tobago",
1081 "Tunisia", 1081 "Tunisia",
1082 "Turkey", 1082 "Turkey",
1083 "Turkmenistan", 1083 "Turkmenistan",
1084 "Turks &amp; Caicos", 1084 "Turks &amp; Caicos",
1085 "Uganda", 1085 "Uganda",
1086 "Ukraine", 1086 "Ukraine",
1087 "United Arab Emirates", 1087 "United Arab Emirates",
1088 "United Kingdom", 1088 "United Kingdom",
1089 "United States", 1089 "United States",
1090 "Uruguay", 1090 "Uruguay",
1091 "Uzbekistan", 1091 "Uzbekistan",
1092 "Venezuela", 1092 "Venezuela",
1093 "Vietnam", 1093 "Vietnam",
1094 "Virgin Islands (US)", 1094 "Virgin Islands (US)",
1095 "Yemen", 1095 "Yemen",
1096 "Zambia", 1096 "Zambia",
1097 "Zimbabwe" 1097 "Zimbabwe"
1098 ], 1098 ],
1099 headers: [ 1099 headers: [
1100 { 1100 {
1101 text: "No", 1101 text: "No",
1102 align: "center", 1102 align: "center",
1103 sortable: false, 1103 sortable: false,
1104 value: "No" 1104 value: "No"
1105 }, 1105 },
1106 { text: "Name", value: "name", sortable: false, align: "center" }, 1106 { text: "Name", value: "name", sortable: false, align: "center" },
1107 { text: "Email", value: "email", sortable: false, align: "center" }, 1107 { text: "Email", value: "email", sortable: false, align: "center" },
1108 { text: "DOB", value: "dob", sortable: false, align: "center" }, 1108 { text: "DOB", value: "dob", sortable: false, align: "center" },
1109 { text: "Join Date", value: "joinDate", sortable: false, align: "center" }, 1109 { text: "Join Date", value: "joinDate", sortable: false, align: "center" },
1110 { text: "Mobile No", value: "mobileNo", sortable: false, align: "center" }, 1110 { text: "Mobile No", value: "mobileNo", sortable: false, align: "center" },
1111 { text: "Action", value: "", sortable: false, align: "center" } 1111 { text: "Action", value: "", sortable: false, align: "center" }
1112 ], 1112 ],
1113 desserts: [], 1113 desserts: [],
1114 editedIndex: -1, 1114 editedIndex: -1,
1115 upload:'', 1115 upload:'',
1116 editedItem: { 1116 editedItem: {
1117 role: "TEACHER", 1117 role: "TEACHER",
1118 name: "", 1118 name: "",
1119 email: "", 1119 email: "",
1120 date: null, 1120 date: null,
1121 city: "", 1121 city: "",
1122 pincode: "", 1122 pincode: "",
1123 country: "", 1123 country: "",
1124 permanentAddress: "", 1124 permanentAddress: "",
1125 presentAddress: "", 1125 presentAddress: "",
1126 mobileNo: "", 1126 mobileNo: "",
1127 state: "", 1127 state: "",
1128 joinDate: null 1128 joinDate: null
1129 }, 1129 },
1130 addTeachers: { 1130 addTeachers: {
1131 role: "TEACHER", 1131 role: "TEACHER",
1132 name: "", 1132 name: "",
1133 email: "", 1133 email: "",
1134 date: null, 1134 date: null,
1135 city: "", 1135 city: "",
1136 pincode: "", 1136 pincode: "",
1137 country: "", 1137 country: "",
1138 permanentAddress: "", 1138 permanentAddress: "",
1139 presentAddress: "", 1139 presentAddress: "",
1140 mobileNo: "", 1140 mobileNo: "",
1141 state: "", 1141 state: "",
1142 joinDate: null 1142 joinDate: null
1143 }, 1143 },
1144 defaultItem: { 1144 defaultItem: {
1145 role: "TEACHER", 1145 role: "TEACHER",
1146 name: "", 1146 name: "",
1147 email: "" 1147 email: ""
1148 }, 1148 },
1149 userName: "", 1149 userName: "",
1150 items: [ 1150 items: [
1151 { 1151 {
1152 href: "/changepassword", 1152 href: "/changepassword",
1153 title: "Change Password", 1153 title: "Change Password",
1154 click: e => { 1154 click: e => {
1155 console.log(e); 1155 console.log(e);
1156 } 1156 }
1157 }, 1157 },
1158 { 1158 {
1159 href: "#", 1159 href: "#",
1160 title: "Logout", 1160 title: "Logout",
1161 click: e => { 1161 click: e => {
1162 window.getApp.$emit("APP_LOGOUT"); 1162 window.getApp.$emit("APP_LOGOUT");
1163 } 1163 }
1164 } 1164 }
1165 ] 1165 ]
1166 }), 1166 }),
1167 watch: { 1167 watch: {
1168 menu(val) { 1168 menu(val) {
1169 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 1169 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
1170 }, 1170 },
1171 menu1(val) { 1171 menu1(val) {
1172 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 1172 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
1173 } 1173 }
1174 }, 1174 },
1175 methods: { 1175 methods: {
1176 save (date) { 1176 save (date) {
1177 this.$refs.menu.save(date) 1177 this.$refs.menu.save(date)
1178 }, 1178 },
1179 save (date) { 1179 save (date) {
1180 this.$refs.menu1.save(date) 1180 this.$refs.menu1.save(date)
1181 }, 1181 },
1182 pickFile() { 1182 pickFile() {
1183 this.$refs.image.click(); 1183 this.$refs.image.click ();
1184 }, 1184 },
1185
1186 onFilePicked(e) { 1185 onFilePicked(e) {
1187 // console.log(e) 1186 // console.log(e)
1188 const files = e.target.files; 1187 const files = e.target.files;
1189 this.upload = e.target.files[0]; 1188 this.upload = e.target.files[0];
1190 console.log("imageData-upload========>",this.upload) 1189 console.log("imageData-upload========>",this.upload)
1191 if (files[0] !== undefined) { 1190 if (files[0] !== undefined) {
1192 this.imageName = files[0].name; 1191 this.imageName = files[0].name;
1193 if (this.imageName.lastIndexOf(".") <= 0) { 1192 if (this.imageName.lastIndexOf(".") <= 0) {
1194 return; 1193 return;
1195 } 1194 }
1196 const fr = new FileReader(); 1195 const fr = new FileReader();
1197 fr.readAsDataURL(files[0]); 1196 fr.readAsDataURL(files[0]);
1198 fr.addEventListener("load", () => { 1197 fr.addEventListener("load", () => {
1199 this.imageUrl = fr.result; 1198 this.imageUrl = fr.result;
1200 this.imageFile = files[0]; // this is an image file that can be sent to server... 1199 this.imageFile = files[0]; // this is an image file that can be sent to server...
1201 // this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 1200 // this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
1202 // console.log("upload=======>", this.imageData.imageUrl); 1201 // console.log("upload=======>", this.imageData.imageUrl);
1203 console.log("imageFile", this.imageFile); 1202 console.log("imageFile", this.imageFile);
1204 }); 1203 });
1205 } else { 1204 } else {
1206 this.imageName = ""; 1205 this.imageName = "";
1207 this.imageFile = ""; 1206 this.imageFile = "";
1208 this.imageUrl = ""; 1207 this.imageUrl = "";
1209 } 1208 }
1210 }, 1209 },
1211 getTeacherList() { 1210 getTeacherList() {
1212 this.showLoader = true; 1211 this.showLoader = true;
1213 var token = this.$store.state.token; 1212 var token = this.$store.state.token;
1213 console.log("token",token)
1214 http() 1214 http()
1215 .get("/getTeachersList", { 1215 .get("/getTeachersList", {
1216 headers: { Authorization: "Bearer " + token } 1216 headers: { Authorization: "Bearer " + token }
1217 }) 1217 })
1218 .then(response => { 1218 .then(response => {
1219 this.desserts = response.data.data; 1219 this.desserts = response.data.data;
1220 this.showLoader = false; 1220 this.showLoader = false;
1221 // console.log("getTeacherList=====>",this.desserts) 1221 // console.log("getTeacherList=====>",this.desserts)
1222 }) 1222 })
1223 .catch(err => { 1223 .catch(err => {
1224 // console.log("err====>", err); 1224 // console.log("err====>", err);
1225 this.showLoader = false; 1225 this.showLoader = false;
1226 this.$router.replace({ path: "/" }); 1226 this.$router.replace({ path: "/" });
1227 }); 1227 });
1228 }, 1228 },
1229 editItem(item) { 1229 editItem(item) {
1230 this.editedIndex = this.desserts.indexOf(item); 1230 this.editedIndex = this.desserts.indexOf(item);
1231 this.editedItem = Object.assign({}, item); 1231 this.editedItem = Object.assign({}, item);
1232 this.dialog = true; 1232 this.dialog = true;
1233 }, 1233 },
1234 profile(item) { 1234 profile(item) {
1235 this.editedIndex = this.desserts.indexOf(item); 1235 this.editedIndex = this.desserts.indexOf(item);
1236 this.editedItem = Object.assign({}, item); 1236 this.editedItem = Object.assign({}, item);
1237 this.dialog1 = true; 1237 this.dialog1 = true;
1238 }, 1238 },
1239 deleteItem(item) { 1239 deleteItem(item) {
1240 let deleteTeachers = { 1240 let deleteTeachers = {
1241 teacherId: item._id 1241 teacherId: item._id
1242 }; 1242 };
1243 // console.log("deleteUers",deleteTeachers) 1243 // console.log("deleteUers",deleteTeachers)
1244 http() 1244 http()
1245 .delete( 1245 .delete(
1246 "/deleteTeacher", 1246 "/deleteTeacher",
1247 confirm("Are you sure you want to delete this?") && { 1247 confirm("Are you sure you want to delete this?") && {
1248 params: deleteTeachers 1248 params: deleteTeachers
1249 } 1249 }
1250 ) 1250 )
1251 .then(response => { 1251 .then(response => {
1252 // console.log("deleteUers",deleteTeachers) 1252 // console.log("deleteUers",deleteTeachers)
1253 if ((this.snackbar = true)) { 1253 if ((this.snackbar = true)) {
1254 this.text = "Successfully delete Existing User"; 1254 this.text = "Successfully delete Existing User";
1255 } 1255 }
1256 this.getTeacherList(); 1256 this.getTeacherList();
1257 }) 1257 })
1258 .catch(error => { 1258 .catch(error => {
1259 console.log(error); 1259 console.log(error);
1260 }); 1260 });
1261 }, 1261 },
1262 activeTab(type) { 1262 activeTab(type) {
1263 switch (type) { 1263 switch (type) {
1264 case "existing": 1264 case "existing":
1265 this.newActive = false; 1265 this.newActive = false;
1266 this.isActive = true; 1266 this.isActive = true;
1267 break; 1267 break;
1268 1268
1269 default: 1269 default:
1270 this.newActive = true; 1270 this.newActive = true;
1271 this.isActive = false; 1271 this.isActive = false;
1272 break; 1272 break;
1273 } 1273 }
1274 }, 1274 },
1275 close() { 1275 close() {
1276 this.dialog = false; 1276 this.dialog = false;
1277 setTimeout(() => { 1277 setTimeout(() => {
1278 this.editedItem = Object.assign({}, this.defaultItem); 1278 this.editedItem = Object.assign({}, this.defaultItem);
1279 this.editedIndex = -1; 1279 this.editedIndex = -1;
1280 }, 300); 1280 }, 300);
1281 }, 1281 },
1282 close1() { 1282 close1() {
1283 this.dialog1 = false; 1283 this.dialog1 = false;
1284 }, 1284 },
1285 // close2() { 1285 // close2() {
1286 // this.dialog2 = false; 1286 // this.dialog2 = false;
1287 // }, 1287 // },
1288 submit() { 1288 submit() {
1289 if (this.$refs.form.validate()) { 1289 if (this.$refs.form.validate()) {
1290 let images = new FormData(); 1290 let images = new FormData();
1291 images.append("upload", this.imageFile); 1291 images.append("upload", this.imageFile);
1292 console.log(images); 1292 console.log(images);
1293 // var form_data = new FormData(); 1293 // var form_data = new FormData();
1294 // for (var key in addTeacher) { 1294 // for (var key in addTeacher) {
1295 // if (key === 'upload') { 1295 // if (key === 'upload') {
1296 // form_data.append(key, this.imageFile); 1296 // form_data.append(key, this.imageFile);
1297 // } else { 1297 // } else {
1298 // form_data.append(key, addTeacher[key]) 1298 // form_data.append(key, addTeacher[key])
1299 // } 1299 // }
1300 // } 1300 // }
1301 console.log("images",images) 1301 console.log("images",images)
1302 let addTeacher = { 1302 let addTeacher = {
1303 name: this.addTeachers.name, 1303 name: this.addTeachers.name,
1304 email: this.addTeachers.email, 1304 email: this.addTeachers.email,
1305 role: this.addTeachers.role, 1305 role: this.addTeachers.role,
1306 dob: this.addTeachers.date, 1306 dob: this.addTeachers.date,
1307 city: this.addTeachers.city, 1307 city: this.addTeachers.city,
1308 pincode: this.addTeachers.pincode, 1308 pincode: this.addTeachers.pincode,
1309 country: this.addTeachers.country, 1309 country: this.addTeachers.country,
1310 permanentAddress: this.addTeachers.permanentAddress, 1310 permanentAddress: this.addTeachers.permanentAddress,
1311 presentAddress: this.addTeachers.presentAddress, 1311 presentAddress: this.addTeachers.presentAddress,
1312 mobileNo: this.addTeachers.mobileNo, 1312 mobileNo: this.addTeachers.mobileNo,
1313 state: this.addTeachers.state, 1313 state: this.addTeachers.state,
1314 joinDate: this.addTeachers.joinDate, 1314 joinDate: this.addTeachers.joinDate,
1315 images 1315 images
1316 // upload:this.imageFile 1316 // upload:this.imageFile
1317 }; 1317 };
1318 // console.log("addTeacher============>", addTeacher); 1318 // console.log("addTeacher============>", addTeacher);
1319 http() 1319 http()
1320 .post("/createTeacher", addTeacher) 1320 .post("/createTeacher", addTeacher)
1321 .then(response => { 1321 .then(response => {
1322 console.log("addTeacher", addTeacher); 1322 console.log("addTeacher", addTeacher);
1323 this.getTeacherList(); 1323 this.getTeacherList();
1324 if ((this.snackbar = true)) { 1324 if ((this.snackbar = true)) {
1325 this.text = "New user added successfully"; 1325 this.text = "New user added successfully";
1326 } 1326 }
1327 1327
1328 this.clear(); 1328 this.clear();
1329 }) 1329 })
1330 .catch(error => { 1330 .catch(error => {
1331 // console.log(error); 1331 // console.log(error);
1332 if ((this.snackbar = true)) { 1332 if ((this.snackbar = true)) {
1333 this.text = error.response.data.message; 1333 this.text = error.response.data.message;
1334 } 1334 }
1335 }); 1335 });
1336 } 1336 }
1337 }, 1337 },
1338 mail() {}, 1338 mail() {},
1339 download() {}, 1339 download() {},
1340 clear() { 1340 clear() {
1341 this.$refs.form.reset(); 1341 this.$refs.form.reset();
1342 }, 1342 },
1343 save() { 1343 save() {
1344 let editTeacher = { 1344 let editTeacher = {
1345 teacherId: this.editedItem._id, 1345 teacherId: this.editedItem._id,
1346 name: this.editedItem.name, 1346 name: this.editedItem.name,
1347 email: this.editedItem.email, 1347 email: this.editedItem.email,
1348 role: this.editedItem.role, 1348 role: this.editedItem.role,
1349 dob: this.editedItem.date, 1349 dob: this.editedItem.date,
1350 city: this.editedItem.city, 1350 city: this.editedItem.city,
1351 pincode: this.editedItem.pincode, 1351 pincode: this.editedItem.pincode,
1352 country: this.editedItem.country, 1352 country: this.editedItem.country,
1353 permanentAddress: this.editedItem.permanentAddress, 1353 permanentAddress: this.editedItem.permanentAddress,
1354 presentAddress: this.editedItem.presentAddress, 1354 presentAddress: this.editedItem.presentAddress,
1355 mobileNo: this.editedItem.mobileNo, 1355 mobileNo: this.editedItem.mobileNo,
1356 state: this.editedItem.state, 1356 state: this.editedItem.state,
1357 joinDate: this.editedItem.joinDate, 1357 joinDate: this.editedItem.joinDate,
1358 // imageData, 1358 // imageData,
1359 }; 1359 };
1360 http() 1360 http()
1361 .put("/updateTeacher", editTeacher) 1361 .put("/updateTeacher", editTeacher)
1362 .then(response => { 1362 .then(response => {
1363 console.log("editTeacher",editTeacher); 1363 console.log("editTeacher",editTeacher);
1364 if ((this.snackbar = true)) { 1364 if ((this.snackbar = true)) {
1365 this.text = "Successfully Edit Existing User"; 1365 this.text = "Successfully Edit Existing User";
1366 } 1366 }
1367 this.getTeacherList(); 1367 this.getTeacherList();
1368 }) 1368 })
1369 .catch(error => { 1369 .catch(error => {
1370 console.log(error); 1370 console.log(error);
1371 }); 1371 });
1372 this.close(); 1372 this.close();
1373 }, 1373 },
1374 handleDrawerToggle() { 1374 handleDrawerToggle() {
1375 window.getApp.$emit("APP_DRAWER_TOGGLED"); 1375 window.getApp.$emit("APP_DRAWER_TOGGLED");
1376 }, 1376 },
1377 handleFullScreen() { 1377 handleFullScreen() {
1378 Util.toggleFullScreen(); 1378 Util.toggleFullScreen();
1379 } 1379 }
1380 }, 1380 },
1381 mounted() { 1381 mounted() {
1382 this.getTeacherList(); 1382 this.getTeacherList();
1383 // console.log("Id",this.$store.state.id) 1383 // console.log("Id",this.$store.state.id)
1384 // console.log("token",this.$store.state.token) 1384 // console.log("token",this.$store.state.token)
1385 }, 1385 },
1386 computed: { 1386 computed: {
1387 toolbarColor() { 1387 toolbarColor() {
1388 return this.$vuetify.options.extra.mainNav; 1388 return this.$vuetify.options.extra.mainNav;
1389 } 1389 }
1390 } 1390 }
1391 }; 1391 };
1392 </script> 1392 </script>
1393 <style scoped> 1393 <style scoped>
1394 .v-tabs__div { 1394 .v-tabs__div {
1395 text-transform: none; 1395 text-transform: none;
1396 } 1396 }
1397 .v-input__prepend-outer { 1397 .v-input__prepend-outer {
1398 margin-right: 0px !important; 1398 margin-right: 0px !important;
1399 } 1399 }
1400 .v-card__actions .v-btn { 1400 .v-card__actions .v-btn {
1401 margin: 0 15px; 1401 margin: 0 15px;
1402 min-width: 120px; 1402 min-width: 120px;
1403 } 1403 }
1404 .primary { 1404 .primary {
1405 background-color: #aaa !important; 1405 background-color: #aaa !important;
1406 border-color: #aaa !important; 1406 border-color: #aaa !important;
1407 } 1407 }
1408 h4 { 1408 h4 {
1409 background-repeat: no-repeat; 1409 background-repeat: no-repeat;
1410 padding: 8px; 1410 padding: 8px;
1411 margin: auto; 1411 margin: auto;
1412 font-size: 25px; 1412 font-size: 25px;
1413 } 1413 }
1414 #name { 1414 #name {
1415 position: absolute; 1415 position: absolute;
1416 left: 100px; 1416 left: 100px;
1417 top: 17px; 1417 top: 17px;
1418 } 1418 }
1419 #icon { 1419 #icon {
1420 position: absolute; 1420 position: absolute;
1421 right: 8px; 1421 right: 8px;
1422 top: 8px; 1422 top: 8px;
1423 } 1423 }
1424 #m { 1424 #m {
1425 position: relative; 1425 position: relative;
1426 left: 135px; 1426 left: 135px;
1427 top: -15px; 1427 top: -15px;
1428 } 1428 }
1429 #G { 1429 #G {
1430 position: absolute; 1430 position: absolute;
1431 top: 38px; 1431 top: 38px;
1432 color: white; 1432 color: white;
1433 } 1433 }
1434 #bt { 1434 #bt {
1435 position: relative; 1435 position: relative;
1436 top: -20px; 1436 top: -20px;
1437 left: 115px; 1437 left: 115px;
1438 } 1438 }
1439 #e { 1439 #e {
1440 position: relative; 1440 position: relative;
1441 top: 5px; 1441 top: 5px;
1442 right: -30px; 1442 right: -30px;
1443 height: 17px; 1443 height: 17px;
1444 cursor: pointer; 1444 cursor: pointer;
1445 } 1445 }
1446 #d { 1446 #d {
1447 position: relative; 1447 position: relative;
1448 top: 5px; 1448 top: 5px;
1449 right: -70px; 1449 right: -70px;
1450 height: 17px; 1450 height: 17px;
1451 cursor: pointer; 1451 cursor: pointer;
1452 } 1452 }
1453 #td { 1453 #td {
1454 border: 1px solid #dddddd; 1454 border: 1px solid #dddddd;
1455 text-align: left; 1455 text-align: left;
1456 padding: 8px; 1456 padding: 8px;
1457 } 1457 }
1458 #dialog { 1458 #dialog {
1459 height: 550px; 1459 height: 550px;
1460 } 1460 }
1461 .active { 1461 .active {
1462 background-color: black; 1462 background-color: black;
1463 color: white !important; 1463 color: white !important;
1464 } 1464 }
1465 .activebtn { 1465 .activebtn {
1466 color: black !important; 1466 color: black !important;
1467 } 1467 }
1468 #flex { 1468 #flex {
1469 height: 300px; 1469 height: 300px;
1470 } 1470 }
1471 .v-tabs__item a { 1471 .v-tabs__item a {
1472 font-size: 16px !important; 1472 font-size: 16px !important;
1473 } 1473 }
1474 @media screen and (max-width: 769px) { 1474 @media screen and (max-width: 769px) {
1475 .top { 1475 .top {
1476 margin-top: 0 !important; 1476 margin-top: 0 !important;
1477 } 1477 }
1478 .userSearch .v-icon { 1478 .userSearch .v-icon {
1479 font-size: 20px !important; 1479 font-size: 20px !important;
1480 margin-left: 20px; 1480 margin-left: 20px;
1481 } 1481 }
1482 } 1482 }
1483 1483
1484 @media screen and (max-width: 380px) { 1484 @media screen and (max-width: 380px) {
1485 .pl-3 { 1485 .pl-3 {
1486 padding-left: 0px !important; 1486 padding-left: 0px !important;
1487 } 1487 }
1488 .right { 1488 .right {
1489 float: none !important; 1489 float: none !important;
1490 } 1490 }
1491 .subheading { 1491 .subheading {
1492 font-size: 14px !important; 1492 font-size: 14px !important;
1493 } 1493 }
1494 .v-card__actions .v-btn { 1494 .v-card__actions .v-btn {
1495 margin: 0 0px; 1495 margin: 0 0px;
1496 min-width: 100px; 1496 min-width: 100px;
1497 } 1497 }
1498 .presentInput{ 1498 .presentInput{
1499 padding-left:48px !important; 1499 padding-left:48px !important;
1500 } 1500 }
1501 /* .searchIcon .v-icon { 1501 /* .searchIcon .v-icon {
1502 font-size: 20px; 1502 font-size: 20px;
1503 margin-left: 20px; 1503 margin-left: 20px;
1504 } */ 1504 } */
1505 .subheading { 1505 .subheading {
1506 font-size: 12px !important; 1506 font-size: 12px !important;
1507 } 1507 }
1508 h5 { 1508 h5 {
1509 font-size: 13px; 1509 font-size: 13px;
1510 } 1510 }
1511 .pl-4{ 1511 .pl-4{
1512 padding-left: 0px !important; 1512 padding-left: 0px !important;
1513 1513
1514 } 1514 }
1515 } 1515 }
1516 .v-icon { 1516 .v-icon {
1517 font-size: 30px; 1517 font-size: 30px;
1518 } 1518 }
1519 @media screen and (min-width: 1270px) { 1519 @media screen and (min-width: 1270px) {
1520 .hide { 1520 .hide {
1521 display: none; 1521 display: none;
1522 } 1522 }
1523 /* } 1523 /* }
1524 @media screen and (max-width: 962px) { 1524 @media screen and (max-width: 962px) {
1525 .imglogo{ 1525 .imglogo{
1526 position: absolute; 1526 position: absolute;
1527 top: 13px; 1527 top: 13px;
1528 left: 13px !important; 1528 left: 13px !important;
1529 width: 70px; 1529 width: 70px;
1530 height: 24px; 1530 height: 24px;
1531 } */ 1531 } */
1532 } 1532 }
1533 @media screen and (max-width: 420px) { 1533 @media screen and (max-width: 420px) {
1534 .userSearch .v-text-field .v-label { 1534 .userSearch .v-text-field .v-label {
1535 line-height: 24px !important; 1535 line-height: 24px !important;
1536 } 1536 }
1537 .userSearch .v-label { 1537 .userSearch .v-label {
1538 font-size: 13px !important; 1538 font-size: 13px !important;
1539 } 1539 }
1540 .v-list__tile { 1540 .v-list__tile {
1541 font-size: 14px; 1541 font-size: 14px;
1542 padding: 0 10px; 1542 padding: 0 10px;
1543 } 1543 }
1544 .name { 1544 .name {
1545 font-size: 15px; 1545 font-size: 15px;
src/router/paths.js
Diff comments   View file @2b0e316
1 export default [ 1 export default [
2 2
3 { 3 {
4 path: '*', 4 path: '*',
5 meta: { 5 meta: {
6 public: true, 6 public: true,
7 }, 7 },
8 redirect: { 8 redirect: {
9 path: '/404' 9 path: '/404'
10 } 10 }
11 }, 11 },
12 { 12 {
13 path: '/404', 13 path: '/404',
14 meta: { 14 meta: {
15 public: true, 15 public: true,
16 }, 16 },
17 name: 'NotFound', 17 name: 'NotFound',
18 component: () => import( 18 component: () => import(
19 /* webpackChunkName: "routes" */ 19 /* webpackChunkName: "routes" */
20 /* webpackMode: "lazy-once" */ 20 /* webpackMode: "lazy-once" */
21 `@/pages/NotFound/NotFound.vue` 21 `@/pages/NotFound/NotFound.vue`
22 ) 22 )
23 }, 23 },
24 { 24 {
25 path: '/500', 25 path: '/500',
26 meta: { 26 meta: {
27 public: true, 27 public: true,
28 }, 28 },
29 name: 'ServerError', 29 name: 'ServerError',
30 component: () => import( 30 component: () => import(
31 /* webpackChunkName: "routes" */ 31 /* webpackChunkName: "routes" */
32 /* webpackMode: "lazy-once" */ 32 /* webpackMode: "lazy-once" */
33 `@/pages/NotFound/Error.vue` 33 `@/pages/NotFound/Error.vue`
34 ) 34 )
35 }, 35 },
36 { 36 {
37 path: '/dashboard',
38 meta: {},
39 name: 'dashboard',
40 component: () => import(
41 /* webpackChunkName: "routes" */
42 /* webpackMode: "lazy-once" */
43 `@/pages/Dasboard/dashbord`
44 )
45 },
46 {
37 path: '/changepassword', 47 path: '/changepassword',
38 meta: { }, 48 meta: { },
39 name: 'changepassword', 49 name: 'changepassword',
40 props: (route) => ({ type: route.query.type }), 50 props: (route) => ({ type: route.query.type }),
41 component: () => import( 51 component: () => import(
42 /* webpackChunkName: "routes" */ 52 /* webpackChunkName: "routes" */
43 /* webpackMode: "lazy-once" */ 53 /* webpackMode: "lazy-once" */
44 `@/pages/Authentication/changepassword.vue` 54 `@/pages/Authentication/changepassword.vue`
45 ) 55 )
46 }, 56 },
47 { 57 {
48 path: '/teachers', 58 path: '/teachers',
49 meta: { breadcrumb: false }, 59 meta: { breadcrumb: false },
50 name: 'teachers', 60 name: 'teachers',
51 component: () => import( 61 component: () => import(
52 /* webpackChunkName: "routes" */ 62 /* webpackChunkName: "routes" */
53 /* webpackMode: "lazy-once" */ 63 /* webpackMode: "lazy-once" */
54 `@/pages/Teachers/teachers.vue` 64 `@/pages/Teachers/teachers.vue`
55 ) 65 )
56 }, 66 },
57 { 67 {
58 path: '/', 68 path: '/',
59 meta: { 69 meta: {
60 public: true, 70 public: true,
61 }, 71 },
62 name: 'Login', 72 name: 'Login',
63 component: () => import( 73 component: () => import(
64 /* webpackChunkName: "routes" */ 74 /* webpackChunkName: "routes" */
65 /* webpackMode: "lazy-once" */ 75 /* webpackMode: "lazy-once" */
66 `@/pages/Authentication/Login.vue` 76 `@/pages/Authentication/Login.vue`
67 ) 77 )
68 }, 78 },
69 { 79 {
70 path: '/forgetpassword', 80 path: '/forgetpassword',
71 meta: { 81 meta: {
72 public: true, 82 public: true,
73 }, 83 },
74 name: 'forgetpassword', 84 name: 'forgetpassword',
75 component: () => import( 85 component: () => import(
76 /* webpackChunkName: "routes" */ 86 /* webpackChunkName: "routes" */
77 /* webpackMode: "lazy-once" */ 87 /* webpackMode: "lazy-once" */
78 `@/pages/Authentication/forgetpassword.vue` 88 `@/pages/Authentication/forgetpassword.vue`
79 ) 89 )
80 }, 90 },
81 { 91 {
82 path: '/students', 92 path: '/students',
83 meta: { }, 93 meta: { },
84 name: 'Students', 94 name: 'Students',
85 props: (route) => ({ type: route.query.type }), 95 props: (route) => ({ type: route.query.type }),
86 component: () => import( 96 component: () => import(
87 /* webpackChunkName: "routes" */ 97 /* webpackChunkName: "routes" */
88 /* webpackMode: "lazy-once" */ 98 /* webpackMode: "lazy-once" */
89 `@/pages/Students/students.vue` 99 `@/pages/Students/students.vue`
90 ) 100 )
91 }, 101 },
92 { 102 {
93 path: '/addclass', 103 path: '/addclass',
94 meta: { }, 104 meta: { },
95 name: 'addclass', 105 name: 'addclass',
96 props: (route) => ({ type: route.query.type }), 106 props: (route) => ({ type: route.query.type }),
97 component: () => import( 107 component: () => import(
98 /* webpackChunkName: "routes" */ 108 /* webpackChunkName: "routes" */
99 /* webpackMode: "lazy-once" */ 109 /* webpackMode: "lazy-once" */
100 `@/pages/Class/addclass.vue` 110 `@/pages/Class/addclass.vue`
101 ) 111 )
102 }, 112 },
103 { 113 {
104 path: '/section', 114 path: '/section',
105 meta: { }, 115 meta: { },
106 name: 'section', 116 name: 'section',
107 props: (route) => ({ type: route.query.type }), 117 props: (route) => ({ type: route.query.type }),
108 component: () => import( 118 component: () => import(
109 /* webpackChunkName: "routes" */ 119 /* webpackChunkName: "routes" */
110 /* webpackMode: "lazy-once" */ 120 /* webpackMode: "lazy-once" */
111 `@/pages/Section/section.vue` 121 `@/pages/Section/section.vue`
112 ) 122 )
113 }, 123 },
114 { 124 {
115 path: '/event', 125 path: '/event',
116 meta: { }, 126 meta: { },
117 name: 'event', 127 name: 'event',
118 props: (route) => ({ type: route.query.type }), 128 props: (route) => ({ type: route.query.type }),
119 component: () => import( 129 component: () => import(
120 /* webpackChunkName: "routes" */ 130 /* webpackChunkName: "routes" */
121 /* webpackMode: "lazy-once" */ 131 /* webpackMode: "lazy-once" */
122 `@/pages/Event/event.vue` 132 `@/pages/Event/event.vue`
123 ) 133 )
124 }, 134 },
125 { 135 {
126 path: '/news', 136 path: '/news',
127 meta: { }, 137 meta: { },
128 name: 'news', 138 name: 'news',
129 props: (route) => ({ type: route.query.type }), 139 props: (route) => ({ type: route.query.type }),
130 component: () => import( 140 component: () => import(
131 /* webpackChunkName: "routes" */ 141 /* webpackChunkName: "routes" */
132 /* webpackMode: "lazy-once" */ 142 /* webpackMode: "lazy-once" */
133 `@/pages/News/news.vue` 143 `@/pages/News/news.vue`
134 ) 144 )
135 }, 145 },
136 { 146 {
137 path: '/reminder', 147 path: '/reminder',
138 meta: { }, 148 meta: { },
139 name: 'reminder', 149 name: 'reminder',
140 props: (route) => ({ type: route.query.type }), 150 props: (route) => ({ type: route.query.type }),
141 component: () => import( 151 component: () => import(
142 /* webpackChunkName: "routes" */ 152 /* webpackChunkName: "routes" */
143 /* webpackMode: "lazy-once" */ 153 /* webpackMode: "lazy-once" */
144 `@/pages/Reminder/reminder.vue` 154 `@/pages/Reminder/reminder.vue`
145 ) 155 )
146 }, 156 },
147 { 157 {
148 path: '/timeTable', 158 path: '/timeTable',
149 meta: { }, 159 meta: { },
150 name: 'timeTable', 160 name: 'timeTable',
151 props: (route) => ({ type: route.query.type }), 161 props: (route) => ({ type: route.query.type }),
152 component: () => import( 162 component: () => import(
153 /* webpackChunkName: "routes" */ 163 /* webpackChunkName: "routes" */
154 /* webpackMode: "lazy-once" */ 164 /* webpackMode: "lazy-once" */
155 `@/pages/TimeTable/timeTable.vue` 165 `@/pages/TimeTable/timeTable.vue`
156 ) 166 )
157 }, 167 },
158 { 168 {
159 path: '/notification', 169 path: '/notification',
160 meta: { }, 170 meta: { },
161 name: 'notification', 171 name: 'notification',
162 props: (route) => ({ type: route.query.type }), 172 props: (route) => ({ type: route.query.type }),
163 component: () => import( 173 component: () => import(
164 /* webpackChunkName: "routes" */ 174 /* webpackChunkName: "routes" */
165 /* webpackMode: "lazy-once" */ 175 /* webpackMode: "lazy-once" */
166 `@/pages/Notification/notification.vue` 176 `@/pages/Notification/notification.vue`
167 ) 177 )
168 } 178 }
169 ]; 179 ];
170 180