viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 79006bdcb182b0fd7cc46cfa3ffbd793408c68bd

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

uplaod images all cetageory & implement design

Showing 7 changed files with 224 additions and 208 deletions   Show diff stats
1 <template> 1 <template>
2 <div id="appRoot"> 2 <div id="appRoot">
3 <template v-if="!$route.meta.public"> 3 <template v-if="!$route.meta.public">
4 <!-- Go to top --> 4 <!-- Go to top -->
5 <v-app id="inspire" class="app"> 5 <v-app id="inspire" class="app">
6 <app-drawer class="app--drawer"></app-drawer> 6 <app-drawer class="app--drawer"></app-drawer>
7 <v-content> 7 <v-content>
8 <div class="page-wrapper"> 8 <div class="page-wrapper">
9 <router-view></router-view> 9 <router-view></router-view>
10 </div> 10 </div>
11 <!-- App Footer --> 11 <!-- App Footer -->
12 <v-footer height="auto" class="fixcolors pa-3 app--footer"> 12 <v-footer height="auto" class="fixcolors pa-3 app--footer">
13 </v-footer> 13 </v-footer>
14 </v-content> 14 </v-content>
15 </v-app> 15 </v-app>
16 </template> 16 </template>
17 <template v-else> 17 <template v-else>
18 <transition> 18 <transition>
19 <keep-alive> 19 <keep-alive>
20 <router-view></router-view> 20 <router-view></router-view>
21 </keep-alive> 21 </keep-alive>
22 </transition> 22 </transition>
23 </template> 23 </template>
24 <v-snackbar 24 <v-snackbar
25 :timeout="3000" 25 :timeout="3000"
26 bottom 26 bottom
27 right 27 right
28 :color="snackbar.color" 28 :color="snackbar.color"
29 v-model="snackbar.show" 29 v-model="snackbar.show"
30 > 30 >
31 {{ snackbar.text }} 31 {{ snackbar.text }}
32 <v-btn dark flat @click.native="snackbar.show = false" icon> 32 <v-btn dark flat @click.native="snackbar.show = false" icon>
33 <v-icon>close</v-icon> 33 <v-icon>close</v-icon>
34 </v-btn> 34 </v-btn>
35 </v-snackbar> 35 </v-snackbar>
36 </div> 36 </div>
37 </template> 37 </template>
38 <script> 38 <script>
39 import AppDrawer from '@/components/pageHeader/AppDrawer'; 39 import AppDrawer from '@/components/pageHeader/AppDrawer';
40 import AppToolbar from '@/components/pageHeader/AppToolbar'; 40 import AppToolbar from '@/components/pageHeader/AppToolbar';
41 import menu from '@/api/menu'; 41 import menu from '@/api/menu';
42 import AppEvents from './event'; 42 import AppEvents from './event';
43
43 export default { 44 export default {
44 components: { 45 components: {
45 AppDrawer, 46 AppDrawer,
46 AppToolbar, 47 AppToolbar,
47 }, 48 },
48 data: () => ({ 49 data: () => ({
49 expanded: true, 50 expanded: true,
50 rightDrawer: false, 51 rightDrawer: false,
51 snackbar: { 52 snackbar: {
52 show: false, 53 show: false,
53 text: '', 54 text: '',
54 color: '', 55 color: '',
55 } 56 }
56 }), 57 }),
57 58
58 computed: { 59 computed: {
59 60
60 }, 61 },
61 62
62 created () { 63 created () {
63 AppEvents.forEach(item => { 64 AppEvents.forEach(item => {
64 this.$on(item.name, item.callback); 65 this.$on(item.name, item.callback);
65 }); 66 });
66 window.getApp = this; 67 window.getApp = this;
67 }, 68 },
68 }; 69 };
69 </script> 70 </script>
70 71
71 72
72 <style lang="stylus" scoped> 73 <style lang="stylus" scoped>
73 .setting-fab 74 .setting-fab
74 top:50%!important; 75 top:50%!important;
75 right:0; 76 right:0;
76 border-radius:0 77 border-radius:0
77 .page-wrapper 78 .page-wrapper
78 min-height:calc(1200px - 64px - 50px - 81px ) 79 min-height:calc(1200px - 64px - 50px - 81px )
79 80
80 </style> 81 </style>
81 <style> 82 <style>
82 83
83 body{ 84 body{
84 font-family: 'Nunito', sans-serif !important; 85 font-family: 'Nunito', sans-serif !important;
85 -webkit-font-smoothing: antialiased; 86 -webkit-font-smoothing: antialiased;
86 -moz-osx-font-smoothing: grayscale; 87 -moz-osx-font-smoothing: grayscale;
87 } 88 }
88 </style> 89 </style>
89 90
src/Services/http.js
Diff comments   View file @79006bd
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.2.221:3002/v1', 6 // baseURL:'http://192.168.4.220:3002/v1',
7 baseURL:'http://139.59.58.160:8001/v1', 7 baseURL:'http://139.59.58.160:8001/v1',
8 headers: { 8 headers: {
9 Authorization: `Bearer ${store.state.token}` 9 Authorization: `Bearer ${store.state.token}`
10 } 10 }
11 }) 11 })
12 } 12 }
13 13
src/pages/Class/addclass.vue
Diff comments   View file @79006bd
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="grey lighten-2"> 76 <v-toolbar color="grey lighten-2">
77 <v-spacer></v-spacer> 77 <v-spacer></v-spacer>
78 <v-toolbar-title><h3>Edit Class</h3></v-toolbar-title> 78 <v-toolbar-title><h3>Edit Class</h3></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:</label> 89 <label>Class:</label>
90 </v-flex> 90 </v-flex>
91 <v-flex xs8> 91 <v-flex xs8>
92 <v-autocomplete 92 <v-autocomplete
93 v-model="editedItem.classNum" 93 v-model="editedItem.classNum"
94 :placeholder ="editedItem.classNum" 94 :placeholder ="editedItem.classNum"
95 :items = "classList" 95 :items = "classList"
96 :rules="nameRules" 96 :rules="nameRules"
97 ></v-autocomplete> 97 ></v-autocomplete>
98 </v-flex> 98 </v-flex>
99 </v-layout> 99 </v-layout>
100 <v-card-actions> 100 <v-card-actions>
101 <v-btn round dark @click.native="close">Cancel</v-btn> 101 <v-btn round dark @click.native="close">Cancel</v-btn>
102 <v-spacer></v-spacer> 102 <v-spacer></v-spacer>
103 <v-btn round dark @click="save">Save</v-btn> 103 <v-btn round dark @click="save">Save</v-btn>
104 </v-card-actions> 104 </v-card-actions>
105 </v-form> 105 </v-form>
106 </v-flex> 106 </v-flex>
107 </v-layout> 107 </v-layout>
108 </v-container> 108 </v-container>
109 </v-card-text> 109 </v-card-text>
110 </v-card> 110 </v-card>
111 </v-dialog> 111 </v-dialog>
112 112
113 <!-- ****** PROFILE VIEW STUDENTS ****** --> 113 <!-- ****** PROFILE VIEW STUDENTS ****** -->
114 <v-dialog v-model="dialog1" max-width="600px"> 114 <v-dialog v-model="dialog1" max-width="600px">
115 <v-toolbar color="grey lighten-2"> 115 <v-toolbar color="grey lighten-2">
116 <v-spacer></v-spacer> 116 <v-spacer></v-spacer>
117 <v-toolbar-title><h3>Class Profile</h3></v-toolbar-title> 117 <v-toolbar-title><h3>Class Profile</h3></v-toolbar-title>
118 <v-spacer></v-spacer> 118 <v-spacer></v-spacer>
119 <v-icon @click="close1">close</v-icon> 119 <v-icon @click="close1">close</v-icon>
120 </v-toolbar> 120 </v-toolbar>
121 <v-card> 121 <v-card>
122 <v-flex align-center justify-center layout text-xs-center> 122 <v-flex align-center justify-center layout text-xs-center>
123 <v-avatar size="50px" style="position:absolute; top:20px;"> 123 <v-avatar size="50px" style="position:absolute; top:20px;">
124 <img src="/static/icon/user.png"> 124 <img src="/static/icon/user.png">
125 </v-avatar> 125 </v-avatar>
126 </v-flex> 126 </v-flex>
127 <v-card-text> 127 <v-card-text>
128 <v-container grid-list-md> 128 <v-container grid-list-md>
129 <v-layout wrap> 129 <v-layout wrap>
130 <v-flex> 130 <v-flex>
131 <br> 131 <br>
132 <br> 132 <br>
133 <v-layout> 133 <v-layout>
134 <v-flex xs5 sm6> 134 <v-flex xs5 sm6>
135 <h5 class="right my-1">Class Name:</h5> 135 <h5 class="right my-1">Class Name:</h5>
136 </v-flex> 136 </v-flex>
137 <v-flex sm6 xs8> 137 <v-flex sm6 xs8>
138 <h5 class="my-1">{{ editedItem.classNum }}</h5> 138 <h5 class="my-1">{{ editedItem.classNum }}</h5>
139 </v-flex> 139 </v-flex>
140 </v-layout> 140 </v-layout>
141 </v-flex> 141 </v-flex>
142 </v-layout> 142 </v-layout>
143 </v-container> 143 </v-container>
144 </v-card-text> 144 </v-card-text>
145 </v-card> 145 </v-card>
146 </v-dialog> 146 </v-dialog>
147 147
148 <v-snackbar 148 <v-snackbar
149 :timeout="timeout" 149 :timeout="timeout"
150 :top="y === 'top'" 150 :top="y === 'top'"
151 :right="x === 'right'" 151 :right="x === 'right'"
152 :vertical="mode === 'vertical'" 152 :vertical="mode === 'vertical'"
153 v-model="snackbar" 153 v-model="snackbar"
154 color="success" 154 color="success"
155 >{{ text }}</v-snackbar> 155 >{{ text }}</v-snackbar>
156 156
157 <!-- ****** EXISTING-USERS Classess Table ****** --> 157 <!-- ****** EXISTING-USERS Classess Table ****** -->
158 <v-data-table 158 <v-data-table
159 :headers="headers" 159 :headers="headers"
160 :items="desserts" 160 :items="desserts"
161 :pagination.sync="pagination" 161 :pagination.sync="pagination"
162 :search="search" 162 :search="search"
163 > 163 >
164 <template slot="items" slot-scope="props"> 164 <template slot="items" slot-scope="props">
165 <td>{{ props.index}}</td> 165 <td>{{ props.index}}</td>
166 <td class="text-xs-center">{{ props.item.classNum}}</td> 166 <td class="text-xs-center">{{ props.item.classNum}}</td>
167 <td class="text-xs-center"> 167 <td class="text-xs-center">
168 <span> 168 <span>
169 <img 169 <img
170 style="cursor:pointer; width:25px; height:18px; " 170 style="cursor:pointer; width:25px; height:18px; "
171 class="mr-5" 171 class="mr-5"
172 @click="profile(props.item)" 172 @click="profile(props.item)"
173 src="/static/icon/eye1.png" 173 src="/static/icon/eye1.png"
174 > 174 >
175 <img 175 <img
176 style="cursor:pointer; width:20px; height:18px; " 176 style="cursor:pointer; width:20px; height:18px; "
177 class="mr-5" 177 class="mr-5"
178 @click="editItem(props.item)" 178 @click="editItem(props.item)"
179 src="/static/icon/edit1.png" 179 src="/static/icon/edit1.png"
180 > 180 >
181 <img 181 <img
182 style="cursor:pointer; height:20px; " 182 style="cursor:pointer; height:20px; "
183 class="mr-5" 183 class="mr-5"
184 @click="deleteItem(props.item)" 184 @click="deleteItem(props.item)"
185 src="/static/icon/delete1.png" 185 src="/static/icon/delete1.png"
186 > 186 >
187 </span> 187 </span>
188 </td> 188 </td>
189 </template> 189 </template>
190 <v-alert 190 <v-alert
191 slot="no-results" 191 slot="no-results"
192 :value="true" 192 :value="true"
193 color="error" 193 color="error"
194 icon="warning" 194 icon="warning"
195 >Your search for "{{ search }}" found no results.</v-alert> 195 >Your search for "{{ search }}" found no results.</v-alert>
196 </v-data-table> 196 </v-data-table>
197 </v-tab-item> 197 </v-tab-item>
198 198
199 <!-- ****** ADD multiple Classess ****** --> 199 <!-- ****** ADD multiple Classess ****** -->
200 <v-tab-item> 200 <v-tab-item>
201 <v-container> 201 <v-container>
202 <v-snackbar 202 <v-snackbar
203 :timeout="timeout" 203 :timeout="timeout"
204 :top="y === 'top'" 204 :top="y === 'top'"
205 :right="x === 'right'" 205 :right="x === 'right'"
206 :vertical="mode === 'vertical'" 206 :vertical="mode === 'vertical'"
207 v-model="snackbar" 207 v-model="snackbar"
208 color="success" 208 color="success"
209 >{{ text }}</v-snackbar> 209 >{{ text }}</v-snackbar>
210 <v-flex xs12 sm8 offset-sm2 class="top"> 210 <v-flex xs12 sm8 offset-sm2 class="top">
211 <v-card flat> 211 <v-card flat>
212 <v-container fluid fill-height> 212 <v-container fluid fill-height>
213 <v-layout align-center> 213 <v-layout align-center>
214 <v-flex xs12> 214 <v-flex xs12 class="mt-4">
215 <v-flex offset-xs5>
216 <v-avatar size="55px">
217 <img src="/static/icon/user.png">
218 </v-avatar>
219 </v-flex>
220 <v-form ref="form" v-model="valid" lazy-validation> 215 <v-form ref="form" v-model="valid" lazy-validation>
221 <v-layout> 216 <v-layout>
222 <v-flex xs4 class="pt-4 subheading"> 217 <v-flex xs4 class="pt-4 subheading">
223 <label class="right">Class :</label> 218 <label class="right">Class :</label>
224 </v-flex> 219 </v-flex>
225 <v-flex xs6 class="ml-3"> 220 <v-flex xs6 class="ml-3">
226 <v-autocomplete 221 <v-autocomplete
227 v-model="addclasses.classNum" 222 v-model="addclasses.classNum"
228 placeholder="fill your class Name" 223 placeholder="fill your class Name"
229 type="text" 224 type="text"
230 :items="classList" 225 :items="classList"
231 :rules="nameRules" 226 :rules="nameRules"
232 required 227 required
233 ></v-autocomplete> 228 ></v-autocomplete>
234 </v-flex> 229 </v-flex>
235 </v-layout> 230 </v-layout>
236 <v-layout> 231 <v-layout>
237 <v-flex xs12 sm9 offset-sm2> 232 <v-flex xs12 sm9 offset-sm2>
238 <v-card-actions> 233 <v-card-actions>
239 <v-btn @click="clear" round dark>clear</v-btn>
240 <v-spacer></v-spacer> 234 <v-spacer></v-spacer>
241 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 235 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
236 <v-spacer></v-spacer>
242 </v-card-actions> 237 </v-card-actions>
243 </v-flex> 238 </v-flex>
244 </v-layout> 239 </v-layout>
245 </v-form> 240 </v-form>
246 </v-flex> 241 </v-flex>
247 </v-layout> 242 </v-layout>
248 </v-container> 243 </v-container>
249 </v-card> 244 </v-card>
250 </v-flex> 245 </v-flex>
251 </v-container> 246 </v-container>
252 </v-tab-item> 247 </v-tab-item>
253 </v-tabs> 248 </v-tabs>
254 <div class="loader" v-if="showLoader"> 249 <div class="loader" v-if="showLoader">
255 <v-progress-circular indeterminate color="white"></v-progress-circular> 250 <v-progress-circular indeterminate color="white"></v-progress-circular>
256 </div> 251 </div>
257 </v-app> 252 </v-app>
258 </template> 253 </template>
259 254
260 <script> 255 <script>
261 import http from "@/Services/http.js"; 256 import http from "@/Services/http.js";
262 import Util from "@/util"; 257 import Util from "@/util";
263 258
264 export default { 259 export default {
265 data: () => ({ 260 data: () => ({
266 snackbar: false, 261 snackbar: false,
267 y: "top", 262 y: "top",
268 x: "right", 263 x: "right",
269 mode: "", 264 mode: "",
270 timeout: 3000, 265 timeout: 3000,
271 text: "", 266 text: "",
272 showLoader:false, 267 showLoader:false,
273 loading: false, 268 loading: false,
274 date: null, 269 date: null,
275 search: "", 270 search: "",
276 dialog: false, 271 dialog: false,
277 dialog1: false, 272 dialog1: false,
278 valid: true, 273 valid: true,
279 isActive: true, 274 isActive: true,
280 newActive: false, 275 newActive: false,
281 AddUsercredentials: {}, 276 AddUsercredentials: {},
282 pagination: { 277 pagination: {
283 rowsPerPage: 15 278 rowsPerPage: 15
284 }, 279 },
285 nameRules: [v => !!v || " Full Name is required"], 280 nameRules: [v => !!v || " Full Name is required"],
286 headers: [ 281 headers: [
287 { 282 {
288 text: "No", 283 text: "No",
289 align: "left", 284 align: "left",
290 sortable: false, 285 sortable: false,
291 value: "No" 286 value: "No"
292 }, 287 },
293 { text: "Class No", value: "classNum", sortable: false, align: "center" }, 288 { text: "Class No", value: "classNum", sortable: false, align: "center" },
294 289
295 { text: "Action", value: "", sortable: false, align: "center" } 290 { text: "Action", value: "", sortable: false, align: "center" }
296 ], 291 ],
297 desserts: [], 292 desserts: [],
298 classList:[ 293 classList:[
299 "1", 294 "1",
300 "2", 295 "2",
301 "3", 296 "3",
302 "4", 297 "4",
303 "5", 298 "5",
304 "6", 299 "6",
305 "7", 300 "7",
306 "8", 301 "8",
307 "9", 302 "9",
308 "10", 303 "10",
309 "11", 304 "11",
310 "12" 305 "12"
311 ], 306 ],
312 editedIndex: -1, 307 editedIndex: -1,
313 editedItem: { 308 editedItem: {
314 classNum: "" 309 classNum: ""
315 }, 310 },
316 addclasses:{ 311 addclasses:{
317 classNum: "" 312 classNum: ""
318 }, 313 },
319 defaultItem: { 314 defaultItem: {
320 classNum: "" 315 classNum: ""
321 }, 316 },
322 items: [ 317 items: [
323 { 318 {
324 href: "/changepassword", 319 href: "/changepassword",
325 title: "Change Password", 320 title: "Change Password",
326 click: e => { 321 click: e => {
327 console.log(e); 322 console.log(e);
328 } 323 }
329 }, 324 },
330 { 325 {
331 href: "#", 326 href: "#",
332 title: "Logout", 327 title: "Logout",
333 click: e => { 328 click: e => {
334 window.getApp.$emit("APP_LOGOUT"); 329 window.getApp.$emit("APP_LOGOUT");
335 } 330 }
336 } 331 }
337 ] 332 ]
338 }), 333 }),
339 methods: { 334 methods: {
340 getClassList() { 335 getClassList() {
341 this.showLoader = true; 336 this.showLoader = true;
342 var token = this.$store.state.token; 337 var token = this.$store.state.token;
343 http() 338 http()
344 .get("/getClassesList") 339 .get("/getClassesList")
345 .then(response => { 340 .then(response => {
346 this.desserts = response.data.data; 341 this.desserts = response.data.data;
347 this.showLoader = false; 342 this.showLoader = false;
348 // console.log("getClassList=====>", response); 343 // console.log("getClassList=====>", response);
349 }) 344 })
350 .catch(err => { 345 .catch(err => {
351 console.log("err====>", err); 346 console.log("err====>", err);
352 this.showLoader = false; 347 this.showLoader = false;
353 this.$router.replace({ path: "/" }); 348 this.$router.replace({ path: "/" });
354 }); 349 });
355 }, 350 },
356 editItem(item) { 351 editItem(item) {
357 this.editedIndex = this.desserts.indexOf(item); 352 this.editedIndex = this.desserts.indexOf(item);
358 this.editedItem = Object.assign({}, item); 353 this.editedItem = Object.assign({}, item);
359 this.dialog = true; 354 this.dialog = true;
360 }, 355 },
361 profile(item) { 356 profile(item) {
362 this.editedIndex = this.desserts.indexOf(item); 357 this.editedIndex = this.desserts.indexOf(item);
363 this.editedItem = Object.assign({}, item); 358 this.editedItem = Object.assign({}, item);
364 this.dialog1 = true; 359 this.dialog1 = true;
365 }, 360 },
366 deleteItem(item) { 361 deleteItem(item) {
367 let deleteStudent = { 362 let deleteStudent = {
368 classId: item._id 363 classId: item._id
369 }; 364 };
370 http() 365 http()
371 .delete( 366 .delete(
372 "/deleteClass", 367 "/deleteClass",
373 confirm("Are you sure you want to delete this?") && { 368 confirm("Are you sure you want to delete this?") && {
374 params: deleteStudent 369 params: deleteStudent
375 } 370 }
376 ) 371 )
377 .then(response => { 372 .then(response => {
378 // console.log("deleteUers",deleteStudent) 373 // console.log("deleteUers",deleteStudent)
379 if ((this.snackbar = true)) { 374 if ((this.snackbar = true)) {
380 this.text = "Successfully delete Existing Class"; 375 this.text = "Successfully delete Existing Class";
381 } 376 }
382 this.getClassList(); 377 this.getClassList();
383 }) 378 })
384 .catch(error => { 379 .catch(error => {
385 // console.log(error); 380 // console.log(error);
386 }); 381 });
387 }, 382 },
388 activeTab(type) { 383 activeTab(type) {
389 switch (type) { 384 switch (type) {
390 case "existing": 385 case "existing":
391 this.newActive = false; 386 this.newActive = false;
392 this.isActive = true; 387 this.isActive = true;
393 break; 388 break;
394 389
395 default: 390 default:
396 this.newActive = true; 391 this.newActive = true;
397 this.isActive = false; 392 this.isActive = false;
398 break; 393 break;
399 } 394 }
400 }, 395 },
401 close() { 396 close() {
402 this.dialog = false; 397 this.dialog = false;
403 setTimeout(() => { 398 setTimeout(() => {
404 this.editedItem = Object.assign({}, this.defaultItem); 399 this.editedItem = Object.assign({}, this.defaultItem);
405 this.editedIndex = -1; 400 this.editedIndex = -1;
406 }, 300); 401 }, 300);
407 }, 402 },
408 close1() { 403 close1() {
409 this.dialog1 = false; 404 this.dialog1 = false;
410 }, 405 },
411 submit() { 406 submit() {
412 if (this.$refs.form.validate()) { 407 if (this.$refs.form.validate()) {
413 let addClass = { 408 let addClass = {
414 classNum: this.addclasses.classNum 409 classNum: this.addclasses.classNum
415 }; 410 };
416 console.log(addClass); 411 console.log(addClass);
417 this.loading = true; 412 this.loading = true;
418 http() 413 http()
419 .post("/createClass", addClass) 414 .post("/createClass", addClass)
420 .then(response => { 415 .then(response => {
421 this.getClassList(); 416 this.getClassList();
422 if ((this.snackbar = true)) { 417 if ((this.snackbar = true)) {
423 this.text = "New class added successfully"; 418 this.text = "New class added successfully";
424 } 419 }
425 this.clear(); 420 this.clear();
426 this.loading = false; 421 this.loading = false;
427 }) 422 })
428 .catch(error => { 423 .catch(error => {
429 // console.log(error); 424 // console.log(error);
430 this.loading = false; 425 this.loading = false;
431 if ((this.snackbar = true)) { 426 if ((this.snackbar = true)) {
432 this.text = error.response.data.message; 427 this.text = error.response.data.message;
433 } 428 }
434 }); 429 });
435 } 430 }
436 }, 431 },
437 mail() {}, 432 mail() {},
438 download() {}, 433 download() {},
439 clear() { 434 clear() {
440 this.$refs.form.reset(); 435 this.$refs.form.reset();
441 }, 436 },
442 save() { 437 save() {
443 let editClass = { 438 let editClass = {
444 classId: this.editedItem._id, 439 classId: this.editedItem._id,
445 classNum: this.editedItem.classNum 440 classNum: this.editedItem.classNum
446 }; 441 };
447 http() 442 http()
448 .put("/updateClass", editClass) 443 .put("/updateClass", editClass)
449 .then(response => { 444 .then(response => {
450 console.log("editClass", editClass); 445 console.log("editClass", editClass);
451 if ((this.snackbar = true)) { 446 if ((this.snackbar = true)) {
452 this.text = "Successfully Edit Existing Class"; 447 this.text = "Successfully Edit Existing Class";
453 } 448 }
454 this.getClassList(); 449 this.getClassList();
455 }) 450 })
456 .catch(error => { 451 .catch(error => {
457 // console.log(error); 452 // console.log(error);
458 }); 453 });
459 this.close(); 454 this.close();
460 }, 455 },
461 handleDrawerToggle() { 456 handleDrawerToggle() {
462 window.getApp.$emit("APP_DRAWER_TOGGLED"); 457 window.getApp.$emit("APP_DRAWER_TOGGLED");
463 }, 458 },
464 handleFullScreen() { 459 handleFullScreen() {
465 Util.toggleFullScreen(); 460 Util.toggleFullScreen();
466 } 461 }
467 }, 462 },
468 mounted() { 463 mounted() {
469 this.getClassList(); 464 this.getClassList();
470 }, 465 },
471 computed: { 466 computed: {
472 toolbarColor() { 467 toolbarColor() {
473 return this.$vuetify.options.extra.mainNav; 468 return this.$vuetify.options.extra.mainNav;
474 } 469 }
475 } 470 }
476 }; 471 };
477 </script> 472 </script>
478 <style> 473 <style>
479 .v-tabs__div { 474 .v-tabs__div {
480 text-transform: none; 475 text-transform: none;
481 } 476 }
482 .v-input__prepend-outer { 477 .v-input__prepend-outer {
483 margin-right: 0px !important; 478 margin-right: 0px !important;
484 } 479 }
485 .v-card__actions .v-btn { 480 .v-card__actions .v-btn {
486 margin: 0 15px; 481 margin: 0 15px;
487 min-width: 120px; 482 min-width: 120px;
488 } 483 }
489 .primary { 484 .primary {
490 background-color: #aaa !important; 485 background-color: #aaa !important;
491 border-color: #aaa !important; 486 border-color: #aaa !important;
492 } 487 }
493 h4 { 488 h4 {
494 background-repeat: no-repeat; 489 background-repeat: no-repeat;
495 padding: 8px; 490 padding: 8px;
496 margin: auto; 491 margin: auto;
497 font-size: 25px; 492 font-size: 25px;
498 } 493 }
499 #name { 494 #name {
500 position: absolute; 495 position: absolute;
501 left: 100px; 496 left: 100px;
502 top: 17px; 497 top: 17px;
503 } 498 }
504 #icon { 499 #icon {
505 position: absolute; 500 position: absolute;
506 right: 8px; 501 right: 8px;
507 top: 8px; 502 top: 8px;
508 } 503 }
509 #m { 504 #m {
510 position: relative; 505 position: relative;
511 left: 135px; 506 left: 135px;
512 top: -15px; 507 top: -15px;
513 } 508 }
514 #G { 509 #G {
515 position: absolute; 510 position: absolute;
516 top: 38px; 511 top: 38px;
517 color: white; 512 color: white;
518 } 513 }
519 #bt { 514 #bt {
520 position: relative; 515 position: relative;
521 top: -20px; 516 top: -20px;
522 left: 115px; 517 left: 115px;
523 } 518 }
524 #e { 519 #e {
525 position: relative; 520 position: relative;
526 top: 5px; 521 top: 5px;
527 right: -30px; 522 right: -30px;
528 height: 17px; 523 height: 17px;
529 cursor: pointer; 524 cursor: pointer;
530 } 525 }
531 #d { 526 #d {
532 position: relative; 527 position: relative;
533 top: 5px; 528 top: 5px;
534 right: -70px; 529 right: -70px;
535 height: 17px; 530 height: 17px;
536 cursor: pointer; 531 cursor: pointer;
537 } 532 }
538 #indexId{ 533 #indexId{
539 padding: 0 0px !important; 534 padding: 0 0px !important;
540 } 535 }
541 #td { 536 #td {
542 border: 1px solid #dddddd; 537 border: 1px solid #dddddd;
543 text-align: left; 538 text-align: left;
544 padding: 8px; 539 padding: 8px;
545 } 540 }
546 #dialog { 541 #dialog {
547 height: 550px; 542 height: 550px;
548 } 543 }
549 .active { 544 .active {
550 background-color: black; 545 background-color: black;
551 color: white !important; 546 color: white !important;
552 } 547 }
553 .activebtn { 548 .activebtn {
554 color: black !important; 549 color: black !important;
555 } 550 }
556 #flex { 551 #flex {
557 height: 300px; 552 height: 300px;
558 } 553 }
559 .top { 554 .top {
560 margin-top: 100px; 555 margin-top: 100px;
561 } 556 }
562 .v-tabs__item a { 557 .v-tabs__item a {
563 font-size: 16px !important; 558 font-size: 16px !important;
564 } 559 }
565 @media screen and (max-width: 769px) { 560 @media screen and (max-width: 769px) {
566 .top { 561 .top {
567 margin-top: 0 !important; 562 margin-top: 0 !important;
568 } 563 }
569 .userSearch .v-icon { 564 .userSearch .v-icon {
570 font-size: 20px !important; 565 font-size: 20px !important;
571 margin-left: 20px; 566 margin-left: 20px;
572 } 567 }
573 } 568 }
574 @media screen and (max-width: 380px) { 569 @media screen and (max-width: 380px) {
575 .pl-3 { 570 .pl-3 {
576 padding-left: 0px !important; 571 padding-left: 0px !important;
577 } 572 }
578 .right { 573 .right {
579 float: none !important; 574 float: none !important;
580 } 575 }
581 .subheading { 576 .subheading {
582 font-size: 14px !important; 577 font-size: 14px !important;
583 } 578 }
584 .v-card__actions .v-btn { 579 .v-card__actions .v-btn {
585 margin: 0 0px; 580 margin: 0 0px;
586 min-width: 100px; 581 min-width: 100px;
587 } 582 }
588 .subheading { 583 .subheading {
589 font-size: 12px !important; 584 font-size: 12px !important;
590 } 585 }
591 h5 { 586 h5 {
592 font-size: 13px; 587 font-size: 13px;
593 } 588 }
594 } 589 }
595 .v-icon { 590 .v-icon {
596 font-size: 30px; 591 font-size: 30px;
597 } 592 }
598 @media screen and (min-width: 1270px) { 593 @media screen and (min-width: 1270px) {
599 .hide { 594 .hide {
600 display: none; 595 display: none;
601 } 596 }
602 } 597 }
603 @media screen and (max-width: 420px) { 598 @media screen and (max-width: 420px) {
604 .userSearch .v-text-field .v-label { 599 .userSearch .v-text-field .v-label {
605 line-height: 24px !important; 600 line-height: 24px !important;
606 } 601 }
607 .userSearch .v-label { 602 .userSearch .v-label {
608 font-size: 13px !important; 603 font-size: 13px !important;
609 } 604 }
610 .v-list__tile { 605 .v-list__tile {
611 font-size: 14px; 606 font-size: 14px;
612 padding: 0 10px; 607 padding: 0 10px;
613 } 608 }
614 .name { 609 .name {
615 font-size: 15px; 610 font-size: 15px;
616 } 611 }
617 } 612 }
src/pages/News/news.vue
Diff comments   View file @79006bd
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">
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 class="pa-3" 15 class="pa-3"
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 News</v-tab> 55 >Existing News</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 News</v-tab> 63 >Add News</v-tab>
64 64
65 <!-- ****** EDITS ALL NEWS DETAILS ****** --> 65 <!-- ****** EDITS ALL NEWS DETAILS ****** -->
66 66
67 <v-tab-item> 67 <v-tab-item>
68 <v-snackbar 68 <v-snackbar
69 :timeout="timeout" 69 :timeout="timeout"
70 :top="y === 'top'" 70 :top="y === 'top'"
71 :right="x === 'right'" 71 :right="x === 'right'"
72 :vertical="mode === 'vertical'" 72 :vertical="mode === 'vertical'"
73 v-model="snackbar" 73 v-model="snackbar"
74 color="success" 74 color="success"
75 >{{ text }}</v-snackbar> 75 >{{ text }}</v-snackbar>
76 <v-dialog v-model="dialog" max-width="1000px"> 76 <v-dialog v-model="dialog" max-width="1000px" scrollable>
77 <v-flex xs12 sm12> 77 <v-card flat>
78 <v-toolbar class="grey lighten-2"> 78 <v-toolbar class="grey lighten-2" flat>
79 <v-spacer></v-spacer> 79 <v-spacer></v-spacer>
80 <v-toolbar-title > <h3>Edit News</h3></v-toolbar-title> 80 <v-toolbar-title > <h3>Edit News</h3></v-toolbar-title>
81 <v-spacer></v-spacer> 81 <v-spacer></v-spacer>
82 </v-toolbar> 82 </v-toolbar>
83 <v-card flat> 83 <v-card-text style="height:600px;">
84 <v-form ref="form"> 84 <v-form ref="form">
85 <v-container fluid> 85 <v-container fluid>
86 <v-layout> 86 <v-layout row>
87 <!-- <v-flex 87 <v-flex
88 xs12 88 xs12
89 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4" 89 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
90 > 90 >
91 <v-avatar size="150px">
92 <img src="/static/icon/user.png" v-if="!editedItem.newsImageUrl">
93 <span v-for = "image in editedItem.newsImageUrl">
94 <img :src="image" alt="newsImage" v-if="editedItem.newsImageUrl">
95 </span>
96 </v-avatar> -->
97 <input 91 <input
98 type = "file" 92 type="file"
99 style="display: none" 93 style = "display: none"
100 ref="image" 94 ref="image"
101 accept="image/*" 95 accept="image/*"
96 multiple
102 @change="onFilePicked" 97 @change="onFilePicked"
103 > 98 >
104 <v-flex align-center justify-center layout text-xs-center > 99 <v-layout justify-center>
105 <!-- <v-avatar size="50px" style="position:absolute; top:20px;"> 100 <v-flex xs3 v-for="image in editedItem.newsImageUrl" :key="image" v-if="editedItem.newsImageUrl" class="profile-image-wrapper">
106 <img src="/static/icon/user.png"> 101 <img :src="image.imageUrl" height="160" width="160" alt="News" class="pa-2">
107 </v-avatar> --> 102 <v-icon class="red edit-profile-icon" dark @click="deleteImage(image._id,editedItem._id)">close</v-icon>
108 <span v-for = "image in editedItem.newsImageUrl" class="mt-4 pa-2"> 103 </v-flex>
109 <img :src="image" alt="News" width="240" height="180"> 104 <v-flex v-for="(file, index) in files" :key="index" v-if="files" v-else-if="editedItem.newsImageUrl">
110 </span> 105 <img :src="file" height="160" width="160" class="pa-2">
111 </v-flex> 106 </v-flex>
112 <!-- </v-flex> --> 107 </v-layout>
113 </v-layout> 108 <img src="/static/icon/user.png" v-if="editedItem.newsImageUrl ==''" height="160" width="160" alt="News">
114 <v-layout>
115 <v-flex xs12 sm12>
116 <v-layout>
117 <v-flex xs4 class="pt-4 subheading">
118 <label class="right">Select Class:</label>
119 </v-flex>
120 <v-flex xs5 class="ml-3">
121 <v-select
122 :items="addclass"
123 label="Select Class"
124 v-model="editedItem.select"
125 item-text="classNum"
126 item-value="_id"
127 name="Select Class"
128 @change="getSections(editedItem.select)"
129 required
130 ></v-select>
131 </v-flex>
132 </v-layout>
133 </v-flex>
134 <v-flex xs12 sm12>
135 <v-layout>
136 <v-flex xs4 class="pt-4 subheading">
137 <label class="right">Select Section:</label>
138 </v-flex>
139 <v-flex xs5 class="ml-3">
140 <v-select
141 :items="addSection"
142 label="Select Section"
143 v-model="editedItem.selectSection"
144 item-text="name"
145 item-value="_id"
146 name="Select Section"
147 required
148 ></v-select>
149 </v-flex>
150 </v-layout>
151 </v-flex> 109 </v-flex>
152 </v-layout> 110 </v-layout>
111 <!-- </v-layout> -->
153 <v-layout> 112 <v-layout>
154 <v-flex xs12 sm12> 113 <v-flex xs12 sm12>
155 <v-layout> 114 <v-layout>
156 <v-flex xs4 class="pt-4 subheading"> 115 <v-flex xs4 class="pt-4 subheading">
157 <label class="right">Title:</label> 116 <label class="right">Title:</label>
158 </v-flex> 117 </v-flex>
159 <v-flex xs5 class="ml-3"> 118 <v-flex xs5 class="ml-3">
160 <v-text-field 119 <v-text-field
161 v-model="editedItem.title" 120 v-model="editedItem.title"
162 placeholder="fill your Title" 121 placeholder="fill your Title"
163 name="name" 122 name="name"
164 type="text" 123 type="text"
165 required 124 required
166 ></v-text-field> 125 ></v-text-field>
167 </v-flex> 126 </v-flex>
168 </v-layout> 127 </v-layout>
169 </v-flex> 128 </v-flex>
170 <v-flex xs12 sm12> 129 <v-flex xs12 sm12>
171 <v-layout> 130 <v-layout>
172 <v-flex xs4 class="pt-4 subheading"> 131 <v-flex xs4 class="pt-4 subheading">
173 <label class="right">Description:</label> 132 <label class="right">Description:</label>
174 </v-flex> 133 </v-flex>
175 <v-flex xs5 class="ml-3"> 134 <v-flex xs5 class="ml-3">
176 <v-text-field 135 <v-text-field
177 placeholder="fill your Description" 136 placeholder="fill your Description"
178 v-model="editedItem.description" 137 v-model="editedItem.description"
179 type="text" 138 type="text"
180 name="email" 139 name="email"
181 required 140 required
182 ></v-text-field> 141 ></v-text-field>
183 </v-flex> 142 </v-flex>
184 </v-layout> 143 </v-layout>
185 </v-flex> 144 </v-flex>
186 <v-flex xs12> 145 <v-flex xs12>
187 <v-layout> 146 <v-layout>
188 <v-flex xs4 class="pt-4 subheading"> 147 <v-flex xs4 class="pt-4 subheading">
189 <label class="right">Uplaod Image:</label> 148 <label class="right">Add New Images:</label>
190 </v-flex> 149 </v-flex>
191 <v-flex xs5 class="ml-3"> 150 <v-flex xs5 class="ml-3">
192 <v-text-field 151 <v-text-field
193 label="Select Image" 152 label="Select Image"
194 @click="pickFile" 153 @click="pickFile"
195 v-model="imageName" 154 v-model="imageName"
196 append-icon="attach_file" 155 append-icon="attach_file"
197 multiple 156 multiple
198 ></v-text-field> 157 ></v-text-field>
199 </v-flex> 158 </v-flex>
200 </v-layout> 159 </v-layout>
201 </v-flex> 160 </v-flex>
202 </v-layout> 161 </v-layout>
203 <v-layout> 162 <v-layout>
204 <v-flex xs12 sm8 offset-sm2> 163 <v-flex xs12 sm8 offset-sm2>
205 <v-card-actions> 164 <v-card-actions>
206 <v-btn round dark @click.native="close">Cancel</v-btn> 165 <v-btn round dark @click.native="close">Cancel</v-btn>
207 <v-spacer></v-spacer> 166 <v-spacer></v-spacer>
208 <v-btn round dark @click="save">Save</v-btn> 167 <v-btn round dark @click="save">Save</v-btn>
209 </v-card-actions> 168 </v-card-actions>
210 </v-flex> 169 </v-flex>
211 </v-layout> 170 </v-layout>
212 </v-container> 171 </v-container>
213 </v-form> 172 </v-form>
173 </v-card-text>
214 </v-card> 174 </v-card>
215 </v-flex>
216 </v-dialog> 175 </v-dialog>
217 176
218 <!-- ****** PROFILE VIEW ALL NEWS DEATILS ****** --> 177 <!-- ****** PROFILE VIEW ALL NEWS DEATILS ****** -->
219 178
220 <v-dialog v-model="dialog1" max-width="800px"> 179 <v-dialog v-model="dialog1" max-width="800px">
221 <v-toolbar color="grey lighten-2"> 180 <v-card>
181 <v-toolbar color="grey lighten-2" flat>
222 <v-spacer></v-spacer> 182 <v-spacer></v-spacer>
223 <v-toolbar-title><h3>News</h3></v-toolbar-title> 183 <v-toolbar-title><h3>News</h3></v-toolbar-title>
224 <v-spacer></v-spacer> 184 <v-spacer></v-spacer>
225 <v-icon @click="close1">close</v-icon> 185 <v-icon @click="close1">close</v-icon>
226 </v-toolbar> 186 </v-toolbar>
227 <v-card>
228 <v-flex align-center justify-center layout text-xs-center > 187 <v-flex align-center justify-center layout text-xs-center >
229 <!-- <v-avatar size="50px" style="position:absolute; top:20px;"> 188 <!-- <v-avatar size="50px" style="position:absolute; top:20px;">
230 <img src="/static/icon/user.png"> 189 <img src="/static/icon/user.png">
231 </v-avatar> --> 190 </v-avatar> -->
232 <span v-for = "image in editedItem.newsImageUrl" class="mt-4 pa-2"> 191 <span v-for="(image,id) in editedItem.newsImageUrl" :key="id" class="mt-4 pa-2">
233 <img :src="image" alt="News" width="240" height="180"> 192 <img :src="image.imageUrl" alt="News" width="240" height="180">
234 </span> 193 </span>
235 </v-flex> 194 </v-flex>
236 <v-card-text> 195 <v-card-text>
237 <v-container grid-list-md> 196 <v-container grid-list-md>
238 <v-layout wrap> 197 <v-layout wrap>
239 <v-flex> 198 <v-flex>
240 <v-layout> 199 <v-layout>
241 <v-flex xs5 sm6> 200 <v-flex xs5 sm6>
242 <h5 class = "right my-1"><b>Title:</b></h5> 201 <h5 class = "right my-1"><b>Title:</b></h5>
243 </v-flex> 202 </v-flex>
244 <v-flex sm6 xs8> 203 <v-flex sm6 xs8>
245 <h5 class="my-1">{{ editedItem.title }}</h5> 204 <h5 class="my-1">{{ editedItem.title }}</h5>
246 </v-flex> 205 </v-flex>
247 </v-layout> 206 </v-layout>
248 <v-layout> 207 <v-layout>
249 <v-flex xs5 sm6> 208 <v-flex xs5 sm6>
250 <h5 class="right my-1"><b>Description:</b></h5> 209 <h5 class="right my-1"><b>Description:</b></h5>
251 </v-flex> 210 </v-flex>
252 <v-flex sm6 xs8> 211 <v-flex sm6 xs8>
253 <h5 class="my-1">{{ editedItem.description }}</h5> 212 <h5 class="my-1">{{ editedItem.description }}</h5>
254 </v-flex> 213 </v-flex>
255 </v-layout> 214 </v-layout>
256 </v-flex> 215 </v-flex>
257 </v-layout> 216 </v-layout>
258 </v-container> 217 </v-container>
259 </v-card-text> 218 </v-card-text>
260 </v-card> 219 </v-card>
261 </v-dialog> 220 </v-dialog>
262 221
263 <v-snackbar 222 <v-snackbar
264 :timeout="timeout" 223 :timeout="timeout"
265 :top="y === 'top'" 224 :top="y === 'top'"
266 :right="x === 'right'" 225 :right="x === 'right'"
267 :vertical="mode === 'vertical'" 226 :vertical="mode === 'vertical'"
268 v-model="snackbar" 227 v-model="snackbar"
269 color="success" 228 color="success"
270 >{{ text }}</v-snackbar> 229 >{{ text }}</v-snackbar>
271 230
272 <!-- ****** EXISTING-USERS NEWS TABLE ****** --> 231 <!-- ****** EXISTING-USERS NEWS TABLE ****** -->
273 <v-data-table 232 <v-data-table
274 :headers="headers" 233 :headers="headers"
275 :items="desserts" 234 :items="desserts"
276 :pagination.sync="pagination" 235 :pagination.sync="pagination"
277 :search="search" 236 :search="search"
278 > 237 >
279 <template slot="items" slot-scope="props"> 238 <template slot="items" slot-scope="props">
280 <td class="text-xs-center">{{ props.index}}</td> 239 <td class="text-xs-center">{{ props.index}}</td>
281 <td id="td"class="text-xs-center"> 240 <td id="td"class="text-xs-center">
282 <span v-for = "image in props.item.newsImageUrl" class="pa-2"> 241 <span v-for = "image in props.item.newsImageUrl" class="pa-2">
283 <!-- <v-avatar size = "70"> --> 242 <img :src="image.imageUrl" alt="newsImage" width="100" height="70">
284 <img :src="image" alt="newsImage" width="100" height="70">
285 <!-- </v-avatar> -->
286 </span> 243 </span>
287 </td> 244 </td>
288 <td id="td" class="text-xs-center">{{ props.item.title}}</td> 245 <td id="td" class="text-xs-center">{{ props.item.title}}</td>
289 <td id="td" class="text-xs-center">{{ props.item.description}}</td> 246 <td id="td" class="text-xs-center">{{ props.item.description}}</td>
290 247
291 <td class="text-xs-center"> 248 <td class="text-xs-center">
292 <span> 249 <span>
293 <img 250 <img
294 style="cursor:pointer; width:25px; height:18px; " 251 style="cursor:pointer; width:25px; height:18px; "
295 class="mr-5" 252 class="mr-5"
296 @click="profile(props.item)" 253 @click="profile(props.item)"
297 src="/static/icon/eye1.png" 254 src="/static/icon/eye1.png"
298 > 255 >
299 <img 256 <img
300 style="cursor:pointer; width:20px; height:18px; " 257 style="cursor:pointer; width:20px; height:18px; "
301 class="mr-5" 258 class="mr-5"
302 @click="editItem(props.item)" 259 @click="editItem(props.item)"
303 src="/static/icon/edit1.png" 260 src="/static/icon/edit1.png"
304 > 261 >
305 <img 262 <img
306 style="cursor:pointer; height:20px; " 263 style="cursor:pointer; height:20px; "
307 class="mr-5" 264 class="mr-5"
308 @click="deleteItem(props.item)" 265 @click="deleteItem(props.item)"
309 src="/static/icon/delete1.png" 266 src="/static/icon/delete1.png"
310 > 267 >
311 </span> 268 </span>
312 </td> 269 </td>
313 </template> 270 </template>
314 <v-alert 271 <v-alert
315 slot="no-results" 272 slot="no-results"
316 :value="true" 273 :value="true"
317 color="error" 274 color="error"
318 icon="warning" 275 icon="warning"
319 >Your search for "{{ search }}" found no results.</v-alert> 276 >Your search for "{{ search }}" found no results.</v-alert>
320 </v-data-table> 277 </v-data-table>
321 </v-tab-item> 278 </v-tab-item>
322 279
323 <!-- ****** ADD MULTIPLE NEWS ****** --> 280 <!-- ****** ADD MULTIPLE NEWS ****** -->
324 281
325 <v-tab-item> 282 <v-tab-item>
326 <v-container> 283 <v-container>
327 <v-snackbar 284 <v-snackbar
328 :timeout="timeout" 285 :timeout="timeout"
329 :top="y === 'top'" 286 :top="y === 'top'"
330 :right="x === 'right'" 287 :right="x === 'right'"
331 :vertical="mode === 'vertical'" 288 :vertical="mode === 'vertical'"
332 v-model="snackbar" 289 v-model="snackbar"
333 color="success" 290 color="success"
334 >{{ text }}</v-snackbar> 291 >{{ text }}</v-snackbar>
335 <v-flex xs12 sm12 class="my-4"> 292 <v-flex xs12 sm12 class="my-4">
336 <v-card flat> 293 <v-card flat>
337 <v-form ref="form" v-model="valid" lazy-validation> 294 <v-form ref="form" v-model="valid" lazy-validation>
338 <v-container fluid> 295 <v-container fluid>
339 <v-layout> 296 <v-layout>
340 <v-flex 297 <v-flex
341 xs6 offset-sm3 298 xs12
342 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" 299 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
343 > 300 >
344 <input 301 <input
345 type="file" 302 type="file"
346 style = "display: none" 303 style = "display: none"
347 ref="image" 304 ref="image"
348 accept="image/*" 305 accept="image/*"
349 multiple 306 multiple
350 @change="onFilePicked" 307 @change="onFilePicked"
351 > 308 >
352 <v-layout> 309 <v-layout justify-center>
353 <v-flex v-for="(file, index) in files" :key="index"> 310 <v-flex v-for="(file, index) in files" :key="index" v-if="files">
354 <v-avatar size="140"> 311 <img :src="file" height="160" width="160px;">
355 <img :src = "file.url" height="200" width="320px;">
356 </v-avatar>
357 </v-flex> 312 </v-flex>
358 </v-layout> 313 </v-layout>
314 <img src="/static/icon/user.png" v-if="files ==''" height="140" width="180px;">
359 </v-flex> 315 </v-flex>
360 </v-layout> 316 </v-layout>
361 <v-flex xs12> 317 <v-flex xs12>
362 <v-layout> 318 <v-layout>
363 <v-flex xs4 class="pt-4 subheading"> 319 <v-flex xs4 class="pt-4 subheading">
364 <label class="right">Title:</label> 320 <label class="right">Title:</label>
365 </v-flex> 321 </v-flex>
366 <v-flex xs4 class="ml-3"> 322 <v-flex xs4 class="ml-3">
367 <v-text-field 323 <v-text-field
368 v-model="addNews.title" 324 v-model="addNews.title"
369 placeholder="fill your Title" 325 placeholder="fill your Title"
370 name="name" 326 name="name"
371 type="text" 327 type="text"
372 :rules="titleRules" 328 :rules="titleRules"
373 required 329 required
374 ></v-text-field> 330 ></v-text-field>
375 </v-flex> 331 </v-flex>
376 </v-layout> 332 </v-layout>
377 </v-flex> 333 </v-flex>
378 <v-flex xs12> 334 <v-flex xs12>
379 <v-layout> 335 <v-layout>
380 <v-flex xs4 class="pt-4 subheading"> 336 <v-flex xs4 class="pt-4 subheading">
381 <label class="right">Description:</label> 337 <label class="right">Description:</label>
382 </v-flex> 338 </v-flex>
383 <v-flex xs4 class="ml-3"> 339 <v-flex xs4 class="ml-3">
384 <v-text-field 340 <v-text-field
385 placeholder="fill your Description" 341 placeholder="fill your Description"
386 :rules="descriptionRules" 342 :rules="descriptionRules"
387 v-model="addNews.description" 343 v-model="addNews.description"
388 type="text" 344 type="text"
389 name="email" 345 name="email"
390 required 346 required
391 ></v-text-field> 347 ></v-text-field>
392 </v-flex> 348 </v-flex>
393 </v-layout> 349 </v-layout>
394 </v-flex> 350 </v-flex>
395 <v-flex xs12> 351 <v-flex xs12>
396 <v-layout> 352 <v-layout>
397 <v-flex xs4 class="pt-4 subheading"> 353 <v-flex xs4 class="pt-4 subheading">
398 <label class="right">Uplaod Image:</label> 354 <label class="right">Uplaod Image:</label>
399 </v-flex> 355 </v-flex>
400 <v-flex xs4 class="ml-3"> 356 <v-flex xs4 class="ml-3">
401 <v-text-field 357 <v-text-field
402 label="Select Image" 358 label="Select Image"
403 @click="pickFile" 359 @click="pickFile"
404 v-model="imageName" 360 v-model="imageName"
405 append-icon="attach_file" 361 append-icon="attach_file"
406 multiple 362 multiple
407 ></v-text-field> 363 ></v-text-field>
408 </v-flex> 364 </v-flex>
409 </v-layout> 365 </v-layout>
410 </v-flex> 366 </v-flex>
411 <v-layout> 367 <v-layout>
412 <v-flex xs12 sm6 offset-sm3> 368 <v-flex xs12 sm6 offset-sm3>
413 <v-card-actions> 369 <v-card-actions>
414 <v-btn @click="clear" round dark>clear</v-btn> 370 <v-btn @click="clear" round dark>clear</v-btn>
415 <v-spacer></v-spacer> 371 <v-spacer></v-spacer>
416 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 372 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
417 </v-card-actions> 373 </v-card-actions>
418 </v-flex> 374 </v-flex>
419 </v-layout> 375 </v-layout>
420 </v-container> 376 </v-container>
421 </v-form> 377 </v-form>
422 </v-card> 378 </v-card>
423 </v-flex> 379 </v-flex>
424 </v-container> 380 </v-container>
425 </v-tab-item> 381 </v-tab-item>
426 </v-tabs> 382 </v-tabs>
427 <div class="loader" v-if="showLoader"> 383 <div class="loader" v-if="showLoader">
428 <v-progress-circular indeterminate color="white"></v-progress-circular> 384 <v-progress-circular indeterminate color="white"></v-progress-circular>
429 </div> 385 </div>
430 </v-app> 386 </v-app>
431 </template> 387 </template>
432 388
433 <script> 389 <script>
434 import http from "@/Services/http.js"; 390 import http from "@/Services/http.js";
435 import Util from "@/util"; 391 import Util from "@/util";
436 392
437 export default { 393 export default {
438 data: () => ({ 394 data: () => ({
439 snackbar: false, 395 snackbar: false,
440 y: "top", 396 y: "top",
441 x: "right", 397 x: "right",
442 mode: "", 398 mode: "",
443 timeout: 3000, 399 timeout: 3000,
444 text: "", 400 text: "",
445 loading: false, 401 loading: false,
446 date: null, 402 date: null,
447 search: "", 403 search: "",
448 showLoader:false, 404 showLoader:false,
449 dialog: false, 405 dialog: false,
450 dialog1: false, 406 dialog1: false,
451 valid: true, 407 valid: true,
452 isActive: true, 408 isActive: true,
453 newActive: false, 409 newActive: false,
454 addclass: [], 410 addclass: [],
455 addSection: [], 411 addSection: [],
456 AddUsercredentials: {}, 412 AddUsercredentials: {},
457 pagination: { 413 pagination: {
458 rowsPerPage: 15 414 rowsPerPage: 15
459 }, 415 },
460 imageName: "", 416 imageName: "",
461 imageUrl: "", 417 imageUrl: "",
462 imageFile: "", 418 imageFile: "",
463 image: [], 419 image: [],
464 upload:"", 420 upload:"",
465 files:[], 421 files:[],
466 titleRules: [v => !!v || " Tilte is required"], 422 titleRules: [v => !!v || " Tilte is required"],
467 descriptionRules: [v => !!v || " Description is required"], 423 descriptionRules: [v => !!v || " Description is required"],
468 headers: [ 424 headers: [
469 { 425 {
470 align: "justify-center", 426 align: "justify-center",
471 text: "No", 427 text: "No",
472 sortable: false, 428 sortable: false,
473 value: "No" 429 value: "No"
474 }, 430 },
475 { text: "Image", vaue: "image",sortable: false, align: "center"}, 431 { text: "Image", vaue: "image",sortable: false, align: "center"},
476 { text: "Title", value: "title", sortable: false, align: "center" }, 432 { text: "Title", value: "title", sortable: false, align: "center" },
477 { text: "Description", value: "description", sortable: false, align: "center" }, 433 { text: "Description", value: "description", sortable: false, align: "center" },
478 { text: "Action", value: "", sortable: false, align: "center" } 434 { text: "Action", value: "", sortable: false, align: "center" }
479 ], 435 ],
480 desserts: [{ 436 desserts: [{
481 image:"https://picsum.photos/500/300?image", 437 image:"https://picsum.photos/500/300?image",
482 title:"title", 438 title:"title",
483 description:"description", 439 description:"description",
484 440
485 }], 441 }],
486 editedIndex: -1, 442 editedIndex: -1,
487 addNews: { 443 addNews: {
488 title: "", 444 title: "",
489 description: "", 445 description: "",
490 }, 446 },
491 editedItem: { 447 editedItem: {
492 title: "", 448 title: "",
493 description: "", 449 description: "",
494 450
495 }, 451 },
496 defaultItem: { 452 defaultItem: {
497 title: "", 453 title: "",
498 description: "" 454 description: ""
499 }, 455 },
500 userName: "", 456 userName: "",
501 items: [ 457 items: [
502 { 458 {
503 href: "/changepassword", 459 href: "/changepassword",
504 title: "Change Password", 460 title: "Change Password",
505 click: e => { 461 click: e => {
506 console.log(e); 462 console.log(e);
507 } 463 }
508 }, 464 },
509 { 465 {
510 href: "#", 466 href: "#",
511 title: "Logout", 467 title: "Logout",
512 click: e => { 468 click: e => {
513 window.getApp.$emit("APP_LOGOUT"); 469 window.getApp.$emit("APP_LOGOUT");
514 } 470 }
515 } 471 }
516 ] 472 ]
517 }), 473 }),
518 methods: { 474 methods: {
519 getSections(_id) { 475 getSections(_id) {
520 console.log("_id",_id) 476 console.log("_id",_id)
521 var token = this.$store.state.token; 477 var token = this.$store.state.token;
522 http() 478 http()
523 .get( 479 .get(
524 "/getSectionsList", 480 "/getSectionsList",
525 { params: { classId: _id } }, 481 { params: { classId: _id } },
526 { 482 {
527 headers: { Authorization: "Bearer " + token } 483 headers: { Authorization: "Bearer " + token }
528 } 484 }
529 ) 485 )
530 .then(response => { 486 .then(response => {
531 this.addSection = response.data.data; 487 this.addSection = response.data.data;
532 // console.log("getSectionsList=====>", this.addSection); 488 // console.log("getSectionsList=====>", this.addSection);
533 }) 489 })
534 .catch(err => { 490 .catch(err => {
535 console.log("err====>", err); 491 console.log("err====>", err);
536 // this.$router.replace({ path: '/' }); 492 // this.$router.replace({ path: '/' });
537 }); 493 });
538 }, 494 },
539 pickFile() { 495 pickFile() {
540 this.$refs.image.click(); 496 this.$refs.image.click();
541 }, 497 },
542 onFilePicked(e) { 498 onFilePicked(e) {
543 // console.log(e) 499 // console.log(e)
544 const files = e.target.files; 500 const files = e.target.files;
545 /** fetch Image Name **/ 501 /** fetch Image Name **/
546 if (files[0] !== undefined) { 502 if (files[0] !== undefined) {
547 this.imageName = files[0].name; 503 this.imageName = files[0].name;
548 if (this.imageName.lastIndexOf(".") <= 0) { 504 if (this.imageName.lastIndexOf(".") <= 0) {
549 return; 505 return;
550 } 506 }
551 this.files = []; 507 this.files = [];
552 console.log("files", this.files); 508 // console.log("files", this.files);
553 /** Select many image and showing many image add to news card **/ 509 /** Select many image and showing many image add to news card **/
554 const test = Array.from(files).forEach((file, idx) => { 510 const test = Array.from(files).forEach((file, idx) => {
555 const fr = new FileReader(); 511 const fr = new FileReader();
556 const getResult = new Promise(resolve => { 512 const getResult = new Promise(resolve => {
557 fr.onload = e => { 513 fr.onload = e => {
558 this.files.push({ 514 this.files.push(
559 id: idx, 515 // id: idx,
560 url: e.target.result 516 e.target.result
561 }); 517 );
562 }; 518 };
563 }); 519 });
564 fr.readAsDataURL(file); 520 fr.readAsDataURL(file);
565 return getResult.then(file => { 521 return getResult.then(file => {
566 return file; 522 return file;
567 }); 523 });
568 }); 524 });
569 const fr = new FileReader(); 525 const fr = new FileReader();
570 fr.readAsDataURL(files[0]); 526 fr.readAsDataURL(files[0]);
571 fr.addEventListener("load", () => { 527 fr.addEventListener("load", () => {
572 this.imageFile = files; // this is an image file that can be sent to server... 528 this.imageFile = files; // this is an image file that can be sent to server...
573 console.log("uploadImage=======>", this.imageFile ); 529 // console.log("uploadImage=======>", this.imageFile );
574 }); 530 });
575 } else { 531 } else {
576 this.imageName = ""; 532 this.imageName = "";
577 this.imageFile = ""; 533 this.imageFile = "";
578 this.imageUrl = ""; 534 this.imageUrl = "";
579 } 535 }
580 }, 536 },
581 getNewsList() { 537 getNewsList() {
582 this.showLoader = true; 538 this.showLoader = true;
583 var token = this.$store.state.token; 539 var token = this.$store.state.token;
584 http() 540 http()
585 .get("/getNewsList", { 541 .get("/getNewsList", {
586 headers: { Authorization: "Bearer " + token } 542 headers: { Authorization: "Bearer " + token }
587 }) 543 })
588 .then(response => { 544 .then(response => {
589 this.desserts = response.data.data; 545 this.desserts = response.data.data;
590 this.showLoader = false; 546 this.showLoader = false;
591 // console.log("getNewsList=====>",this.desserts) 547 // console.log("getNewsList=====>",this.desserts)
592 }) 548 })
593 .catch(err => { 549 .catch(err => {
594 // console.log("err====>", err); 550 // console.log("err====>", err);
595 this.showLoader = false; 551 this.showLoader = false;
596 this.$router.replace({ path: "/" }); 552 this.$router.replace({ path: "/" });
597 }); 553 });
598 }, 554 },
599 editItem(item) { 555 editItem(item) {
600 this.editedIndex = this.desserts.indexOf(item); 556 this.editedIndex = this.desserts.indexOf(item);
601 this.editedItem = Object.assign({}, item); 557 this.editedItem = Object.assign({}, item);
602 this.dialog = true; 558 this.dialog = true;
603 }, 559 },
604 profile(item) { 560 profile(item) {
605 this.editedIndex = this.desserts.indexOf(item); 561 this.editedIndex = this.desserts.indexOf(item);
606 this.editedItem = Object.assign({}, item); 562 this.editedItem = Object.assign({}, item);
607 this.dialog1 = true; 563 this.dialog1 = true;
608 }, 564 },
609 deleteItem(item) { 565 deleteItem(item) {
610 let deleteNews = { 566 let deleteNews = {
611 newsId: item._id 567 newsId: item._id
612 }; 568 };
613 http() 569 http()
614 .delete( 570 .delete(
615 "/deleteNews", 571 "/deleteNews",
616 confirm("Are you sure you want to delete this?") && { 572 confirm("Are you sure you want to delete this?") && {
617 params: deleteNews 573 params: deleteNews
618 } 574 }
619 ) 575 )
620 .then(response => { 576 .then(response => {
621 // console.log("deleteNews",deleteNews) 577 // console.log("deleteNews",deleteNews)
622 if ((this.snackbar = true)) { 578 if ((this.snackbar = true)) {
623 this.text = "Successfully delete Existing News"; 579 this.text = "Successfully delete Existing News";
624 } 580 }
625 this.getNewsList(); 581 this.getNewsList();
626 }) 582 })
627 .catch(error => { 583 .catch(error => {
628 // console.log(error); 584 // console.log(error);
629 }); 585 });
630 }, 586 },
587 deleteImage(imageId, newsId){
588 console.log(imageId, newsId)
589 let deleteImages = {
590 newsId: newsId,
591 imageId: imageId
592 };
593 http()
594 .put("/deleteImages", deleteImages)
595 .then(response => {
596 console.log("deleteNews",deleteImages)
597 if ((this.snackbar = true)) {
598 this.text = "Image deleted Successfully";
599 }
600 this.getNewsList();
601 })
602 .catch(error => {
603 console.log(error);
604 });
605 },
631 activeTab(type) { 606 activeTab(type) {
632 switch (type) { 607 switch (type) {
633 case "existing": 608 case "existing":
634 this.newActive = false; 609 this.newActive = false;
635 this.isActive = true; 610 this.isActive = true;
636 break; 611 break;
637 612
638 default: 613 default:
639 this.newActive = true; 614 this.newActive = true;
640 this.isActive = false; 615 this.isActive = false;
641 break; 616 break;
642 } 617 }
643 }, 618 },
644 close() { 619 close() {
645 this.dialog = false; 620 this.dialog = false;
646 setTimeout(() => { 621 setTimeout(() => {
647 this.editedItem = Object.assign({}, this.defaultItem); 622 this.editedItem = Object.assign({}, this.defaultItem);
648 this.editedIndex = -1; 623 this.editedIndex = -1;
649 }, 300); 624 }, 300);
650 }, 625 },
651 close1() { 626 close1() {
652 this.dialog1 = false; 627 this.dialog1 = false;
653 }, 628 },
654 submit() { 629 submit() {
655 console.log("===========>",this.image) 630 console.log("===========>",this.image)
656 this.loading = true; 631 this.loading = true;
657 if (this.$refs.form.validate()) { 632 if (this.$refs.form.validate()) {
658 let newsData = new FormData(); 633 // let newsData = new FormData();
659 for( var i = 0; i < this.imageFile.length; i++ ){ 634 // for( var i = 0; i < this.imageFile.length; i++ ){
660 let file = this.imageFile[i]; 635 // let file = this.imageFile[i];
661 newsData.append("upload", file ); 636 // newsData.append("upload", file );
637 // }
638 // newsData.append("title",this.addNews.title);
639 // newsData.append("description",this.addNews.description);
640 // console.log("newsDataData",newsData);
641 let newsData ={
642 title:this.addNews.title,
643 description:this.addNews.description,
644 upload:this.files
662 } 645 }
663 newsData.append("title",this.addNews.title);
664 newsData.append("description",this.addNews.description);
665 console.log("newsDataData",newsData);
666
667 http() 646 http()
668 .post("/createNews", newsData) 647 .post("/createNews", newsData)
669 .then(response => { 648 .then(response => {
670 console.log(newsData) 649 console.log(newsData)
671 if ((this.snackbar = true)) { 650 if ((this.snackbar = true)) {
672 this.text = "New News added successfully"; 651 this.text = "New News added successfully";
673 } 652 }
674 this.getNewsList(); 653 this.getNewsList();
675 this.loading = false; 654 this.loading = false;
676 this.clear(); 655 this.clear();
677 }) 656 })
678 .catch(error => { 657 .catch(error => {
679 if ((this.snackbar = true)) { 658 if ((this.snackbar = true)) {
680 this.text = error.response.data.message; 659 this.text = error.response.data.message;
681 } 660 }
682 }); 661 });
683 } 662 }
684 }, 663 },
685 mail() {}, 664 mail() {},
686 download() {}, 665 download() {},
687 clear() { 666 clear() {
688 this.$refs.form.reset(); 667 this.$refs.form.reset();
689 }, 668 },
690 save() { 669 save() {
691 let newsData = new FormData(); 670 // let imageData = new FormData();
692 for( var i = 0; i < this.imageFile.length; i++ ){ 671 // for( var i = 0; i < this.imageFile.length; i++ ){
693 let file = this.imageFile[i]; 672 // let file = this.imageFile[i];
694 newsData.append("upload", file ); 673 // imageData.append("upload", file );
695 } 674 // }
696 newsData.append("title",this.editedItem.title); 675 // console.log(imageData)
697 newsData.append("description",this.editedItem.description); 676 let editNews = {
677 title:this.editedItem.title,
678 description:this.editedItem.description,
679 newsId:this.editedItem._id,
680 upload:this.files
681 }
698 http() 682 http()
699 .put("/updateNews", editNews) 683 .put("/updateNews", editNews)
700 .then(response => { 684 .then(response => {
701 // console.log("updateNews",updateNews); 685 // console.log("updateNews",updateNews);
702 if ((this.snackbar = true)) { 686 if ((this.snackbar = true)) {
703 this.text = "Successfully Edit Existing News"; 687 this.text = "Successfully Edit Existing News";
704 } 688 }
705 this.getNewsList(); 689 this.getNewsList();
690 this.close();
706 }) 691 })
707 .catch(error => { 692 .catch(error => {
708 // console.log(error); 693 // console.log(error);
709 }); 694 });
710 this.close();
711 }, 695 },
712 handleDrawerToggle() { 696 handleDrawerToggle() {
713 window.getApp.$emit("APP_DRAWER_TOGGLED"); 697 window.getApp.$emit("APP_DRAWER_TOGGLED");
714 }, 698 },
715 handleFullScreen() { 699 handleFullScreen() {
716 Util.toggleFullScreen(); 700 Util.toggleFullScreen();
717 } 701 }
718 }, 702 },
719 mounted() { 703 mounted() {
720 this.getNewsList(); 704 this.getNewsList();
721 var token = this.$store.state.token; 705 var token = this.$store.state.token;
722 http() 706 http()
723 .get("/getClassesList", { 707 .get("/getClassesList", {
724 headers: { Authorization: "Bearer " + token } 708 headers: { Authorization: "Bearer " + token }
725 }) 709 })
726 .then(response => { 710 .then(response => {
727 this.addclass = response.data.data; 711 this.addclass = response.data.data;
728 // console.log("getClassesList=====>",this.addclass) 712 // console.log("getClassesList=====>",this.addclass)
729 }) 713 })
730 .catch(err => { 714 .catch(err => {
731 // console.log("err====>", err); 715 // console.log("err====>", err);
732 }); 716 });
733 this.editItem 717 this.editItem
734 }, 718 },
735 computed: { 719 computed: {
736 toolbarColor() { 720 toolbarColor() {
737 return this.$vuetify.options.extra.mainNav; 721 return this.$vuetify.options.extra.mainNav;
738 } 722 }
739 } 723 }
740 }; 724 };
741 </script> 725 </script>
742 <style scoped> 726 <style scoped>
743 .pl-3 { 727 .pl-3 {
744 padding-left: 0px !important; 728 padding-left: 0px !important;
745 } 729 }
746 .v-tabs__div { 730 .v-tabs__div {
747 text-transform: none; 731 text-transform: none;
748 } 732 }
749 .v-input__prepend-outer { 733 .v-input__prepend-outer {
750 margin-right: 0px !important; 734 margin-right: 0px !important;
751 } 735 }
752 .v-card__actions .v-btn { 736 .v-card__actions .v-btn {
753 margin: 0 15px; 737 margin: 0 15px;
754 min-width: 120px; 738 min-width: 120px;
755 } 739 }
756 .primary { 740 .primary {
757 background-color: #aaa !important; 741 background-color: #aaa !important;
758 border-color: #aaa !important; 742 border-color: #aaa !important;
759 } 743 }
760 h4 { 744 h4 {
761 background-repeat: no-repeat; 745 background-repeat: no-repeat;
762 padding: 8px; 746 padding: 8px;
763 margin: auto; 747 margin: auto;
764 font-size: 25px; 748 font-size: 25px;
765 } 749 }
766 #name { 750 #name {
767 position: absolute; 751 position: absolute;
768 left: 100px; 752 left: 100px;
769 top: 17px; 753 top: 17px;
770 } 754 }
771 #icon { 755 #icon {
772 position: absolute; 756 position: absolute;
773 right: 8px; 757 right: 8px;
774 top: 8px; 758 top: 8px;
775 } 759 }
776 #m { 760 #m {
777 position: relative; 761 position: relative;
778 left: 135px; 762 left: 135px;
779 top: -15px; 763 top: -15px;
780 } 764 }
781 #G { 765 #G {
782 position: absolute; 766 position: absolute;
783 top: 38px; 767 top: 38px;
784 color: white; 768 color: white;
785 } 769 }
786 #bt { 770 #bt {
787 position: relative; 771 position: relative;
788 top: -20px; 772 top: -20px;
789 left: 115px; 773 left: 115px;
790 } 774 }
791 #e { 775 #e {
792 position: relative; 776 position: relative;
793 top: 5px; 777 top: 5px;
794 right: -30px; 778 right: -30px;
795 height: 17px; 779 height: 17px;
796 cursor: pointer; 780 cursor: pointer;
797 } 781 }
798 #d { 782 #d {
799 position: relative; 783 position: relative;
800 top: 5px; 784 top: 5px;
801 right: -70px; 785 right: -70px;
802 height: 17px; 786 height: 17px;
803 cursor: pointer; 787 cursor: pointer;
804 } 788 }
805 #td { 789 #td {
806 border: 1px solid #dddddd; 790 border: 1px solid #dddddd;
807 text-align: left; 791 text-align: left;
808 padding: 8px; 792 padding: 8px;
809 } 793 }
810 #dialog { 794 #dialog {
811 height: 550px; 795 height: 550px;
812 } 796 }
813 .active { 797 .active {
814 background-color: black; 798 background-color: black;
815 color: white !important; 799 color: white !important;
816 } 800 }
817 .activebtn { 801 .activebtn {
818 color: black !important; 802 color: black !important;
819 } 803 }
820 #flex { 804 #flex {
821 height: 300px; 805 height: 300px;
822 } 806 }
823 .top { 807 .top {
824 margin-top: 100px; 808 margin-top: 100px;
825 } 809 }
826 .v-tabs__item a { 810 .v-tabs__item a {
827 font-size: 16px !important; 811 font-size: 16px !important;
828 } 812 }
829 .list{ 813 .list{
830 padding: 0 0px !important; 814 padding: 0 0px !important;
831 } 815 }
816 .profile-image-wrapper {
817 position: relative;
818 }
819 .edit-profile-icon {
820 position: absolute;
821 right: 15px;
822 top: 15px;
823 cursor: pointer;
824 }
825 .profile-image-wrapper > .edit-profile-icon {
826 right: 10%;
827 top: 0%;
828 margin-top: 8px;
829 border-radius: 50%;
830 padding: 7px;
831 font-size: 20px;
832 }
832 @media screen and (max-width: 769px) { 833 @media screen and (max-width: 769px) {
833 .top { 834 .top {
834 margin-top: 0 !important; 835 margin-top: 0 !important;
835 } 836 }
836 .userSearch .v-icon { 837 .userSearch .v-icon {
837 font-size: 20px !important; 838 font-size: 20px !important;
838 margin-left: 20px; 839 margin-left: 20px;
839 } 840 }
840 } 841 }
841 @media screen and (max-width: 380px) { 842 @media screen and (max-width: 380px) {
src/pages/Section/section.vue
Diff comments   View file @79006bd
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="grey lighten-2"> 69 <v-toolbar color="grey lighten-2">
70 <v-spacer></v-spacer> 70 <v-spacer></v-spacer>
71 <v-toolbar-title><h3>Edit Section</h3></v-toolbar-title> 71 <v-toolbar-title><h3>Edit Section</h3></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-autocomplete 101 <v-autocomplete
102 v-model="editedItem.name" 102 v-model="editedItem.name"
103 placeholder="fill your Section Name" 103 placeholder="fill your Section Name"
104 :items="SectionName" 104 :items="SectionName"
105 ></v-autocomplete> 105 ></v-autocomplete>
106 </v-flex> 106 </v-flex>
107 107
108 </v-layout> 108 </v-layout>
109 <v-card-actions> 109 <v-card-actions>
110 <v-btn round dark @click.native="close">Cancel</v-btn> 110 <v-btn round dark @click.native="close">Cancel</v-btn>
111 <v-spacer></v-spacer> 111 <v-spacer></v-spacer>
112 <v-btn round dark @click="save">Save</v-btn> 112 <v-btn round dark @click="save">Save</v-btn>
113 </v-card-actions> 113 </v-card-actions>
114 </v-form> 114 </v-form>
115 </v-flex> 115 </v-flex>
116 </v-layout> 116 </v-layout>
117 </v-container> 117 </v-container>
118 </v-card-text> 118 </v-card-text>
119 </v-card> 119 </v-card>
120 </v-dialog> 120 </v-dialog>
121 121
122 <!-- ****** PROFILE VIEW SECTION DATA ****** --> 122 <!-- ****** PROFILE VIEW SECTION DATA ****** -->
123 123
124 <v-dialog v-model="dialog1" max-width="600px"> 124 <v-dialog v-model="dialog1" max-width="600px">
125 <v-toolbar color="grey lighten-2"> 125 <v-toolbar color="grey lighten-2">
126 <v-spacer></v-spacer> 126 <v-spacer></v-spacer>
127 <v-toolbar-title><h3>Section</h3></v-toolbar-title> 127 <v-toolbar-title><h3>Section</h3></v-toolbar-title>
128 <v-spacer></v-spacer> 128 <v-spacer></v-spacer>
129 <v-icon @click="close1">close</v-icon> 129 <v-icon @click="close1">close</v-icon>
130 </v-toolbar> 130 </v-toolbar>
131 <v-card> 131 <v-card>
132 <v-flex align-center justify-center layout text-xs-center> 132 <v-flex align-center justify-center layout text-xs-center>
133 <v-avatar size="50px" style="position:absolute; top:20px;"> 133 <v-avatar size="50px" style="position:absolute; top:20px;">
134 <img src="/static/icon/user.png"> 134 <img src="/static/icon/user.png">
135 </v-avatar> 135 </v-avatar>
136 </v-flex> 136 </v-flex>
137 <v-card-text> 137 <v-card-text>
138 <v-container grid-list-md> 138 <v-container grid-list-md>
139 <v-layout wrap> 139 <v-layout wrap>
140 <v-flex><br><br> 140 <v-flex><br><br>
141 <v-layout> 141 <v-layout>
142 <v-flex xs5 sm6> 142 <v-flex xs5 sm6>
143 <h5 class="right my-1"><b>Class Name:</b></h5> 143 <h5 class="right my-1"><b>Class Name:</b></h5>
144 </v-flex> 144 </v-flex>
145 <v-flex sm6 xs8> 145 <v-flex sm6 xs8>
146 <h5 class="my-1">{{ editedItem.classData.classNum }}</h5> 146 <h5 class="my-1">{{ editedItem.classData.classNum }}</h5>
147 </v-flex> 147 </v-flex>
148 </v-layout> 148 </v-layout>
149 <v-layout> 149 <v-layout>
150 <v-flex xs5 sm6> 150 <v-flex xs5 sm6>
151 <h5 class="right my-1"><b>Section Name:</b></h5> 151 <h5 class="right my-1"><b>Section Name:</b></h5>
152 </v-flex> 152 </v-flex>
153 <v-flex sm6 xs8> 153 <v-flex sm6 xs8>
154 <h5 class="my-1">{{ editedItem.name }}</h5> 154 <h5 class="my-1">{{ editedItem.name }}</h5>
155 </v-flex> 155 </v-flex>
156 </v-layout> 156 </v-layout>
157 <v-layout> 157 <v-layout>
158 <v-flex xs5 sm6> 158 <v-flex xs5 sm6>
159 <h5 class="right my-1"><b>Session:</b></h5> 159 <h5 class="right my-1"><b>Session:</b></h5>
160 </v-flex> 160 </v-flex>
161 <v-flex sm6 xs8> 161 <v-flex sm6 xs8>
162 <h5 class="my-1">{{ editedItem.session }}</h5> 162 <h5 class="my-1">{{ editedItem.session }}</h5>
163 </v-flex> 163 </v-flex>
164 </v-layout> 164 </v-layout>
165 </v-flex> 165 </v-flex>
166 </v-layout> 166 </v-layout>
167 </v-container> 167 </v-container>
168 </v-card-text> 168 </v-card-text>
169 </v-card> 169 </v-card>
170 </v-dialog> 170 </v-dialog>
171 171
172 <v-snackbar 172 <v-snackbar
173 :timeout="timeout" 173 :timeout="timeout"
174 :top="y === 'top'" 174 :top="y === 'top'"
175 :right="x === 'right'" 175 :right="x === 'right'"
176 :vertical="mode === 'vertical'" 176 :vertical="mode === 'vertical'"
177 v-model="snackbar" 177 v-model="snackbar"
178 color="success" 178 color="success"
179 >{{ text }}</v-snackbar> 179 >{{ text }}</v-snackbar>
180 180
181 <!-- ****** EXISTING-USERS StudentS Table ****** --> 181 <!-- ****** EXISTING-USERS StudentS Table ****** -->
182 182
183 <v-data-table 183 <v-data-table
184 :headers="headers" 184 :headers="headers"
185 :items="desserts" 185 :items="desserts"
186 :pagination.sync="pagination" 186 :pagination.sync="pagination"
187 :search="search" 187 :search="search"
188 > 188 >
189 <template slot="items" slot-scope="props"> 189 <template slot="items" slot-scope="props">
190 <td id="td" class="text-xs-center">{{ props.index}}</td> 190 <td id="td" class="text-xs-center">{{ props.index}}</td>
191 <td id="td" class="text-xs-center">{{ props.item.classData.classNum}}</td> 191 <td id="td" class="text-xs-center">{{ props.item.classData.classNum}}</td>
192 <td id="td" class="text-xs-center">{{ props.item.name}}</td> 192 <td id="td" class="text-xs-center">{{ props.item.name}}</td>
193 <td id="td" class="text-xs-center">{{ props.item.session}}</td> 193 <td id="td" class="text-xs-center">{{ props.item.session}}</td>
194 194
195 <td class="text-xs-center"> 195 <td class="text-xs-center">
196 <span> 196 <span>
197 <img 197 <img
198 style="cursor:pointer; width:25px; height:18px; " 198 style="cursor:pointer; width:25px; height:18px; "
199 class="mr-5" 199 class="mr-5"
200 @click="profile(props.item)" 200 @click="profile(props.item)"
201 src="/static/icon/eye1.png" 201 src="/static/icon/eye1.png"
202 > 202 >
203 <img 203 <img
204 style="cursor:pointer; width:20px; height:18px; " 204 style="cursor:pointer; width:20px; height:18px; "
205 class="mr-5" 205 class="mr-5"
206 @click="editItem(props.item)" 206 @click="editItem(props.item)"
207 src="/static/icon/edit1.png" 207 src="/static/icon/edit1.png"
208 > 208 >
209 <img 209 <img
210 style="cursor:pointer; height:20px; " 210 style="cursor:pointer; height:20px; "
211 class="mr-5" 211 class="mr-5"
212 @click="deleteItem(props.item)" 212 @click="deleteItem(props.item)"
213 src="/static/icon/delete1.png" 213 src="/static/icon/delete1.png"
214 > 214 >
215 </span> 215 </span>
216 </td> 216 </td>
217 </template> 217 </template>
218 <v-alert 218 <v-alert
219 slot="no-results" 219 slot="no-results"
220 :value="true" 220 :value="true"
221 color="error" 221 color="error"
222 icon="warning" 222 icon="warning"
223 >Your search for "{{ search }}" found no results.</v-alert> 223 >Your search for "{{ search }}" found no results.</v-alert>
224 </v-data-table> 224 </v-data-table>
225 </v-tab-item> 225 </v-tab-item>
226 226
227 <!-- ****** ADD multiple Students ****** --> 227 <!-- ****** ADD multiple Students ****** -->
228 228
229 <v-tab-item> 229 <v-tab-item>
230 <v-container> 230 <v-container>
231 <v-snackbar 231 <v-snackbar
232 :timeout="timeout" 232 :timeout="timeout"
233 :top="y === 'top'" 233 :top="y === 'top'"
234 :right="x === 'right'" 234 :right="x === 'right'"
235 :vertical="mode === 'vertical'" 235 :vertical="mode === 'vertical'"
236 v-model="snackbar" 236 v-model="snackbar"
237 color="success" 237 color="success"
238 >{{ text }}</v-snackbar> 238 >{{ text }}</v-snackbar>
239 <v-flex xs12 sm8 offset-sm2 class="top"> 239 <v-flex xs12 sm8 offset-sm2 class="top">
240 <v-card flat> 240 <v-card flat>
241 <v-container fluid fill-height> 241 <v-container fluid fill-height>
242 <v-layout align-center> 242 <v-layout align-center>
243 <v-flex xs12> 243 <v-flex xs12 class="mt-4">
244 <v-flex offset-xs5>
245 <v-avatar size="55px">
246 <img src="/static/icon/user.png">
247 </v-avatar>
248 </v-flex>
249 <v-form ref="form" v-model="valid" lazy-validation> 244 <v-form ref="form" v-model="valid" lazy-validation>
250 <v-layout> 245 <v-layout>
251 <v-flex xs4 class="pt-4 subheading"> 246 <v-flex xs4 class="pt-4 subheading">
252 <label class="right">Section Name:</label> 247 <label class="right">Section Name:</label>
253 </v-flex> 248 </v-flex>
254 <v-flex xs6 class="ml-3"> 249 <v-flex xs6 class="ml-3">
255 <v-autocomplete 250 <v-autocomplete
256 v-model="add.name" 251 v-model="add.name"
257 placeholder="fill your Section Name" 252 placeholder="fill your Section Name"
258 :items = "SectionName" 253 :items = "SectionName"
259 :rules="nameRules" 254 :rules="nameRules"
260 required 255 required
261 ></v-autocomplete> 256 ></v-autocomplete>
262 </v-flex> 257 </v-flex>
263 </v-layout> 258 </v-layout>
264 <v-layout> 259 <v-layout>
265 <v-flex xs4 class="pt-4 subheading"> 260 <v-flex xs4 class="pt-4 subheading">
266 <label class="right">Select Class:</label> 261 <label class="right">Select Class:</label>
267 </v-flex> 262 </v-flex>
268 <v-flex xs6 class="ml-3"> 263 <v-flex xs6 class="ml-3">
269 <v-autocomplete 264 <v-autocomplete
270 :items="addclass" 265 :items="addclass"
271 label="Select Class" 266 label="Select Class"
272 v-model="select" 267 v-model="select"
273 item-text="classNum" 268 item-text="classNum"
274 item-value="_id" 269 item-value="_id"
275 name="Select Class" 270 name="Select Class"
276 :rules="classRules" 271 :rules="classRules"
277 required 272 required
278 ></v-autocomplete> 273 ></v-autocomplete>
279 </v-flex> 274 </v-flex>
280 </v-layout> 275 </v-layout>
281 <v-layout> 276 <v-layout>
282 <v-flex xs4 class="pt-4 subheading"> 277 <v-flex xs4 class="pt-4 subheading">
283 <label class="right">Session:</label> 278 <label class="right">Session:</label>
284 </v-flex> 279 </v-flex>
285 <v-flex xs6 class="ml-3"> 280 <v-flex xs6 class="ml-3">
286 <v-text-field 281 <v-text-field
287 v-model="add.session" 282 v-model="add.session"
288 placeholder="fill your Session" 283 placeholder="fill your Session"
289 name="name" 284 name="name"
290 type="text" 285 type="text"
291 :rules="sessionRules" 286 :rules="sessionRules"
292 required 287 required
293 ></v-text-field> 288 ></v-text-field>
294 </v-flex> 289 </v-flex>
295 </v-layout> 290 </v-layout>
296 <v-layout> 291 <v-layout>
297 <v-flex xs12 sm9 offset-sm2> 292 <v-flex xs12 sm9 offset-sm2>
298 <v-card-actions> 293 <v-card-actions>
299 <v-btn @click="clear" round dark>clear</v-btn> 294 <v-btn @click="clear" round dark>clear</v-btn>
300 <v-spacer></v-spacer> 295 <v-spacer></v-spacer>
301 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 296 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
302 </v-card-actions> 297 </v-card-actions>
303 </v-flex> 298 </v-flex>
304 </v-layout> 299 </v-layout>
305 </v-form> 300 </v-form>
306 </v-flex> 301 </v-flex>
307 </v-layout> 302 </v-layout>
308 </v-container> 303 </v-container>
309 </v-card> 304 </v-card>
310 </v-flex> 305 </v-flex>
311 </v-container> 306 </v-container>
312 </v-tab-item> 307 </v-tab-item>
313 </v-tabs> 308 </v-tabs>
314 <div class="loader" v-if="showLoader"> 309 <div class="loader" v-if="showLoader">
315 <v-progress-circular indeterminate color="white"></v-progress-circular> 310 <v-progress-circular indeterminate color="white"></v-progress-circular>
316 </div> 311 </div>
317 </v-app> 312 </v-app>
318 </template> 313 </template>
319 314
320 <script> 315 <script>
321 import http from "@/Services/http.js"; 316 import http from "@/Services/http.js";
322 import Util from "@/util"; 317 import Util from "@/util";
323 318
324 export default { 319 export default {
325 data: () => ({ 320 data: () => ({
326 snackbar: false, 321 snackbar: false,
327 y: "top", 322 y: "top",
328 x: "right", 323 x: "right",
329 mode: "", 324 mode: "",
330 timeout: 3000, 325 timeout: 3000,
331 text: "", 326 text: "",
332 showLoader:false, 327 showLoader:false,
333 loading: false, 328 loading: false,
334 date:null, 329 date:null,
335 search: '', 330 search: '',
336 dialog: false, 331 dialog: false,
337 dialog1: false, 332 dialog1: false,
338 valid: true, 333 valid: true,
339 validEdit:true, 334 validEdit:true,
340 isActive: true, 335 isActive: true,
341 newActive: false, 336 newActive: false,
342 details: [], 337 details: [],
343 AddUsercredentials: {}, 338 AddUsercredentials: {},
344 pagination: { 339 pagination: {
345 rowsPerPage: 15 340 rowsPerPage: 15
346 }, 341 },
347 nameRules: [v => !!v || " Section Name is required"], 342 nameRules: [v => !!v || " Section Name is required"],
348 classRules: [v => !!v || " Class Name is required"], 343 classRules: [v => !!v || " Class Name is required"],
349 sessionRules: [v => !!v || " Session is required"], 344 sessionRules: [v => !!v || " Session is required"],
350 SectionName:[ 345 SectionName:[
351 "A","B","C","D","E","F" 346 "A","B","C","D","E","F"
352 ], 347 ],
353 headers: [ 348 headers: [
354 { 349 {
355 text: "No", 350 text: "No",
356 align: "center", 351 align: "center",
357 sortable: false, 352 sortable: false,
358 value: "No" 353 value: "No"
359 }, 354 },
360 { text: "Class Name", value: "classData.classNum", sortable: false, align: "center" }, 355 { text: "Class Name", value: "classData.classNum", sortable: false, align: "center" },
361 { text: "Section Name", value: "name", sortable: false, align: "center" }, 356 { text: "Section Name", value: "name", sortable: false, align: "center" },
362 { text: "Session", value: "session", sortable: false, align: "center" }, 357 { text: "Session", value: "session", sortable: false, align: "center" },
363 { text: "Action", value: "", sortable: false, align: "center" } 358 { text: "Action", value: "", sortable: false, align: "center" }
364 ], 359 ],
365 desserts: [], 360 desserts: [],
366 addclass:[], 361 addclass:[],
367 select:'', 362 select:'',
368 selectId:'', 363 selectId:'',
369 editedIndex: -1, 364 editedIndex: -1,
370 editedItem: { 365 editedItem: {
371 classData:{ 366 classData:{
372 classNum:"", 367 classNum:"",
373 }, 368 },
374 name:'', 369 name:'',
375 session:new Date().getFullYear() 370 session:new Date().getFullYear()
376 371
377 }, 372 },
378 add: { 373 add: {
379 classData:{ 374 classData:{
380 classNum:"", 375 classNum:"",
381 }, 376 },
382 name:'', 377 name:'',
383 session:new Date().getFullYear() 378 session:new Date().getFullYear()
384 379
385 }, 380 },
386 items: [ 381 items: [
387 { 382 {
388 href: "/changepassword", 383 href: "/changepassword",
389 title: "Change Password", 384 title: "Change Password",
390 click: e => { 385 click: e => {
391 console.log(e); 386 console.log(e);
392 } 387 }
393 }, 388 },
394 { 389 {
395 href: "#", 390 href: "#",
396 title: "Logout", 391 title: "Logout",
397 click: e => { 392 click: e => {
398 window.getApp.$emit("APP_LOGOUT"); 393 window.getApp.$emit("APP_LOGOUT");
399 } 394 }
400 } 395 }
401 ] 396 ]
402 }), 397 }),
403 methods: { 398 methods: {
404 getSectionList() { 399 getSectionList() {
405 this.showLoader = true; 400 this.showLoader = true;
406 var token = this.$store.state.token; 401 var token = this.$store.state.token;
407 http() 402 http()
408 .get("/getAllSections", { 403 .get("/getAllSections", {
409 headers: { Authorization: "Bearer " + token } 404 headers: { Authorization: "Bearer " + token }
410 }) 405 })
411 .then(response => { 406 .then(response => {
412 this.desserts = response.data.data; 407 this.desserts = response.data.data;
413 this.showLoader = false; 408 this.showLoader = false;
414 // console.log("getAllSections=====>",response.data.data) 409 // console.log("getAllSections=====>",response.data.data)
415 410
416 }) 411 })
417 .catch(err => { 412 .catch(err => {
418 // console.log("err====>", err); 413 // console.log("err====>", err);
419 this.showLoader = false; 414 this.showLoader = false;
420 // this.$router.replace({ path: '/' }); 415 // this.$router.replace({ path: '/' });
421 }); 416 });
422 }, 417 },
423 editItem(item) { 418 editItem(item) {
424 this.editedIndex = this.desserts.indexOf(item); 419 this.editedIndex = this.desserts.indexOf(item);
425 this.editedItem = Object.assign({}, item); 420 this.editedItem = Object.assign({}, item);
426 console.log(this.editedItem) 421 console.log(this.editedItem)
427 this.dialog = true; 422 this.dialog = true;
428 }, 423 },
429 profile(item) { 424 profile(item) {
430 this.editedIndex = this.desserts.indexOf(item); 425 this.editedIndex = this.desserts.indexOf(item);
431 this.editedItem = Object.assign({}, item); 426 this.editedItem = Object.assign({}, item);
432 this.dialog1 = true; 427 this.dialog1 = true;
433 }, 428 },
434 deleteItem(item) { 429 deleteItem(item) {
435 let deleteStudent = { 430 let deleteStudent = {
436 sectionId: item._id 431 sectionId: item._id
437 }; 432 };
438 http() 433 http()
439 .delete("/deleteSection", confirm('Are you sure you want to delete this?') && { params: deleteStudent }) 434 .delete("/deleteSection", confirm('Are you sure you want to delete this?') && { params: deleteStudent })
440 .then(response => { 435 .then(response => {
441 // console.log("deleteUers",deleteStudent) 436 // console.log("deleteUers",deleteStudent)
442 if ((this.snackbar = true)) { 437 if ((this.snackbar = true)) {
443 this.text = "Successfully delete Existing Section"; 438 this.text = "Successfully delete Existing Section";
444 } 439 }
445 this.getSectionList(); 440 this.getSectionList();
446 }) 441 })
447 .catch(error => { 442 .catch(error => {
448 // console.log(error); 443 // console.log(error);
449 }); 444 });
450 }, 445 },
451 activeTab(type) { 446 activeTab(type) {
452 switch (type) { 447 switch (type) {
453 case "existing": 448 case "existing":
454 this.newActive = false; 449 this.newActive = false;
455 this.isActive = true; 450 this.isActive = true;
456 break; 451 break;
457 452
458 default: 453 default:
459 this.newActive = true; 454 this.newActive = true;
460 this.isActive = false; 455 this.isActive = false;
461 break; 456 break;
462 } 457 }
463 }, 458 },
464 close() { 459 close() {
465 this.dialog = false; 460 this.dialog = false;
466 setTimeout(() => { 461 setTimeout(() => {
467 this.editedItem = Object.assign({}, this.defaultItem); 462 this.editedItem = Object.assign({}, this.defaultItem);
468 this.editedIndex = -1; 463 this.editedIndex = -1;
469 }, 300); 464 }, 300);
470 }, 465 },
471 close1() { 466 close1() {
472 this.dialog1 = false; 467 this.dialog1 = false;
473 }, 468 },
474 close2() { 469 close2() {
475 this.dialog2 = false; 470 this.dialog2 = false;
476 }, 471 },
477 submit() { 472 submit() {
478 if (this.$refs.forms.validate()) { 473 if (this.$refs.forms.validate()) {
479 let addSection = { 474 let addSection = {
480 name: this.add.name, 475 name: this.add.name,
481 classId: this.select, 476 classId: this.select,
482 session:this.add.session 477 session:this.add.session
483 }; 478 };
484 console.log(addSection) 479 console.log(addSection)
485 this.loading = true; 480 this.loading = true;
486 http() 481 http()
487 .post("/createSection", addSection) 482 .post("/createSection", addSection)
488 .then(response => { 483 .then(response => {
489 console.log(addSection) 484 console.log(addSection)
490 this.getSectionList(); 485 this.getSectionList();
491 if (this.snackbar = true) { 486 if (this.snackbar = true) {
492 this.text = "New Section added successfully"; 487 this.text = "New Section added successfully";
493 } 488 }
494 489
495 this.clear(); 490 this.clear();
496 this.loading = false; 491 this.loading = false;
497 }) 492 })
498 .catch(error => { 493 .catch(error => {
499 // console.log(error); 494 // console.log(error);
500 if (this.snackbar = true) { 495 if (this.snackbar = true) {
501 this.text = error.response.data.message; 496 this.text = error.response.data.message;
502 } 497 }
503 this.loading = false; 498 this.loading = false;
504 }); 499 });
505 } 500 }
506 }, 501 },
507 mail() { 502 mail() {
508 }, 503 },
509 download() { 504 download() {
510 }, 505 },
511 clear() { 506 clear() {
512 this.$refs.form.reset(); 507 this.$refs.form.reset();
513 }, 508 },
514 save() { 509 save() {
515 // if (this.$refs.form.validate()) { 510 // if (this.$refs.form.validate()) {
516 let editStudent = { 511 let editStudent = {
517 name: this.editedItem.name, 512 name: this.editedItem.name,
518 classId: this.select, 513 classId: this.select,
519 sectionId: this.editedItem._id 514 sectionId: this.editedItem._id
520 }; 515 };
521 http() 516 http()
522 .put("/updateSection", editStudent) 517 .put("/updateSection", editStudent)
523 .then(response => { 518 .then(response => {
524 // console.log("editStudent",editStudent); 519 // console.log("editStudent",editStudent);
525 if ((this.snackbar = true)) { 520 if ((this.snackbar = true)) {
526 this.text = "Successfully Edit Existing Section"; 521 this.text = "Successfully Edit Existing Section";
527 } 522 }
528 this.getSectionList(); 523 this.getSectionList();
529 // this.showLoader = false; 524 // this.showLoader = false;
530 }) 525 })
531 .catch(error => { 526 .catch(error => {
532 this.text = error.response.data.message; 527 this.text = error.response.data.message;
533 // console.log(error); 528 // console.log(error);
534 }); 529 });
535 this.close(); 530 this.close();
536 // } 531 // }
537 }, 532 },
538 handleDrawerToggle() { 533 handleDrawerToggle() {
539 window.getApp.$emit("APP_DRAWER_TOGGLED"); 534 window.getApp.$emit("APP_DRAWER_TOGGLED");
540 }, 535 },
541 handleFullScreen() { 536 handleFullScreen() {
542 Util.toggleFullScreen(); 537 Util.toggleFullScreen();
543 } 538 }
544 }, 539 },
545 mounted() { 540 mounted() {
546 this.getSectionList(); 541 this.getSectionList();
547 542
548 var token = this.$store.state.token; 543 var token = this.$store.state.token;
549 http() 544 http()
550 .get("/getClassesList", { 545 .get("/getClassesList", {
551 headers: { Authorization: "Bearer " + token } 546 headers: { Authorization: "Bearer " + token }
552 }) 547 })
553 .then(response => { 548 .then(response => {
554 this.addclass = response.data.data; 549 this.addclass = response.data.data;
555 console.log("getClassesList=====>",this.addclass) 550 console.log("getClassesList=====>",this.addclass)
556 551
557 }) 552 })
558 .catch(err => { 553 .catch(err => {
559 // console.log("err====>", err); 554 // console.log("err====>", err);
560 this.$router.replace({ path: '/' }); 555 this.$router.replace({ path: '/' });
561 }); 556 });
562 }, 557 },
563 558
564 computed:{ 559 computed:{
565 toolbarColor() { 560 toolbarColor() {
566 return this.$vuetify.options.extra.mainNav; 561 return this.$vuetify.options.extra.mainNav;
567 } 562 }
568 } 563 }
569 }; 564 };
570 </script> 565 </script>
571 <style scoped> 566 <style scoped>
572 .v-tabs__div { 567 .v-tabs__div {
573 text-transform: none; 568 text-transform: none;
574 } 569 }
575 .v-input__prepend-outer { 570 .v-input__prepend-outer {
576 margin-right: 0px !important; 571 margin-right: 0px !important;
577 } 572 }
578 .v-card__actions .v-btn { 573 .v-card__actions .v-btn {
579 margin: 0 15px; 574 margin: 0 15px;
580 min-width: 120px; 575 min-width: 120px;
581 } 576 }
582 .primary { 577 .primary {
583 background-color: #aaa !important; 578 background-color: #aaa !important;
584 border-color: #aaa !important; 579 border-color: #aaa !important;
585 } 580 }
586 h4 { 581 h4 {
587 background-repeat: no-repeat; 582 background-repeat: no-repeat;
588 padding: 8px; 583 padding: 8px;
589 margin: auto; 584 margin: auto;
590 font-size: 25px; 585 font-size: 25px;
591 } 586 }
592 #name { 587 #name {
593 position: absolute; 588 position: absolute;
594 left: 100px; 589 left: 100px;
595 top: 17px; 590 top: 17px;
596 } 591 }
597 #icon { 592 #icon {
598 position: absolute; 593 position: absolute;
599 right: 8px; 594 right: 8px;
600 top: 8px; 595 top: 8px;
601 } 596 }
602 #m { 597 #m {
603 position: relative; 598 position: relative;
604 left: 135px; 599 left: 135px;
605 top: -15px; 600 top: -15px;
606 } 601 }
607 #G { 602 #G {
608 position: absolute; 603 position: absolute;
609 top: 38px; 604 top: 38px;
610 color: white; 605 color: white;
611 } 606 }
612 #bt { 607 #bt {
613 position: relative; 608 position: relative;
614 top: -20px; 609 top: -20px;
615 left: 115px; 610 left: 115px;
616 } 611 }
617 #e { 612 #e {
618 position: relative; 613 position: relative;
619 top: 5px; 614 top: 5px;
620 right: -30px; 615 right: -30px;
621 height: 17px; 616 height: 17px;
622 cursor: pointer; 617 cursor: pointer;
623 } 618 }
624 #d { 619 #d {
625 position: relative; 620 position: relative;
626 top: 5px; 621 top: 5px;
627 right: -70px; 622 right: -70px;
628 height: 17px; 623 height: 17px;
629 cursor: pointer; 624 cursor: pointer;
630 } 625 }
631 #td { 626 #td {
632 border: 1px solid #dddddd; 627 border: 1px solid #dddddd;
633 text-align: left; 628 text-align: left;
634 padding: 8px; 629 padding: 8px;
635 } 630 }
636 #dialog { 631 #dialog {
637 height: 550px; 632 height: 550px;
638 } 633 }
639 .active { 634 .active {
640 background-color: black; 635 background-color: black;
641 color: white !important; 636 color: white !important;
642 } 637 }
643 .activebtn { 638 .activebtn {
644 color: black !important; 639 color: black !important;
645 } 640 }
646 #flex { 641 #flex {
647 height: 300px; 642 height: 300px;
648 } 643 }
649 .top{ 644 .top{
650 margin-top:100px; 645 margin-top:100px;
651 } 646 }
652 .v-tabs__item a{ 647 .v-tabs__item a{
653 font-size:16px !important; 648 font-size:16px !important;
654 } 649 }
655 @media screen and (max-width: 769px){ 650 @media screen and (max-width: 769px){
656 .top{ 651 .top{
657 margin-top:0 !important; 652 margin-top:0 !important;
658 } 653 }
659 .userSearch .v-icon { 654 .userSearch .v-icon {
660 font-size: 20px !important; 655 font-size: 20px !important;
661 margin-left: 20px ; 656 margin-left: 20px ;
662 } 657 }
663 } 658 }
664 @media screen and (max-width: 380px) { 659 @media screen and (max-width: 380px) {
665 .pl-3 { 660 .pl-3 {
666 padding-left: 0px !important; 661 padding-left: 0px !important;
667 } 662 }
668 .right { 663 .right {
669 float: none !important; 664 float: none !important;
670 } 665 }
671 .subheading { 666 .subheading {
672 font-size: 14px !important; 667 font-size: 14px !important;
673 } 668 }
674 .v-card__actions .v-btn{ 669 .v-card__actions .v-btn{
675 margin: 0 0px; 670 margin: 0 0px;
676 min-width: 100px; 671 min-width: 100px;
677 } 672 }
678 /* .searchIcon .v-icon { 673 /* .searchIcon .v-icon {
679 font-size: 20px; 674 font-size: 20px;
680 margin-left: 20px; 675 margin-left: 20px;
681 } */ 676 } */
682 .subheading { 677 .subheading {
683 font-size: 12px !important; 678 font-size: 12px !important;
684 } 679 }
685 h5 { 680 h5 {
686 font-size: 13px; 681 font-size: 13px;
687 } 682 }
688 } 683 }
689 .v-icon{ 684 .v-icon{
690 font-size:30px; 685 font-size:30px;
691 } 686 }
692 @media screen and (min-width: 1270px){ 687 @media screen and (min-width: 1270px){
693 .hide{ 688 .hide{
694 display: none; 689 display: none;
695 } 690 }
696 /* } 691 /* }
697 @media screen and (max-width: 962px) { 692 @media screen and (max-width: 962px) {
698 .imglogo{ 693 .imglogo{
699 position: absolute; 694 position: absolute;
700 top: 13px; 695 top: 13px;
701 left: 13px !important; 696 left: 13px !important;
702 width: 70px; 697 width: 70px;
703 height: 24px; 698 height: 24px;
704 } */ 699 } */
705 } 700 }
706 @media screen and (max-width: 420px){ 701 @media screen and (max-width: 420px){
707 .userSearch .v-text-field .v-label{ 702 .userSearch .v-text-field .v-label{
708 line-height: 24px !important; 703 line-height: 24px !important;
709 } 704 }
710 .userSearch .v-label{ 705 .userSearch .v-label{
711 font-size: 13px !important; 706 font-size: 13px !important;
712 } 707 }
713 .v-list__tile { 708 .v-list__tile {
714 font-size:14px; 709 font-size:14px;
715 padding: 0 10px; 710 padding: 0 10px;
716 } 711 }
717 .name{ 712 .name{
718 font-size:15px; 713 font-size:15px;
719 } 714 }
720 } 715 }
721 </style> 716 </style>
src/pages/Students/students.vue
Diff comments   View file @79006bd
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 StudentS ****** --> 7 <!-- ****** SEARCH ALL EXISTING StudentS ****** -->
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 Students" 12 label="Find your Students"
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 Students</v-tab> 54 >Existing Students</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 Students</v-tab> 62 >Add New Students</v-tab>
63 63
64 <!-- ****** EDITS STUDENTS DETAILS ****** --> 64 <!-- ****** EDITS STUDENTS 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="1300px"> 75 <v-dialog v-model="dialog" max-width="1300px" scrollable>
76 <v-flex xs12 sm12 class=""> 76 <v-card flat>
77 <v-toolbar color="grey lighten-2"> 77 <v-toolbar color="grey lighten-2" flat>
78 <v-spacer></v-spacer> 78 <v-spacer></v-spacer>
79 <v-toolbar-title><h3>Edit Student Profile</h3></v-toolbar-title> 79 <v-toolbar-title><h3>Edit Student Profile</h3></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-text style="height: 800px;">
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="160px">
91 <img src="/static/icon/user.png" v-if="!imageUrl"> 91 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl">
92 <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl && !imageUrl">
93 <img
94
95 v-if="imageUrl"
96 :src="imageUrl"
97 height="150"
98 style="border-radius:50%; width:200px"
99 >
92 </v-avatar> 100 </v-avatar>
93 <input 101 <input
94 type="file" 102 type="file"
95 style="display: none" 103 style="display: none"
96 ref="image" 104 ref="image"
97 accept="image/*" 105 accept="image/*"
98 @change="onFilePicked" 106 @change="onFilePicked"
99 > 107 >
100 <img
101 :src="imageData.imageUrl"
102 height="150"
103 v-if="imageUrl"
104 style="border-radius:50%; width:200px"
105 >
106 </v-flex> 108 </v-flex>
107 </v-layout> 109 </v-layout>
108 <v-layout> 110 <v-layout>
109 <v-flex xs12 sm4> 111 <v-flex xs12 sm4>
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">Select Class:</label> 114 <label class="right">Select Class:</label>
113 </v-flex> 115 </v-flex>
114 <v-flex xs8 class="ml-3"> 116 <v-flex xs8 class="ml-3">
115 <v-select 117 <v-select
116 :items="addclass" 118 :items="addclass"
117 label="Select Class" 119 label="Select Class"
118 v-model="editedItem.select" 120 v-model="editedItem.select"
119 item-text="classNum" 121 item-text="classNum"
120 item-value="_id" 122 item-value="_id"
121 name="Select Class" 123 name="Select Class"
122 @change="getSections(editedItem.select)" 124 @change="getSections(editedItem.select)"
123 required 125 required
124 ></v-select> 126 ></v-select>
125 </v-flex> 127 </v-flex>
126 </v-layout> 128 </v-layout>
127 </v-flex> 129 </v-flex>
128 <v-flex xs12 sm4> 130 <v-flex xs12 sm4>
129 <v-layout> 131 <v-layout>
130 <v-flex xs4 class="pt-4 subheading"> 132 <v-flex xs4 class="pt-4 subheading">
131 <label class="right">Select Section:</label> 133 <label class="right">Select Section:</label>
132 </v-flex> 134 </v-flex>
133 <v-flex xs8 class="ml-3"> 135 <v-flex xs8 class="ml-3">
134 <v-select 136 <v-select
135 :items="addSection" 137 :items="addSection"
136 label="Select Section" 138 label="Select Section"
137 v-model="editedItem.selectSection" 139 v-model="editedItem.selectSection"
138 item-text="name" 140 item-text="name"
139 item-value="_id" 141 item-value="_id"
140 name="Select Section" 142 name="Select Section"
141 required 143 required
142 ></v-select> 144 ></v-select>
143 </v-flex> 145 </v-flex>
144 </v-layout> 146 </v-layout>
145 </v-flex> 147 </v-flex>
146 <v-flex xs12 sm4> 148 <v-flex xs12 sm4>
147 <v-layout> 149 <v-layout>
148 <v-flex xs4 class="pt-4 subheading"> 150 <v-flex xs4 class="pt-4 subheading">
149 <label class="right">Full Name:</label> 151 <label class="right">Full Name:</label>
150 </v-flex> 152 </v-flex>
151 <v-flex xs8 class="ml-3"> 153 <v-flex xs8 class="ml-3">
152 <v-text-field 154 <v-text-field
153 v-model="editedItem.name" 155 v-model="editedItem.name"
154 placeholder="fill your full Name" 156 placeholder="fill your full Name"
155 name="name" 157 name="name"
156 type="text" 158 type="text"
157 required 159 required
158 ></v-text-field> 160 ></v-text-field>
159 </v-flex> 161 </v-flex>
160 </v-layout> 162 </v-layout>
161 </v-flex> 163 </v-flex>
162 </v-layout> 164 </v-layout>
163 <v-layout> 165 <v-layout>
164 <v-flex xs12 sm4> 166 <v-flex xs12 sm4>
165 <v-layout> 167 <v-layout>
166 <v-flex xs4 class="pt-4 subheading"> 168 <v-flex xs4 class="pt-4 subheading">
167 <label class="right">Email ID:</label> 169 <label class="right">Email ID:</label>
168 </v-flex> 170 </v-flex>
169 <v-flex xs8 class="ml-3"> 171 <v-flex xs8 class="ml-3">
170 <v-text-field 172 <v-text-field
171 placeholder="fill your email" 173 placeholder="fill your email"
172 v-model="editedItem.email" 174 v-model="editedItem.email"
173 type="text" 175 type="text"
174 name="email" 176 name="email"
175 required 177 required
176 ></v-text-field> 178 ></v-text-field>
177 </v-flex> 179 </v-flex>
178 </v-layout> 180 </v-layout>
179 </v-flex> 181 </v-flex>
180 <v-flex xs12 sm4> 182 <v-flex xs12 sm4>
181 <v-layout> 183 <v-layout>
182 <v-flex xs4 class="pt-4 subheading"> 184 <v-flex xs4 class="pt-4 subheading">
183 <label class="right">Date of Birth:</label> 185 <label class="right">Date of Birth:</label>
184 </v-flex> 186 </v-flex>
185 <v-flex xs8 class="ml-3"> 187 <v-flex xs8 class="ml-3">
186 <v-menu 188 <v-menu
187 ref="menu" 189 ref="menu"
188 :close-on-content-click="false" 190 :close-on-content-click="false"
189 v-model="menu1" 191 v-model="menu1"
190 :nudge-right="40" 192 :nudge-right="40"
191 lazy 193 lazy
192 transition="scale-transition" 194 transition="scale-transition"
193 offset-y 195 offset-y
194 full-width 196 full-width
195 min-width="290px" 197 min-width="290px"
196 > 198 >
197 <v-text-field 199 <v-text-field
198 slot="activator" 200 slot="activator"
199 v-model="editedItem.dob" 201 v-model="editedItem.dob"
200 placeholder="Select Dob" 202 placeholder="Select Dob"
201 ></v-text-field> 203 ></v-text-field>
202 <v-date-picker 204 <v-date-picker
203 ref="picker" 205 ref="picker"
204 v-model="editedItem.dob" 206 v-model="editedItem.dob"
205 :max="new Date().toISOString().substr(0, 10)" 207 :max="new Date().toISOString().substr(0, 10)"
206 min="1950-01-01" 208 min="1950-01-01"
207 @input="menu1 = false" 209 @input="menu1 = false"
208 ></v-date-picker> 210 ></v-date-picker>
209 </v-menu> 211 </v-menu>
210 </v-flex> 212 </v-flex>
211 </v-layout> 213 </v-layout>
212 </v-flex> 214 </v-flex>
213 <v-flex xs12 sm4> 215 <v-flex xs12 sm4>
214 <v-layout> 216 <v-layout>
215 <v-flex xs4 class="pt-4 subheading"> 217 <v-flex xs4 class="pt-4 subheading">
216 <label class="right">City:</label> 218 <label class="right">City:</label>
217 </v-flex> 219 </v-flex>
218 <v-flex xs8 class="ml-3"> 220 <v-flex xs8 class="ml-3">
219 <v-text-field 221 <v-text-field
220 v-model="editedItem.city" 222 v-model="editedItem.city"
221 placeholder="fill your City Name" 223 placeholder="fill your City Name"
222 name="City" 224 name="City"
223 type="text" 225 type="text"
224 required 226 required
225 ></v-text-field> 227 ></v-text-field>
226 </v-flex> 228 </v-flex>
227 </v-layout> 229 </v-layout>
228 </v-flex> 230 </v-flex>
229 </v-layout> 231 </v-layout>
230 <v-layout> 232 <v-layout>
231 <v-flex xs12 sm4> 233 <v-flex xs12 sm4>
232 <v-layout> 234 <v-layout>
233 <v-flex xs4 class="pt-4 subheading"> 235 <v-flex xs4 class="pt-4 subheading">
234 <label class="right">State:</label> 236 <label class="right">State:</label>
235 </v-flex> 237 </v-flex>
236 <v-flex xs8 class="ml-3"> 238 <v-flex xs8 class="ml-3">
237 <v-text-field 239 <v-text-field
238 v-model="editedItem.state" 240 v-model="editedItem.state"
239 placeholder="fill your State Name" 241 placeholder="fill your State Name"
240 name="state" 242 name="state"
241 type="text" 243 type="text"
242 required 244 required
243 ></v-text-field> 245 ></v-text-field>
244 </v-flex> 246 </v-flex>
245 </v-layout> 247 </v-layout>
246 </v-flex> 248 </v-flex>
247 <v-flex xs12 sm4> 249 <v-flex xs12 sm4>
248 <v-layout> 250 <v-layout>
249 <v-flex xs4 class="pt-4 subheading"> 251 <v-flex xs4 class="pt-4 subheading">
250 <label class="right">Pincode:</label> 252 <label class="right">Pincode:</label>
251 </v-flex> 253 </v-flex>
252 <v-flex xs8 class="ml-3"> 254 <v-flex xs8 class="ml-3">
253 <v-text-field 255 <v-text-field
254 v-model="editedItem.pincode" 256 v-model="editedItem.pincode"
255 placeholder="fill your pincode" 257 placeholder="fill your pincode"
256 name="pincode" 258 name="pincode"
257 type="number" 259 type="number"
258 required 260 required
259 ></v-text-field> 261 ></v-text-field>
260 </v-flex> 262 </v-flex>
261 </v-layout> 263 </v-layout>
262 </v-flex> 264 </v-flex>
263 <v-flex xs12 sm4> 265 <v-flex xs12 sm4>
264 <v-layout> 266 <v-layout>
265 <v-flex xs4 class="pt-4 subheading"> 267 <v-flex xs4 class="pt-4 subheading">
266 <label class="right">Mobile No:</label> 268 <label class="right">Mobile No:</label>
267 </v-flex> 269 </v-flex>
268 <v-flex xs8 class="ml-3"> 270 <v-flex xs8 class="ml-3">
269 <v-text-field 271 <v-text-field
270 v-model="editedItem.mobile" 272 v-model="editedItem.mobile"
271 placeholder="fill your MobileNo" 273 placeholder="fill your MobileNo"
272 name="mobileNo" 274 name="mobileNo"
273 type="number" 275 type="number"
274 required 276 required
275 ></v-text-field> 277 ></v-text-field>
276 </v-flex> 278 </v-flex>
277 </v-layout> 279 </v-layout>
278 </v-flex> 280 </v-flex>
279 </v-layout> 281 </v-layout>
280 <v-layout> 282 <v-layout>
281 <v-flex xs12 sm4> 283 <v-flex xs12 sm4>
282 <v-layout> 284 <v-layout>
283 <v-flex xs4 class="pt-4 subheading"> 285 <v-flex xs4 class="pt-4 subheading">
284 <label class="right">Select Country:</label> 286 <label class="right">Select Country:</label>
285 </v-flex> 287 </v-flex>
286 <v-flex xs8 class="ml-3"> 288 <v-flex xs8 class="ml-3">
287 <v-autocomplete 289 <v-autocomplete
288 v-model="editedItem.country" 290 v-model="editedItem.country"
289 :items="countries" 291 :items="countries"
290 placeholder="Select Country Name" 292 placeholder="Select Country Name"
291 required 293 required
292 ></v-autocomplete> 294 ></v-autocomplete>
293 </v-flex> 295 </v-flex>
294 </v-layout> 296 </v-layout>
295 </v-flex> 297 </v-flex>
296 <v-flex xs12 sm4> 298 <v-flex xs12 sm4>
297 <v-layout> 299 <v-layout>
298 <v-flex xs4 class="pt-4 subheading"> 300 <v-flex xs4 class="pt-4 subheading">
299 <label class="right">Gender:</label> 301 <label class="right">Gender:</label>
300 </v-flex> 302 </v-flex>
301 <v-flex xs8 class="ml-3"> 303 <v-flex xs8 class="ml-3">
302 <v-select 304 <v-select
303 :items="gender" 305 :items="gender"
304 v-model="editedItem.gender" 306 v-model="editedItem.gender"
305 placeholder="Select Gender" 307 placeholder="Select Gender"
306 required 308 required
307 ></v-select> 309 ></v-select>
308 </v-flex> 310 </v-flex>
309 </v-layout> 311 </v-layout>
310 </v-flex> 312 </v-flex>
311 <v-flex xs12 sm4> 313 <v-flex xs12 sm4>
312 <v-layout> 314 <v-layout>
313 <v-flex xs4 class="pt-4 subheading"> 315 <v-flex xs4 class="pt-4 subheading">
314 <label class="right">Father Name:</label> 316 <label class="right">Father Name:</label>
315 </v-flex> 317 </v-flex>
316 <v-flex xs8 class="ml-3"> 318 <v-flex xs8 class="ml-3">
317 <v-text-field 319 <v-text-field
318 v-model="editedItem.fatherName" 320 v-model="editedItem.fatherName"
319 :items="countries" 321 :items="countries"
320 placeholder="Fill your father Name" 322 placeholder="Fill your father Name"
321 required 323 required
322 ></v-text-field> 324 ></v-text-field>
323 </v-flex> 325 </v-flex>
324 </v-layout> 326 </v-layout>
325 </v-flex> 327 </v-flex>
326 </v-layout> 328 </v-layout>
327 <v-layout> 329 <v-layout>
328 <v-flex xs12 sm4> 330 <v-flex xs12 sm4>
329 <v-layout> 331 <v-layout>
330 <v-flex xs4 class="pt-4 subheading"> 332 <v-flex xs4 class="pt-4 subheading">
331 <label class="right">Father Cell No:</label> 333 <label class="right">Father Cell No:</label>
332 </v-flex> 334 </v-flex>
333 <v-flex xs8 class="ml-3"> 335 <v-flex xs8 class="ml-3">
334 <v-text-field 336 <v-text-field
335 v-model="editedItem.fatherCellNo" 337 v-model="editedItem.fatherCellNo"
336 placeholder="fill your father Cell Number" 338 placeholder="fill your father Cell Number"
337 name="state" 339 name="state"
338 type="number" 340 type="number"
339 required 341 required
340 ></v-text-field> 342 ></v-text-field>
341 </v-flex> 343 </v-flex>
342 </v-layout> 344 </v-layout>
343 </v-flex> 345 </v-flex>
344 <v-flex xs12 sm4> 346 <v-flex xs12 sm4>
345 <v-layout> 347 <v-layout>
346 <v-flex xs4 class="pt-4 subheading"> 348 <v-flex xs4 class="pt-4 subheading">
347 <label class="right">Mother Name:</label> 349 <label class="right">Mother Name:</label>
348 </v-flex> 350 </v-flex>
349 <v-flex xs8 class="ml-3"> 351 <v-flex xs8 class="ml-3">
350 <v-text-field 352 <v-text-field
351 v-model="editedItem.motherName" 353 v-model="editedItem.motherName"
352 placeholder="fill your Mother Name" 354 placeholder="fill your Mother Name"
353 name="state" 355 name="state"
354 type="text" 356 type="text"
355 required 357 required
356 ></v-text-field> 358 ></v-text-field>
357 </v-flex> 359 </v-flex>
358 </v-layout> 360 </v-layout>
359 </v-flex> 361 </v-flex>
360 <v-flex xs12 sm4> 362 <v-flex xs12 sm4>
361 <v-layout> 363 <v-layout>
362 <v-flex xs4 class="pt-4 subheading"> 364 <v-flex xs4 class="pt-4 subheading">
363 <label class="right">Mother Cell No:</label> 365 <label class="right">Mother Cell No:</label>
364 </v-flex> 366 </v-flex>
365 <v-flex xs8 class="ml-3"> 367 <v-flex xs8 class="ml-3">
366 <v-text-field 368 <v-text-field
367 v-model="editedItem.motherCellNo" 369 v-model="editedItem.motherCellNo"
368 placeholder="fill your Mother Cell Number" 370 placeholder="fill your Mother Cell Number"
369 name="state" 371 name="state"
370 type="number" 372 type="number"
371 required 373 required
372 ></v-text-field> 374 ></v-text-field>
373 </v-flex> 375 </v-flex>
374 </v-layout> 376 </v-layout>
375 </v-flex> 377 </v-flex>
376 </v-layout> 378 </v-layout>
377 <v-layout> 379 <v-layout>
378 <v-flex xs12 sm4> 380 <v-flex xs12 sm4>
379 <v-layout> 381 <v-layout>
380 <v-flex xs4 class="pt-4 subheading"> 382 <v-flex xs4 class="pt-4 subheading">
381 <label class="right">Academic Year:</label> 383 <label class="right">Academic Year:</label>
382 </v-flex> 384 </v-flex>
383 <v-flex xs8 class="ml-3"> 385 <v-flex xs8 class="ml-3">
384 <v-text-field 386 <v-text-field
385 v-model="editedItem.establishmentYear" 387 v-model="editedItem.establishmentYear"
386 placeholder="fill your Mother Name" 388 placeholder="fill your Mother Name"
387 name="state" 389 name="state"
388 type="number" 390 type="number"
389 required 391 required
390 ></v-text-field> 392 ></v-text-field>
391 </v-flex> 393 </v-flex>
392 </v-layout> 394 </v-layout>
393 </v-flex> 395 </v-flex>
394
395 <v-flex xs12 sm4> 396 <v-flex xs12 sm4>
396 <v-layout> 397 <v-layout>
397 <v-flex xs4 class="pt-4 subheading"> 398 <v-flex xs4 class="pt-4 subheading">
398 <label class="right">Uplaod Image:</label> 399 <label class="right">Uplaod Image:</label>
399 </v-flex> 400 </v-flex>
400 <v-flex xs8 class="ml-3"> 401 <v-flex xs8 class="ml-3">
401 <v-text-field 402 <v-text-field
402 label="Select Image" 403 label="Select Image"
403 @click="pickFile" 404 @click="pickFile"
404 v-model="imageName" 405 v-model="imageName"
405 prepend-icon="attach_file" 406 append-icon="attach_file"
406 ></v-text-field> 407 ></v-text-field>
407 </v-flex> 408 </v-flex>
408 </v-layout> 409 </v-layout>
409 </v-flex> 410 </v-flex>
410 <v-flex xs12 sm4> 411 <v-flex xs12 sm4>
411 <v-layout> 412 <v-layout>
412 <v-flex xs4 class="pt-4 subheading"> 413 <v-flex xs4 class="pt-4 subheading">
413 <label class="right">Present Address:</label> 414 <label class="right">Present Address:</label>
414 </v-flex> 415 </v-flex>
415 <v-flex xs8 class="ml-3"> 416 <v-flex xs8 class="ml-2">
416 <v-text-field 417 <v-text-field
417 v-model="editedItem.presentAddress" 418 v-model="editedItem.presentAddress"
418 placeholder="fill Your present Address" 419 placeholder="fill Your present Address"
419 required 420 required
420 ></v-text-field> 421 ></v-text-field>
421 </v-flex> 422 </v-flex>
422 </v-layout> 423 </v-layout>
423 </v-flex> 424 </v-flex>
424 </v-layout> 425 </v-layout>
426 <v-layout>
427 <v-flex xs12>
425 <v-layout> 428 <v-layout>
426 <v-flex xs3 class="pt-4 subheading"> 429 <v-flex xs1 class="pt-4 subheading" style="flex-basis: 13.333333% !important; max-width: 13.333333% !important;">
427 <label>Permanent Address:</label> 430 <label class="right">Permanent Address:</label>
428 </v-flex> 431 </v-flex>
429 <v-flex xs9> 432 <v-flex xs11 class="ml-2">
430 <v-text-field 433 <v-textarea
431 name="input-4-3" 434 rows="1"
432 v-model="editedItem.permanentAddress" 435 v-model="editedItem.permanentAddress"
433 placeholder="fill Your Permanent Address" 436 placeholder="fill Your Permanent Address"
434 required 437 required
435 ></v-text-field> 438 ></v-textarea>
436 </v-flex> 439 </v-flex>
437 </v-layout> 440 </v-layout>
441 </v-flex>
442 </v-layout>
438 <v-layout> 443 <v-layout>
439 <v-flex xs12 sm12> 444 <v-flex xs12 sm12>
440 <v-card-actions> 445 <v-card-actions>
441 <v-btn round dark @click.native="close">Cancel</v-btn> 446 <v-btn round dark @click.native="close">Cancel</v-btn>
442 <v-spacer></v-spacer> 447 <v-spacer></v-spacer>
443 <v-btn round dark @click="save">Save</v-btn> 448 <v-btn round dark @click="save">Save</v-btn>
444 </v-card-actions> 449 </v-card-actions>
445 </v-flex> 450 </v-flex>
446 </v-layout> 451 </v-layout>
447 </v-container> 452 </v-container>
448 </v-form> 453 </v-form>
454 </v-card-text>
449 </v-card> 455 </v-card>
450 </v-flex>
451 </v-dialog> 456 </v-dialog>
452 457
453 <!-- ****** PROFILE VIEW STUDENTS DEATILS ****** --> 458 <!-- ****** PROFILE VIEW STUDENTS DEATILS ****** -->
454 <v-dialog v-model="dialog1" max-width="600px"> 459 <v-dialog v-model="dialog1" max-width="600px" scrollable>
455 <v-toolbar color="grey lighten-2">
456 <v-spacer></v-spacer>
457 <v-toolbar-title>Student Profile</v-toolbar-title>
458 <v-spacer></v-spacer>
459 <v-icon @click="close1">close</v-icon>
460 </v-toolbar>
461 <v-card> 460 <v-card>
462 <v-flex align-center justify-center layout text-xs-center> 461 <v-toolbar color="grey lighten-2" flat>
463 <v-avatar size="50px" style="position:absolute; top:20px;"> 462 <v-spacer></v-spacer>
464 <img src="/static/icon/user.png"> 463 <v-toolbar-title>Student Profile</v-toolbar-title>
464 <v-spacer></v-spacer>
465 <v-icon @click="close1">close</v-icon>
466 </v-toolbar>
467 <v-card-text style="height: 760px;">
468 <v-flex align-center justify-center layout text-xs-center class="mt-3">
469 <v-avatar size="160px">
470 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl">
471 <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl">
465 </v-avatar> 472 </v-avatar>
466 </v-flex> 473 </v-flex>
467 <v-card-text>
468 <v-container grid-list-md> 474 <v-container grid-list-md>
469 <v-layout wrap> 475 <v-layout wrap>
470 <v-flex> 476 <v-flex>
471 <br>
472 <br>
473 <v-layout> 477 <v-layout>
474 <v-flex xs5 sm6> 478 <v-flex xs5 sm6>
475 <h5 class="right my-1">Full Name:</h5> 479 <h5 class="right my-1">Full Name:</h5>
476 </v-flex> 480 </v-flex>
477 <v-flex sm6 xs8> 481 <v-flex sm6 xs8>
478 <h5 class="my-1">{{ editedItem.name }}</h5> 482 <h5 class="my-1">{{ editedItem.name }}</h5>
479 </v-flex> 483 </v-flex>
480 </v-layout> 484 </v-layout>
481 <v-layout> 485 <v-layout>
482 <v-flex xs5 sm6> 486 <v-flex xs5 sm6>
483 <h5 class="right my-1">Email:</h5> 487 <h5 class="right my-1">Email:</h5>
484 </v-flex> 488 </v-flex>
485 <v-flex sm6 xs8> 489 <v-flex sm6 xs8>
486 <h5 class="my-1">{{ editedItem.email }}</h5> 490 <h5 class="my-1">{{ editedItem.email }}</h5>
487 </v-flex> 491 </v-flex>
488 </v-layout> 492 </v-layout>
489 <v-layout> 493 <v-layout>
490 <v-flex xs6 sm6> 494 <v-flex xs6 sm6>
491 <h5 class="right my-1">Gender:</h5> 495 <h5 class="right my-1">Gender:</h5>
492 </v-flex> 496 </v-flex>
493 <v-flex sm6 xs8> 497 <v-flex sm6 xs8>
494 <h5 class="my-1">{{ editedItem.gender }}</h5> 498 <h5 class="my-1">{{ editedItem.gender }}</h5>
495 </v-flex> 499 </v-flex>
496 </v-layout> 500 </v-layout>
497 <v-layout> 501 <v-layout>
498 <v-flex xs5 sm6> 502 <v-flex xs5 sm6>
499 <h5 class="right my-1">City:</h5> 503 <h5 class="right my-1">City:</h5>
500 </v-flex> 504 </v-flex>
501 <v-flex sm6 xs8> 505 <v-flex sm6 xs8>
502 <h5 class="my-1">{{ editedItem.city }}</h5> 506 <h5 class="my-1">{{ editedItem.city }}</h5>
503 </v-flex> 507 </v-flex>
504 </v-layout> 508 </v-layout>
505 <v-layout> 509 <v-layout>
506 <v-flex xs5 sm6> 510 <v-flex xs5 sm6>
507 <h5 class="right my-1">State:</h5> 511 <h5 class="right my-1">State:</h5>
508 </v-flex> 512 </v-flex>
509 <v-flex sm6 xs8> 513 <v-flex sm6 xs8>
510 <h5 class="my-1">{{ editedItem.state }}</h5> 514 <h5 class="my-1">{{ editedItem.state }}</h5>
511 </v-flex> 515 </v-flex>
512 </v-layout> 516 </v-layout>
513 <v-layout> 517 <v-layout>
514 <v-flex xs5 sm6> 518 <v-flex xs5 sm6>
515 <h5 class="right my-1">Country:</h5> 519 <h5 class="right my-1">Country:</h5>
516 </v-flex> 520 </v-flex>
517 <v-flex sm6 xs8> 521 <v-flex sm6 xs8>
518 <h5 class="my-1">{{ editedItem.country }}</h5> 522 <h5 class="my-1">{{ editedItem.country }}</h5>
519 </v-flex> 523 </v-flex>
520 </v-layout> 524 </v-layout>
521 <v-layout> 525 <v-layout>
522 <v-flex xs5 sm6> 526 <v-flex xs5 sm6>
523 <h5 class="right my-1">Pincode:</h5> 527 <h5 class="right my-1">Pincode:</h5>
524 </v-flex> 528 </v-flex>
525 <v-flex sm6 xs8> 529 <v-flex sm6 xs8>
526 <h5 class="my-1">{{ editedItem.pincode }}</h5> 530 <h5 class="my-1">{{ editedItem.pincode }}</h5>
527 </v-flex> 531 </v-flex>
528 </v-layout> 532 </v-layout>
529 <v-layout> 533 <v-layout>
530 <v-flex xs5 sm6> 534 <v-flex xs5 sm6>
531 <h5 class="right my-1">Mobile No:</h5> 535 <h5 class="right my-1">Mobile No:</h5>
532 </v-flex> 536 </v-flex>
533 <v-flex sm6 xs8> 537 <v-flex sm6 xs8>
534 <h5 class="my-1">{{ editedItem.mobile }}</h5> 538 <h5 class="my-1">{{ editedItem.mobile }}</h5>
535 </v-flex> 539 </v-flex>
536 </v-layout> 540 </v-layout>
537 <v-layout> 541 <v-layout>
538 <v-flex xs5 sm6> 542 <v-flex xs5 sm6>
539 <h5 class="right my-1">Academic Year:</h5> 543 <h5 class="right my-1">Academic Year:</h5>
540 </v-flex> 544 </v-flex>
541 <v-flex sm6 xs8> 545 <v-flex sm6 xs8>
542 <h5 class="my-1">{{ editedItem.establishmentYear }}</h5> 546 <h5 class="my-1">{{ editedItem.establishmentYear }}</h5>
543 </v-flex> 547 </v-flex>
544 </v-layout> 548 </v-layout>
545 <v-layout> 549 <v-layout>
546 <v-flex xs5 sm6> 550 <v-flex xs5 sm6>
547 <h5 class="right my-1">Fahter Name:</h5> 551 <h5 class="right my-1">Fahter Name:</h5>
548 </v-flex> 552 </v-flex>
549 <v-flex sm6 xs8> 553 <v-flex sm6 xs8>
550 <h5 class="my-1">{{ editedItem.fatherName }}</h5> 554 <h5 class="my-1">{{ editedItem.fatherName }}</h5>
551 </v-flex> 555 </v-flex>
552 </v-layout> 556 </v-layout>
553 <v-layout> 557 <v-layout>
554 <v-flex xs5 sm6> 558 <v-flex xs5 sm6>
555 <h5 class="right my-1">Mother Name:</h5> 559 <h5 class="right my-1">Mother Name:</h5>
556 </v-flex> 560 </v-flex>
557 <v-flex sm6 xs8> 561 <v-flex sm6 xs8>
558 <h5 class="my-1">{{ editedItem.motherName }}</h5> 562 <h5 class="my-1">{{ editedItem.motherName }}</h5>
559 </v-flex> 563 </v-flex>
560 </v-layout> 564 </v-layout>
561 <v-layout> 565 <v-layout>
562 <v-flex xs5 sm6> 566 <v-flex xs5 sm6>
563 <h5 class="right my-1">Father Cell No:</h5> 567 <h5 class="right my-1">Father Cell No:</h5>
564 </v-flex> 568 </v-flex>
565 <v-flex sm6 xs8> 569 <v-flex sm6 xs8>
566 <h5 class="my-1">{{ editedItem.fatherCellNo }}</h5> 570 <h5 class="my-1">{{ editedItem.fatherCellNo }}</h5>
567 </v-flex> 571 </v-flex>
568 </v-layout> 572 </v-layout>
569 <v-layout> 573 <v-layout>
570 <v-flex xs5 sm6> 574 <v-flex xs5 sm6>
571 <h5 class="right my-1">Mother Cell No:</h5> 575 <h5 class="right my-1">Mother Cell No:</h5>
572 </v-flex> 576 </v-flex>
573 <v-flex sm6 xs8> 577 <v-flex sm6 xs8>
574 <h5 class="my-1">{{ editedItem.motherCellNo }}</h5> 578 <h5 class="my-1">{{ editedItem.motherCellNo }}</h5>
575 </v-flex> 579 </v-flex>
576 </v-layout> 580 </v-layout>
577 <v-layout> 581 <v-layout>
578 <v-flex xs5 sm6> 582 <v-flex xs5 sm6>
579 <h5 class="right my-1">Date Of Birth:</h5> 583 <h5 class="right my-1">Date Of Birth:</h5>
580 </v-flex> 584 </v-flex>
581 <v-flex sm6 xs8> 585 <v-flex sm6 xs8>
582 <h5 class="my-1">{{ dates(editedItem.dob) }}</h5> 586 <h5 class="my-1">{{ dates(editedItem.dob) }}</h5>
583 </v-flex> 587 </v-flex>
584 </v-layout> 588 </v-layout>
585 <v-layout> 589 <v-layout>
586 <v-flex xs6 sm6 > 590 <v-flex xs6 sm6 >
587 <h5 class="right my-1">Permanent Address:</h5> 591 <h5 class="right my-1">Permanent Address:</h5>
588 </v-flex> 592 </v-flex>
589 <v-flex sm6 xs8> 593 <v-flex sm6 xs8>
590 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5> 594 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5>
591 </v-flex> 595 </v-flex>
592 </v-layout> 596 </v-layout>
593 <v-layout> 597 <v-layout>
594 <v-flex xs6 sm6 > 598 <v-flex xs6 sm6 >
595 <h5 class="right my-1">present Address:</h5> 599 <h5 class="right my-1">present Address:</h5>
596 </v-flex> 600 </v-flex>
597 <v-flex sm6 xs8> 601 <v-flex sm6 xs8>
598 <h5 class="my-1">{{ editedItem.presentAddress }}</h5> 602 <h5 class="my-1">{{ editedItem.presentAddress }}</h5>
599 </v-flex> 603 </v-flex>
600 </v-layout> 604 </v-layout>
601 </v-flex> 605 </v-flex>
602 </v-layout> 606 </v-layout>
603 </v-container> 607 </v-container>
604 </v-card-text> 608 </v-card-text>
605 </v-card> 609 </v-card>
606 </v-dialog> 610 </v-dialog>
607 611
608 <v-snackbar 612 <v-snackbar
609 :timeout="timeout" 613 :timeout="timeout"
610 :top="y === 'top'" 614 :top="y === 'top'"
611 :right="x === 'right'" 615 :right="x === 'right'"
612 :vertical="mode === 'vertical'" 616 :vertical="mode === 'vertical'"
613 v-model="snackbar" 617 v-model="snackbar"
614 color="success" 618 color="success"
615 >{{ text }}</v-snackbar> 619 >{{ text }}</v-snackbar>
616 620
617 <!-- ****** EXISTING-USERS STUDENTS TABLE ****** --> 621 <!-- ****** EXISTING-USERS STUDENTS TABLE ****** -->
618 <v-card flat> 622 <v-card flat>
619 <v-card-actions> 623 <v-card-actions>
620 <v-layout> 624 <v-layout>
621 <label class = "right mt-4 ml-5 ">Select Class:</label> 625 <label class = "right mt-4 ml-5 ">Select Class:</label>
622 <v-select 626 <v-select
623 :items="addclass" 627 :items="addclass"
624 label="Select Class" 628 label="Select Class"
625 v-model="addStudents.select" 629 v-model="selectStudents.select"
626 item-text="classNum" 630 item-text="classNum"
627 item-value="_id" 631 item-value="_id"
628 name="Select Class" 632 name="Select Class"
629 :rules="classRules" 633 :rules="classRules"
630 @change="getSections(addStudents.select)" 634 @change="getSections(selectStudents.select)"
631 class="px-4" 635 class="px-4"
632 required 636 required
633 ></v-select> 637 ></v-select>
634 <label class="right mt-4">Select Section:</label> 638 <label class="right mt-4">Select Section:</label>
635 <v-select 639 <v-select
636 :items="addSection" 640 :items="addSection"
637 label="Select Section" 641 label="Select Section"
638 v-model="addStudents.selectSection" 642 v-model="selectStudents.selectSection"
639 item-text="name" 643 item-text="name"
640 item-value="_id" 644 item-value="_id"
641 name="Select Section" 645 name="Select Section"
642 :rules="sectionRules" 646 :rules="sectionRules"
643 class="pl-3" 647 class="pl-3"
644 required 648 required
645 ></v-select> 649 ></v-select>
646 </v-layout> 650 </v-layout>
647 <v-spacer></v-spacer> 651 <v-spacer></v-spacer>
648 <v-btn @click="findStudents()" round dark :loading="loading" class= "left">Find</v-btn> 652 <v-btn @click="findStudents()" round dark :loading="loading" class= "left">Find</v-btn>
649 </v-card-actions> 653 </v-card-actions>
650 </v-card> 654 </v-card>
651 <v-data-table 655 <v-data-table
652 :headers="headers" 656 :headers="headers"
653 :items="desserts" 657 :items="desserts"
654 :pagination.sync="pagination" 658 :pagination.sync="pagination"
655 :search="search" 659 :search="search"
656 > 660 >
657 <template slot="items" slot-scope="props"> 661 <template slot="items" slot-scope="props">
658 <td id="td" class="text-xs-center">{{ props.index}}</td> 662 <td id="td" class="text-xs-center">{{ props.index}}</td>
663 <td id="td" class="text-xs-center">
664 <v-avatar><img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl">
665 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl">
666 </v-avatar></td>
659 <td id="td" class="text-xs-center">{{ props.item.name}}</td> 667 <td id="td" class="text-xs-center">{{ props.item.name}}</td>
660 <td id="td" class="text-xs-center">{{ props.item.email }}</td> 668 <td id="td" class="text-xs-center">{{ props.item.email }}</td>
661 <td id="td" class="text-xs-center">{{ dates(props.item.dob) }}</td> 669 <td id="td" class="text-xs-center">{{ dates(props.item.dob) }}</td>
662 <td id="td" class="text-xs-center">{{ props.item.gender }}</td> 670 <td id="td" class="text-xs-center">{{ props.item.gender }}</td>
663 <td id="td" class="text-xs-center">{{ props.item.fatherName }}</td> 671 <td id="td" class="text-xs-center">{{ props.item.fatherName }}</td>
664 <td id="td" class="text-xs-center">{{ props.item.motherName }}</td> 672 <td id="td" class="text-xs-center">{{ props.item.motherName }}</td>
665 <td id="td" class="text-xs-center">{{ props.item.establishmentYear }}</td> 673 <td id="td" class="text-xs-center">{{ props.item.establishmentYear }}</td>
666 <td id="td" class="text-xs-center">{{ props.item.mobile}}</td> 674 <td id="td" class="text-xs-center">{{ props.item.mobile}}</td>
667 675
668 <td class="text-xs-center"> 676 <td class="text-xs-center">
669 <span> 677 <span>
670 <img 678 <img
671 style="cursor:pointer; width:25px; height:18px; " 679 style="cursor:pointer; width:25px; height:18px; "
672 class="mr-5" 680 class="mr-5"
673 @click="profile(props.item)" 681 @click="profile(props.item)"
674 src="/static/icon/eye1.png" 682 src="/static/icon/eye1.png"
675 > 683 >
676 <img 684 <img
677 style="cursor:pointer; width:20px; height:18px; " 685 style="cursor:pointer; width:20px; height:18px; "
678 class="mr-5" 686 class="mr-5"
679 @click="editItem(props.item)" 687 @click="editItem(props.item)"
680 src="/static/icon/edit1.png" 688 src="/static/icon/edit1.png"
681 > 689 >
682 <img 690 <img
683 style="cursor:pointer; height:20px; " 691 style="cursor:pointer; height:20px; "
684 class="mr-5" 692 class="mr-5"
685 @click="deleteItem(props.item)" 693 @click="deleteItem(props.item)"
686 src="/static/icon/delete1.png" 694 src="/static/icon/delete1.png"
687 > 695 >
688 </span> 696 </span>
689 </td> 697 </td>
690 </template> 698 </template>
691 <v-alert 699 <v-alert
692 slot="no-results" 700 slot="no-results"
693 :value="true" 701 :value="true"
694 color="error" 702 color="error"
695 icon="warning" 703 icon="warning"
696 >Your search for "{{ search }}" found no results.</v-alert> 704 >Your search for "{{ search }}" found no results.</v-alert>
697 </v-data-table> 705 </v-data-table>
698 </v-tab-item> 706 </v-tab-item>
699 707
700 <!-- ****** ADD MULTIPLE STUDENTS ****** --> 708 <!-- ****** ADD MULTIPLE STUDENTS ****** -->
701 709
702 <v-tab-item> 710 <v-tab-item>
703 <v-container> 711 <v-container>
704 <v-snackbar 712 <v-snackbar
705 :timeout="timeout" 713 :timeout="timeout"
706 :top="y === 'top'" 714 :top="y === 'top'"
707 :right="x === 'right'" 715 :right="x === 'right'"
708 :vertical="mode === 'vertical'" 716 :vertical="mode === 'vertical'"
709 v-model="snackbar" 717 v-model="snackbar"
710 color="success" 718 color="success"
711 >{{ text }}</v-snackbar> 719 >{{ text }}</v-snackbar>
712 <v-flex xs12 sm12 class="my-4"> 720 <v-flex xs12 sm12 class="my-4">
713 <v-card flat> 721 <v-card flat>
714 <v-form ref="form" v-model="valid" lazy-validation> 722 <v-form ref="form" v-model="valid" lazy-validation>
715 <v-container fluid> 723 <v-container fluid>
716 <v-layout> 724 <v-layout>
717 <v-flex 725 <v-flex
718 xs12 726 xs12
719 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" 727 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
720 > 728 >
721 <v-avatar size="100px"> 729 <v-avatar size="100px">
722 <img src="/static/icon/user.png" v-if="!imageUrl"> 730 <img src="/static/icon/user.png" v-if="!imageUrl">
723 </v-avatar> 731 </v-avatar>
724 <input 732 <input
725 type="file" 733 type="file"
726 style="display: none" 734 style="display: none"
727 ref="image" 735 ref="image"
728 accept="image/*" 736 accept="image/*"
729 @change="onFilePicked" 737 @change="onFilePicked"
730 > 738 >
731 <img 739 <img
732 :src="imageData.imageUrl" 740 :src="imageData.imageUrl"
733 height="150" 741 height="150"
734 v-if="imageUrl" 742 v-if="imageUrl"
735 style="border-radius:50%; width:200px" 743 style="border-radius:50%; width:200px"
736 > 744 >
737 </v-flex> 745 </v-flex>
738 </v-layout> 746 </v-layout>
739 <v-layout> 747 <v-layout>
740 <v-flex xs12 sm6> 748 <v-flex xs12 sm6>
741 <v-layout> 749 <v-layout>
742 <v-flex xs4 class="pt-4 subheading"> 750 <v-flex xs4 class="pt-4 subheading">
743 <label class="right">Select Class:</label> 751 <label class="right">Select Class:</label>
744 </v-flex> 752 </v-flex>
745 <v-flex xs8 class="ml-3"> 753 <v-flex xs8 class="ml-3">
746 <v-select 754 <v-select
747 :items="addclass" 755 :items="addclass"
748 label="Select Class" 756 label="Select Class"
749 v-model="addStudents.select" 757 v-model="addStudents.select"
750 item-text="classNum" 758 item-text="classNum"
751 item-value="_id" 759 item-value="_id"
752 name="Select Class" 760 name="Select Class"
753 :rules="classRules" 761 :rules="classRules"
754 @change="getSections(addStudents.select)" 762 @change="getSection(addStudents.select)"
755 required 763 required
756 ></v-select> 764 ></v-select>
757 </v-flex> 765 </v-flex>
758 </v-layout> 766 </v-layout>
759 </v-flex> 767 </v-flex>
760 <v-flex xs12 sm6> 768 <v-flex xs12 sm6>
761 <v-layout> 769 <v-layout>
762 <v-flex xs4 class="pt-4 subheading"> 770 <v-flex xs4 class="pt-4 subheading">
763 <label class="right">Select Section:</label> 771 <label class="right">Select Section:</label>
764 </v-flex> 772 </v-flex>
765 <v-flex xs8 class="ml-3"> 773 <v-flex xs8 class="ml-3">
766 <v-select 774 <v-select
767 :items="addSection" 775 :items="addSection"
768 label="Select Section" 776 label="Select Section"
769 v-model="addStudents.selectSection" 777 v-model="addStudents.selectSection"
770 item-text="name" 778 item-text="name"
771 item-value="_id" 779 item-value="_id"
772 name="Select Section" 780 name="Select Section"
773 :rules="sectionRules" 781 :rules="sectionRules"
774 required 782 required
775 ></v-select> 783 ></v-select>
776 </v-flex> 784 </v-flex>
777 </v-layout> 785 </v-layout>
778 </v-flex> 786 </v-flex>
779 </v-layout> 787 </v-layout>
780 <v-layout> 788 <v-layout>
781 <v-flex xs12 sm6> 789 <v-flex xs12 sm6>
782 <v-layout> 790 <v-layout>
783 <v-flex xs4 class="pt-4 subheading"> 791 <v-flex xs4 class="pt-4 subheading">
784 <label class="right">Full Name:</label> 792 <label class="right">Full Name:</label>
785 </v-flex> 793 </v-flex>
786 <v-flex xs8 class="ml-3"> 794 <v-flex xs8 class="ml-3">
787 <v-text-field 795 <v-text-field
788 v-model="addStudents.name" 796 v-model="addStudents.name"
789 placeholder="fill your full Name" 797 placeholder="fill your full Name"
790 name="name" 798 name="name"
791 type="text" 799 type="text"
792 :rules="nameRules" 800 :rules="nameRules"
793 required 801 required
794 ></v-text-field> 802 ></v-text-field>
795 </v-flex> 803 </v-flex>
796 </v-layout> 804 </v-layout>
797 </v-flex> 805 </v-flex>
798 <v-flex xs12 sm6> 806 <v-flex xs12 sm6>
799 <v-layout> 807 <v-layout>
800 <v-flex xs4 class="pt-4 subheading"> 808 <v-flex xs4 class="pt-4 subheading">
801 <label class="right">Email ID:</label> 809 <label class="right">Email ID:</label>
802 </v-flex> 810 </v-flex>
803 <v-flex xs8 class="ml-3"> 811 <v-flex xs8 class="ml-3">
804 <v-text-field 812 <v-text-field
805 placeholder="fill your email" 813 placeholder="fill your email"
806 :rules="emailRules" 814 :rules="emailRules"
807 v-model="addStudents.email" 815 v-model="addStudents.email"
808 type="text" 816 type="text"
809 name="email" 817 name="email"
810 required 818 required
811 ></v-text-field> 819 ></v-text-field>
812 </v-flex> 820 </v-flex>
813 </v-layout> 821 </v-layout>
814 </v-flex> 822 </v-flex>
815 </v-layout> 823 </v-layout>
816 <v-layout> 824 <v-layout>
817 <v-flex xs12 sm6> 825 <v-flex xs12 sm6>
818 <v-layout> 826 <v-layout>
819 <v-flex xs4 class="pt-4 subheading"> 827 <v-flex xs4 class="pt-4 subheading">
820 <label class="right">Date of Birth:</label> 828 <label class="right">Date of Birth:</label>
821 </v-flex> 829 </v-flex>
822 <v-flex xs8 class="ml-3"> 830 <v-flex xs8 class="ml-3">
823 <v-menu 831 <v-menu
824 ref="menu" 832 ref="menu"
825 :close-on-content-click="false" 833 :close-on-content-click="false"
826 v-model="menu" 834 v-model="menu"
827 :nudge-right="40" 835 :nudge-right="40"
828 lazy 836 lazy
829 transition="scale-transition" 837 transition="scale-transition"
830 offset-y 838 offset-y
831 full-width 839 full-width
832 min-width="290px" 840 min-width="290px"
833 > 841 >
834 <v-text-field 842 <v-text-field
835 slot="activator" 843 slot="activator"
836 :rules="dateRules" 844 :rules="dateRules"
837 v-model="addStudents.date" 845 v-model="addStudents.date"
838 placeholder="Select date" 846 placeholder="Select date"
839 ></v-text-field> 847 ></v-text-field>
840 <v-date-picker 848 <v-date-picker
841 ref="picker" 849 ref="picker"
842 v-model="addStudents.date" 850 v-model="addStudents.date"
843 :max="new Date().toISOString().substr(0, 10)" 851 :max="new Date().toISOString().substr(0, 10)"
844 min="1950-01-01" 852 min="1950-01-01"
845 @input="menu = false" 853 @input="menu = false"
846 ></v-date-picker> 854 ></v-date-picker>
847 </v-menu> 855 </v-menu>
848 </v-flex> 856 </v-flex>
849 </v-layout> 857 </v-layout>
850 </v-flex> 858 </v-flex>
851 <v-flex xs12 sm6> 859 <v-flex xs12 sm6>
852 <v-layout> 860 <v-layout>
853 <v-flex xs4 class="pt-4 subheading"> 861 <v-flex xs4 class="pt-4 subheading">
854 <label class="right">City:</label> 862 <label class="right">City:</label>
855 </v-flex> 863 </v-flex>
856 <v-flex xs8 class="ml-3"> 864 <v-flex xs8 class="ml-3">
857 <v-text-field 865 <v-text-field
858 v-model="addStudents.city" 866 v-model="addStudents.city"
859 placeholder="fill your City Name" 867 placeholder="fill your City Name"
860 name="City" 868 name="City"
861 type="text" 869 type="text"
862 :rules="cityRules" 870 :rules="cityRules"
863 required 871 required
864 ></v-text-field> 872 ></v-text-field>
865 </v-flex> 873 </v-flex>
866 </v-layout> 874 </v-layout>
867 </v-flex> 875 </v-flex>
868 </v-layout> 876 </v-layout>
869 <v-layout> 877 <v-layout>
870 <v-flex xs12 sm6> 878 <v-flex xs12 sm6>
871 <v-layout> 879 <v-layout>
872 <v-flex xs4 class="pt-4 subheading"> 880 <v-flex xs4 class="pt-4 subheading">
873 <label class="right">State:</label> 881 <label class="right">State:</label>
874 </v-flex> 882 </v-flex>
875 <v-flex xs8 class="ml-3"> 883 <v-flex xs8 class="ml-3">
876 <v-text-field 884 <v-text-field
877 v-model="addStudents.state" 885 v-model="addStudents.state"
878 placeholder="fill your State Name" 886 placeholder="fill your State Name"
879 name="state" 887 name="state"
880 type="text" 888 type="text"
881 :rules="stateRules" 889 :rules="stateRules"
882 required 890 required
883 ></v-text-field> 891 ></v-text-field>
884 </v-flex> 892 </v-flex>
885 </v-layout> 893 </v-layout>
886 </v-flex> 894 </v-flex>
887 <v-flex xs12 sm6> 895 <v-flex xs12 sm6>
888 <v-layout> 896 <v-layout>
889 <v-flex xs4 class="pt-4 subheading"> 897 <v-flex xs4 class="pt-4 subheading">
890 <label class="right">Pincode:</label> 898 <label class="right">Pincode:</label>
891 </v-flex> 899 </v-flex>
892 <v-flex xs8 class="ml-3"> 900 <v-flex xs8 class="ml-3">
893 <v-text-field 901 <v-text-field
894 v-model="addStudents.pincode" 902 v-model="addStudents.pincode"
895 placeholder="fill your pincode" 903 placeholder="fill your pincode"
896 name="pincode" 904 name="pincode"
897 type="number" 905 type="number"
898 :rules="pincode" 906 :rules="pincode"
899 required 907 required
900 ></v-text-field> 908 ></v-text-field>
901 </v-flex> 909 </v-flex>
902 </v-layout> 910 </v-layout>
903 </v-flex> 911 </v-flex>
904 </v-layout> 912 </v-layout>
905 <v-layout> 913 <v-layout>
906 <v-flex xs12 sm6> 914 <v-flex xs12 sm6>
907 <v-layout> 915 <v-layout>
908 <v-flex xs4 class="pt-4 subheading"> 916 <v-flex xs4 class="pt-4 subheading">
909 <label class="right">Mobile No:</label> 917 <label class="right">Mobile No:</label>
910 </v-flex> 918 </v-flex>
911 <v-flex xs8 class="ml-3"> 919 <v-flex xs8 class="ml-3">
912 <v-text-field 920 <v-text-field
913 v-model="addStudents.mobile" 921 v-model="addStudents.mobile"
914 placeholder="fill your MobileNo" 922 placeholder="fill your MobileNo"
915 name="mobileNo" 923 name="mobileNo"
916 type="number" 924 type="number"
917 :rules="mobileNoRules" 925 :rules="mobileNoRules"
918 required 926 required
919 ></v-text-field> 927 ></v-text-field>
920 </v-flex> 928 </v-flex>
921 </v-layout> 929 </v-layout>
922 </v-flex> 930 </v-flex>
923 <v-flex xs12 sm6> 931 <v-flex xs12 sm6>
924 <v-layout> 932 <v-layout>
925 <v-flex xs4 class="pt-4 subheading"> 933 <v-flex xs4 class="pt-4 subheading">
926 <label class="right">Select Country:</label> 934 <label class="right">Select Country:</label>
927 </v-flex> 935 </v-flex>
928 <v-flex xs8 class="ml-3"> 936 <v-flex xs8 class="ml-3">
929 <v-autocomplete 937 <v-autocomplete
930 v-model="addStudents.country" 938 v-model="addStudents.country"
931 :rules="country" 939 :rules="country"
932 :items="countries" 940 :items="countries"
933 placeholder="Select Country Name" 941 placeholder="Select Country Name"
934 required 942 required
935 ></v-autocomplete> 943 ></v-autocomplete>
936 </v-flex> 944 </v-flex>
937 </v-layout> 945 </v-layout>
938 </v-flex> 946 </v-flex>
939 </v-layout> 947 </v-layout>
940 <v-layout> 948 <v-layout>
941 <v-flex xs12 sm6> 949 <v-flex xs12 sm6>
942 <v-layout> 950 <v-layout>
943 <v-flex xs4 class="pt-4 subheading"> 951 <v-flex xs4 class="pt-4 subheading">
944 <label class="right">Gender:</label> 952 <label class="right">Gender:</label>
945 </v-flex> 953 </v-flex>
946 <v-flex xs8 class="ml-3"> 954 <v-flex xs8 class="ml-3">
947 <v-select 955 <v-select
948 :items="gender" 956 :items="gender"
949 v-model="addStudents.gender" 957 v-model="addStudents.gender"
950 :rules="genderRules" 958 :rules="genderRules"
951 label="Select Gender" 959 label="Select Gender"
952 required 960 required
953 ></v-select> 961 ></v-select>
954 </v-flex> 962 </v-flex>
955 </v-layout> 963 </v-layout>
956 </v-flex> 964 </v-flex>
957 <v-flex xs12 sm6> 965 <v-flex xs12 sm6>
958 <v-layout> 966 <v-layout>
959 <v-flex xs4 class="pt-4 subheading"> 967 <v-flex xs4 class="pt-4 subheading">
960 <label class="right">Father Name:</label> 968 <label class="right">Father Name:</label>
961 </v-flex> 969 </v-flex>
962 <v-flex xs8 class="ml-3"> 970 <v-flex xs8 class="ml-3">
963 <v-text-field 971 <v-text-field
964 v-model="addStudents.fatherName" 972 v-model="addStudents.fatherName"
965 :rules="fatherNameRules" 973 :rules="fatherNameRules"
966 :items="countries" 974 :items="countries"
967 placeholder="Fill your father Name" 975 placeholder="Fill your father Name"
968 required 976 required
969 ></v-text-field> 977 ></v-text-field>
970 </v-flex> 978 </v-flex>
971 </v-layout> 979 </v-layout>
972 </v-flex> 980 </v-flex>
973 </v-layout> 981 </v-layout>
974 <v-layout> 982 <v-layout>
975 <v-flex xs12 sm6> 983 <v-flex xs12 sm6>
976 <v-layout> 984 <v-layout>
977 <v-flex xs4 class="pt-4 subheading"> 985 <v-flex xs4 class="pt-4 subheading">
978 <label class="right">Father Cell No:</label> 986 <label class="right">Father Cell No:</label>
979 </v-flex> 987 </v-flex>
980 <v-flex xs8 class="ml-3"> 988 <v-flex xs8 class="ml-3">
981 <v-text-field 989 <v-text-field
982 v-model="addStudents.fatherCellNo" 990 v-model="addStudents.fatherCellNo"
983 placeholder="fill your father Cell Number" 991 placeholder="fill your father Cell Number"
984 name="state" 992 name="state"
985 type="number" 993 type="number"
986 :rules="fatheCellNoRules" 994 :rules="fatheCellNoRules"
987 required 995 required
988 ></v-text-field> 996 ></v-text-field>
989 </v-flex> 997 </v-flex>
990 </v-layout> 998 </v-layout>
991 </v-flex> 999 </v-flex>
992 <v-flex xs12 sm6> 1000 <v-flex xs12 sm6>
993 <v-layout> 1001 <v-layout>
994 <v-flex xs4 class="pt-4 subheading"> 1002 <v-flex xs4 class="pt-4 subheading">
995 <label class="right">Mother Name:</label> 1003 <label class="right">Mother Name:</label>
996 </v-flex> 1004 </v-flex>
997 <v-flex xs8 class="ml-3"> 1005 <v-flex xs8 class="ml-3">
998 <v-text-field 1006 <v-text-field
999 v-model="addStudents.motherName" 1007 v-model="addStudents.motherName"
1000 placeholder="fill your Mother Name" 1008 placeholder="fill your Mother Name"
1001 name="state" 1009 name="state"
1002 type="text" 1010 type="text"
1003 :rules="motherNameRules" 1011 :rules="motherNameRules"
1004 required 1012 required
1005 ></v-text-field> 1013 ></v-text-field>
1006 </v-flex> 1014 </v-flex>
1007 </v-layout> 1015 </v-layout>
1008 </v-flex> 1016 </v-flex>
1009 </v-layout> 1017 </v-layout>
1010 <v-layout> 1018 <v-layout>
1011 <v-flex xs12 sm6> 1019 <v-flex xs12 sm6>
1012 <v-layout> 1020 <v-layout>
1013 <v-flex xs4 class="pt-4 subheading"> 1021 <v-flex xs4 class="pt-4 subheading">
1014 <label class="right">Mother Cell No:</label> 1022 <label class="right">Mother Cell No:</label>
1015 </v-flex> 1023 </v-flex>
1016 <v-flex xs8 class="ml-3"> 1024 <v-flex xs8 class="ml-3">
1017 <v-text-field 1025 <v-text-field
1018 v-model="addStudents.motherCellNo" 1026 v-model="addStudents.motherCellNo"
1019 placeholder="fill your Mother Cell Number" 1027 placeholder="fill your Mother Cell Number"
1020 name="state" 1028 name="state"
1021 type="number" 1029 type="number"
1022 :rules="motherCellNoRules" 1030 :rules="motherCellNoRules"
1023 required 1031 required
1024 ></v-text-field> 1032 ></v-text-field>
1025 </v-flex> 1033 </v-flex>
1026 </v-layout> 1034 </v-layout>
1027 </v-flex> 1035 </v-flex>
1028 <v-flex xs12 sm6> 1036 <v-flex xs12 sm6>
1029 <v-layout> 1037 <v-layout>
1030 <v-flex xs4 class="pt-4 subheading"> 1038 <v-flex xs4 class="pt-4 subheading">
1031 <label class="right">Academic Year:</label> 1039 <label class="right">Academic Year:</label>
1032 </v-flex> 1040 </v-flex>
1033 <v-flex xs8 class="ml-3"> 1041 <v-flex xs8 class="ml-3">
1034 <v-text-field 1042 <v-text-field
1035 v-model="addStudents.establishmentYear" 1043 v-model="addStudents.establishmentYear"
1036 placeholder="fill your Mother Name" 1044 placeholder="fill your Mother Name"
1037 name="state" 1045 name="state"
1038 type="number" 1046 type="number"
1039 :rules="establishmentYearRules" 1047 :rules="establishmentYearRules"
1040 required 1048 required
1041 ></v-text-field> 1049 ></v-text-field>
1042 </v-flex> 1050 </v-flex>
1043 </v-layout> 1051 </v-layout>
1044 </v-flex> 1052 </v-flex>
1045 </v-layout> 1053 </v-layout>
1046 <v-layout> 1054 <v-layout>
1047 <v-flex xs12 sm6> 1055 <v-flex xs12 sm6>
1048 <v-layout> 1056 <v-layout>
1049 <v-flex xs4 class="pt-4 subheading"> 1057 <v-flex xs4 class="pt-4 subheading">
1050 <label class="right">Uplaod Image:</label> 1058 <label class="right">Uplaod Image:</label>
1051 </v-flex> 1059 </v-flex>
1052 <v-flex xs8 class="ml-3"> 1060 <v-flex xs8 class="ml-3">
1053 <v-text-field 1061 <v-text-field
1054 label="Select Image" 1062 label="Select Image"
1055 @click="pickFile" 1063 @click="pickFile"
1056 v-model="imageName" 1064 v-model="imageName"
1057 append-icon="attach_file" 1065 append-icon="attach_file"
1058 ></v-text-field> 1066 ></v-text-field>
1059 </v-flex> 1067 </v-flex>
1060 </v-layout> 1068 </v-layout>
1061 </v-flex> 1069 </v-flex>
1062 </v-layout> 1070 </v-layout>
1063 <v-layout> 1071 <v-layout>
1064 <v-flex xs12 sm12> 1072 <v-flex xs12 sm12>
1065 <v-layout> 1073 <v-layout>
1066 <v-flex xs3 class="pt-4 subheading pl-4" style="max-width: 17%;"> 1074 <v-flex xs3 class="pt-4 subheading pl-4" style="max-width: 17%;">
1067 <label class>Present Address:</label> 1075 <label class>Present Address:</label>
1068 </v-flex> 1076 </v-flex>
1069 <v-flex xs12> 1077 <v-flex xs12>
1070 <v-text-field 1078 <v-text-field
1071 name="input-4-3" 1079 name="input-4-3"
1072 v-model="addStudents.presentAddress" 1080 v-model="addStudents.presentAddress"
1073 :rules="presentAddress" 1081 :rules="presentAddress"
1074 placeholder="fill Your present Address" 1082 placeholder="fill Your present Address"
1075 required 1083 required
1076 ></v-text-field> 1084 ></v-text-field>
1077 </v-flex> 1085 </v-flex>
1078 </v-layout> 1086 </v-layout>
1079 </v-flex> 1087 </v-flex>
1080 <v-flex xs12 sm12> 1088 <v-flex xs12 sm12>
1081 <v-layout> 1089 <v-layout>
1082 <v-flex xs3 class="pt-4 subheading" style="max-width: 17%;"> 1090 <v-flex xs3 class="pt-4 subheading" style="max-width: 17%;">
1083 <label>Permanent Address:</label> 1091 <label>Permanent Address:</label>
1084 </v-flex> 1092 </v-flex>
1085 <v-flex xs12> 1093 <v-flex xs12>
1086 <v-text-field 1094 <v-text-field
1087 name="input-4-3" 1095 name="input-4-3"
1088 v-model="addStudents.permanentAddress" 1096 v-model="addStudents.permanentAddress"
1089 :rules="permanentAddress" 1097 :rules="permanentAddress"
1090 placeholder="fill Your Permanent Address" 1098 placeholder="fill Your Permanent Address"
1091 required 1099 required
1092 ></v-text-field> 1100 ></v-text-field>
1093 </v-flex> 1101 </v-flex>
1094 </v-layout> 1102 </v-layout>
1095 </v-flex> 1103 </v-flex>
1096 </v-layout> 1104 </v-layout>
1097 <v-layout> 1105 <v-layout>
1098 <v-flex xs12 sm12> 1106 <v-flex xs12 sm12>
1099 <v-card-actions> 1107 <v-card-actions>
1100 <v-btn @click="clear" round dark>clear</v-btn> 1108 <v-btn @click="clear" round dark>clear</v-btn>
1101 <v-spacer></v-spacer> 1109 <v-spacer></v-spacer>
1102 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 1110 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
1103 </v-card-actions> 1111 </v-card-actions>
1104 </v-flex> 1112 </v-flex>
1105 </v-layout> 1113 </v-layout>
1106 </v-container> 1114 </v-container>
1107 </v-form> 1115 </v-form>
1108 </v-card> 1116 </v-card>
1109 </v-flex> 1117 </v-flex>
1110 </v-container> 1118 </v-container>
1111 </v-tab-item> 1119 </v-tab-item>
1112 </v-tabs> 1120 </v-tabs>
1113 <div class="loader" v-if="showLoader"> 1121 <div class="loader" v-if="showLoader">
1114 <v-progress-circular indeterminate color="white"></v-progress-circular> 1122 <v-progress-circular indeterminate color="white"></v-progress-circular>
1115 </div> 1123 </div>
1116 </v-app> 1124 </v-app>
1117 </template> 1125 </template>
1118 1126
1119 <script> 1127 <script>
1120 import http from "@/Services/http.js"; 1128 import http from "@/Services/http.js";
1121 import Util from "@/util"; 1129 import Util from "@/util";
1122 import moment from "moment"; 1130 import moment from "moment";
1123 1131
1124 export default { 1132 export default {
1125 data: () => ({ 1133 data: () => ({
1126 snackbar: false, 1134 snackbar: false,
1127 y: "top", 1135 y: "top",
1128 x: "right", 1136 x: "right",
1129 mode: "", 1137 mode: "",
1130 timeout: 3000, 1138 timeout: 3000,
1131 text: "", 1139 text: "",
1132 showLoader:false, 1140 showLoader:false,
1133 loading: false, 1141 loading: false,
1134 date: null, 1142 date: null,
1135 search: "", 1143 search: "",
1136 menu: false, 1144 menu: false,
1137 menu1: false, 1145 menu1: false,
1138 dialog: false, 1146 dialog: false,
1139 dialog1: false, 1147 dialog1: false,
1140 valid: true, 1148 valid: true,
1141 isActive: true, 1149 isActive: true,
1142 newActive: false, 1150 newActive: false,
1143 addclass: [], 1151 addclass: [],
1144 addSection: [], 1152 addSection: [],
1145 gender: ["Male", "Female"], 1153 gender: ["Male", "Female"],
1146 AddUsercredentials: {}, 1154 AddUsercredentials: {},
1147 pagination: { 1155 pagination: {
1148 rowsPerPage: 15 1156 rowsPerPage: 15
1149 }, 1157 },
1150 imageData: {}, 1158 imageData: {},
1151 imageName: "", 1159 imageName: "",
1152 imageUrl: "", 1160 imageUrl: "",
1153 imageFile: "", 1161 imageFile: "",
1154 nameRules: [v => !!v || " Full Name is required"], 1162 nameRules: [v => !!v || " Full Name is required"],
1155 dateRules: [v => !!v || " DOB is required"], 1163 dateRules: [v => !!v || " DOB is required"],
1156 cityRules: [v => !!v || " City Name is required"], 1164 cityRules: [v => !!v || " City Name is required"],
1157 pincode: [v => !!v || " Pincode is required"], 1165 pincode: [v => !!v || " Pincode is required"],
1158 country: [v => !!v || " Country Name is required"], 1166 country: [v => !!v || " Country Name is required"],
1159 permanentAddress: [v => !!v || " Permanent Address is required"], 1167 permanentAddress: [v => !!v || " Permanent Address is required"],
1160 presentAddress: [v => !!v || " Present Address is required"], 1168 presentAddress: [v => !!v || " Present Address is required"],
1161 mobileNoRules: [v => !!v || "Mobile Number is required"], 1169 mobileNoRules: [v => !!v || "Mobile Number is required"],
1162 stateRules: [v => !!v || "State Name is required"], 1170 stateRules: [v => !!v || "State Name is required"],
1163 classRules: [v => !!v || " Class Name is required"], 1171 classRules: [v => !!v || " Class Name is required"],
1164 sectionRules:[v => !!v || " Section Name is required"], 1172 sectionRules:[v => !!v || " Section Name is required"],
1165 genderRules: [v => !!v || " Select Gender is required"], 1173 genderRules: [v => !!v || " Select Gender is required"],
1166 fatherNameRules: [v => !!v || " Father Name is required"], 1174 fatherNameRules: [v => !!v || " Father Name is required"],
1167 fatheCellNoRules: [v => !!v || " father Cell Number is required"], 1175 fatheCellNoRules: [v => !!v || " father Cell Number is required"],
1168 motherNameRules: [v => !!v || " Mother Name is required"], 1176 motherNameRules: [v => !!v || " Mother Name is required"],
1169 motherCellNoRules: [v => !!v || " Mother Cell Number is required"], 1177 motherCellNoRules: [v => !!v || " Mother Cell Number is required"],
1170 establishmentYearRules: [v => !!v || " Academic Year is required"], 1178 establishmentYearRules: [v => !!v || " Academic Year is required"],
1171 errorMessages: "", 1179 errorMessages: "",
1172 emailRules: [ 1180 emailRules: [
1173 v => !!v || "E-mail is required", 1181 v => !!v || "E-mail is required",
1174 v => 1182 v =>
1175 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 1183 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
1176 "E-mail must be valid" 1184 "E-mail must be valid"
1177 ], 1185 ],
1178 countries: [ 1186 countries: [
1179 "Afghanistan", 1187 "Afghanistan",
1180 "Albania", 1188 "Albania",
1181 "Algeria", 1189 "Algeria",
1182 "Andorra", 1190 "Andorra",
1183 "Angola", 1191 "Angola",
1184 "Anguilla", 1192 "Anguilla",
1185 "Antigua &amp; Barbuda", 1193 "Antigua &amp; Barbuda",
1186 "Argentina", 1194 "Argentina",
1187 "Armenia", 1195 "Armenia",
1188 "Aruba", 1196 "Aruba",
1189 "Australia", 1197 "Australia",
1190 "Austria", 1198 "Austria",
1191 "Azerbaijan", 1199 "Azerbaijan",
1192 "Bahamas", 1200 "Bahamas",
1193 "Bahrain", 1201 "Bahrain",
1194 "Bangladesh", 1202 "Bangladesh",
1195 "Barbados", 1203 "Barbados",
1196 "Belarus", 1204 "Belarus",
1197 "Belgium", 1205 "Belgium",
1198 "Belize", 1206 "Belize",
1199 "Benin", 1207 "Benin",
1200 "Bermuda", 1208 "Bermuda",
1201 "Bhutan", 1209 "Bhutan",
1202 "Bolivia", 1210 "Bolivia",
1203 "Bosnia &amp; Herzegovina", 1211 "Bosnia &amp; Herzegovina",
1204 "Botswana", 1212 "Botswana",
1205 "Brazil", 1213 "Brazil",
1206 "British Virgin Islands", 1214 "British Virgin Islands",
1207 "Brunei", 1215 "Brunei",
1208 "Bulgaria", 1216 "Bulgaria",
1209 "Burkina Faso", 1217 "Burkina Faso",
1210 "Burundi", 1218 "Burundi",
1211 "Cambodia", 1219 "Cambodia",
1212 "Cameroon", 1220 "Cameroon",
1213 "Cape Verde", 1221 "Cape Verde",
1214 "Cayman Islands", 1222 "Cayman Islands",
1215 "Chad", 1223 "Chad",
1216 "Chile", 1224 "Chile",
1217 "China", 1225 "China",
1218 "Colombia", 1226 "Colombia",
1219 "Congo", 1227 "Congo",
1220 "Cook Islands", 1228 "Cook Islands",
1221 "Costa Rica", 1229 "Costa Rica",
1222 "Cote D Ivoire", 1230 "Cote D Ivoire",
1223 "Croatia", 1231 "Croatia",
1224 "Cruise Ship", 1232 "Cruise Ship",
1225 "Cuba", 1233 "Cuba",
1226 "Cyprus", 1234 "Cyprus",
1227 "Czech Republic", 1235 "Czech Republic",
1228 "Denmark", 1236 "Denmark",
1229 "Djibouti", 1237 "Djibouti",
1230 "Dominica", 1238 "Dominica",
1231 "Dominican Republic", 1239 "Dominican Republic",
1232 "Ecuador", 1240 "Ecuador",
1233 "Egypt", 1241 "Egypt",
1234 "El Salvador", 1242 "El Salvador",
1235 "Equatorial Guinea", 1243 "Equatorial Guinea",
1236 "Estonia", 1244 "Estonia",
1237 "Ethiopia", 1245 "Ethiopia",
1238 "Falkland Islands", 1246 "Falkland Islands",
1239 "Faroe Islands", 1247 "Faroe Islands",
1240 "Fiji", 1248 "Fiji",
1241 "Finland", 1249 "Finland",
1242 "France", 1250 "France",
1243 "French Polynesia", 1251 "French Polynesia",
1244 "French West Indies", 1252 "French West Indies",
1245 "Gabon", 1253 "Gabon",
1246 "Gambia", 1254 "Gambia",
1247 "Georgia", 1255 "Georgia",
1248 "Germany", 1256 "Germany",
1249 "Ghana", 1257 "Ghana",
1250 "Gibraltar", 1258 "Gibraltar",
1251 "Greece", 1259 "Greece",
1252 "Greenland", 1260 "Greenland",
1253 "Grenada", 1261 "Grenada",
1254 "Guam", 1262 "Guam",
1255 "Guatemala", 1263 "Guatemala",
1256 "Guernsey", 1264 "Guernsey",
1257 "Guinea", 1265 "Guinea",
1258 "Guinea Bissau", 1266 "Guinea Bissau",
1259 "Guyana", 1267 "Guyana",
1260 "Haiti", 1268 "Haiti",
1261 "Honduras", 1269 "Honduras",
1262 "Hong Kong", 1270 "Hong Kong",
1263 "Hungary", 1271 "Hungary",
1264 "Iceland", 1272 "Iceland",
1265 "India", 1273 "India",
1266 "Indonesia", 1274 "Indonesia",
1267 "Iran", 1275 "Iran",
1268 "Iraq", 1276 "Iraq",
1269 "Ireland", 1277 "Ireland",
1270 "Isle of Man", 1278 "Isle of Man",
1271 "Israel", 1279 "Israel",
1272 "Italy", 1280 "Italy",
1273 "Jamaica", 1281 "Jamaica",
1274 "Japan", 1282 "Japan",
1275 "Jersey", 1283 "Jersey",
1276 "Jordan", 1284 "Jordan",
1277 "Kazakhstan", 1285 "Kazakhstan",
1278 "Kenya", 1286 "Kenya",
1279 "Kuwait", 1287 "Kuwait",
1280 "Kyrgyz Republic", 1288 "Kyrgyz Republic",
1281 "Laos", 1289 "Laos",
1282 "Latvia", 1290 "Latvia",
1283 "Lebanon", 1291 "Lebanon",
1284 "Lesotho", 1292 "Lesotho",
1285 "Liberia", 1293 "Liberia",
1286 "Libya", 1294 "Libya",
1287 "Liechtenstein", 1295 "Liechtenstein",
1288 "Lithuania", 1296 "Lithuania",
1289 "Luxembourg", 1297 "Luxembourg",
1290 "Macau", 1298 "Macau",
1291 "Macedonia", 1299 "Macedonia",
1292 "Madagascar", 1300 "Madagascar",
1293 "Malawi", 1301 "Malawi",
1294 "Malaysia", 1302 "Malaysia",
1295 "Maldives", 1303 "Maldives",
1296 "Mali", 1304 "Mali",
1297 "Malta", 1305 "Malta",
1298 "Mauritania", 1306 "Mauritania",
1299 "Mauritius", 1307 "Mauritius",
1300 "Mexico", 1308 "Mexico",
1301 "Moldova", 1309 "Moldova",
1302 "Monaco", 1310 "Monaco",
1303 "Mongolia", 1311 "Mongolia",
1304 "Montenegro", 1312 "Montenegro",
1305 "Montserrat", 1313 "Montserrat",
1306 "Morocco", 1314 "Morocco",
1307 "Mozambique", 1315 "Mozambique",
1308 "Namibia", 1316 "Namibia",
1309 "Nepal", 1317 "Nepal",
1310 "Netherlands", 1318 "Netherlands",
1311 "Netherlands Antilles", 1319 "Netherlands Antilles",
1312 "New Caledonia", 1320 "New Caledonia",
1313 "New Zealand", 1321 "New Zealand",
1314 "Nicaragua", 1322 "Nicaragua",
1315 "Niger", 1323 "Niger",
1316 "Nigeria", 1324 "Nigeria",
1317 "Norway", 1325 "Norway",
1318 "Oman", 1326 "Oman",
1319 "Pakistan", 1327 "Pakistan",
1320 "Palestine", 1328 "Palestine",
1321 "Panama", 1329 "Panama",
1322 "Papua New Guinea", 1330 "Papua New Guinea",
1323 "Paraguay", 1331 "Paraguay",
1324 "Peru", 1332 "Peru",
1325 "Philippines", 1333 "Philippines",
1326 "Poland", 1334 "Poland",
1327 "Portugal", 1335 "Portugal",
1328 "Puerto Rico", 1336 "Puerto Rico",
1329 "Qatar", 1337 "Qatar",
1330 "Reunion", 1338 "Reunion",
1331 "Romania", 1339 "Romania",
1332 "Russia", 1340 "Russia",
1333 "Rwanda", 1341 "Rwanda",
1334 "Saint Pierre &amp; Miquelon", 1342 "Saint Pierre &amp; Miquelon",
1335 "Samoa", 1343 "Samoa",
1336 "San Marino", 1344 "San Marino",
1337 "Satellite", 1345 "Satellite",
1338 "Saudi Arabia", 1346 "Saudi Arabia",
1339 "Senegal", 1347 "Senegal",
1340 "Serbia", 1348 "Serbia",
1341 "Seychelles", 1349 "Seychelles",
1342 "Sierra Leone", 1350 "Sierra Leone",
1343 "Singapore", 1351 "Singapore",
1344 "Slovakia", 1352 "Slovakia",
1345 "Slovenia", 1353 "Slovenia",
1346 "South Africa", 1354 "South Africa",
1347 "South Korea", 1355 "South Korea",
1348 "Spain", 1356 "Spain",
1349 "Sri Lanka", 1357 "Sri Lanka",
1350 "St Kitts &amp; Nevis", 1358 "St Kitts &amp; Nevis",
1351 "St Lucia", 1359 "St Lucia",
1352 "St Vincent", 1360 "St Vincent",
1353 "St. Lucia", 1361 "St. Lucia",
1354 "Sudan", 1362 "Sudan",
1355 "Suriname", 1363 "Suriname",
1356 "Swaziland", 1364 "Swaziland",
1357 "Sweden", 1365 "Sweden",
1358 "Switzerland", 1366 "Switzerland",
1359 "Syria", 1367 "Syria",
1360 "Taiwan", 1368 "Taiwan",
1361 "Tajikistan", 1369 "Tajikistan",
1362 "Tanzania", 1370 "Tanzania",
1363 "Thailand", 1371 "Thailand",
1364 "Timor L'Este", 1372 "Timor L'Este",
1365 "Togo", 1373 "Togo",
1366 "Tonga", 1374 "Tonga",
1367 "Trinidad &amp; Tobago", 1375 "Trinidad &amp; Tobago",
1368 "Tunisia", 1376 "Tunisia",
1369 "Turkey", 1377 "Turkey",
1370 "Turkmenistan", 1378 "Turkmenistan",
1371 "Turks &amp; Caicos", 1379 "Turks &amp; Caicos",
1372 "Uganda", 1380 "Uganda",
1373 "Ukraine", 1381 "Ukraine",
1374 "United Arab Emirates", 1382 "United Arab Emirates",
1375 "United Kingdom", 1383 "United Kingdom",
1376 "United States", 1384 "United States",
1377 "Uruguay", 1385 "Uruguay",
1378 "Uzbekistan", 1386 "Uzbekistan",
1379 "Venezuela", 1387 "Venezuela",
1380 "Vietnam", 1388 "Vietnam",
1381 "Virgin Islands (US)", 1389 "Virgin Islands (US)",
1382 "Yemen", 1390 "Yemen",
1383 "Zambia", 1391 "Zambia",
1384 "Zimbabwe" 1392 "Zimbabwe"
1385 ], 1393 ],
1386 headers: [ 1394 headers: [
1387 { 1395 {
1388 text: "No", 1396 text: "No",
1389 align: "center", 1397 align: "center",
1390 sortable: false, 1398 sortable: false,
1391 value: "No" 1399 value: "No"
1392 }, 1400 },
1401 { text: "Profile Pic", value: "profilePicUrl", sortable: false, align: "center" },
1393 { text: "Name", value: "name", sortable: false, align: "center" }, 1402 { text: "Name", value: "name", sortable: false, align: "center" },
1394 { text: "Email", value: "email", sortable: false, align: "center" }, 1403 { text: "Email", value: "email", sortable: false, align: "center" },
1395 { text: "Dob", value: "dob", sortable: false, align: "center" }, 1404 { text: "Dob", value: "dob", sortable: false, align: "center" },
1396 { text: "Gender", value: "gender", sortable: false, align: "center" }, 1405 { text: "Gender", value: "gender", sortable: false, align: "center" },
1397 { text: "Father Name", value: "fatherName", sortable: false, align: "center" }, 1406 { text: "Father Name", value: "fatherName", sortable: false, align: "center" },
1398 { text: "Mother Name", value: "motherName", sortable: false, align: "center" }, 1407 { text: "Mother Name", value: "motherName", sortable: false, align: "center" },
1399 { text: "Academic Year", value: "establishmentYear", sortable: false, align: "center" }, 1408 { text: "Academic Year", value: "establishmentYear", sortable: false, align: "center" },
1400 { text: "Mobile No", value: "mobile", sortable: false, align: "center" }, 1409 { text: "Mobile No", value: "mobile", sortable: false, align: "center" },
1401 { text: "Action", value: "", sortable: false, align: "center" } 1410 { text: "Action", value: "", sortable: false, align: "center" }
1402 ], 1411 ],
1403 desserts: [], 1412 desserts: [],
1404 editedIndex: -1, 1413 editedIndex: -1,
1405 addStudents: { 1414 addStudents: {
1406 role: "STUDENT", 1415 role: "STUDENT",
1407 name: "", 1416 name: "",
1408 email: "", 1417 email: "",
1409 date: "", 1418 date: "",
1410 city: "", 1419 city: "",
1411 pincode: "", 1420 pincode: "",
1412 country: "", 1421 country: "",
1413 permanentAddress: "", 1422 permanentAddress: "",
1414 presentAddress: "", 1423 presentAddress: "",
1415 mobile: "", 1424 mobile: "",
1416 state: "", 1425 state: "",
1417 gender: "", 1426 gender: "",
1418 fatherName: "", 1427 fatherName: "",
1419 fatheCellNo: "", 1428 fatheCellNo: "",
1420 motherName: "", 1429 motherName: "",
1421 motherCellNo: "", 1430 motherCellNo: "",
1422 select: "", 1431 select: "",
1423 selectSection: "", 1432 selectSection: "",
1424 establishmentYear: new Date().getFullYear() 1433 establishmentYear: new Date().getFullYear()
1425 }, 1434 },
1435 selectStudents: {
1436 elect: "",
1437 selectSection: "",
1438 },
1426 editedItem: { 1439 editedItem: {
1427 role: "STUDENT", 1440 role: "STUDENT",
1428 name: "", 1441 name: "",
1429 email: "", 1442 email: "",
1430 dob: "", 1443 dob: "",
1431 city: "", 1444 city: "",
1432 pincode: "", 1445 pincode: "",
1433 country: "", 1446 country: "",
1434 permanentAddress: "", 1447 permanentAddress: "",
1435 presentAddress: "", 1448 presentAddress: "",
1436 mobile: "", 1449 mobile: "",
1437 state: "", 1450 state: "",
1438 gender: "", 1451 gender: "",
1439 fatherName: "", 1452 fatherName: "",
1440 fatheCellNo: "", 1453 fatheCellNo: "",
1441 motherName: "", 1454 motherName: "",
1442 motherCellNo: "", 1455 motherCellNo: "",
1443 select: "", 1456 select: "",
1444 selectSection: "", 1457 selectSection: "",
1445 establishmentYear: new Date().getFullYear() 1458 establishmentYear: new Date().getFullYear()
1446 }, 1459 },
1447 defaultItem: { 1460 defaultItem: {
1448 role: "STUDENT", 1461 role: "STUDENT",
1449 name: "", 1462 name: "",
1450 email: "" 1463 email: ""
1451 }, 1464 },
1452 userName: "", 1465 userName: "",
1453 items: [ 1466 items: [
1454 { 1467 {
1455 href: "/changepassword", 1468 href: "/changepassword",
1456 title: "Change Password", 1469 title: "Change Password",
1457 click: e => { 1470 click: e => {
1458 console.log(e); 1471 console.log(e);
1459 } 1472 }
1460 }, 1473 },
1461 { 1474 {
1462 href: "#", 1475 href: "#",
1463 title: "Logout", 1476 title: "Logout",
1464 click: e => { 1477 click: e => {
1465 window.getApp.$emit("APP_LOGOUT"); 1478 window.getApp.$emit("APP_LOGOUT");
1466 } 1479 }
1467 } 1480 }
1468 ] 1481 ]
1469 }), 1482 }),
1470 watch: { 1483 watch: {
1471 menu(val) { 1484 menu(val) {
1472 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 1485 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
1473 }, 1486 },
1474 menu1(val) { 1487 menu1(val) {
1475 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 1488 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
1476 } 1489 }
1477 }, 1490 },
1478 methods: { 1491 methods: {
1479 findStudents(){ 1492 findStudents(){
1480 this.showLoader = true; 1493 this.showLoader = true;
1481 http() 1494 http()
1482 .get( 1495 .get(
1483 "/getStudentWithClass", 1496 "/getStudentWithClass",
1484 { params: { classId: this.addStudents.select,sectionId: this.addStudents.selectSection,} } 1497 { params: { classId: this.selectStudents.select,sectionId: this.selectStudents.selectSection,} }
1485 ) 1498 )
1486 .then(response => { 1499 .then(response => {
1487 this.desserts = response.data.data; 1500 this.desserts = response.data.data;
1488 this.showLoader = false; 1501 this.showLoader = false;
1489 console.log("getSectionsList=====>", this.addSection); 1502 console.log("getSectionsList=====>", this.addSection);
1490 }) 1503 })
1491 .catch(err => { 1504 .catch(err => {
1492 console.log("err====>", err); 1505 console.log("err====>", err);
1493 this.showLoader = false; 1506 this.showLoader = false;
1494 }); 1507 });
1495 }, 1508 },
1496 getSections(_id) { 1509 getSections(_id) {
1497 var token = this.$store.state.token; 1510 var token = this.$store.state.token;
1498 http() 1511 http()
1499 .get( 1512 .get(
1500 "/getSectionsList", 1513 "/getSectionsList",
1501 { params: { classId: _id } }, 1514 { params: { classId: _id } },
1502 { 1515 {
1503 headers: { Authorization: "Bearer " + token } 1516 headers: { Authorization: "Bearer " + token }
1504 } 1517 }
1505 ) 1518 )
1506 .then(response => { 1519 .then(response => {
1507 this.addSection = response.data.data; 1520 this.addSection = response.data.data;
1508 console.log("getSectionsList=====>", this.addSection); 1521 console.log("getSectionsList=====>", this.addSection);
1509 }) 1522 })
1510 .catch(err => { 1523 .catch(err => {
1511 // console.log("err====>", err); 1524 // console.log("err====>", err);
1512 // this.$router.replace({ path: '/' }); 1525 // this.$router.replace({ path: '/' });
1513 }); 1526 });
1514 }, 1527 },
1528 getSection(_id) {
1529 var token = this.$store.state.token;
1530 http()
1531 .get(
1532 "/getSectionsList",
1533 { params: { classId: _id } },
1534 {
1535 headers: { Authorization: "Bearer " + token }
1536 }
1537 )
1538 .then(response => {
1539 this.addSection = response.data.data;
1540 console.log("getSectionsList=====>", this.addSection);
1541 })
1542 .catch(err => {
1543 // console.log("err====>", err);
1544 // this.$router.replace({ path: '/' });
1545 });
1546 },
1515 pickFile() { 1547 pickFile() {
1516 this.$refs.image.click(); 1548 this.$refs.image.click();
1517 }, 1549 },
1518 dates: function(date) { 1550 dates: function(date) {
1519 return moment(date).format("MMMM DD, YYYY"); 1551 return moment(date).format("MMMM DD, YYYY");
1520 }, 1552 },
1521 onFilePicked(e) { 1553 onFilePicked(e) {
1522 // console.log(e) 1554 // console.log(e)
1523 const files = e.target.files; 1555 const files = e.target.files;
1524 this.imageData.upload = e.target.files[0]; 1556 this.imageData.upload = e.target.files[0];
1525 if (files[0] !== undefined) { 1557 if (files[0] !== undefined) {
1526 this.imageName = files[0].name; 1558 this.imageName = files[0].name;
1527 if (this.imageName.lastIndexOf(".") <= 0) { 1559 if (this.imageName.lastIndexOf(".") <= 0) {
1528 return; 1560 return;
1529 } 1561 }
1530 const fr = new FileReader(); 1562 const fr = new FileReader();
1531 fr.readAsDataURL(files[0]); 1563 fr.readAsDataURL(files[0]);
1532 fr.addEventListener("load", () => { 1564 fr.addEventListener("load", () => {
1533 this.imageUrl = fr.result; 1565 this.imageUrl = fr.result;
1534 this.imageFile = files[0]; // this is an image file that can be sent to server... 1566 this.imageFile = files[0]; // this is an image file that can be sent to server...
1535 this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 1567 this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
1536 console.log("upload=======>", this.imageData.imageUrl); 1568 console.log("upload=======>", this.imageData.imageUrl);
1537 console.log("imageFile", this.imageFile); 1569 console.log("imageFile", this.imageFile);
1538 }); 1570 });
1539 } else { 1571 } else {
1540 this.imageName = ""; 1572 this.imageName = "";
1541 this.imageFile = ""; 1573 this.imageFile = "";
1542 this.imageUrl = ""; 1574 this.imageUrl = "";
1543 } 1575 }
1544 }, 1576 },
1545 // getStudentList() { 1577 // getStudentList() {
1546 // this.showLoader = true; 1578 // this.showLoader = true;
1547 // var token = this.$store.state.token; 1579 // var token = this.$store.state.token;
1548 // http() 1580 // http()
1549 // .get("/getStudentsList", { 1581 // .get("/getStudentsList", {
1550 // headers: { Authorization: "Bearer " + token } 1582 // headers: { Authorization: "Bearer " + token }
1551 // }) 1583 // })
1552 // .then(response => { 1584 // .then(response => {
1553 // this.desserts = response.data.data; 1585 // this.desserts = response.data.data;
1554 // this.showLoader = false; 1586 // this.showLoader = false;
1555 // // console.log("getStudentList=====>",this.desserts) 1587 // // console.log("getStudentList=====>",this.desserts)
1556 // }) 1588 // })
1557 // .catch(err => { 1589 // .catch(err => {
1558 // // console.log("err====>", err); 1590 // // console.log("err====>", err);
1559 // this.showLoader = false; 1591 // this.showLoader = false;
1560 // this.$router.replace({ path: "/" }); 1592 // this.$router.replace({ path: "/" });
1561 // }); 1593 // });
1562 // }, 1594 // },
1563 editItem(item) { 1595 editItem(item) {
1564 this.editedIndex = this.desserts.indexOf(item); 1596 this.editedIndex = this.desserts.indexOf(item);
1565 this.editedItem = Object.assign({}, item); 1597 this.editedItem = Object.assign({}, item);
1566 this.editedItem.dob = this.editedItem.dob.substring(0, 10) 1598 this.editedItem.dob = this.editedItem.dob.substring(0, 10)
1567 this.dialog = true; 1599 this.dialog = true;
1568 }, 1600 },
1569 profile(item) { 1601 profile(item) {
1570 this.editedIndex = this.desserts.indexOf(item); 1602 this.editedIndex = this.desserts.indexOf(item);
1571 this.editedItem = Object.assign({}, item); 1603 this.editedItem = Object.assign({}, item);
1572 this.dialog1 = true; 1604 this.dialog1 = true;
1573 }, 1605 },
1574 // report(item) { 1606 // report(item) {
1575 // this.editedIndex = this.desserts.indexOf(item); 1607 // this.editedIndex = this.desserts.indexOf(item);
1576 // this.editedItem = Object.assign({}, item); 1608 // this.editedItem = Object.assign({}, item);
1577 // this.dialog2 = true; 1609 // this.dialog2 = true;
1578 // }, 1610 // },
1579 1611
1580 deleteItem(item) { 1612 deleteItem(item) {
1581 let deleteStudent = { 1613 let deleteStudent = {
1582 studentId: item._id 1614 studentId: item._id
1583 }; 1615 };
1584 http() 1616 http()
1585 .delete( 1617 .delete(
1586 "/deleteStudent", 1618 "/deleteStudent",
1587 confirm("Are you sure you want to delete this?") && { 1619 confirm("Are you sure you want to delete this?") && {
1588 params: deleteStudent 1620 params: deleteStudent
1589 } 1621 }
1590 ) 1622 )
1591 .then(response => { 1623 .then(response => {
1592 // console.log("deleteUers",deleteStudent) 1624 // console.log("deleteUers",deleteStudent)
1593 if ((this.snackbar = true)) { 1625 if ((this.snackbar = true)) {
1594 this.text = "Successfully delete Existing Student"; 1626 this.text = "Successfully delete Existing Student";
1595 } 1627 }
1596 this.getStudentList(); 1628 this.getStudentList();
1597 }) 1629 })
1598 .catch(error => { 1630 .catch(error => {
1599 // console.log(error); 1631 // console.log(error);
1600 }); 1632 });
1601 }, 1633 },
1602 activeTab(type) { 1634 activeTab(type) {
1603 switch (type) { 1635 switch (type) {
1604 case "existing": 1636 case "existing":
1605 this.newActive = false; 1637 this.newActive = false;
1606 this.isActive = true; 1638 this.isActive = true;
1607 break; 1639 break;
1608 1640
1609 default: 1641 default:
1610 this.newActive = true; 1642 this.newActive = true;
1611 this.isActive = false; 1643 this.isActive = false;
1612 break; 1644 break;
1613 } 1645 }
1614 }, 1646 },
1615 close() { 1647 close() {
1616 this.dialog = false; 1648 this.dialog = false;
1617 setTimeout(() => { 1649 setTimeout(() => {
1618 this.editedItem = Object.assign({}, this.defaultItem); 1650 this.editedItem = Object.assign({}, this.defaultItem);
1619 this.editedIndex = -1; 1651 this.editedIndex = -1;
1620 }, 300); 1652 }, 300);
1621 }, 1653 },
1622 close1() { 1654 close1() {
1623 this.dialog1 = false; 1655 this.dialog1 = false;
1624 }, 1656 },
1625 // close2() { 1657 // close2() {
1626 // this.dialog2 = false; 1658 // this.dialog2 = false;
1627 // }, 1659 // },
1628 submit() { 1660 submit() {
1629 if (this.$refs.form.validate()) { 1661 if (this.$refs.form.validate()) {
1630 let imageData = new FormData();
1631 imageData.append("upload", this.imageFile);
1632 console.log(imageData);
1633 let addStudent = { 1662 let addStudent = {
1634 name: this.addStudents.name, 1663 name: this.addStudents.name,
1635 email: this.addStudents.email, 1664 email: this.addStudents.email,
1636 role: this.addStudents.role, 1665 role: this.addStudents.role,
1637 dob: this.addStudents.date, 1666 dob: this.addStudents.date,
1638 city: this.addStudents.city, 1667 city: this.addStudents.city,
1639 pincode: this.addStudents.pincode, 1668 pincode: this.addStudents.pincode,
1640 country: this.addStudents.country, 1669 country: this.addStudents.country,
1641 permanentAddress: this.addStudents.permanentAddress, 1670 permanentAddress: this.addStudents.permanentAddress,
1642 presentAddress: this.addStudents.presentAddress, 1671 presentAddress: this.addStudents.presentAddress,
1643 mobile: this.addStudents.mobile, 1672 mobile: this.addStudents.mobile,
1644 state: this.addStudents.state, 1673 state: this.addStudents.state,
1645 gender: this.addStudents.gender, 1674 gender: this.addStudents.gender,
1646 fatherName: this.addStudents.fatherName, 1675 fatherName: this.addStudents.fatherName,
1647 fatherCellNo: this.addStudents.fatherCellNo, 1676 fatherCellNo: this.addStudents.fatherCellNo,
1648 motherName: this.addStudents.motherName, 1677 motherName: this.addStudents.motherName,
1649 motherCellNo: this.addStudents.motherCellNo, 1678 motherCellNo: this.addStudents.motherCellNo,
1650 establishmentYear: this.addStudents.establishmentYear, 1679 establishmentYear: this.addStudents.establishmentYear,
1651 classId: this.addStudents.select, 1680 classId: this.addStudents.select,
1652 sectionId: this.addStudents.selectSection, 1681 sectionId: this.addStudents.selectSection,
1653 imageData 1682 upload:this.imageUrl
1654 // upload:this.imageFile
1655 }; 1683 };
1656 this.loading = true; 1684 this.loading = true;
1657 http() 1685 http()
1658 .post("/createStudent", addStudent) 1686 .post("/createStudent", addStudent)
1659 .then(response => { 1687 .then(response => {
1660 // console.log(addStudent) 1688 // console.log(addStudent)
1661 if ((this.snackbar = true)) { 1689 if ((this.snackbar = true)) {
1662 this.text = "New Student added successfully"; 1690 this.text = "New Student added successfully";
1663 } 1691 }
1664 // this.getStudentList(); 1692 // this.getStudentList();
1665 this.clear(); 1693 this.clear();
1666 this.loading = false; 1694 this.loading = false;
1667 }) 1695 })
1668 .catch(error => { 1696 .catch(error => {
1669 // console.log(error); 1697 // console.log(error);
1670 if ((this.snackbar = true)) { 1698 if ((this.snackbar = true)) {
1671 this.text = error.response.data.message; 1699 this.text = error.response.data.message;
1672 } 1700 }
1673 this.loading = false; 1701 this.loading = false;
1674 }); 1702 });
1675 } 1703 }
1676 }, 1704 },
1677 mail() {}, 1705 mail() {},
1678 download() {}, 1706 download() {},
1679 clear() { 1707 clear() {
1680 this.$refs.form.reset(); 1708 this.$refs.form.reset();
1681 }, 1709 },
1682 save() { 1710 save() {
1683 let imageData = new FormData();
1684 imageData.append("upload", this.imageFile);
1685 console.log(imageData);
1686 let editStudent = { 1711 let editStudent = {
1687 studentId:this.editedItem._id, 1712 studentId:this.editedItem._id,
1688 name: this.editedItem.name, 1713 name: this.editedItem.name,
1689 email: this.editedItem.email, 1714 email: this.editedItem.email,
1690 role: this.editedItem.role, 1715 role: this.editedItem.role,
1691 dob: this.editedItem.dob, 1716 dob: this.editedItem.dob,
1692 city: this.editedItem.city, 1717 city: this.editedItem.city,
1693 pincode: this.editedItem.pincode, 1718 pincode: this.editedItem.pincode,
1694 country: this.editedItem.country, 1719 country: this.editedItem.country,
1695 permanentAddress: this.editedItem.permanentAddress, 1720 permanentAddress: this.editedItem.permanentAddress,
1696 presentAddress: this.editedItem.presentAddress, 1721 presentAddress: this.editedItem.presentAddress,
1697 mobile: this.editedItem.mobile, 1722 mobile: this.editedItem.mobile,
1698 state: this.editedItem.state, 1723 state: this.editedItem.state,
1699 gender: this.editedItem.gender, 1724 gender: this.editedItem.gender,
1700 fatherName: this.editedItem.fatherName, 1725 fatherName: this.editedItem.fatherName,
1701 fatherCellNo: this.editedItem.fatherCellNo, 1726 fatherCellNo: this.editedItem.fatherCellNo,
1702 motherName: this.editedItem.motherName, 1727 motherName: this.editedItem.motherName,
1703 motherCellNo: this.editedItem.motherCellNo, 1728 motherCellNo: this.editedItem.motherCellNo,
1704 establishmentYear: this.editedItem.establishmentYear, 1729 establishmentYear: this.editedItem.establishmentYear,
1705 classId: this.editedItem.select, 1730 classId: this.editedItem.select,
1706 sectionId: this.editedItem.selectSection, 1731 sectionId: this.editedItem.selectSection,
1707 imageData 1732 upload:this.imageUrl
1708 }; 1733 };
1709 http() 1734 http()
1710 .put("/updateStudent", editStudent) 1735 .put("/updateStudent", editStudent)
1711 .then(response => { 1736 .then(response => {
1712 // console.log("editStudent",editStudent); 1737 // console.log("editStudent",editStudent);
1713 if ((this.snackbar = true)) { 1738 if ((this.snackbar = true)) {
1714 this.text = "Successfully Student Existing User"; 1739 this.text = "Successfully Student Existing User";
1715 } 1740 }
1716 this.findStudents(); 1741 this.findStudents();
1717 }) 1742 })
1718 .catch(error => { 1743 .catch(error => {
1719 // console.log(error); 1744 // console.log(error);
1720 }); 1745 });
1721 this.close(); 1746 this.close();
1722 }, 1747 },
1723 handleDrawerToggle() { 1748 handleDrawerToggle() {
1724 window.getApp.$emit("APP_DRAWER_TOGGLED"); 1749 window.getApp.$emit("APP_DRAWER_TOGGLED");
1725 }, 1750 },
1726 handleFullScreen() { 1751 handleFullScreen() {
1727 Util.toggleFullScreen(); 1752 Util.toggleFullScreen();
1728 } 1753 }
1729 }, 1754 },
1730 mounted() { 1755 mounted() {
1731 // this.getStudentList(); 1756 // this.getStudentList();
1732 var token = this.$store.state.token; 1757 var token = this.$store.state.token;
1733 http() 1758 http()
1734 .get("/getClassesList", { 1759 .get("/getClassesList", {
1735 headers: { Authorization: "Bearer " + token } 1760 headers: { Authorization: "Bearer " + token }
1736 }) 1761 })
1737 .then(response => { 1762 .then(response => {
1738 this.addclass = response.data.data; 1763 this.addclass = response.data.data;
1739 // console.log("getClassesList=====>",this.addclass) 1764 // console.log("getClassesList=====>",this.addclass)
1740 }) 1765 })
1741 .catch(err => { 1766 .catch(err => {
1742 // console.log("err====>", err); 1767 // console.log("err====>", err);
1743 this.$router.replace({ path: "/" }); 1768 this.$router.replace({ path: "/" });
1744 }); 1769 });
1745 }, 1770 },
1746 1771
1747 // console.log("Id",this.$store.state.id) 1772 // console.log("Id",this.$store.state.id)
1748 // console.log("token",this.$store.state.token) 1773 // console.log("token",this.$store.state.token)
1749 computed: { 1774 computed: {
1750 toolbarColor() { 1775 toolbarColor() {
1751 return this.$vuetify.options.extra.mainNav; 1776 return this.$vuetify.options.extra.mainNav;
1752 } 1777 }
1753 } 1778 }
1754 }; 1779 };
1755 </script> 1780 </script>
1756 <style scoped> 1781 <style scoped>
1757 .v-tabs__div { 1782 .v-tabs__div {
1758 text-transform: none; 1783 text-transform: none;
1759 } 1784 }
1760 .v-input__prepend-outer { 1785 .v-input__prepend-outer {
1761 margin-right: 0px !important; 1786 margin-right: 0px !important;
1762 } 1787 }
1763 .v-card__actions .v-btn { 1788 .v-card__actions .v-btn {
1764 margin: 0 15px; 1789 margin: 0 15px;
1765 min-width: 120px; 1790 min-width: 120px;
1766 } 1791 }
1767 .primary { 1792 .primary {
1768 background-color: #aaa !important; 1793 background-color: #aaa !important;
1769 border-color: #aaa !important; 1794 border-color: #aaa !important;
1770 } 1795 }
1771 h4 { 1796 h4 {
1772 background-repeat: no-repeat; 1797 background-repeat: no-repeat;
1773 padding: 8px; 1798 padding: 8px;
1774 margin: auto; 1799 margin: auto;
1775 font-size: 25px; 1800 font-size: 25px;
1776 } 1801 }
1777 #name { 1802 #name {
1778 position: absolute; 1803 position: absolute;
1779 left: 100px; 1804 left: 100px;
1780 top: 17px; 1805 top: 17px;
1781 } 1806 }
1782 #icon { 1807 #icon {
1783 position: absolute; 1808 position: absolute;
1784 right: 8px; 1809 right: 8px;
1785 top: 8px; 1810 top: 8px;
1786 } 1811 }
1787 #m { 1812 #m {
1788 position: relative; 1813 position: relative;
1789 left: 135px; 1814 left: 135px;
1790 top: -15px; 1815 top: -15px;
1791 } 1816 }
1792 #G { 1817 #G {
1793 position: absolute; 1818 position: absolute;
1794 top: 38px; 1819 top: 38px;
1795 color: white; 1820 color: white;
1796 } 1821 }
1797 #bt { 1822 #bt {
1798 position: relative; 1823 position: relative;
1799 top: -20px; 1824 top: -20px;
1800 left: 115px; 1825 left: 115px;
1801 } 1826 }
1802 #e { 1827 #e {
1803 position: relative; 1828 position: relative;
1804 top: 5px; 1829 top: 5px;
1805 right: -30px; 1830 right: -30px;
1806 height: 17px; 1831 height: 17px;
1807 cursor: pointer; 1832 cursor: pointer;
1808 } 1833 }
1809 #d { 1834 #d {
1810 position: relative; 1835 position: relative;
1811 top: 5px; 1836 top: 5px;
1812 right: -70px; 1837 right: -70px;
1813 height: 17px; 1838 height: 17px;
1814 cursor: pointer; 1839 cursor: pointer;
1815 } 1840 }
1816 #td { 1841 #td {
1817 border: 1px solid #dddddd; 1842 border: 1px solid #dddddd;
1818 text-align: left; 1843 text-align: left;
1819 padding: 8px; 1844 padding: 8px;
1820 } 1845 }
1821 #dialog { 1846 #dialog {
1822 height: 550px; 1847 height: 550px;
1823 } 1848 }
1824 .active { 1849 .active {
1825 background-color: black; 1850 background-color: black;
1826 color: white !important; 1851 color: white !important;
1827 } 1852 }
1828 .activebtn { 1853 .activebtn {
1829 color: black !important; 1854 color: black !important;
1830 } 1855 }
1831 #flex { 1856 #flex {
1832 height: 300px; 1857 height: 300px;
1833 } 1858 }
1834 .top { 1859 .top {
1835 margin-top: 100px; 1860 margin-top: 100px;
1836 } 1861 }
1837 .v-tabs__item a { 1862 .v-tabs__item a {
1838 font-size: 16px !important; 1863 font-size: 16px !important;
1839 } 1864 }
1840 @media screen and (max-width: 769px) { 1865 @media screen and (max-width: 769px) {
1841 .top { 1866 .top {
1842 margin-top: 0 !important; 1867 margin-top: 0 !important;
1843 } 1868 }
1844 .userSearch .v-icon { 1869 .userSearch .v-icon {
1845 font-size: 20px !important; 1870 font-size: 20px !important;
1846 margin-left: 20px; 1871 margin-left: 20px;
1847 } 1872 }
1848 } 1873 }
1849 @media screen and (max-width: 380px) { 1874 @media screen and (max-width: 380px) {
1850 .pl-3 { 1875 .pl-3 {
1851 padding-left: 0px !important; 1876 padding-left: 0px !important;
1852 } 1877 }
1853 .right { 1878 .right {
1854 float: none !important; 1879 float: none !important;
1855 } 1880 }
1856 .subheading { 1881 .subheading {
1857 font-size: 14px !important; 1882 font-size: 14px !important;
1858 } 1883 }
1859 .v-card__actions .v-btn { 1884 .v-card__actions .v-btn {
1860 margin: 0 0px; 1885 margin: 0 0px;
1861 min-width: 100px; 1886 min-width: 100px;
1862 } 1887 }
1863 /* .searchIcon .v-icon { 1888 /* .searchIcon .v-icon {
1864 font-size: 20px; 1889 font-size: 20px;
1865 margin-left: 20px; 1890 margin-left: 20px;
1866 } */ 1891 } */
1867 .subheading { 1892 .subheading {
1868 font-size: 12px !important; 1893 font-size: 12px !important;
1869 } 1894 }
1870 h5 { 1895 h5 {
1871 font-size: 13px; 1896 font-size: 13px;
1872 } 1897 }
1873 } 1898 }
1874 .v-icon { 1899 .v-icon {
1875 font-size: 30px; 1900 font-size: 30px;
1876 } 1901 }
1877 @media screen and (min-width: 1270px) { 1902 @media screen and (min-width: 1270px) {
1878 .hide { 1903 .hide {
1879 display: none; 1904 display: none;
1880 } 1905 }
1881 /* } 1906 /* }
1882 @media screen and (max-width: 962px) { 1907 @media screen and (max-width: 962px) {
src/pages/Teachers/teachers.vue
Diff comments   View file @79006bd
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" scrollable>
74 <v-flex xs12 sm12 class="my-4"> 74 <v-card flat>
75 <v-toolbar color="grey lighten-2"> 75 <v-toolbar color="grey lighten-2" flat>
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-text style="height: 800px;">
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="160px">
89 <img src="/static/icon/user.png" v-if="!imageUrl"> 89 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl">
90 <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl && !imageUrl">
91 <img
92
93 v-if="imageUrl"
94 :src="imageUrl"
95 height="150"
96 style="border-radius:50%; width:200px"
97 >
90 </v-avatar> 98 </v-avatar>
91 <input 99 <input
92 type="file" 100 type="file"
93 style="display:none" 101 style="display:none"
94 ref="image" 102 ref="image"
95 accept="image/*" 103 accept="image/*"
96 @change="onFilePicked" 104 @change="onFilePicked"
97 > 105 >
98 <img
99 v-if="imageUrl"
100 :src="imageUrl"
101 height="150"
102 style="border-radius:50%; width:200px"
103 >
104 </v-flex> 106 </v-flex>
105 </v-layout> 107 </v-layout>
106 <v-layout> 108 <v-layout>
107 <v-flex xs12 sm6> 109 <v-flex xs12 sm6>
108 <v-layout> 110 <v-layout>
109 <v-flex xs4 class="pt-4 subheading"> 111 <v-flex xs4 class="pt-4 subheading">
110 <label class="right">Full Name:</label> 112 <label class="right">Full Name:</label>
111 </v-flex> 113 </v-flex>
112 <v-flex xs8 class="ml-3"> 114 <v-flex xs8 class="ml-3">
113 <v-text-field 115 <v-text-field
114 v-model="editedItem.name" 116 v-model="editedItem.name"
115 placeholder="fill your full Name" 117 placeholder="fill your full Name"
116 name="name" 118 name="name"
117 type="text" 119 type="text"
118 required 120 required
119 ></v-text-field> 121 ></v-text-field>
120 </v-flex> 122 </v-flex>
121 </v-layout> 123 </v-layout>
122 </v-flex> 124 </v-flex>
123 <v-flex xs12 sm6> 125 <v-flex xs12 sm6>
124 <v-layout> 126 <v-layout>
125 <v-flex xs4 class="pt-4 subheading"> 127 <v-flex xs4 class="pt-4 subheading">
126 <label class="right">Email ID:</label> 128 <label class="right">Email ID:</label>
127 </v-flex> 129 </v-flex>
128 <v-flex xs8 class="ml-3"> 130 <v-flex xs8 class="ml-3">
129 <v-text-field 131 <v-text-field
130 placeholder="fill your email" 132 placeholder="fill your email"
131 v-model="editedItem.email" 133 v-model="editedItem.email"
132 type="text" 134 type="text"
133 name="email" 135 name="email"
134 required 136 required
135 ></v-text-field> 137 ></v-text-field>
136 </v-flex> 138 </v-flex>
137 </v-layout> 139 </v-layout>
138 </v-flex> 140 </v-flex>
139 </v-layout> 141 </v-layout>
140 <v-layout> 142 <v-layout>
141 <v-flex xs12 sm6> 143 <v-flex xs12 sm6>
142 <v-layout> 144 <v-layout>
143 <v-flex xs4 class="pt-4 subheading"> 145 <v-flex xs4 class="pt-4 subheading">
144 <label class="right">Date of Birth:</label> 146 <label class="right">Date of Birth:</label>
145 </v-flex> 147 </v-flex>
146 <v-flex xs8 class="ml-3"> 148 <v-flex xs8 class="ml-3">
147 <v-menu 149 <v-menu
148 ref="menu" 150 ref="menu"
149 :close-on-content-click="false" 151 :close-on-content-click="false"
150 v-model="menu2" 152 v-model="menu2"
151 :nudge-right="40" 153 :nudge-right="40"
152 lazy 154 lazy
153 transition="scale-transition" 155 transition="scale-transition"
154 offset-y 156 offset-y
155 full-width 157 full-width
156 min-width="290px" 158 min-width="290px"
157 > 159 >
158 <v-text-field 160 <v-text-field
159 slot="activator" 161 slot="activator"
160 v-model="editedItem.dob" 162 v-model="editedItem.dob"
161 placeholder="Select date" 163 placeholder="Select date"
162 ></v-text-field> 164 ></v-text-field>
163 <v-date-picker 165 <v-date-picker
164 ref="picker" 166 ref="picker"
165 v-model="editedItem.dob" 167 v-model="editedItem.dob"
166 :max="new Date().toISOString().substr(0, 10)" 168 :max="new Date().toISOString().substr(0, 10)"
167 min="1950-01-01" 169 min="1950-01-01"
168 @input="menu2 = false" 170 @input="menu2 = false"
169 ></v-date-picker> 171 ></v-date-picker>
170 </v-menu> 172 </v-menu>
171 </v-flex> 173 </v-flex>
172 </v-layout> 174 </v-layout>
173 </v-flex> 175 </v-flex>
174 <v-flex xs12 sm6> 176 <v-flex xs12 sm6>
175 <v-layout> 177 <v-layout>
176 <v-flex xs4 class="pt-4 subheading"> 178 <v-flex xs4 class="pt-4 subheading">
177 <label class="right">City:</label> 179 <label class="right">City:</label>
178 </v-flex> 180 </v-flex>
179 <v-flex xs8 class="ml-3"> 181 <v-flex xs8 class="ml-3">
180 <v-text-field 182 <v-text-field
181 v-model="editedItem.city" 183 v-model="editedItem.city"
182 placeholder="fill your City Name" 184 placeholder="fill your City Name"
183 name="City" 185 name="City"
184 type="text" 186 type="text"
185 required 187 required
186 ></v-text-field> 188 ></v-text-field>
187 </v-flex> 189 </v-flex>
188 </v-layout> 190 </v-layout>
189 </v-flex> 191 </v-flex>
190 </v-layout> 192 </v-layout>
191 <v-layout> 193 <v-layout>
192 <v-flex xs12 sm6> 194 <v-flex xs12 sm6>
193 <v-layout> 195 <v-layout>
194 <v-flex xs4 class="pt-4 subheading"> 196 <v-flex xs4 class="pt-4 subheading">
195 <label class="right">State:</label> 197 <label class="right">State:</label>
196 </v-flex> 198 </v-flex>
197 <v-flex xs8 class="ml-3"> 199 <v-flex xs8 class="ml-3">
198 <v-text-field 200 <v-text-field
199 v-model="editedItem.state" 201 v-model="editedItem.state"
200 placeholder="fill your State Name" 202 placeholder="fill your State Name"
201 name="state" 203 name="state"
202 type="text" 204 type="text"
203 required 205 required
204 ></v-text-field> 206 ></v-text-field>
205 </v-flex> 207 </v-flex>
206 </v-layout> 208 </v-layout>
207 </v-flex> 209 </v-flex>
208 <v-flex xs12 sm6> 210 <v-flex xs12 sm6>
209 <v-layout> 211 <v-layout>
210 <v-flex xs4 class="pt-4 subheading"> 212 <v-flex xs4 class="pt-4 subheading">
211 <label class="right">PinCode:</label> 213 <label class="right">PinCode:</label>
212 </v-flex> 214 </v-flex>
213 <v-flex xs8 class="ml-3"> 215 <v-flex xs8 class="ml-3">
214 <v-text-field 216 <v-text-field
215 v-model="editedItem.pincode" 217 v-model="editedItem.pincode"
216 placeholder="fill your pincode" 218 placeholder="fill your pincode"
217 name="pincode" 219 name="pincode"
218 type="number" 220 type="number"
219 required 221 required
220 ></v-text-field> 222 ></v-text-field>
221 </v-flex> 223 </v-flex>
222 </v-layout> 224 </v-layout>
223 </v-flex> 225 </v-flex>
224 </v-layout> 226 </v-layout>
225 <v-layout> 227 <v-layout>
226 <v-flex xs12 sm6> 228 <v-flex xs12 sm6>
227 <v-layout> 229 <v-layout>
228 <v-flex xs4 class="pt-4 subheading"> 230 <v-flex xs4 class="pt-4 subheading">
229 <label class="right">Mobile NO:</label> 231 <label class="right">Mobile NO:</label>
230 </v-flex> 232 </v-flex>
231 <v-flex xs8 class="ml-3"> 233 <v-flex xs8 class="ml-3">
232 <v-text-field 234 <v-text-field
233 v-model="editedItem.mobileNo" 235 v-model="editedItem.mobileNo"
234 placeholder="fill your MobileNo" 236 placeholder="fill your MobileNo"
235 name="mobileNo" 237 name="mobileNo"
236 type="number" 238 type="number"
237 required 239 required
238 ></v-text-field> 240 ></v-text-field>
239 </v-flex> 241 </v-flex>
240 </v-layout> 242 </v-layout>
241 </v-flex> 243 </v-flex>
242 <v-flex xs12 sm6> 244 <v-flex xs12 sm6>
243 <v-layout> 245 <v-layout>
244 <v-flex xs4 class="pt-4 subheading"> 246 <v-flex xs4 class="pt-4 subheading">
245 <label class="right">Select Country:</label> 247 <label class="right">Select Country:</label>
246 </v-flex> 248 </v-flex>
247 <v-flex xs8 class="ml-3"> 249 <v-flex xs8 class="ml-3">
248 <v-autocomplete 250 <v-autocomplete
249 v-model="editedItem.country" 251 v-model="editedItem.country"
250 :items="countries" 252 :items="countries"
251 placeholder="Select Country Name" 253 placeholder="Select Country Name"
252 required 254 required
253 ></v-autocomplete> 255 ></v-autocomplete>
254 </v-flex> 256 </v-flex>
255 </v-layout> 257 </v-layout>
256 </v-flex> 258 </v-flex>
257 </v-layout> 259 </v-layout>
258 <v-layout> 260 <v-layout>
259 <v-flex xs12 sm6> 261 <v-flex xs12 sm6>
260 <v-layout> 262 <v-layout>
261 <v-flex xs4 class="pt-4 subheading"> 263 <v-flex xs4 class="pt-4 subheading">
262 <label class="right">Join Date:</label> 264 <label class="right">Join Date:</label>
263 </v-flex> 265 </v-flex>
264 <v-flex xs8 class="ml-3"> 266 <v-flex xs8 class="ml-3">
265 <v-menu 267 <v-menu
266 ref="menu" 268 ref="menu"
267 :close-on-content-click="false" 269 :close-on-content-click="false"
268 v-model="menu3" 270 v-model="menu3"
269 :nudge-right="40" 271 :nudge-right="40"
270 lazy 272 lazy
271 transition="scale-transition" 273 transition="scale-transition"
272 offset-y 274 offset-y
273 full-width 275 full-width
274 min-width="290px" 276 min-width="290px"
275 > 277 >
276 <v-text-field 278 <v-text-field
277 slot="activator" 279 slot="activator"
278 v-model="editedItem.joinDate" 280 v-model="editedItem.joinDate"
279 placeholder="Select date" 281 placeholder="Select date"
280 ></v-text-field> 282 ></v-text-field>
281 <v-date-picker 283 <v-date-picker
282 ref="picker" 284 ref="picker"
283 v-model="editedItem.joinDate" 285 v-model="editedItem.joinDate"
284 :max="new Date().toISOString().substr(0, 10)" 286 :max="new Date().toISOString().substr(0, 10)"
285 min="1950-01-01" 287 min="1950-01-01"
286 @input="menu3 = false" 288 @input="menu3 = false"
287 ></v-date-picker> 289 ></v-date-picker>
288 </v-menu> 290 </v-menu>
289 </v-flex> 291 </v-flex>
290 </v-layout> 292 </v-layout>
291 </v-flex> 293 </v-flex>
292 <v-flex xs12 sm6> 294 <v-flex xs12 sm6>
293 <v-layout> 295 <v-layout>
294 <v-flex xs4 class="pt-4 subheading"> 296 <v-flex xs4 class="pt-4 subheading">
295 <label class="right">Uplaod Image:</label> 297 <label class="right">Uplaod Image:</label>
296 </v-flex> 298 </v-flex>
297 <v-flex xs8 class="ml-3"> 299 <v-flex xs8 class="ml-3">
298 <v-text-field 300 <v-text-field
299 label="Select Image" 301 label="Select Image"
300 @click="pickFile" 302 @click="pickFile"
301 v-model="imageName" 303 v-model="imageName"
302 append-icon="attach_file" 304 append-icon="attach_file"
303 ></v-text-field> 305 ></v-text-field>
304 </v-flex> 306 </v-flex>
305 </v-layout> 307 </v-layout>
306 </v-flex> 308 </v-flex>
307 </v-layout> 309 </v-layout>
308 <v-layout> 310 <v-layout>
309 <v-flex xs12 sm12> 311 <v-flex xs12 sm12>
310 <v-layout> 312 <v-layout>
311 <v-flex xs3 class="pt-4 subheading pl-3" style="max-width: 17%;"> 313 <v-flex xs3 class="pt-4 subheading pl-3" style="max-width: 17%;">
312 <label class>Present Address:</label> 314 <label class>Present Address:</label>
313 </v-flex> 315 </v-flex>
314 <v-flex xs12> 316 <v-flex xs12>
315 <v-text-field 317 <v-text-field
316 name="input-4-3" 318 name="input-4-3"
317 v-model="editedItem.presentAddress" 319 v-model="editedItem.presentAddress"
318 placeholder="fill Your present Address" 320 placeholder="fill Your present Address"
319 required 321 required
320 ></v-text-field> 322 ></v-text-field>
321 </v-flex> 323 </v-flex>
322 </v-layout> 324 </v-layout>
323 </v-flex> 325 </v-flex>
324 <v-flex xs12 sm12> 326 <v-flex xs12 sm12>
325 <v-layout> 327 <v-layout>
326 <v-flex xs3 class="pt-4 subheading" style="max-width: 17%;"> 328 <v-flex xs3 class="pt-4 subheading" style="max-width: 17%;">
327 <label>Permanent Address:</label> 329 <label>Permanent Address:</label>
328 </v-flex> 330 </v-flex>
329 <v-flex xs12> 331 <v-flex xs12>
330 <v-text-field 332 <v-text-field
331 name="input-4-3" 333 name="input-4-3"
332 v-model="editedItem.permanentAddress" 334 v-model="editedItem.permanentAddress"
333 placeholder="fill Your Permanent Address" 335 placeholder="fill Your Permanent Address"
334 required 336 required
335 ></v-text-field> 337 ></v-text-field>
336 </v-flex> 338 </v-flex>
337 </v-layout> 339 </v-layout>
338 </v-flex> 340 </v-flex>
339 </v-layout> 341 </v-layout>
340 <v-layout> 342 <v-layout>
341 <v-flex xs12 sm12> 343 <v-flex xs12 sm12>
342 <v-card-actions> 344 <v-card-actions>
343 <v-btn round dark @click.native="close">Cancel</v-btn> 345 <v-btn round dark @click.native="close">Cancel</v-btn>
344 <v-spacer></v-spacer> 346 <v-spacer></v-spacer>
345 <v-btn round dark @click="save">Save</v-btn> 347 <v-btn round dark @click="save">Save</v-btn>
346 </v-card-actions> 348 </v-card-actions>
347 </v-flex> 349 </v-flex>
348 </v-layout> 350 </v-layout>
349 </v-container> 351 </v-container>
350 </v-form> 352 </v-form>
353 </v-card-text>
351 </v-card> 354 </v-card>
352 </v-flex>
353 </v-dialog> 355 </v-dialog>
354 356
355 <!-- ****** PROFILE VIEW TEACHERS DETAILS ****** --> 357 <!-- ****** PROFILE VIEW TEACHERS DETAILS ****** -->
356 358
357 <v-dialog v-model="dialog1" max-width="600px"> 359 <v-dialog v-model="dialog1" max-width="600px" scrollable>
358 <v-toolbar color="grey lighten-2"> 360 <v-card>
361 <v-toolbar color="grey lighten-2" flat>
359 <v-spacer></v-spacer> 362 <v-spacer></v-spacer>
360 <v-toolbar-title><h3>Teacher Profile</h3></v-toolbar-title> 363 <v-toolbar-title><h3>Teacher Profile</h3></v-toolbar-title>
361 <v-spacer></v-spacer> 364 <v-spacer></v-spacer>
362 <v-icon @click="close1">close</v-icon> 365 <v-icon @click="close1">close</v-icon>
363 </v-toolbar> 366 </v-toolbar>
364 <v-card> 367 <v-card-text style="height: 700px;">
365 <v-flex align-center justify-center layout text-xs-center>
366 <v-avatar size="50px" style="position:absolute; top:20px;">
367 <img src="/static/icon/user.png">
368 </v-avatar>
369 </v-flex>
370 <v-card-text>
371 <v-container grid-list-md> 368 <v-container grid-list-md>
372 <v-layout wrap> 369 <v-layout wrap>
373 <v-flex> 370 <v-flex>
374 <br> 371 <v-flex align-center justify-center layout text-xs-center>
375 <br> 372 <v-avatar size="160px">
373 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl">
374 <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl">
375 </v-avatar>
376 </v-flex>
376 <v-layout> 377 <v-layout>
377 <v-flex xs5 sm6> 378 <v-flex xs5 sm6>
378 <h5 class="right my-1">Full Name:</h5> 379 <h5 class="right my-1">Full Name:</h5>
379 </v-flex> 380 </v-flex>
380 <v-flex sm6 xs8> 381 <v-flex sm6 xs8>
381 <h5 class="my-1">{{ editedItem.name }}</h5> 382 <h5 class="my-1">{{ editedItem.name }}</h5>
382 </v-flex> 383 </v-flex>
383 </v-layout> 384 </v-layout>
384 <v-layout> 385 <v-layout>
385 <v-flex xs5 sm6> 386 <v-flex xs5 sm6>
386 <h5 class="right my-1">Email:</h5> 387 <h5 class="right my-1">Email:</h5>
387 </v-flex> 388 </v-flex>
388 <v-flex sm6 xs8> 389 <v-flex sm6 xs8>
389 <h5 class="my-1">{{ editedItem.email }}</h5> 390 <h5 class="my-1">{{ editedItem.email }}</h5>
390 </v-flex> 391 </v-flex>
391 </v-layout> 392 </v-layout>
392 <v-layout> 393 <v-layout>
393 <v-flex xs5 sm6> 394 <v-flex xs5 sm6>
394 <h5 class="right my-1">City:</h5> 395 <h5 class="right my-1">City:</h5>
395 </v-flex> 396 </v-flex>
396 <v-flex sm6 xs8> 397 <v-flex sm6 xs8>
397 <h5 class="my-1">{{ editedItem.city }}</h5> 398 <h5 class="my-1">{{ editedItem.city }}</h5>
398 </v-flex> 399 </v-flex>
399 </v-layout> 400 </v-layout>
400 <v-layout> 401 <v-layout>
401 <v-flex xs5 sm6> 402 <v-flex xs5 sm6>
402 <h5 class="right my-1">State:</h5> 403 <h5 class="right my-1">State:</h5>
403 </v-flex> 404 </v-flex>
404 <v-flex sm6 xs8> 405 <v-flex sm6 xs8>
405 <h5 class="my-1">{{ editedItem.state }}</h5> 406 <h5 class="my-1">{{ editedItem.state }}</h5>
406 </v-flex> 407 </v-flex>
407 </v-layout> 408 </v-layout>
408 <v-layout> 409 <v-layout>
409 <v-flex xs5 sm6> 410 <v-flex xs5 sm6>
410 <h5 class="right my-1">Country:</h5> 411 <h5 class="right my-1">Country:</h5>
411 </v-flex> 412 </v-flex>
412 <v-flex sm6 xs8> 413 <v-flex sm6 xs8>
413 <h5 class="my-1">{{ editedItem.country }}</h5> 414 <h5 class="my-1">{{ editedItem.country }}</h5>
414 </v-flex> 415 </v-flex>
415 </v-layout> 416 </v-layout>
416 <v-layout> 417 <v-layout>
417 <v-flex xs5 sm6> 418 <v-flex xs5 sm6>
418 <h5 class="right my-1">Pincode:</h5> 419 <h5 class="right my-1">Pincode:</h5>
419 </v-flex> 420 </v-flex>
420 <v-flex sm6 xs8> 421 <v-flex sm6 xs8>
421 <h5 class="my-1">{{ editedItem.pincode }}</h5> 422 <h5 class="my-1">{{ editedItem.pincode }}</h5>
422 </v-flex> 423 </v-flex>
423 </v-layout> 424 </v-layout>
424 <v-layout> 425 <v-layout>
425 <v-flex xs5 sm6> 426 <v-flex xs5 sm6>
426 <h5 class="right my-1">Mobile No:</h5> 427 <h5 class="right my-1">Mobile No:</h5>
427 </v-flex> 428 </v-flex>
428 <v-flex sm6 xs8> 429 <v-flex sm6 xs8>
429 <h5 class="my-1">{{ editedItem.mobileNo }}</h5> 430 <h5 class="my-1">{{ editedItem.mobileNo }}</h5>
430 </v-flex> 431 </v-flex>
431 </v-layout> 432 </v-layout>
432 <v-layout> 433 <v-layout>
433 <v-flex xs5 sm6> 434 <v-flex xs5 sm6>
434 <h5 class="right my-1">Join Date:</h5> 435 <h5 class="right my-1">Join Date:</h5>
435 </v-flex> 436 </v-flex>
436 <v-flex sm6 xs8> 437 <v-flex sm6 xs8>
437 <h5 class="my-1">{{ dates(editedItem.joinDate) }}</h5> 438 <h5 class="my-1">{{ dates(editedItem.joinDate) }}</h5>
438 </v-flex> 439 </v-flex>
439 </v-layout> 440 </v-layout>
440 <v-layout> 441 <v-layout>
441 <v-flex xs5 sm6> 442 <v-flex xs5 sm6>
442 <h5 class="right my-1">Date Of Birth:</h5> 443 <h5 class="right my-1">Date Of Birth:</h5>
443 </v-flex> 444 </v-flex>
444 <v-flex sm6 xs8> 445 <v-flex sm6 xs8>
445 <h5 class="my-1">{{ dates(editedItem.dob) }}</h5> 446 <h5 class="my-1">{{ dates(editedItem.dob) }}</h5>
446 </v-flex> 447 </v-flex>
447 </v-layout> 448 </v-layout>
448 <v-layout> 449 <v-layout>
449 <v-flex xs6 sm6 > 450 <v-flex xs6 sm6 >
450 <h5 class="right my-1">Permanent Address:</h5> 451 <h5 class="right my-1">Permanent Address:</h5>
451 </v-flex> 452 </v-flex>
452 <v-flex sm6 xs8> 453 <v-flex sm6 xs8>
453 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5> 454 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5>
454 </v-flex> 455 </v-flex>
455 </v-layout> 456 </v-layout>
456 <v-layout> 457 <v-layout>
457 <v-flex xs6 sm6 > 458 <v-flex xs6 sm6 >
458 <h5 class="right my-1">present Address:</h5> 459 <h5 class="right my-1">present Address:</h5>
459 </v-flex> 460 </v-flex>
460 <v-flex sm6 xs8> 461 <v-flex sm6 xs8>
461 <h5 class="my-1">{{ editedItem.presentAddress }}</h5> 462 <h5 class="my-1">{{ editedItem.presentAddress }}</h5>
462 </v-flex> 463 </v-flex>
463 </v-layout> 464 </v-layout>
464 </v-flex> 465 </v-flex>
465 </v-layout> 466 </v-layout>
466 </v-container> 467 </v-container>
467 </v-card-text> 468 </v-card-text>
468 </v-card> 469 </v-card>
469 </v-dialog> 470 </v-dialog>
470 <v-snackbar 471 <v-snackbar
471 :timeout="timeout" 472 :timeout="timeout"
472 :top="y === 'top'" 473 :top="y === 'top'"
473 :right="x === 'right'" 474 :right="x === 'right'"
474 :vertical="mode === 'vertical'" 475 :vertical="mode === 'vertical'"
475 v-model="snackbar" 476 v-model="snackbar"
476 color="success" 477 color="success"
477 >{{ text }}</v-snackbar> 478 >{{ text }}</v-snackbar>
478 479
479 <!-- ****** EXISTING-Teachers TABLE DATA****** --> 480 <!-- ****** EXISTING-Teachers TABLE DATA****** -->
480 <v-data-table 481 <v-data-table
481 :headers="headers" 482 :headers="headers"
482 :items="desserts" 483 :items="desserts"
483 :pagination.sync="pagination" 484 :pagination.sync="pagination"
484 :search="search" 485 :search="search"
485 > 486 >
486 <template slot="items" slot-scope="props"> 487 <template slot="items" slot-scope="props">
487 <td id="td" class="text-xs-center">{{ props.index}}</td> 488 <td id="td" class="text-xs-center">{{ props.index}}</td>
489 <td id="td" class="text-xs-center">
490 <v-avatar><img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl">
491 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl">
492 </v-avatar></td>
488 <td id="td" class="text-xs-center">{{ props.item.name}}</td> 493 <td id="td" class="text-xs-center">{{ props.item.name}}</td>
489 <td id="td" class="text-xs-center">{{ props.item.email }}</td> 494 <td id="td" class="text-xs-center">{{ props.item.email }}</td>
490 <td id="td" class="text-xs-center">{{ dates(props.item.dob) }}</td> 495 <td id="td" class="text-xs-center">{{ dates(props.item.dob) }}</td>
491 <td id="td" class="text-xs-center">{{ dates(props.item.joinDate)}}</td> 496 <td id="td" class="text-xs-center">{{ dates(props.item.joinDate)}}</td>
492 <td id="td" class="text-xs-center">{{ props.item.mobileNo }}</td> 497 <td id="td" class="text-xs-center">{{ props.item.mobileNo }}</td>
493 <td class="text-xs-center"> 498 <td class="text-xs-center">
494 <span> 499 <span>
495 <img 500 <img
496 style="cursor:pointer; width:25px; height:18px; " 501 style="cursor:pointer; width:25px; height:18px; "
497 class="mr-5" 502 class="mr-5"
498 @click="profile(props.item)" 503 @click="profile(props.item)"
499 src="/static/icon/eye1.png" 504 src="/static/icon/eye1.png"
500 > 505 >
501 <img 506 <img
502 style="cursor:pointer; width:20px; height:18px; " 507 style="cursor:pointer; width:20px; height:18px; "
503 class="mr-5" 508 class="mr-5"
504 @click="editItem(props.item)" 509 @click="editItem(props.item)"
505 src="/static/icon/edit1.png" 510 src="/static/icon/edit1.png"
506 > 511 >
507 <img 512 <img
508 style="cursor:pointer; height:20px; " 513 style="cursor:pointer; height:20px; "
509 class="mr-5" 514 class="mr-5"
510 @click="deleteItem(props.item)" 515 @click="deleteItem(props.item)"
511 src="/static/icon/delete1.png" 516 src="/static/icon/delete1.png"
512 > 517 >
513 </span> 518 </span>
514 </td> 519 </td>
515 </template> 520 </template>
516 <v-alert 521 <v-alert
517 slot="no-results" 522 slot="no-results"
518 :value="true" 523 :value="true"
519 color="error" 524 color="error"
520 icon="warning" 525 icon="warning"
521 >Your search for "{{ search }}" found no results.</v-alert> 526 >Your search for "{{ search }}" found no results.</v-alert>
522 </v-data-table> 527 </v-data-table>
523 </v-tab-item> 528 </v-tab-item>
524 529
525 <!-- ****** Add Teachers Data****** --> 530 <!-- ****** Add Teachers Data****** -->
526 <v-tab-item> 531 <v-tab-item>
527 <v-container> 532 <v-container>
528 <v-snackbar 533 <v-snackbar
529 :timeout="timeout" 534 :timeout="timeout"
530 :top="y === 'top'" 535 :top="y === 'top'"
531 :right="x === 'right'" 536 :right="x === 'right'"
532 :vertical="mode === 'vertical'" 537 :vertical="mode === 'vertical'"
533 v-model="snackbar" 538 v-model="snackbar"
534 color="success" 539 color="success"
535 >{{ text }}</v-snackbar> 540 >{{ text }}</v-snackbar>
536 <v-flex xs12 sm12 class="my-4"> 541 <v-flex xs12 sm12 class="my-4">
537 <v-card flat> 542 <v-card flat>
538 <v-form ref="form" v-model="valid" lazy-validation> 543 <v-form ref="form" v-model="valid" lazy-validation>
539 <v-container fluid> 544 <v-container fluid>
540 <v-layout> 545 <v-layout>
541 <v-flex 546 <v-flex
542 xs12 547 xs12
543 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" 548 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
544 > 549 >
545 <v-avatar size="100px"> 550 <v-avatar size="100px">
546 <img src="/static/icon/user.png" v-if="!imageUrl"> 551 <img src="/static/icon/user.png" v-if="!imageUrl">
547 </v-avatar> 552 </v-avatar>
548 <!-- <input
549 type="file"
550 style="display: none"
551 ref="image"
552 accept="image/*"
553 @change="onFilePicked"
554 > -->
555 <img 553 <img
556 :src="imageUrl" 554 :src="imageUrl"
557 height="150" 555 height="150"
558 v-if="imageUrl" 556 v-if="imageUrl"
559 style="border-radius:50%; width:200px" 557 style="border-radius:50%; width:200px"
560 > 558 >
561 </v-flex> 559 </v-flex>
562 </v-layout> 560 </v-layout>
563 <v-layout> 561 <v-layout>
564 <v-flex xs12 sm6> 562 <v-flex xs12 sm6>
565 <v-layout> 563 <v-layout>
566 <v-flex xs4 class="pt-4 subheading"> 564 <v-flex xs4 class="pt-4 subheading">
567 <label class="right">Full Name:</label> 565 <label class="right">Full Name:</label>
568 </v-flex> 566 </v-flex>
569 <v-flex xs8 class="ml-3"> 567 <v-flex xs8 class="ml-3">
570 <v-text-field 568 <v-text-field
571 v-model="addTeachers.name" 569 v-model="addTeachers.name"
572 placeholder="fill your full Name" 570 placeholder="fill your full Name"
573 name="name" 571 name="name"
574 type="text" 572 type="text"
575 :rules="nameRules" 573 :rules="nameRules"
576 required 574 required
577 ></v-text-field> 575 ></v-text-field>
578 </v-flex> 576 </v-flex>
579 </v-layout> 577 </v-layout>
580 </v-flex> 578 </v-flex>
581 <v-flex xs12 sm6> 579 <v-flex xs12 sm6>
582 <v-layout> 580 <v-layout>
583 <v-flex xs4 class="pt-4 subheading"> 581 <v-flex xs4 class="pt-4 subheading">
584 <label class="right">Email ID:</label> 582 <label class="right">Email ID:</label>
585 </v-flex> 583 </v-flex>
586 <v-flex xs8 class="ml-3"> 584 <v-flex xs8 class="ml-3">
587 <v-text-field 585 <v-text-field
588 placeholder="fill your email" 586 placeholder="fill your email"
589 :rules="emailRules" 587 :rules="emailRules"
590 v-model="addTeachers.email" 588 v-model="addTeachers.email"
591 type="text" 589 type="text"
592 name="email" 590 name="email"
593 required 591 required
594 ></v-text-field> 592 ></v-text-field>
595 </v-flex> 593 </v-flex>
596 </v-layout> 594 </v-layout>
597 </v-flex> 595 </v-flex>
598 </v-layout> 596 </v-layout>
599 <v-layout> 597 <v-layout>
600 <v-flex xs12 sm6> 598 <v-flex xs12 sm6>
601 <v-layout> 599 <v-layout>
602 <v-flex xs4 class="pt-4 subheading"> 600 <v-flex xs4 class="pt-4 subheading">
603 <label class="right">Date of Birth:</label> 601 <label class="right">Date of Birth:</label>
604 </v-flex> 602 </v-flex>
605 <v-flex xs8 class="ml-3"> 603 <v-flex xs8 class="ml-3">
606 <v-menu 604 <v-menu
607 ref="menu" 605 ref="menu"
608 :close-on-content-click="false" 606 :close-on-content-click="false"
609 v-model="menu" 607 v-model="menu"
610 :nudge-right="40" 608 :nudge-right="40"
611 lazy 609 lazy
612 transition="scale-transition" 610 transition="scale-transition"
613 offset-y 611 offset-y
614 full-width 612 full-width
615 min-width="290px" 613 min-width="290px"
616 > 614 >
617 <v-text-field 615 <v-text-field
618 slot="activator" 616 slot="activator"
619 :rules="dateRules" 617 :rules="dateRules"
620 v-model="addTeachers.date" 618 v-model="addTeachers.date"
621 placeholder="Select date" 619 placeholder="Select date"
622 ></v-text-field> 620 ></v-text-field>
623 <v-date-picker 621 <v-date-picker
624 ref="picker" 622 ref="picker"
625 v-model="addTeachers.date" 623 v-model="addTeachers.date"
626 :max="new Date().toISOString().substr(0, 10)" 624 :max="new Date().toISOString().substr(0, 10)"
627 min="1950-01-01" 625 min="1950-01-01"
628 @input="menu = false" 626 @input="menu = false"
629 ></v-date-picker> 627 ></v-date-picker>
630 </v-menu> 628 </v-menu>
631 </v-flex> 629 </v-flex>
632 </v-layout> 630 </v-layout>
633 </v-flex> 631 </v-flex>
634 <v-flex xs12 sm6> 632 <v-flex xs12 sm6>
635 <v-layout> 633 <v-layout>
636 <v-flex xs4 class="pt-4 subheading"> 634 <v-flex xs4 class="pt-4 subheading">
637 <label class="right">City:</label> 635 <label class="right">City:</label>
638 </v-flex> 636 </v-flex>
639 <v-flex xs8 class="ml-3"> 637 <v-flex xs8 class="ml-3">
640 <v-text-field 638 <v-text-field
641 v-model="addTeachers.city" 639 v-model="addTeachers.city"
642 placeholder="fill your City Name" 640 placeholder="fill your City Name"
643 name="City" 641 name="City"
644 type="text" 642 type="text"
645 :rules="cityRules" 643 :rules="cityRules"
646 required 644 required
647 ></v-text-field> 645 ></v-text-field>
648 </v-flex> 646 </v-flex>
649 </v-layout> 647 </v-layout>
650 </v-flex> 648 </v-flex>
651 </v-layout> 649 </v-layout>
652 <v-layout> 650 <v-layout>
653 <v-flex xs12 sm6> 651 <v-flex xs12 sm6>
654 <v-layout> 652 <v-layout>
655 <v-flex xs4 class="pt-4 subheading"> 653 <v-flex xs4 class="pt-4 subheading">
656 <label class="right">State:</label> 654 <label class="right">State:</label>
657 </v-flex> 655 </v-flex>
658 <v-flex xs8 class="ml-3"> 656 <v-flex xs8 class="ml-3">
659 <v-text-field 657 <v-text-field
660 v-model="addTeachers.state" 658 v-model="addTeachers.state"
661 placeholder="fill your State Name" 659 placeholder="fill your State Name"
662 name="state" 660 name="state"
663 type="text" 661 type="text"
664 :rules="stateRules" 662 :rules="stateRules"
665 required 663 required
666 ></v-text-field> 664 ></v-text-field>
667 </v-flex> 665 </v-flex>
668 </v-layout> 666 </v-layout>
669 </v-flex> 667 </v-flex>
670 <v-flex xs12 sm6> 668 <v-flex xs12 sm6>
671 <v-layout> 669 <v-layout>
672 <v-flex xs4 class="pt-4 subheading"> 670 <v-flex xs4 class="pt-4 subheading">
673 <label class="right">PinCode:</label> 671 <label class="right">PinCode:</label>
674 </v-flex> 672 </v-flex>
675 <v-flex xs8 class="ml-3"> 673 <v-flex xs8 class="ml-3">
676 <v-text-field 674 <v-text-field
677 v-model="addTeachers.pincode" 675 v-model="addTeachers.pincode"
678 placeholder="fill your pincode" 676 placeholder="fill your pincode"
679 name="pincode" 677 name="pincode"
680 type="number" 678 type="number"
681 :rules="pincode" 679 :rules="pincode"
682 required 680 required
683 ></v-text-field> 681 ></v-text-field>
684 </v-flex> 682 </v-flex>
685 </v-layout> 683 </v-layout>
686 </v-flex> 684 </v-flex>
687 </v-layout> 685 </v-layout>
688 <v-layout> 686 <v-layout>
689 <v-flex xs12 sm6> 687 <v-flex xs12 sm6>
690 <v-layout> 688 <v-layout>
691 <v-flex xs4 class="pt-4 subheading"> 689 <v-flex xs4 class="pt-4 subheading">
692 <label class="right">Mobile NO:</label> 690 <label class="right">Mobile NO:</label>
693 </v-flex> 691 </v-flex>
694 <v-flex xs8 class="ml-3"> 692 <v-flex xs8 class="ml-3">
695 <v-text-field 693 <v-text-field
696 v-model="addTeachers.mobileNo" 694 v-model="addTeachers.mobileNo"
697 placeholder="fill your MobileNo" 695 placeholder="fill your MobileNo"
698 name="mobileNo" 696 name="mobileNo"
699 type="number" 697 type="number"
700 :rules="mobileNoRules" 698 :rules="mobileNoRules"
701 required 699 required
702 ></v-text-field> 700 ></v-text-field>
703 </v-flex> 701 </v-flex>
704 </v-layout> 702 </v-layout>
705 </v-flex> 703 </v-flex>
706 <v-flex xs12 sm6> 704 <v-flex xs12 sm6>
707 <v-layout> 705 <v-layout>
708 <v-flex xs4 class="pt-4 subheading"> 706 <v-flex xs4 class="pt-4 subheading">
709 <label class="right">Select Country:</label> 707 <label class="right">Select Country:</label>
710 </v-flex> 708 </v-flex>
711 <v-flex xs8 class="ml-3"> 709 <v-flex xs8 class="ml-3">
712 <v-autocomplete 710 <v-autocomplete
713 v-model="addTeachers.country" 711 v-model="addTeachers.country"
714 :rules="country" 712 :rules="country"
715 :items="countries" 713 :items="countries"
716 placeholder="Select Country Name" 714 placeholder="Select Country Name"
717 required 715 required
718 ></v-autocomplete> 716 ></v-autocomplete>
719 </v-flex> 717 </v-flex>
720 </v-layout> 718 </v-layout>
721 </v-flex> 719 </v-flex>
722 </v-layout> 720 </v-layout>
723 <v-layout> 721 <v-layout>
724 <v-flex xs12 sm6> 722 <v-flex xs12 sm6>
725 <v-layout> 723 <v-layout>
726 <v-flex xs4 class="pt-4 subheading"> 724 <v-flex xs4 class="pt-4 subheading">
727 <label class="right">Join Date</label> 725 <label class="right">Join Date</label>
728 </v-flex> 726 </v-flex>
729 <v-flex xs8 class="ml-3"> 727 <v-flex xs8 class="ml-3">
730 <v-menu 728 <v-menu
731 ref="menu1" 729 ref="menu1"
732 :close-on-content-click="false" 730 :close-on-content-click="false"
733 v-model="menu1" 731 v-model="menu1"
734 :nudge-right="40" 732 :nudge-right="40"
735 lazy 733 lazy
736 transition="scale-transition" 734 transition="scale-transition"
737 offset-y 735 offset-y
738 full-width 736 full-width
739 min-width="290px" 737 min-width="290px"
740 > 738 >
741 <v-text-field 739 <v-text-field
742 slot="activator" 740 slot="activator"
743 :rules="joinDateRules" 741 :rules="joinDateRules"
744 v-model="addTeachers.joinDate" 742 v-model="addTeachers.joinDate"
745 placeholder="Select date" 743 placeholder="Select date"
746 ></v-text-field> 744 ></v-text-field>
747 <v-date-picker 745 <v-date-picker
748 ref="picker" 746 ref="picker"
749 v-model="addTeachers.joinDate" 747 v-model="addTeachers.joinDate"
750 :max="new Date().toISOString().substr(0, 10)" 748 :max="new Date().toISOString().substr(0, 10)"
751 min="1950-01-01" 749 min="1950-01-01"
752 @input="menu1 = false" 750 @input="menu1 = false"
753 ></v-date-picker> 751 ></v-date-picker>
754 </v-menu> 752 </v-menu>
755 </v-flex> 753 </v-flex>
756 </v-layout> 754 </v-layout>
757 </v-flex> 755 </v-flex>
758 <v-flex xs12 sm6> 756 <v-flex xs12 sm6>
759 <v-layout> 757 <v-layout>
760 <v-flex xs4 class="pt-4 subheading"> 758 <v-flex xs4 class="pt-4 subheading">
761 <label class="right">Uplaod Image:</label> 759 <label class="right">Uplaod Image:</label>
762 </v-flex> 760 </v-flex>
763 <v-flex xs8 class="ml-3"> 761 <v-flex xs8 class="ml-3">
764 <v-text-field 762 <v-text-field
765 label="Select Image" 763 label="Select Image"
766 @click="pickFile" 764 @click="pickFile"
767 v-model="imageName" 765 v-model="imageName"
768 append-icon="attach_file" 766 append-icon="attach_file"
769 ></v-text-field> 767 ></v-text-field>
770 <input 768 <input
771 type="file" 769 type="file"
772 style="display:none" 770 style="display:none"
773 ref="image" 771 ref="image"
774 accept="image/*" 772 accept="image/*"
775 @change="onFilePicked" 773 @change="onFilePicked"
776 > 774 >
777 </v-flex> 775 </v-flex>
778 </v-layout> 776 </v-layout>
779 </v-flex> 777 </v-flex>
780 </v-layout> 778 </v-layout>
781 <v-layout> 779 <v-layout>
782 <v-flex xs12 sm12> 780 <v-flex xs12 sm12>
783 <v-layout> 781 <v-layout>
784 <v-flex xs3 class="pt-4 subheading pl-4" style="max-width: 17%;"> 782 <v-flex xs3 class="pt-4 subheading pl-4" style="max-width: 17%;">
785 <label class>Present Address:</label> 783 <label class>Present Address:</label>
786 </v-flex> 784 </v-flex>
787 <v-flex xs12 class="presentInput"> 785 <v-flex xs12 class="presentInput">
788 <v-text-field 786 <v-text-field
789 name="input-4-3" 787 name="input-4-3"
790 v-model="addTeachers.presentAddress" 788 v-model="addTeachers.presentAddress"
791 :rules="presentAddress" 789 :rules="presentAddress"
792 placeholder="fill Your present Address" 790 placeholder="fill Your present Address"
793 required 791 required
794 ></v-text-field> 792 ></v-text-field>
795 </v-flex> 793 </v-flex>
796 </v-layout> 794 </v-layout>
797 </v-flex> 795 </v-flex>
798 <v-flex xs12 sm12> 796 <v-flex xs12 sm12>
799 <v-layout> 797 <v-layout>
800 <v-flex xs3 class="pt-4 subheading" style="max-width: 17%;"> 798 <v-flex xs3 class="pt-4 subheading" style="max-width: 17%;">
801 <label>Permanent Address:</label> 799 <label>Permanent Address:</label>
802 </v-flex> 800 </v-flex>
803 <v-flex xs12 class="presentInput"> 801 <v-flex xs12 class="presentInput">
804 <v-text-field 802 <v-text-field
805 name="input-4-3" 803 name="input-4-3"
806 v-model="addTeachers.permanentAddress" 804 v-model="addTeachers.permanentAddress"
807 :rules="permanentAddress" 805 :rules="permanentAddress"
808 placeholder="fill Your Permanent Address" 806 placeholder="fill Your Permanent Address"
809 required 807 required
810 ></v-text-field> 808 ></v-text-field>
811 </v-flex> 809 </v-flex>
812 </v-layout> 810 </v-layout>
813 </v-flex> 811 </v-flex>
814 </v-layout> 812 </v-layout>
815 <v-layout> 813 <v-layout>
816 <v-flex xs12 sm12> 814 <v-flex xs12 sm12>
817 <v-card-actions> 815 <v-card-actions>
818 <v-btn @click="clear" round dark>clear</v-btn> 816 <v-btn @click="clear" round dark>clear</v-btn>
819 <v-spacer></v-spacer> 817 <v-spacer></v-spacer>
820 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 818 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
821 </v-card-actions> 819 </v-card-actions>
822 </v-flex> 820 </v-flex>
823 </v-layout> 821 </v-layout>
824 </v-container> 822 </v-container>
825 </v-form> 823 </v-form>
826 </v-card> 824 </v-card>
827 </v-flex> 825 </v-flex>
828 </v-container> 826 </v-container>
829 </v-tab-item> 827 </v-tab-item>
830 </v-tabs> 828 </v-tabs>
831 <div class="loader" v-if="showLoader"> 829 <div class="loader" v-if="showLoader">
832 <v-progress-circular indeterminate color="white"></v-progress-circular> 830 <v-progress-circular indeterminate color="white"></v-progress-circular>
833 </div> 831 </div>
834 </v-app> 832 </v-app>
835 </template> 833 </template>
836 834
837 <script> 835 <script>
838 // import AppToolbar from '@/components/AppToolbar'; 836 // import AppToolbar from '@/components/AppToolbar';
839 import http from "@/Services/http.js"; 837 import http from "@/Services/http.js";
840 import Util from "@/util"; 838 import Util from "@/util";
841 import moment from "moment"; 839 import moment from "moment";
842 840
843 export default { 841 export default {
844 components: { 842 components: {
845 // "one-month": onemonth, 843 // "one-month": onemonth,
846 }, 844 },
847 data: () => ({ 845 data: () => ({
848 component: "report-generate", 846 component: "report-generate",
849 snackbar: false, 847 snackbar: false,
850 y: "top", 848 y: "top",
851 x: "right", 849 x: "right",
852 mode: "", 850 mode: "",
853 timeout: 3000, 851 timeout: 3000,
854 text: "", 852 text: "",
855 showLoader:false, 853 showLoader:false,
856 loading: false, 854 loading: false,
857 date: null, 855 date: null,
858 search: "", 856 search: "",
859 menu: false, 857 menu: false,
860 menu1: false, 858 menu1: false,
861 menu2: false, 859 menu2: false,
862 menu3: false, 860 menu3: false,
863 dialog: false, 861 dialog: false,
864 dialog1: false, 862 dialog1: false,
865 valid: true, 863 valid: true,
866 isActive: true, 864 isActive: true,
867 newActive: false, 865 newActive: false,
868 pagination: { 866 pagination: {
869 rowsPerPage: 15 867 rowsPerPage: 15
870 }, 868 },
871 imageData: {}, 869 imageData: {},
872 imageName: "", 870 imageName: "",
873 imageUrl: "", 871 imageUrl: "",
874 imageFile: "", 872 imageFile: "",
875 nameRules: [v => !!v || " Full Name is required"], 873 nameRules: [v => !!v || " Full Name is required"],
876 dateRules: [v => !!v || " DOB is required"], 874 dateRules: [v => !!v || " DOB is required"],
877 cityRules: [v => !!v || " City Name is required"], 875 cityRules: [v => !!v || " City Name is required"],
878 pincode: [v => !!v || " Pincode is required"], 876 pincode: [v => !!v || " Pincode is required"],
879 country: [v => !!v || " Country Name is required"], 877 country: [v => !!v || " Country Name is required"],
880 permanentAddress: [v => !!v || " Permanent Address is required"], 878 permanentAddress: [v => !!v || " Permanent Address is required"],
881 presentAddress: [v => !!v || " Present Address is required"], 879 presentAddress: [v => !!v || " Present Address is required"],
882 mobileNoRules: [v => !!v || "Mobile Number is required"], 880 mobileNoRules: [v => !!v || "Mobile Number is required"],
883 stateRules: [v => !!v || "State Name is required"], 881 stateRules: [v => !!v || "State Name is required"],
884 joinDateRules: [v => !!v || " Join Date is required"], 882 joinDateRules: [v => !!v || " Join Date is required"],
885 errorMessages: "", 883 errorMessages: "",
886 emailRules: [ 884 emailRules: [
887 v => !!v || "E-mail is required", 885 v => !!v || "E-mail is required",
888 v => 886 v =>
889 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 887 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
890 "E-mail must be valid" 888 "E-mail must be valid"
891 ], 889 ],
892 countries: [ 890 countries: [
893 "Afghanistan", 891 "Afghanistan",
894 "Albania", 892 "Albania",
895 "Algeria", 893 "Algeria",
896 "Andorra", 894 "Andorra",
897 "Angola", 895 "Angola",
898 "Anguilla", 896 "Anguilla",
899 "Antigua &amp; Barbuda", 897 "Antigua &amp; Barbuda",
900 "Argentina", 898 "Argentina",
901 "Armenia", 899 "Armenia",
902 "Aruba", 900 "Aruba",
903 "Australia", 901 "Australia",
904 "Austria", 902 "Austria",
905 "Azerbaijan", 903 "Azerbaijan",
906 "Bahamas", 904 "Bahamas",
907 "Bahrain", 905 "Bahrain",
908 "Bangladesh", 906 "Bangladesh",
909 "Barbados", 907 "Barbados",
910 "Belarus", 908 "Belarus",
911 "Belgium", 909 "Belgium",
912 "Belize", 910 "Belize",
913 "Benin", 911 "Benin",
914 "Bermuda", 912 "Bermuda",
915 "Bhutan", 913 "Bhutan",
916 "Bolivia", 914 "Bolivia",
917 "Bosnia &amp; Herzegovina", 915 "Bosnia &amp; Herzegovina",
918 "Botswana", 916 "Botswana",
919 "Brazil", 917 "Brazil",
920 "British Virgin Islands", 918 "British Virgin Islands",
921 "Brunei", 919 "Brunei",
922 "Bulgaria", 920 "Bulgaria",
923 "Burkina Faso", 921 "Burkina Faso",
924 "Burundi", 922 "Burundi",
925 "Cambodia", 923 "Cambodia",
926 "Cameroon", 924 "Cameroon",
927 "Cape Verde", 925 "Cape Verde",
928 "Cayman Islands", 926 "Cayman Islands",
929 "Chad", 927 "Chad",
930 "Chile", 928 "Chile",
931 "China", 929 "China",
932 "Colombia", 930 "Colombia",
933 "Congo", 931 "Congo",
934 "Cook Islands", 932 "Cook Islands",
935 "Costa Rica", 933 "Costa Rica",
936 "Cote D Ivoire", 934 "Cote D Ivoire",
937 "Croatia", 935 "Croatia",
938 "Cruise Ship", 936 "Cruise Ship",
939 "Cuba", 937 "Cuba",
940 "Cyprus", 938 "Cyprus",
941 "Czech Republic", 939 "Czech Republic",
942 "Denmark", 940 "Denmark",
943 "Djibouti", 941 "Djibouti",
944 "Dominica", 942 "Dominica",
945 "Dominican Republic", 943 "Dominican Republic",
946 "Ecuador", 944 "Ecuador",
947 "Egypt", 945 "Egypt",
948 "El Salvador", 946 "El Salvador",
949 "Equatorial Guinea", 947 "Equatorial Guinea",
950 "Estonia", 948 "Estonia",
951 "Ethiopia", 949 "Ethiopia",
952 "Falkland Islands", 950 "Falkland Islands",
953 "Faroe Islands", 951 "Faroe Islands",
954 "Fiji", 952 "Fiji",
955 "Finland", 953 "Finland",
956 "France", 954 "France",
957 "French Polynesia", 955 "French Polynesia",
958 "French West Indies", 956 "French West Indies",
959 "Gabon", 957 "Gabon",
960 "Gambia", 958 "Gambia",
961 "Georgia", 959 "Georgia",
962 "Germany", 960 "Germany",
963 "Ghana", 961 "Ghana",
964 "Gibraltar", 962 "Gibraltar",
965 "Greece", 963 "Greece",
966 "Greenland", 964 "Greenland",
967 "Grenada", 965 "Grenada",
968 "Guam", 966 "Guam",
969 "Guatemala", 967 "Guatemala",
970 "Guernsey", 968 "Guernsey",
971 "Guinea", 969 "Guinea",
972 "Guinea Bissau", 970 "Guinea Bissau",
973 "Guyana", 971 "Guyana",
974 "Haiti", 972 "Haiti",
975 "Honduras", 973 "Honduras",
976 "Hong Kong", 974 "Hong Kong",
977 "Hungary", 975 "Hungary",
978 "Iceland", 976 "Iceland",
979 "India", 977 "India",
980 "Indonesia", 978 "Indonesia",
981 "Iran", 979 "Iran",
982 "Iraq", 980 "Iraq",
983 "Ireland", 981 "Ireland",
984 "Isle of Man", 982 "Isle of Man",
985 "Israel", 983 "Israel",
986 "Italy", 984 "Italy",
987 "Jamaica", 985 "Jamaica",
988 "Japan", 986 "Japan",
989 "Jersey", 987 "Jersey",
990 "Jordan", 988 "Jordan",
991 "Kazakhstan", 989 "Kazakhstan",
992 "Kenya", 990 "Kenya",
993 "Kuwait", 991 "Kuwait",
994 "Kyrgyz Republic", 992 "Kyrgyz Republic",
995 "Laos", 993 "Laos",
996 "Latvia", 994 "Latvia",
997 "Lebanon", 995 "Lebanon",
998 "Lesotho", 996 "Lesotho",
999 "Liberia", 997 "Liberia",
1000 "Libya", 998 "Libya",
1001 "Liechtenstein", 999 "Liechtenstein",
1002 "Lithuania", 1000 "Lithuania",
1003 "Luxembourg", 1001 "Luxembourg",
1004 "Macau", 1002 "Macau",
1005 "Macedonia", 1003 "Macedonia",
1006 "Madagascar", 1004 "Madagascar",
1007 "Malawi", 1005 "Malawi",
1008 "Malaysia", 1006 "Malaysia",
1009 "Maldives", 1007 "Maldives",
1010 "Mali", 1008 "Mali",
1011 "Malta", 1009 "Malta",
1012 "Mauritania", 1010 "Mauritania",
1013 "Mauritius", 1011 "Mauritius",
1014 "Mexico", 1012 "Mexico",
1015 "Moldova", 1013 "Moldova",
1016 "Monaco", 1014 "Monaco",
1017 "Mongolia", 1015 "Mongolia",
1018 "Montenegro", 1016 "Montenegro",
1019 "Montserrat", 1017 "Montserrat",
1020 "Morocco", 1018 "Morocco",
1021 "Mozambique", 1019 "Mozambique",
1022 "Namibia", 1020 "Namibia",
1023 "Nepal", 1021 "Nepal",
1024 "Netherlands", 1022 "Netherlands",
1025 "Netherlands Antilles", 1023 "Netherlands Antilles",
1026 "New Caledonia", 1024 "New Caledonia",
1027 "New Zealand", 1025 "New Zealand",
1028 "Nicaragua", 1026 "Nicaragua",
1029 "Niger", 1027 "Niger",
1030 "Nigeria", 1028 "Nigeria",
1031 "Norway", 1029 "Norway",
1032 "Oman", 1030 "Oman",
1033 "Pakistan", 1031 "Pakistan",
1034 "Palestine", 1032 "Palestine",
1035 "Panama", 1033 "Panama",
1036 "Papua New Guinea", 1034 "Papua New Guinea",
1037 "Paraguay", 1035 "Paraguay",
1038 "Peru", 1036 "Peru",
1039 "Philippines", 1037 "Philippines",
1040 "Poland", 1038 "Poland",
1041 "Portugal", 1039 "Portugal",
1042 "Puerto Rico", 1040 "Puerto Rico",
1043 "Qatar", 1041 "Qatar",
1044 "Reunion", 1042 "Reunion",
1045 "Romania", 1043 "Romania",
1046 "Russia", 1044 "Russia",
1047 "Rwanda", 1045 "Rwanda",
1048 "Saint Pierre &amp; Miquelon", 1046 "Saint Pierre &amp; Miquelon",
1049 "Samoa", 1047 "Samoa",
1050 "San Marino", 1048 "San Marino",
1051 "Satellite", 1049 "Satellite",
1052 "Saudi Arabia", 1050 "Saudi Arabia",
1053 "Senegal", 1051 "Senegal",
1054 "Serbia", 1052 "Serbia",
1055 "Seychelles", 1053 "Seychelles",
1056 "Sierra Leone", 1054 "Sierra Leone",
1057 "Singapore", 1055 "Singapore",
1058 "Slovakia", 1056 "Slovakia",
1059 "Slovenia", 1057 "Slovenia",
1060 "South Africa", 1058 "South Africa",
1061 "South Korea", 1059 "South Korea",
1062 "Spain", 1060 "Spain",
1063 "Sri Lanka", 1061 "Sri Lanka",
1064 "St Kitts &amp; Nevis", 1062 "St Kitts &amp; Nevis",
1065 "St Lucia", 1063 "St Lucia",
1066 "St Vincent", 1064 "St Vincent",
1067 "St. Lucia", 1065 "St. Lucia",
1068 "Sudan", 1066 "Sudan",
1069 "Suriname", 1067 "Suriname",
1070 "Swaziland", 1068 "Swaziland",
1071 "Sweden", 1069 "Sweden",
1072 "Switzerland", 1070 "Switzerland",
1073 "Syria", 1071 "Syria",
1074 "Taiwan", 1072 "Taiwan",
1075 "Tajikistan", 1073 "Tajikistan",
1076 "Tanzania", 1074 "Tanzania",
1077 "Thailand", 1075 "Thailand",
1078 "Timor L'Este", 1076 "Timor L'Este",
1079 "Togo", 1077 "Togo",
1080 "Tonga", 1078 "Tonga",
1081 "Trinidad &amp; Tobago", 1079 "Trinidad &amp; Tobago",
1082 "Tunisia", 1080 "Tunisia",
1083 "Turkey", 1081 "Turkey",
1084 "Turkmenistan", 1082 "Turkmenistan",
1085 "Turks &amp; Caicos", 1083 "Turks &amp; Caicos",
1086 "Uganda", 1084 "Uganda",
1087 "Ukraine", 1085 "Ukraine",
1088 "United Arab Emirates", 1086 "United Arab Emirates",
1089 "United Kingdom", 1087 "United Kingdom",
1090 "United States", 1088 "United States",
1091 "Uruguay", 1089 "Uruguay",
1092 "Uzbekistan", 1090 "Uzbekistan",
1093 "Venezuela", 1091 "Venezuela",
1094 "Vietnam", 1092 "Vietnam",
1095 "Virgin Islands (US)", 1093 "Virgin Islands (US)",
1096 "Yemen", 1094 "Yemen",
1097 "Zambia", 1095 "Zambia",
1098 "Zimbabwe" 1096 "Zimbabwe"
1099 ], 1097 ],
1100 headers: [ 1098 headers: [
1101 { 1099 {
1102 text: "No", 1100 text: "No",
1103 align: "center", 1101 align: "center",
1104 sortable: false, 1102 sortable: false,
1105 value: "No" 1103 value: "No"
1106 }, 1104 },
1105 { text: "Profile Pic", value: "profilePicUrl", sortable: false, align: "center" },
1107 { text: "Name", value: "name", sortable: false, align: "center" }, 1106 { text: "Name", value: "name", sortable: false, align: "center" },
1108 { text: "Email", value: "email", sortable: false, align: "center" }, 1107 { text: "Email", value: "email", sortable: false, align: "center" },
1109 { text: "DOB", value: "dob", sortable: false, align: "center" }, 1108 { text: "DOB", value: "dob", sortable: false, align: "center" },
1110 { text: "Join Date", value: "joinDate", sortable: false, align: "center" }, 1109 { text: "Join Date", value: "joinDate", sortable: false, align: "center" },
1111 { text: "Mobile No", value: "mobileNo", sortable: false, align: "center" }, 1110 { text: "Mobile No", value: "mobileNo", sortable: false, align: "center" },
1112 { text: "Action", value: "", sortable: false, align: "center" } 1111 { text: "Action", value: "", sortable: false, align: "center" }
1113 ], 1112 ],
1114 desserts: [], 1113 desserts: [],
1115 editedIndex: -1, 1114 editedIndex: -1,
1116 upload:'', 1115 upload:'',
1117 editedItem: { 1116 editedItem: {
1118 role: "TEACHER", 1117 role: "TEACHER",
1119 name: "", 1118 name: "",
1120 email: "", 1119 email: "",
1121 date: null, 1120 date: null,
1122 city: "", 1121 city: "",
1123 pincode: "", 1122 pincode: "",
1124 country: "", 1123 country: "",
1125 permanentAddress: "", 1124 permanentAddress: "",
1126 presentAddress: "", 1125 presentAddress: "",
1127 mobileNo: "", 1126 mobileNo: "",
1128 state: "", 1127 state: "",
1129 joinDate: null 1128 joinDate: null
1130 }, 1129 },
1131 addTeachers: { 1130 addTeachers: {
1132 role: "TEACHER", 1131 role: "TEACHER",
1133 name: "", 1132 name: "",
1134 email: "", 1133 email: "",
1135 date: null, 1134 date: null,
1136 city: "", 1135 city: "",
1137 pincode: "", 1136 pincode: "",
1138 country: "", 1137 country: "",
1139 permanentAddress: "", 1138 permanentAddress: "",
1140 presentAddress: "", 1139 presentAddress: "",
1141 mobileNo: "", 1140 mobileNo: "",
1142 state: "", 1141 state: "",
1143 joinDate: null 1142 joinDate: null
1144 }, 1143 },
1145 defaultItem: { 1144 defaultItem: {
1146 role: "TEACHER", 1145 role: "TEACHER",
1147 name: "", 1146 name: "",
1148 email: "" 1147 email: ""
1149 }, 1148 },
1150 userName: "", 1149 userName: "",
1151 items: [ 1150 items: [
1152 { 1151 {
1153 href: "/changepassword", 1152 href: "/changepassword",
1154 title: "Change Password", 1153 title: "Change Password",
1155 click: e => { 1154 click: e => {
1156 console.log(e); 1155 console.log(e);
1157 } 1156 }
1158 }, 1157 },
1159 { 1158 {
1160 href: "#", 1159 href: "#",
1161 title: "Logout", 1160 title: "Logout",
1162 click: e => { 1161 click: e => {
1163 window.getApp.$emit("APP_LOGOUT"); 1162 window.getApp.$emit("APP_LOGOUT");
1164 } 1163 }
1165 } 1164 }
1166 ] 1165 ]
1167 }), 1166 }),
1168 watch: { 1167 watch: {
1169 menu(val) { 1168 menu(val) {
1170 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 1169 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
1171 }, 1170 },
1172 menu1(val) { 1171 menu1(val) {
1173 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 1172 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
1174 } 1173 }
1175 }, 1174 },
1176 methods: { 1175 methods: {
1177 save (date) { 1176 save (date) {
1178 this.$refs.menu.save(date) 1177 this.$refs.menu.save(date)
1179 }, 1178 },
1180 save (date) { 1179 save (date) {
1181 this.$refs.menu1.save(date) 1180 this.$refs.menu1.save(date)
1182 }, 1181 },
1183 pickFile() { 1182 pickFile() {
1184 this.$refs.image.click (); 1183 this.$refs.image.click ();
1185 }, 1184 },
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.imageUrl );
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 dates: function(date) { 1210 dates: function(date) {
1212 return moment(date).format("MMMM DD, YYYY"); 1211 return moment(date).format("MMMM DD, YYYY");
1213 }, 1212 },
1214 getTeacherList() { 1213 getTeacherList() {
1215 this.showLoader = true; 1214 this.showLoader = true;
1216 var token = this.$store.state.token; 1215 var token = this.$store.state.token;
1217 console.log("token",token) 1216 console.log("token",token)
1218 http() 1217 http()
1219 .get("/getTeachersList", { 1218 .get("/getTeachersList", {
1220 headers: { Authorization: "Bearer " + token } 1219 headers: { Authorization: "Bearer " + token }
1221 }) 1220 })
1222 .then(response => { 1221 .then(response => {
1223 this.desserts = response.data.data; 1222 this.desserts = response.data.data;
1224 this.showLoader = false; 1223 this.showLoader = false;
1225 // console.log("getTeacherList=====>",this.desserts) 1224 // console.log("getTeacherList=====>",this.desserts)
1226 }) 1225 })
1227 .catch(err => { 1226 .catch(err => {
1228 // console.log("err====>", err); 1227 // console.log("err====>", err);
1229 this.showLoader = false; 1228 this.showLoader = false;
1230 // this.$router.replace({ path: "/" }); 1229 // this.$router.replace({ path: "/" });
1231 }); 1230 });
1232 }, 1231 },
1233 editItem(item) { 1232 editItem(item) {
1234 this.editedIndex = this.desserts.indexOf(item); 1233 this.editedIndex = this.desserts.indexOf(item);
1235 this.editedItem = Object.assign({}, item); 1234 this.editedItem = Object.assign({}, item);
1236 this.editedItem.dob = this.editedItem.dob.substring(0, 10) 1235 this.editedItem.dob = this.editedItem.dob.substring(0, 10)
1237 this.editedItem.joinDate = this.editedItem.joinDate.substring(0, 10) 1236 this.editedItem.joinDate = this.editedItem.joinDate.substring(0, 10)
1238 this.dialog = true; 1237 this.dialog = true;
1239 }, 1238 },
1240 profile(item) { 1239 profile(item) {
1241 this.editedIndex = this.desserts.indexOf(item); 1240 this.editedIndex = this.desserts.indexOf(item);
1242 this.editedItem = Object.assign({}, item); 1241 this.editedItem = Object.assign({}, item);
1243 this.dialog1 = true; 1242 this.dialog1 = true;
1244 }, 1243 },
1245 deleteItem(item) { 1244 deleteItem(item) {
1246 let deleteTeachers = { 1245 let deleteTeachers = {
1247 teacherId: item._id 1246 teacherId: item._id
1248 }; 1247 };
1249 // console.log("deleteUers",deleteTeachers) 1248 // console.log("deleteUers",deleteTeachers)
1250 http() 1249 http()
1251 .delete( 1250 .delete(
1252 "/deleteTeacher", 1251 "/deleteTeacher",
1253 confirm("Are you sure you want to delete this?") && { 1252 confirm("Are you sure you want to delete this?") && {
1254 params: deleteTeachers 1253 params: deleteTeachers
1255 } 1254 }
1256 ) 1255 )
1257 .then(response => { 1256 .then(response => {
1258 // console.log("deleteUers",deleteTeachers) 1257 // console.log("deleteUers",deleteTeachers)
1259 if ((this.snackbar = true)) { 1258 if ((this.snackbar = true)) {
1260 this.text = "Successfully delete Existing Teacher"; 1259 this.text = "Successfully delete Existing Teacher";
1261 } 1260 }
1262 this.getTeacherList(); 1261 this.getTeacherList();
1263 }) 1262 })
1264 .catch(error => { 1263 .catch(error => {
1265 console.log(error); 1264 console.log(error);
1266 }); 1265 });
1267 }, 1266 },
1268 activeTab(type) { 1267 activeTab(type) {
1269 switch (type) { 1268 switch (type) {
1270 case "existing": 1269 case "existing":
1271 this.newActive = false; 1270 this.newActive = false;
1272 this.isActive = true; 1271 this.isActive = true;
1273 break; 1272 break;
1274 1273
1275 default: 1274 default:
1276 this.newActive = true; 1275 this.newActive = true;
1277 this.isActive = false; 1276 this.isActive = false;
1278 break; 1277 break;
1279 } 1278 }
1280 }, 1279 },
1281 close() { 1280 close() {
1282 this.dialog = false; 1281 this.dialog = false;
1283 setTimeout(() => { 1282 setTimeout(() => {
1284 this.editedItem = Object.assign({}, this.defaultItem); 1283 this.editedItem = Object.assign({}, this.defaultItem);
1285 this.editedIndex = -1; 1284 this.editedIndex = -1;
1286 }, 300); 1285 }, 300);
1287 }, 1286 },
1288 close1() { 1287 close1() {
1289 this.dialog1 = false; 1288 this.dialog1 = false;
1290 }, 1289 },
1291 // close2() { 1290 // close2() {
1292 // this.dialog2 = false; 1291 // this.dialog2 = false;
1293 // }, 1292 // },
1294 submit() { 1293 submit() {
1295 if (this.$refs.form.validate()) { 1294 if (this.$refs.form.validate()) {
1296 let images = new FormData(); 1295 // let images = new FormData();
1297 images.append("upload", this.imageFile); 1296 // images.append("upload",this.imageUrl);
1298 console.log(images); 1297 // console.log(images);
1299 // var form_data = new FormData(); 1298 // var form_data = new FormData();
1300 // for (var key in addTeacher) { 1299 // for (var key in addTeacher) {
1301 // if (key === 'upload') { 1300 // if (key === 'upload') {
1302 // form_data.append(key, this.imageFile); 1301 // form_data.append(key, this.imageFile);
1303 // } else { 1302 // } else {
1304 // form_data.append(key, addTeacher[key]) 1303 // form_data.append(key, addTeacher[key])
1305 // } 1304 // }
1306 // } 1305 // }
1307 console.log("images",images) 1306 // console.log("images",images)
1308 let addTeacher = { 1307 let addTeacher = {
1309 name: this.addTeachers.name, 1308 name: this.addTeachers.name,
1310 email: this.addTeachers.email, 1309 email: this.addTeachers.email,
1311 role: this.addTeachers.role, 1310 role: this.addTeachers.role,
1312 dob: this.addTeachers.date, 1311 dob: this.addTeachers.date,
1313 city: this.addTeachers.city, 1312 city: this.addTeachers.city,
1314 pincode: this.addTeachers.pincode, 1313 pincode: this.addTeachers.pincode,
1315 country: this.addTeachers.country, 1314 country: this.addTeachers.country,
1316 permanentAddress: this.addTeachers.permanentAddress, 1315 permanentAddress: this.addTeachers.permanentAddress,
1317 presentAddress: this.addTeachers.presentAddress, 1316 presentAddress: this.addTeachers.presentAddress,
1318 mobileNo: this.addTeachers.mobileNo, 1317 mobileNo: this.addTeachers.mobileNo,
1319 state: this.addTeachers.state, 1318 state: this.addTeachers.state,
1320 joinDate: this.addTeachers.joinDate, 1319 joinDate: this.addTeachers.joinDate,
1321 images 1320 upload:this.imageUrl
1322 // upload:this.imageFile 1321 // upload:this.imageFile
1323 }; 1322 };
1324 // console.log("addTeacher============>", addTeacher); 1323 // console.log("addTeacher============>", addTeacher);
1325 this.loading = true; 1324 this.loading = true;
1326 http() 1325 http()
1327 .post("/createTeacher", addTeacher) 1326 .post("/createTeacher", addTeacher)
1328 .then(response => { 1327 .then(response => {
1329 console.log("addTeacher", addTeacher); 1328 console.log("addTeacher", addTeacher);
1330 this.getTeacherList(); 1329 this.getTeacherList();
1331 if ((this.snackbar = true)) { 1330 if ((this.snackbar = true)) {
1332 this.text = "New Teacher added successfully"; 1331 this.text = "New Teacher added successfully";
1333 } 1332 }
1334 1333
1335 this.clear(); 1334 this.clear();
1336 this.loading = false; 1335 this.loading = false;
1337 }) 1336 })
1338 .catch(error => { 1337 .catch(error => {
1339 // console.log(error); 1338 // console.log(error);
1340 if ((this.snackbar = true)) { 1339 if ((this.snackbar = true)) {
1341 this.text = error.response.data.message; 1340 this.text = error.response.data.message;
1342 } 1341 }
1343 this.loading = false; 1342 this.loading = false;
1344 }); 1343 });
1345 } 1344 }
1346 }, 1345 },
1347 mail() {}, 1346 mail() {},
1348 download() {}, 1347 download() {},
1349 clear() { 1348 clear() {
1350 this.$refs.form.reset(); 1349 this.$refs.form.reset();
1351 }, 1350 },
1352 save() { 1351 save() {
1353 let editTeacher = { 1352 let editTeacher = {
1354 teacherId: this.editedItem._id, 1353 teacherId: this.editedItem._id,
1355 name: this.editedItem.name, 1354 name: this.editedItem.name,
1356 email: this.editedItem.email, 1355 email: this.editedItem.email,
1357 role: this.editedItem.role, 1356 role: this.editedItem.role,
1358 dob: this.editedItem.date, 1357 dob: this.editedItem.date,
1359 city: this.editedItem.city, 1358 city: this.editedItem.city,
1360 pincode: this.editedItem.pincode, 1359 pincode: this.editedItem.pincode,
1361 country: this.editedItem.country, 1360 country: this.editedItem.country,
1362 permanentAddress: this.editedItem.permanentAddress, 1361 permanentAddress: this.editedItem.permanentAddress,
1363 presentAddress: this.editedItem.presentAddress, 1362 presentAddress: this.editedItem.presentAddress,
1364 mobileNo: this.editedItem.mobileNo, 1363 mobileNo: this.editedItem.mobileNo,
1365 state: this.editedItem.state, 1364 state: this.editedItem.state,
1366 joinDate: this.editedItem.joinDate, 1365 joinDate: this.editedItem.joinDate,
1367 // imageData, 1366 upload:this.imageUrl
1368 }; 1367 };
1369 http() 1368 http()
1370 .put("/updateTeacher", editTeacher) 1369 .put("/updateTeacher", editTeacher)
1371 .then(response => { 1370 .then(response => {
1372 console.log("editTeacher",editTeacher); 1371 console.log("editTeacher",editTeacher);
1373 if ((this.snackbar = true)) { 1372 if ((this.snackbar = true)) {
1374 this.text = "Successfully Edit Existing Teacher"; 1373 this.text = "Successfully Edit Existing Teacher";
1375 } 1374 }
1376 this.getTeacherList(); 1375 this.getTeacherList();
1377 }) 1376 })
1378 .catch(error => { 1377 .catch(error => {
1379 console.log(error); 1378 console.log(error);
1380 }); 1379 });
1381 this.close(); 1380 this.close();
1382 }, 1381 },
1383 handleDrawerToggle() { 1382 handleDrawerToggle() {
1384 window.getApp.$emit("APP_DRAWER_TOGGLED"); 1383 window.getApp.$emit("APP_DRAWER_TOGGLED");
1385 }, 1384 },
1386 handleFullScreen() { 1385 handleFullScreen() {
1387 Util.toggleFullScreen(); 1386 Util.toggleFullScreen();
1388 } 1387 }
1389 }, 1388 },
1390 mounted() { 1389 mounted() {
1391 this.getTeacherList(); 1390 this.getTeacherList();
1392 // console.log("Id",this.$store.state.id) 1391 // console.log("Id",this.$store.state.id)
1393 // console.log("token",this.$store.state.token) 1392 // console.log("token",this.$store.state.token)
1394 }, 1393 },
1395 computed: { 1394 computed: {
1396 toolbarColor() { 1395 toolbarColor() {
1397 return this.$vuetify.options.extra.mainNav; 1396 return this.$vuetify.options.extra.mainNav;
1398 } 1397 }
1399 } 1398 }
1400 }; 1399 };
1401 </script> 1400 </script>
1402 <style scoped> 1401 <style scoped>
1403 .v-tabs__div { 1402 .v-tabs__div {
1404 text-transform: none; 1403 text-transform: none;
1405 } 1404 }
1406 .v-input__prepend-outer { 1405 .v-input__prepend-outer {
1407 margin-right: 0px !important; 1406 margin-right: 0px !important;
1408 } 1407 }
1409 .v-card__actions .v-btn { 1408 .v-card__actions .v-btn {
1410 margin: 0 15px; 1409 margin: 0 15px;
1411 min-width: 120px; 1410 min-width: 120px;
1412 } 1411 }
1413 .primary { 1412 .primary {
1414 background-color: #aaa !important; 1413 background-color: #aaa !important;
1415 border-color: #aaa !important; 1414 border-color: #aaa !important;
1416 } 1415 }
1417 h4 { 1416 h4 {
1418 background-repeat: no-repeat; 1417 background-repeat: no-repeat;
1419 padding: 8px; 1418 padding: 8px;
1420 margin: auto; 1419 margin: auto;
1421 font-size: 25px; 1420 font-size: 25px;
1422 } 1421 }
1423 #name { 1422 #name {
1424 position: absolute; 1423 position: absolute;
1425 left: 100px; 1424 left: 100px;
1426 top: 17px; 1425 top: 17px;
1427 } 1426 }
1428 #icon { 1427 #icon {
1429 position: absolute; 1428 position: absolute;
1430 right: 8px; 1429 right: 8px;
1431 top: 8px; 1430 top: 8px;
1432 } 1431 }
1433 #m { 1432 #m {
1434 position: relative; 1433 position: relative;
1435 left: 135px; 1434 left: 135px;
1436 top: -15px; 1435 top: -15px;
1437 } 1436 }
1438 #G { 1437 #G {
1439 position: absolute; 1438 position: absolute;
1440 top: 38px; 1439 top: 38px;
1441 color: white; 1440 color: white;
1442 } 1441 }
1443 #bt { 1442 #bt {
1444 position: relative; 1443 position: relative;
1445 top: -20px; 1444 top: -20px;
1446 left: 115px; 1445 left: 115px;
1447 } 1446 }
1448 #e { 1447 #e {
1449 position: relative; 1448 position: relative;
1450 top: 5px; 1449 top: 5px;
1451 right: -30px; 1450 right: -30px;
1452 height: 17px; 1451 height: 17px;
1453 cursor: pointer; 1452 cursor: pointer;
1454 } 1453 }
1455 #d { 1454 #d {
1456 position: relative; 1455 position: relative;
1457 top: 5px; 1456 top: 5px;
1458 right: -70px; 1457 right: -70px;
1459 height: 17px; 1458 height: 17px;
1460 cursor: pointer; 1459 cursor: pointer;
1461 } 1460 }
1462 #td { 1461 #td {
1463 border: 1px solid #dddddd; 1462 border: 1px solid #dddddd;
1464 text-align: left; 1463 text-align: left;
1465 padding: 8px; 1464 padding: 8px;
1466 } 1465 }
1467 #dialog { 1466 #dialog {
1468 height: 550px; 1467 height: 550px;
1469 } 1468 }
1470 .active { 1469 .active {
1471 background-color: black; 1470 background-color: black;
1472 color: white !important; 1471 color: white !important;
1473 } 1472 }
1474 .activebtn { 1473 .activebtn {
1475 color: black !important; 1474 color: black !important;
1476 } 1475 }
1477 #flex { 1476 #flex {
1478 height: 300px; 1477 height: 300px;
1479 } 1478 }
1480 .v-tabs__item a { 1479 .v-tabs__item a {
1481 font-size: 16px !important; 1480 font-size: 16px !important;
1482 } 1481 }
1483 @media screen and (max-width: 769px) { 1482 @media screen and (max-width: 769px) {
1484 .top { 1483 .top {
1485 margin-top: 0 !important; 1484 margin-top: 0 !important;
1486 } 1485 }
1487 .userSearch .v-icon { 1486 .userSearch .v-icon {
1488 font-size: 20px !important; 1487 font-size: 20px !important;
1489 margin-left: 20px; 1488 margin-left: 20px;
1490 } 1489 }
1491 } 1490 }
1492 1491
1493 @media screen and (max-width: 380px) { 1492 @media screen and (max-width: 380px) {
1494 .pl-3 { 1493 .pl-3 {
1495 padding-left: 0px !important; 1494 padding-left: 0px !important;
1496 } 1495 }
1497 .right { 1496 .right {
1498 float: none !important; 1497 float: none !important;
1499 } 1498 }
1500 .subheading { 1499 .subheading {
1501 font-size: 14px !important; 1500 font-size: 14px !important;
1502 } 1501 }
1503 .v-card__actions .v-btn { 1502 .v-card__actions .v-btn {
1504 margin: 0 0px; 1503 margin: 0 0px;
1505 min-width: 100px; 1504 min-width: 100px;
1506 } 1505 }
1507 .presentInput{ 1506 .presentInput{
1508 padding-left:48px !important; 1507 padding-left:48px !important;
1509 } 1508 }
1510 /* .searchIcon .v-icon { 1509 /* .searchIcon .v-icon {
1511 font-size: 20px; 1510 font-size: 20px;
1512 margin-left: 20px; 1511 margin-left: 20px;
1513 } */ 1512 } */
1514 .subheading { 1513 .subheading {
1515 font-size: 12px !important; 1514 font-size: 12px !important;
1516 } 1515 }
1517 h5 { 1516 h5 {
1518 font-size: 13px; 1517 font-size: 13px;
1519 } 1518 }
1520 .pl-4{ 1519 .pl-4{
1521 padding-left: 0px !important; 1520 padding-left: 0px !important;
1522 1521
1523 } 1522 }
1524 } 1523 }
1525 .v-icon { 1524 .v-icon {
1526 font-size: 30px; 1525 font-size: 30px;
1527 } 1526 }
1528 @media screen and (min-width: 1270px) { 1527 @media screen and (min-width: 1270px) {
1529 .hide { 1528 .hide {
1530 display: none; 1529 display: none;
1531 } 1530 }
1532 /* } 1531 /* }
1533 @media screen and (max-width: 962px) { 1532 @media screen and (max-width: 962px) {
1534 .imglogo{ 1533 .imglogo{
1535 position: absolute; 1534 position: absolute;
1536 top: 13px; 1535 top: 13px;
1537 left: 13px !important; 1536 left: 13px !important;
1538 width: 70px; 1537 width: 70px;