viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 5f1d4b44471028b31ecc16626e4247535cff1eab

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

fix design and fix api notification all pages or add loader all submit(add) button

Showing 7 changed files with 64 additions and 43 deletions   Show diff stats
src/pages/Class/addclass.vue
Diff comments   View file @5f1d4b4
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>
215 <v-flex offset-xs5> 215 <v-flex offset-xs5>
216 <v-avatar size="55px"> 216 <v-avatar size="55px">
217 <img src="/static/icon/user.png"> 217 <img src="/static/icon/user.png">
218 </v-avatar> 218 </v-avatar>
219 </v-flex> 219 </v-flex>
220 <v-form ref="form" v-model="valid" lazy-validation> 220 <v-form ref="form" v-model="valid" lazy-validation>
221 <v-layout> 221 <v-layout>
222 <v-flex xs4 class="pt-4 subheading"> 222 <v-flex xs4 class="pt-4 subheading">
223 <label class="right">Class :</label> 223 <label class="right">Class :</label>
224 </v-flex> 224 </v-flex>
225 <v-flex xs6 class="ml-3"> 225 <v-flex xs6 class="ml-3">
226 <v-autocomplete 226 <v-autocomplete
227 v-model="addclasses.classNum" 227 v-model="addclasses.classNum"
228 placeholder="fill your class Name" 228 placeholder="fill your class Name"
229 type="text" 229 type="text"
230 :items="classList" 230 :items="classList"
231 :rules="nameRules" 231 :rules="nameRules"
232 required 232 required
233 ></v-autocomplete> 233 ></v-autocomplete>
234 </v-flex> 234 </v-flex>
235 </v-layout> 235 </v-layout>
236 <v-layout> 236 <v-layout>
237 <v-flex xs12 sm9 offset-sm2> 237 <v-flex xs12 sm9 offset-sm2>
238 <v-card-actions> 238 <v-card-actions>
239 <v-btn @click="clear" round dark>clear</v-btn> 239 <v-btn @click="clear" round dark>clear</v-btn>
240 <v-spacer></v-spacer> 240 <v-spacer></v-spacer>
241 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 241 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
242 </v-card-actions> 242 </v-card-actions>
243 </v-flex> 243 </v-flex>
244 </v-layout> 244 </v-layout>
245 </v-form> 245 </v-form>
246 </v-flex> 246 </v-flex>
247 </v-layout> 247 </v-layout>
248 </v-container> 248 </v-container>
249 </v-card> 249 </v-card>
250 </v-flex> 250 </v-flex>
251 </v-container> 251 </v-container>
252 </v-tab-item> 252 </v-tab-item>
253 </v-tabs> 253 </v-tabs>
254 <div class="loader" v-if="showLoader"> 254 <div class="loader" v-if="showLoader">
255 <v-progress-circular indeterminate color="white"></v-progress-circular> 255 <v-progress-circular indeterminate color="white"></v-progress-circular>
256 </div> 256 </div>
257 </v-app> 257 </v-app>
258 </template> 258 </template>
259 259
260 <script> 260 <script>
261 import http from "@/Services/http.js"; 261 import http from "@/Services/http.js";
262 import Util from "@/util"; 262 import Util from "@/util";
263 263
264 export default { 264 export default {
265 data: () => ({ 265 data: () => ({
266 snackbar: false, 266 snackbar: false,
267 y: "top", 267 y: "top",
268 x: "right", 268 x: "right",
269 mode: "", 269 mode: "",
270 timeout: 3000, 270 timeout: 3000,
271 text: "", 271 text: "",
272 showLoader:false, 272 showLoader:false,
273 loading: false, 273 loading: false,
274 date: null, 274 date: null,
275 search: "", 275 search: "",
276 dialog: false, 276 dialog: false,
277 dialog1: false, 277 dialog1: false,
278 valid: true, 278 valid: true,
279 isActive: true, 279 isActive: true,
280 newActive: false, 280 newActive: false,
281 AddUsercredentials: {}, 281 AddUsercredentials: {},
282 pagination: { 282 pagination: {
283 rowsPerPage: 15 283 rowsPerPage: 15
284 }, 284 },
285 nameRules: [v => !!v || " Full Name is required"], 285 nameRules: [v => !!v || " Full Name is required"],
286 headers: [ 286 headers: [
287 { 287 {
288 text: "No", 288 text: "No",
289 align: "left", 289 align: "left",
290 sortable: false, 290 sortable: false,
291 value: "No" 291 value: "No"
292 }, 292 },
293 { text: "Class No", value: "classNum", sortable: false, align: "center" }, 293 { text: "Class No", value: "classNum", sortable: false, align: "center" },
294 294
295 { text: "Action", value: "", sortable: false, align: "center" } 295 { text: "Action", value: "", sortable: false, align: "center" }
296 ], 296 ],
297 desserts: [], 297 desserts: [],
298 classList:[ 298 classList:[
299 "1", 299 "1",
300 "2", 300 "2",
301 "3", 301 "3",
302 "4", 302 "4",
303 "5", 303 "5",
304 "6", 304 "6",
305 "7", 305 "7",
306 "8", 306 "8",
307 "9", 307 "9",
308 "10", 308 "10",
309 "11", 309 "11",
310 "12" 310 "12"
311 ], 311 ],
312 editedIndex: -1, 312 editedIndex: -1,
313 editedItem: { 313 editedItem: {
314 classNum: "" 314 classNum: ""
315 }, 315 },
316 addclasses:{ 316 addclasses:{
317 classNum: "" 317 classNum: ""
318 }, 318 },
319 defaultItem: { 319 defaultItem: {
320 classNum: "" 320 classNum: ""
321 }, 321 },
322 items: [ 322 items: [
323 { 323 {
324 href: "/changepassword", 324 href: "/changepassword",
325 title: "Change Password", 325 title: "Change Password",
326 click: e => { 326 click: e => {
327 console.log(e); 327 console.log(e);
328 } 328 }
329 }, 329 },
330 { 330 {
331 href: "#", 331 href: "#",
332 title: "Logout", 332 title: "Logout",
333 click: e => { 333 click: e => {
334 window.getApp.$emit("APP_LOGOUT"); 334 window.getApp.$emit("APP_LOGOUT");
335 } 335 }
336 } 336 }
337 ] 337 ]
338 }), 338 }),
339 methods: { 339 methods: {
340 getClassList() { 340 getClassList() {
341 this.showLoader = true; 341 this.showLoader = true;
342 var token = this.$store.state.token; 342 var token = this.$store.state.token;
343 http() 343 http()
344 .get("/getClassesList") 344 .get("/getClassesList")
345 .then(response => { 345 .then(response => {
346 this.desserts = response.data.data; 346 this.desserts = response.data.data;
347 this.showLoader = false; 347 this.showLoader = false;
348 // console.log("getClassList=====>", response); 348 // console.log("getClassList=====>", response);
349 }) 349 })
350 .catch(err => { 350 .catch(err => {
351 console.log("err====>", err); 351 console.log("err====>", err);
352 this.showLoader = false; 352 this.showLoader = false;
353 this.$router.replace({ path: "/" }); 353 this.$router.replace({ path: "/" });
354 }); 354 });
355 }, 355 },
356 editItem(item) { 356 editItem(item) {
357 this.editedIndex = this.desserts.indexOf(item); 357 this.editedIndex = this.desserts.indexOf(item);
358 this.editedItem = Object.assign({}, item); 358 this.editedItem = Object.assign({}, item);
359 this.dialog = true; 359 this.dialog = true;
360 }, 360 },
361 profile(item) { 361 profile(item) {
362 this.editedIndex = this.desserts.indexOf(item); 362 this.editedIndex = this.desserts.indexOf(item);
363 this.editedItem = Object.assign({}, item); 363 this.editedItem = Object.assign({}, item);
364 this.dialog1 = true; 364 this.dialog1 = true;
365 }, 365 },
366 deleteItem(item) { 366 deleteItem(item) {
367 let deleteStudent = { 367 let deleteStudent = {
368 classId: item._id 368 classId: item._id
369 }; 369 };
370 http() 370 http()
371 .delete( 371 .delete(
372 "/deleteClass", 372 "/deleteClass",
373 confirm("Are you sure you want to delete this?") && { 373 confirm("Are you sure you want to delete this?") && {
374 params: deleteStudent 374 params: deleteStudent
375 } 375 }
376 ) 376 )
377 .then(response => { 377 .then(response => {
378 // console.log("deleteUers",deleteStudent) 378 // console.log("deleteUers",deleteStudent)
379 if ((this.snackbar = true)) { 379 if ((this.snackbar = true)) {
380 this.text = "Successfully delete Existing User"; 380 this.text = "Successfully delete Existing Class";
381 } 381 }
382 this.getClassList(); 382 this.getClassList();
383 }) 383 })
384 .catch(error => { 384 .catch(error => {
385 // console.log(error); 385 // console.log(error);
386 }); 386 });
387 }, 387 },
388 activeTab(type) { 388 activeTab(type) {
389 switch (type) { 389 switch (type) {
390 case "existing": 390 case "existing":
391 this.newActive = false; 391 this.newActive = false;
392 this.isActive = true; 392 this.isActive = true;
393 break; 393 break;
394 394
395 default: 395 default:
396 this.newActive = true; 396 this.newActive = true;
397 this.isActive = false; 397 this.isActive = false;
398 break; 398 break;
399 } 399 }
400 }, 400 },
401 close() { 401 close() {
402 this.dialog = false; 402 this.dialog = false;
403 setTimeout(() => { 403 setTimeout(() => {
404 this.editedItem = Object.assign({}, this.defaultItem); 404 this.editedItem = Object.assign({}, this.defaultItem);
405 this.editedIndex = -1; 405 this.editedIndex = -1;
406 }, 300); 406 }, 300);
407 }, 407 },
408 close1() { 408 close1() {
409 this.dialog1 = false; 409 this.dialog1 = false;
410 }, 410 },
411 submit() { 411 submit() {
412 if (this.$refs.form.validate()) { 412 if (this.$refs.form.validate()) {
413 let addClass = { 413 let addClass = {
414 classNum: this.addclasses.classNum 414 classNum: this.addclasses.classNum
415 }; 415 };
416 console.log(addClass); 416 console.log(addClass);
417 this.loading = true;
417 http() 418 http()
418 .post("/createClass", addClass) 419 .post("/createClass", addClass)
419 .then(response => { 420 .then(response => {
420 this.getClassList(); 421 this.getClassList();
421 if ((this.snackbar = true)) { 422 if ((this.snackbar = true)) {
422 this.text = "New user added successfully"; 423 this.text = "New class added successfully";
423 } 424 }
424
425 this.clear(); 425 this.clear();
426 this.loading = false;
426 }) 427 })
427 .catch(error => { 428 .catch(error => {
428 // console.log(error); 429 // console.log(error);
430 this.loading = false;
429 if ((this.snackbar = true)) { 431 if ((this.snackbar = true)) {
430 this.text = error.response.data.message; 432 this.text = error.response.data.message;
431 } 433 }
432 }); 434 });
433 } 435 }
434 }, 436 },
435 mail() {}, 437 mail() {},
436 download() {}, 438 download() {},
437 clear() { 439 clear() {
438 this.$refs.form.reset(); 440 this.$refs.form.reset();
439 }, 441 },
440 save() { 442 save() {
441 let editClass = { 443 let editClass = {
442 classId: this.editedItem._id, 444 classId: this.editedItem._id,
443 classNum: this.editedItem.classNum 445 classNum: this.editedItem.classNum
444 }; 446 };
445 http() 447 http()
446 .put("/updateClass", editClass) 448 .put("/updateClass", editClass)
447 .then(response => { 449 .then(response => {
448 console.log("editClass", editClass); 450 console.log("editClass", editClass);
449 if ((this.snackbar = true)) { 451 if ((this.snackbar = true)) {
450 this.text = "Successfully Edit Existing User"; 452 this.text = "Successfully Edit Existing Class";
451 } 453 }
452 this.getClassList(); 454 this.getClassList();
453 }) 455 })
454 .catch(error => { 456 .catch(error => {
455 // console.log(error); 457 // console.log(error);
456 }); 458 });
457 this.close(); 459 this.close();
458 }, 460 },
459 handleDrawerToggle() { 461 handleDrawerToggle() {
460 window.getApp.$emit("APP_DRAWER_TOGGLED"); 462 window.getApp.$emit("APP_DRAWER_TOGGLED");
461 }, 463 },
462 handleFullScreen() { 464 handleFullScreen() {
463 Util.toggleFullScreen(); 465 Util.toggleFullScreen();
464 } 466 }
465 }, 467 },
466 mounted() { 468 mounted() {
467 this.getClassList(); 469 this.getClassList();
468 }, 470 },
469 computed: { 471 computed: {
470 toolbarColor() { 472 toolbarColor() {
471 return this.$vuetify.options.extra.mainNav; 473 return this.$vuetify.options.extra.mainNav;
472 } 474 }
473 } 475 }
474 }; 476 };
475 </script> 477 </script>
476 <style> 478 <style>
477 .v-tabs__div { 479 .v-tabs__div {
478 text-transform: none; 480 text-transform: none;
479 } 481 }
480 .v-input__prepend-outer { 482 .v-input__prepend-outer {
481 margin-right: 0px !important; 483 margin-right: 0px !important;
482 } 484 }
483 .v-card__actions .v-btn { 485 .v-card__actions .v-btn {
484 margin: 0 15px; 486 margin: 0 15px;
485 min-width: 120px; 487 min-width: 120px;
486 } 488 }
487 .primary { 489 .primary {
488 background-color: #aaa !important; 490 background-color: #aaa !important;
489 border-color: #aaa !important; 491 border-color: #aaa !important;
490 } 492 }
491 h4 { 493 h4 {
492 background-repeat: no-repeat; 494 background-repeat: no-repeat;
493 padding: 8px; 495 padding: 8px;
494 margin: auto; 496 margin: auto;
495 font-size: 25px; 497 font-size: 25px;
496 } 498 }
497 #name { 499 #name {
498 position: absolute; 500 position: absolute;
499 left: 100px; 501 left: 100px;
500 top: 17px; 502 top: 17px;
501 } 503 }
502 #icon { 504 #icon {
503 position: absolute; 505 position: absolute;
504 right: 8px; 506 right: 8px;
505 top: 8px; 507 top: 8px;
506 } 508 }
507 #m { 509 #m {
508 position: relative; 510 position: relative;
509 left: 135px; 511 left: 135px;
510 top: -15px; 512 top: -15px;
511 } 513 }
512 #G { 514 #G {
513 position: absolute; 515 position: absolute;
514 top: 38px; 516 top: 38px;
515 color: white; 517 color: white;
516 } 518 }
517 #bt { 519 #bt {
518 position: relative; 520 position: relative;
519 top: -20px; 521 top: -20px;
520 left: 115px; 522 left: 115px;
521 } 523 }
522 #e { 524 #e {
523 position: relative; 525 position: relative;
524 top: 5px; 526 top: 5px;
525 right: -30px; 527 right: -30px;
526 height: 17px; 528 height: 17px;
527 cursor: pointer; 529 cursor: pointer;
528 } 530 }
529 #d { 531 #d {
530 position: relative; 532 position: relative;
531 top: 5px; 533 top: 5px;
532 right: -70px; 534 right: -70px;
533 height: 17px; 535 height: 17px;
534 cursor: pointer; 536 cursor: pointer;
535 } 537 }
536 #indexId{ 538 #indexId{
537 padding: 0 0px !important; 539 padding: 0 0px !important;
538 } 540 }
539 #td { 541 #td {
540 border: 1px solid #dddddd; 542 border: 1px solid #dddddd;
541 text-align: left; 543 text-align: left;
542 padding: 8px; 544 padding: 8px;
543 } 545 }
544 #dialog { 546 #dialog {
545 height: 550px; 547 height: 550px;
546 } 548 }
547 .active { 549 .active {
548 background-color: black; 550 background-color: black;
549 color: white !important; 551 color: white !important;
550 } 552 }
551 .activebtn { 553 .activebtn {
552 color: black !important; 554 color: black !important;
553 } 555 }
554 #flex { 556 #flex {
555 height: 300px; 557 height: 300px;
556 } 558 }
557 .top { 559 .top {
558 margin-top: 100px; 560 margin-top: 100px;
559 } 561 }
560 .v-tabs__item a { 562 .v-tabs__item a {
561 font-size: 16px !important; 563 font-size: 16px !important;
562 } 564 }
563 @media screen and (max-width: 769px) { 565 @media screen and (max-width: 769px) {
564 .top { 566 .top {
565 margin-top: 0 !important; 567 margin-top: 0 !important;
566 } 568 }
567 .userSearch .v-icon { 569 .userSearch .v-icon {
568 font-size: 20px !important; 570 font-size: 20px !important;
569 margin-left: 20px; 571 margin-left: 20px;
570 } 572 }
571 } 573 }
572 @media screen and (max-width: 380px) { 574 @media screen and (max-width: 380px) {
573 .pl-3 { 575 .pl-3 {
574 padding-left: 0px !important; 576 padding-left: 0px !important;
575 } 577 }
576 .right { 578 .right {
577 float: none !important; 579 float: none !important;
578 } 580 }
579 .subheading { 581 .subheading {
580 font-size: 14px !important; 582 font-size: 14px !important;
581 } 583 }
582 .v-card__actions .v-btn { 584 .v-card__actions .v-btn {
583 margin: 0 0px; 585 margin: 0 0px;
584 min-width: 100px; 586 min-width: 100px;
585 } 587 }
586 .subheading { 588 .subheading {
587 font-size: 12px !important; 589 font-size: 12px !important;
588 } 590 }
589 h5 { 591 h5 {
590 font-size: 13px; 592 font-size: 13px;
591 } 593 }
592 } 594 }
593 .v-icon { 595 .v-icon {
594 font-size: 30px; 596 font-size: 30px;
595 } 597 }
596 @media screen and (min-width: 1270px) { 598 @media screen and (min-width: 1270px) {
597 .hide { 599 .hide {
598 display: none; 600 display: none;
599 } 601 }
600 } 602 }
601 @media screen and (max-width: 420px) { 603 @media screen and (max-width: 420px) {
602 .userSearch .v-text-field .v-label { 604 .userSearch .v-text-field .v-label {
603 line-height: 24px !important; 605 line-height: 24px !important;
604 } 606 }
605 .userSearch .v-label { 607 .userSearch .v-label {
606 font-size: 13px !important; 608 font-size: 13px !important;
607 } 609 }
608 .v-list__tile { 610 .v-list__tile {
609 font-size: 14px; 611 font-size: 14px;
610 padding: 0 10px; 612 padding: 0 10px;
611 } 613 }
612 .name { 614 .name {
613 font-size: 15px; 615 font-size: 15px;
614 } 616 }
615 } 617 }
src/pages/News/news.vue
Diff comments   View file @5f1d4b4
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">
77 <v-flex xs12 sm12> 77 <v-flex xs12 sm12>
78 <v-toolbar class="grey lighten-2"> 78 <v-toolbar class="grey lighten-2">
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 flat>
84 <v-form ref="form"> 84 <v-form ref="form">
85 <v-container fluid> 85 <v-container fluid>
86 <v-layout> 86 <v-layout>
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 mr-4"
90 > 90 >
91 <v-avatar size="150px"> 91 <v-avatar size="150px">
92 <img src="/static/icon/user.png" v-if="!editedItem.newsImageUrl"> 92 <img src="/static/icon/user.png" v-if="!editedItem.newsImageUrl">
93 <span v-for = "image in editedItem.newsImageUrl"> 93 <span v-for = "image in editedItem.newsImageUrl">
94 <img :src="image" alt="newsImage" v-if="editedItem.newsImageUrl"> 94 <img :src="image" alt="newsImage" v-if="editedItem.newsImageUrl">
95 </span> 95 </span>
96 </v-avatar> 96 </v-avatar> -->
97 <input 97 <input
98 type = "file" 98 type = "file"
99 style="display: none" 99 style="display: none"
100 ref="image" 100 ref="image"
101 accept="image/*" 101 accept="image/*"
102 @change="onFilePicked" 102 @change="onFilePicked"
103 > 103 >
104 <img 104 <v-flex align-center justify-center layout text-xs-center >
105 :src="editItem.newsImageUrl" 105 <!-- <v-avatar size="50px" style="position:absolute; top:20px;">
106 height="150" 106 <img src="/static/icon/user.png">
107 v-if="imageUrl" 107 </v-avatar> -->
108 style="border-radius:50%; width:200px" 108 <span v-for = "image in editedItem.newsImageUrl" class="mt-4 pa-2">
109 > 109 <img :src="image" alt="News" width="240" height="180">
110 </span>
110 </v-flex> 111 </v-flex>
112 <!-- </v-flex> -->
111 </v-layout> 113 </v-layout>
112 <v-layout> 114 <v-layout>
113 <v-flex xs12 sm12> 115 <v-flex xs12 sm12>
114 <v-layout> 116 <v-layout>
115 <v-flex xs4 class="pt-4 subheading"> 117 <v-flex xs4 class="pt-4 subheading">
116 <label class="right">Select Class:</label> 118 <label class="right">Select Class:</label>
117 </v-flex> 119 </v-flex>
118 <v-flex xs5 class="ml-3"> 120 <v-flex xs5 class="ml-3">
119 <v-select 121 <v-select
120 :items="addclass" 122 :items="addclass"
121 label="Select Class" 123 label="Select Class"
122 v-model="editedItem.select" 124 v-model="editedItem.select"
123 item-text="classNum" 125 item-text="classNum"
124 item-value="_id" 126 item-value="_id"
125 name="Select Class" 127 name="Select Class"
126 @change="getSections(editedItem.select)" 128 @change="getSections(editedItem.select)"
127 required 129 required
128 ></v-select> 130 ></v-select>
129 </v-flex> 131 </v-flex>
130 </v-layout> 132 </v-layout>
131 </v-flex> 133 </v-flex>
132 <v-flex xs12 sm12> 134 <v-flex xs12 sm12>
133 <v-layout> 135 <v-layout>
134 <v-flex xs4 class="pt-4 subheading"> 136 <v-flex xs4 class="pt-4 subheading">
135 <label class="right">Select Section:</label> 137 <label class="right">Select Section:</label>
136 </v-flex> 138 </v-flex>
137 <v-flex xs5 class="ml-3"> 139 <v-flex xs5 class="ml-3">
138 <v-select 140 <v-select
139 :items="addSection" 141 :items="addSection"
140 label="Select Section" 142 label="Select Section"
141 v-model="editedItem.selectSection" 143 v-model="editedItem.selectSection"
142 item-text="name" 144 item-text="name"
143 item-value="_id" 145 item-value="_id"
144 name="Select Section" 146 name="Select Section"
145 required 147 required
146 ></v-select> 148 ></v-select>
147 </v-flex> 149 </v-flex>
148 </v-layout> 150 </v-layout>
149 </v-flex> 151 </v-flex>
150 </v-layout> 152 </v-layout>
151 <v-layout> 153 <v-layout>
152 <v-flex xs12 sm12> 154 <v-flex xs12 sm12>
153 <v-layout> 155 <v-layout>
154 <v-flex xs4 class="pt-4 subheading"> 156 <v-flex xs4 class="pt-4 subheading">
155 <label class="right">Title:</label> 157 <label class="right">Title:</label>
156 </v-flex> 158 </v-flex>
157 <v-flex xs5 class="ml-3"> 159 <v-flex xs5 class="ml-3">
158 <v-text-field 160 <v-text-field
159 v-model="editedItem.title" 161 v-model="editedItem.title"
160 placeholder="fill your Title" 162 placeholder="fill your Title"
161 name="name" 163 name="name"
162 type="text" 164 type="text"
163 required 165 required
164 ></v-text-field> 166 ></v-text-field>
165 </v-flex> 167 </v-flex>
166 </v-layout> 168 </v-layout>
167 </v-flex> 169 </v-flex>
168 <v-flex xs12 sm12> 170 <v-flex xs12 sm12>
169 <v-layout> 171 <v-layout>
170 <v-flex xs4 class="pt-4 subheading"> 172 <v-flex xs4 class="pt-4 subheading">
171 <label class="right">Description:</label> 173 <label class="right">Description:</label>
172 </v-flex> 174 </v-flex>
173 <v-flex xs5 class="ml-3"> 175 <v-flex xs5 class="ml-3">
174 <v-text-field 176 <v-text-field
175 placeholder="fill your Description" 177 placeholder="fill your Description"
176 v-model="editedItem.description" 178 v-model="editedItem.description"
177 type="text" 179 type="text"
178 name="email" 180 name="email"
179 required 181 required
180 ></v-text-field> 182 ></v-text-field>
181 </v-flex> 183 </v-flex>
182 </v-layout> 184 </v-layout>
183 </v-flex> 185 </v-flex>
184 <v-flex xs12> 186 <v-flex xs12>
185 <v-layout> 187 <v-layout>
186 <v-flex xs4 class="pt-4 subheading"> 188 <v-flex xs4 class="pt-4 subheading">
187 <label class="right">Uplaod Image:</label> 189 <label class="right">Uplaod Image:</label>
188 </v-flex> 190 </v-flex>
189 <v-flex xs5 class="ml-3"> 191 <v-flex xs5 class="ml-3">
190 <v-text-field 192 <v-text-field
191 label="Select Image" 193 label="Select Image"
192 @click="pickFile" 194 @click="pickFile"
193 v-model="imageName" 195 v-model="imageName"
194 append-icon="attach_file" 196 append-icon="attach_file"
195 multiple 197 multiple
196 ></v-text-field> 198 ></v-text-field>
197 </v-flex> 199 </v-flex>
198 </v-layout> 200 </v-layout>
199 </v-flex> 201 </v-flex>
200 </v-layout> 202 </v-layout>
201 <v-layout> 203 <v-layout>
202 <v-flex xs12 sm8 offset-sm2> 204 <v-flex xs12 sm8 offset-sm2>
203 <v-card-actions> 205 <v-card-actions>
204 <v-btn round dark @click.native="close">Cancel</v-btn> 206 <v-btn round dark @click.native="close">Cancel</v-btn>
205 <v-spacer></v-spacer> 207 <v-spacer></v-spacer>
206 <v-btn round dark @click="save">Save</v-btn> 208 <v-btn round dark @click="save">Save</v-btn>
207 </v-card-actions> 209 </v-card-actions>
208 </v-flex> 210 </v-flex>
209 </v-layout> 211 </v-layout>
210 </v-container> 212 </v-container>
211 </v-form> 213 </v-form>
212 </v-card> 214 </v-card>
213 </v-flex> 215 </v-flex>
214 </v-dialog> 216 </v-dialog>
215 217
216 <!-- ****** PROFILE VIEW ALL NEWS DEATILS ****** --> 218 <!-- ****** PROFILE VIEW ALL NEWS DEATILS ****** -->
217 219
218 <v-dialog v-model="dialog1" max-width="800px"> 220 <v-dialog v-model="dialog1" max-width="800px">
219 <v-toolbar color="grey lighten-2"> 221 <v-toolbar color="grey lighten-2">
220 <v-spacer></v-spacer> 222 <v-spacer></v-spacer>
221 <v-toolbar-title><h3>News</h3></v-toolbar-title> 223 <v-toolbar-title><h3>News</h3></v-toolbar-title>
222 <v-spacer></v-spacer> 224 <v-spacer></v-spacer>
223 <v-icon @click="close1">close</v-icon> 225 <v-icon @click="close1">close</v-icon>
224 </v-toolbar> 226 </v-toolbar>
225 <v-card> 227 <v-card>
226 <v-flex align-center justify-center layout text-xs-center > 228 <v-flex align-center justify-center layout text-xs-center >
227 <!-- <v-avatar size="50px" style="position:absolute; top:20px;"> 229 <!-- <v-avatar size="50px" style="position:absolute; top:20px;">
228 <img src="/static/icon/user.png"> 230 <img src="/static/icon/user.png">
229 </v-avatar> --> 231 </v-avatar> -->
230 <span v-for = "image in editedItem.newsImageUrl" class="mt-4 pa-2"> 232 <span v-for = "image in editedItem.newsImageUrl" class="mt-4 pa-2">
231 <img :src="image" alt="News" width="240" height="180"> 233 <img :src="image" alt="News" width="240" height="180">
232 </span> 234 </span>
233 </v-flex> 235 </v-flex>
234 <v-card-text> 236 <v-card-text>
235 <v-container grid-list-md> 237 <v-container grid-list-md>
236 <v-layout wrap> 238 <v-layout wrap>
237 <v-flex> 239 <v-flex>
238 <v-layout> 240 <v-layout>
239 <v-flex xs5 sm6> 241 <v-flex xs5 sm6>
240 <h5 class = "right my-1"><b>Title:</b></h5> 242 <h5 class = "right my-1"><b>Title:</b></h5>
241 </v-flex> 243 </v-flex>
242 <v-flex sm6 xs8> 244 <v-flex sm6 xs8>
243 <h5 class="my-1">{{ editedItem.title }}</h5> 245 <h5 class="my-1">{{ editedItem.title }}</h5>
244 </v-flex> 246 </v-flex>
245 </v-layout> 247 </v-layout>
246 <v-layout> 248 <v-layout>
247 <v-flex xs5 sm6> 249 <v-flex xs5 sm6>
248 <h5 class="right my-1"><b>Description:</b></h5> 250 <h5 class="right my-1"><b>Description:</b></h5>
249 </v-flex> 251 </v-flex>
250 <v-flex sm6 xs8> 252 <v-flex sm6 xs8>
251 <h5 class="my-1">{{ editedItem.description }}</h5> 253 <h5 class="my-1">{{ editedItem.description }}</h5>
252 </v-flex> 254 </v-flex>
253 </v-layout> 255 </v-layout>
254 </v-flex> 256 </v-flex>
255 </v-layout> 257 </v-layout>
256 </v-container> 258 </v-container>
257 </v-card-text> 259 </v-card-text>
258 </v-card> 260 </v-card>
259 </v-dialog> 261 </v-dialog>
260 262
261 <v-snackbar 263 <v-snackbar
262 :timeout="timeout" 264 :timeout="timeout"
263 :top="y === 'top'" 265 :top="y === 'top'"
264 :right="x === 'right'" 266 :right="x === 'right'"
265 :vertical="mode === 'vertical'" 267 :vertical="mode === 'vertical'"
266 v-model="snackbar" 268 v-model="snackbar"
267 color="success" 269 color="success"
268 >{{ text }}</v-snackbar> 270 >{{ text }}</v-snackbar>
269 271
270 <!-- ****** EXISTING-USERS NEWS TABLE ****** --> 272 <!-- ****** EXISTING-USERS NEWS TABLE ****** -->
271 <v-data-table 273 <v-data-table
272 :headers="headers" 274 :headers="headers"
273 :items="desserts" 275 :items="desserts"
274 :pagination.sync="pagination" 276 :pagination.sync="pagination"
275 :search="search" 277 :search="search"
276 > 278 >
277 <template slot="items" slot-scope="props"> 279 <template slot="items" slot-scope="props">
278 <td class="text-xs-center">{{ props.index}}</td> 280 <td class="text-xs-center">{{ props.index}}</td>
279 <td id="td"class="text-xs-center"> 281 <td id="td"class="text-xs-center">
280 <span v-for = "image in props.item.newsImageUrl" class="pa-2"> 282 <span v-for = "image in props.item.newsImageUrl" class="pa-2">
281 <v-avatar size = "70"> 283 <!-- <v-avatar size = "70"> -->
282 <img :src="image" alt=""> 284 <img :src="image" alt="newsImage" width="100" height="70">
283 </v-avatar> 285 <!-- </v-avatar> -->
284 </span> 286 </span>
285 </td> 287 </td>
286 <td id="td" class="text-xs-center">{{ props.item.title}}</td> 288 <td id="td" class="text-xs-center">{{ props.item.title}}</td>
287 <td id="td" class="text-xs-center">{{ props.item.description}}</td> 289 <td id="td" class="text-xs-center">{{ props.item.description}}</td>
288 290
289 <td class="text-xs-center"> 291 <td class="text-xs-center">
290 <span> 292 <span>
291 <img 293 <img
292 style="cursor:pointer; width:25px; height:18px; " 294 style="cursor:pointer; width:25px; height:18px; "
293 class="mr-5" 295 class="mr-5"
294 @click="profile(props.item)" 296 @click="profile(props.item)"
295 src="/static/icon/eye1.png" 297 src="/static/icon/eye1.png"
296 > 298 >
297 <img 299 <img
298 style="cursor:pointer; width:20px; height:18px; " 300 style="cursor:pointer; width:20px; height:18px; "
299 class="mr-5" 301 class="mr-5"
300 @click="editItem(props.item)" 302 @click="editItem(props.item)"
301 src="/static/icon/edit1.png" 303 src="/static/icon/edit1.png"
302 > 304 >
303 <img 305 <img
304 style="cursor:pointer; height:20px; " 306 style="cursor:pointer; height:20px; "
305 class="mr-5" 307 class="mr-5"
306 @click="deleteItem(props.item)" 308 @click="deleteItem(props.item)"
307 src="/static/icon/delete1.png" 309 src="/static/icon/delete1.png"
308 > 310 >
309 </span> 311 </span>
310 </td> 312 </td>
311 </template> 313 </template>
312 <v-alert 314 <v-alert
313 slot="no-results" 315 slot="no-results"
314 :value="true" 316 :value="true"
315 color="error" 317 color="error"
316 icon="warning" 318 icon="warning"
317 >Your search for "{{ search }}" found no results.</v-alert> 319 >Your search for "{{ search }}" found no results.</v-alert>
318 </v-data-table> 320 </v-data-table>
319 </v-tab-item> 321 </v-tab-item>
320 322
321 <!-- ****** ADD MULTIPLE NEWS ****** --> 323 <!-- ****** ADD MULTIPLE NEWS ****** -->
322 324
323 <v-tab-item> 325 <v-tab-item>
324 <v-container> 326 <v-container>
325 <v-snackbar 327 <v-snackbar
326 :timeout="timeout" 328 :timeout="timeout"
327 :top="y === 'top'" 329 :top="y === 'top'"
328 :right="x === 'right'" 330 :right="x === 'right'"
329 :vertical="mode === 'vertical'" 331 :vertical="mode === 'vertical'"
330 v-model="snackbar" 332 v-model="snackbar"
331 color="success" 333 color="success"
332 >{{ text }}</v-snackbar> 334 >{{ text }}</v-snackbar>
333 <v-flex xs12 sm12 class="my-4"> 335 <v-flex xs12 sm12 class="my-4">
334 <v-card flat> 336 <v-card flat>
335 <v-form ref="form" v-model="valid" lazy-validation> 337 <v-form ref="form" v-model="valid" lazy-validation>
336 <v-container fluid> 338 <v-container fluid>
337 <v-layout> 339 <v-layout>
338 <v-flex 340 <v-flex
339 xs6 offset-sm3 341 xs6 offset-sm3
340 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" 342 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
341 > 343 >
342 <input 344 <input
343 type="file" 345 type="file"
344 style = "display: none" 346 style = "display: none"
345 ref="image" 347 ref="image"
346 accept="image/*" 348 accept="image/*"
347 multiple 349 multiple
348 @change="onFilePicked" 350 @change="onFilePicked"
349 > 351 >
350 <v-layout> 352 <v-layout>
351 <v-flex v-for="(file, index) in files" :key="index"> 353 <v-flex v-for="(file, index) in files" :key="index">
352 <v-avatar size="140"> 354 <v-avatar size="140">
353 <img :src = "file.url" height="200" width="320px;"> 355 <img :src = "file.url" height="200" width="320px;">
354 </v-avatar> 356 </v-avatar>
355 </v-flex> 357 </v-flex>
356 </v-layout> 358 </v-layout>
357 </v-flex> 359 </v-flex>
358 </v-layout> 360 </v-layout>
359 <v-flex xs12> 361 <v-flex xs12>
360 <v-layout> 362 <v-layout>
361 <v-flex xs4 class="pt-4 subheading"> 363 <v-flex xs4 class="pt-4 subheading">
362 <label class="right">Title:</label> 364 <label class="right">Title:</label>
363 </v-flex> 365 </v-flex>
364 <v-flex xs4 class="ml-3"> 366 <v-flex xs4 class="ml-3">
365 <v-text-field 367 <v-text-field
366 v-model="addNews.title" 368 v-model="addNews.title"
367 placeholder="fill your Title" 369 placeholder="fill your Title"
368 name="name" 370 name="name"
369 type="text" 371 type="text"
370 :rules="titleRules" 372 :rules="titleRules"
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-flex xs12> 378 <v-flex xs12>
377 <v-layout> 379 <v-layout>
378 <v-flex xs4 class="pt-4 subheading"> 380 <v-flex xs4 class="pt-4 subheading">
379 <label class="right">Description:</label> 381 <label class="right">Description:</label>
380 </v-flex> 382 </v-flex>
381 <v-flex xs4 class="ml-3"> 383 <v-flex xs4 class="ml-3">
382 <v-text-field 384 <v-text-field
383 placeholder="fill your Description" 385 placeholder="fill your Description"
384 :rules="descriptionRules" 386 :rules="descriptionRules"
385 v-model="addNews.description" 387 v-model="addNews.description"
386 type="text" 388 type="text"
387 name="email" 389 name="email"
388 required 390 required
389 ></v-text-field> 391 ></v-text-field>
390 </v-flex> 392 </v-flex>
391 </v-layout> 393 </v-layout>
392 </v-flex> 394 </v-flex>
393 <v-flex xs12> 395 <v-flex xs12>
394 <v-layout> 396 <v-layout>
395 <v-flex xs4 class="pt-4 subheading"> 397 <v-flex xs4 class="pt-4 subheading">
396 <label class="right">Uplaod Image:</label> 398 <label class="right">Uplaod Image:</label>
397 </v-flex> 399 </v-flex>
398 <v-flex xs4 class="ml-3"> 400 <v-flex xs4 class="ml-3">
399 <v-text-field 401 <v-text-field
400 label="Select Image" 402 label="Select Image"
401 @click="pickFile" 403 @click="pickFile"
402 v-model="imageName" 404 v-model="imageName"
403 append-icon="attach_file" 405 append-icon="attach_file"
404 multiple 406 multiple
405 ></v-text-field> 407 ></v-text-field>
406 </v-flex> 408 </v-flex>
407 </v-layout> 409 </v-layout>
408 </v-flex> 410 </v-flex>
409 <v-layout> 411 <v-layout>
410 <v-flex xs12 sm6 offset-sm3> 412 <v-flex xs12 sm6 offset-sm3>
411 <v-card-actions> 413 <v-card-actions>
412 <v-btn @click="clear" round dark>clear</v-btn> 414 <v-btn @click="clear" round dark>clear</v-btn>
413 <v-spacer></v-spacer> 415 <v-spacer></v-spacer>
414 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 416 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
415 </v-card-actions> 417 </v-card-actions>
416 </v-flex> 418 </v-flex>
417 </v-layout> 419 </v-layout>
418 </v-container> 420 </v-container>
419 </v-form> 421 </v-form>
420 </v-card> 422 </v-card>
421 </v-flex> 423 </v-flex>
422 </v-container> 424 </v-container>
423 </v-tab-item> 425 </v-tab-item>
424 </v-tabs> 426 </v-tabs>
425 <div class="loader" v-if="showLoader"> 427 <div class="loader" v-if="showLoader">
426 <v-progress-circular indeterminate color="white"></v-progress-circular> 428 <v-progress-circular indeterminate color="white"></v-progress-circular>
427 </div> 429 </div>
428 </v-app> 430 </v-app>
429 </template> 431 </template>
430 432
431 <script> 433 <script>
432 import http from "@/Services/http.js"; 434 import http from "@/Services/http.js";
433 import Util from "@/util"; 435 import Util from "@/util";
434 436
435 export default { 437 export default {
436 data: () => ({ 438 data: () => ({
437 snackbar: false, 439 snackbar: false,
438 y: "top", 440 y: "top",
439 x: "right", 441 x: "right",
440 mode: "", 442 mode: "",
441 timeout: 3000, 443 timeout: 3000,
442 text: "", 444 text: "",
443 loading: false, 445 loading: false,
444 date: null, 446 date: null,
445 search: "", 447 search: "",
446 showLoader:false, 448 showLoader:false,
447 dialog: false, 449 dialog: false,
448 dialog1: false, 450 dialog1: false,
449 valid: true, 451 valid: true,
450 isActive: true, 452 isActive: true,
451 newActive: false, 453 newActive: false,
452 addclass: [], 454 addclass: [],
453 addSection: [], 455 addSection: [],
454 AddUsercredentials: {}, 456 AddUsercredentials: {},
455 pagination: { 457 pagination: {
456 rowsPerPage: 15 458 rowsPerPage: 15
457 }, 459 },
458 imageName: "", 460 imageName: "",
459 imageUrl: "", 461 imageUrl: "",
460 imageFile: "", 462 imageFile: "",
461 image: [], 463 image: [],
462 upload:"", 464 upload:"",
463 files:[], 465 files:[],
464 titleRules: [v => !!v || " Tilte is required"], 466 titleRules: [v => !!v || " Tilte is required"],
465 descriptionRules: [v => !!v || " Description is required"], 467 descriptionRules: [v => !!v || " Description is required"],
466 headers: [ 468 headers: [
467 { 469 {
468 align: "center", 470 align: "justify-center",
469 text: "No", 471 text: "No",
470 sortable: false, 472 sortable: false,
471 value: "No" 473 value: "No"
472 }, 474 },
473 { text: "Image", vaue: "image",sortable: false, align: "center"}, 475 { text: "Image", vaue: "image",sortable: false, align: "center"},
474 { text: "Title", value: "title", sortable: false, align: "center" }, 476 { text: "Title", value: "title", sortable: false, align: "center" },
475 { text: "Description", value: "description", sortable: false, align: "center" }, 477 { text: "Description", value: "description", sortable: false, align: "center" },
476 { text: "Action", value: "", sortable: false, align: "center" } 478 { text: "Action", value: "", sortable: false, align: "center" }
477 ], 479 ],
478 desserts: [{ 480 desserts: [{
479 image:"https://picsum.photos/500/300?image", 481 image:"https://picsum.photos/500/300?image",
480 title:"title", 482 title:"title",
481 description:"description", 483 description:"description",
482 484
483 }], 485 }],
484 editedIndex: -1, 486 editedIndex: -1,
485 addNews: { 487 addNews: {
486 title: "", 488 title: "",
487 description: "", 489 description: "",
488 }, 490 },
489 editedItem: { 491 editedItem: {
490 title: "", 492 title: "",
491 description: "", 493 description: "",
492 494
493 }, 495 },
494 defaultItem: { 496 defaultItem: {
495 title: "", 497 title: "",
496 description: "" 498 description: ""
497 }, 499 },
498 userName: "", 500 userName: "",
499 items: [ 501 items: [
500 { 502 {
501 href: "/changepassword", 503 href: "/changepassword",
502 title: "Change Password", 504 title: "Change Password",
503 click: e => { 505 click: e => {
504 console.log(e); 506 console.log(e);
505 } 507 }
506 }, 508 },
507 { 509 {
508 href: "#", 510 href: "#",
509 title: "Logout", 511 title: "Logout",
510 click: e => { 512 click: e => {
511 window.getApp.$emit("APP_LOGOUT"); 513 window.getApp.$emit("APP_LOGOUT");
512 } 514 }
513 } 515 }
514 ] 516 ]
515 }), 517 }),
516 methods: { 518 methods: {
517 getSections(_id) { 519 getSections(_id) {
518 console.log("_id",_id) 520 console.log("_id",_id)
519 var token = this.$store.state.token; 521 var token = this.$store.state.token;
520 http() 522 http()
521 .get( 523 .get(
522 "/getSectionsList", 524 "/getSectionsList",
523 { params: { classId: _id } }, 525 { params: { classId: _id } },
524 { 526 {
525 headers: { Authorization: "Bearer " + token } 527 headers: { Authorization: "Bearer " + token }
526 } 528 }
527 ) 529 )
528 .then(response => { 530 .then(response => {
529 this.addSection = response.data.data; 531 this.addSection = response.data.data;
530 // console.log("getSectionsList=====>", this.addSection); 532 // console.log("getSectionsList=====>", this.addSection);
531 }) 533 })
532 .catch(err => { 534 .catch(err => {
533 // console.log("err====>", err); 535 console.log("err====>", err);
534 // this.$router.replace({ path: '/' }); 536 // this.$router.replace({ path: '/' });
535 }); 537 });
536 }, 538 },
537 pickFile() { 539 pickFile() {
538 this.$refs.image.click(); 540 this.$refs.image.click();
539 }, 541 },
540 onFilePicked(e) { 542 onFilePicked(e) {
541 // console.log(e) 543 // console.log(e)
542 const files = e.target.files; 544 const files = e.target.files;
543 /** fetch Image Name **/ 545 /** fetch Image Name **/
544 if (files[0] !== undefined) { 546 if (files[0] !== undefined) {
545 this.imageName = files[0].name; 547 this.imageName = files[0].name;
546 if (this.imageName.lastIndexOf(".") <= 0) { 548 if (this.imageName.lastIndexOf(".") <= 0) {
547 return; 549 return;
548 } 550 }
549 this.files = []; 551 this.files = [];
550 console.log("files", this.files); 552 console.log("files", this.files);
551 /** Select many image and showing many image add to news card **/ 553 /** Select many image and showing many image add to news card **/
552 const test = Array.from(files).forEach((file, idx) => { 554 const test = Array.from(files).forEach((file, idx) => {
553 const fr = new FileReader(); 555 const fr = new FileReader();
554 const getResult = new Promise(resolve => { 556 const getResult = new Promise(resolve => {
555 fr.onload = e => { 557 fr.onload = e => {
556 this.files.push({ 558 this.files.push({
557 id: idx, 559 id: idx,
558 url: e.target.result 560 url: e.target.result
559 }); 561 });
560 }; 562 };
561 }); 563 });
562 fr.readAsDataURL(file); 564 fr.readAsDataURL(file);
563 return getResult.then(file => { 565 return getResult.then(file => {
564 return file; 566 return file;
565 }); 567 });
566 }); 568 });
567 const fr = new FileReader(); 569 const fr = new FileReader();
568 fr.readAsDataURL(files[0]); 570 fr.readAsDataURL(files[0]);
569 fr.addEventListener("load", () => { 571 fr.addEventListener("load", () => {
570 this.imageFile = files; // this is an image file that can be sent to server... 572 this.imageFile = files; // this is an image file that can be sent to server...
571 console.log("uploadImage=======>", this.imageFile ); 573 console.log("uploadImage=======>", this.imageFile );
572 }); 574 });
573 } else { 575 } else {
574 this.imageName = ""; 576 this.imageName = "";
575 this.imageFile = ""; 577 this.imageFile = "";
576 this.imageUrl = ""; 578 this.imageUrl = "";
577 } 579 }
578 }, 580 },
579 getNewsList() { 581 getNewsList() {
580 this.showLoader = true; 582 this.showLoader = true;
581 var token = this.$store.state.token; 583 var token = this.$store.state.token;
582 http() 584 http()
583 .get("/getNewsList", { 585 .get("/getNewsList", {
584 headers: { Authorization: "Bearer " + token } 586 headers: { Authorization: "Bearer " + token }
585 }) 587 })
586 .then(response => { 588 .then(response => {
587 this.desserts = response.data.data; 589 this.desserts = response.data.data;
588 this.showLoader = false; 590 this.showLoader = false;
589 // console.log("getNewsList=====>",this.desserts) 591 // console.log("getNewsList=====>",this.desserts)
590 }) 592 })
591 .catch(err => { 593 .catch(err => {
592 // console.log("err====>", err); 594 // console.log("err====>", err);
593 this.showLoader = false; 595 this.showLoader = false;
594 this.$router.replace({ path: "/" }); 596 this.$router.replace({ path: "/" });
595 }); 597 });
596 }, 598 },
597 editItem(item) { 599 editItem(item) {
598 this.editedIndex = this.desserts.indexOf(item); 600 this.editedIndex = this.desserts.indexOf(item);
599 this.editedItem = Object.assign({}, item); 601 this.editedItem = Object.assign({}, item);
600 this.dialog = true; 602 this.dialog = true;
601 }, 603 },
602 profile(item) { 604 profile(item) {
603 this.editedIndex = this.desserts.indexOf(item); 605 this.editedIndex = this.desserts.indexOf(item);
604 this.editedItem = Object.assign({}, item); 606 this.editedItem = Object.assign({}, item);
605 this.dialog1 = true; 607 this.dialog1 = true;
606 }, 608 },
607 deleteItem(item) { 609 deleteItem(item) {
608 let deleteNews = { 610 let deleteNews = {
609 newsId: item._id 611 newsId: item._id
610 }; 612 };
611 http() 613 http()
612 .delete( 614 .delete(
613 "/deleteNews", 615 "/deleteNews",
614 confirm("Are you sure you want to delete this?") && { 616 confirm("Are you sure you want to delete this?") && {
615 params: deleteNews 617 params: deleteNews
616 } 618 }
617 ) 619 )
618 .then(response => { 620 .then(response => {
619 // console.log("deleteNews",deleteNews) 621 // console.log("deleteNews",deleteNews)
620 if ((this.snackbar = true)) { 622 if ((this.snackbar = true)) {
621 this.text = "Successfully delete Existing User"; 623 this.text = "Successfully delete Existing News";
622 } 624 }
623 this.getNewsList(); 625 this.getNewsList();
624 }) 626 })
625 .catch(error => { 627 .catch(error => {
626 // console.log(error); 628 // console.log(error);
627 }); 629 });
628 }, 630 },
629 activeTab(type) { 631 activeTab(type) {
630 switch (type) { 632 switch (type) {
631 case "existing": 633 case "existing":
632 this.newActive = false; 634 this.newActive = false;
633 this.isActive = true; 635 this.isActive = true;
634 break; 636 break;
635 637
636 default: 638 default:
637 this.newActive = true; 639 this.newActive = true;
638 this.isActive = false; 640 this.isActive = false;
639 break; 641 break;
640 } 642 }
641 }, 643 },
642 close() { 644 close() {
643 this.dialog = false; 645 this.dialog = false;
644 setTimeout(() => { 646 setTimeout(() => {
645 this.editedItem = Object.assign({}, this.defaultItem); 647 this.editedItem = Object.assign({}, this.defaultItem);
646 this.editedIndex = -1; 648 this.editedIndex = -1;
647 }, 300); 649 }, 300);
648 }, 650 },
649 close1() { 651 close1() {
650 this.dialog1 = false; 652 this.dialog1 = false;
651 }, 653 },
652 submit() { 654 submit() {
653 console.log("===========>",this.image) 655 console.log("===========>",this.image)
654 this.loading = true; 656 this.loading = true;
655 if (this.$refs.form.validate()) { 657 if (this.$refs.form.validate()) {
656 let newsData = new FormData(); 658 let newsData = new FormData();
657 for( var i = 0; i < this.imageFile.length; i++ ){ 659 for( var i = 0; i < this.imageFile.length; i++ ){
658 let file = this.imageFile[i]; 660 let file = this.imageFile[i];
659 newsData.append("upload", file ); 661 newsData.append("upload", file );
660 } 662 }
661 newsData.append("title",this.addNews.title); 663 newsData.append("title",this.addNews.title);
662 newsData.append("description",this.addNews.description); 664 newsData.append("description",this.addNews.description);
663 console.log("newsDataData",newsData); 665 console.log("newsDataData",newsData);
664 666
665 http() 667 http()
666 .post("/createNews", newsData) 668 .post("/createNews", newsData)
667 .then(response => { 669 .then(response => {
668 console.log(newsData) 670 console.log(newsData)
669 if ((this.snackbar = true)) { 671 if ((this.snackbar = true)) {
670 this.text = "New user added successfully"; 672 this.text = "New News added successfully";
671 } 673 }
672 this.getNewsList(); 674 this.getNewsList();
673 this.loading = false; 675 this.loading = false;
674 this.clear(); 676 this.clear();
675 }) 677 })
676 .catch(error => { 678 .catch(error => {
677 if ((this.snackbar = true)) { 679 if ((this.snackbar = true)) {
678 this.text = error.response.data.message; 680 this.text = error.response.data.message;
679 } 681 }
680 }); 682 });
681 } 683 }
682 }, 684 },
683 mail() {}, 685 mail() {},
684 download() {}, 686 download() {},
685 clear() { 687 clear() {
686 this.$refs.form.reset(); 688 this.$refs.form.reset();
687 }, 689 },
688 save() { 690 save() {
689 // let imageData = new FormData();
690 // imageData.append("upload", this.imageFile);
691 // console.log(imageData);
692 // let editNews = {
693 // newsId: this.editedItem._id,
694 // title: this.editedItem.title,
695 // description: this.editedItem.description,
696 // // imageData
697 // };
698 let newsData = new FormData(); 691 let newsData = new FormData();
699 for( var i = 0; i < this.imageFile.length; i++ ){ 692 for( var i = 0; i < this.imageFile.length; i++ ){
700 let file = this.imageFile[i]; 693 let file = this.imageFile[i];
701 newsData.append("upload", file ); 694 newsData.append("upload", file );
702 } 695 }
703 newsData.append("title",this.editedItem.title); 696 newsData.append("title",this.editedItem.title);
704 newsData.append("description",this.editedItem.description); 697 newsData.append("description",this.editedItem.description);
705 http() 698 http()
706 .put("/updateNews", editNews) 699 .put("/updateNews", editNews)
707 .then(response => { 700 .then(response => {
708 // console.log("updateNews",updateNews); 701 // console.log("updateNews",updateNews);
709 if ((this.snackbar = true)) { 702 if ((this.snackbar = true)) {
710 this.text = "Successfully Edit Existing User"; 703 this.text = "Successfully Edit Existing News";
711 } 704 }
712 this.getNewsList(); 705 this.getNewsList();
713 }) 706 })
714 .catch(error => { 707 .catch(error => {
715 // console.log(error); 708 // console.log(error);
716 }); 709 });
717 this.close(); 710 this.close();
718 }, 711 },
719 handleDrawerToggle() { 712 handleDrawerToggle() {
720 window.getApp.$emit("APP_DRAWER_TOGGLED"); 713 window.getApp.$emit("APP_DRAWER_TOGGLED");
721 }, 714 },
722 handleFullScreen() { 715 handleFullScreen() {
723 Util.toggleFullScreen(); 716 Util.toggleFullScreen();
724 } 717 }
725 }, 718 },
726 mounted() { 719 mounted() {
727 this.getNewsList(); 720 this.getNewsList();
728 var token = this.$store.state.token; 721 var token = this.$store.state.token;
729 http() 722 http()
730 .get("/getClassesList", { 723 .get("/getClassesList", {
731 headers: { Authorization: "Bearer " + token } 724 headers: { Authorization: "Bearer " + token }
732 }) 725 })
733 .then(response => { 726 .then(response => {
734 this.addclass = response.data.data; 727 this.addclass = response.data.data;
735 // console.log("getClassesList=====>",this.addclass) 728 // console.log("getClassesList=====>",this.addclass)
736 }) 729 })
737 .catch(err => { 730 .catch(err => {
738 // console.log("err====>", err); 731 // console.log("err====>", err);
739 }); 732 });
740 this.editItem 733 this.editItem
741 }, 734 },
742 computed: { 735 computed: {
743 toolbarColor() { 736 toolbarColor() {
744 return this.$vuetify.options.extra.mainNav; 737 return this.$vuetify.options.extra.mainNav;
745 } 738 }
746 } 739 }
747 }; 740 };
748 </script> 741 </script>
749 <style scoped> 742 <style scoped>
750 .pl-3 { 743 .pl-3 {
751 padding-left: 0px !important; 744 padding-left: 0px !important;
752 } 745 }
753 .v-tabs__div { 746 .v-tabs__div {
754 text-transform: none; 747 text-transform: none;
755 } 748 }
756 .v-input__prepend-outer { 749 .v-input__prepend-outer {
757 margin-right: 0px !important; 750 margin-right: 0px !important;
758 } 751 }
759 .v-card__actions .v-btn { 752 .v-card__actions .v-btn {
760 margin: 0 15px; 753 margin: 0 15px;
761 min-width: 120px; 754 min-width: 120px;
762 } 755 }
763 .primary { 756 .primary {
764 background-color: #aaa !important; 757 background-color: #aaa !important;
765 border-color: #aaa !important; 758 border-color: #aaa !important;
766 } 759 }
767 h4 { 760 h4 {
768 background-repeat: no-repeat; 761 background-repeat: no-repeat;
769 padding: 8px; 762 padding: 8px;
770 margin: auto; 763 margin: auto;
771 font-size: 25px; 764 font-size: 25px;
772 } 765 }
773 #name { 766 #name {
774 position: absolute; 767 position: absolute;
775 left: 100px; 768 left: 100px;
776 top: 17px; 769 top: 17px;
777 } 770 }
778 #icon { 771 #icon {
779 position: absolute; 772 position: absolute;
780 right: 8px; 773 right: 8px;
781 top: 8px; 774 top: 8px;
782 } 775 }
783 #m { 776 #m {
784 position: relative; 777 position: relative;
785 left: 135px; 778 left: 135px;
786 top: -15px; 779 top: -15px;
787 } 780 }
788 #G { 781 #G {
789 position: absolute; 782 position: absolute;
790 top: 38px; 783 top: 38px;
791 color: white; 784 color: white;
792 } 785 }
793 #bt { 786 #bt {
794 position: relative; 787 position: relative;
795 top: -20px; 788 top: -20px;
796 left: 115px; 789 left: 115px;
797 } 790 }
798 #e { 791 #e {
799 position: relative; 792 position: relative;
800 top: 5px; 793 top: 5px;
801 right: -30px; 794 right: -30px;
802 height: 17px; 795 height: 17px;
803 cursor: pointer; 796 cursor: pointer;
804 } 797 }
805 #d { 798 #d {
806 position: relative; 799 position: relative;
807 top: 5px; 800 top: 5px;
808 right: -70px; 801 right: -70px;
809 height: 17px; 802 height: 17px;
810 cursor: pointer; 803 cursor: pointer;
811 } 804 }
812 #td { 805 #td {
813 border: 1px solid #dddddd; 806 border: 1px solid #dddddd;
814 text-align: left; 807 text-align: left;
815 padding: 8px; 808 padding: 8px;
816 } 809 }
817 #dialog { 810 #dialog {
818 height: 550px; 811 height: 550px;
819 } 812 }
820 .active { 813 .active {
821 background-color: black; 814 background-color: black;
822 color: white !important; 815 color: white !important;
823 } 816 }
824 .activebtn { 817 .activebtn {
825 color: black !important; 818 color: black !important;
826 } 819 }
827 #flex { 820 #flex {
828 height: 300px; 821 height: 300px;
829 } 822 }
830 .top { 823 .top {
831 margin-top: 100px; 824 margin-top: 100px;
832 } 825 }
833 .v-tabs__item a { 826 .v-tabs__item a {
834 font-size: 16px !important; 827 font-size: 16px !important;
835 } 828 }
836 .list{ 829 .list{
837 padding: 0 0px !important; 830 padding: 0 0px !important;
838 } 831 }
839 @media screen and (max-width: 769px) { 832 @media screen and (max-width: 769px) {
840 .top { 833 .top {
841 margin-top: 0 !important; 834 margin-top: 0 !important;
842 } 835 }
843 .userSearch .v-icon { 836 .userSearch .v-icon {
844 font-size: 20px !important; 837 font-size: 20px !important;
845 margin-left: 20px; 838 margin-left: 20px;
846 } 839 }
847 } 840 }
848 @media screen and (max-width: 380px) { 841 @media screen and (max-width: 380px) {
849 .right { 842 .right {
850 float: none !important; 843 float: none !important;
851 } 844 }
852 .subheading { 845 .subheading {
853 font-size: 14px !important; 846 font-size: 14px !important;
854 } 847 }
855 .v-card__actions .v-btn { 848 .v-card__actions .v-btn {
856 margin: 0 0px; 849 margin: 0 0px;
857 min-width: 100px; 850 min-width: 100px;
858 } 851 }
859 /* .searchIcon .v-icon { 852 /* .searchIcon .v-icon {
860 font-size: 20px; 853 font-size: 20px;
861 margin-left: 20px; 854 margin-left: 20px;
862 } */ 855 } */
863 .subheading { 856 .subheading {
864 font-size: 12px !important; 857 font-size: 12px !important;
865 } 858 }
866 h5 { 859 h5 {
867 font-size: 13px; 860 font-size: 13px;
868 } 861 }
869 } 862 }
870 .v-icon { 863 .v-icon {
871 font-size: 30px; 864 font-size: 30px;
872 } 865 }
873 @media screen and (min-width: 1270px) { 866 @media screen and (min-width: 1270px) {
874 .hide { 867 .hide {
875 display: none; 868 display: none;
876 } 869 }
877 /* } 870 /* }
878 @media screen and (max-width: 962px) { 871 @media screen and (max-width: 962px) {
879 .imglogo{ 872 .imglogo{
880 position: absolute; 873 position: absolute;
881 top: 13px; 874 top: 13px;
882 left: 13px !important; 875 left: 13px !important;
883 width: 70px; 876 width: 70px;
884 height: 24px; 877 height: 24px;
885 } */ 878 } */
886 } 879 }
887 @media screen and (max-width: 420px) { 880 @media screen and (max-width: 420px) {
888 .userSearch .v-text-field .v-label { 881 .userSearch .v-text-field .v-label {
889 line-height: 24px !important; 882 line-height: 24px !important;
890 } 883 }
891 .userSearch .v-label { 884 .userSearch .v-label {
892 font-size: 13px !important; 885 font-size: 13px !important;
893 } 886 }
894 .v-list__tile { 887 .v-list__tile {
895 font-size: 14px; 888 font-size: 14px;
896 padding: 0 10px; 889 padding: 0 10px;
897 } 890 }
898 .name { 891 .name {
899 font-size: 15px; 892 font-size: 15px;
900 } 893 }
src/pages/Notification/notification.vue
Diff comments   View file @5f1d4b4
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 REMINDER ****** --> 8 <!-- ****** SEARCH ALL EXISTING REMINDER ****** -->
9 9
10 <v-flex xs7 sm3 class="userSearch"> 10 <v-flex xs7 sm3 class="userSearch">
11 <v-text-field 11 <v-text-field
12 flat 12 flat
13 append-icon="search" 13 append-icon="search"
14 label="Find your Notifictaion" 14 label="Find your Notifictaion"
15 v-model="search" 15 v-model="search"
16 color="white" 16 color="white"
17 dark 17 dark
18 ></v-text-field> 18 ></v-text-field>
19 </v-flex> 19 </v-flex>
20 <v-spacer></v-spacer> 20 <v-spacer></v-spacer>
21 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition"> 21 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
22 <v-btn icon large flat slot="activator"> 22 <v-btn icon large flat slot="activator">
23 <v-avatar size="40px"> 23 <v-avatar size="40px">
24 <img src="/static/icon/user.png"> 24 <img src="/static/icon/user.png">
25 </v-avatar> 25 </v-avatar>
26 </v-btn> 26 </v-btn>
27 <v-list class="pa-0"> 27 <v-list class="pa-0">
28 <v-list-tile 28 <v-list-tile
29 v-for="(item,index) in items" 29 v-for="(item,index) in items"
30 :to="!item.href ? { name: item.name } : null" 30 :to="!item.href ? { name: item.name } : null"
31 :href="item.href" 31 :href="item.href"
32 @click="item.click" 32 @click="item.click"
33 ripple="ripple" 33 ripple="ripple"
34 :disabled="item.disabled" 34 :disabled="item.disabled"
35 :target="item.target" 35 :target="item.target"
36 rel="noopener" 36 rel="noopener"
37 :key="index" 37 :key="index"
38 > 38 >
39 <v-list-tile-action v-if="item.icon"> 39 <v-list-tile-action v-if="item.icon">
40 <v-icon>{{ item.icon }}</v-icon> 40 <v-icon>{{ item.icon }}</v-icon>
41 </v-list-tile-action> 41 </v-list-tile-action>
42 <v-list-tile-content> 42 <v-list-tile-content>
43 <v-list-tile-title>{{ item.title }}</v-list-tile-title> 43 <v-list-tile-title>{{ item.title }}</v-list-tile-title>
44 </v-list-tile-content> 44 </v-list-tile-content>
45 </v-list-tile> 45 </v-list-tile>
46 </v-list> 46 </v-list>
47 </v-menu> 47 </v-menu>
48 </v-toolbar> 48 </v-toolbar>
49 <v-tabs grow slider-color="black"> 49 <v-tabs grow slider-color="black">
50 <v-tab 50 <v-tab
51 ripple 51 ripple
52 @click="activeTab('existing')" 52 @click="activeTab('existing')"
53 v-bind:class="{ active: isActive }" 53 v-bind:class="{ active: isActive }"
54 id="tab" 54 id="tab"
55 class="subheading" 55 class="subheading"
56 >Existing Notifictaion</v-tab> 56 >Existing Notifictaion</v-tab>
57 <v-tab 57 <v-tab
58 ripple 58 ripple
59 @click="activeTab('new')" 59 @click="activeTab('new')"
60 v-bind:class="{ active: newActive }" 60 v-bind:class="{ active: newActive }"
61 id="tab1" 61 id="tab1"
62 User 62 User
63 class="subheading" 63 class="subheading"
64 >Add New Notifictaion</v-tab> 64 >Add New Notifictaion</v-tab>
65 65
66 <!-- ****** EDITS REMINDER DETAILS ****** --> 66 <!-- ****** EDITS REMINDER DETAILS ****** -->
67 67
68 <v-tab-item> 68 <v-tab-item>
69 <v-snackbar 69 <v-snackbar
70 :timeout="timeout" 70 :timeout="timeout"
71 :top="y === 'top'" 71 :top="y === 'top'"
72 :right="x === 'right'" 72 :right="x === 'right'"
73 :vertical="mode === 'vertical'" 73 :vertical="mode === 'vertical'"
74 v-model="snackbar" 74 v-model="snackbar"
75 color="success" 75 color="success"
76 >{{ text }}</v-snackbar> 76 >{{ text }}</v-snackbar>
77 <v-dialog v-model="dialog" max-width="600px"> 77 <v-dialog v-model="dialog" max-width="600px">
78 <v-flex xs12 sm12> 78 <v-flex xs12 sm12>
79 <v-toolbar color="v-toolbar"> 79 <v-toolbar color="v-toolbar">
80 <v-spacer></v-spacer> 80 <v-spacer></v-spacer>
81 <v-toolbar-title><h3>Edit Notifictaion</h3></v-toolbar-title> 81 <v-toolbar-title><h3>Edit Notifictaion</h3></v-toolbar-title>
82 <v-spacer></v-spacer> 82 <v-spacer></v-spacer>
83 </v-toolbar> 83 </v-toolbar>
84 <v-card flat> 84 <v-card flat>
85 <v-form ref="form"> 85 <v-form ref="form">
86 <v-container fluid> 86 <v-container fluid>
87 <v-layout> 87 <v-layout>
88 <v-flex 88 <v-flex
89 xs12 89 xs12
90 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4" 90 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4"
91 > 91 >
92 <v-avatar size="100px"> 92 <v-avatar size="100px">
93 <img src="/static/icon/user.png" v-if="!imageUrl"> 93 <img src="/static/icon/user.png" v-if="!imageUrl">
94 </v-avatar> 94 </v-avatar>
95 <input 95 <input
96 type="file" 96 type="file"
97 style="display: none" 97 style="display: none"
98 ref="image" 98 ref="image"
99 accept="image/*" 99 accept="image/*"
100 @change="onFilePicked" 100 @change="onFilePicked"
101 > 101 >
102 <img 102 <img
103 :src="imageData.imageUrl" 103 :src="imageData.imageUrl"
104 height="150" 104 height="150"
105 v-if="imageUrl" 105 v-if="imageUrl"
106 style="border-radius:50%; width:200px" 106 style="border-radius:50%; width:200px"
107 > 107 >
108 </v-flex> 108 </v-flex>
109 </v-layout> 109 </v-layout>
110 <v-flex xs12 sm12> 110 <v-flex xs12 sm12>
111 <v-layout> 111 <v-layout>
112 <v-flex xs4 class="pt-4 subheading"> 112 <v-flex xs4 class="pt-4 subheading">
113 <label class="right">Title:</label> 113 <label class="right">Title:</label>
114 </v-flex> 114 </v-flex>
115 <v-flex xs5 class="ml-3"> 115 <v-flex xs5 class="ml-3">
116 <v-text-field 116 <v-text-field
117 v-model="editedItem.title" 117 v-model="editedItem.title"
118 placeholder="fill your Title" 118 placeholder="fill your Title"
119 name="name" 119 name="name"
120 type="text" 120 type="text"
121 ></v-text-field> 121 ></v-text-field>
122 </v-flex> 122 </v-flex>
123 </v-layout> 123 </v-layout>
124 </v-flex> 124 </v-flex>
125 <v-flex xs12 sm12> 125 <v-flex xs12 sm12>
126 <v-layout> 126 <v-layout>
127 <v-flex xs4 class="pt-4 subheading"> 127 <v-flex xs4 class="pt-4 subheading">
128 <label class="right">Description:</label> 128 <label class="right">Description:</label>
129 </v-flex> 129 </v-flex>
130 <v-flex xs5 class="ml-3"> 130 <v-flex xs5 class="ml-3">
131 <v-text-field 131 <v-text-field
132 placeholder="fill your Description" 132 placeholder="fill your Description"
133 v-model="editedItem.description" 133 v-model="editedItem.description"
134 type="text" 134 type="text"
135 ></v-text-field> 135 ></v-text-field>
136 </v-flex> 136 </v-flex>
137 </v-layout> 137 </v-layout>
138 </v-flex> 138 </v-flex>
139 <v-layout> 139 <v-layout>
140 <v-flex xs12 sm10 offset-sm1> 140 <v-flex xs12 sm10 offset-sm1>
141 <v-card-actions> 141 <v-card-actions>
142 <v-btn round dark @click.native="close">Cancel</v-btn> 142 <v-btn round dark @click.native="close">Cancel</v-btn>
143 <v-spacer></v-spacer> 143 <v-spacer></v-spacer>
144 <v-btn round dark @click="save">Save</v-btn> 144 <v-btn round dark @click="save">Save</v-btn>
145 </v-card-actions> 145 </v-card-actions>
146 </v-flex> 146 </v-flex>
147 </v-layout> 147 </v-layout>
148 </v-container> 148 </v-container>
149 </v-form> 149 </v-form>
150 </v-card> 150 </v-card>
151 </v-flex> 151 </v-flex>
152 </v-dialog> 152 </v-dialog>
153 153
154 <!-- ****** PROFILE VIEW REMINDER DEATILS ****** --> 154 <!-- ****** PROFILE VIEW REMINDER DEATILS ****** -->
155 155
156 <v-dialog v-model="dialog1" max-width="600px"> 156 <v-dialog v-model="dialog1" max-width="600px">
157 <v-toolbar color="white"> 157 <v-toolbar color="white">
158 <v-spacer></v-spacer> 158 <v-spacer></v-spacer>
159 <v-toolbar-title><h3>Notification</h3></v-toolbar-title> 159 <v-toolbar-title><h3>Notification</h3></v-toolbar-title>
160 <v-spacer></v-spacer> 160 <v-spacer></v-spacer>
161 <v-icon @click="close1">close</v-icon> 161 <v-icon @click="close1">close</v-icon>
162 </v-toolbar> 162 </v-toolbar>
163 <v-card> 163 <v-card>
164 <v-flex align-center justify-center layout text-xs-center> 164 <v-flex align-center justify-center layout text-xs-center>
165 <v-avatar size="50px" style="position:absolute; top:20px;"> 165 <v-avatar size="50px" style="position:absolute; top:20px;">
166 <img src="/static/icon/user.png"> 166 <img src="/static/icon/user.png">
167 </v-avatar> 167 </v-avatar>
168 </v-flex> 168 </v-flex>
169 <v-card-text> 169 <v-card-text>
170 <v-container grid-list-md> 170 <v-container grid-list-md>
171 <v-layout wrap> 171 <v-layout wrap>
172 <v-flex> 172 <v-flex>
173 <br> 173 <br>
174 <br> 174 <br>
175 <v-layout> 175 <v-layout>
176 <v-flex xs5 sm6> 176 <v-flex xs5 sm6>
177 <h5 class="right my-1">Title:</h5> 177 <h5 class="right my-1">Title:</h5>
178 </v-flex> 178 </v-flex>
179 <v-flex sm6 xs8> 179 <v-flex sm6 xs8>
180 <h5 class="my-1">{{ editedItem.title }}</h5> 180 <h5 class="my-1">{{ editedItem.title }}</h5>
181 </v-flex> 181 </v-flex>
182 </v-layout> 182 </v-layout>
183 <v-layout> 183 <v-layout>
184 <v-flex xs5 sm6> 184 <v-flex xs5 sm6>
185 <h5 class="right my-1">Description:</h5> 185 <h5 class="right my-1">Description:</h5>
186 </v-flex> 186 </v-flex>
187 <v-flex sm6 xs8> 187 <v-flex sm6 xs8>
188 <h5 class="my-1">{{ editedItem.description }}</h5> 188 <h5 class="my-1">{{ editedItem.description }}</h5>
189 </v-flex> 189 </v-flex>
190 </v-layout> 190 </v-layout>
191 </v-flex> 191 </v-flex>
192 </v-layout> 192 </v-layout>
193 </v-container> 193 </v-container>
194 </v-card-text> 194 </v-card-text>
195 </v-card> 195 </v-card>
196 </v-dialog> 196 </v-dialog>
197 <v-snackbar 197 <v-snackbar
198 :timeout="timeout" 198 :timeout="timeout"
199 :top="y === 'top'" 199 :top="y === 'top'"
200 :right="x === 'right'" 200 :right="x === 'right'"
201 :vertical="mode === 'vertical'" 201 :vertical="mode === 'vertical'"
202 v-model="snackbar" 202 v-model="snackbar"
203 color="success" 203 color="success"
204 >{{ text }}</v-snackbar> 204 >{{ text }}</v-snackbar>
205 205
206 <!-- ****** EXISTING-USERS REMINDER TABLE ****** --> 206 <!-- ****** EXISTING-USERS REMINDER TABLE ****** -->
207 207
208 <v-data-table 208 <v-data-table
209 :headers="headers" 209 :headers="headers"
210 :items="desserts" 210 :items="desserts"
211 :pagination.sync="pagination" 211 :pagination.sync="pagination"
212 :search="search" 212 :search="search"
213 > 213 >
214 <template slot="items" slot-scope="props"> 214 <template slot="items" slot-scope="props">
215 <td id="td" class="text-xs-center">{{ props.index}}</td> 215 <td id="td" class="text-xs-center">{{ props.index}}</td>
216 <td id="td" class="text-xs-center">{{ props.item.title}}</td> 216 <td id="td" class="text-xs-center">{{ props.item.title}}</td>
217 <td id="td" class="text-xs-center">{{ props.item.description}}</td> 217 <td id="td" class="text-xs-center">{{ props.item.description}}</td>
218 218
219 <td class="text-xs-center"> 219 <td class="text-xs-center">
220 <span> 220 <span>
221 <img 221 <img
222 style="cursor:pointer; width:25px; height:18px; " 222 style="cursor:pointer; width:25px; height:18px; "
223 class="mr-5" 223 class="mr-5"
224 @click="profile(props.item)" 224 @click="profile(props.item)"
225 src="/static/icon/eye1.png" 225 src="/static/icon/eye1.png"
226 > 226 >
227 <img 227 <img
228 style="cursor:pointer; width:20px; height:18px; " 228 style="cursor:pointer; width:20px; height:18px; "
229 class="mr-5" 229 class="mr-5"
230 @click="editItem(props.item)" 230 @click="editItem(props.item)"
231 src="/static/icon/edit1.png" 231 src="/static/icon/edit1.png"
232 > 232 >
233 <img 233 <img
234 style="cursor:pointer; height:20px; " 234 style="cursor:pointer; height:20px; "
235 class="mr-5" 235 class="mr-5"
236 @click="deleteItem(props.item)" 236 @click="deleteItem(props.item)"
237 src="/static/icon/delete1.png" 237 src="/static/icon/delete1.png"
238 > 238 >
239 </span> 239 </span>
240 </td> 240 </td>
241 </template> 241 </template>
242 <v-alert 242 <v-alert
243 slot="no-results" 243 slot="no-results"
244 :value="true" 244 :value="true"
245 color="error" 245 color="error"
246 icon="warning" 246 icon="warning"
247 >Your search for "{{ search }}" found no results.</v-alert> 247 >Your search for "{{ search }}" found no results.</v-alert>
248 </v-data-table> 248 </v-data-table>
249 </v-tab-item> 249 </v-tab-item>
250 250
251 <!-- ****** ADD MULTIPLE REMINDER ****** --> 251 <!-- ****** ADD MULTIPLE REMINDER ****** -->
252 252
253 <v-tab-item> 253 <v-tab-item>
254 <v-container> 254 <v-container>
255 <v-snackbar 255 <v-snackbar
256 :timeout="timeout" 256 :timeout="timeout"
257 :top="y === 'top'" 257 :top="y === 'top'"
258 :right="x === 'right'" 258 :right="x === 'right'"
259 :vertical="mode === 'vertical'" 259 :vertical="mode === 'vertical'"
260 v-model="snackbar" 260 v-model="snackbar"
261 color="success" 261 color="success"
262 >{{ text }}</v-snackbar> 262 >{{ text }}</v-snackbar>
263 <v-flex xs12 sm12 class="my-4"> 263 <v-flex xs12 sm12 class="my-4">
264 <v-card flat> 264 <v-card flat>
265 <v-form ref="form" v-model="valid" lazy-validation> 265 <v-form ref="form" v-model="valid" lazy-validation>
266 <v-container fluid> 266 <v-container fluid>
267 <v-layout> 267 <v-layout>
268 <v-flex 268 <v-flex
269 xs12 269 xs12
270 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" 270 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
271 > 271 >
272 <v-avatar size="100px"> 272 <v-avatar size="100px">
273 <img src="/static/icon/user.png" v-if="!imageUrl"> 273 <img src="/static/icon/user.png" v-if="!imageUrl">
274 </v-avatar> 274 </v-avatar>
275 <input 275 <input
276 type="file" 276 type="file"
277 style="display: none" 277 style="display: none"
278 ref="image" 278 ref="image"
279 accept="image/*" 279 accept="image/*"
280 @change="onFilePicked" 280 @change="onFilePicked"
281 > 281 >
282 <img 282 <img
283 :src="imageData.imageUrl" 283 :src="imageData.imageUrl"
284 height="150" 284 height="150"
285 v-if="imageUrl" 285 v-if="imageUrl"
286 style="border-radius:50%; width:200px" 286 style="border-radius:50%; width:200px"
287 > 287 >
288 </v-flex> 288 </v-flex>
289 </v-layout> 289 </v-layout>
290 <v-flex xs12> 290 <v-flex xs12>
291 <v-layout> 291 <v-layout>
292 <v-flex xs4 class="pt-4 subheading"> 292 <v-flex xs4 class="pt-4 subheading">
293 <label class="right">Title:</label> 293 <label class="right">Title:</label>
294 </v-flex> 294 </v-flex>
295 <v-flex xs4 class="ml-3"> 295 <v-flex xs4 class="ml-3">
296 <v-text-field 296 <v-text-field
297 v-model="addNotification.title" 297 v-model="addNotification.title"
298 placeholder="fill your Title" 298 placeholder="fill your Title"
299 type="text" 299 type="text"
300 :rules="titleRules" 300 :rules="titleRules"
301 required 301 required
302 ></v-text-field> 302 ></v-text-field>
303 </v-flex> 303 </v-flex>
304 </v-layout> 304 </v-layout>
305 </v-flex> 305 </v-flex>
306 <v-flex xs12> 306 <v-flex xs12>
307 <v-layout> 307 <v-layout>
308 <v-flex xs4 class="pt-4 subheading"> 308 <v-flex xs4 class="pt-4 subheading">
309 <label class="right">Description:</label> 309 <label class="right">Description:</label>
310 </v-flex> 310 </v-flex>
311 <v-flex xs4 class="ml-3"> 311 <v-flex xs4 class="ml-3">
312 <v-text-field 312 <v-text-field
313 placeholder="fill your Description" 313 placeholder="fill your Description"
314 :rules="descriptionRules" 314 :rules="descriptionRules"
315 v-model="addNotification.description" 315 v-model="addNotification.description"
316 type="text" 316 type="text"
317 required 317 required
318 ></v-text-field> 318 ></v-text-field>
319 </v-flex> 319 </v-flex>
320 </v-layout> 320 </v-layout>
321 </v-flex> 321 </v-flex>
322 <v-layout> 322 <v-layout>
323 <v-flex xs12 sm6 offset-sm3> 323 <v-flex xs12 sm6 offset-sm3>
324 <v-card-actions> 324 <v-card-actions>
325 <v-btn @click="clear" round dark>clear</v-btn> 325 <v-btn @click="clear" round dark>clear</v-btn>
326 <v-spacer></v-spacer> 326 <v-spacer></v-spacer>
327 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 327 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
328 </v-card-actions> 328 </v-card-actions>
329 </v-flex> 329 </v-flex>
330 </v-layout> 330 </v-layout>
331 </v-container> 331 </v-container>
332 </v-form> 332 </v-form>
333 </v-card> 333 </v-card>
334 </v-flex> 334 </v-flex>
335 </v-container> 335 </v-container>
336 </v-tab-item> 336 </v-tab-item>
337 </v-tabs> 337 </v-tabs>
338 <div class="loader" v-if="showLoader"> 338 <div class="loader" v-if="showLoader">
339 <v-progress-circular indeterminate color="white"></v-progress-circular> 339 <v-progress-circular indeterminate color="white"></v-progress-circular>
340 </div> 340 </div>
341 </v-app> 341 </v-app>
342 </template> 342 </template>
343 343
344 <script> 344 <script>
345 import http from "@/Services/http.js"; 345 import http from "@/Services/http.js";
346 import Util from "@/util"; 346 import Util from "@/util";
347 347
348 export default { 348 export default {
349 data: () => ({ 349 data: () => ({
350 snackbar: false, 350 snackbar: false,
351 y: "top", 351 y: "top",
352 x: "right", 352 x: "right",
353 mode: "", 353 mode: "",
354 timeout: 3000, 354 timeout: 3000,
355 text: "", 355 text: "",
356 loading: false, 356 loading: false,
357 date: null, 357 date: null,
358 search: "", 358 search: "",
359 showLoader:false, 359 showLoader:false,
360 dialog: false, 360 dialog: false,
361 dialog1: false, 361 dialog1: false,
362 valid: true, 362 valid: true,
363 isActive: true, 363 isActive: true,
364 newActive: false, 364 newActive: false,
365 pagination: { 365 pagination: {
366 rowsPerPage: 15 366 rowsPerPage: 15
367 }, 367 },
368 imageData: {}, 368 imageData: {},
369 imageName: "", 369 imageName: "",
370 imageUrl: "", 370 imageUrl: "",
371 imageFile: "", 371 imageFile: "",
372 titleRules: [v => !!v || " Tilte is required"], 372 titleRules: [v => !!v || " Tilte is required"],
373 descriptionRules: [v => !!v || " Description is required"], 373 descriptionRules: [v => !!v || " Description is required"],
374 headers: [ 374 headers: [
375 { 375 {
376 text: "No", 376 text: "No",
377 align: "center", 377 align: "center",
378 sortable: false, 378 sortable: false,
379 value: "No" 379 value: "No"
380 }, 380 },
381 { text: "Title", value: "title", sortable: false, align: "center" }, 381 { text: "Title", value: "title", sortable: false, align: "center" },
382 { text: "Description", value: "description", sortable: false, align: "center" }, 382 { text: "Description", value: "description", sortable: false, align: "center" },
383 { text: "Action", value: "", sortable: false, align: "center" } 383 { text: "Action", value: "", sortable: false, align: "center" }
384 ], 384 ],
385 desserts: [], 385 desserts: [],
386 editedIndex: -1, 386 editedIndex: -1,
387 addNotification:{ 387 addNotification:{
388 title:'', 388 title:'',
389 description:'' 389 description:''
390 }, 390 },
391 editedItem: { 391 editedItem: {
392 title:'', 392 title:'',
393 description:'' 393 description:''
394 }, 394 },
395 defaultItem: { 395 defaultItem: {
396 title:'', 396 title:'',
397 description:'' 397 description:''
398 }, 398 },
399 userName: "", 399 userName: "",
400 items: [ 400 items: [
401 { 401 {
402 href: "/changepassword", 402 href: "/changepassword",
403 title: "Change Password", 403 title: "Change Password",
404 click: e => { 404 click: e => {
405 console.log(e); 405 console.log(e);
406 } 406 }
407 }, 407 },
408 { 408 {
409 href: "#", 409 href: "#",
410 title: "Logout", 410 title: "Logout",
411 click: e => { 411 click: e => {
412 window.getApp.$emit("APP_LOGOUT"); 412 window.getApp.$emit("APP_LOGOUT");
413 } 413 }
414 } 414 }
415 ] 415 ]
416 }), 416 }),
417 methods: { 417 methods: {
418 pickFile() { 418 pickFile() {
419 this.$refs.image.click(); 419 this.$refs.image.click();
420 }, 420 },
421 421
422 onFilePicked(e) { 422 onFilePicked(e) {
423 // console.log(e) 423 // console.log(e)
424 const files = e.target.files; 424 const files = e.target.files;
425 this.imageData.upload = e.target.files[0]; 425 this.imageData.upload = e.target.files[0];
426 if (files[0] !== undefined) { 426 if (files[0] !== undefined) {
427 this.imageName = files[0].name; 427 this.imageName = files[0].name;
428 if (this.imageName.lastIndexOf(".") <= 0) { 428 if (this.imageName.lastIndexOf(".") <= 0) {
429 return; 429 return;
430 } 430 }
431 const fr = new FileReader(); 431 const fr = new FileReader();
432 fr.readAsDataURL(files[0]); 432 fr.readAsDataURL(files[0]);
433 fr.addEventListener("load", () => { 433 fr.addEventListener("load", () => {
434 this.imageUrl = fr.result; 434 this.imageUrl = fr.result;
435 this.imageFile = files[0]; // this is an image file that can be sent to server... 435 this.imageFile = files[0]; // this is an image file that can be sent to server...
436 this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 436 this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
437 console.log("upload=======>", this.imageData.imageUrl); 437 console.log("upload=======>", this.imageData.imageUrl);
438 console.log("imageFile", this.imageFile); 438 console.log("imageFile", this.imageFile);
439 }); 439 });
440 } else { 440 } else {
441 this.imageName = ""; 441 this.imageName = "";
442 this.imageFile = ""; 442 this.imageFile = "";
443 this.imageUrl = ""; 443 this.imageUrl = "";
444 } 444 }
445 }, 445 },
446 getNotifications() { 446 getNotifications() {
447 this.showLoader = true; 447 this.showLoader = true;
448 var token = this.$store.state.token; 448 var token = this.$store.state.token;
449 http() 449 http()
450 .get("/getNotificationsList", { 450 .get("/getNotificationsList", {
451 headers: { Authorization: "Bearer " + token } 451 headers: { Authorization: "Bearer " + token }
452 }) 452 })
453 .then(response => { 453 .then(response => {
454 this.desserts = response.data.data; 454 this.desserts = response.data.data;
455 this.showLoader = false; 455 this.showLoader = false;
456 // console.log("getNotifications=====>",this.desserts) 456 // console.log("getNotifications=====>",this.desserts)
457 }) 457 })
458 .catch(err => { 458 .catch(err => {
459 // console.log("err====>", err); 459 // console.log("err====>", err);
460 this.showLoader = false; 460 this.showLoader = false;
461 this.$router.replace({ path: "/" }); 461 this.$router.replace({ path: "/" });
462 }); 462 });
463 }, 463 },
464 editItem(item) { 464 editItem(item) {
465 this.editedIndex = this.desserts.indexOf(item); 465 this.editedIndex = this.desserts.indexOf(item);
466 this.editedItem = Object.assign({}, item); 466 this.editedItem = Object.assign({}, item);
467 this.dialog = true; 467 this.dialog = true;
468 }, 468 },
469 profile(item) { 469 profile(item) {
470 this.editedIndex = this.desserts.indexOf(item); 470 this.editedIndex = this.desserts.indexOf(item);
471 this.editedItem = Object.assign({}, item); 471 this.editedItem = Object.assign({}, item);
472 this.dialog1 = true; 472 this.dialog1 = true;
473 }, 473 },
474 474
475 deleteItem(item) { 475 deleteItem(item) {
476 let deleteNotification = { 476 let deleteNotification = {
477 notificationId: item._id 477 notificationId: item._id
478 }; 478 };
479 http() 479 http()
480 .delete( 480 .delete(
481 "/deleteNotification", 481 "/deleteNotification",
482 confirm("Are you sure you want to delete this?") && { 482 confirm("Are you sure you want to delete this?") && {
483 params: deleteNotification 483 params: deleteNotification
484 } 484 }
485 ) 485 )
486 .then(response => { 486 .then(response => {
487 // console.log("deleteNotification",deleteNotification) 487 // console.log("deleteNotification",deleteNotification)
488 if ((this.snackbar = true)) { 488 if ((this.snackbar = true)) {
489 this.text = "Successfully Delete Notification"; 489 this.text = "Successfully Delete Notification";
490 } 490 }
491 this.getNotifications(); 491 this.getNotifications();
492 }) 492 })
493 .catch(error => { 493 .catch(error => {
494 console.log(error); 494 console.log(error);
495 }); 495 });
496 }, 496 },
497 activeTab(type) { 497 activeTab(type) {
498 switch (type) { 498 switch (type) {
499 case "existing": 499 case "existing":
500 this.newActive = false; 500 this.newActive = false;
501 this.isActive = true; 501 this.isActive = true;
502 break; 502 break;
503 503
504 default: 504 default:
505 this.newActive = true; 505 this.newActive = true;
506 this.isActive = false; 506 this.isActive = false;
507 break; 507 break;
508 } 508 }
509 }, 509 },
510 close() { 510 close() {
511 this.dialog = false; 511 this.dialog = false;
512 setTimeout(() => { 512 setTimeout(() => {
513 this.editedItem = Object.assign({}, this.defaultItem); 513 this.editedItem = Object.assign({}, this.defaultItem);
514 this.editedIndex = -1; 514 this.editedIndex = -1;
515 }, 300); 515 }, 300);
516 }, 516 },
517 close1() { 517 close1() {
518 this.dialog1 = false; 518 this.dialog1 = false;
519 }, 519 },
520 submit() { 520 submit() {
521 if (this.$refs.form.validate()) { 521 if (this.$refs.form.validate()) {
522 let imageData = new FormData(); 522 let imageData = new FormData();
523 imageData.append("upload", this.imageFile); 523 imageData.append("upload", this.imageFile);
524 console.log(imageData); 524 console.log(imageData);
525 let create = { 525 let create = {
526 title: this.addNotification.title, 526 title: this.addNotification.title,
527 description: this.addNotification.description, 527 description: this.addNotification.description,
528 // imageData 528 // imageData
529 }; 529 };
530 console.log(create) 530 console.log(create)
531 this.loading = true;
531 http() 532 http()
532 .post("/createNotification", create) 533 .post("/createNotification", create)
533 .then(response => { 534 .then(response => {
534 console.log(create) 535 console.log(create)
535 if ((this.snackbar = true)) { 536 if ((this.snackbar = true)) {
536 this.text = "New user added successfully"; 537 this.text = "New Notification added successfully";
537 } 538 }
538 this.getNotifications(); 539 this.getNotifications();
539 this.clear(); 540 this.clear();
541 this.loading = false;
540 }) 542 })
541 .catch(error => { 543 .catch(error => {
542 // console.log(error); 544 // console.log(error);
543 if ((this.snackbar = true)) { 545 if ((this.snackbar = true)) {
544 this.text = error.response.data.message; 546 this.text = error.response.data.message;
545 } 547 }
548 this.loading = false;
546 }); 549 });
547 } 550 }
548 }, 551 },
549 mail() {}, 552 mail() {},
550 download() {}, 553 download() {},
551 clear() { 554 clear() {
552 this.$refs.form.reset(); 555 this.$refs.form.reset();
553 }, 556 },
554 save() { 557 save() {
555 let imageData = new FormData(); 558 let imageData = new FormData();
556 imageData.append("upload", this.imageFile); 559 imageData.append("upload", this.imageFile);
557 console.log(imageData); 560 console.log(imageData);
558 let editNotification = { 561 let editNotification = {
559 notificationId:this.editedItem._id, 562 notificationId:this.editedItem._id,
560 title: this.editedItem.title, 563 title: this.editedItem.title,
561 description: this.editedItem.description, 564 description: this.editedItem.description,
562 // imageData 565 // imageData
563 }; 566 };
564 http() 567 http()
565 .put("/updateNotification", editNotification) 568 .put("/updateNotification", editNotification)
566 .then(response => { 569 .then(response => {
567 // console.log("editNotification",editNotification); 570 // console.log("editNotification",editNotification);
568 if ((this.snackbar = true)) { 571 if ((this.snackbar = true)) {
569 this.text = "Successfully Edit Notification"; 572 this.text = "Successfully Edit Notification";
570 } 573 }
571 this.getNotifications(); 574 this.getNotifications();
572 }) 575 })
573 .catch(error => { 576 .catch(error => {
574 // console.log(error); 577 // console.log(error);
575 }); 578 });
576 this.close(); 579 this.close();
577 }, 580 },
578 handleDrawerToggle() { 581 handleDrawerToggle() {
579 window.getApp.$emit("APP_DRAWER_TOGGLED"); 582 window.getApp.$emit("APP_DRAWER_TOGGLED");
580 }, 583 },
581 handleFullScreen() { 584 handleFullScreen() {
582 Util.toggleFullScreen(); 585 Util.toggleFullScreen();
583 } 586 }
584 }, 587 },
585 mounted() { 588 mounted() {
586 this.getNotifications(); 589 this.getNotifications();
587 }, 590 },
588 computed: { 591 computed: {
589 toolbarColor() { 592 toolbarColor() {
590 return this.$vuetify.options.extra.mainNav; 593 return this.$vuetify.options.extra.mainNav;
591 } 594 }
592 } 595 }
593 }; 596 };
594 </script> 597 </script>
595 <style scoped> 598 <style scoped>
596 .v-tabs__div { 599 .v-tabs__div {
597 text-transform: none; 600 text-transform: none;
598 } 601 }
599 .v-input__prepend-outer { 602 .v-input__prepend-outer {
600 margin-right: 0px !important; 603 margin-right: 0px !important;
601 } 604 }
602 .v-card__actions .v-btn { 605 .v-card__actions .v-btn {
603 margin: 0 15px; 606 margin: 0 15px;
604 min-width: 120px; 607 min-width: 120px;
605 } 608 }
606 .primary { 609 .primary {
607 background-color: #aaa !important; 610 background-color: #aaa !important;
608 border-color: #aaa !important; 611 border-color: #aaa !important;
609 } 612 }
610 h4 { 613 h4 {
611 background-repeat: no-repeat; 614 background-repeat: no-repeat;
612 padding: 8px; 615 padding: 8px;
613 margin: auto; 616 margin: auto;
614 font-size: 25px; 617 font-size: 25px;
615 } 618 }
616 #name { 619 #name {
617 position: absolute; 620 position: absolute;
618 left: 100px; 621 left: 100px;
619 top: 17px; 622 top: 17px;
620 } 623 }
621 #icon { 624 #icon {
622 position: absolute; 625 position: absolute;
623 right: 8px; 626 right: 8px;
624 top: 8px; 627 top: 8px;
625 } 628 }
626 #m { 629 #m {
627 position: relative; 630 position: relative;
628 left: 135px; 631 left: 135px;
629 top: -15px; 632 top: -15px;
630 } 633 }
631 #G { 634 #G {
632 position: absolute; 635 position: absolute;
633 top: 38px; 636 top: 38px;
634 color: white; 637 color: white;
635 } 638 }
636 #bt { 639 #bt {
637 position: relative; 640 position: relative;
638 top: -20px; 641 top: -20px;
639 left: 115px; 642 left: 115px;
640 } 643 }
641 #e { 644 #e {
642 position: relative; 645 position: relative;
643 top: 5px; 646 top: 5px;
644 right: -30px; 647 right: -30px;
645 height: 17px; 648 height: 17px;
646 cursor: pointer; 649 cursor: pointer;
647 } 650 }
648 #d { 651 #d {
649 position: relative; 652 position: relative;
650 top: 5px; 653 top: 5px;
651 right: -70px; 654 right: -70px;
652 height: 17px; 655 height: 17px;
653 cursor: pointer; 656 cursor: pointer;
654 } 657 }
655 #td { 658 #td {
656 border: 1px solid #dddddd; 659 border: 1px solid #dddddd;
657 text-align: left; 660 text-align: left;
658 padding: 8px; 661 padding: 8px;
659 } 662 }
660 #dialog { 663 #dialog {
661 height: 550px; 664 height: 550px;
662 } 665 }
663 .active { 666 .active {
664 background-color: black; 667 background-color: black;
665 color: white !important; 668 color: white !important;
666 } 669 }
667 .activebtn { 670 .activebtn {
668 color: black !important; 671 color: black !important;
669 } 672 }
670 #flex { 673 #flex {
671 height: 300px; 674 height: 300px;
672 } 675 }
673 .top { 676 .top {
674 margin-top: 100px; 677 margin-top: 100px;
675 } 678 }
676 .v-tabs__item a { 679 .v-tabs__item a {
677 font-size: 16px !important; 680 font-size: 16px !important;
678 } 681 }
679 @media screen and (max-width: 769px) { 682 @media screen and (max-width: 769px) {
680 .top { 683 .top {
681 margin-top: 0 !important; 684 margin-top: 0 !important;
682 } 685 }
683 .userSearch .v-icon { 686 .userSearch .v-icon {
684 font-size: 20px !important; 687 font-size: 20px !important;
685 margin-left: 20px; 688 margin-left: 20px;
686 } 689 }
687 } 690 }
688 @media screen and (max-width: 380px) { 691 @media screen and (max-width: 380px) {
689 .right { 692 .right {
690 float: none !important; 693 float: none !important;
691 } 694 }
692 .subheading { 695 .subheading {
693 font-size: 14px !important; 696 font-size: 14px !important;
694 } 697 }
695 .v-card__actions .v-btn { 698 .v-card__actions .v-btn {
696 margin: 0 0px; 699 margin: 0 0px;
697 min-width: 100px; 700 min-width: 100px;
698 } 701 }
699 /* .searchIcon .v-icon { 702 /* .searchIcon .v-icon {
700 font-size: 20px; 703 font-size: 20px;
701 margin-left: 20px; 704 margin-left: 20px;
702 } */ 705 } */
703 .subheading { 706 .subheading {
704 font-size: 12px !important; 707 font-size: 12px !important;
705 } 708 }
706 h5 { 709 h5 {
707 font-size: 13px; 710 font-size: 13px;
708 } 711 }
709 } 712 }
710 .v-icon { 713 .v-icon {
711 font-size: 30px; 714 font-size: 30px;
712 } 715 }
713 @media screen and (min-width: 1270px) { 716 @media screen and (min-width: 1270px) {
714 .hide { 717 .hide {
715 display: none; 718 display: none;
716 } 719 }
717 /* } 720 /* }
718 @media screen and (max-width: 962px) { 721 @media screen and (max-width: 962px) {
719 .imglogo{ 722 .imglogo{
720 position: absolute; 723 position: absolute;
721 top: 13px; 724 top: 13px;
722 left: 13px !important; 725 left: 13px !important;
723 width: 70px; 726 width: 70px;
724 height: 24px; 727 height: 24px;
725 } */ 728 } */
726 } 729 }
727 @media screen and (max-width: 420px) { 730 @media screen and (max-width: 420px) {
728 .pl-3 { 731 .pl-3 {
729 padding-left: 0px !important; 732 padding-left: 0px !important;
730 } 733 }
731 .userSearch .v-text-field .v-label { 734 .userSearch .v-text-field .v-label {
732 line-height: 24px !important; 735 line-height: 24px !important;
733 } 736 }
734 .userSearch .v-label { 737 .userSearch .v-label {
735 font-size: 13px !important; 738 font-size: 13px !important;
736 } 739 }
737 .v-list__tile { 740 .v-list__tile {
738 font-size: 14px; 741 font-size: 14px;
739 padding: 0 10px; 742 padding: 0 10px;
740 } 743 }
741 .name { 744 .name {
742 font-size: 15px; 745 font-size: 15px;
743 } 746 }
744 } 747 }
745 </style> 748 </style>
src/pages/Section/section.vue
Diff comments   View file @5f1d4b4
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">Class Name:</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">Section Name:</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>
158 <v-flex xs5 sm6>
159 <h5 class="right my-1"><b>Session:</b></h5>
160 </v-flex>
161 <v-flex sm6 xs8>
162 <h5 class="my-1">{{ editedItem.session }}</h5>
163 </v-flex>
164 </v-layout>
157 </v-flex> 165 </v-flex>
158 </v-layout> 166 </v-layout>
159 </v-container> 167 </v-container>
160 </v-card-text> 168 </v-card-text>
161 </v-card> 169 </v-card>
162 </v-dialog> 170 </v-dialog>
163 171
164 <v-snackbar 172 <v-snackbar
165 :timeout="timeout" 173 :timeout="timeout"
166 :top="y === 'top'" 174 :top="y === 'top'"
167 :right="x === 'right'" 175 :right="x === 'right'"
168 :vertical="mode === 'vertical'" 176 :vertical="mode === 'vertical'"
169 v-model="snackbar" 177 v-model="snackbar"
170 color="success" 178 color="success"
171 >{{ text }}</v-snackbar> 179 >{{ text }}</v-snackbar>
172 180
173 <!-- ****** EXISTING-USERS StudentS Table ****** --> 181 <!-- ****** EXISTING-USERS StudentS Table ****** -->
174 182
175 <v-data-table 183 <v-data-table
176 :headers="headers" 184 :headers="headers"
177 :items="desserts" 185 :items="desserts"
178 :pagination.sync="pagination" 186 :pagination.sync="pagination"
179 :search="search" 187 :search="search"
180 > 188 >
181 <template slot="items" slot-scope="props"> 189 <template slot="items" slot-scope="props">
182 <td id="td" class="text-xs-center">{{ props.index}}</td> 190 <td id="td" class="text-xs-center">{{ props.index}}</td>
183 <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>
184 <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>
194
185 <td class="text-xs-center"> 195 <td class="text-xs-center">
186 <span> 196 <span>
187 <img 197 <img
188 style="cursor:pointer; width:25px; height:18px; " 198 style="cursor:pointer; width:25px; height:18px; "
189 class="mr-5" 199 class="mr-5"
190 @click="profile(props.item)" 200 @click="profile(props.item)"
191 src="/static/icon/eye1.png" 201 src="/static/icon/eye1.png"
192 > 202 >
193 <img 203 <img
194 style="cursor:pointer; width:20px; height:18px; " 204 style="cursor:pointer; width:20px; height:18px; "
195 class="mr-5" 205 class="mr-5"
196 @click="editItem(props.item)" 206 @click="editItem(props.item)"
197 src="/static/icon/edit1.png" 207 src="/static/icon/edit1.png"
198 > 208 >
199 <img 209 <img
200 style="cursor:pointer; height:20px; " 210 style="cursor:pointer; height:20px; "
201 class="mr-5" 211 class="mr-5"
202 @click="deleteItem(props.item)" 212 @click="deleteItem(props.item)"
203 src="/static/icon/delete1.png" 213 src="/static/icon/delete1.png"
204 > 214 >
205 </span> 215 </span>
206 </td> 216 </td>
207 </template> 217 </template>
208 <v-alert 218 <v-alert
209 slot="no-results" 219 slot="no-results"
210 :value="true" 220 :value="true"
211 color="error" 221 color="error"
212 icon="warning" 222 icon="warning"
213 >Your search for "{{ search }}" found no results.</v-alert> 223 >Your search for "{{ search }}" found no results.</v-alert>
214 </v-data-table> 224 </v-data-table>
215 </v-tab-item> 225 </v-tab-item>
216 226
217 <!-- ****** ADD multiple Students ****** --> 227 <!-- ****** ADD multiple Students ****** -->
218 228
219 <v-tab-item> 229 <v-tab-item>
220 <v-container> 230 <v-container>
221 <v-snackbar 231 <v-snackbar
222 :timeout="timeout" 232 :timeout="timeout"
223 :top="y === 'top'" 233 :top="y === 'top'"
224 :right="x === 'right'" 234 :right="x === 'right'"
225 :vertical="mode === 'vertical'" 235 :vertical="mode === 'vertical'"
226 v-model="snackbar" 236 v-model="snackbar"
227 color="success" 237 color="success"
228 >{{ text }}</v-snackbar> 238 >{{ text }}</v-snackbar>
229 <v-flex xs12 sm8 offset-sm2 class="top"> 239 <v-flex xs12 sm8 offset-sm2 class="top">
230 <v-card flat> 240 <v-card flat>
231 <v-container fluid fill-height> 241 <v-container fluid fill-height>
232 <v-layout align-center> 242 <v-layout align-center>
233 <v-flex xs12> 243 <v-flex xs12>
234 <v-flex offset-xs5> 244 <v-flex offset-xs5>
235 <v-avatar size="55px"> 245 <v-avatar size="55px">
236 <img src="/static/icon/user.png"> 246 <img src="/static/icon/user.png">
237 </v-avatar> 247 </v-avatar>
238 </v-flex> 248 </v-flex>
239 <v-form ref="form" v-model="valid" lazy-validation> 249 <v-form ref="form" v-model="valid" lazy-validation>
240 <v-layout> 250 <v-layout>
241 <v-flex xs4 class="pt-4 subheading"> 251 <v-flex xs4 class="pt-4 subheading">
242 <label class="right">Section Name:</label> 252 <label class="right">Section Name:</label>
243 </v-flex> 253 </v-flex>
244 <v-flex xs6 class="ml-3"> 254 <v-flex xs6 class="ml-3">
245 <v-autocomplete 255 <v-autocomplete
246 v-model="add.name" 256 v-model="add.name"
247 placeholder="fill your Section Name" 257 placeholder="fill your Section Name"
248 :items = "SectionName" 258 :items = "SectionName"
249 :rules="nameRules" 259 :rules="nameRules"
250 required 260 required
251 ></v-autocomplete> 261 ></v-autocomplete>
252 </v-flex> 262 </v-flex>
253 </v-layout> 263 </v-layout>
254 <v-layout> 264 <v-layout>
255 <v-flex xs4 class="pt-4 subheading"> 265 <v-flex xs4 class="pt-4 subheading">
256 <label class="right">Select Class:</label> 266 <label class="right">Select Class:</label>
257 </v-flex> 267 </v-flex>
258 <v-flex xs6 class="ml-3"> 268 <v-flex xs6 class="ml-3">
259 <v-autocomplete 269 <v-autocomplete
260 :items="addclass" 270 :items="addclass"
261 label="Select Class" 271 label="Select Class"
262 v-model="select" 272 v-model="select"
263 item-text="classNum" 273 item-text="classNum"
264 item-value="_id" 274 item-value="_id"
265 name="Select Class" 275 name="Select Class"
266 :rules="classRules" 276 :rules="classRules"
267 required 277 required
268 ></v-autocomplete> 278 ></v-autocomplete>
269 </v-flex> 279 </v-flex>
270 </v-layout> 280 </v-layout>
271 <v-layout> 281 <v-layout>
272 <v-flex xs4 class="pt-4 subheading"> 282 <v-flex xs4 class="pt-4 subheading">
273 <label class="right">Session:</label> 283 <label class="right">Session:</label>
274 </v-flex> 284 </v-flex>
275 <v-flex xs6 class="ml-3"> 285 <v-flex xs6 class="ml-3">
276 <v-text-field 286 <v-text-field
277 v-model="add.session" 287 v-model="add.session"
278 placeholder="fill your Session" 288 placeholder="fill your Session"
279 name="name" 289 name="name"
280 type="text" 290 type="text"
281 :rules="sessionRules" 291 :rules="sessionRules"
282 required 292 required
283 ></v-text-field> 293 ></v-text-field>
284 </v-flex> 294 </v-flex>
285 </v-layout> 295 </v-layout>
286 <v-layout> 296 <v-layout>
287 <v-flex xs12 sm9 offset-sm2> 297 <v-flex xs12 sm9 offset-sm2>
288 <v-card-actions> 298 <v-card-actions>
289 <v-btn @click="clear" round dark>clear</v-btn> 299 <v-btn @click="clear" round dark>clear</v-btn>
290 <v-spacer></v-spacer> 300 <v-spacer></v-spacer>
291 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 301 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
292 </v-card-actions> 302 </v-card-actions>
293 </v-flex> 303 </v-flex>
294 </v-layout> 304 </v-layout>
295 </v-form> 305 </v-form>
296 </v-flex> 306 </v-flex>
297 </v-layout> 307 </v-layout>
298 </v-container> 308 </v-container>
299 </v-card> 309 </v-card>
300 </v-flex> 310 </v-flex>
301 </v-container> 311 </v-container>
302 </v-tab-item> 312 </v-tab-item>
303 </v-tabs> 313 </v-tabs>
304 <div class="loader" v-if="showLoader"> 314 <div class="loader" v-if="showLoader">
305 <v-progress-circular indeterminate color="white"></v-progress-circular> 315 <v-progress-circular indeterminate color="white"></v-progress-circular>
306 </div> 316 </div>
307 </v-app> 317 </v-app>
308 </template> 318 </template>
309 319
310 <script> 320 <script>
311 import http from "@/Services/http.js"; 321 import http from "@/Services/http.js";
312 import Util from "@/util"; 322 import Util from "@/util";
313 323
314 export default { 324 export default {
315 data: () => ({ 325 data: () => ({
316 snackbar: false, 326 snackbar: false,
317 y: "top", 327 y: "top",
318 x: "right", 328 x: "right",
319 mode: "", 329 mode: "",
320 timeout: 3000, 330 timeout: 3000,
321 text: "", 331 text: "",
322 showLoader:false, 332 showLoader:false,
323 loading: false, 333 loading: false,
324 date:null, 334 date:null,
325 search: '', 335 search: '',
326 dialog: false, 336 dialog: false,
327 dialog1: false, 337 dialog1: false,
328 valid: true, 338 valid: true,
329 validEdit:true, 339 validEdit:true,
330 isActive: true, 340 isActive: true,
331 newActive: false, 341 newActive: false,
332 details: [], 342 details: [],
333 AddUsercredentials: {}, 343 AddUsercredentials: {},
334 pagination: { 344 pagination: {
335 rowsPerPage: 15 345 rowsPerPage: 15
336 }, 346 },
337 nameRules: [v => !!v || " Section Name is required"], 347 nameRules: [v => !!v || " Section Name is required"],
338 classRules: [v => !!v || " Class Name is required"], 348 classRules: [v => !!v || " Class Name is required"],
339 sessionRules: [v => !!v || " Session is required"], 349 sessionRules: [v => !!v || " Session is required"],
340 SectionName:[ 350 SectionName:[
341 "A","B","C","D","E","F" 351 "A","B","C","D","E","F"
342 ], 352 ],
343 headers: [ 353 headers: [
344 { 354 {
345 text: "No", 355 text: "No",
346 align: "center", 356 align: "center",
347 sortable: false, 357 sortable: false,
348 value: "No" 358 value: "No"
349 }, 359 },
350 { text: "Class Name", value: "classData.classNum", sortable: false, align: "center" }, 360 { text: "Class Name", value: "classData.classNum", sortable: false, align: "center" },
351 { text: "Section Name", value: "name", sortable: false, align: "center" }, 361 { text: "Section Name", value: "name", sortable: false, align: "center" },
362 { text: "Session", value: "session", sortable: false, align: "center" },
352 { text: "Action", value: "", sortable: false, align: "center" } 363 { text: "Action", value: "", sortable: false, align: "center" }
353 ], 364 ],
354 desserts: [], 365 desserts: [],
355 addclass:[], 366 addclass:[],
356 select:'', 367 select:'',
357 selectId:'', 368 selectId:'',
358 editedIndex: -1, 369 editedIndex: -1,
359 editedItem: { 370 editedItem: {
360 classData:{ 371 classData:{
361 classNum:"", 372 classNum:"",
362 }, 373 },
363 name:'', 374 name:'',
364 session:new Date().getFullYear() 375 session:new Date().getFullYear()
365 376
366 }, 377 },
367 add: { 378 add: {
368 classData:{ 379 classData:{
369 classNum:"", 380 classNum:"",
370 }, 381 },
371 name:'', 382 name:'',
372 session:new Date().getFullYear() 383 session:new Date().getFullYear()
373 384
374 }, 385 },
375 items: [ 386 items: [
376 { 387 {
377 href: "/changepassword", 388 href: "/changepassword",
378 title: "Change Password", 389 title: "Change Password",
379 click: e => { 390 click: e => {
380 console.log(e); 391 console.log(e);
381 } 392 }
382 }, 393 },
383 { 394 {
384 href: "#", 395 href: "#",
385 title: "Logout", 396 title: "Logout",
386 click: e => { 397 click: e => {
387 window.getApp.$emit("APP_LOGOUT"); 398 window.getApp.$emit("APP_LOGOUT");
388 } 399 }
389 } 400 }
390 ] 401 ]
391 }), 402 }),
392 methods: { 403 methods: {
393 getSectionList() { 404 getSectionList() {
394 this.showLoader = true; 405 this.showLoader = true;
395 var token = this.$store.state.token; 406 var token = this.$store.state.token;
396 http() 407 http()
397 .get("/getAllSections", { 408 .get("/getAllSections", {
398 headers: { Authorization: "Bearer " + token } 409 headers: { Authorization: "Bearer " + token }
399 }) 410 })
400 .then(response => { 411 .then(response => {
401 this.desserts = response.data.data; 412 this.desserts = response.data.data;
402 this.showLoader = false; 413 this.showLoader = false;
403 // console.log("getAllSections=====>",response.data.data) 414 // console.log("getAllSections=====>",response.data.data)
404 415
405 }) 416 })
406 .catch(err => { 417 .catch(err => {
407 // console.log("err====>", err); 418 // console.log("err====>", err);
408 this.showLoader = false; 419 this.showLoader = false;
409 // this.$router.replace({ path: '/' }); 420 // this.$router.replace({ path: '/' });
410 }); 421 });
411 }, 422 },
412 editItem(item) { 423 editItem(item) {
413 this.editedIndex = this.desserts.indexOf(item); 424 this.editedIndex = this.desserts.indexOf(item);
414 this.editedItem = Object.assign({}, item); 425 this.editedItem = Object.assign({}, item);
415 console.log(this.editedItem) 426 console.log(this.editedItem)
416 this.dialog = true; 427 this.dialog = true;
417 }, 428 },
418 profile(item) { 429 profile(item) {
419 this.editedIndex = this.desserts.indexOf(item); 430 this.editedIndex = this.desserts.indexOf(item);
420 this.editedItem = Object.assign({}, item); 431 this.editedItem = Object.assign({}, item);
421 this.dialog1 = true; 432 this.dialog1 = true;
422 }, 433 },
423 deleteItem(item) { 434 deleteItem(item) {
424 let deleteStudent = { 435 let deleteStudent = {
425 sectionId: item._id 436 sectionId: item._id
426 }; 437 };
427 http() 438 http()
428 .delete("/deleteSection", confirm('Are you sure you want to delete this?') && { params: deleteStudent }) 439 .delete("/deleteSection", confirm('Are you sure you want to delete this?') && { params: deleteStudent })
429 .then(response => { 440 .then(response => {
430 // console.log("deleteUers",deleteStudent) 441 // console.log("deleteUers",deleteStudent)
431 if ((this.snackbar = true)) { 442 if ((this.snackbar = true)) {
432 this.text = "Successfully delete Existing User"; 443 this.text = "Successfully delete Existing Section";
433 } 444 }
434 this.getSectionList(); 445 this.getSectionList();
435 }) 446 })
436 .catch(error => { 447 .catch(error => {
437 // console.log(error); 448 // console.log(error);
438 }); 449 });
439 }, 450 },
440 activeTab(type) { 451 activeTab(type) {
441 switch (type) { 452 switch (type) {
442 case "existing": 453 case "existing":
443 this.newActive = false; 454 this.newActive = false;
444 this.isActive = true; 455 this.isActive = true;
445 break; 456 break;
446 457
447 default: 458 default:
448 this.newActive = true; 459 this.newActive = true;
449 this.isActive = false; 460 this.isActive = false;
450 break; 461 break;
451 } 462 }
452 }, 463 },
453 close() { 464 close() {
454 this.dialog = false; 465 this.dialog = false;
455 setTimeout(() => { 466 setTimeout(() => {
456 this.editedItem = Object.assign({}, this.defaultItem); 467 this.editedItem = Object.assign({}, this.defaultItem);
457 this.editedIndex = -1; 468 this.editedIndex = -1;
458 }, 300); 469 }, 300);
459 }, 470 },
460 close1() { 471 close1() {
461 this.dialog1 = false; 472 this.dialog1 = false;
462 }, 473 },
463 close2() { 474 close2() {
464 this.dialog2 = false; 475 this.dialog2 = false;
465 }, 476 },
466 submit() { 477 submit() {
467 if (this.$refs.forms.validate()) { 478 if (this.$refs.forms.validate()) {
468 let addSection = { 479 let addSection = {
469 name: this.add.name, 480 name: this.add.name,
470 classId: this.select, 481 classId: this.select,
471 session:this.add.session 482 session:this.add.session
472 }; 483 };
473 console.log(addSection) 484 console.log(addSection)
485 this.loading = true;
474 http() 486 http()
475 .post("/createSection", addSection) 487 .post("/createSection", addSection)
476 .then(response => { 488 .then(response => {
477 console.log(addSection) 489 console.log(addSection)
478 this.getSectionList(); 490 this.getSectionList();
479 if (this.snackbar = true) { 491 if (this.snackbar = true) {
480 this.text = "New user added successfully"; 492 this.text = "New Section added successfully";
481 } 493 }
482 494
483 this.clear(); 495 this.clear();
496 this.loading = false;
484 }) 497 })
485 .catch(error => { 498 .catch(error => {
486 // console.log(error); 499 // console.log(error);
487 if (this.snackbar = true) { 500 if (this.snackbar = true) {
488 this.text = error.response.data.message; 501 this.text = error.response.data.message;
489 } 502 }
503 this.loading = false;
490 }); 504 });
491 } 505 }
492 }, 506 },
493 mail() { 507 mail() {
494 }, 508 },
495 download() { 509 download() {
496 }, 510 },
497 clear() { 511 clear() {
498 this.$refs.form.reset(); 512 this.$refs.form.reset();
499 }, 513 },
500 save() { 514 save() {
501 // if (this.$refs.form.validate()) { 515 // if (this.$refs.form.validate()) {
502 let editStudent = { 516 let editStudent = {
503 name: this.editedItem.name, 517 name: this.editedItem.name,
504 classId: this.select, 518 classId: this.select,
505 sectionId: this.editedItem._id 519 sectionId: this.editedItem._id
506 }; 520 };
507 http() 521 http()
508 .put("/updateSection", editStudent) 522 .put("/updateSection", editStudent)
509 .then(response => { 523 .then(response => {
510 // console.log("editStudent",editStudent); 524 // console.log("editStudent",editStudent);
511 if ((this.snackbar = true)) { 525 if ((this.snackbar = true)) {
512 this.text = "Successfully Edit Existing User"; 526 this.text = "Successfully Edit Existing Section";
513 } 527 }
514 this.getSectionList(); 528 this.getSectionList();
515 // this.showLoader = false; 529 // this.showLoader = false;
516 }) 530 })
517 .catch(error => { 531 .catch(error => {
518 this.text = error.response.data.message; 532 this.text = error.response.data.message;
519 // console.log(error); 533 // console.log(error);
520 }); 534 });
521 this.close(); 535 this.close();
522 // } 536 // }
523 }, 537 },
524 handleDrawerToggle() { 538 handleDrawerToggle() {
525 window.getApp.$emit("APP_DRAWER_TOGGLED"); 539 window.getApp.$emit("APP_DRAWER_TOGGLED");
526 }, 540 },
527 handleFullScreen() { 541 handleFullScreen() {
528 Util.toggleFullScreen(); 542 Util.toggleFullScreen();
529 } 543 }
530 }, 544 },
531 mounted() { 545 mounted() {
532 this.getSectionList(); 546 this.getSectionList();
533 547
534 var token = this.$store.state.token; 548 var token = this.$store.state.token;
535 http() 549 http()
536 .get("/getClassesList", { 550 .get("/getClassesList", {
537 headers: { Authorization: "Bearer " + token } 551 headers: { Authorization: "Bearer " + token }
538 }) 552 })
539 .then(response => { 553 .then(response => {
540 this.addclass = response.data.data; 554 this.addclass = response.data.data;
541 console.log("getClassesList=====>",this.addclass) 555 console.log("getClassesList=====>",this.addclass)
542 556
543 }) 557 })
544 .catch(err => { 558 .catch(err => {
545 // console.log("err====>", err); 559 // console.log("err====>", err);
546 this.$router.replace({ path: '/' }); 560 this.$router.replace({ path: '/' });
547 }); 561 });
548 }, 562 },
549 563
550 computed:{ 564 computed:{
551 toolbarColor() { 565 toolbarColor() {
552 return this.$vuetify.options.extra.mainNav; 566 return this.$vuetify.options.extra.mainNav;
553 } 567 }
554 } 568 }
555 }; 569 };
556 </script> 570 </script>
557 <style scoped> 571 <style scoped>
558 .v-tabs__div { 572 .v-tabs__div {
559 text-transform: none; 573 text-transform: none;
560 } 574 }
561 .v-input__prepend-outer { 575 .v-input__prepend-outer {
562 margin-right: 0px !important; 576 margin-right: 0px !important;
563 } 577 }
564 .v-card__actions .v-btn { 578 .v-card__actions .v-btn {
565 margin: 0 15px; 579 margin: 0 15px;
566 min-width: 120px; 580 min-width: 120px;
567 } 581 }
568 .primary { 582 .primary {
569 background-color: #aaa !important; 583 background-color: #aaa !important;
570 border-color: #aaa !important; 584 border-color: #aaa !important;
571 } 585 }
572 h4 { 586 h4 {
573 background-repeat: no-repeat; 587 background-repeat: no-repeat;
574 padding: 8px; 588 padding: 8px;
575 margin: auto; 589 margin: auto;
576 font-size: 25px; 590 font-size: 25px;
577 } 591 }
578 #name { 592 #name {
579 position: absolute; 593 position: absolute;
580 left: 100px; 594 left: 100px;
581 top: 17px; 595 top: 17px;
582 } 596 }
583 #icon { 597 #icon {
584 position: absolute; 598 position: absolute;
585 right: 8px; 599 right: 8px;
586 top: 8px; 600 top: 8px;
587 } 601 }
588 #m { 602 #m {
589 position: relative; 603 position: relative;
590 left: 135px; 604 left: 135px;
591 top: -15px; 605 top: -15px;
592 } 606 }
593 #G { 607 #G {
594 position: absolute; 608 position: absolute;
595 top: 38px; 609 top: 38px;
596 color: white; 610 color: white;
597 } 611 }
598 #bt { 612 #bt {
599 position: relative; 613 position: relative;
600 top: -20px; 614 top: -20px;
601 left: 115px; 615 left: 115px;
602 } 616 }
603 #e { 617 #e {
604 position: relative; 618 position: relative;
605 top: 5px; 619 top: 5px;
606 right: -30px; 620 right: -30px;
607 height: 17px; 621 height: 17px;
608 cursor: pointer; 622 cursor: pointer;
609 } 623 }
610 #d { 624 #d {
611 position: relative; 625 position: relative;
612 top: 5px; 626 top: 5px;
613 right: -70px; 627 right: -70px;
614 height: 17px; 628 height: 17px;
615 cursor: pointer; 629 cursor: pointer;
616 } 630 }
617 #td { 631 #td {
618 border: 1px solid #dddddd; 632 border: 1px solid #dddddd;
619 text-align: left; 633 text-align: left;
620 padding: 8px; 634 padding: 8px;
621 } 635 }
622 #dialog { 636 #dialog {
623 height: 550px; 637 height: 550px;
624 } 638 }
625 .active { 639 .active {
626 background-color: black; 640 background-color: black;
627 color: white !important; 641 color: white !important;
628 } 642 }
629 .activebtn { 643 .activebtn {
630 color: black !important; 644 color: black !important;
631 } 645 }
632 #flex { 646 #flex {
633 height: 300px; 647 height: 300px;
634 } 648 }
635 .top{ 649 .top{
636 margin-top:100px; 650 margin-top:100px;
637 } 651 }
638 .v-tabs__item a{ 652 .v-tabs__item a{
639 font-size:16px !important; 653 font-size:16px !important;
640 } 654 }
641 @media screen and (max-width: 769px){ 655 @media screen and (max-width: 769px){
642 .top{ 656 .top{
643 margin-top:0 !important; 657 margin-top:0 !important;
644 } 658 }
645 .userSearch .v-icon { 659 .userSearch .v-icon {
646 font-size: 20px !important; 660 font-size: 20px !important;
647 margin-left: 20px ; 661 margin-left: 20px ;
648 } 662 }
649 } 663 }
650 @media screen and (max-width: 380px) { 664 @media screen and (max-width: 380px) {
651 .pl-3 { 665 .pl-3 {
652 padding-left: 0px !important; 666 padding-left: 0px !important;
653 } 667 }
654 .right { 668 .right {
655 float: none !important; 669 float: none !important;
656 } 670 }
657 .subheading { 671 .subheading {
658 font-size: 14px !important; 672 font-size: 14px !important;
659 } 673 }
660 .v-card__actions .v-btn{ 674 .v-card__actions .v-btn{
661 margin: 0 0px; 675 margin: 0 0px;
662 min-width: 100px; 676 min-width: 100px;
663 } 677 }
664 /* .searchIcon .v-icon { 678 /* .searchIcon .v-icon {
665 font-size: 20px; 679 font-size: 20px;
666 margin-left: 20px; 680 margin-left: 20px;
667 } */ 681 } */
668 .subheading { 682 .subheading {
669 font-size: 12px !important; 683 font-size: 12px !important;
670 } 684 }
671 h5 { 685 h5 {
672 font-size: 13px; 686 font-size: 13px;
673 } 687 }
674 } 688 }
675 .v-icon{ 689 .v-icon{
676 font-size:30px; 690 font-size:30px;
677 } 691 }
678 @media screen and (min-width: 1270px){ 692 @media screen and (min-width: 1270px){
679 .hide{ 693 .hide{
680 display: none; 694 display: none;
681 } 695 }
682 /* } 696 /* }
683 @media screen and (max-width: 962px) { 697 @media screen and (max-width: 962px) {
684 .imglogo{ 698 .imglogo{
685 position: absolute; 699 position: absolute;
686 top: 13px; 700 top: 13px;
687 left: 13px !important; 701 left: 13px !important;
688 width: 70px; 702 width: 70px;
689 height: 24px; 703 height: 24px;
690 } */ 704 } */
691 } 705 }
692 @media screen and (max-width: 420px){ 706 @media screen and (max-width: 420px){
693 .userSearch .v-text-field .v-label{ 707 .userSearch .v-text-field .v-label{
694 line-height: 24px !important; 708 line-height: 24px !important;
695 } 709 }
696 .userSearch .v-label{ 710 .userSearch .v-label{
697 font-size: 13px !important; 711 font-size: 13px !important;
698 } 712 }
699 .v-list__tile { 713 .v-list__tile {
700 font-size:14px; 714 font-size:14px;
701 padding: 0 10px; 715 padding: 0 10px;
702 } 716 }
703 .name{ 717 .name{
704 font-size:15px; 718 font-size:15px;
705 } 719 }
706 } 720 }
707 </style> 721 </style>
src/pages/Students/students.vue
Diff comments   View file @5f1d4b4
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">
76 <v-flex xs12 sm12 class=""> 76 <v-flex xs12 sm12 class="">
77 <v-toolbar color="grey lighten-2"> 77 <v-toolbar color="grey lighten-2">
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 flat>
83 <v-form ref="form"> 83 <v-form ref="form">
84 <v-container fluid> 84 <v-container fluid>
85 <v-layout> 85 <v-layout>
86 <v-flex 86 <v-flex
87 xs12 87 xs12
88 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4" 88 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4"
89 > 89 >
90 <v-avatar size="100px"> 90 <v-avatar size="100px">
91 <img src="/static/icon/user.png" v-if="!imageUrl"> 91 <img src="/static/icon/user.png" v-if="!imageUrl">
92 </v-avatar> 92 </v-avatar>
93 <input 93 <input
94 type="file" 94 type="file"
95 style="display: none" 95 style="display: none"
96 ref="image" 96 ref="image"
97 accept="image/*" 97 accept="image/*"
98 @change="onFilePicked" 98 @change="onFilePicked"
99 > 99 >
100 <img 100 <img
101 :src="imageData.imageUrl" 101 :src="imageData.imageUrl"
102 height="150" 102 height="150"
103 v-if="imageUrl" 103 v-if="imageUrl"
104 style="border-radius:50%; width:200px" 104 style="border-radius:50%; width:200px"
105 > 105 >
106 </v-flex> 106 </v-flex>
107 </v-layout> 107 </v-layout>
108 <v-layout> 108 <v-layout>
109 <v-flex xs12 sm4> 109 <v-flex xs12 sm4>
110 <v-layout> 110 <v-layout>
111 <v-flex xs4 class="pt-4 subheading"> 111 <v-flex xs4 class="pt-4 subheading">
112 <label class="right">Select Class:</label> 112 <label class="right">Select Class:</label>
113 </v-flex> 113 </v-flex>
114 <v-flex xs8 class="ml-3"> 114 <v-flex xs8 class="ml-3">
115 <v-select 115 <v-select
116 :items="addclass" 116 :items="addclass"
117 label="Select Class" 117 label="Select Class"
118 v-model="editedItem.select" 118 v-model="editedItem.select"
119 item-text="classNum" 119 item-text="classNum"
120 item-value="_id" 120 item-value="_id"
121 name="Select Class" 121 name="Select Class"
122 @change="getSections(editedItem.select)" 122 @change="getSections(editedItem.select)"
123 required 123 required
124 ></v-select> 124 ></v-select>
125 </v-flex> 125 </v-flex>
126 </v-layout> 126 </v-layout>
127 </v-flex> 127 </v-flex>
128 <v-flex xs12 sm4> 128 <v-flex xs12 sm4>
129 <v-layout> 129 <v-layout>
130 <v-flex xs4 class="pt-4 subheading"> 130 <v-flex xs4 class="pt-4 subheading">
131 <label class="right">Select Section:</label> 131 <label class="right">Select Section:</label>
132 </v-flex> 132 </v-flex>
133 <v-flex xs8 class="ml-3"> 133 <v-flex xs8 class="ml-3">
134 <v-select 134 <v-select
135 :items="addSection" 135 :items="addSection"
136 label="Select Section" 136 label="Select Section"
137 v-model="editedItem.selectSection" 137 v-model="editedItem.selectSection"
138 item-text="name" 138 item-text="name"
139 item-value="_id" 139 item-value="_id"
140 name="Select Section" 140 name="Select Section"
141 required 141 required
142 ></v-select> 142 ></v-select>
143 </v-flex> 143 </v-flex>
144 </v-layout> 144 </v-layout>
145 </v-flex> 145 </v-flex>
146 <v-flex xs12 sm4> 146 <v-flex xs12 sm4>
147 <v-layout> 147 <v-layout>
148 <v-flex xs4 class="pt-4 subheading"> 148 <v-flex xs4 class="pt-4 subheading">
149 <label class="right">Full Name:</label> 149 <label class="right">Full Name:</label>
150 </v-flex> 150 </v-flex>
151 <v-flex xs8 class="ml-3"> 151 <v-flex xs8 class="ml-3">
152 <v-text-field 152 <v-text-field
153 v-model="editedItem.name" 153 v-model="editedItem.name"
154 placeholder="fill your full Name" 154 placeholder="fill your full Name"
155 name="name" 155 name="name"
156 type="text" 156 type="text"
157 required 157 required
158 ></v-text-field> 158 ></v-text-field>
159 </v-flex> 159 </v-flex>
160 </v-layout> 160 </v-layout>
161 </v-flex> 161 </v-flex>
162 </v-layout> 162 </v-layout>
163 <v-layout> 163 <v-layout>
164 <v-flex xs12 sm4> 164 <v-flex xs12 sm4>
165 <v-layout> 165 <v-layout>
166 <v-flex xs4 class="pt-4 subheading"> 166 <v-flex xs4 class="pt-4 subheading">
167 <label class="right">Email ID:</label> 167 <label class="right">Email ID:</label>
168 </v-flex> 168 </v-flex>
169 <v-flex xs8 class="ml-3"> 169 <v-flex xs8 class="ml-3">
170 <v-text-field 170 <v-text-field
171 placeholder="fill your email" 171 placeholder="fill your email"
172 v-model="editedItem.email" 172 v-model="editedItem.email"
173 type="text" 173 type="text"
174 name="email" 174 name="email"
175 required 175 required
176 ></v-text-field> 176 ></v-text-field>
177 </v-flex> 177 </v-flex>
178 </v-layout> 178 </v-layout>
179 </v-flex> 179 </v-flex>
180 <v-flex xs12 sm4> 180 <v-flex xs12 sm4>
181 <v-layout> 181 <v-layout>
182 <v-flex xs4 class="pt-4 subheading"> 182 <v-flex xs4 class="pt-4 subheading">
183 <label class="right">Date of Birth:</label> 183 <label class="right">Date of Birth:</label>
184 </v-flex> 184 </v-flex>
185 <v-flex xs8 class="ml-3"> 185 <v-flex xs8 class="ml-3">
186 <v-menu 186 <v-menu
187 ref="menu" 187 ref="menu"
188 :close-on-content-click="false" 188 :close-on-content-click="false"
189 v-model="menu1" 189 v-model="menu1"
190 :nudge-right="40" 190 :nudge-right="40"
191 lazy 191 lazy
192 transition="scale-transition" 192 transition="scale-transition"
193 offset-y 193 offset-y
194 full-width 194 full-width
195 min-width="290px" 195 min-width="290px"
196 > 196 >
197 <v-text-field 197 <v-text-field
198 slot="activator" 198 slot="activator"
199 v-model="editedItem.dob" 199 v-model="editedItem.dob"
200 placeholder="Select Dob" 200 placeholder="Select Dob"
201 ></v-text-field> 201 ></v-text-field>
202 <v-date-picker 202 <v-date-picker
203 ref="picker" 203 ref="picker"
204 v-model="editedItem.dob" 204 v-model="editedItem.dob"
205 :max="new Date().toISOString().substr(0, 10)" 205 :max="new Date().toISOString().substr(0, 10)"
206 min="1950-01-01" 206 min="1950-01-01"
207 @input="menu1 = false" 207 @input="menu1 = false"
208 ></v-date-picker> 208 ></v-date-picker>
209 </v-menu> 209 </v-menu>
210 </v-flex> 210 </v-flex>
211 </v-layout> 211 </v-layout>
212 </v-flex> 212 </v-flex>
213 <v-flex xs12 sm4> 213 <v-flex xs12 sm4>
214 <v-layout> 214 <v-layout>
215 <v-flex xs4 class="pt-4 subheading"> 215 <v-flex xs4 class="pt-4 subheading">
216 <label class="right">City:</label> 216 <label class="right">City:</label>
217 </v-flex> 217 </v-flex>
218 <v-flex xs8 class="ml-3"> 218 <v-flex xs8 class="ml-3">
219 <v-text-field 219 <v-text-field
220 v-model="editedItem.city" 220 v-model="editedItem.city"
221 placeholder="fill your City Name" 221 placeholder="fill your City Name"
222 name="City" 222 name="City"
223 type="text" 223 type="text"
224 required 224 required
225 ></v-text-field> 225 ></v-text-field>
226 </v-flex> 226 </v-flex>
227 </v-layout> 227 </v-layout>
228 </v-flex> 228 </v-flex>
229 </v-layout> 229 </v-layout>
230 <v-layout> 230 <v-layout>
231 <v-flex xs12 sm4> 231 <v-flex xs12 sm4>
232 <v-layout> 232 <v-layout>
233 <v-flex xs4 class="pt-4 subheading"> 233 <v-flex xs4 class="pt-4 subheading">
234 <label class="right">State:</label> 234 <label class="right">State:</label>
235 </v-flex> 235 </v-flex>
236 <v-flex xs8 class="ml-3"> 236 <v-flex xs8 class="ml-3">
237 <v-text-field 237 <v-text-field
238 v-model="editedItem.state" 238 v-model="editedItem.state"
239 placeholder="fill your State Name" 239 placeholder="fill your State Name"
240 name="state" 240 name="state"
241 type="text" 241 type="text"
242 required 242 required
243 ></v-text-field> 243 ></v-text-field>
244 </v-flex> 244 </v-flex>
245 </v-layout> 245 </v-layout>
246 </v-flex> 246 </v-flex>
247 <v-flex xs12 sm4> 247 <v-flex xs12 sm4>
248 <v-layout> 248 <v-layout>
249 <v-flex xs4 class="pt-4 subheading"> 249 <v-flex xs4 class="pt-4 subheading">
250 <label class="right">Pincode:</label> 250 <label class="right">Pincode:</label>
251 </v-flex> 251 </v-flex>
252 <v-flex xs8 class="ml-3"> 252 <v-flex xs8 class="ml-3">
253 <v-text-field 253 <v-text-field
254 v-model="editedItem.pincode" 254 v-model="editedItem.pincode"
255 placeholder="fill your pincode" 255 placeholder="fill your pincode"
256 name="pincode" 256 name="pincode"
257 type="number" 257 type="number"
258 required 258 required
259 ></v-text-field> 259 ></v-text-field>
260 </v-flex> 260 </v-flex>
261 </v-layout> 261 </v-layout>
262 </v-flex> 262 </v-flex>
263 <v-flex xs12 sm4> 263 <v-flex xs12 sm4>
264 <v-layout> 264 <v-layout>
265 <v-flex xs4 class="pt-4 subheading"> 265 <v-flex xs4 class="pt-4 subheading">
266 <label class="right">Mobile No:</label> 266 <label class="right">Mobile No:</label>
267 </v-flex> 267 </v-flex>
268 <v-flex xs8 class="ml-3"> 268 <v-flex xs8 class="ml-3">
269 <v-text-field 269 <v-text-field
270 v-model="editedItem.mobile" 270 v-model="editedItem.mobile"
271 placeholder="fill your MobileNo" 271 placeholder="fill your MobileNo"
272 name="mobileNo" 272 name="mobileNo"
273 type="number" 273 type="number"
274 required 274 required
275 ></v-text-field> 275 ></v-text-field>
276 </v-flex> 276 </v-flex>
277 </v-layout> 277 </v-layout>
278 </v-flex> 278 </v-flex>
279 </v-layout> 279 </v-layout>
280 <v-layout> 280 <v-layout>
281 <v-flex xs12 sm4> 281 <v-flex xs12 sm4>
282 <v-layout> 282 <v-layout>
283 <v-flex xs4 class="pt-4 subheading"> 283 <v-flex xs4 class="pt-4 subheading">
284 <label class="right">Select Country:</label> 284 <label class="right">Select Country:</label>
285 </v-flex> 285 </v-flex>
286 <v-flex xs8 class="ml-3"> 286 <v-flex xs8 class="ml-3">
287 <v-autocomplete 287 <v-autocomplete
288 v-model="editedItem.country" 288 v-model="editedItem.country"
289 :items="countries" 289 :items="countries"
290 placeholder="Select Country Name" 290 placeholder="Select Country Name"
291 required 291 required
292 ></v-autocomplete> 292 ></v-autocomplete>
293 </v-flex> 293 </v-flex>
294 </v-layout> 294 </v-layout>
295 </v-flex> 295 </v-flex>
296 <v-flex xs12 sm4> 296 <v-flex xs12 sm4>
297 <v-layout> 297 <v-layout>
298 <v-flex xs4 class="pt-4 subheading"> 298 <v-flex xs4 class="pt-4 subheading">
299 <label class="right">Gender:</label> 299 <label class="right">Gender:</label>
300 </v-flex> 300 </v-flex>
301 <v-flex xs8 class="ml-3"> 301 <v-flex xs8 class="ml-3">
302 <v-select 302 <v-select
303 :items="gender" 303 :items="gender"
304 v-model="editedItem.gender" 304 v-model="editedItem.gender"
305 placeholder="Select Gender" 305 placeholder="Select Gender"
306 required 306 required
307 ></v-select> 307 ></v-select>
308 </v-flex> 308 </v-flex>
309 </v-layout> 309 </v-layout>
310 </v-flex> 310 </v-flex>
311 <v-flex xs12 sm4> 311 <v-flex xs12 sm4>
312 <v-layout> 312 <v-layout>
313 <v-flex xs4 class="pt-4 subheading"> 313 <v-flex xs4 class="pt-4 subheading">
314 <label class="right">Father Name:</label> 314 <label class="right">Father Name:</label>
315 </v-flex> 315 </v-flex>
316 <v-flex xs8 class="ml-3"> 316 <v-flex xs8 class="ml-3">
317 <v-text-field 317 <v-text-field
318 v-model="editedItem.fatherName" 318 v-model="editedItem.fatherName"
319 :items="countries" 319 :items="countries"
320 placeholder="Fill your father Name" 320 placeholder="Fill your father Name"
321 required 321 required
322 ></v-text-field> 322 ></v-text-field>
323 </v-flex> 323 </v-flex>
324 </v-layout> 324 </v-layout>
325 </v-flex> 325 </v-flex>
326 </v-layout> 326 </v-layout>
327 <v-layout> 327 <v-layout>
328 <v-flex xs12 sm4> 328 <v-flex xs12 sm4>
329 <v-layout> 329 <v-layout>
330 <v-flex xs4 class="pt-4 subheading"> 330 <v-flex xs4 class="pt-4 subheading">
331 <label class="right">Father Cell No:</label> 331 <label class="right">Father Cell No:</label>
332 </v-flex> 332 </v-flex>
333 <v-flex xs8 class="ml-3"> 333 <v-flex xs8 class="ml-3">
334 <v-text-field 334 <v-text-field
335 v-model="editedItem.fatherCellNo" 335 v-model="editedItem.fatherCellNo"
336 placeholder="fill your father Cell Number" 336 placeholder="fill your father Cell Number"
337 name="state" 337 name="state"
338 type="number" 338 type="number"
339 required 339 required
340 ></v-text-field> 340 ></v-text-field>
341 </v-flex> 341 </v-flex>
342 </v-layout> 342 </v-layout>
343 </v-flex> 343 </v-flex>
344 <v-flex xs12 sm4> 344 <v-flex xs12 sm4>
345 <v-layout> 345 <v-layout>
346 <v-flex xs4 class="pt-4 subheading"> 346 <v-flex xs4 class="pt-4 subheading">
347 <label class="right">Mother Name:</label> 347 <label class="right">Mother Name:</label>
348 </v-flex> 348 </v-flex>
349 <v-flex xs8 class="ml-3"> 349 <v-flex xs8 class="ml-3">
350 <v-text-field 350 <v-text-field
351 v-model="editedItem.motherName" 351 v-model="editedItem.motherName"
352 placeholder="fill your Mother Name" 352 placeholder="fill your Mother Name"
353 name="state" 353 name="state"
354 type="text" 354 type="text"
355 required 355 required
356 ></v-text-field> 356 ></v-text-field>
357 </v-flex> 357 </v-flex>
358 </v-layout> 358 </v-layout>
359 </v-flex> 359 </v-flex>
360 <v-flex xs12 sm4> 360 <v-flex xs12 sm4>
361 <v-layout> 361 <v-layout>
362 <v-flex xs4 class="pt-4 subheading"> 362 <v-flex xs4 class="pt-4 subheading">
363 <label class="right">Mother Cell No:</label> 363 <label class="right">Mother Cell No:</label>
364 </v-flex> 364 </v-flex>
365 <v-flex xs8 class="ml-3"> 365 <v-flex xs8 class="ml-3">
366 <v-text-field 366 <v-text-field
367 v-model="editedItem.motherCellNo" 367 v-model="editedItem.motherCellNo"
368 placeholder="fill your Mother Cell Number" 368 placeholder="fill your Mother Cell Number"
369 name="state" 369 name="state"
370 type="number" 370 type="number"
371 required 371 required
372 ></v-text-field> 372 ></v-text-field>
373 </v-flex> 373 </v-flex>
374 </v-layout> 374 </v-layout>
375 </v-flex> 375 </v-flex>
376 </v-layout> 376 </v-layout>
377 <v-layout> 377 <v-layout>
378 <v-flex xs12 sm4> 378 <v-flex xs12 sm4>
379 <v-layout> 379 <v-layout>
380 <v-flex xs4 class="pt-4 subheading"> 380 <v-flex xs4 class="pt-4 subheading">
381 <label class="right">Academic Year:</label> 381 <label class="right">Academic Year:</label>
382 </v-flex> 382 </v-flex>
383 <v-flex xs8 class="ml-3"> 383 <v-flex xs8 class="ml-3">
384 <v-text-field 384 <v-text-field
385 v-model="editedItem.establishmentYear" 385 v-model="editedItem.establishmentYear"
386 placeholder="fill your Mother Name" 386 placeholder="fill your Mother Name"
387 name="state" 387 name="state"
388 type="number" 388 type="number"
389 required 389 required
390 ></v-text-field> 390 ></v-text-field>
391 </v-flex> 391 </v-flex>
392 </v-layout> 392 </v-layout>
393 </v-flex> 393 </v-flex>
394 394
395 <v-flex xs12 sm4> 395 <v-flex xs12 sm4>
396 <v-layout> 396 <v-layout>
397 <v-flex xs4 class="pt-4 subheading"> 397 <v-flex xs4 class="pt-4 subheading">
398 <label class="right">Uplaod Image:</label> 398 <label class="right">Uplaod Image:</label>
399 </v-flex> 399 </v-flex>
400 <v-flex xs8 class="ml-3"> 400 <v-flex xs8 class="ml-3">
401 <v-text-field 401 <v-text-field
402 label="Select Image" 402 label="Select Image"
403 @click="pickFile" 403 @click="pickFile"
404 v-model="imageName" 404 v-model="imageName"
405 prepend-icon="attach_file" 405 prepend-icon="attach_file"
406 ></v-text-field> 406 ></v-text-field>
407 </v-flex> 407 </v-flex>
408 </v-layout> 408 </v-layout>
409 </v-flex> 409 </v-flex>
410 <v-flex xs12 sm4> 410 <v-flex xs12 sm4>
411 <v-layout> 411 <v-layout>
412 <v-flex xs4 class="pt-4 subheading"> 412 <v-flex xs4 class="pt-4 subheading">
413 <label class="right">Present Address:</label> 413 <label class="right">Present Address:</label>
414 </v-flex> 414 </v-flex>
415 <v-flex xs8 class="ml-3"> 415 <v-flex xs8 class="ml-3">
416 <v-text-field 416 <v-text-field
417 v-model="editedItem.presentAddress" 417 v-model="editedItem.presentAddress"
418 placeholder="fill Your present Address" 418 placeholder="fill Your present Address"
419 required 419 required
420 ></v-text-field> 420 ></v-text-field>
421 </v-flex> 421 </v-flex>
422 </v-layout> 422 </v-layout>
423 </v-flex> 423 </v-flex>
424 </v-layout> 424 </v-layout>
425 <v-layout> 425 <v-layout>
426 <v-flex xs3 class="pt-4 subheading"> 426 <v-flex xs3 class="pt-4 subheading">
427 <label>Permanent Address:</label> 427 <label>Permanent Address:</label>
428 </v-flex> 428 </v-flex>
429 <v-flex xs9> 429 <v-flex xs9>
430 <v-text-field 430 <v-text-field
431 name="input-4-3" 431 name="input-4-3"
432 v-model="editedItem.permanentAddress" 432 v-model="editedItem.permanentAddress"
433 placeholder="fill Your Permanent Address" 433 placeholder="fill Your Permanent Address"
434 required 434 required
435 ></v-text-field> 435 ></v-text-field>
436 </v-flex> 436 </v-flex>
437 </v-layout> 437 </v-layout>
438 <v-layout> 438 <v-layout>
439 <v-flex xs12 sm12> 439 <v-flex xs12 sm12>
440 <v-card-actions> 440 <v-card-actions>
441 <v-btn round dark @click.native="close">Cancel</v-btn> 441 <v-btn round dark @click.native="close">Cancel</v-btn>
442 <v-spacer></v-spacer> 442 <v-spacer></v-spacer>
443 <v-btn round dark @click="save">Save</v-btn> 443 <v-btn round dark @click="save">Save</v-btn>
444 </v-card-actions> 444 </v-card-actions>
445 </v-flex> 445 </v-flex>
446 </v-layout> 446 </v-layout>
447 </v-container> 447 </v-container>
448 </v-form> 448 </v-form>
449 </v-card> 449 </v-card>
450 </v-flex> 450 </v-flex>
451 </v-dialog> 451 </v-dialog>
452 452
453 <!-- ****** PROFILE VIEW STUDENTS DEATILS ****** --> 453 <!-- ****** PROFILE VIEW STUDENTS DEATILS ****** -->
454 <v-dialog v-model="dialog1" max-width="600px"> 454 <v-dialog v-model="dialog1" max-width="600px">
455 <v-toolbar color="grey lighten-2"> 455 <v-toolbar color="grey lighten-2">
456 <v-spacer></v-spacer> 456 <v-spacer></v-spacer>
457 <v-toolbar-title>Student Profile</v-toolbar-title> 457 <v-toolbar-title>Student Profile</v-toolbar-title>
458 <v-spacer></v-spacer> 458 <v-spacer></v-spacer>
459 <v-icon @click="close1">close</v-icon> 459 <v-icon @click="close1">close</v-icon>
460 </v-toolbar> 460 </v-toolbar>
461 <v-card> 461 <v-card>
462 <v-flex align-center justify-center layout text-xs-center> 462 <v-flex align-center justify-center layout text-xs-center>
463 <v-avatar size="50px" style="position:absolute; top:20px;"> 463 <v-avatar size="50px" style="position:absolute; top:20px;">
464 <img src="/static/icon/user.png"> 464 <img src="/static/icon/user.png">
465 </v-avatar> 465 </v-avatar>
466 </v-flex> 466 </v-flex>
467 <v-card-text> 467 <v-card-text>
468 <v-container grid-list-md> 468 <v-container grid-list-md>
469 <v-layout wrap> 469 <v-layout wrap>
470 <v-flex> 470 <v-flex>
471 <br> 471 <br>
472 <br> 472 <br>
473 <v-layout> 473 <v-layout>
474 <v-flex xs5 sm6> 474 <v-flex xs5 sm6>
475 <h5 class="right my-1">Full Name:</h5> 475 <h5 class="right my-1">Full Name:</h5>
476 </v-flex> 476 </v-flex>
477 <v-flex sm6 xs8> 477 <v-flex sm6 xs8>
478 <h5 class="my-1">{{ editedItem.name }}</h5> 478 <h5 class="my-1">{{ editedItem.name }}</h5>
479 </v-flex> 479 </v-flex>
480 </v-layout> 480 </v-layout>
481 <v-layout> 481 <v-layout>
482 <v-flex xs5 sm6> 482 <v-flex xs5 sm6>
483 <h5 class="right my-1">Email:</h5> 483 <h5 class="right my-1">Email:</h5>
484 </v-flex> 484 </v-flex>
485 <v-flex sm6 xs8> 485 <v-flex sm6 xs8>
486 <h5 class="my-1">{{ editedItem.email }}</h5> 486 <h5 class="my-1">{{ editedItem.email }}</h5>
487 </v-flex> 487 </v-flex>
488 </v-layout> 488 </v-layout>
489 <v-layout> 489 <v-layout>
490 <v-flex xs6 sm6> 490 <v-flex xs6 sm6>
491 <h5 class="right my-1">Gender:</h5> 491 <h5 class="right my-1">Gender:</h5>
492 </v-flex> 492 </v-flex>
493 <v-flex sm6 xs8> 493 <v-flex sm6 xs8>
494 <h5 class="my-1">{{ editedItem.gender }}</h5> 494 <h5 class="my-1">{{ editedItem.gender }}</h5>
495 </v-flex> 495 </v-flex>
496 </v-layout> 496 </v-layout>
497 <v-layout> 497 <v-layout>
498 <v-flex xs5 sm6> 498 <v-flex xs5 sm6>
499 <h5 class="right my-1">City:</h5> 499 <h5 class="right my-1">City:</h5>
500 </v-flex> 500 </v-flex>
501 <v-flex sm6 xs8> 501 <v-flex sm6 xs8>
502 <h5 class="my-1">{{ editedItem.city }}</h5> 502 <h5 class="my-1">{{ editedItem.city }}</h5>
503 </v-flex> 503 </v-flex>
504 </v-layout> 504 </v-layout>
505 <v-layout> 505 <v-layout>
506 <v-flex xs5 sm6> 506 <v-flex xs5 sm6>
507 <h5 class="right my-1">State:</h5> 507 <h5 class="right my-1">State:</h5>
508 </v-flex> 508 </v-flex>
509 <v-flex sm6 xs8> 509 <v-flex sm6 xs8>
510 <h5 class="my-1">{{ editedItem.state }}</h5> 510 <h5 class="my-1">{{ editedItem.state }}</h5>
511 </v-flex> 511 </v-flex>
512 </v-layout> 512 </v-layout>
513 <v-layout> 513 <v-layout>
514 <v-flex xs5 sm6> 514 <v-flex xs5 sm6>
515 <h5 class="right my-1">Country:</h5> 515 <h5 class="right my-1">Country:</h5>
516 </v-flex> 516 </v-flex>
517 <v-flex sm6 xs8> 517 <v-flex sm6 xs8>
518 <h5 class="my-1">{{ editedItem.country }}</h5> 518 <h5 class="my-1">{{ editedItem.country }}</h5>
519 </v-flex> 519 </v-flex>
520 </v-layout> 520 </v-layout>
521 <v-layout> 521 <v-layout>
522 <v-flex xs5 sm6> 522 <v-flex xs5 sm6>
523 <h5 class="right my-1">Pincode:</h5> 523 <h5 class="right my-1">Pincode:</h5>
524 </v-flex> 524 </v-flex>
525 <v-flex sm6 xs8> 525 <v-flex sm6 xs8>
526 <h5 class="my-1">{{ editedItem.pincode }}</h5> 526 <h5 class="my-1">{{ editedItem.pincode }}</h5>
527 </v-flex> 527 </v-flex>
528 </v-layout> 528 </v-layout>
529 <v-layout> 529 <v-layout>
530 <v-flex xs5 sm6> 530 <v-flex xs5 sm6>
531 <h5 class="right my-1">Mobile No:</h5> 531 <h5 class="right my-1">Mobile No:</h5>
532 </v-flex> 532 </v-flex>
533 <v-flex sm6 xs8> 533 <v-flex sm6 xs8>
534 <h5 class="my-1">{{ editedItem.mobile }}</h5> 534 <h5 class="my-1">{{ editedItem.mobile }}</h5>
535 </v-flex> 535 </v-flex>
536 </v-layout> 536 </v-layout>
537 <v-layout> 537 <v-layout>
538 <v-flex xs5 sm6> 538 <v-flex xs5 sm6>
539 <h5 class="right my-1">Academic Year:</h5> 539 <h5 class="right my-1">Academic Year:</h5>
540 </v-flex> 540 </v-flex>
541 <v-flex sm6 xs8> 541 <v-flex sm6 xs8>
542 <h5 class="my-1">{{ editedItem.establishmentYear }}</h5> 542 <h5 class="my-1">{{ editedItem.establishmentYear }}</h5>
543 </v-flex> 543 </v-flex>
544 </v-layout> 544 </v-layout>
545 <v-layout> 545 <v-layout>
546 <v-flex xs5 sm6> 546 <v-flex xs5 sm6>
547 <h5 class="right my-1">Fahter Name:</h5> 547 <h5 class="right my-1">Fahter Name:</h5>
548 </v-flex> 548 </v-flex>
549 <v-flex sm6 xs8> 549 <v-flex sm6 xs8>
550 <h5 class="my-1">{{ editedItem.fatherName }}</h5> 550 <h5 class="my-1">{{ editedItem.fatherName }}</h5>
551 </v-flex> 551 </v-flex>
552 </v-layout> 552 </v-layout>
553 <v-layout> 553 <v-layout>
554 <v-flex xs5 sm6> 554 <v-flex xs5 sm6>
555 <h5 class="right my-1">Mother Name:</h5> 555 <h5 class="right my-1">Mother Name:</h5>
556 </v-flex> 556 </v-flex>
557 <v-flex sm6 xs8> 557 <v-flex sm6 xs8>
558 <h5 class="my-1">{{ editedItem.motherName }}</h5> 558 <h5 class="my-1">{{ editedItem.motherName }}</h5>
559 </v-flex> 559 </v-flex>
560 </v-layout> 560 </v-layout>
561 <v-layout> 561 <v-layout>
562 <v-flex xs5 sm6> 562 <v-flex xs5 sm6>
563 <h5 class="right my-1">Father Cell No:</h5> 563 <h5 class="right my-1">Father Cell No:</h5>
564 </v-flex> 564 </v-flex>
565 <v-flex sm6 xs8> 565 <v-flex sm6 xs8>
566 <h5 class="my-1">{{ editedItem.fatherCellNo }}</h5> 566 <h5 class="my-1">{{ editedItem.fatherCellNo }}</h5>
567 </v-flex> 567 </v-flex>
568 </v-layout> 568 </v-layout>
569 <v-layout> 569 <v-layout>
570 <v-flex xs5 sm6> 570 <v-flex xs5 sm6>
571 <h5 class="right my-1">Mother Cell No:</h5> 571 <h5 class="right my-1">Mother Cell No:</h5>
572 </v-flex> 572 </v-flex>
573 <v-flex sm6 xs8> 573 <v-flex sm6 xs8>
574 <h5 class="my-1">{{ editedItem.motherCellNo }}</h5> 574 <h5 class="my-1">{{ editedItem.motherCellNo }}</h5>
575 </v-flex> 575 </v-flex>
576 </v-layout> 576 </v-layout>
577 <v-layout> 577 <v-layout>
578 <v-flex xs5 sm6> 578 <v-flex xs5 sm6>
579 <h5 class="right my-1">Date Of Birth:</h5> 579 <h5 class="right my-1">Date Of Birth:</h5>
580 </v-flex> 580 </v-flex>
581 <v-flex sm6 xs8> 581 <v-flex sm6 xs8>
582 <h5 class="my-1">{{ dates(editedItem.dob) }}</h5> 582 <h5 class="my-1">{{ dates(editedItem.dob) }}</h5>
583 </v-flex> 583 </v-flex>
584 </v-layout> 584 </v-layout>
585 <v-layout> 585 <v-layout>
586 <v-flex xs6 sm6 > 586 <v-flex xs6 sm6 >
587 <h5 class="right my-1">Permanent Address:</h5> 587 <h5 class="right my-1">Permanent Address:</h5>
588 </v-flex> 588 </v-flex>
589 <v-flex sm6 xs8> 589 <v-flex sm6 xs8>
590 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5> 590 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5>
591 </v-flex> 591 </v-flex>
592 </v-layout> 592 </v-layout>
593 <v-layout> 593 <v-layout>
594 <v-flex xs6 sm6 > 594 <v-flex xs6 sm6 >
595 <h5 class="right my-1">present Address:</h5> 595 <h5 class="right my-1">present Address:</h5>
596 </v-flex> 596 </v-flex>
597 <v-flex sm6 xs8> 597 <v-flex sm6 xs8>
598 <h5 class="my-1">{{ editedItem.presentAddress }}</h5> 598 <h5 class="my-1">{{ editedItem.presentAddress }}</h5>
599 </v-flex> 599 </v-flex>
600 </v-layout> 600 </v-layout>
601 </v-flex> 601 </v-flex>
602 </v-layout> 602 </v-layout>
603 </v-container> 603 </v-container>
604 </v-card-text> 604 </v-card-text>
605 </v-card> 605 </v-card>
606 </v-dialog> 606 </v-dialog>
607 607
608 <v-snackbar 608 <v-snackbar
609 :timeout="timeout" 609 :timeout="timeout"
610 :top="y === 'top'" 610 :top="y === 'top'"
611 :right="x === 'right'" 611 :right="x === 'right'"
612 :vertical="mode === 'vertical'" 612 :vertical="mode === 'vertical'"
613 v-model="snackbar" 613 v-model="snackbar"
614 color="success" 614 color="success"
615 >{{ text }}</v-snackbar> 615 >{{ text }}</v-snackbar>
616 616
617 <!-- ****** EXISTING-USERS STUDENTS TABLE ****** --> 617 <!-- ****** EXISTING-USERS STUDENTS TABLE ****** -->
618 <v-card flat> 618 <v-card flat>
619 <v-card-actions> 619 <v-card-actions>
620 <v-layout> 620 <v-layout>
621 <label class = "right mt-4 ml-5 ">Select Class:</label> 621 <label class = "right mt-4 ml-5 ">Select Class:</label>
622 <v-select 622 <v-select
623 :items="addclass" 623 :items="addclass"
624 label="Select Class" 624 label="Select Class"
625 v-model="addStudents.select" 625 v-model="addStudents.select"
626 item-text="classNum" 626 item-text="classNum"
627 item-value="_id" 627 item-value="_id"
628 name="Select Class" 628 name="Select Class"
629 :rules="classRules" 629 :rules="classRules"
630 @change="getSections(addStudents.select)" 630 @change="getSections(addStudents.select)"
631 class="px-4" 631 class="px-4"
632 required 632 required
633 ></v-select> 633 ></v-select>
634 <label class="right mt-4">Select Section:</label> 634 <label class="right mt-4">Select Section:</label>
635 <v-select 635 <v-select
636 :items="addSection" 636 :items="addSection"
637 label="Select Section" 637 label="Select Section"
638 v-model="addStudents.selectSection" 638 v-model="addStudents.selectSection"
639 item-text="name" 639 item-text="name"
640 item-value="_id" 640 item-value="_id"
641 name="Select Section" 641 name="Select Section"
642 :rules="sectionRules" 642 :rules="sectionRules"
643 class="pl-3" 643 class="pl-3"
644 required 644 required
645 ></v-select> 645 ></v-select>
646 </v-layout> 646 </v-layout>
647 <v-spacer></v-spacer> 647 <v-spacer></v-spacer>
648 <v-btn @click="findStudents()" round dark :loading="loading" class= "left">Find</v-btn> 648 <v-btn @click="findStudents()" round dark :loading="loading" class= "left">Find</v-btn>
649 </v-card-actions> 649 </v-card-actions>
650 </v-card> 650 </v-card>
651 <v-data-table 651 <v-data-table
652 :headers="headers" 652 :headers="headers"
653 :items="desserts" 653 :items="desserts"
654 :pagination.sync="pagination" 654 :pagination.sync="pagination"
655 :search="search" 655 :search="search"
656 > 656 >
657 <template slot="items" slot-scope="props"> 657 <template slot="items" slot-scope="props">
658 <td id="td" class="text-xs-center">{{ props.index}}</td> 658 <td id="td" class="text-xs-center">{{ props.index}}</td>
659 <td id="td" class="text-xs-center">{{ props.item.name}}</td> 659 <td id="td" class="text-xs-center">{{ props.item.name}}</td>
660 <td id="td" class="text-xs-center">{{ props.item.email }}</td> 660 <td id="td" class="text-xs-center">{{ props.item.email }}</td>
661 <td id="td" class="text-xs-center">{{ dates(props.item.dob) }}</td> 661 <td id="td" class="text-xs-center">{{ dates(props.item.dob) }}</td>
662 <td id="td" class="text-xs-center">{{ props.item.gender }}</td> 662 <td id="td" class="text-xs-center">{{ props.item.gender }}</td>
663 <td id="td" class="text-xs-center">{{ props.item.fatherName }}</td> 663 <td id="td" class="text-xs-center">{{ props.item.fatherName }}</td>
664 <td id="td" class="text-xs-center">{{ props.item.motherName }}</td> 664 <td id="td" class="text-xs-center">{{ props.item.motherName }}</td>
665 <td id="td" class="text-xs-center">{{ props.item.establishmentYear }}</td> 665 <td id="td" class="text-xs-center">{{ props.item.establishmentYear }}</td>
666 <td id="td" class="text-xs-center">{{ props.item.mobile}}</td> 666 <td id="td" class="text-xs-center">{{ props.item.mobile}}</td>
667 667
668 <td class="text-xs-center"> 668 <td class="text-xs-center">
669 <span> 669 <span>
670 <img 670 <img
671 style="cursor:pointer; width:25px; height:18px; " 671 style="cursor:pointer; width:25px; height:18px; "
672 class="mr-5" 672 class="mr-5"
673 @click="profile(props.item)" 673 @click="profile(props.item)"
674 src="/static/icon/eye1.png" 674 src="/static/icon/eye1.png"
675 > 675 >
676 <img 676 <img
677 style="cursor:pointer; width:20px; height:18px; " 677 style="cursor:pointer; width:20px; height:18px; "
678 class="mr-5" 678 class="mr-5"
679 @click="editItem(props.item)" 679 @click="editItem(props.item)"
680 src="/static/icon/edit1.png" 680 src="/static/icon/edit1.png"
681 > 681 >
682 <img 682 <img
683 style="cursor:pointer; height:20px; " 683 style="cursor:pointer; height:20px; "
684 class="mr-5" 684 class="mr-5"
685 @click="deleteItem(props.item)" 685 @click="deleteItem(props.item)"
686 src="/static/icon/delete1.png" 686 src="/static/icon/delete1.png"
687 > 687 >
688 </span> 688 </span>
689 </td> 689 </td>
690 </template> 690 </template>
691 <v-alert 691 <v-alert
692 slot="no-results" 692 slot="no-results"
693 :value="true" 693 :value="true"
694 color="error" 694 color="error"
695 icon="warning" 695 icon="warning"
696 >Your search for "{{ search }}" found no results.</v-alert> 696 >Your search for "{{ search }}" found no results.</v-alert>
697 </v-data-table> 697 </v-data-table>
698 </v-tab-item> 698 </v-tab-item>
699 699
700 <!-- ****** ADD MULTIPLE STUDENTS ****** --> 700 <!-- ****** ADD MULTIPLE STUDENTS ****** -->
701 701
702 <v-tab-item> 702 <v-tab-item>
703 <v-container> 703 <v-container>
704 <v-snackbar 704 <v-snackbar
705 :timeout="timeout" 705 :timeout="timeout"
706 :top="y === 'top'" 706 :top="y === 'top'"
707 :right="x === 'right'" 707 :right="x === 'right'"
708 :vertical="mode === 'vertical'" 708 :vertical="mode === 'vertical'"
709 v-model="snackbar" 709 v-model="snackbar"
710 color="success" 710 color="success"
711 >{{ text }}</v-snackbar> 711 >{{ text }}</v-snackbar>
712 <v-flex xs12 sm12 class="my-4"> 712 <v-flex xs12 sm12 class="my-4">
713 <v-card flat> 713 <v-card flat>
714 <v-form ref="form" v-model="valid" lazy-validation> 714 <v-form ref="form" v-model="valid" lazy-validation>
715 <v-container fluid> 715 <v-container fluid>
716 <v-layout> 716 <v-layout>
717 <v-flex 717 <v-flex
718 xs12 718 xs12
719 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" 719 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
720 > 720 >
721 <v-avatar size="100px"> 721 <v-avatar size="100px">
722 <img src="/static/icon/user.png" v-if="!imageUrl"> 722 <img src="/static/icon/user.png" v-if="!imageUrl">
723 </v-avatar> 723 </v-avatar>
724 <input 724 <input
725 type="file" 725 type="file"
726 style="display: none" 726 style="display: none"
727 ref="image" 727 ref="image"
728 accept="image/*" 728 accept="image/*"
729 @change="onFilePicked" 729 @change="onFilePicked"
730 > 730 >
731 <img 731 <img
732 :src="imageData.imageUrl" 732 :src="imageData.imageUrl"
733 height="150" 733 height="150"
734 v-if="imageUrl" 734 v-if="imageUrl"
735 style="border-radius:50%; width:200px" 735 style="border-radius:50%; width:200px"
736 > 736 >
737 </v-flex> 737 </v-flex>
738 </v-layout> 738 </v-layout>
739 <v-layout> 739 <v-layout>
740 <v-flex xs12 sm6> 740 <v-flex xs12 sm6>
741 <v-layout> 741 <v-layout>
742 <v-flex xs4 class="pt-4 subheading"> 742 <v-flex xs4 class="pt-4 subheading">
743 <label class="right">Select Class:</label> 743 <label class="right">Select Class:</label>
744 </v-flex> 744 </v-flex>
745 <v-flex xs8 class="ml-3"> 745 <v-flex xs8 class="ml-3">
746 <v-select 746 <v-select
747 :items="addclass" 747 :items="addclass"
748 label="Select Class" 748 label="Select Class"
749 v-model="addStudents.select" 749 v-model="addStudents.select"
750 item-text="classNum" 750 item-text="classNum"
751 item-value="_id" 751 item-value="_id"
752 name="Select Class" 752 name="Select Class"
753 :rules="classRules" 753 :rules="classRules"
754 @change="getSections(addStudents.select)" 754 @change="getSections(addStudents.select)"
755 required 755 required
756 ></v-select> 756 ></v-select>
757 </v-flex> 757 </v-flex>
758 </v-layout> 758 </v-layout>
759 </v-flex> 759 </v-flex>
760 <v-flex xs12 sm6> 760 <v-flex xs12 sm6>
761 <v-layout> 761 <v-layout>
762 <v-flex xs4 class="pt-4 subheading"> 762 <v-flex xs4 class="pt-4 subheading">
763 <label class="right">Select Section:</label> 763 <label class="right">Select Section:</label>
764 </v-flex> 764 </v-flex>
765 <v-flex xs8 class="ml-3"> 765 <v-flex xs8 class="ml-3">
766 <v-select 766 <v-select
767 :items="addSection" 767 :items="addSection"
768 label="Select Section" 768 label="Select Section"
769 v-model="addStudents.selectSection" 769 v-model="addStudents.selectSection"
770 item-text="name" 770 item-text="name"
771 item-value="_id" 771 item-value="_id"
772 name="Select Section" 772 name="Select Section"
773 :rules="sectionRules" 773 :rules="sectionRules"
774 required 774 required
775 ></v-select> 775 ></v-select>
776 </v-flex> 776 </v-flex>
777 </v-layout> 777 </v-layout>
778 </v-flex> 778 </v-flex>
779 </v-layout> 779 </v-layout>
780 <v-layout> 780 <v-layout>
781 <v-flex xs12 sm6> 781 <v-flex xs12 sm6>
782 <v-layout> 782 <v-layout>
783 <v-flex xs4 class="pt-4 subheading"> 783 <v-flex xs4 class="pt-4 subheading">
784 <label class="right">Full Name:</label> 784 <label class="right">Full Name:</label>
785 </v-flex> 785 </v-flex>
786 <v-flex xs8 class="ml-3"> 786 <v-flex xs8 class="ml-3">
787 <v-text-field 787 <v-text-field
788 v-model="addStudents.name" 788 v-model="addStudents.name"
789 placeholder="fill your full Name" 789 placeholder="fill your full Name"
790 name="name" 790 name="name"
791 type="text" 791 type="text"
792 :rules="nameRules" 792 :rules="nameRules"
793 required 793 required
794 ></v-text-field> 794 ></v-text-field>
795 </v-flex> 795 </v-flex>
796 </v-layout> 796 </v-layout>
797 </v-flex> 797 </v-flex>
798 <v-flex xs12 sm6> 798 <v-flex xs12 sm6>
799 <v-layout> 799 <v-layout>
800 <v-flex xs4 class="pt-4 subheading"> 800 <v-flex xs4 class="pt-4 subheading">
801 <label class="right">Email ID:</label> 801 <label class="right">Email ID:</label>
802 </v-flex> 802 </v-flex>
803 <v-flex xs8 class="ml-3"> 803 <v-flex xs8 class="ml-3">
804 <v-text-field 804 <v-text-field
805 placeholder="fill your email" 805 placeholder="fill your email"
806 :rules="emailRules" 806 :rules="emailRules"
807 v-model="addStudents.email" 807 v-model="addStudents.email"
808 type="text" 808 type="text"
809 name="email" 809 name="email"
810 required 810 required
811 ></v-text-field> 811 ></v-text-field>
812 </v-flex> 812 </v-flex>
813 </v-layout> 813 </v-layout>
814 </v-flex> 814 </v-flex>
815 </v-layout> 815 </v-layout>
816 <v-layout> 816 <v-layout>
817 <v-flex xs12 sm6> 817 <v-flex xs12 sm6>
818 <v-layout> 818 <v-layout>
819 <v-flex xs4 class="pt-4 subheading"> 819 <v-flex xs4 class="pt-4 subheading">
820 <label class="right">Date of Birth:</label> 820 <label class="right">Date of Birth:</label>
821 </v-flex> 821 </v-flex>
822 <v-flex xs8 class="ml-3"> 822 <v-flex xs8 class="ml-3">
823 <v-menu 823 <v-menu
824 ref="menu" 824 ref="menu"
825 :close-on-content-click="false" 825 :close-on-content-click="false"
826 v-model="menu" 826 v-model="menu"
827 :nudge-right="40" 827 :nudge-right="40"
828 lazy 828 lazy
829 transition="scale-transition" 829 transition="scale-transition"
830 offset-y 830 offset-y
831 full-width 831 full-width
832 min-width="290px" 832 min-width="290px"
833 > 833 >
834 <v-text-field 834 <v-text-field
835 slot="activator" 835 slot="activator"
836 :rules="dateRules" 836 :rules="dateRules"
837 v-model="addStudents.date" 837 v-model="addStudents.date"
838 placeholder="Select date" 838 placeholder="Select date"
839 ></v-text-field> 839 ></v-text-field>
840 <v-date-picker 840 <v-date-picker
841 ref="picker" 841 ref="picker"
842 v-model="addStudents.date" 842 v-model="addStudents.date"
843 :max="new Date().toISOString().substr(0, 10)" 843 :max="new Date().toISOString().substr(0, 10)"
844 min="1950-01-01" 844 min="1950-01-01"
845 @input="menu = false" 845 @input="menu = false"
846 ></v-date-picker> 846 ></v-date-picker>
847 </v-menu> 847 </v-menu>
848 </v-flex> 848 </v-flex>
849 </v-layout> 849 </v-layout>
850 </v-flex> 850 </v-flex>
851 <v-flex xs12 sm6> 851 <v-flex xs12 sm6>
852 <v-layout> 852 <v-layout>
853 <v-flex xs4 class="pt-4 subheading"> 853 <v-flex xs4 class="pt-4 subheading">
854 <label class="right">City:</label> 854 <label class="right">City:</label>
855 </v-flex> 855 </v-flex>
856 <v-flex xs8 class="ml-3"> 856 <v-flex xs8 class="ml-3">
857 <v-text-field 857 <v-text-field
858 v-model="addStudents.city" 858 v-model="addStudents.city"
859 placeholder="fill your City Name" 859 placeholder="fill your City Name"
860 name="City" 860 name="City"
861 type="text" 861 type="text"
862 :rules="cityRules" 862 :rules="cityRules"
863 required 863 required
864 ></v-text-field> 864 ></v-text-field>
865 </v-flex> 865 </v-flex>
866 </v-layout> 866 </v-layout>
867 </v-flex> 867 </v-flex>
868 </v-layout> 868 </v-layout>
869 <v-layout> 869 <v-layout>
870 <v-flex xs12 sm6> 870 <v-flex xs12 sm6>
871 <v-layout> 871 <v-layout>
872 <v-flex xs4 class="pt-4 subheading"> 872 <v-flex xs4 class="pt-4 subheading">
873 <label class="right">State:</label> 873 <label class="right">State:</label>
874 </v-flex> 874 </v-flex>
875 <v-flex xs8 class="ml-3"> 875 <v-flex xs8 class="ml-3">
876 <v-text-field 876 <v-text-field
877 v-model="addStudents.state" 877 v-model="addStudents.state"
878 placeholder="fill your State Name" 878 placeholder="fill your State Name"
879 name="state" 879 name="state"
880 type="text" 880 type="text"
881 :rules="stateRules" 881 :rules="stateRules"
882 required 882 required
883 ></v-text-field> 883 ></v-text-field>
884 </v-flex> 884 </v-flex>
885 </v-layout> 885 </v-layout>
886 </v-flex> 886 </v-flex>
887 <v-flex xs12 sm6> 887 <v-flex xs12 sm6>
888 <v-layout> 888 <v-layout>
889 <v-flex xs4 class="pt-4 subheading"> 889 <v-flex xs4 class="pt-4 subheading">
890 <label class="right">Pincode:</label> 890 <label class="right">Pincode:</label>
891 </v-flex> 891 </v-flex>
892 <v-flex xs8 class="ml-3"> 892 <v-flex xs8 class="ml-3">
893 <v-text-field 893 <v-text-field
894 v-model="addStudents.pincode" 894 v-model="addStudents.pincode"
895 placeholder="fill your pincode" 895 placeholder="fill your pincode"
896 name="pincode" 896 name="pincode"
897 type="number" 897 type="number"
898 :rules="pincode" 898 :rules="pincode"
899 required 899 required
900 ></v-text-field> 900 ></v-text-field>
901 </v-flex> 901 </v-flex>
902 </v-layout> 902 </v-layout>
903 </v-flex> 903 </v-flex>
904 </v-layout> 904 </v-layout>
905 <v-layout> 905 <v-layout>
906 <v-flex xs12 sm6> 906 <v-flex xs12 sm6>
907 <v-layout> 907 <v-layout>
908 <v-flex xs4 class="pt-4 subheading"> 908 <v-flex xs4 class="pt-4 subheading">
909 <label class="right">Mobile No:</label> 909 <label class="right">Mobile No:</label>
910 </v-flex> 910 </v-flex>
911 <v-flex xs8 class="ml-3"> 911 <v-flex xs8 class="ml-3">
912 <v-text-field 912 <v-text-field
913 v-model="addStudents.mobile" 913 v-model="addStudents.mobile"
914 placeholder="fill your MobileNo" 914 placeholder="fill your MobileNo"
915 name="mobileNo" 915 name="mobileNo"
916 type="number" 916 type="number"
917 :rules="mobileNoRules" 917 :rules="mobileNoRules"
918 required 918 required
919 ></v-text-field> 919 ></v-text-field>
920 </v-flex> 920 </v-flex>
921 </v-layout> 921 </v-layout>
922 </v-flex> 922 </v-flex>
923 <v-flex xs12 sm6> 923 <v-flex xs12 sm6>
924 <v-layout> 924 <v-layout>
925 <v-flex xs4 class="pt-4 subheading"> 925 <v-flex xs4 class="pt-4 subheading">
926 <label class="right">Select Country:</label> 926 <label class="right">Select Country:</label>
927 </v-flex> 927 </v-flex>
928 <v-flex xs8 class="ml-3"> 928 <v-flex xs8 class="ml-3">
929 <v-autocomplete 929 <v-autocomplete
930 v-model="addStudents.country" 930 v-model="addStudents.country"
931 :rules="country" 931 :rules="country"
932 :items="countries" 932 :items="countries"
933 placeholder="Select Country Name" 933 placeholder="Select Country Name"
934 required 934 required
935 ></v-autocomplete> 935 ></v-autocomplete>
936 </v-flex> 936 </v-flex>
937 </v-layout> 937 </v-layout>
938 </v-flex> 938 </v-flex>
939 </v-layout> 939 </v-layout>
940 <v-layout> 940 <v-layout>
941 <v-flex xs12 sm6> 941 <v-flex xs12 sm6>
942 <v-layout> 942 <v-layout>
943 <v-flex xs4 class="pt-4 subheading"> 943 <v-flex xs4 class="pt-4 subheading">
944 <label class="right">Gender:</label> 944 <label class="right">Gender:</label>
945 </v-flex> 945 </v-flex>
946 <v-flex xs8 class="ml-3"> 946 <v-flex xs8 class="ml-3">
947 <v-select 947 <v-select
948 :items="gender" 948 :items="gender"
949 v-model="addStudents.gender" 949 v-model="addStudents.gender"
950 :rules="genderRules" 950 :rules="genderRules"
951 label="Select Gender" 951 label="Select Gender"
952 required 952 required
953 ></v-select> 953 ></v-select>
954 </v-flex> 954 </v-flex>
955 </v-layout> 955 </v-layout>
956 </v-flex> 956 </v-flex>
957 <v-flex xs12 sm6> 957 <v-flex xs12 sm6>
958 <v-layout> 958 <v-layout>
959 <v-flex xs4 class="pt-4 subheading"> 959 <v-flex xs4 class="pt-4 subheading">
960 <label class="right">Father Name:</label> 960 <label class="right">Father Name:</label>
961 </v-flex> 961 </v-flex>
962 <v-flex xs8 class="ml-3"> 962 <v-flex xs8 class="ml-3">
963 <v-text-field 963 <v-text-field
964 v-model="addStudents.fatherName" 964 v-model="addStudents.fatherName"
965 :rules="fatherNameRules" 965 :rules="fatherNameRules"
966 :items="countries" 966 :items="countries"
967 placeholder="Fill your father Name" 967 placeholder="Fill your father Name"
968 required 968 required
969 ></v-text-field> 969 ></v-text-field>
970 </v-flex> 970 </v-flex>
971 </v-layout> 971 </v-layout>
972 </v-flex> 972 </v-flex>
973 </v-layout> 973 </v-layout>
974 <v-layout> 974 <v-layout>
975 <v-flex xs12 sm6> 975 <v-flex xs12 sm6>
976 <v-layout> 976 <v-layout>
977 <v-flex xs4 class="pt-4 subheading"> 977 <v-flex xs4 class="pt-4 subheading">
978 <label class="right">Father Cell No:</label> 978 <label class="right">Father Cell No:</label>
979 </v-flex> 979 </v-flex>
980 <v-flex xs8 class="ml-3"> 980 <v-flex xs8 class="ml-3">
981 <v-text-field 981 <v-text-field
982 v-model="addStudents.fatherCellNo" 982 v-model="addStudents.fatherCellNo"
983 placeholder="fill your father Cell Number" 983 placeholder="fill your father Cell Number"
984 name="state" 984 name="state"
985 type="number" 985 type="number"
986 :rules="fatheCellNoRules" 986 :rules="fatheCellNoRules"
987 required 987 required
988 ></v-text-field> 988 ></v-text-field>
989 </v-flex> 989 </v-flex>
990 </v-layout> 990 </v-layout>
991 </v-flex> 991 </v-flex>
992 <v-flex xs12 sm6> 992 <v-flex xs12 sm6>
993 <v-layout> 993 <v-layout>
994 <v-flex xs4 class="pt-4 subheading"> 994 <v-flex xs4 class="pt-4 subheading">
995 <label class="right">Mother Name:</label> 995 <label class="right">Mother Name:</label>
996 </v-flex> 996 </v-flex>
997 <v-flex xs8 class="ml-3"> 997 <v-flex xs8 class="ml-3">
998 <v-text-field 998 <v-text-field
999 v-model="addStudents.motherName" 999 v-model="addStudents.motherName"
1000 placeholder="fill your Mother Name" 1000 placeholder="fill your Mother Name"
1001 name="state" 1001 name="state"
1002 type="text" 1002 type="text"
1003 :rules="motherNameRules" 1003 :rules="motherNameRules"
1004 required 1004 required
1005 ></v-text-field> 1005 ></v-text-field>
1006 </v-flex> 1006 </v-flex>
1007 </v-layout> 1007 </v-layout>
1008 </v-flex> 1008 </v-flex>
1009 </v-layout> 1009 </v-layout>
1010 <v-layout> 1010 <v-layout>
1011 <v-flex xs12 sm6> 1011 <v-flex xs12 sm6>
1012 <v-layout> 1012 <v-layout>
1013 <v-flex xs4 class="pt-4 subheading"> 1013 <v-flex xs4 class="pt-4 subheading">
1014 <label class="right">Mother Cell No:</label> 1014 <label class="right">Mother Cell No:</label>
1015 </v-flex> 1015 </v-flex>
1016 <v-flex xs8 class="ml-3"> 1016 <v-flex xs8 class="ml-3">
1017 <v-text-field 1017 <v-text-field
1018 v-model="addStudents.motherCellNo" 1018 v-model="addStudents.motherCellNo"
1019 placeholder="fill your Mother Cell Number" 1019 placeholder="fill your Mother Cell Number"
1020 name="state" 1020 name="state"
1021 type="number" 1021 type="number"
1022 :rules="motherCellNoRules" 1022 :rules="motherCellNoRules"
1023 required 1023 required
1024 ></v-text-field> 1024 ></v-text-field>
1025 </v-flex> 1025 </v-flex>
1026 </v-layout> 1026 </v-layout>
1027 </v-flex> 1027 </v-flex>
1028 <v-flex xs12 sm6> 1028 <v-flex xs12 sm6>
1029 <v-layout> 1029 <v-layout>
1030 <v-flex xs4 class="pt-4 subheading"> 1030 <v-flex xs4 class="pt-4 subheading">
1031 <label class="right">Academic Year:</label> 1031 <label class="right">Academic Year:</label>
1032 </v-flex> 1032 </v-flex>
1033 <v-flex xs8 class="ml-3"> 1033 <v-flex xs8 class="ml-3">
1034 <v-text-field 1034 <v-text-field
1035 v-model="addStudents.establishmentYear" 1035 v-model="addStudents.establishmentYear"
1036 placeholder="fill your Mother Name" 1036 placeholder="fill your Mother Name"
1037 name="state" 1037 name="state"
1038 type="number" 1038 type="number"
1039 :rules="establishmentYearRules" 1039 :rules="establishmentYearRules"
1040 required 1040 required
1041 ></v-text-field> 1041 ></v-text-field>
1042 </v-flex> 1042 </v-flex>
1043 </v-layout> 1043 </v-layout>
1044 </v-flex> 1044 </v-flex>
1045 </v-layout> 1045 </v-layout>
1046 <v-layout> 1046 <v-layout>
1047 <v-flex xs12 sm6> 1047 <v-flex xs12 sm6>
1048 <v-layout> 1048 <v-layout>
1049 <v-flex xs4 class="pt-4 subheading"> 1049 <v-flex xs4 class="pt-4 subheading">
1050 <label class="right">Uplaod Image:</label> 1050 <label class="right">Uplaod Image:</label>
1051 </v-flex> 1051 </v-flex>
1052 <v-flex xs8 class="ml-3"> 1052 <v-flex xs8 class="ml-3">
1053 <v-text-field 1053 <v-text-field
1054 label="Select Image" 1054 label="Select Image"
1055 @click="pickFile" 1055 @click="pickFile"
1056 v-model="imageName" 1056 v-model="imageName"
1057 append-icon="attach_file" 1057 append-icon="attach_file"
1058 ></v-text-field> 1058 ></v-text-field>
1059 </v-flex> 1059 </v-flex>
1060 </v-layout> 1060 </v-layout>
1061 </v-flex> 1061 </v-flex>
1062 </v-layout> 1062 </v-layout>
1063 <v-layout> 1063 <v-layout>
1064 <v-flex xs12 sm12> 1064 <v-flex xs12 sm12>
1065 <v-layout> 1065 <v-layout>
1066 <v-flex xs3 class="pt-4 subheading pl-4" style="max-width: 17%;"> 1066 <v-flex xs3 class="pt-4 subheading pl-4" style="max-width: 17%;">
1067 <label class>Present Address:</label> 1067 <label class>Present Address:</label>
1068 </v-flex> 1068 </v-flex>
1069 <v-flex xs12> 1069 <v-flex xs12>
1070 <v-text-field 1070 <v-text-field
1071 name="input-4-3" 1071 name="input-4-3"
1072 v-model="addStudents.presentAddress" 1072 v-model="addStudents.presentAddress"
1073 :rules="presentAddress" 1073 :rules="presentAddress"
1074 placeholder="fill Your present Address" 1074 placeholder="fill Your present Address"
1075 required 1075 required
1076 ></v-text-field> 1076 ></v-text-field>
1077 </v-flex> 1077 </v-flex>
1078 </v-layout> 1078 </v-layout>
1079 </v-flex> 1079 </v-flex>
1080 <v-flex xs12 sm12> 1080 <v-flex xs12 sm12>
1081 <v-layout> 1081 <v-layout>
1082 <v-flex xs3 class="pt-4 subheading" style="max-width: 17%;"> 1082 <v-flex xs3 class="pt-4 subheading" style="max-width: 17%;">
1083 <label>Permanent Address:</label> 1083 <label>Permanent Address:</label>
1084 </v-flex> 1084 </v-flex>
1085 <v-flex xs12> 1085 <v-flex xs12>
1086 <v-text-field 1086 <v-text-field
1087 name="input-4-3" 1087 name="input-4-3"
1088 v-model="addStudents.permanentAddress" 1088 v-model="addStudents.permanentAddress"
1089 :rules="permanentAddress" 1089 :rules="permanentAddress"
1090 placeholder="fill Your Permanent Address" 1090 placeholder="fill Your Permanent Address"
1091 required 1091 required
1092 ></v-text-field> 1092 ></v-text-field>
1093 </v-flex> 1093 </v-flex>
1094 </v-layout> 1094 </v-layout>
1095 </v-flex> 1095 </v-flex>
1096 </v-layout> 1096 </v-layout>
1097 <v-layout> 1097 <v-layout>
1098 <v-flex xs12 sm12> 1098 <v-flex xs12 sm12>
1099 <v-card-actions> 1099 <v-card-actions>
1100 <v-btn @click="clear" round dark>clear</v-btn> 1100 <v-btn @click="clear" round dark>clear</v-btn>
1101 <v-spacer></v-spacer> 1101 <v-spacer></v-spacer>
1102 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 1102 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
1103 </v-card-actions> 1103 </v-card-actions>
1104 </v-flex> 1104 </v-flex>
1105 </v-layout> 1105 </v-layout>
1106 </v-container> 1106 </v-container>
1107 </v-form> 1107 </v-form>
1108 </v-card> 1108 </v-card>
1109 </v-flex> 1109 </v-flex>
1110 </v-container> 1110 </v-container>
1111 </v-tab-item> 1111 </v-tab-item>
1112 </v-tabs> 1112 </v-tabs>
1113 <div class="loader" v-if="showLoader"> 1113 <div class="loader" v-if="showLoader">
1114 <v-progress-circular indeterminate color="white"></v-progress-circular> 1114 <v-progress-circular indeterminate color="white"></v-progress-circular>
1115 </div> 1115 </div>
1116 </v-app> 1116 </v-app>
1117 </template> 1117 </template>
1118 1118
1119 <script> 1119 <script>
1120 import http from "@/Services/http.js"; 1120 import http from "@/Services/http.js";
1121 import Util from "@/util"; 1121 import Util from "@/util";
1122 import moment from "moment"; 1122 import moment from "moment";
1123 1123
1124 export default { 1124 export default {
1125 data: () => ({ 1125 data: () => ({
1126 snackbar: false, 1126 snackbar: false,
1127 y: "top", 1127 y: "top",
1128 x: "right", 1128 x: "right",
1129 mode: "", 1129 mode: "",
1130 timeout: 3000, 1130 timeout: 3000,
1131 text: "", 1131 text: "",
1132 showLoader:false, 1132 showLoader:false,
1133 loading: false, 1133 loading: false,
1134 date: null, 1134 date: null,
1135 search: "", 1135 search: "",
1136 menu: false, 1136 menu: false,
1137 menu1: false, 1137 menu1: false,
1138 dialog: false, 1138 dialog: false,
1139 dialog1: false, 1139 dialog1: false,
1140 valid: true, 1140 valid: true,
1141 isActive: true, 1141 isActive: true,
1142 newActive: false, 1142 newActive: false,
1143 addclass: [], 1143 addclass: [],
1144 addSection: [], 1144 addSection: [],
1145 gender: ["Male", "Female"], 1145 gender: ["Male", "Female"],
1146 AddUsercredentials: {}, 1146 AddUsercredentials: {},
1147 pagination: { 1147 pagination: {
1148 rowsPerPage: 15 1148 rowsPerPage: 15
1149 }, 1149 },
1150 imageData: {}, 1150 imageData: {},
1151 imageName: "", 1151 imageName: "",
1152 imageUrl: "", 1152 imageUrl: "",
1153 imageFile: "", 1153 imageFile: "",
1154 nameRules: [v => !!v || " Full Name is required"], 1154 nameRules: [v => !!v || " Full Name is required"],
1155 dateRules: [v => !!v || " DOB is required"], 1155 dateRules: [v => !!v || " DOB is required"],
1156 cityRules: [v => !!v || " City Name is required"], 1156 cityRules: [v => !!v || " City Name is required"],
1157 pincode: [v => !!v || " Pincode is required"], 1157 pincode: [v => !!v || " Pincode is required"],
1158 country: [v => !!v || " Country Name is required"], 1158 country: [v => !!v || " Country Name is required"],
1159 permanentAddress: [v => !!v || " Permanent Address is required"], 1159 permanentAddress: [v => !!v || " Permanent Address is required"],
1160 presentAddress: [v => !!v || " Present Address is required"], 1160 presentAddress: [v => !!v || " Present Address is required"],
1161 mobileNoRules: [v => !!v || "Mobile Number is required"], 1161 mobileNoRules: [v => !!v || "Mobile Number is required"],
1162 stateRules: [v => !!v || "State Name is required"], 1162 stateRules: [v => !!v || "State Name is required"],
1163 classRules: [v => !!v || " Class Name is required"], 1163 classRules: [v => !!v || " Class Name is required"],
1164 sectionRules:[v => !!v || " Section Name is required"], 1164 sectionRules:[v => !!v || " Section Name is required"],
1165 genderRules: [v => !!v || " Select Gender is required"], 1165 genderRules: [v => !!v || " Select Gender is required"],
1166 fatherNameRules: [v => !!v || " Father Name is required"], 1166 fatherNameRules: [v => !!v || " Father Name is required"],
1167 fatheCellNoRules: [v => !!v || " father Cell Number is required"], 1167 fatheCellNoRules: [v => !!v || " father Cell Number is required"],
1168 motherNameRules: [v => !!v || " Mother Name is required"], 1168 motherNameRules: [v => !!v || " Mother Name is required"],
1169 motherCellNoRules: [v => !!v || " Mother Cell Number is required"], 1169 motherCellNoRules: [v => !!v || " Mother Cell Number is required"],
1170 establishmentYearRules: [v => !!v || " Academic Year is required"], 1170 establishmentYearRules: [v => !!v || " Academic Year is required"],
1171 errorMessages: "", 1171 errorMessages: "",
1172 emailRules: [ 1172 emailRules: [
1173 v => !!v || "E-mail is required", 1173 v => !!v || "E-mail is required",
1174 v => 1174 v =>
1175 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 1175 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
1176 "E-mail must be valid" 1176 "E-mail must be valid"
1177 ], 1177 ],
1178 countries: [ 1178 countries: [
1179 "Afghanistan", 1179 "Afghanistan",
1180 "Albania", 1180 "Albania",
1181 "Algeria", 1181 "Algeria",
1182 "Andorra", 1182 "Andorra",
1183 "Angola", 1183 "Angola",
1184 "Anguilla", 1184 "Anguilla",
1185 "Antigua &amp; Barbuda", 1185 "Antigua &amp; Barbuda",
1186 "Argentina", 1186 "Argentina",
1187 "Armenia", 1187 "Armenia",
1188 "Aruba", 1188 "Aruba",
1189 "Australia", 1189 "Australia",
1190 "Austria", 1190 "Austria",
1191 "Azerbaijan", 1191 "Azerbaijan",
1192 "Bahamas", 1192 "Bahamas",
1193 "Bahrain", 1193 "Bahrain",
1194 "Bangladesh", 1194 "Bangladesh",
1195 "Barbados", 1195 "Barbados",
1196 "Belarus", 1196 "Belarus",
1197 "Belgium", 1197 "Belgium",
1198 "Belize", 1198 "Belize",
1199 "Benin", 1199 "Benin",
1200 "Bermuda", 1200 "Bermuda",
1201 "Bhutan", 1201 "Bhutan",
1202 "Bolivia", 1202 "Bolivia",
1203 "Bosnia &amp; Herzegovina", 1203 "Bosnia &amp; Herzegovina",
1204 "Botswana", 1204 "Botswana",
1205 "Brazil", 1205 "Brazil",
1206 "British Virgin Islands", 1206 "British Virgin Islands",
1207 "Brunei", 1207 "Brunei",
1208 "Bulgaria", 1208 "Bulgaria",
1209 "Burkina Faso", 1209 "Burkina Faso",
1210 "Burundi", 1210 "Burundi",
1211 "Cambodia", 1211 "Cambodia",
1212 "Cameroon", 1212 "Cameroon",
1213 "Cape Verde", 1213 "Cape Verde",
1214 "Cayman Islands", 1214 "Cayman Islands",
1215 "Chad", 1215 "Chad",
1216 "Chile", 1216 "Chile",
1217 "China", 1217 "China",
1218 "Colombia", 1218 "Colombia",
1219 "Congo", 1219 "Congo",
1220 "Cook Islands", 1220 "Cook Islands",
1221 "Costa Rica", 1221 "Costa Rica",
1222 "Cote D Ivoire", 1222 "Cote D Ivoire",
1223 "Croatia", 1223 "Croatia",
1224 "Cruise Ship", 1224 "Cruise Ship",
1225 "Cuba", 1225 "Cuba",
1226 "Cyprus", 1226 "Cyprus",
1227 "Czech Republic", 1227 "Czech Republic",
1228 "Denmark", 1228 "Denmark",
1229 "Djibouti", 1229 "Djibouti",
1230 "Dominica", 1230 "Dominica",
1231 "Dominican Republic", 1231 "Dominican Republic",
1232 "Ecuador", 1232 "Ecuador",
1233 "Egypt", 1233 "Egypt",
1234 "El Salvador", 1234 "El Salvador",
1235 "Equatorial Guinea", 1235 "Equatorial Guinea",
1236 "Estonia", 1236 "Estonia",
1237 "Ethiopia", 1237 "Ethiopia",
1238 "Falkland Islands", 1238 "Falkland Islands",
1239 "Faroe Islands", 1239 "Faroe Islands",
1240 "Fiji", 1240 "Fiji",
1241 "Finland", 1241 "Finland",
1242 "France", 1242 "France",
1243 "French Polynesia", 1243 "French Polynesia",
1244 "French West Indies", 1244 "French West Indies",
1245 "Gabon", 1245 "Gabon",
1246 "Gambia", 1246 "Gambia",
1247 "Georgia", 1247 "Georgia",
1248 "Germany", 1248 "Germany",
1249 "Ghana", 1249 "Ghana",
1250 "Gibraltar", 1250 "Gibraltar",
1251 "Greece", 1251 "Greece",
1252 "Greenland", 1252 "Greenland",
1253 "Grenada", 1253 "Grenada",
1254 "Guam", 1254 "Guam",
1255 "Guatemala", 1255 "Guatemala",
1256 "Guernsey", 1256 "Guernsey",
1257 "Guinea", 1257 "Guinea",
1258 "Guinea Bissau", 1258 "Guinea Bissau",
1259 "Guyana", 1259 "Guyana",
1260 "Haiti", 1260 "Haiti",
1261 "Honduras", 1261 "Honduras",
1262 "Hong Kong", 1262 "Hong Kong",
1263 "Hungary", 1263 "Hungary",
1264 "Iceland", 1264 "Iceland",
1265 "India", 1265 "India",
1266 "Indonesia", 1266 "Indonesia",
1267 "Iran", 1267 "Iran",
1268 "Iraq", 1268 "Iraq",
1269 "Ireland", 1269 "Ireland",
1270 "Isle of Man", 1270 "Isle of Man",
1271 "Israel", 1271 "Israel",
1272 "Italy", 1272 "Italy",
1273 "Jamaica", 1273 "Jamaica",
1274 "Japan", 1274 "Japan",
1275 "Jersey", 1275 "Jersey",
1276 "Jordan", 1276 "Jordan",
1277 "Kazakhstan", 1277 "Kazakhstan",
1278 "Kenya", 1278 "Kenya",
1279 "Kuwait", 1279 "Kuwait",
1280 "Kyrgyz Republic", 1280 "Kyrgyz Republic",
1281 "Laos", 1281 "Laos",
1282 "Latvia", 1282 "Latvia",
1283 "Lebanon", 1283 "Lebanon",
1284 "Lesotho", 1284 "Lesotho",
1285 "Liberia", 1285 "Liberia",
1286 "Libya", 1286 "Libya",
1287 "Liechtenstein", 1287 "Liechtenstein",
1288 "Lithuania", 1288 "Lithuania",
1289 "Luxembourg", 1289 "Luxembourg",
1290 "Macau", 1290 "Macau",
1291 "Macedonia", 1291 "Macedonia",
1292 "Madagascar", 1292 "Madagascar",
1293 "Malawi", 1293 "Malawi",
1294 "Malaysia", 1294 "Malaysia",
1295 "Maldives", 1295 "Maldives",
1296 "Mali", 1296 "Mali",
1297 "Malta", 1297 "Malta",
1298 "Mauritania", 1298 "Mauritania",
1299 "Mauritius", 1299 "Mauritius",
1300 "Mexico", 1300 "Mexico",
1301 "Moldova", 1301 "Moldova",
1302 "Monaco", 1302 "Monaco",
1303 "Mongolia", 1303 "Mongolia",
1304 "Montenegro", 1304 "Montenegro",
1305 "Montserrat", 1305 "Montserrat",
1306 "Morocco", 1306 "Morocco",
1307 "Mozambique", 1307 "Mozambique",
1308 "Namibia", 1308 "Namibia",
1309 "Nepal", 1309 "Nepal",
1310 "Netherlands", 1310 "Netherlands",
1311 "Netherlands Antilles", 1311 "Netherlands Antilles",
1312 "New Caledonia", 1312 "New Caledonia",
1313 "New Zealand", 1313 "New Zealand",
1314 "Nicaragua", 1314 "Nicaragua",
1315 "Niger", 1315 "Niger",
1316 "Nigeria", 1316 "Nigeria",
1317 "Norway", 1317 "Norway",
1318 "Oman", 1318 "Oman",
1319 "Pakistan", 1319 "Pakistan",
1320 "Palestine", 1320 "Palestine",
1321 "Panama", 1321 "Panama",
1322 "Papua New Guinea", 1322 "Papua New Guinea",
1323 "Paraguay", 1323 "Paraguay",
1324 "Peru", 1324 "Peru",
1325 "Philippines", 1325 "Philippines",
1326 "Poland", 1326 "Poland",
1327 "Portugal", 1327 "Portugal",
1328 "Puerto Rico", 1328 "Puerto Rico",
1329 "Qatar", 1329 "Qatar",
1330 "Reunion", 1330 "Reunion",
1331 "Romania", 1331 "Romania",
1332 "Russia", 1332 "Russia",
1333 "Rwanda", 1333 "Rwanda",
1334 "Saint Pierre &amp; Miquelon", 1334 "Saint Pierre &amp; Miquelon",
1335 "Samoa", 1335 "Samoa",
1336 "San Marino", 1336 "San Marino",
1337 "Satellite", 1337 "Satellite",
1338 "Saudi Arabia", 1338 "Saudi Arabia",
1339 "Senegal", 1339 "Senegal",
1340 "Serbia", 1340 "Serbia",
1341 "Seychelles", 1341 "Seychelles",
1342 "Sierra Leone", 1342 "Sierra Leone",
1343 "Singapore", 1343 "Singapore",
1344 "Slovakia", 1344 "Slovakia",
1345 "Slovenia", 1345 "Slovenia",
1346 "South Africa", 1346 "South Africa",
1347 "South Korea", 1347 "South Korea",
1348 "Spain", 1348 "Spain",
1349 "Sri Lanka", 1349 "Sri Lanka",
1350 "St Kitts &amp; Nevis", 1350 "St Kitts &amp; Nevis",
1351 "St Lucia", 1351 "St Lucia",
1352 "St Vincent", 1352 "St Vincent",
1353 "St. Lucia", 1353 "St. Lucia",
1354 "Sudan", 1354 "Sudan",
1355 "Suriname", 1355 "Suriname",
1356 "Swaziland", 1356 "Swaziland",
1357 "Sweden", 1357 "Sweden",
1358 "Switzerland", 1358 "Switzerland",
1359 "Syria", 1359 "Syria",
1360 "Taiwan", 1360 "Taiwan",
1361 "Tajikistan", 1361 "Tajikistan",
1362 "Tanzania", 1362 "Tanzania",
1363 "Thailand", 1363 "Thailand",
1364 "Timor L'Este", 1364 "Timor L'Este",
1365 "Togo", 1365 "Togo",
1366 "Tonga", 1366 "Tonga",
1367 "Trinidad &amp; Tobago", 1367 "Trinidad &amp; Tobago",
1368 "Tunisia", 1368 "Tunisia",
1369 "Turkey", 1369 "Turkey",
1370 "Turkmenistan", 1370 "Turkmenistan",
1371 "Turks &amp; Caicos", 1371 "Turks &amp; Caicos",
1372 "Uganda", 1372 "Uganda",
1373 "Ukraine", 1373 "Ukraine",
1374 "United Arab Emirates", 1374 "United Arab Emirates",
1375 "United Kingdom", 1375 "United Kingdom",
1376 "United States", 1376 "United States",
1377 "Uruguay", 1377 "Uruguay",
1378 "Uzbekistan", 1378 "Uzbekistan",
1379 "Venezuela", 1379 "Venezuela",
1380 "Vietnam", 1380 "Vietnam",
1381 "Virgin Islands (US)", 1381 "Virgin Islands (US)",
1382 "Yemen", 1382 "Yemen",
1383 "Zambia", 1383 "Zambia",
1384 "Zimbabwe" 1384 "Zimbabwe"
1385 ], 1385 ],
1386 headers: [ 1386 headers: [
1387 { 1387 {
1388 text: "No", 1388 text: "No",
1389 align: "center", 1389 align: "center",
1390 sortable: false, 1390 sortable: false,
1391 value: "No" 1391 value: "No"
1392 }, 1392 },
1393 { text: "Name", value: "name", sortable: false, align: "center" }, 1393 { text: "Name", value: "name", sortable: false, align: "center" },
1394 { text: "Email", value: "email", sortable: false, align: "center" }, 1394 { text: "Email", value: "email", sortable: false, align: "center" },
1395 { text: "Dob", value: "dob", sortable: false, align: "center" }, 1395 { text: "Dob", value: "dob", sortable: false, align: "center" },
1396 { text: "Gender", value: "gender", sortable: false, align: "center" }, 1396 { text: "Gender", value: "gender", sortable: false, align: "center" },
1397 { text: "Father Name", value: "fatherName", sortable: false, align: "center" }, 1397 { text: "Father Name", value: "fatherName", sortable: false, align: "center" },
1398 { text: "Mother Name", value: "motherName", sortable: false, align: "center" }, 1398 { text: "Mother Name", value: "motherName", sortable: false, align: "center" },
1399 { text: "Academic Year", value: "establishmentYear", sortable: false, align: "center" }, 1399 { text: "Academic Year", value: "establishmentYear", sortable: false, align: "center" },
1400 { text: "Mobile No", value: "mobile", sortable: false, align: "center" }, 1400 { text: "Mobile No", value: "mobile", sortable: false, align: "center" },
1401 { text: "Action", value: "", sortable: false, align: "center" } 1401 { text: "Action", value: "", sortable: false, align: "center" }
1402 ], 1402 ],
1403 desserts: [], 1403 desserts: [],
1404 editedIndex: -1, 1404 editedIndex: -1,
1405 addStudents: { 1405 addStudents: {
1406 role: "STUDENT", 1406 role: "STUDENT",
1407 name: "", 1407 name: "",
1408 email: "", 1408 email: "",
1409 date: "", 1409 date: "",
1410 city: "", 1410 city: "",
1411 pincode: "", 1411 pincode: "",
1412 country: "", 1412 country: "",
1413 permanentAddress: "", 1413 permanentAddress: "",
1414 presentAddress: "", 1414 presentAddress: "",
1415 mobile: "", 1415 mobile: "",
1416 state: "", 1416 state: "",
1417 gender: "", 1417 gender: "",
1418 fatherName: "", 1418 fatherName: "",
1419 fatheCellNo: "", 1419 fatheCellNo: "",
1420 motherName: "", 1420 motherName: "",
1421 motherCellNo: "", 1421 motherCellNo: "",
1422 select: "", 1422 select: "",
1423 selectSection: "", 1423 selectSection: "",
1424 establishmentYear: new Date().getFullYear() 1424 establishmentYear: new Date().getFullYear()
1425 }, 1425 },
1426 editedItem: { 1426 editedItem: {
1427 role: "STUDENT", 1427 role: "STUDENT",
1428 name: "", 1428 name: "",
1429 email: "", 1429 email: "",
1430 dob: "", 1430 dob: "",
1431 city: "", 1431 city: "",
1432 pincode: "", 1432 pincode: "",
1433 country: "", 1433 country: "",
1434 permanentAddress: "", 1434 permanentAddress: "",
1435 presentAddress: "", 1435 presentAddress: "",
1436 mobile: "", 1436 mobile: "",
1437 state: "", 1437 state: "",
1438 gender: "", 1438 gender: "",
1439 fatherName: "", 1439 fatherName: "",
1440 fatheCellNo: "", 1440 fatheCellNo: "",
1441 motherName: "", 1441 motherName: "",
1442 motherCellNo: "", 1442 motherCellNo: "",
1443 select: "", 1443 select: "",
1444 selectSection: "", 1444 selectSection: "",
1445 establishmentYear: new Date().getFullYear() 1445 establishmentYear: new Date().getFullYear()
1446 }, 1446 },
1447 defaultItem: { 1447 defaultItem: {
1448 role: "STUDENT", 1448 role: "STUDENT",
1449 name: "", 1449 name: "",
1450 email: "" 1450 email: ""
1451 }, 1451 },
1452 userName: "", 1452 userName: "",
1453 items: [ 1453 items: [
1454 { 1454 {
1455 href: "/changepassword", 1455 href: "/changepassword",
1456 title: "Change Password", 1456 title: "Change Password",
1457 click: e => { 1457 click: e => {
1458 console.log(e); 1458 console.log(e);
1459 } 1459 }
1460 }, 1460 },
1461 { 1461 {
1462 href: "#", 1462 href: "#",
1463 title: "Logout", 1463 title: "Logout",
1464 click: e => { 1464 click: e => {
1465 window.getApp.$emit("APP_LOGOUT"); 1465 window.getApp.$emit("APP_LOGOUT");
1466 } 1466 }
1467 } 1467 }
1468 ] 1468 ]
1469 }), 1469 }),
1470 watch: { 1470 watch: {
1471 menu(val) { 1471 menu(val) {
1472 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 1472 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
1473 }, 1473 },
1474 menu1(val) { 1474 menu1(val) {
1475 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 1475 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
1476 } 1476 }
1477 }, 1477 },
1478 methods: { 1478 methods: {
1479 findStudents(){ 1479 findStudents(){
1480 this.showLoader = true; 1480 this.showLoader = true;
1481 http() 1481 http()
1482 .get( 1482 .get(
1483 "/getStudentWithClass", 1483 "/getStudentWithClass",
1484 { params: { classId: this.addStudents.select,sectionId: this.addStudents.selectSection,} } 1484 { params: { classId: this.addStudents.select,sectionId: this.addStudents.selectSection,} }
1485 ) 1485 )
1486 .then(response => { 1486 .then(response => {
1487 this.desserts = response.data.data; 1487 this.desserts = response.data.data;
1488 this.showLoader = false; 1488 this.showLoader = false;
1489 console.log("getSectionsList=====>", this.addSection); 1489 console.log("getSectionsList=====>", this.addSection);
1490 }) 1490 })
1491 .catch(err => { 1491 .catch(err => {
1492 console.log("err====>", err); 1492 console.log("err====>", err);
1493 this.showLoader = false; 1493 this.showLoader = false;
1494 }); 1494 });
1495 }, 1495 },
1496 getSections(_id) { 1496 getSections(_id) {
1497 var token = this.$store.state.token; 1497 var token = this.$store.state.token;
1498 http() 1498 http()
1499 .get( 1499 .get(
1500 "/getSectionsList", 1500 "/getSectionsList",
1501 { params: { classId: _id } }, 1501 { params: { classId: _id } },
1502 { 1502 {
1503 headers: { Authorization: "Bearer " + token } 1503 headers: { Authorization: "Bearer " + token }
1504 } 1504 }
1505 ) 1505 )
1506 .then(response => { 1506 .then(response => {
1507 this.addSection = response.data.data; 1507 this.addSection = response.data.data;
1508 console.log("getSectionsList=====>", this.addSection); 1508 console.log("getSectionsList=====>", this.addSection);
1509 }) 1509 })
1510 .catch(err => { 1510 .catch(err => {
1511 // console.log("err====>", err); 1511 // console.log("err====>", err);
1512 // this.$router.replace({ path: '/' }); 1512 // this.$router.replace({ path: '/' });
1513 }); 1513 });
1514 }, 1514 },
1515 pickFile() { 1515 pickFile() {
1516 this.$refs.image.click(); 1516 this.$refs.image.click();
1517 }, 1517 },
1518 dates: function(date) { 1518 dates: function(date) {
1519 return moment(date).format("MMMM DD, YYYY"); 1519 return moment(date).format("MMMM DD, YYYY");
1520 }, 1520 },
1521 onFilePicked(e) { 1521 onFilePicked(e) {
1522 // console.log(e) 1522 // console.log(e)
1523 const files = e.target.files; 1523 const files = e.target.files;
1524 this.imageData.upload = e.target.files[0]; 1524 this.imageData.upload = e.target.files[0];
1525 if (files[0] !== undefined) { 1525 if (files[0] !== undefined) {
1526 this.imageName = files[0].name; 1526 this.imageName = files[0].name;
1527 if (this.imageName.lastIndexOf(".") <= 0) { 1527 if (this.imageName.lastIndexOf(".") <= 0) {
1528 return; 1528 return;
1529 } 1529 }
1530 const fr = new FileReader(); 1530 const fr = new FileReader();
1531 fr.readAsDataURL(files[0]); 1531 fr.readAsDataURL(files[0]);
1532 fr.addEventListener("load", () => { 1532 fr.addEventListener("load", () => {
1533 this.imageUrl = fr.result; 1533 this.imageUrl = fr.result;
1534 this.imageFile = files[0]; // this is an image file that can be sent to server... 1534 this.imageFile = files[0]; // this is an image file that can be sent to server...
1535 this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 1535 this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
1536 console.log("upload=======>", this.imageData.imageUrl); 1536 console.log("upload=======>", this.imageData.imageUrl);
1537 console.log("imageFile", this.imageFile); 1537 console.log("imageFile", this.imageFile);
1538 }); 1538 });
1539 } else { 1539 } else {
1540 this.imageName = ""; 1540 this.imageName = "";
1541 this.imageFile = ""; 1541 this.imageFile = "";
1542 this.imageUrl = ""; 1542 this.imageUrl = "";
1543 } 1543 }
1544 }, 1544 },
1545 // getStudentList() { 1545 // getStudentList() {
1546 // this.showLoader = true; 1546 // this.showLoader = true;
1547 // var token = this.$store.state.token; 1547 // var token = this.$store.state.token;
1548 // http() 1548 // http()
1549 // .get("/getStudentsList", { 1549 // .get("/getStudentsList", {
1550 // headers: { Authorization: "Bearer " + token } 1550 // headers: { Authorization: "Bearer " + token }
1551 // }) 1551 // })
1552 // .then(response => { 1552 // .then(response => {
1553 // this.desserts = response.data.data; 1553 // this.desserts = response.data.data;
1554 // this.showLoader = false; 1554 // this.showLoader = false;
1555 // // console.log("getStudentList=====>",this.desserts) 1555 // // console.log("getStudentList=====>",this.desserts)
1556 // }) 1556 // })
1557 // .catch(err => { 1557 // .catch(err => {
1558 // // console.log("err====>", err); 1558 // // console.log("err====>", err);
1559 // this.showLoader = false; 1559 // this.showLoader = false;
1560 // this.$router.replace({ path: "/" }); 1560 // this.$router.replace({ path: "/" });
1561 // }); 1561 // });
1562 // }, 1562 // },
1563 editItem(item) { 1563 editItem(item) {
1564 this.editedIndex = this.desserts.indexOf(item); 1564 this.editedIndex = this.desserts.indexOf(item);
1565 this.editedItem = Object.assign({}, item); 1565 this.editedItem = Object.assign({}, item);
1566 this.editedItem.dob = this.editedItem.dob.substring(0, 10) 1566 this.editedItem.dob = this.editedItem.dob.substring(0, 10)
1567 this.dialog = true; 1567 this.dialog = true;
1568 }, 1568 },
1569 profile(item) { 1569 profile(item) {
1570 this.editedIndex = this.desserts.indexOf(item); 1570 this.editedIndex = this.desserts.indexOf(item);
1571 this.editedItem = Object.assign({}, item); 1571 this.editedItem = Object.assign({}, item);
1572 this.dialog1 = true; 1572 this.dialog1 = true;
1573 }, 1573 },
1574 // report(item) { 1574 // report(item) {
1575 // this.editedIndex = this.desserts.indexOf(item); 1575 // this.editedIndex = this.desserts.indexOf(item);
1576 // this.editedItem = Object.assign({}, item); 1576 // this.editedItem = Object.assign({}, item);
1577 // this.dialog2 = true; 1577 // this.dialog2 = true;
1578 // }, 1578 // },
1579 1579
1580 deleteItem(item) { 1580 deleteItem(item) {
1581 let deleteStudent = { 1581 let deleteStudent = {
1582 studentId: item._id 1582 studentId: item._id
1583 }; 1583 };
1584 http() 1584 http()
1585 .delete( 1585 .delete(
1586 "/deleteStudent", 1586 "/deleteStudent",
1587 confirm("Are you sure you want to delete this?") && { 1587 confirm("Are you sure you want to delete this?") && {
1588 params: deleteStudent 1588 params: deleteStudent
1589 } 1589 }
1590 ) 1590 )
1591 .then(response => { 1591 .then(response => {
1592 // console.log("deleteUers",deleteStudent) 1592 // console.log("deleteUers",deleteStudent)
1593 if ((this.snackbar = true)) { 1593 if ((this.snackbar = true)) {
1594 this.text = "Successfully delete Existing User"; 1594 this.text = "Successfully delete Existing Student";
1595 } 1595 }
1596 this.getStudentList(); 1596 this.getStudentList();
1597 }) 1597 })
1598 .catch(error => { 1598 .catch(error => {
1599 // console.log(error); 1599 // console.log(error);
1600 }); 1600 });
1601 }, 1601 },
1602 activeTab(type) { 1602 activeTab(type) {
1603 switch (type) { 1603 switch (type) {
1604 case "existing": 1604 case "existing":
1605 this.newActive = false; 1605 this.newActive = false;
1606 this.isActive = true; 1606 this.isActive = true;
1607 break; 1607 break;
1608 1608
1609 default: 1609 default:
1610 this.newActive = true; 1610 this.newActive = true;
1611 this.isActive = false; 1611 this.isActive = false;
1612 break; 1612 break;
1613 } 1613 }
1614 }, 1614 },
1615 close() { 1615 close() {
1616 this.dialog = false; 1616 this.dialog = false;
1617 setTimeout(() => { 1617 setTimeout(() => {
1618 this.editedItem = Object.assign({}, this.defaultItem); 1618 this.editedItem = Object.assign({}, this.defaultItem);
1619 this.editedIndex = -1; 1619 this.editedIndex = -1;
1620 }, 300); 1620 }, 300);
1621 }, 1621 },
1622 close1() { 1622 close1() {
1623 this.dialog1 = false; 1623 this.dialog1 = false;
1624 }, 1624 },
1625 // close2() { 1625 // close2() {
1626 // this.dialog2 = false; 1626 // this.dialog2 = false;
1627 // }, 1627 // },
1628 submit() { 1628 submit() {
1629 if (this.$refs.form.validate()) { 1629 if (this.$refs.form.validate()) {
1630 let imageData = new FormData(); 1630 let imageData = new FormData();
1631 imageData.append("upload", this.imageFile); 1631 imageData.append("upload", this.imageFile);
1632 console.log(imageData); 1632 console.log(imageData);
1633 let addStudent = { 1633 let addStudent = {
1634 name: this.addStudents.name, 1634 name: this.addStudents.name,
1635 email: this.addStudents.email, 1635 email: this.addStudents.email,
1636 role: this.addStudents.role, 1636 role: this.addStudents.role,
1637 dob: this.addStudents.date, 1637 dob: this.addStudents.date,
1638 city: this.addStudents.city, 1638 city: this.addStudents.city,
1639 pincode: this.addStudents.pincode, 1639 pincode: this.addStudents.pincode,
1640 country: this.addStudents.country, 1640 country: this.addStudents.country,
1641 permanentAddress: this.addStudents.permanentAddress, 1641 permanentAddress: this.addStudents.permanentAddress,
1642 presentAddress: this.addStudents.presentAddress, 1642 presentAddress: this.addStudents.presentAddress,
1643 mobile: this.addStudents.mobile, 1643 mobile: this.addStudents.mobile,
1644 state: this.addStudents.state, 1644 state: this.addStudents.state,
1645 gender: this.addStudents.gender, 1645 gender: this.addStudents.gender,
1646 fatherName: this.addStudents.fatherName, 1646 fatherName: this.addStudents.fatherName,
1647 fatherCellNo: this.addStudents.fatherCellNo, 1647 fatherCellNo: this.addStudents.fatherCellNo,
1648 motherName: this.addStudents.motherName, 1648 motherName: this.addStudents.motherName,
1649 motherCellNo: this.addStudents.motherCellNo, 1649 motherCellNo: this.addStudents.motherCellNo,
1650 establishmentYear: this.addStudents.establishmentYear, 1650 establishmentYear: this.addStudents.establishmentYear,
1651 classId: this.addStudents.select, 1651 classId: this.addStudents.select,
1652 sectionId: this.addStudents.selectSection, 1652 sectionId: this.addStudents.selectSection,
1653 imageData 1653 imageData
1654 // upload:this.imageFile 1654 // upload:this.imageFile
1655 }; 1655 };
1656 this.loading = true;
1656 http() 1657 http()
1657 .post("/createStudent", addStudent) 1658 .post("/createStudent", addStudent)
1658 .then(response => { 1659 .then(response => {
1659 // console.log(addStudent) 1660 // console.log(addStudent)
1660 if ((this.snackbar = true)) { 1661 if ((this.snackbar = true)) {
1661 this.text = "New user added successfully"; 1662 this.text = "New Student added successfully";
1662 } 1663 }
1663 // this.getStudentList(); 1664 // this.getStudentList();
1664 this.clear(); 1665 this.clear();
1666 this.loading = false;
1665 }) 1667 })
1666 .catch(error => { 1668 .catch(error => {
1667 // console.log(error); 1669 // console.log(error);
1668 if ((this.snackbar = true)) { 1670 if ((this.snackbar = true)) {
1669 this.text = error.response.data.message; 1671 this.text = error.response.data.message;
1670 } 1672 }
1673 this.loading = false;
1671 }); 1674 });
1672 } 1675 }
1673 }, 1676 },
1674 mail() {}, 1677 mail() {},
1675 download() {}, 1678 download() {},
1676 clear() { 1679 clear() {
1677 this.$refs.form.reset(); 1680 this.$refs.form.reset();
1678 }, 1681 },
1679 save() { 1682 save() {
1680 let imageData = new FormData(); 1683 let imageData = new FormData();
1681 imageData.append("upload", this.imageFile); 1684 imageData.append("upload", this.imageFile);
1682 console.log(imageData); 1685 console.log(imageData);
1683 let editStudent = { 1686 let editStudent = {
1684 studentId:this.editedItem._id, 1687 studentId:this.editedItem._id,
1685 name: this.editedItem.name, 1688 name: this.editedItem.name,
1686 email: this.editedItem.email, 1689 email: this.editedItem.email,
1687 role: this.editedItem.role, 1690 role: this.editedItem.role,
1688 dob: this.editedItem.dob, 1691 dob: this.editedItem.dob,
1689 city: this.editedItem.city, 1692 city: this.editedItem.city,
1690 pincode: this.editedItem.pincode, 1693 pincode: this.editedItem.pincode,
1691 country: this.editedItem.country, 1694 country: this.editedItem.country,
1692 permanentAddress: this.editedItem.permanentAddress, 1695 permanentAddress: this.editedItem.permanentAddress,
1693 presentAddress: this.editedItem.presentAddress, 1696 presentAddress: this.editedItem.presentAddress,
1694 mobile: this.editedItem.mobile, 1697 mobile: this.editedItem.mobile,
1695 state: this.editedItem.state, 1698 state: this.editedItem.state,
1696 gender: this.editedItem.gender, 1699 gender: this.editedItem.gender,
1697 fatherName: this.editedItem.fatherName, 1700 fatherName: this.editedItem.fatherName,
1698 fatherCellNo: this.editedItem.fatherCellNo, 1701 fatherCellNo: this.editedItem.fatherCellNo,
1699 motherName: this.editedItem.motherName, 1702 motherName: this.editedItem.motherName,
1700 motherCellNo: this.editedItem.motherCellNo, 1703 motherCellNo: this.editedItem.motherCellNo,
1701 establishmentYear: this.editedItem.establishmentYear, 1704 establishmentYear: this.editedItem.establishmentYear,
1702 classId: this.editedItem.select, 1705 classId: this.editedItem.select,
1703 sectionId: this.editedItem.selectSection, 1706 sectionId: this.editedItem.selectSection,
1704 imageData 1707 imageData
1705 }; 1708 };
1706 http() 1709 http()
1707 .put("/updateStudent", editStudent) 1710 .put("/updateStudent", editStudent)
1708 .then(response => { 1711 .then(response => {
1709 // console.log("editStudent",editStudent); 1712 // console.log("editStudent",editStudent);
1710 if ((this.snackbar = true)) { 1713 if ((this.snackbar = true)) {
1711 this.text = "Successfully Edit Existing User"; 1714 this.text = "Successfully Student Existing User";
1712 } 1715 }
1713 this.findStudents(); 1716 this.findStudents();
1714 }) 1717 })
1715 .catch(error => { 1718 .catch(error => {
1716 // console.log(error); 1719 // console.log(error);
1717 }); 1720 });
1718 this.close(); 1721 this.close();
1719 }, 1722 },
1720 handleDrawerToggle() { 1723 handleDrawerToggle() {
1721 window.getApp.$emit("APP_DRAWER_TOGGLED"); 1724 window.getApp.$emit("APP_DRAWER_TOGGLED");
1722 }, 1725 },
1723 handleFullScreen() { 1726 handleFullScreen() {
1724 Util.toggleFullScreen(); 1727 Util.toggleFullScreen();
1725 } 1728 }
1726 }, 1729 },
1727 mounted() { 1730 mounted() {
1728 // this.getStudentList(); 1731 // this.getStudentList();
1729 var token = this.$store.state.token; 1732 var token = this.$store.state.token;
1730 http() 1733 http()
1731 .get("/getClassesList", { 1734 .get("/getClassesList", {
1732 headers: { Authorization: "Bearer " + token } 1735 headers: { Authorization: "Bearer " + token }
1733 }) 1736 })
1734 .then(response => { 1737 .then(response => {
1735 this.addclass = response.data.data; 1738 this.addclass = response.data.data;
1736 // console.log("getClassesList=====>",this.addclass) 1739 // console.log("getClassesList=====>",this.addclass)
1737 }) 1740 })
1738 .catch(err => { 1741 .catch(err => {
1739 // console.log("err====>", err); 1742 // console.log("err====>", err);
1740 this.$router.replace({ path: "/" }); 1743 this.$router.replace({ path: "/" });
1741 }); 1744 });
1742 }, 1745 },
1743 1746
1744 // console.log("Id",this.$store.state.id) 1747 // console.log("Id",this.$store.state.id)
1745 // console.log("token",this.$store.state.token) 1748 // console.log("token",this.$store.state.token)
1746 computed: { 1749 computed: {
1747 toolbarColor() { 1750 toolbarColor() {
1748 return this.$vuetify.options.extra.mainNav; 1751 return this.$vuetify.options.extra.mainNav;
1749 } 1752 }
1750 } 1753 }
1751 }; 1754 };
1752 </script> 1755 </script>
1753 <style scoped> 1756 <style scoped>
1754 .v-tabs__div { 1757 .v-tabs__div {
1755 text-transform: none; 1758 text-transform: none;
1756 } 1759 }
1757 .v-input__prepend-outer { 1760 .v-input__prepend-outer {
1758 margin-right: 0px !important; 1761 margin-right: 0px !important;
1759 } 1762 }
1760 .v-card__actions .v-btn { 1763 .v-card__actions .v-btn {
1761 margin: 0 15px; 1764 margin: 0 15px;
1762 min-width: 120px; 1765 min-width: 120px;
1763 } 1766 }
1764 .primary { 1767 .primary {
1765 background-color: #aaa !important; 1768 background-color: #aaa !important;
1766 border-color: #aaa !important; 1769 border-color: #aaa !important;
1767 } 1770 }
1768 h4 { 1771 h4 {
1769 background-repeat: no-repeat; 1772 background-repeat: no-repeat;
1770 padding: 8px; 1773 padding: 8px;
1771 margin: auto; 1774 margin: auto;
1772 font-size: 25px; 1775 font-size: 25px;
1773 } 1776 }
1774 #name { 1777 #name {
1775 position: absolute; 1778 position: absolute;
1776 left: 100px; 1779 left: 100px;
1777 top: 17px; 1780 top: 17px;
1778 } 1781 }
1779 #icon { 1782 #icon {
1780 position: absolute; 1783 position: absolute;
1781 right: 8px; 1784 right: 8px;
1782 top: 8px; 1785 top: 8px;
1783 } 1786 }
1784 #m { 1787 #m {
1785 position: relative; 1788 position: relative;
1786 left: 135px; 1789 left: 135px;
1787 top: -15px; 1790 top: -15px;
1788 } 1791 }
1789 #G { 1792 #G {
1790 position: absolute; 1793 position: absolute;
1791 top: 38px; 1794 top: 38px;
1792 color: white; 1795 color: white;
1793 } 1796 }
1794 #bt { 1797 #bt {
1795 position: relative; 1798 position: relative;
1796 top: -20px; 1799 top: -20px;
1797 left: 115px; 1800 left: 115px;
1798 } 1801 }
1799 #e { 1802 #e {
1800 position: relative; 1803 position: relative;
1801 top: 5px; 1804 top: 5px;
1802 right: -30px; 1805 right: -30px;
1803 height: 17px; 1806 height: 17px;
1804 cursor: pointer; 1807 cursor: pointer;
1805 } 1808 }
1806 #d { 1809 #d {
1807 position: relative; 1810 position: relative;
1808 top: 5px; 1811 top: 5px;
1809 right: -70px; 1812 right: -70px;
1810 height: 17px; 1813 height: 17px;
1811 cursor: pointer; 1814 cursor: pointer;
1812 } 1815 }
1813 #td { 1816 #td {
1814 border: 1px solid #dddddd; 1817 border: 1px solid #dddddd;
1815 text-align: left; 1818 text-align: left;
1816 padding: 8px; 1819 padding: 8px;
1817 } 1820 }
1818 #dialog { 1821 #dialog {
1819 height: 550px; 1822 height: 550px;
1820 } 1823 }
1821 .active { 1824 .active {
1822 background-color: black; 1825 background-color: black;
1823 color: white !important; 1826 color: white !important;
1824 } 1827 }
1825 .activebtn { 1828 .activebtn {
1826 color: black !important; 1829 color: black !important;
1827 } 1830 }
1828 #flex { 1831 #flex {
1829 height: 300px; 1832 height: 300px;
1830 } 1833 }
1831 .top { 1834 .top {
1832 margin-top: 100px; 1835 margin-top: 100px;
1833 } 1836 }
1834 .v-tabs__item a { 1837 .v-tabs__item a {
1835 font-size: 16px !important; 1838 font-size: 16px !important;
1836 } 1839 }
1837 @media screen and (max-width: 769px) { 1840 @media screen and (max-width: 769px) {
1838 .top { 1841 .top {
1839 margin-top: 0 !important; 1842 margin-top: 0 !important;
1840 } 1843 }
1841 .userSearch .v-icon { 1844 .userSearch .v-icon {
1842 font-size: 20px !important; 1845 font-size: 20px !important;
1843 margin-left: 20px; 1846 margin-left: 20px;
1844 } 1847 }
1845 } 1848 }
1846 @media screen and (max-width: 380px) { 1849 @media screen and (max-width: 380px) {
1847 .pl-3 { 1850 .pl-3 {
1848 padding-left: 0px !important; 1851 padding-left: 0px !important;
1849 } 1852 }
1850 .right { 1853 .right {
1851 float: none !important; 1854 float: none !important;
1852 } 1855 }
1853 .subheading { 1856 .subheading {
1854 font-size: 14px !important; 1857 font-size: 14px !important;
1855 } 1858 }
1856 .v-card__actions .v-btn { 1859 .v-card__actions .v-btn {
1857 margin: 0 0px; 1860 margin: 0 0px;
1858 min-width: 100px; 1861 min-width: 100px;
1859 } 1862 }
1860 /* .searchIcon .v-icon { 1863 /* .searchIcon .v-icon {
1861 font-size: 20px; 1864 font-size: 20px;
1862 margin-left: 20px; 1865 margin-left: 20px;
1863 } */ 1866 } */
1864 .subheading { 1867 .subheading {
1865 font-size: 12px !important; 1868 font-size: 12px !important;
1866 } 1869 }
1867 h5 { 1870 h5 {
1868 font-size: 13px; 1871 font-size: 13px;
1869 } 1872 }
1870 } 1873 }
1871 .v-icon { 1874 .v-icon {
1872 font-size: 30px; 1875 font-size: 30px;
1873 } 1876 }
1874 @media screen and (min-width: 1270px) { 1877 @media screen and (min-width: 1270px) {
1875 .hide { 1878 .hide {
1876 display: none; 1879 display: none;
1877 } 1880 }
1878 /* } 1881 /* }
1879 @media screen and (max-width: 962px) { 1882 @media screen and (max-width: 962px) {
1880 .imglogo{ 1883 .imglogo{
1881 position: absolute; 1884 position: absolute;
1882 top: 13px; 1885 top: 13px;
1883 left: 13px !important; 1886 left: 13px !important;
1884 width: 70px; 1887 width: 70px;
1885 height: 24px; 1888 height: 24px;
1886 } */ 1889 } */
1887 } 1890 }
1888 @media screen and (max-width: 420px) { 1891 @media screen and (max-width: 420px) {
1889 .userSearch .v-text-field .v-label { 1892 .userSearch .v-text-field .v-label {
1890 line-height: 24px !important; 1893 line-height: 24px !important;
1891 } 1894 }
1892 .userSearch .v-label { 1895 .userSearch .v-label {
1893 font-size: 13px !important; 1896 font-size: 13px !important;
1894 } 1897 }
1895 .v-list__tile { 1898 .v-list__tile {
1896 font-size: 14px; 1899 font-size: 14px;
1897 padding: 0 10px; 1900 padding: 0 10px;
1898 } 1901 }
1899 .name { 1902 .name {
1900 font-size: 15px; 1903 font-size: 15px;
1901 } 1904 }
1902 } 1905 }
1903 </style> 1906 </style>
src/pages/Teachers/teachers.vue
Diff comments   View file @5f1d4b4
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-toolbar class="fixcolors" fixed app> 3 <v-toolbar class="fixcolors" fixed app>
4 <v-toolbar-title class="ml-0 pl-3"> 4 <v-toolbar-title class="ml-0 pl-3">
5 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon> 5 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon>
6 </v-toolbar-title> 6 </v-toolbar-title>
7 <!-- ****** SEARCH ALL Teachers ****** --> 7 <!-- ****** SEARCH ALL Teachers ****** -->
8 <v-flex xs7 sm3 class="userSearch"> 8 <v-flex xs7 sm3 class="userSearch">
9 <v-text-field 9 <v-text-field
10 flat 10 flat
11 append-icon="search" 11 append-icon="search"
12 label="Find your Teachers" 12 label="Find your Teachers"
13 v-model="search" 13 v-model="search"
14 color="white" 14 color="white"
15 dark 15 dark
16 ></v-text-field> 16 ></v-text-field>
17 </v-flex> 17 </v-flex>
18 <v-spacer></v-spacer> 18 <v-spacer></v-spacer>
19 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition"> 19 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
20 <v-btn icon large flat slot="activator"> 20 <v-btn icon large flat slot="activator">
21 <v-avatar size="40px"> 21 <v-avatar size="40px">
22 <img src="/static/icon/user.png"> 22 <img src="/static/icon/user.png">
23 </v-avatar> 23 </v-avatar>
24 </v-btn> 24 </v-btn>
25 <v-list class="pa-0"> 25 <v-list class="pa-0">
26 <v-list-tile 26 <v-list-tile
27 v-for="(item,index) in items" 27 v-for="(item,index) in items"
28 :to="!item.href ? { name: item.name } : null" 28 :to="!item.href ? { name: item.name } : null"
29 :href="item.href" 29 :href="item.href"
30 @click="item.click" 30 @click="item.click"
31 ripple="ripple" 31 ripple="ripple"
32 :disabled="item.disabled" 32 :disabled="item.disabled"
33 :target="item.target" 33 :target="item.target"
34 rel="noopener" 34 rel="noopener"
35 :key="index" 35 :key="index"
36 > 36 >
37 <v-list-tile-action v-if="item.icon"> 37 <v-list-tile-action v-if="item.icon">
38 <v-icon>{{ item.icon }}</v-icon> 38 <v-icon>{{ item.icon }}</v-icon>
39 </v-list-tile-action> 39 </v-list-tile-action>
40 <v-list-tile-content> 40 <v-list-tile-content>
41 <v-list-tile-title>{{ item.title }}</v-list-tile-title> 41 <v-list-tile-title>{{ item.title }}</v-list-tile-title>
42 </v-list-tile-content> 42 </v-list-tile-content>
43 </v-list-tile> 43 </v-list-tile>
44 </v-list> 44 </v-list>
45 </v-menu> 45 </v-menu>
46 </v-toolbar> 46 </v-toolbar>
47 <v-tabs grow slider-color="black"> 47 <v-tabs grow slider-color="black">
48 <v-tab 48 <v-tab
49 ripple 49 ripple
50 @click="activeTab('existing')" 50 @click="activeTab('existing')"
51 v-bind:class="{ active: isActive }" 51 v-bind:class="{ active: isActive }"
52 id="tab" 52 id="tab"
53 class="subheading" 53 class="subheading"
54 >Existing Teachers</v-tab> 54 >Existing Teachers</v-tab>
55 <v-tab 55 <v-tab
56 ripple 56 ripple
57 @click="activeTab('new')" 57 @click="activeTab('new')"
58 v-bind:class="{ active: newActive }" 58 v-bind:class="{ active: newActive }"
59 id="tab1" 59 id="tab1"
60 User 60 User
61 class="subheading" 61 class="subheading"
62 >Add New Teachers</v-tab> 62 >Add New Teachers</v-tab>
63 <!-- ****** EDIT TEACHERS DETAILS ****** --> 63 <!-- ****** EDIT TEACHERS DETAILS ****** -->
64 <v-tab-item> 64 <v-tab-item>
65 <v-snackbar 65 <v-snackbar
66 :timeout="timeout" 66 :timeout="timeout"
67 :top="y === 'top'" 67 :top="y === 'top'"
68 :right="x === 'right'" 68 :right="x === 'right'"
69 :vertical="mode === 'vertical'" 69 :vertical="mode === 'vertical'"
70 v-model="snackbar" 70 v-model="snackbar"
71 color="success" 71 color="success"
72 >{{ text }}</v-snackbar> 72 >{{ text }}</v-snackbar>
73 <v-dialog v-model="dialog" max-width="1100px"> 73 <v-dialog v-model="dialog" max-width="1100px">
74 <v-flex xs12 sm12 class="my-4"> 74 <v-flex xs12 sm12 class="my-4">
75 <v-toolbar color="grey lighten-2"> 75 <v-toolbar color="grey lighten-2">
76 <v-spacer></v-spacer> 76 <v-spacer></v-spacer>
77 <v-toolbar-title>Edit Teacher Profile</v-toolbar-title> 77 <v-toolbar-title>Edit Teacher Profile</v-toolbar-title>
78 <v-spacer></v-spacer> 78 <v-spacer></v-spacer>
79 </v-toolbar> 79 </v-toolbar>
80 <v-card flat> 80 <v-card flat>
81 <v-form ref="form"> 81 <v-form ref="form">
82 <v-container fluid> 82 <v-container fluid>
83 <v-layout> 83 <v-layout>
84 <v-flex 84 <v-flex
85 xs12 85 xs12
86 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" 86 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
87 > 87 >
88 <v-avatar size="100px"> 88 <v-avatar size="100px">
89 <img src="/static/icon/user.png" v-if="!imageUrl"> 89 <img src="/static/icon/user.png" v-if="!imageUrl">
90 </v-avatar> 90 </v-avatar>
91 <input 91 <input
92 type="file" 92 type="file"
93 style="display:none" 93 style="display:none"
94 ref="image" 94 ref="image"
95 accept="image/*" 95 accept="image/*"
96 @change="onFilePicked" 96 @change="onFilePicked"
97 > 97 >
98 <img 98 <img
99 v-if="imageUrl" 99 v-if="imageUrl"
100 :src="imageUrl" 100 :src="imageUrl"
101 height="150" 101 height="150"
102 style="border-radius:50%; width:200px" 102 style="border-radius:50%; width:200px"
103 > 103 >
104 </v-flex> 104 </v-flex>
105 </v-layout> 105 </v-layout>
106 <v-layout> 106 <v-layout>
107 <v-flex xs12 sm6> 107 <v-flex xs12 sm6>
108 <v-layout> 108 <v-layout>
109 <v-flex xs4 class="pt-4 subheading"> 109 <v-flex xs4 class="pt-4 subheading">
110 <label class="right">Full Name:</label> 110 <label class="right">Full Name:</label>
111 </v-flex> 111 </v-flex>
112 <v-flex xs8 class="ml-3"> 112 <v-flex xs8 class="ml-3">
113 <v-text-field 113 <v-text-field
114 v-model="editedItem.name" 114 v-model="editedItem.name"
115 placeholder="fill your full Name" 115 placeholder="fill your full Name"
116 name="name" 116 name="name"
117 type="text" 117 type="text"
118 required 118 required
119 ></v-text-field> 119 ></v-text-field>
120 </v-flex> 120 </v-flex>
121 </v-layout> 121 </v-layout>
122 </v-flex> 122 </v-flex>
123 <v-flex xs12 sm6> 123 <v-flex xs12 sm6>
124 <v-layout> 124 <v-layout>
125 <v-flex xs4 class="pt-4 subheading"> 125 <v-flex xs4 class="pt-4 subheading">
126 <label class="right">Email ID:</label> 126 <label class="right">Email ID:</label>
127 </v-flex> 127 </v-flex>
128 <v-flex xs8 class="ml-3"> 128 <v-flex xs8 class="ml-3">
129 <v-text-field 129 <v-text-field
130 placeholder="fill your email" 130 placeholder="fill your email"
131 v-model="editedItem.email" 131 v-model="editedItem.email"
132 type="text" 132 type="text"
133 name="email" 133 name="email"
134 required 134 required
135 ></v-text-field> 135 ></v-text-field>
136 </v-flex> 136 </v-flex>
137 </v-layout> 137 </v-layout>
138 </v-flex> 138 </v-flex>
139 </v-layout> 139 </v-layout>
140 <v-layout> 140 <v-layout>
141 <v-flex xs12 sm6> 141 <v-flex xs12 sm6>
142 <v-layout> 142 <v-layout>
143 <v-flex xs4 class="pt-4 subheading"> 143 <v-flex xs4 class="pt-4 subheading">
144 <label class="right">Date of Birth:</label> 144 <label class="right">Date of Birth:</label>
145 </v-flex> 145 </v-flex>
146 <v-flex xs8 class="ml-3"> 146 <v-flex xs8 class="ml-3">
147 <v-menu 147 <v-menu
148 ref="menu" 148 ref="menu"
149 :close-on-content-click="false" 149 :close-on-content-click="false"
150 v-model="menu2" 150 v-model="menu2"
151 :nudge-right="40" 151 :nudge-right="40"
152 lazy 152 lazy
153 transition="scale-transition" 153 transition="scale-transition"
154 offset-y 154 offset-y
155 full-width 155 full-width
156 min-width="290px" 156 min-width="290px"
157 > 157 >
158 <v-text-field 158 <v-text-field
159 slot="activator" 159 slot="activator"
160 v-model="editedItem.dob" 160 v-model="editedItem.dob"
161 placeholder="Select date" 161 placeholder="Select date"
162 ></v-text-field> 162 ></v-text-field>
163 <v-date-picker 163 <v-date-picker
164 ref="picker" 164 ref="picker"
165 v-model="editedItem.dob" 165 v-model="editedItem.dob"
166 :max="new Date().toISOString().substr(0, 10)" 166 :max="new Date().toISOString().substr(0, 10)"
167 min="1950-01-01" 167 min="1950-01-01"
168 @input="menu2 = false" 168 @input="menu2 = false"
169 ></v-date-picker> 169 ></v-date-picker>
170 </v-menu> 170 </v-menu>
171 </v-flex> 171 </v-flex>
172 </v-layout> 172 </v-layout>
173 </v-flex> 173 </v-flex>
174 <v-flex xs12 sm6> 174 <v-flex xs12 sm6>
175 <v-layout> 175 <v-layout>
176 <v-flex xs4 class="pt-4 subheading"> 176 <v-flex xs4 class="pt-4 subheading">
177 <label class="right">City:</label> 177 <label class="right">City:</label>
178 </v-flex> 178 </v-flex>
179 <v-flex xs8 class="ml-3"> 179 <v-flex xs8 class="ml-3">
180 <v-text-field 180 <v-text-field
181 v-model="editedItem.city" 181 v-model="editedItem.city"
182 placeholder="fill your City Name" 182 placeholder="fill your City Name"
183 name="City" 183 name="City"
184 type="text" 184 type="text"
185 required 185 required
186 ></v-text-field> 186 ></v-text-field>
187 </v-flex> 187 </v-flex>
188 </v-layout> 188 </v-layout>
189 </v-flex> 189 </v-flex>
190 </v-layout> 190 </v-layout>
191 <v-layout> 191 <v-layout>
192 <v-flex xs12 sm6> 192 <v-flex xs12 sm6>
193 <v-layout> 193 <v-layout>
194 <v-flex xs4 class="pt-4 subheading"> 194 <v-flex xs4 class="pt-4 subheading">
195 <label class="right">State:</label> 195 <label class="right">State:</label>
196 </v-flex> 196 </v-flex>
197 <v-flex xs8 class="ml-3"> 197 <v-flex xs8 class="ml-3">
198 <v-text-field 198 <v-text-field
199 v-model="editedItem.state" 199 v-model="editedItem.state"
200 placeholder="fill your State Name" 200 placeholder="fill your State Name"
201 name="state" 201 name="state"
202 type="text" 202 type="text"
203 required 203 required
204 ></v-text-field> 204 ></v-text-field>
205 </v-flex> 205 </v-flex>
206 </v-layout> 206 </v-layout>
207 </v-flex> 207 </v-flex>
208 <v-flex xs12 sm6> 208 <v-flex xs12 sm6>
209 <v-layout> 209 <v-layout>
210 <v-flex xs4 class="pt-4 subheading"> 210 <v-flex xs4 class="pt-4 subheading">
211 <label class="right">PinCode:</label> 211 <label class="right">PinCode:</label>
212 </v-flex> 212 </v-flex>
213 <v-flex xs8 class="ml-3"> 213 <v-flex xs8 class="ml-3">
214 <v-text-field 214 <v-text-field
215 v-model="editedItem.pincode" 215 v-model="editedItem.pincode"
216 placeholder="fill your pincode" 216 placeholder="fill your pincode"
217 name="pincode" 217 name="pincode"
218 type="number" 218 type="number"
219 required 219 required
220 ></v-text-field> 220 ></v-text-field>
221 </v-flex> 221 </v-flex>
222 </v-layout> 222 </v-layout>
223 </v-flex> 223 </v-flex>
224 </v-layout> 224 </v-layout>
225 <v-layout> 225 <v-layout>
226 <v-flex xs12 sm6> 226 <v-flex xs12 sm6>
227 <v-layout> 227 <v-layout>
228 <v-flex xs4 class="pt-4 subheading"> 228 <v-flex xs4 class="pt-4 subheading">
229 <label class="right">Mobile NO:</label> 229 <label class="right">Mobile NO:</label>
230 </v-flex> 230 </v-flex>
231 <v-flex xs8 class="ml-3"> 231 <v-flex xs8 class="ml-3">
232 <v-text-field 232 <v-text-field
233 v-model="editedItem.mobileNo" 233 v-model="editedItem.mobileNo"
234 placeholder="fill your MobileNo" 234 placeholder="fill your MobileNo"
235 name="mobileNo" 235 name="mobileNo"
236 type="number" 236 type="number"
237 required 237 required
238 ></v-text-field> 238 ></v-text-field>
239 </v-flex> 239 </v-flex>
240 </v-layout> 240 </v-layout>
241 </v-flex> 241 </v-flex>
242 <v-flex xs12 sm6> 242 <v-flex xs12 sm6>
243 <v-layout> 243 <v-layout>
244 <v-flex xs4 class="pt-4 subheading"> 244 <v-flex xs4 class="pt-4 subheading">
245 <label class="right">Select Country:</label> 245 <label class="right">Select Country:</label>
246 </v-flex> 246 </v-flex>
247 <v-flex xs8 class="ml-3"> 247 <v-flex xs8 class="ml-3">
248 <v-autocomplete 248 <v-autocomplete
249 v-model="editedItem.country" 249 v-model="editedItem.country"
250 :items="countries" 250 :items="countries"
251 placeholder="Select Country Name" 251 placeholder="Select Country Name"
252 required 252 required
253 ></v-autocomplete> 253 ></v-autocomplete>
254 </v-flex> 254 </v-flex>
255 </v-layout> 255 </v-layout>
256 </v-flex> 256 </v-flex>
257 </v-layout> 257 </v-layout>
258 <v-layout> 258 <v-layout>
259 <v-flex xs12 sm6> 259 <v-flex xs12 sm6>
260 <v-layout> 260 <v-layout>
261 <v-flex xs4 class="pt-4 subheading"> 261 <v-flex xs4 class="pt-4 subheading">
262 <label class="right">Join Date:</label> 262 <label class="right">Join Date:</label>
263 </v-flex> 263 </v-flex>
264 <v-flex xs8 class="ml-3"> 264 <v-flex xs8 class="ml-3">
265 <v-menu 265 <v-menu
266 ref="menu" 266 ref="menu"
267 :close-on-content-click="false" 267 :close-on-content-click="false"
268 v-model="menu3" 268 v-model="menu3"
269 :nudge-right="40" 269 :nudge-right="40"
270 lazy 270 lazy
271 transition="scale-transition" 271 transition="scale-transition"
272 offset-y 272 offset-y
273 full-width 273 full-width
274 min-width="290px" 274 min-width="290px"
275 > 275 >
276 <v-text-field 276 <v-text-field
277 slot="activator" 277 slot="activator"
278 v-model="editedItem.joinDate" 278 v-model="editedItem.joinDate"
279 placeholder="Select date" 279 placeholder="Select date"
280 ></v-text-field> 280 ></v-text-field>
281 <v-date-picker 281 <v-date-picker
282 ref="picker" 282 ref="picker"
283 v-model="editedItem.joinDate" 283 v-model="editedItem.joinDate"
284 :max="new Date().toISOString().substr(0, 10)" 284 :max="new Date().toISOString().substr(0, 10)"
285 min="1950-01-01" 285 min="1950-01-01"
286 @input="menu3 = false" 286 @input="menu3 = false"
287 ></v-date-picker> 287 ></v-date-picker>
288 </v-menu> 288 </v-menu>
289 </v-flex> 289 </v-flex>
290 </v-layout> 290 </v-layout>
291 </v-flex> 291 </v-flex>
292 <v-flex xs12 sm6> 292 <v-flex xs12 sm6>
293 <v-layout> 293 <v-layout>
294 <v-flex xs4 class="pt-4 subheading"> 294 <v-flex xs4 class="pt-4 subheading">
295 <label class="right">Uplaod Image:</label> 295 <label class="right">Uplaod Image:</label>
296 </v-flex> 296 </v-flex>
297 <v-flex xs8 class="ml-3"> 297 <v-flex xs8 class="ml-3">
298 <v-text-field 298 <v-text-field
299 label="Select Image" 299 label="Select Image"
300 @click="pickFile" 300 @click="pickFile"
301 v-model="imageName" 301 v-model="imageName"
302 append-icon="attach_file" 302 append-icon="attach_file"
303 ></v-text-field> 303 ></v-text-field>
304 </v-flex> 304 </v-flex>
305 </v-layout> 305 </v-layout>
306 </v-flex> 306 </v-flex>
307 </v-layout> 307 </v-layout>
308 <v-layout> 308 <v-layout>
309 <v-flex xs12 sm12> 309 <v-flex xs12 sm12>
310 <v-layout> 310 <v-layout>
311 <v-flex xs3 class="pt-4 subheading pl-3" style="max-width: 17%;"> 311 <v-flex xs3 class="pt-4 subheading pl-3" style="max-width: 17%;">
312 <label class>Present Address:</label> 312 <label class>Present Address:</label>
313 </v-flex> 313 </v-flex>
314 <v-flex xs12> 314 <v-flex xs12>
315 <v-text-field 315 <v-text-field
316 name="input-4-3" 316 name="input-4-3"
317 v-model="editedItem.presentAddress" 317 v-model="editedItem.presentAddress"
318 placeholder="fill Your present Address" 318 placeholder="fill Your present Address"
319 required 319 required
320 ></v-text-field> 320 ></v-text-field>
321 </v-flex> 321 </v-flex>
322 </v-layout> 322 </v-layout>
323 </v-flex> 323 </v-flex>
324 <v-flex xs12 sm12> 324 <v-flex xs12 sm12>
325 <v-layout> 325 <v-layout>
326 <v-flex xs3 class="pt-4 subheading" style="max-width: 17%;"> 326 <v-flex xs3 class="pt-4 subheading" style="max-width: 17%;">
327 <label>Permanent Address:</label> 327 <label>Permanent Address:</label>
328 </v-flex> 328 </v-flex>
329 <v-flex xs12> 329 <v-flex xs12>
330 <v-text-field 330 <v-text-field
331 name="input-4-3" 331 name="input-4-3"
332 v-model="editedItem.permanentAddress" 332 v-model="editedItem.permanentAddress"
333 placeholder="fill Your Permanent Address" 333 placeholder="fill Your Permanent Address"
334 required 334 required
335 ></v-text-field> 335 ></v-text-field>
336 </v-flex> 336 </v-flex>
337 </v-layout> 337 </v-layout>
338 </v-flex> 338 </v-flex>
339 </v-layout> 339 </v-layout>
340 <v-layout> 340 <v-layout>
341 <v-flex xs12 sm12> 341 <v-flex xs12 sm12>
342 <v-card-actions> 342 <v-card-actions>
343 <v-btn round dark @click.native="close">Cancel</v-btn> 343 <v-btn round dark @click.native="close">Cancel</v-btn>
344 <v-spacer></v-spacer> 344 <v-spacer></v-spacer>
345 <v-btn round dark @click="save">Save</v-btn> 345 <v-btn round dark @click="save">Save</v-btn>
346 </v-card-actions> 346 </v-card-actions>
347 </v-flex> 347 </v-flex>
348 </v-layout> 348 </v-layout>
349 </v-container> 349 </v-container>
350 </v-form> 350 </v-form>
351 </v-card> 351 </v-card>
352 </v-flex> 352 </v-flex>
353 </v-dialog> 353 </v-dialog>
354 354
355 <!-- ****** PROFILE VIEW TEACHERS DETAILS ****** --> 355 <!-- ****** PROFILE VIEW TEACHERS DETAILS ****** -->
356 356
357 <v-dialog v-model="dialog1" max-width="600px"> 357 <v-dialog v-model="dialog1" max-width="600px">
358 <v-toolbar color="grey lighten-2"> 358 <v-toolbar color="grey lighten-2">
359 <v-spacer></v-spacer> 359 <v-spacer></v-spacer>
360 <v-toolbar-title><h3>Teacher Profile</h3></v-toolbar-title> 360 <v-toolbar-title><h3>Teacher Profile</h3></v-toolbar-title>
361 <v-spacer></v-spacer> 361 <v-spacer></v-spacer>
362 <v-icon @click="close1">close</v-icon> 362 <v-icon @click="close1">close</v-icon>
363 </v-toolbar> 363 </v-toolbar>
364 <v-card> 364 <v-card>
365 <v-flex align-center justify-center layout text-xs-center> 365 <v-flex align-center justify-center layout text-xs-center>
366 <v-avatar size="50px" style="position:absolute; top:20px;"> 366 <v-avatar size="50px" style="position:absolute; top:20px;">
367 <img src="/static/icon/user.png"> 367 <img src="/static/icon/user.png">
368 </v-avatar> 368 </v-avatar>
369 </v-flex> 369 </v-flex>
370 <v-card-text> 370 <v-card-text>
371 <v-container grid-list-md> 371 <v-container grid-list-md>
372 <v-layout wrap> 372 <v-layout wrap>
373 <v-flex> 373 <v-flex>
374 <br> 374 <br>
375 <br> 375 <br>
376 <v-layout> 376 <v-layout>
377 <v-flex xs5 sm6> 377 <v-flex xs5 sm6>
378 <h5 class="right my-1">Full Name:</h5> 378 <h5 class="right my-1">Full Name:</h5>
379 </v-flex> 379 </v-flex>
380 <v-flex sm6 xs8> 380 <v-flex sm6 xs8>
381 <h5 class="my-1">{{ editedItem.name }}</h5> 381 <h5 class="my-1">{{ editedItem.name }}</h5>
382 </v-flex> 382 </v-flex>
383 </v-layout> 383 </v-layout>
384 <v-layout> 384 <v-layout>
385 <v-flex xs5 sm6> 385 <v-flex xs5 sm6>
386 <h5 class="right my-1">Email:</h5> 386 <h5 class="right my-1">Email:</h5>
387 </v-flex> 387 </v-flex>
388 <v-flex sm6 xs8> 388 <v-flex sm6 xs8>
389 <h5 class="my-1">{{ editedItem.email }}</h5> 389 <h5 class="my-1">{{ editedItem.email }}</h5>
390 </v-flex> 390 </v-flex>
391 </v-layout> 391 </v-layout>
392 <v-layout> 392 <v-layout>
393 <v-flex xs5 sm6> 393 <v-flex xs5 sm6>
394 <h5 class="right my-1">City:</h5> 394 <h5 class="right my-1">City:</h5>
395 </v-flex> 395 </v-flex>
396 <v-flex sm6 xs8> 396 <v-flex sm6 xs8>
397 <h5 class="my-1">{{ editedItem.city }}</h5> 397 <h5 class="my-1">{{ editedItem.city }}</h5>
398 </v-flex> 398 </v-flex>
399 </v-layout> 399 </v-layout>
400 <v-layout> 400 <v-layout>
401 <v-flex xs5 sm6> 401 <v-flex xs5 sm6>
402 <h5 class="right my-1">State:</h5> 402 <h5 class="right my-1">State:</h5>
403 </v-flex> 403 </v-flex>
404 <v-flex sm6 xs8> 404 <v-flex sm6 xs8>
405 <h5 class="my-1">{{ editedItem.state }}</h5> 405 <h5 class="my-1">{{ editedItem.state }}</h5>
406 </v-flex> 406 </v-flex>
407 </v-layout> 407 </v-layout>
408 <v-layout> 408 <v-layout>
409 <v-flex xs5 sm6> 409 <v-flex xs5 sm6>
410 <h5 class="right my-1">Country:</h5> 410 <h5 class="right my-1">Country:</h5>
411 </v-flex> 411 </v-flex>
412 <v-flex sm6 xs8> 412 <v-flex sm6 xs8>
413 <h5 class="my-1">{{ editedItem.country }}</h5> 413 <h5 class="my-1">{{ editedItem.country }}</h5>
414 </v-flex> 414 </v-flex>
415 </v-layout> 415 </v-layout>
416 <v-layout> 416 <v-layout>
417 <v-flex xs5 sm6> 417 <v-flex xs5 sm6>
418 <h5 class="right my-1">Pincode:</h5> 418 <h5 class="right my-1">Pincode:</h5>
419 </v-flex> 419 </v-flex>
420 <v-flex sm6 xs8> 420 <v-flex sm6 xs8>
421 <h5 class="my-1">{{ editedItem.pincode }}</h5> 421 <h5 class="my-1">{{ editedItem.pincode }}</h5>
422 </v-flex> 422 </v-flex>
423 </v-layout> 423 </v-layout>
424 <v-layout> 424 <v-layout>
425 <v-flex xs5 sm6> 425 <v-flex xs5 sm6>
426 <h5 class="right my-1">Mobile No:</h5> 426 <h5 class="right my-1">Mobile No:</h5>
427 </v-flex> 427 </v-flex>
428 <v-flex sm6 xs8> 428 <v-flex sm6 xs8>
429 <h5 class="my-1">{{ editedItem.mobileNo }}</h5> 429 <h5 class="my-1">{{ editedItem.mobileNo }}</h5>
430 </v-flex> 430 </v-flex>
431 </v-layout> 431 </v-layout>
432 <v-layout> 432 <v-layout>
433 <v-flex xs5 sm6> 433 <v-flex xs5 sm6>
434 <h5 class="right my-1">Join Date:</h5> 434 <h5 class="right my-1">Join Date:</h5>
435 </v-flex> 435 </v-flex>
436 <v-flex sm6 xs8> 436 <v-flex sm6 xs8>
437 <h5 class="my-1">{{ dates(editedItem.joinDate) }}</h5> 437 <h5 class="my-1">{{ dates(editedItem.joinDate) }}</h5>
438 </v-flex> 438 </v-flex>
439 </v-layout> 439 </v-layout>
440 <v-layout> 440 <v-layout>
441 <v-flex xs5 sm6> 441 <v-flex xs5 sm6>
442 <h5 class="right my-1">Date Of Birth:</h5> 442 <h5 class="right my-1">Date Of Birth:</h5>
443 </v-flex> 443 </v-flex>
444 <v-flex sm6 xs8> 444 <v-flex sm6 xs8>
445 <h5 class="my-1">{{ dates(editedItem.dob) }}</h5> 445 <h5 class="my-1">{{ dates(editedItem.dob) }}</h5>
446 </v-flex> 446 </v-flex>
447 </v-layout> 447 </v-layout>
448 <v-layout> 448 <v-layout>
449 <v-flex xs6 sm6 > 449 <v-flex xs6 sm6 >
450 <h5 class="right my-1">Permanent Address:</h5> 450 <h5 class="right my-1">Permanent Address:</h5>
451 </v-flex> 451 </v-flex>
452 <v-flex sm6 xs8> 452 <v-flex sm6 xs8>
453 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5> 453 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5>
454 </v-flex> 454 </v-flex>
455 </v-layout> 455 </v-layout>
456 <v-layout> 456 <v-layout>
457 <v-flex xs6 sm6 > 457 <v-flex xs6 sm6 >
458 <h5 class="right my-1">present Address:</h5> 458 <h5 class="right my-1">present Address:</h5>
459 </v-flex> 459 </v-flex>
460 <v-flex sm6 xs8> 460 <v-flex sm6 xs8>
461 <h5 class="my-1">{{ editedItem.presentAddress }}</h5> 461 <h5 class="my-1">{{ editedItem.presentAddress }}</h5>
462 </v-flex> 462 </v-flex>
463 </v-layout> 463 </v-layout>
464 </v-flex> 464 </v-flex>
465 </v-layout> 465 </v-layout>
466 </v-container> 466 </v-container>
467 </v-card-text> 467 </v-card-text>
468 </v-card> 468 </v-card>
469 </v-dialog> 469 </v-dialog>
470 <v-snackbar 470 <v-snackbar
471 :timeout="timeout" 471 :timeout="timeout"
472 :top="y === 'top'" 472 :top="y === 'top'"
473 :right="x === 'right'" 473 :right="x === 'right'"
474 :vertical="mode === 'vertical'" 474 :vertical="mode === 'vertical'"
475 v-model="snackbar" 475 v-model="snackbar"
476 color="success" 476 color="success"
477 >{{ text }}</v-snackbar> 477 >{{ text }}</v-snackbar>
478 478
479 <!-- ****** EXISTING-Teachers TABLE DATA****** --> 479 <!-- ****** EXISTING-Teachers TABLE DATA****** -->
480 <v-data-table 480 <v-data-table
481 :headers="headers" 481 :headers="headers"
482 :items="desserts" 482 :items="desserts"
483 :pagination.sync="pagination" 483 :pagination.sync="pagination"
484 :search="search" 484 :search="search"
485 > 485 >
486 <template slot="items" slot-scope="props"> 486 <template slot="items" slot-scope="props">
487 <td id="td" class="text-xs-center">{{ props.index}}</td> 487 <td id="td" class="text-xs-center">{{ props.index}}</td>
488 <td id="td" class="text-xs-center">{{ props.item.name}}</td> 488 <td id="td" class="text-xs-center">{{ props.item.name}}</td>
489 <td id="td" class="text-xs-center">{{ props.item.email }}</td> 489 <td id="td" class="text-xs-center">{{ props.item.email }}</td>
490 <td id="td" class="text-xs-center">{{ dates(props.item.dob) }}</td> 490 <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> 491 <td id="td" class="text-xs-center">{{ dates(props.item.joinDate)}}</td>
492 <td id="td" class="text-xs-center">{{ props.item.mobileNo }}</td> 492 <td id="td" class="text-xs-center">{{ props.item.mobileNo }}</td>
493 <td class="text-xs-center"> 493 <td class="text-xs-center">
494 <span> 494 <span>
495 <img 495 <img
496 style="cursor:pointer; width:25px; height:18px; " 496 style="cursor:pointer; width:25px; height:18px; "
497 class="mr-5" 497 class="mr-5"
498 @click="profile(props.item)" 498 @click="profile(props.item)"
499 src="/static/icon/eye1.png" 499 src="/static/icon/eye1.png"
500 > 500 >
501 <img 501 <img
502 style="cursor:pointer; width:20px; height:18px; " 502 style="cursor:pointer; width:20px; height:18px; "
503 class="mr-5" 503 class="mr-5"
504 @click="editItem(props.item)" 504 @click="editItem(props.item)"
505 src="/static/icon/edit1.png" 505 src="/static/icon/edit1.png"
506 > 506 >
507 <img 507 <img
508 style="cursor:pointer; height:20px; " 508 style="cursor:pointer; height:20px; "
509 class="mr-5" 509 class="mr-5"
510 @click="deleteItem(props.item)" 510 @click="deleteItem(props.item)"
511 src="/static/icon/delete1.png" 511 src="/static/icon/delete1.png"
512 > 512 >
513 </span> 513 </span>
514 </td> 514 </td>
515 </template> 515 </template>
516 <v-alert 516 <v-alert
517 slot="no-results" 517 slot="no-results"
518 :value="true" 518 :value="true"
519 color="error" 519 color="error"
520 icon="warning" 520 icon="warning"
521 >Your search for "{{ search }}" found no results.</v-alert> 521 >Your search for "{{ search }}" found no results.</v-alert>
522 </v-data-table> 522 </v-data-table>
523 </v-tab-item> 523 </v-tab-item>
524 524
525 <!-- ****** Add Teachers Data****** --> 525 <!-- ****** Add Teachers Data****** -->
526 <v-tab-item> 526 <v-tab-item>
527 <v-container> 527 <v-container>
528 <v-snackbar 528 <v-snackbar
529 :timeout="timeout" 529 :timeout="timeout"
530 :top="y === 'top'" 530 :top="y === 'top'"
531 :right="x === 'right'" 531 :right="x === 'right'"
532 :vertical="mode === 'vertical'" 532 :vertical="mode === 'vertical'"
533 v-model="snackbar" 533 v-model="snackbar"
534 color="success" 534 color="success"
535 >{{ text }}</v-snackbar> 535 >{{ text }}</v-snackbar>
536 <v-flex xs12 sm12 class="my-4"> 536 <v-flex xs12 sm12 class="my-4">
537 <v-card flat> 537 <v-card flat>
538 <v-form ref="form" v-model="valid" lazy-validation> 538 <v-form ref="form" v-model="valid" lazy-validation>
539 <v-container fluid> 539 <v-container fluid>
540 <v-layout> 540 <v-layout>
541 <v-flex 541 <v-flex
542 xs12 542 xs12
543 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" 543 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
544 > 544 >
545 <v-avatar size="100px"> 545 <v-avatar size="100px">
546 <img src="/static/icon/user.png" v-if="!imageUrl"> 546 <img src="/static/icon/user.png" v-if="!imageUrl">
547 </v-avatar> 547 </v-avatar>
548 <!-- <input 548 <!-- <input
549 type="file" 549 type="file"
550 style="display: none" 550 style="display: none"
551 ref="image" 551 ref="image"
552 accept="image/*" 552 accept="image/*"
553 @change="onFilePicked" 553 @change="onFilePicked"
554 > --> 554 > -->
555 <img 555 <img
556 :src="imageUrl" 556 :src="imageUrl"
557 height="150" 557 height="150"
558 v-if="imageUrl" 558 v-if="imageUrl"
559 style="border-radius:50%; width:200px" 559 style="border-radius:50%; width:200px"
560 > 560 >
561 </v-flex> 561 </v-flex>
562 </v-layout> 562 </v-layout>
563 <v-layout> 563 <v-layout>
564 <v-flex xs12 sm6> 564 <v-flex xs12 sm6>
565 <v-layout> 565 <v-layout>
566 <v-flex xs4 class="pt-4 subheading"> 566 <v-flex xs4 class="pt-4 subheading">
567 <label class="right">Full Name:</label> 567 <label class="right">Full Name:</label>
568 </v-flex> 568 </v-flex>
569 <v-flex xs8 class="ml-3"> 569 <v-flex xs8 class="ml-3">
570 <v-text-field 570 <v-text-field
571 v-model="addTeachers.name" 571 v-model="addTeachers.name"
572 placeholder="fill your full Name" 572 placeholder="fill your full Name"
573 name="name" 573 name="name"
574 type="text" 574 type="text"
575 :rules="nameRules" 575 :rules="nameRules"
576 required 576 required
577 ></v-text-field> 577 ></v-text-field>
578 </v-flex> 578 </v-flex>
579 </v-layout> 579 </v-layout>
580 </v-flex> 580 </v-flex>
581 <v-flex xs12 sm6> 581 <v-flex xs12 sm6>
582 <v-layout> 582 <v-layout>
583 <v-flex xs4 class="pt-4 subheading"> 583 <v-flex xs4 class="pt-4 subheading">
584 <label class="right">Email ID:</label> 584 <label class="right">Email ID:</label>
585 </v-flex> 585 </v-flex>
586 <v-flex xs8 class="ml-3"> 586 <v-flex xs8 class="ml-3">
587 <v-text-field 587 <v-text-field
588 placeholder="fill your email" 588 placeholder="fill your email"
589 :rules="emailRules" 589 :rules="emailRules"
590 v-model="addTeachers.email" 590 v-model="addTeachers.email"
591 type="text" 591 type="text"
592 name="email" 592 name="email"
593 required 593 required
594 ></v-text-field> 594 ></v-text-field>
595 </v-flex> 595 </v-flex>
596 </v-layout> 596 </v-layout>
597 </v-flex> 597 </v-flex>
598 </v-layout> 598 </v-layout>
599 <v-layout> 599 <v-layout>
600 <v-flex xs12 sm6> 600 <v-flex xs12 sm6>
601 <v-layout> 601 <v-layout>
602 <v-flex xs4 class="pt-4 subheading"> 602 <v-flex xs4 class="pt-4 subheading">
603 <label class="right">Date of Birth:</label> 603 <label class="right">Date of Birth:</label>
604 </v-flex> 604 </v-flex>
605 <v-flex xs8 class="ml-3"> 605 <v-flex xs8 class="ml-3">
606 <v-menu 606 <v-menu
607 ref="menu" 607 ref="menu"
608 :close-on-content-click="false" 608 :close-on-content-click="false"
609 v-model="menu" 609 v-model="menu"
610 :nudge-right="40" 610 :nudge-right="40"
611 lazy 611 lazy
612 transition="scale-transition" 612 transition="scale-transition"
613 offset-y 613 offset-y
614 full-width 614 full-width
615 min-width="290px" 615 min-width="290px"
616 > 616 >
617 <v-text-field 617 <v-text-field
618 slot="activator" 618 slot="activator"
619 :rules="dateRules" 619 :rules="dateRules"
620 v-model="addTeachers.date" 620 v-model="addTeachers.date"
621 placeholder="Select date" 621 placeholder="Select date"
622 ></v-text-field> 622 ></v-text-field>
623 <v-date-picker 623 <v-date-picker
624 ref="picker" 624 ref="picker"
625 v-model="addTeachers.date" 625 v-model="addTeachers.date"
626 :max="new Date().toISOString().substr(0, 10)" 626 :max="new Date().toISOString().substr(0, 10)"
627 min="1950-01-01" 627 min="1950-01-01"
628 @input="menu = false" 628 @input="menu = false"
629 ></v-date-picker> 629 ></v-date-picker>
630 </v-menu> 630 </v-menu>
631 </v-flex> 631 </v-flex>
632 </v-layout> 632 </v-layout>
633 </v-flex> 633 </v-flex>
634 <v-flex xs12 sm6> 634 <v-flex xs12 sm6>
635 <v-layout> 635 <v-layout>
636 <v-flex xs4 class="pt-4 subheading"> 636 <v-flex xs4 class="pt-4 subheading">
637 <label class="right">City:</label> 637 <label class="right">City:</label>
638 </v-flex> 638 </v-flex>
639 <v-flex xs8 class="ml-3"> 639 <v-flex xs8 class="ml-3">
640 <v-text-field 640 <v-text-field
641 v-model="addTeachers.city" 641 v-model="addTeachers.city"
642 placeholder="fill your City Name" 642 placeholder="fill your City Name"
643 name="City" 643 name="City"
644 type="text" 644 type="text"
645 :rules="cityRules" 645 :rules="cityRules"
646 required 646 required
647 ></v-text-field> 647 ></v-text-field>
648 </v-flex> 648 </v-flex>
649 </v-layout> 649 </v-layout>
650 </v-flex> 650 </v-flex>
651 </v-layout> 651 </v-layout>
652 <v-layout> 652 <v-layout>
653 <v-flex xs12 sm6> 653 <v-flex xs12 sm6>
654 <v-layout> 654 <v-layout>
655 <v-flex xs4 class="pt-4 subheading"> 655 <v-flex xs4 class="pt-4 subheading">
656 <label class="right">State:</label> 656 <label class="right">State:</label>
657 </v-flex> 657 </v-flex>
658 <v-flex xs8 class="ml-3"> 658 <v-flex xs8 class="ml-3">
659 <v-text-field 659 <v-text-field
660 v-model="addTeachers.state" 660 v-model="addTeachers.state"
661 placeholder="fill your State Name" 661 placeholder="fill your State Name"
662 name="state" 662 name="state"
663 type="text" 663 type="text"
664 :rules="stateRules" 664 :rules="stateRules"
665 required 665 required
666 ></v-text-field> 666 ></v-text-field>
667 </v-flex> 667 </v-flex>
668 </v-layout> 668 </v-layout>
669 </v-flex> 669 </v-flex>
670 <v-flex xs12 sm6> 670 <v-flex xs12 sm6>
671 <v-layout> 671 <v-layout>
672 <v-flex xs4 class="pt-4 subheading"> 672 <v-flex xs4 class="pt-4 subheading">
673 <label class="right">PinCode:</label> 673 <label class="right">PinCode:</label>
674 </v-flex> 674 </v-flex>
675 <v-flex xs8 class="ml-3"> 675 <v-flex xs8 class="ml-3">
676 <v-text-field 676 <v-text-field
677 v-model="addTeachers.pincode" 677 v-model="addTeachers.pincode"
678 placeholder="fill your pincode" 678 placeholder="fill your pincode"
679 name="pincode" 679 name="pincode"
680 type="number" 680 type="number"
681 :rules="pincode" 681 :rules="pincode"
682 required 682 required
683 ></v-text-field> 683 ></v-text-field>
684 </v-flex> 684 </v-flex>
685 </v-layout> 685 </v-layout>
686 </v-flex> 686 </v-flex>
687 </v-layout> 687 </v-layout>
688 <v-layout> 688 <v-layout>
689 <v-flex xs12 sm6> 689 <v-flex xs12 sm6>
690 <v-layout> 690 <v-layout>
691 <v-flex xs4 class="pt-4 subheading"> 691 <v-flex xs4 class="pt-4 subheading">
692 <label class="right">Mobile NO:</label> 692 <label class="right">Mobile NO:</label>
693 </v-flex> 693 </v-flex>
694 <v-flex xs8 class="ml-3"> 694 <v-flex xs8 class="ml-3">
695 <v-text-field 695 <v-text-field
696 v-model="addTeachers.mobileNo" 696 v-model="addTeachers.mobileNo"
697 placeholder="fill your MobileNo" 697 placeholder="fill your MobileNo"
698 name="mobileNo" 698 name="mobileNo"
699 type="number" 699 type="number"
700 :rules="mobileNoRules" 700 :rules="mobileNoRules"
701 required 701 required
702 ></v-text-field> 702 ></v-text-field>
703 </v-flex> 703 </v-flex>
704 </v-layout> 704 </v-layout>
705 </v-flex> 705 </v-flex>
706 <v-flex xs12 sm6> 706 <v-flex xs12 sm6>
707 <v-layout> 707 <v-layout>
708 <v-flex xs4 class="pt-4 subheading"> 708 <v-flex xs4 class="pt-4 subheading">
709 <label class="right">Select Country:</label> 709 <label class="right">Select Country:</label>
710 </v-flex> 710 </v-flex>
711 <v-flex xs8 class="ml-3"> 711 <v-flex xs8 class="ml-3">
712 <v-autocomplete 712 <v-autocomplete
713 v-model="addTeachers.country" 713 v-model="addTeachers.country"
714 :rules="country" 714 :rules="country"
715 :items="countries" 715 :items="countries"
716 placeholder="Select Country Name" 716 placeholder="Select Country Name"
717 required 717 required
718 ></v-autocomplete> 718 ></v-autocomplete>
719 </v-flex> 719 </v-flex>
720 </v-layout> 720 </v-layout>
721 </v-flex> 721 </v-flex>
722 </v-layout> 722 </v-layout>
723 <v-layout> 723 <v-layout>
724 <v-flex xs12 sm6> 724 <v-flex xs12 sm6>
725 <v-layout> 725 <v-layout>
726 <v-flex xs4 class="pt-4 subheading"> 726 <v-flex xs4 class="pt-4 subheading">
727 <label class="right">Join Date</label> 727 <label class="right">Join Date</label>
728 </v-flex> 728 </v-flex>
729 <v-flex xs8 class="ml-3"> 729 <v-flex xs8 class="ml-3">
730 <v-menu 730 <v-menu
731 ref="menu1" 731 ref="menu1"
732 :close-on-content-click="false" 732 :close-on-content-click="false"
733 v-model="menu1" 733 v-model="menu1"
734 :nudge-right="40" 734 :nudge-right="40"
735 lazy 735 lazy
736 transition="scale-transition" 736 transition="scale-transition"
737 offset-y 737 offset-y
738 full-width 738 full-width
739 min-width="290px" 739 min-width="290px"
740 > 740 >
741 <v-text-field 741 <v-text-field
742 slot="activator" 742 slot="activator"
743 :rules="joinDateRules" 743 :rules="joinDateRules"
744 v-model="addTeachers.joinDate" 744 v-model="addTeachers.joinDate"
745 placeholder="Select date" 745 placeholder="Select date"
746 ></v-text-field> 746 ></v-text-field>
747 <v-date-picker 747 <v-date-picker
748 ref="picker" 748 ref="picker"
749 v-model="addTeachers.joinDate" 749 v-model="addTeachers.joinDate"
750 :max="new Date().toISOString().substr(0, 10)" 750 :max="new Date().toISOString().substr(0, 10)"
751 min="1950-01-01" 751 min="1950-01-01"
752 @input="menu1 = false" 752 @input="menu1 = false"
753 ></v-date-picker> 753 ></v-date-picker>
754 </v-menu> 754 </v-menu>
755 </v-flex> 755 </v-flex>
756 </v-layout> 756 </v-layout>
757 </v-flex> 757 </v-flex>
758 <v-flex xs12 sm6> 758 <v-flex xs12 sm6>
759 <v-layout> 759 <v-layout>
760 <v-flex xs4 class="pt-4 subheading"> 760 <v-flex xs4 class="pt-4 subheading">
761 <label class="right">Uplaod Image:</label> 761 <label class="right">Uplaod Image:</label>
762 </v-flex> 762 </v-flex>
763 <v-flex xs8 class="ml-3"> 763 <v-flex xs8 class="ml-3">
764 <v-text-field 764 <v-text-field
765 label="Select Image" 765 label="Select Image"
766 @click="pickFile" 766 @click="pickFile"
767 v-model="imageName" 767 v-model="imageName"
768 append-icon="attach_file" 768 append-icon="attach_file"
769 ></v-text-field> 769 ></v-text-field>
770 <input 770 <input
771 type="file" 771 type="file"
772 style="display:none" 772 style="display:none"
773 ref="image" 773 ref="image"
774 accept="image/*" 774 accept="image/*"
775 @change="onFilePicked" 775 @change="onFilePicked"
776 > 776 >
777 </v-flex> 777 </v-flex>
778 </v-layout> 778 </v-layout>
779 </v-flex> 779 </v-flex>
780 </v-layout> 780 </v-layout>
781 <v-layout> 781 <v-layout>
782 <v-flex xs12 sm12> 782 <v-flex xs12 sm12>
783 <v-layout> 783 <v-layout>
784 <v-flex xs3 class="pt-4 subheading pl-4" style="max-width: 17%;"> 784 <v-flex xs3 class="pt-4 subheading pl-4" style="max-width: 17%;">
785 <label class>Present Address:</label> 785 <label class>Present Address:</label>
786 </v-flex> 786 </v-flex>
787 <v-flex xs12 class="presentInput"> 787 <v-flex xs12 class="presentInput">
788 <v-text-field 788 <v-text-field
789 name="input-4-3" 789 name="input-4-3"
790 v-model="addTeachers.presentAddress" 790 v-model="addTeachers.presentAddress"
791 :rules="presentAddress" 791 :rules="presentAddress"
792 placeholder="fill Your present Address" 792 placeholder="fill Your present Address"
793 required 793 required
794 ></v-text-field> 794 ></v-text-field>
795 </v-flex> 795 </v-flex>
796 </v-layout> 796 </v-layout>
797 </v-flex> 797 </v-flex>
798 <v-flex xs12 sm12> 798 <v-flex xs12 sm12>
799 <v-layout> 799 <v-layout>
800 <v-flex xs3 class="pt-4 subheading" style="max-width: 17%;"> 800 <v-flex xs3 class="pt-4 subheading" style="max-width: 17%;">
801 <label>Permanent Address:</label> 801 <label>Permanent Address:</label>
802 </v-flex> 802 </v-flex>
803 <v-flex xs12 class="presentInput"> 803 <v-flex xs12 class="presentInput">
804 <v-text-field 804 <v-text-field
805 name="input-4-3" 805 name="input-4-3"
806 v-model="addTeachers.permanentAddress" 806 v-model="addTeachers.permanentAddress"
807 :rules="permanentAddress" 807 :rules="permanentAddress"
808 placeholder="fill Your Permanent Address" 808 placeholder="fill Your Permanent Address"
809 required 809 required
810 ></v-text-field> 810 ></v-text-field>
811 </v-flex> 811 </v-flex>
812 </v-layout> 812 </v-layout>
813 </v-flex> 813 </v-flex>
814 </v-layout> 814 </v-layout>
815 <v-layout> 815 <v-layout>
816 <v-flex xs12 sm12> 816 <v-flex xs12 sm12>
817 <v-card-actions> 817 <v-card-actions>
818 <v-btn @click="clear" round dark>clear</v-btn> 818 <v-btn @click="clear" round dark>clear</v-btn>
819 <v-spacer></v-spacer> 819 <v-spacer></v-spacer>
820 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 820 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
821 </v-card-actions> 821 </v-card-actions>
822 </v-flex> 822 </v-flex>
823 </v-layout> 823 </v-layout>
824 </v-container> 824 </v-container>
825 </v-form> 825 </v-form>
826 </v-card> 826 </v-card>
827 </v-flex> 827 </v-flex>
828 </v-container> 828 </v-container>
829 </v-tab-item> 829 </v-tab-item>
830 </v-tabs> 830 </v-tabs>
831 <div class="loader" v-if="showLoader"> 831 <div class="loader" v-if="showLoader">
832 <v-progress-circular indeterminate color="white"></v-progress-circular> 832 <v-progress-circular indeterminate color="white"></v-progress-circular>
833 </div> 833 </div>
834 </v-app> 834 </v-app>
835 </template> 835 </template>
836 836
837 <script> 837 <script>
838 // import AppToolbar from '@/components/AppToolbar'; 838 // import AppToolbar from '@/components/AppToolbar';
839 import http from "@/Services/http.js"; 839 import http from "@/Services/http.js";
840 import Util from "@/util"; 840 import Util from "@/util";
841 import moment from "moment"; 841 import moment from "moment";
842 842
843 export default { 843 export default {
844 components: { 844 components: {
845 // "one-month": onemonth, 845 // "one-month": onemonth,
846 }, 846 },
847 data: () => ({ 847 data: () => ({
848 component: "report-generate", 848 component: "report-generate",
849 snackbar: false, 849 snackbar: false,
850 y: "top", 850 y: "top",
851 x: "right", 851 x: "right",
852 mode: "", 852 mode: "",
853 timeout: 3000, 853 timeout: 3000,
854 text: "", 854 text: "",
855 showLoader:false, 855 showLoader:false,
856 loading: false, 856 loading: false,
857 date: null, 857 date: null,
858 search: "", 858 search: "",
859 menu: false, 859 menu: false,
860 menu1: false, 860 menu1: false,
861 menu2: false, 861 menu2: false,
862 menu3: false, 862 menu3: false,
863 dialog: false, 863 dialog: false,
864 dialog1: false, 864 dialog1: false,
865 valid: true, 865 valid: true,
866 isActive: true, 866 isActive: true,
867 newActive: false, 867 newActive: false,
868 pagination: { 868 pagination: {
869 rowsPerPage: 15 869 rowsPerPage: 15
870 }, 870 },
871 imageData: {}, 871 imageData: {},
872 imageName: "", 872 imageName: "",
873 imageUrl: "", 873 imageUrl: "",
874 imageFile: "", 874 imageFile: "",
875 nameRules: [v => !!v || " Full Name is required"], 875 nameRules: [v => !!v || " Full Name is required"],
876 dateRules: [v => !!v || " DOB is required"], 876 dateRules: [v => !!v || " DOB is required"],
877 cityRules: [v => !!v || " City Name is required"], 877 cityRules: [v => !!v || " City Name is required"],
878 pincode: [v => !!v || " Pincode is required"], 878 pincode: [v => !!v || " Pincode is required"],
879 country: [v => !!v || " Country Name is required"], 879 country: [v => !!v || " Country Name is required"],
880 permanentAddress: [v => !!v || " Permanent Address is required"], 880 permanentAddress: [v => !!v || " Permanent Address is required"],
881 presentAddress: [v => !!v || " Present Address is required"], 881 presentAddress: [v => !!v || " Present Address is required"],
882 mobileNoRules: [v => !!v || "Mobile Number is required"], 882 mobileNoRules: [v => !!v || "Mobile Number is required"],
883 stateRules: [v => !!v || "State Name is required"], 883 stateRules: [v => !!v || "State Name is required"],
884 joinDateRules: [v => !!v || " Join Date is required"], 884 joinDateRules: [v => !!v || " Join Date is required"],
885 errorMessages: "", 885 errorMessages: "",
886 emailRules: [ 886 emailRules: [
887 v => !!v || "E-mail is required", 887 v => !!v || "E-mail is required",
888 v => 888 v =>
889 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 889 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
890 "E-mail must be valid" 890 "E-mail must be valid"
891 ], 891 ],
892 countries: [ 892 countries: [
893 "Afghanistan", 893 "Afghanistan",
894 "Albania", 894 "Albania",
895 "Algeria", 895 "Algeria",
896 "Andorra", 896 "Andorra",
897 "Angola", 897 "Angola",
898 "Anguilla", 898 "Anguilla",
899 "Antigua &amp; Barbuda", 899 "Antigua &amp; Barbuda",
900 "Argentina", 900 "Argentina",
901 "Armenia", 901 "Armenia",
902 "Aruba", 902 "Aruba",
903 "Australia", 903 "Australia",
904 "Austria", 904 "Austria",
905 "Azerbaijan", 905 "Azerbaijan",
906 "Bahamas", 906 "Bahamas",
907 "Bahrain", 907 "Bahrain",
908 "Bangladesh", 908 "Bangladesh",
909 "Barbados", 909 "Barbados",
910 "Belarus", 910 "Belarus",
911 "Belgium", 911 "Belgium",
912 "Belize", 912 "Belize",
913 "Benin", 913 "Benin",
914 "Bermuda", 914 "Bermuda",
915 "Bhutan", 915 "Bhutan",
916 "Bolivia", 916 "Bolivia",
917 "Bosnia &amp; Herzegovina", 917 "Bosnia &amp; Herzegovina",
918 "Botswana", 918 "Botswana",
919 "Brazil", 919 "Brazil",
920 "British Virgin Islands", 920 "British Virgin Islands",
921 "Brunei", 921 "Brunei",
922 "Bulgaria", 922 "Bulgaria",
923 "Burkina Faso", 923 "Burkina Faso",
924 "Burundi", 924 "Burundi",
925 "Cambodia", 925 "Cambodia",
926 "Cameroon", 926 "Cameroon",
927 "Cape Verde", 927 "Cape Verde",
928 "Cayman Islands", 928 "Cayman Islands",
929 "Chad", 929 "Chad",
930 "Chile", 930 "Chile",
931 "China", 931 "China",
932 "Colombia", 932 "Colombia",
933 "Congo", 933 "Congo",
934 "Cook Islands", 934 "Cook Islands",
935 "Costa Rica", 935 "Costa Rica",
936 "Cote D Ivoire", 936 "Cote D Ivoire",
937 "Croatia", 937 "Croatia",
938 "Cruise Ship", 938 "Cruise Ship",
939 "Cuba", 939 "Cuba",
940 "Cyprus", 940 "Cyprus",
941 "Czech Republic", 941 "Czech Republic",
942 "Denmark", 942 "Denmark",
943 "Djibouti", 943 "Djibouti",
944 "Dominica", 944 "Dominica",
945 "Dominican Republic", 945 "Dominican Republic",
946 "Ecuador", 946 "Ecuador",
947 "Egypt", 947 "Egypt",
948 "El Salvador", 948 "El Salvador",
949 "Equatorial Guinea", 949 "Equatorial Guinea",
950 "Estonia", 950 "Estonia",
951 "Ethiopia", 951 "Ethiopia",
952 "Falkland Islands", 952 "Falkland Islands",
953 "Faroe Islands", 953 "Faroe Islands",
954 "Fiji", 954 "Fiji",
955 "Finland", 955 "Finland",
956 "France", 956 "France",
957 "French Polynesia", 957 "French Polynesia",
958 "French West Indies", 958 "French West Indies",
959 "Gabon", 959 "Gabon",
960 "Gambia", 960 "Gambia",
961 "Georgia", 961 "Georgia",
962 "Germany", 962 "Germany",
963 "Ghana", 963 "Ghana",
964 "Gibraltar", 964 "Gibraltar",
965 "Greece", 965 "Greece",
966 "Greenland", 966 "Greenland",
967 "Grenada", 967 "Grenada",
968 "Guam", 968 "Guam",
969 "Guatemala", 969 "Guatemala",
970 "Guernsey", 970 "Guernsey",
971 "Guinea", 971 "Guinea",
972 "Guinea Bissau", 972 "Guinea Bissau",
973 "Guyana", 973 "Guyana",
974 "Haiti", 974 "Haiti",
975 "Honduras", 975 "Honduras",
976 "Hong Kong", 976 "Hong Kong",
977 "Hungary", 977 "Hungary",
978 "Iceland", 978 "Iceland",
979 "India", 979 "India",
980 "Indonesia", 980 "Indonesia",
981 "Iran", 981 "Iran",
982 "Iraq", 982 "Iraq",
983 "Ireland", 983 "Ireland",
984 "Isle of Man", 984 "Isle of Man",
985 "Israel", 985 "Israel",
986 "Italy", 986 "Italy",
987 "Jamaica", 987 "Jamaica",
988 "Japan", 988 "Japan",
989 "Jersey", 989 "Jersey",
990 "Jordan", 990 "Jordan",
991 "Kazakhstan", 991 "Kazakhstan",
992 "Kenya", 992 "Kenya",
993 "Kuwait", 993 "Kuwait",
994 "Kyrgyz Republic", 994 "Kyrgyz Republic",
995 "Laos", 995 "Laos",
996 "Latvia", 996 "Latvia",
997 "Lebanon", 997 "Lebanon",
998 "Lesotho", 998 "Lesotho",
999 "Liberia", 999 "Liberia",
1000 "Libya", 1000 "Libya",
1001 "Liechtenstein", 1001 "Liechtenstein",
1002 "Lithuania", 1002 "Lithuania",
1003 "Luxembourg", 1003 "Luxembourg",
1004 "Macau", 1004 "Macau",
1005 "Macedonia", 1005 "Macedonia",
1006 "Madagascar", 1006 "Madagascar",
1007 "Malawi", 1007 "Malawi",
1008 "Malaysia", 1008 "Malaysia",
1009 "Maldives", 1009 "Maldives",
1010 "Mali", 1010 "Mali",
1011 "Malta", 1011 "Malta",
1012 "Mauritania", 1012 "Mauritania",
1013 "Mauritius", 1013 "Mauritius",
1014 "Mexico", 1014 "Mexico",
1015 "Moldova", 1015 "Moldova",
1016 "Monaco", 1016 "Monaco",
1017 "Mongolia", 1017 "Mongolia",
1018 "Montenegro", 1018 "Montenegro",
1019 "Montserrat", 1019 "Montserrat",
1020 "Morocco", 1020 "Morocco",
1021 "Mozambique", 1021 "Mozambique",
1022 "Namibia", 1022 "Namibia",
1023 "Nepal", 1023 "Nepal",
1024 "Netherlands", 1024 "Netherlands",
1025 "Netherlands Antilles", 1025 "Netherlands Antilles",
1026 "New Caledonia", 1026 "New Caledonia",
1027 "New Zealand", 1027 "New Zealand",
1028 "Nicaragua", 1028 "Nicaragua",
1029 "Niger", 1029 "Niger",
1030 "Nigeria", 1030 "Nigeria",
1031 "Norway", 1031 "Norway",
1032 "Oman", 1032 "Oman",
1033 "Pakistan", 1033 "Pakistan",
1034 "Palestine", 1034 "Palestine",
1035 "Panama", 1035 "Panama",
1036 "Papua New Guinea", 1036 "Papua New Guinea",
1037 "Paraguay", 1037 "Paraguay",
1038 "Peru", 1038 "Peru",
1039 "Philippines", 1039 "Philippines",
1040 "Poland", 1040 "Poland",
1041 "Portugal", 1041 "Portugal",
1042 "Puerto Rico", 1042 "Puerto Rico",
1043 "Qatar", 1043 "Qatar",
1044 "Reunion", 1044 "Reunion",
1045 "Romania", 1045 "Romania",
1046 "Russia", 1046 "Russia",
1047 "Rwanda", 1047 "Rwanda",
1048 "Saint Pierre &amp; Miquelon", 1048 "Saint Pierre &amp; Miquelon",
1049 "Samoa", 1049 "Samoa",
1050 "San Marino", 1050 "San Marino",
1051 "Satellite", 1051 "Satellite",
1052 "Saudi Arabia", 1052 "Saudi Arabia",
1053 "Senegal", 1053 "Senegal",
1054 "Serbia", 1054 "Serbia",
1055 "Seychelles", 1055 "Seychelles",
1056 "Sierra Leone", 1056 "Sierra Leone",
1057 "Singapore", 1057 "Singapore",
1058 "Slovakia", 1058 "Slovakia",
1059 "Slovenia", 1059 "Slovenia",
1060 "South Africa", 1060 "South Africa",
1061 "South Korea", 1061 "South Korea",
1062 "Spain", 1062 "Spain",
1063 "Sri Lanka", 1063 "Sri Lanka",
1064 "St Kitts &amp; Nevis", 1064 "St Kitts &amp; Nevis",
1065 "St Lucia", 1065 "St Lucia",
1066 "St Vincent", 1066 "St Vincent",
1067 "St. Lucia", 1067 "St. Lucia",
1068 "Sudan", 1068 "Sudan",
1069 "Suriname", 1069 "Suriname",
1070 "Swaziland", 1070 "Swaziland",
1071 "Sweden", 1071 "Sweden",
1072 "Switzerland", 1072 "Switzerland",
1073 "Syria", 1073 "Syria",
1074 "Taiwan", 1074 "Taiwan",
1075 "Tajikistan", 1075 "Tajikistan",
1076 "Tanzania", 1076 "Tanzania",
1077 "Thailand", 1077 "Thailand",
1078 "Timor L'Este", 1078 "Timor L'Este",
1079 "Togo", 1079 "Togo",
1080 "Tonga", 1080 "Tonga",
1081 "Trinidad &amp; Tobago", 1081 "Trinidad &amp; Tobago",
1082 "Tunisia", 1082 "Tunisia",
1083 "Turkey", 1083 "Turkey",
1084 "Turkmenistan", 1084 "Turkmenistan",
1085 "Turks &amp; Caicos", 1085 "Turks &amp; Caicos",
1086 "Uganda", 1086 "Uganda",
1087 "Ukraine", 1087 "Ukraine",
1088 "United Arab Emirates", 1088 "United Arab Emirates",
1089 "United Kingdom", 1089 "United Kingdom",
1090 "United States", 1090 "United States",
1091 "Uruguay", 1091 "Uruguay",
1092 "Uzbekistan", 1092 "Uzbekistan",
1093 "Venezuela", 1093 "Venezuela",
1094 "Vietnam", 1094 "Vietnam",
1095 "Virgin Islands (US)", 1095 "Virgin Islands (US)",
1096 "Yemen", 1096 "Yemen",
1097 "Zambia", 1097 "Zambia",
1098 "Zimbabwe" 1098 "Zimbabwe"
1099 ], 1099 ],
1100 headers: [ 1100 headers: [
1101 { 1101 {
1102 text: "No", 1102 text: "No",
1103 align: "center", 1103 align: "center",
1104 sortable: false, 1104 sortable: false,
1105 value: "No" 1105 value: "No"
1106 }, 1106 },
1107 { text: "Name", value: "name", sortable: false, align: "center" }, 1107 { text: "Name", value: "name", sortable: false, align: "center" },
1108 { text: "Email", value: "email", sortable: false, align: "center" }, 1108 { text: "Email", value: "email", sortable: false, align: "center" },
1109 { text: "DOB", value: "dob", sortable: false, align: "center" }, 1109 { text: "DOB", value: "dob", sortable: false, align: "center" },
1110 { text: "Join Date", value: "joinDate", sortable: false, align: "center" }, 1110 { text: "Join Date", value: "joinDate", sortable: false, align: "center" },
1111 { text: "Mobile No", value: "mobileNo", sortable: false, align: "center" }, 1111 { text: "Mobile No", value: "mobileNo", sortable: false, align: "center" },
1112 { text: "Action", value: "", sortable: false, align: "center" } 1112 { text: "Action", value: "", sortable: false, align: "center" }
1113 ], 1113 ],
1114 desserts: [], 1114 desserts: [],
1115 editedIndex: -1, 1115 editedIndex: -1,
1116 upload:'', 1116 upload:'',
1117 editedItem: { 1117 editedItem: {
1118 role: "TEACHER", 1118 role: "TEACHER",
1119 name: "", 1119 name: "",
1120 email: "", 1120 email: "",
1121 date: null, 1121 date: null,
1122 city: "", 1122 city: "",
1123 pincode: "", 1123 pincode: "",
1124 country: "", 1124 country: "",
1125 permanentAddress: "", 1125 permanentAddress: "",
1126 presentAddress: "", 1126 presentAddress: "",
1127 mobileNo: "", 1127 mobileNo: "",
1128 state: "", 1128 state: "",
1129 joinDate: null 1129 joinDate: null
1130 }, 1130 },
1131 addTeachers: { 1131 addTeachers: {
1132 role: "TEACHER", 1132 role: "TEACHER",
1133 name: "", 1133 name: "",
1134 email: "", 1134 email: "",
1135 date: null, 1135 date: null,
1136 city: "", 1136 city: "",
1137 pincode: "", 1137 pincode: "",
1138 country: "", 1138 country: "",
1139 permanentAddress: "", 1139 permanentAddress: "",
1140 presentAddress: "", 1140 presentAddress: "",
1141 mobileNo: "", 1141 mobileNo: "",
1142 state: "", 1142 state: "",
1143 joinDate: null 1143 joinDate: null
1144 }, 1144 },
1145 defaultItem: { 1145 defaultItem: {
1146 role: "TEACHER", 1146 role: "TEACHER",
1147 name: "", 1147 name: "",
1148 email: "" 1148 email: ""
1149 }, 1149 },
1150 userName: "", 1150 userName: "",
1151 items: [ 1151 items: [
1152 { 1152 {
1153 href: "/changepassword", 1153 href: "/changepassword",
1154 title: "Change Password", 1154 title: "Change Password",
1155 click: e => { 1155 click: e => {
1156 console.log(e); 1156 console.log(e);
1157 } 1157 }
1158 }, 1158 },
1159 { 1159 {
1160 href: "#", 1160 href: "#",
1161 title: "Logout", 1161 title: "Logout",
1162 click: e => { 1162 click: e => {
1163 window.getApp.$emit("APP_LOGOUT"); 1163 window.getApp.$emit("APP_LOGOUT");
1164 } 1164 }
1165 } 1165 }
1166 ] 1166 ]
1167 }), 1167 }),
1168 watch: { 1168 watch: {
1169 menu(val) { 1169 menu(val) {
1170 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 1170 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
1171 }, 1171 },
1172 menu1(val) { 1172 menu1(val) {
1173 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 1173 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
1174 } 1174 }
1175 }, 1175 },
1176 methods: { 1176 methods: {
1177 save (date) { 1177 save (date) {
1178 this.$refs.menu.save(date) 1178 this.$refs.menu.save(date)
1179 }, 1179 },
1180 save (date) { 1180 save (date) {
1181 this.$refs.menu1.save(date) 1181 this.$refs.menu1.save(date)
1182 }, 1182 },
1183 pickFile() { 1183 pickFile() {
1184 this.$refs.image.click (); 1184 this.$refs.image.click ();
1185 }, 1185 },
1186 onFilePicked(e) { 1186 onFilePicked(e) {
1187 // console.log(e) 1187 // console.log(e)
1188 const files = e.target.files; 1188 const files = e.target.files;
1189 this.upload = e.target.files[0]; 1189 this.upload = e.target.files[0];
1190 console.log("imageData-upload========>",this.upload) 1190 console.log("imageData-upload========>",this.upload)
1191 if (files[0] !== undefined) { 1191 if (files[0] !== undefined) {
1192 this.imageName = files[0].name; 1192 this.imageName = files[0].name;
1193 if (this.imageName.lastIndexOf(".") <= 0) { 1193 if (this.imageName.lastIndexOf(".") <= 0) {
1194 return; 1194 return;
1195 } 1195 }
1196 const fr = new FileReader(); 1196 const fr = new FileReader();
1197 fr.readAsDataURL(files[0]); 1197 fr.readAsDataURL(files[0]);
1198 fr.addEventListener("load", () => { 1198 fr.addEventListener("load", () => {
1199 this.imageUrl = fr.result; 1199 this.imageUrl = fr.result;
1200 this.imageFile = files[0]; // this is an image file that can be sent to server... 1200 this.imageFile = files[0]; // this is an image file that can be sent to server...
1201 // this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 1201 // this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
1202 // console.log("upload=======>", this.imageData.imageUrl); 1202 // console.log("upload=======>", this.imageData.imageUrl);
1203 console.log("imageFile", this.imageFile); 1203 console.log("imageFile", this.imageFile);
1204 }); 1204 });
1205 } else { 1205 } else {
1206 this.imageName = ""; 1206 this.imageName = "";
1207 this.imageFile = ""; 1207 this.imageFile = "";
1208 this.imageUrl = ""; 1208 this.imageUrl = "";
1209 } 1209 }
1210 }, 1210 },
1211 dates: function(date) { 1211 dates: function(date) {
1212 return moment(date).format("MMMM DD, YYYY"); 1212 return moment(date).format("MMMM DD, YYYY");
1213 }, 1213 },
1214 getTeacherList() { 1214 getTeacherList() {
1215 this.showLoader = true; 1215 this.showLoader = true;
1216 var token = this.$store.state.token; 1216 var token = this.$store.state.token;
1217 console.log("token",token) 1217 console.log("token",token)
1218 http() 1218 http()
1219 .get("/getTeachersList", { 1219 .get("/getTeachersList", {
1220 headers: { Authorization: "Bearer " + token } 1220 headers: { Authorization: "Bearer " + token }
1221 }) 1221 })
1222 .then(response => { 1222 .then(response => {
1223 this.desserts = response.data.data; 1223 this.desserts = response.data.data;
1224 this.showLoader = false; 1224 this.showLoader = false;
1225 // console.log("getTeacherList=====>",this.desserts) 1225 // console.log("getTeacherList=====>",this.desserts)
1226 }) 1226 })
1227 .catch(err => { 1227 .catch(err => {
1228 // console.log("err====>", err); 1228 // console.log("err====>", err);
1229 this.showLoader = false; 1229 this.showLoader = false;
1230 // this.$router.replace({ path: "/" }); 1230 // this.$router.replace({ path: "/" });
1231 }); 1231 });
1232 }, 1232 },
1233 editItem(item) { 1233 editItem(item) {
1234 this.editedIndex = this.desserts.indexOf(item); 1234 this.editedIndex = this.desserts.indexOf(item);
1235 this.editedItem = Object.assign({}, item); 1235 this.editedItem = Object.assign({}, item);
1236 this.editedItem.dob = this.editedItem.dob.substring(0, 10) 1236 this.editedItem.dob = this.editedItem.dob.substring(0, 10)
1237 this.editedItem.joinDate = this.editedItem.joinDate.substring(0, 10) 1237 this.editedItem.joinDate = this.editedItem.joinDate.substring(0, 10)
1238 this.dialog = true; 1238 this.dialog = true;
1239 }, 1239 },
1240 profile(item) { 1240 profile(item) {
1241 this.editedIndex = this.desserts.indexOf(item); 1241 this.editedIndex = this.desserts.indexOf(item);
1242 this.editedItem = Object.assign({}, item); 1242 this.editedItem = Object.assign({}, item);
1243 this.dialog1 = true; 1243 this.dialog1 = true;
1244 }, 1244 },
1245 deleteItem(item) { 1245 deleteItem(item) {
1246 let deleteTeachers = { 1246 let deleteTeachers = {
1247 teacherId: item._id 1247 teacherId: item._id
1248 }; 1248 };
1249 // console.log("deleteUers",deleteTeachers) 1249 // console.log("deleteUers",deleteTeachers)
1250 http() 1250 http()
1251 .delete( 1251 .delete(
1252 "/deleteTeacher", 1252 "/deleteTeacher",
1253 confirm("Are you sure you want to delete this?") && { 1253 confirm("Are you sure you want to delete this?") && {
1254 params: deleteTeachers 1254 params: deleteTeachers
1255 } 1255 }
1256 ) 1256 )
1257 .then(response => { 1257 .then(response => {
1258 // console.log("deleteUers",deleteTeachers) 1258 // console.log("deleteUers",deleteTeachers)
1259 if ((this.snackbar = true)) { 1259 if ((this.snackbar = true)) {
1260 this.text = "Successfully delete Existing User"; 1260 this.text = "Successfully delete Existing Teacher";
1261 } 1261 }
1262 this.getTeacherList(); 1262 this.getTeacherList();
1263 }) 1263 })
1264 .catch(error => { 1264 .catch(error => {
1265 console.log(error); 1265 console.log(error);
1266 }); 1266 });
1267 }, 1267 },
1268 activeTab(type) { 1268 activeTab(type) {
1269 switch (type) { 1269 switch (type) {
1270 case "existing": 1270 case "existing":
1271 this.newActive = false; 1271 this.newActive = false;
1272 this.isActive = true; 1272 this.isActive = true;
1273 break; 1273 break;
1274 1274
1275 default: 1275 default:
1276 this.newActive = true; 1276 this.newActive = true;
1277 this.isActive = false; 1277 this.isActive = false;
1278 break; 1278 break;
1279 } 1279 }
1280 }, 1280 },
1281 close() { 1281 close() {
1282 this.dialog = false; 1282 this.dialog = false;
1283 setTimeout(() => { 1283 setTimeout(() => {
1284 this.editedItem = Object.assign({}, this.defaultItem); 1284 this.editedItem = Object.assign({}, this.defaultItem);
1285 this.editedIndex = -1; 1285 this.editedIndex = -1;
1286 }, 300); 1286 }, 300);
1287 }, 1287 },
1288 close1() { 1288 close1() {
1289 this.dialog1 = false; 1289 this.dialog1 = false;
1290 }, 1290 },
1291 // close2() { 1291 // close2() {
1292 // this.dialog2 = false; 1292 // this.dialog2 = false;
1293 // }, 1293 // },
1294 submit() { 1294 submit() {
1295 if (this.$refs.form.validate()) { 1295 if (this.$refs.form.validate()) {
1296 let images = new FormData(); 1296 let images = new FormData();
1297 images.append("upload", this.imageFile); 1297 images.append("upload", this.imageFile);
1298 console.log(images); 1298 console.log(images);
1299 // var form_data = new FormData(); 1299 // var form_data = new FormData();
1300 // for (var key in addTeacher) { 1300 // for (var key in addTeacher) {
1301 // if (key === 'upload') { 1301 // if (key === 'upload') {
1302 // form_data.append(key, this.imageFile); 1302 // form_data.append(key, this.imageFile);
1303 // } else { 1303 // } else {
1304 // form_data.append(key, addTeacher[key]) 1304 // form_data.append(key, addTeacher[key])
1305 // } 1305 // }
1306 // } 1306 // }
1307 console.log("images",images) 1307 console.log("images",images)
1308 let addTeacher = { 1308 let addTeacher = {
1309 name: this.addTeachers.name, 1309 name: this.addTeachers.name,
1310 email: this.addTeachers.email, 1310 email: this.addTeachers.email,
1311 role: this.addTeachers.role, 1311 role: this.addTeachers.role,
1312 dob: this.addTeachers.date, 1312 dob: this.addTeachers.date,
1313 city: this.addTeachers.city, 1313 city: this.addTeachers.city,
1314 pincode: this.addTeachers.pincode, 1314 pincode: this.addTeachers.pincode,
1315 country: this.addTeachers.country, 1315 country: this.addTeachers.country,
1316 permanentAddress: this.addTeachers.permanentAddress, 1316 permanentAddress: this.addTeachers.permanentAddress,
1317 presentAddress: this.addTeachers.presentAddress, 1317 presentAddress: this.addTeachers.presentAddress,
1318 mobileNo: this.addTeachers.mobileNo, 1318 mobileNo: this.addTeachers.mobileNo,
1319 state: this.addTeachers.state, 1319 state: this.addTeachers.state,
1320 joinDate: this.addTeachers.joinDate, 1320 joinDate: this.addTeachers.joinDate,
1321 images 1321 images
1322 // upload:this.imageFile 1322 // upload:this.imageFile
1323 }; 1323 };
1324 // console.log("addTeacher============>", addTeacher); 1324 // console.log("addTeacher============>", addTeacher);
1325 this.loading = true;
1325 http() 1326 http()
1326 .post("/createTeacher", addTeacher) 1327 .post("/createTeacher", addTeacher)
1327 .then(response => { 1328 .then(response => {
1328 console.log("addTeacher", addTeacher); 1329 console.log("addTeacher", addTeacher);
1329 this.getTeacherList(); 1330 this.getTeacherList();
1330 if ((this.snackbar = true)) { 1331 if ((this.snackbar = true)) {
1331 this.text = "New user added successfully"; 1332 this.text = "New Teacher added successfully";
1332 } 1333 }
1333 1334
1334 this.clear(); 1335 this.clear();
1336 this.loading = false;
1335 }) 1337 })
1336 .catch(error => { 1338 .catch(error => {
1337 // console.log(error); 1339 // console.log(error);
1338 if ((this.snackbar = true)) { 1340 if ((this.snackbar = true)) {
1339 this.text = error.response.data.message; 1341 this.text = error.response.data.message;
1340 } 1342 }
1343 this.loading = false;
1341 }); 1344 });
1342 } 1345 }
1343 }, 1346 },
1344 mail() {}, 1347 mail() {},
1345 download() {}, 1348 download() {},
1346 clear() { 1349 clear() {
1347 this.$refs.form.reset(); 1350 this.$refs.form.reset();
1348 }, 1351 },
1349 save() { 1352 save() {
1350 let editTeacher = { 1353 let editTeacher = {
1351 teacherId: this.editedItem._id, 1354 teacherId: this.editedItem._id,
1352 name: this.editedItem.name, 1355 name: this.editedItem.name,
1353 email: this.editedItem.email, 1356 email: this.editedItem.email,
1354 role: this.editedItem.role, 1357 role: this.editedItem.role,
1355 dob: this.editedItem.date, 1358 dob: this.editedItem.date,
1356 city: this.editedItem.city, 1359 city: this.editedItem.city,
1357 pincode: this.editedItem.pincode, 1360 pincode: this.editedItem.pincode,
1358 country: this.editedItem.country, 1361 country: this.editedItem.country,
1359 permanentAddress: this.editedItem.permanentAddress, 1362 permanentAddress: this.editedItem.permanentAddress,
1360 presentAddress: this.editedItem.presentAddress, 1363 presentAddress: this.editedItem.presentAddress,
1361 mobileNo: this.editedItem.mobileNo, 1364 mobileNo: this.editedItem.mobileNo,
1362 state: this.editedItem.state, 1365 state: this.editedItem.state,
1363 joinDate: this.editedItem.joinDate, 1366 joinDate: this.editedItem.joinDate,
1364 // imageData, 1367 // imageData,
1365 }; 1368 };
1366 http() 1369 http()
1367 .put("/updateTeacher", editTeacher) 1370 .put("/updateTeacher", editTeacher)
1368 .then(response => { 1371 .then(response => {
1369 console.log("editTeacher",editTeacher); 1372 console.log("editTeacher",editTeacher);
1370 if ((this.snackbar = true)) { 1373 if ((this.snackbar = true)) {
1371 this.text = "Successfully Edit Existing User"; 1374 this.text = "Successfully Edit Existing Teacher";
1372 } 1375 }
1373 this.getTeacherList(); 1376 this.getTeacherList();
1374 }) 1377 })
1375 .catch(error => { 1378 .catch(error => {
1376 console.log(error); 1379 console.log(error);
1377 }); 1380 });
1378 this.close(); 1381 this.close();
1379 }, 1382 },
1380 handleDrawerToggle() { 1383 handleDrawerToggle() {
1381 window.getApp.$emit("APP_DRAWER_TOGGLED"); 1384 window.getApp.$emit("APP_DRAWER_TOGGLED");
1382 }, 1385 },
1383 handleFullScreen() { 1386 handleFullScreen() {
1384 Util.toggleFullScreen(); 1387 Util.toggleFullScreen();
1385 } 1388 }
1386 }, 1389 },
1387 mounted() { 1390 mounted() {
1388 this.getTeacherList(); 1391 this.getTeacherList();
1389 // console.log("Id",this.$store.state.id) 1392 // console.log("Id",this.$store.state.id)
1390 // console.log("token",this.$store.state.token) 1393 // console.log("token",this.$store.state.token)
1391 }, 1394 },
1392 computed: { 1395 computed: {
1393 toolbarColor() { 1396 toolbarColor() {
1394 return this.$vuetify.options.extra.mainNav; 1397 return this.$vuetify.options.extra.mainNav;
1395 } 1398 }
1396 } 1399 }
1397 }; 1400 };
1398 </script> 1401 </script>
1399 <style scoped> 1402 <style scoped>
1400 .v-tabs__div { 1403 .v-tabs__div {
1401 text-transform: none; 1404 text-transform: none;
1402 } 1405 }
1403 .v-input__prepend-outer { 1406 .v-input__prepend-outer {
1404 margin-right: 0px !important; 1407 margin-right: 0px !important;
1405 } 1408 }
1406 .v-card__actions .v-btn { 1409 .v-card__actions .v-btn {
1407 margin: 0 15px; 1410 margin: 0 15px;
1408 min-width: 120px; 1411 min-width: 120px;
1409 } 1412 }
1410 .primary { 1413 .primary {
1411 background-color: #aaa !important; 1414 background-color: #aaa !important;
1412 border-color: #aaa !important; 1415 border-color: #aaa !important;
1413 } 1416 }
1414 h4 { 1417 h4 {
1415 background-repeat: no-repeat; 1418 background-repeat: no-repeat;
1416 padding: 8px; 1419 padding: 8px;
1417 margin: auto; 1420 margin: auto;
1418 font-size: 25px; 1421 font-size: 25px;
1419 } 1422 }
1420 #name { 1423 #name {
1421 position: absolute; 1424 position: absolute;
1422 left: 100px; 1425 left: 100px;
1423 top: 17px; 1426 top: 17px;
1424 } 1427 }
1425 #icon { 1428 #icon {
1426 position: absolute; 1429 position: absolute;
1427 right: 8px; 1430 right: 8px;
1428 top: 8px; 1431 top: 8px;
1429 } 1432 }
1430 #m { 1433 #m {
1431 position: relative; 1434 position: relative;
1432 left: 135px; 1435 left: 135px;
1433 top: -15px; 1436 top: -15px;
1434 } 1437 }
1435 #G { 1438 #G {
1436 position: absolute; 1439 position: absolute;
1437 top: 38px; 1440 top: 38px;
1438 color: white; 1441 color: white;
1439 } 1442 }
1440 #bt { 1443 #bt {
1441 position: relative; 1444 position: relative;
1442 top: -20px; 1445 top: -20px;
1443 left: 115px; 1446 left: 115px;
1444 } 1447 }
1445 #e { 1448 #e {
1446 position: relative; 1449 position: relative;
1447 top: 5px; 1450 top: 5px;
1448 right: -30px; 1451 right: -30px;
1449 height: 17px; 1452 height: 17px;
1450 cursor: pointer; 1453 cursor: pointer;
1451 } 1454 }
1452 #d { 1455 #d {
1453 position: relative; 1456 position: relative;
1454 top: 5px; 1457 top: 5px;
1455 right: -70px; 1458 right: -70px;
1456 height: 17px; 1459 height: 17px;
1457 cursor: pointer; 1460 cursor: pointer;
1458 } 1461 }
1459 #td { 1462 #td {
1460 border: 1px solid #dddddd; 1463 border: 1px solid #dddddd;
1461 text-align: left; 1464 text-align: left;
1462 padding: 8px; 1465 padding: 8px;
1463 } 1466 }
1464 #dialog { 1467 #dialog {
1465 height: 550px; 1468 height: 550px;
1466 } 1469 }
1467 .active { 1470 .active {
1468 background-color: black; 1471 background-color: black;
1469 color: white !important; 1472 color: white !important;
1470 } 1473 }
1471 .activebtn { 1474 .activebtn {
1472 color: black !important; 1475 color: black !important;
1473 } 1476 }
1474 #flex { 1477 #flex {
1475 height: 300px; 1478 height: 300px;
1476 } 1479 }
1477 .v-tabs__item a { 1480 .v-tabs__item a {
1478 font-size: 16px !important; 1481 font-size: 16px !important;
1479 } 1482 }
1480 @media screen and (max-width: 769px) { 1483 @media screen and (max-width: 769px) {
1481 .top { 1484 .top {
1482 margin-top: 0 !important; 1485 margin-top: 0 !important;
1483 } 1486 }
1484 .userSearch .v-icon { 1487 .userSearch .v-icon {
1485 font-size: 20px !important; 1488 font-size: 20px !important;
1486 margin-left: 20px; 1489 margin-left: 20px;
1487 } 1490 }
1488 } 1491 }
1489 1492
1490 @media screen and (max-width: 380px) { 1493 @media screen and (max-width: 380px) {
1491 .pl-3 { 1494 .pl-3 {
1492 padding-left: 0px !important; 1495 padding-left: 0px !important;
1493 } 1496 }
1494 .right { 1497 .right {
1495 float: none !important; 1498 float: none !important;
1496 } 1499 }
1497 .subheading { 1500 .subheading {
1498 font-size: 14px !important; 1501 font-size: 14px !important;
1499 } 1502 }
1500 .v-card__actions .v-btn { 1503 .v-card__actions .v-btn {
1501 margin: 0 0px; 1504 margin: 0 0px;
1502 min-width: 100px; 1505 min-width: 100px;
1503 } 1506 }
1504 .presentInput{ 1507 .presentInput{
1505 padding-left:48px !important; 1508 padding-left:48px !important;
1506 } 1509 }
1507 /* .searchIcon .v-icon { 1510 /* .searchIcon .v-icon {
1508 font-size: 20px; 1511 font-size: 20px;
1509 margin-left: 20px; 1512 margin-left: 20px;
1510 } */ 1513 } */
1511 .subheading { 1514 .subheading {
1512 font-size: 12px !important; 1515 font-size: 12px !important;
1513 } 1516 }
1514 h5 { 1517 h5 {
1515 font-size: 13px; 1518 font-size: 13px;
1516 } 1519 }
1517 .pl-4{ 1520 .pl-4{
1518 padding-left: 0px !important; 1521 padding-left: 0px !important;
1519 1522
1520 } 1523 }
1521 } 1524 }
1522 .v-icon { 1525 .v-icon {
1523 font-size: 30px; 1526 font-size: 30px;
1524 } 1527 }
1525 @media screen and (min-width: 1270px) { 1528 @media screen and (min-width: 1270px) {
1526 .hide { 1529 .hide {
1527 display: none; 1530 display: none;
1528 } 1531 }
1529 /* } 1532 /* }
1530 @media screen and (max-width: 962px) { 1533 @media screen and (max-width: 962px) {
1531 .imglogo{ 1534 .imglogo{
1532 position: absolute; 1535 position: absolute;
1533 top: 13px; 1536 top: 13px;
1534 left: 13px !important; 1537 left: 13px !important;
1535 width: 70px; 1538 width: 70px;
1536 height: 24px; 1539 height: 24px;
1537 } */ 1540 } */
1538 } 1541 }
1539 @media screen and (max-width: 420px) { 1542 @media screen and (max-width: 420px) {
1540 .userSearch .v-text-field .v-label { 1543 .userSearch .v-text-field .v-label {
1541 line-height: 24px !important; 1544 line-height: 24px !important;
1542 } 1545 }
1543 .userSearch .v-label { 1546 .userSearch .v-label {
1544 font-size: 13px !important; 1547 font-size: 13px !important;
1545 } 1548 }
1546 .v-list__tile { 1549 .v-list__tile {
1547 font-size: 14px; 1550 font-size: 14px;
1548 padding: 0 10px; 1551 padding: 0 10px;
1549 } 1552 }
1550 .name { 1553 .name {
1551 font-size: 15px; 1554 font-size: 15px;
1552 } 1555 }
1553 } 1556 }
1554 </style> 1557 </style>
src/pages/TimeTable/timeTable.vue
Diff comments   View file @5f1d4b4
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 TIME-TABLE ****** --> 7 <!-- ****** SEARCH ALL EXISTING TIME-TABLE ****** -->
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 Time Talbe" 12 label="Find your Time Talbe"
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 Time Table</v-tab> 54 >Existing Time Table</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 Time Table</v-tab> 62 >Add New Time Table</v-tab>
63 63
64 <!-- ****** EDITS TIME-TABLE****** --> 64 <!-- ****** EDITS TIME-TABLE****** -->
65 65
66 <v-tab-item> 66 <v-tab-item>
67 <v-snackbar 67 <v-snackbar
68 :timeout="timeout" 68 :timeout="timeout"
69 :top="y === 'top'" 69 :top="y === 'top'"
70 :right="x === 'right'" 70 :right="x === 'right'"
71 :vertical="mode === 'vertical'" 71 :vertical="mode === 'vertical'"
72 v-model="snackbar" 72 v-model="snackbar"
73 color="success" 73 color="success"
74 >{{ text }}</v-snackbar> 74 >{{ text }}</v-snackbar>
75 <v-dialog v-model="dialog" max-width="1000px"> 75 <v-dialog v-model="dialog" max-width="1000px">
76 <v-flex xs12 sm12 class> 76 <v-flex xs12 sm12 class>
77 <v-toolbar color="grey lighten-2"> 77 <v-toolbar color="grey lighten-2">
78 <v-spacer></v-spacer> 78 <v-spacer></v-spacer>
79 <v-toolbar-title> 79 <v-toolbar-title>
80 <h3>Edit Time Table</h3> 80 <h3>Edit Time Table</h3>
81 </v-toolbar-title> 81 </v-toolbar-title>
82 <v-spacer></v-spacer> 82 <v-spacer></v-spacer>
83 </v-toolbar> 83 </v-toolbar>
84 <v-card flat> 84 <v-card flat>
85 <v-form ref="form"> 85 <v-form ref="form">
86 <v-container fluid> 86 <v-container fluid>
87 <v-layout> 87 <v-layout>
88 <v-flex 88 <v-flex
89 xs12 89 xs12
90 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4" 90 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4"
91 > 91 >
92 <v-avatar size="100px"> 92 <v-avatar size="100px">
93 <img src="/static/icon/user.png" v-if="!imageUrl"> 93 <img src="/static/icon/user.png" v-if="!imageUrl">
94 </v-avatar> 94 </v-avatar>
95 <input 95 <input
96 type="file" 96 type="file"
97 style="display: none" 97 style="display: none"
98 ref="image" 98 ref="image"
99 accept="image/*" 99 accept="image/*"
100 @change="onFilePicked" 100 @change="onFilePicked"
101 > 101 >
102 <img 102 <img
103 :src="imageData.imageUrl" 103 :src="imageData.imageUrl"
104 height="150" 104 height="150"
105 v-if="imageUrl" 105 v-if="imageUrl"
106 style="border-radius:50%; width:200px" 106 style="border-radius:50%; width:200px"
107 > 107 >
108 </v-flex> 108 </v-flex>
109 </v-layout> 109 </v-layout>
110 <v-flex xs12 sm12> 110 <v-flex xs12 sm12>
111 <v-layout> 111 <v-layout>
112 <v-flex xs4 class="pt-4 subheading"> 112 <v-flex xs4 class="pt-4 subheading">
113 <label class="right">class No:</label> 113 <label class="right">class No:</label>
114 </v-flex> 114 </v-flex>
115 <v-flex xs12 sm5 class="ml-3"> 115 <v-flex xs12 sm5 class="ml-3">
116 <v-select 116 <v-select
117 :items="addclass" 117 :items="addclass"
118 label="Select Class" 118 label="Select Class"
119 v-model="editedItem.classNum" 119 v-model="editedItem.classNum"
120 item-text="classNum" 120 item-text="classNum"
121 item-value="_id" 121 item-value="_id"
122 @change="getSections(editedItem.classNum)" 122 @change="getSections(editedItem.classNum)"
123 ></v-select> 123 ></v-select>
124 </v-flex> 124 </v-flex>
125 </v-layout> 125 </v-layout>
126 </v-flex> 126 </v-flex>
127 <v-flex xs12 sm12> 127 <v-flex xs12 sm12>
128 <v-layout> 128 <v-layout>
129 <v-flex xs4 class="pt-4 subheading"> 129 <v-flex xs4 class="pt-4 subheading">
130 <label class="right">Section Name:</label> 130 <label class="right">Section Name:</label>
131 </v-flex> 131 </v-flex>
132 <v-flex xs5 class="ml-3"> 132 <v-flex xs5 class="ml-3">
133 <v-select 133 <v-select
134 :items="addSection" 134 :items="addSection"
135 label="Select Section" 135 label="Select Section"
136 v-model="editedItem.selectSection" 136 v-model="editedItem.selectSection"
137 item-text="name" 137 item-text="name"
138 item-value="_id" 138 item-value="_id"
139 ></v-select> 139 ></v-select>
140 </v-flex> 140 </v-flex>
141 </v-layout> 141 </v-layout>
142 </v-flex> 142 </v-flex>
143 <v-layout> 143 <v-layout>
144 <v-flex xs12 sm8 offset-sm2> 144 <v-flex xs12 sm8 offset-sm2>
145 <v-card-actions> 145 <v-card-actions>
146 <v-btn round dark @click.native="close">Cancel</v-btn> 146 <v-btn round dark @click.native="close">Cancel</v-btn>
147 <v-spacer></v-spacer> 147 <v-spacer></v-spacer>
148 <v-btn round dark @click="save">Save</v-btn> 148 <v-btn round dark @click="save">Save</v-btn>
149 </v-card-actions> 149 </v-card-actions>
150 </v-flex> 150 </v-flex>
151 </v-layout> 151 </v-layout>
152 </v-container> 152 </v-container>
153 </v-form> 153 </v-form>
154 </v-card> 154 </v-card>
155 </v-flex> 155 </v-flex>
156 </v-dialog> 156 </v-dialog>
157 157
158 <!-- ****** ADD LECTURES IN TIME-TABLE ****** --> 158 <!-- ****** ADD LECTURES IN TIME-TABLE ****** -->
159 159
160 <v-dialog v-model="dialogAddLecture" max-width="1000px"> 160 <v-dialog v-model="dialogAddLecture" max-width="1000px">
161 <v-flex xs12 sm12> 161 <v-flex xs12 sm12>
162 <v-toolbar color="grey lighten-2"> 162 <v-toolbar color="grey lighten-2">
163 <v-spacer></v-spacer> 163 <v-spacer></v-spacer>
164 <v-toolbar-title> 164 <v-toolbar-title>
165 <h3>Add Lecture</h3> 165 <h3>Add Lecture</h3>
166 </v-toolbar-title> 166 </v-toolbar-title>
167 <v-spacer></v-spacer> 167 <v-spacer></v-spacer>
168 </v-toolbar> 168 </v-toolbar>
169 <v-card flat> 169 <v-card flat>
170 <v-form ref="form" v-model="valid" lazy-validation> 170 <v-form ref="form" v-model="valid" lazy-validation>
171 <v-container fluid> 171 <v-container fluid>
172 <v-flex xs12 sm12> 172 <v-flex xs12 sm12>
173 <v-layout> 173 <v-layout>
174 <v-flex xs4 class="pt-4 subheading"> 174 <v-flex xs4 class="pt-4 subheading">
175 <label class="right">Subject Name:</label> 175 <label class="right">Subject Name:</label>
176 </v-flex> 176 </v-flex>
177 <v-flex xs5 class="ml-3"> 177 <v-flex xs5 class="ml-3">
178 <v-text-field 178 <v-text-field
179 v-model="addlectures.subjectName" 179 v-model="addlectures.subjectName"
180 :rules="subjectNameRules" 180 :rules="subjectNameRules"
181 placeholder="fill your Subject Name" 181 placeholder="fill your Subject Name"
182 type="text" 182 type="text"
183 ></v-text-field> 183 ></v-text-field>
184 </v-flex> 184 </v-flex>
185 </v-layout> 185 </v-layout>
186 </v-flex> 186 </v-flex>
187 <v-flex xs12 sm12> 187 <v-flex xs12 sm12>
188 <v-layout> 188 <v-layout>
189 <v-flex xs4 class="pt-4 subheading"> 189 <v-flex xs4 class="pt-4 subheading">
190 <label class="right">Time In:</label> 190 <label class="right">Time In:</label>
191 </v-flex> 191 </v-flex>
192 <v-flex xs5 class="ml-3"> 192 <v-flex xs5 class="ml-3">
193 <v-menu 193 <v-menu
194 ref="menuD" 194 ref="menuD"
195 :close-on-content-click="false" 195 :close-on-content-click="false"
196 v-model="menu5" 196 v-model="menu5"
197 :nudge-right="40" 197 :nudge-right="40"
198 :return-value.sync="addlectures.timeIn" 198 :return-value.sync="addlectures.timeIn"
199 lazy 199 lazy
200 transition="scale-transition" 200 transition="scale-transition"
201 offset-y 201 offset-y
202 full-width 202 full-width
203 max-width="290px" 203 max-width="290px"
204 min-width="290px" 204 min-width="290px"
205 > 205 >
206 <v-text-field 206 <v-text-field
207 slot="activator" 207 slot="activator"
208 v-model="addlectures.timeIn" 208 v-model="addlectures.timeIn"
209 label="Select your Time Out" 209 label="Select your Time Out"
210 append-icon="access_time" 210 append-icon="access_time"
211 :rules="timeInRules" 211 :rules="timeInRules"
212 ></v-text-field> 212 ></v-text-field>
213 <v-time-picker v-model="addlectures.timeIn" @change="$refs.menuD.save(addlectures.timeIn)"></v-time-picker> 213 <v-time-picker v-model="addlectures.timeIn" @change="$refs.menuD.save(addlectures.timeIn)"></v-time-picker>
214 </v-menu> 214 </v-menu>
215 </v-flex> 215 </v-flex>
216 </v-layout> 216 </v-layout>
217 </v-flex> 217 </v-flex>
218 <v-flex xs12 sm12> 218 <v-flex xs12 sm12>
219 <v-layout> 219 <v-layout>
220 <v-flex xs4 class="pt-4 subheading"> 220 <v-flex xs4 class="pt-4 subheading">
221 <label class="right">Time Out:</label> 221 <label class="right">Time Out:</label>
222 </v-flex> 222 </v-flex>
223 <v-flex xs5 class="ml-3"> 223 <v-flex xs5 class="ml-3">
224 <v-menu 224 <v-menu
225 ref="menuE" 225 ref="menuE"
226 :close-on-content-click="false" 226 :close-on-content-click="false"
227 v-model="menu6" 227 v-model="menu6"
228 :nudge-right="40" 228 :nudge-right="40"
229 :return-value.sync="addlectures.timeOut" 229 :return-value.sync="addlectures.timeOut"
230 lazy 230 lazy
231 transition="scale-transition" 231 transition="scale-transition"
232 offset-y 232 offset-y
233 full-width 233 full-width
234 max-width="290px" 234 max-width="290px"
235 min-width="290px" 235 min-width="290px"
236 > 236 >
237 <v-text-field 237 <v-text-field
238 slot="activator" 238 slot="activator"
239 :rules="timeOutRules" 239 :rules="timeOutRules"
240 v-model="addlectures.timeOut" 240 v-model="addlectures.timeOut"
241 label="Select your Time Out" 241 label="Select your Time Out"
242 append-icon="access_time" 242 append-icon="access_time"
243 ></v-text-field> 243 ></v-text-field>
244 <v-time-picker v-model="addlectures.timeOut" @change="$refs.menuE.save(addlectures.timeOut)"></v-time-picker> 244 <v-time-picker v-model="addlectures.timeOut" @change="$refs.menuE.save(addlectures.timeOut)"></v-time-picker>
245 </v-menu> 245 </v-menu>
246 </v-flex> 246 </v-flex>
247 </v-layout> 247 </v-layout>
248 </v-flex> 248 </v-flex>
249 <v-flex xs12 sm12> 249 <v-flex xs12 sm12>
250 <v-layout> 250 <v-layout>
251 <v-flex xs4 class="pt-4 subheading"> 251 <v-flex xs4 class="pt-4 subheading">
252 <label class="right">Select Teacher:</label> 252 <label class="right">Select Teacher:</label>
253 </v-flex> 253 </v-flex>
254 <v-flex xs5 class="ml-3"> 254 <v-flex xs5 class="ml-3">
255 <v-select 255 <v-select
256 :items="addTeachers" 256 :items="addTeachers"
257 v-model="addlectures.teacherId" 257 v-model="addlectures.teacherId"
258 :rules="subjectNameRules" 258 :rules="subjectNameRules"
259 item-text="name" 259 item-text="name"
260 item-value="_id" 260 item-value="_id"
261 required 261 required
262 ></v-select> 262 ></v-select>
263 </v-flex> 263 </v-flex>
264 </v-layout> 264 </v-layout>
265 </v-flex> 265 </v-flex>
266 <v-layout> 266 <v-layout>
267 <v-flex xs12 sm8 offset-sm2> 267 <v-flex xs12 sm8 offset-sm2>
268 <v-card-actions> 268 <v-card-actions>
269 <v-btn round dark @click.native="closedialogLecture">Cancel</v-btn> 269 <v-btn round dark @click.native="closedialogLecture">Cancel</v-btn>
270 <v-spacer></v-spacer> 270 <v-spacer></v-spacer>
271 <v-btn round dark @click="AddLecture">Save</v-btn> 271 <v-btn round dark @click="AddLecture">Save</v-btn>
272 </v-card-actions> 272 </v-card-actions>
273 </v-flex> 273 </v-flex>
274 </v-layout> 274 </v-layout>
275 </v-container> 275 </v-container>
276 </v-form> 276 </v-form>
277 </v-card> 277 </v-card>
278 </v-flex> 278 </v-flex>
279 </v-dialog> 279 </v-dialog>
280 280
281 <!-- ****** EDIT PARTICULAR LECTURES TIME-TABLE ****** --> 281 <!-- ****** EDIT PARTICULAR LECTURES TIME-TABLE ****** -->
282 282
283 <v-dialog v-model="dialogUpdateLectures" max-width="1000px"> 283 <v-dialog v-model="dialogUpdateLectures" max-width="1000px">
284 <v-flex xs12 sm12 class> 284 <v-flex xs12 sm12 class>
285 <v-toolbar color="grey lighten-2"> 285 <v-toolbar color="grey lighten-2">
286 <v-spacer></v-spacer> 286 <v-spacer></v-spacer>
287 <v-toolbar-title>Edit Lecture</v-toolbar-title> 287 <v-toolbar-title>Edit Lecture</v-toolbar-title>
288 <v-spacer></v-spacer> 288 <v-spacer></v-spacer>
289 </v-toolbar> 289 </v-toolbar>
290 <v-card flat> 290 <v-card flat>
291 <v-form ref="form"> 291 <v-form ref="form">
292 <v-container fluid> 292 <v-container fluid>
293 <v-flex xs12 sm12> 293 <v-flex xs12 sm12>
294 <v-layout> 294 <v-layout>
295 <v-flex xs4 class="pt-4 subheading"> 295 <v-flex xs4 class="pt-4 subheading">
296 <label class="right">Subject Name:</label> 296 <label class="right">Subject Name:</label>
297 </v-flex> 297 </v-flex>
298 <v-flex xs5 class="ml-3"> 298 <v-flex xs5 class="ml-3">
299 <v-text-field 299 <v-text-field
300 v-model="updateLectures.subjectName" 300 v-model="updateLectures.subjectName"
301 placeholder="fill your Subject Name" 301 placeholder="fill your Subject Name"
302 type="text" 302 type="text"
303 ></v-text-field> 303 ></v-text-field>
304 </v-flex> 304 </v-flex>
305 </v-layout> 305 </v-layout>
306 </v-flex> 306 </v-flex>
307 <v-flex xs12 sm12> 307 <v-flex xs12 sm12>
308 <v-layout> 308 <v-layout>
309 <v-flex xs4 class="pt-4 subheading"> 309 <v-flex xs4 class="pt-4 subheading">
310 <label class="right">Time In:</label> 310 <label class="right">Time In:</label>
311 </v-flex> 311 </v-flex>
312 <v-flex xs5 class="ml-3"> 312 <v-flex xs5 class="ml-3">
313 <v-menu 313 <v-menu
314 ref="menuC" 314 ref="menuC"
315 :close-on-content-click="false" 315 :close-on-content-click="false"
316 v-model="menu4" 316 v-model="menu4"
317 :nudge-right="40" 317 :nudge-right="40"
318 :return-value.sync="updateLectures.timeIn" 318 :return-value.sync="updateLectures.timeIn"
319 lazy 319 lazy
320 transition="scale-transition" 320 transition="scale-transition"
321 offset-y 321 offset-y
322 full-width 322 full-width
323 max-width="290px" 323 max-width="290px"
324 min-width="290px" 324 min-width="290px"
325 > 325 >
326 <v-text-field 326 <v-text-field
327 slot="activator" 327 slot="activator"
328 v-model="updateLectures.timeIn" 328 v-model="updateLectures.timeIn"
329 placeholder="Select your Time In" 329 placeholder="Select your Time In"
330 append-icon="access_time" 330 append-icon="access_time"
331 ></v-text-field> 331 ></v-text-field>
332 <v-time-picker v-model="updateLectures.timeIn" @change="$refs.menuC.save(updateLectures.timeIn)"></v-time-picker> 332 <v-time-picker v-model="updateLectures.timeIn" @change="$refs.menuC.save(updateLectures.timeIn)"></v-time-picker>
333 </v-menu> 333 </v-menu>
334 </v-flex> 334 </v-flex>
335 </v-layout> 335 </v-layout>
336 </v-flex> 336 </v-flex>
337 <v-flex xs12 sm12> 337 <v-flex xs12 sm12>
338 <v-layout> 338 <v-layout>
339 <v-flex xs4 class="pt-4 subheading"> 339 <v-flex xs4 class="pt-4 subheading">
340 <label class="right">Time Out:</label> 340 <label class="right">Time Out:</label>
341 </v-flex> 341 </v-flex>
342 <v-flex xs5 class="ml-3"> 342 <v-flex xs5 class="ml-3">
343 <v-menu 343 <v-menu
344 ref="menuB" 344 ref="menuB"
345 :close-on-content-click="false" 345 :close-on-content-click="false"
346 v-model="menu3" 346 v-model="menu3"
347 :nudge-right="40" 347 :nudge-right="40"
348 :return-value.sync="updateLectures.timeOut" 348 :return-value.sync="updateLectures.timeOut"
349 lazy 349 lazy
350 transition="scale-transition" 350 transition="scale-transition"
351 offset-y 351 offset-y
352 full-width 352 full-width
353 max-width="290px" 353 max-width="290px"
354 min-width="290px" 354 min-width="290px"
355 > 355 >
356 <v-text-field 356 <v-text-field
357 slot="activator" 357 slot="activator"
358 v-model="updateLectures.timeOut" 358 v-model="updateLectures.timeOut"
359 placeholder="Select your Time Out" 359 placeholder="Select your Time Out"
360 append-icon="access_time" 360 append-icon="access_time"
361 ></v-text-field> 361 ></v-text-field>
362 <v-time-picker v-model="updateLectures.timeOut" @change="$refs.menuB.save(updateLectures.timeOut)"></v-time-picker> 362 <v-time-picker v-model="updateLectures.timeOut" @change="$refs.menuB.save(updateLectures.timeOut)"></v-time-picker>
363 </v-menu> 363 </v-menu>
364 </v-flex> 364 </v-flex>
365 </v-layout> 365 </v-layout>
366 </v-flex> 366 </v-flex>
367 <v-flex xs12 sm12> 367 <v-flex xs12 sm12>
368 <v-layout> 368 <v-layout>
369 <v-flex xs4 class="pt-4 subheading"> 369 <v-flex xs4 class="pt-4 subheading">
370 <label class="right">Select Teacher:</label> 370 <label class="right">Select Teacher:</label>
371 </v-flex> 371 </v-flex>
372 <v-flex xs5 class="ml-3"> 372 <v-flex xs5 class="ml-3">
373 <v-select 373 <v-select
374 :items="addTeachers" 374 :items="addTeachers"
375 label="Select Teacher" 375 label="Select Teacher"
376 v-model="updateLectures.teacherId" 376 v-model="updateLectures.teacherId"
377 item-text="name" 377 item-text="name"
378 item-value="_id" 378 item-value="_id"
379 required 379 required
380 ></v-select> 380 ></v-select>
381 </v-flex> 381 </v-flex>
382 </v-layout> 382 </v-layout>
383 </v-flex> 383 </v-flex>
384 <v-layout> 384 <v-layout>
385 <v-flex xs12 sm8 offset-sm2> 385 <v-flex xs12 sm8 offset-sm2>
386 <v-card-actions> 386 <v-card-actions>
387 <v-btn round dark @click.native="closeUpdateLectures">Cancel</v-btn> 387 <v-btn round dark @click.native="closeUpdateLectures">Cancel</v-btn>
388 <v-spacer></v-spacer> 388 <v-spacer></v-spacer>
389 <v-btn round dark @click="updateParticularTable(updateLectures.timeIn,updateLectures.timeOut)">Save</v-btn> 389 <v-btn round dark @click="updateParticularTable(updateLectures.timeIn,updateLectures.timeOut)">Save</v-btn>
390 </v-card-actions> 390 </v-card-actions>
391 </v-flex> 391 </v-flex>
392 </v-layout> 392 </v-layout>
393 </v-container> 393 </v-container>
394 </v-form> 394 </v-form>
395 </v-card> 395 </v-card>
396 </v-flex> 396 </v-flex>
397 </v-dialog> 397 </v-dialog>
398 <v-snackbar 398 <v-snackbar
399 :timeout="timeout" 399 :timeout="timeout"
400 :top="y === 'top'" 400 :top="y === 'top'"
401 :right="x === 'right'" 401 :right="x === 'right'"
402 :vertical="mode === 'vertical'" 402 :vertical="mode === 'vertical'"
403 v-model="snackbar" 403 v-model="snackbar"
404 color="success" 404 color="success"
405 >{{ text }}</v-snackbar> 405 >{{ text }}</v-snackbar>
406 406
407 <!-- ****** EXISTING-USERS TIME-TABLE ****** --> 407 <!-- ****** EXISTING-USERS TIME-TABLE ****** -->
408 408
409 <v-card flat> 409 <v-card flat>
410 <v-card-actions> 410 <v-card-actions>
411 <v-layout> 411 <v-layout>
412 <label class = "right mt-4 ml-5 ">Select Class:</label> 412 <label class = "right mt-4 ml-5 ">Select Class:</label>
413 <v-select 413 <v-select
414 :items="addclass" 414 :items="addclass"
415 label="Select Class" 415 label="Select Class"
416 v-model="selectTimeTable.select" 416 v-model="selectTimeTable.select"
417 item-text="classNum" 417 item-text="classNum"
418 item-value="_id" 418 item-value="_id"
419 name="Select Class" 419 name="Select Class"
420 @change="getSections(selectTimeTable.select)" 420 @change="getSections(selectTimeTable.select)"
421 class="px-4" 421 class="px-4"
422 required 422 required
423 ></v-select> 423 ></v-select>
424 <label class="right mt-4">Select Section:</label> 424 <label class="right mt-4">Select Section:</label>
425 <v-select 425 <v-select
426 :items="addSection" 426 :items="addSection"
427 label="Select Section" 427 label="Select Section"
428 v-model="selectTimeTable.selectSection" 428 v-model="selectTimeTable.selectSection"
429 item-text="name" 429 item-text="name"
430 item-value="_id" 430 item-value="_id"
431 name="Select Section" 431 name="Select Section"
432 class="pl-3" 432 class="pl-3"
433 required 433 required
434 ></v-select> 434 ></v-select>
435 </v-layout> 435 </v-layout>
436 <v-spacer></v-spacer> 436 <v-spacer></v-spacer>
437 <v-btn @click="findTimeTable()" round dark :loading="loading" class= "left">Find</v-btn> 437 <v-btn @click="findTimeTable()" round dark :loading="loading" class= "left">Find</v-btn>
438 </v-card-actions> 438 </v-card-actions>
439 </v-card> 439 </v-card>
440 <v-flex xs12> 440 <v-flex xs12>
441 <v-data-table 441 <v-data-table
442 :headers="headers" 442 :headers="headers"
443 :items="desserts" 443 :items="desserts"
444 :pagination.sync="pagination" 444 :pagination.sync="pagination"
445 :search="search" 445 :search="search"
446 item-key="_id" 446 item-key="_id"
447 > 447 >
448 <template slot="items" slot-scope="props"> 448 <template slot="items" slot-scope="props">
449 <tr 449 <tr
450 style="cursor: pointer;" 450 style="cursor: pointer;"
451 @click="getTimeTable(props.item), props.expanded = !props.expanded" 451 @click="getTimeTable(props.item), props.expanded = !props.expanded"
452 > 452 >
453 <td class="text-xs-center">{{ props.index }}</td> 453 <td class="text-xs-center">{{ props.index }}</td>
454 <td class="text-xs-center">{{ props.item.classData.classNum}}</td> 454 <td class="text-xs-center">{{ props.item.classData.classNum}}</td>
455 <td class="text-xs-center">{{ props.item.sectionData.name }}</td> 455 <td class="text-xs-center">{{ props.item.sectionData.name }}</td>
456 <td class="text-xs-center"> 456 <td class="text-xs-center">
457 <span> 457 <span>
458 <img 458 <img
459 style="cursor:pointer; width:20px; height:18px; " 459 style="cursor:pointer; width:20px; height:18px; "
460 class="mr-5" 460 class="mr-5"
461 @click="editItem(props.item)" 461 @click="editItem(props.item)"
462 src="/static/icon/edit1.png" 462 src="/static/icon/edit1.png"
463 > 463 >
464 <img 464 <img
465 style="cursor:pointer; height:20px; " 465 style="cursor:pointer; height:20px; "
466 class="mr-5" 466 class="mr-5"
467 @click="deleteItem(props.item)" 467 @click="deleteItem(props.item)"
468 src="/static/icon/delete1.png" 468 src="/static/icon/delete1.png"
469 > 469 >
470 </span> 470 </span>
471 </td> 471 </td>
472 </tr> 472 </tr>
473 </template> 473 </template>
474 <template slot="expand" slot-scope="props"> 474 <template slot="expand" slot-scope="props">
475 <v-data-table 475 <v-data-table
476 :items="timeTableList.schedule" 476 :items="timeTableList.schedule"
477 hide-actions 477 hide-actions
478 item-key="title" 478 item-key="title"
479 style="width: auto;" 479 style="width: auto;"
480 > 480 >
481 <template slot="items" slot-scope="props"> 481 <template slot="items" slot-scope="props">
482 <tr> 482 <tr>
483 <td class="text-xs-left subheading"> 483 <td class="text-xs-left subheading">
484 <b>{{ props.item.day }}</b> 484 <b>{{ props.item.day }}</b>
485 </td> 485 </td>
486 <td> 486 <td>
487 <b>Subject</b> 487 <b>Subject</b>
488 <br> 488 <br>
489 <b>Time In</b> 489 <b>Time In</b>
490 <br> 490 <br>
491 <b>Time Out</b> 491 <b>Time Out</b>
492 </td> 492 </td>
493 <td v-for="list in props.item.lectures"> 493 <td v-for="list in props.item.lectures">
494 <b>{{ list.subjectName }}</b> 494 <b>{{ list.subjectName }}</b>
495 <img 495 <img
496 style="cursor:pointer; width:20px; height:18px; " 496 style="cursor:pointer; width:20px; height:18px; "
497 class="mr-2 ml-2" 497 class="mr-2 ml-2"
498 src="/static/icon/edit1.png" 498 src="/static/icon/edit1.png"
499 @click="updateTimeTable(list, timeTableList)" 499 @click="updateTimeTable(list, timeTableList)"
500 > 500 >
501 <img 501 <img
502 style="cursor:pointer; height:20px; " 502 style="cursor:pointer; height:20px; "
503 src="/static/icon/delete1.png" 503 src="/static/icon/delete1.png"
504 @click="deleteTimeTable(list, timeTableList)" 504 @click="deleteTimeTable(list, timeTableList)"
505 > 505 >
506 <br> 506 <br>
507 {{list.timeIn.slice(0,16)}} 507 {{list.timeIn.slice(0,16)}}
508 <br> 508 <br>
509 {{list.timeOut.slice(0,16)}} 509 {{list.timeOut.slice(0,16)}}
510 </td> 510 </td>
511 <td> 511 <td>
512 <v-icon 512 <v-icon
513 color="black" 513 color="black"
514 @click="addLecture(props.item._id, timeTableList._id)" 514 @click="addLecture(props.item._id, timeTableList._id)"
515 >add_circle_outline</v-icon> 515 >add_circle_outline</v-icon>
516 </td> 516 </td>
517 </tr> 517 </tr>
518 </template> 518 </template>
519 </v-data-table> 519 </v-data-table>
520 </template> 520 </template>
521 <v-alert 521 <v-alert
522 slot="no-results" 522 slot="no-results"
523 :value="true" 523 :value="true"
524 color="error" 524 color="error"
525 icon="warning" 525 icon="warning"
526 >Your search for "{{ search }}" found no results.</v-alert> 526 >Your search for "{{ search }}" found no results.</v-alert>
527 </v-data-table> 527 </v-data-table>
528 <br> 528 <br>
529 <br> 529 <br>
530 </v-flex> 530 </v-flex>
531 </v-tab-item> 531 </v-tab-item>
532 532
533 <!-- ****** ADD MULTIPLE TIME-TABLE ****** --> 533 <!-- ****** ADD MULTIPLE TIME-TABLE ****** -->
534 534
535 <v-tab-item> 535 <v-tab-item>
536 <v-container> 536 <v-container>
537 <v-snackbar 537 <v-snackbar
538 :timeout="timeout" 538 :timeout="timeout"
539 :top="y === 'top'" 539 :top="y === 'top'"
540 :right="x === 'right'" 540 :right="x === 'right'"
541 :vertical="mode === 'vertical'" 541 :vertical="mode === 'vertical'"
542 v-model="snackbar" 542 v-model="snackbar"
543 color="success" 543 color="success"
544 >{{ text }}</v-snackbar> 544 >{{ text }}</v-snackbar>
545 <v-flex xs12 sm12 class="my-4"> 545 <v-flex xs12 sm12 class="my-4">
546 <v-card flat> 546 <v-card flat>
547 <v-form ref="form" v-model="valid" lazy-validation> 547 <v-form ref="form" v-model="valid" lazy-validation>
548 <v-container fluid> 548 <v-container fluid>
549 <v-layout> 549 <v-layout>
550 <v-flex 550 <v-flex
551 xs12 551 xs12
552 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" 552 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
553 > 553 >
554 <v-avatar size="100px"> 554 <v-avatar size="100px">
555 <img src="/static/icon/user.png" v-if="!imageUrl"> 555 <img src="/static/icon/user.png" v-if="!imageUrl">
556 </v-avatar> 556 </v-avatar>
557 <input 557 <input
558 type="file" 558 type="file"
559 style="display: none" 559 style="display: none"
560 ref="image" 560 ref="image"
561 accept="image/*" 561 accept="image/*"
562 @change="onFilePicked" 562 @change="onFilePicked"
563 > 563 >
564 <img 564 <img
565 :src="imageData.imageUrl" 565 :src="imageData.imageUrl"
566 height="150" 566 height="150"
567 v-if="imageUrl" 567 v-if="imageUrl"
568 style="border-radius:50%; width:200px" 568 style="border-radius:50%; width:200px"
569 > 569 >
570 </v-flex> 570 </v-flex>
571 </v-layout> 571 </v-layout>
572 <v-flex xs12> 572 <v-flex xs12>
573 <v-layout> 573 <v-layout>
574 <v-flex xs4 class="pt-4 subheading"> 574 <v-flex xs4 class="pt-4 subheading">
575 <label class="right">Select Class:</label> 575 <label class="right">Select Class:</label>
576 </v-flex> 576 </v-flex>
577 <v-flex xs4 class="ml-3"> 577 <v-flex xs4 class="ml-3">
578 <v-select 578 <v-select
579 :items="addclass" 579 :items="addclass"
580 label="Select Class" 580 label="Select Class"
581 v-model="timeTable.select" 581 v-model="timeTable.select"
582 item-text="classNum" 582 item-text="classNum"
583 item-value="_id" 583 item-value="_id"
584 @change="getSections(timeTable.select)" 584 @change="getSections(timeTable.select)"
585 required 585 required
586 ></v-select> 586 ></v-select>
587 </v-flex> 587 </v-flex>
588 </v-layout> 588 </v-layout>
589 </v-flex> 589 </v-flex>
590 <v-flex xs12> 590 <v-flex xs12>
591 <v-layout> 591 <v-layout>
592 <v-flex xs4 class="pt-4 subheading"> 592 <v-flex xs4 class="pt-4 subheading">
593 <label class="right">Select Section:</label> 593 <label class="right">Select Section:</label>
594 </v-flex> 594 </v-flex>
595 <v-flex xs4 class="ml-3"> 595 <v-flex xs4 class="ml-3">
596 <v-select 596 <v-select
597 :items="addSection" 597 :items="addSection"
598 label="Select Section" 598 label="Select Section"
599 v-model="timeTable.selectSection" 599 v-model="timeTable.selectSection"
600 item-text="name" 600 item-text="name"
601 item-value="_id" 601 item-value="_id"
602 required 602 required
603 ></v-select> 603 ></v-select>
604 </v-flex> 604 </v-flex>
605 </v-layout> 605 </v-layout>
606 </v-flex> 606 </v-flex>
607 <v-flex xs12> 607 <v-flex xs12>
608 <v-layout> 608 <v-layout>
609 <v-flex xs4 class="pt-4 subheading"> 609 <v-flex xs4 class="pt-4 subheading">
610 <label class="right">Select Teacher:</label> 610 <label class="right">Select Teacher:</label>
611 </v-flex> 611 </v-flex>
612 <v-flex xs4 class="ml-3"> 612 <v-flex xs4 class="ml-3">
613 <v-select 613 <v-select
614 :items="addTeachers" 614 :items="addTeachers"
615 label="Select Teacher" 615 label="Select Teacher"
616 v-model="timeTable.selectTeacher" 616 v-model="timeTable.selectTeacher"
617 item-text="name" 617 item-text="name"
618 item-value="_id" 618 item-value="_id"
619 required 619 required
620 ></v-select> 620 ></v-select>
621 </v-flex> 621 </v-flex>
622 </v-layout> 622 </v-layout>
623 </v-flex> 623 </v-flex>
624 <v-flex xs12> 624 <v-flex xs12>
625 <v-layout> 625 <v-layout>
626 <v-flex xs4 class="pt-4 subheading"> 626 <v-flex xs4 class="pt-4 subheading">
627 <label class="right">Select Day:</label> 627 <label class="right">Select Day:</label>
628 </v-flex> 628 </v-flex>
629 <v-flex xs4 class="ml-3"> 629 <v-flex xs4 class="ml-3">
630 <v-select 630 <v-select
631 :items="addOneDay" 631 :items="addOneDay"
632 label="Select Day" 632 label="Select Day"
633 v-model="timeTable.selectDay" 633 v-model="timeTable.selectDay"
634 item-text="name" 634 item-text="name"
635 item-value="_id" 635 item-value="_id"
636 required 636 required
637 ></v-select> 637 ></v-select>
638 </v-flex> 638 </v-flex>
639 </v-layout> 639 </v-layout>
640 </v-flex> 640 </v-flex>
641 <v-flex xs12> 641 <v-flex xs12>
642 <v-layout> 642 <v-layout>
643 <v-flex xs4 class="pt-4 subheading"> 643 <v-flex xs4 class="pt-4 subheading">
644 <label class="right">Subject Name:</label> 644 <label class="right">Subject Name:</label>
645 </v-flex> 645 </v-flex>
646 <v-flex xs4 class="ml-3"> 646 <v-flex xs4 class="ml-3">
647 <v-text-field 647 <v-text-field
648 placeholder="fill your Subject Name" 648 placeholder="fill your Subject Name"
649 :rules="subjectNameRules" 649 :rules="subjectNameRules"
650 v-model="timeTable.subjectName" 650 v-model="timeTable.subjectName"
651 type="text" 651 type="text"
652 required 652 required
653 ></v-text-field> 653 ></v-text-field>
654 </v-flex> 654 </v-flex>
655 </v-layout> 655 </v-layout>
656 </v-flex> 656 </v-flex>
657 <v-flex xs12> 657 <v-flex xs12>
658 <v-layout> 658 <v-layout>
659 <v-flex xs4 class="pt-4 subheading"> 659 <v-flex xs4 class="pt-4 subheading">
660 <label class="right">Time In:</label> 660 <label class="right">Time In:</label>
661 </v-flex> 661 </v-flex>
662 <v-flex xs4 class="ml-3"> 662 <v-flex xs4 class="ml-3">
663 <v-menu 663 <v-menu
664 ref="menuA" 664 ref="menuA"
665 :close-on-content-click="false" 665 :close-on-content-click="false"
666 v-model="menu2" 666 v-model="menu2"
667 :nudge-right="40" 667 :nudge-right="40"
668 :return-value.sync="timeTable.timeIn" 668 :return-value.sync="timeTable.timeIn"
669 lazy 669 lazy
670 transition="scale-transition" 670 transition="scale-transition"
671 offset-y 671 offset-y
672 full-width 672 full-width
673 max-width="290px" 673 max-width="290px"
674 min-width="290px" 674 min-width="290px"
675 > 675 >
676 <v-text-field 676 <v-text-field
677 slot="activator" 677 slot="activator"
678 v-model="timeTable.timeIn" 678 v-model="timeTable.timeIn"
679 label="Select your timeIn" 679 label="Select your timeIn"
680 append-icon="access_time" 680 append-icon="access_time"
681 ></v-text-field> 681 ></v-text-field>
682 <v-time-picker v-model="timeTable.timeIn" @change="$refs.menuA.save(timeTable.timeIn)"></v-time-picker> 682 <v-time-picker v-model="timeTable.timeIn" @change="$refs.menuA.save(timeTable.timeIn)"></v-time-picker>
683 </v-menu> 683 </v-menu>
684 </v-flex> 684 </v-flex>
685 </v-layout> 685 </v-layout>
686 </v-flex> 686 </v-flex>
687 <v-flex xs12> 687 <v-flex xs12>
688 <v-layout> 688 <v-layout>
689 <v-flex xs4 class="pt-4 subheading"> 689 <v-flex xs4 class="pt-4 subheading">
690 <label class="right">Time Out:</label> 690 <label class="right">Time Out:</label>
691 </v-flex> 691 </v-flex>
692 <v-flex xs4 class="ml-3"> 692 <v-flex xs4 class="ml-3">
693 <v-menu 693 <v-menu
694 ref="menu" 694 ref="menu"
695 :close-on-content-click="false" 695 :close-on-content-click="false"
696 v-model="menu1" 696 v-model="menu1"
697 :nudge-right="40" 697 :nudge-right="40"
698 :return-value.sync="timeTable.timeOut" 698 :return-value.sync="timeTable.timeOut"
699 lazy 699 lazy
700 transition="scale-transition" 700 transition="scale-transition"
701 offset-y 701 offset-y
702 full-width 702 full-width
703 max-width="290px" 703 max-width="290px"
704 min-width="290px" 704 min-width="290px"
705 > 705 >
706 <v-text-field 706 <v-text-field
707 slot="activator" 707 slot="activator"
708 v-model="timeTable.timeOut" 708 v-model="timeTable.timeOut"
709 label="Select your Time Out" 709 label="Select your Time Out"
710 append-icon="access_time" 710 append-icon="access_time"
711 ></v-text-field> 711 ></v-text-field>
712 <v-time-picker v-model="timeTable.timeOut" @change="$refs.menu.save(timeTable.timeOut)"></v-time-picker> 712 <v-time-picker v-model="timeTable.timeOut" @change="$refs.menu.save(timeTable.timeOut)"></v-time-picker>
713 </v-menu> 713 </v-menu>
714 </v-flex> 714 </v-flex>
715 </v-layout> 715 </v-layout>
716 </v-flex> 716 </v-flex>
717 <v-layout> 717 <v-layout>
718 <v-flex xs12 sm6 offset-sm3> 718 <v-flex xs12 sm6 offset-sm3>
719 <v-card-actions> 719 <v-card-actions>
720 <v-btn @click="clear" round dark>clear</v-btn> 720 <v-btn @click="clear" round dark>clear</v-btn>
721 <v-spacer></v-spacer> 721 <v-spacer></v-spacer>
722 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 722 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
723 </v-card-actions> 723 </v-card-actions>
724 </v-flex> 724 </v-flex>
725 </v-layout> 725 </v-layout>
726 </v-container> 726 </v-container>
727 </v-form> 727 </v-form>
728 </v-card> 728 </v-card>
729 </v-flex> 729 </v-flex>
730 </v-container> 730 </v-container>
731 </v-tab-item> 731 </v-tab-item>
732 </v-tabs> 732 </v-tabs>
733 <div class="loader" v-if="showLoader"> 733 <div class="loader" v-if="showLoader">
734 <v-progress-circular indeterminate color="white"></v-progress-circular> 734 <v-progress-circular indeterminate color="white"></v-progress-circular>
735 </div> 735 </div>
736 </v-app> 736 </v-app>
737 </template> 737 </template>
738 <script> 738 <script>
739 import http from "@/Services/http.js"; 739 import http from "@/Services/http.js";
740 import Util from "@/util"; 740 import Util from "@/util";
741 741
742 export default { 742 export default {
743 data: () => ({ 743 data: () => ({
744 y: "top", 744 y: "top",
745 x: "right", 745 x: "right",
746 mode: "", 746 mode: "",
747 timeout: 3000, 747 timeout: 3000,
748 text: "", 748 text: "",
749 search: "", 749 search: "",
750 snackbar: false, 750 snackbar: false,
751 loading: false, 751 loading: false,
752 showLoader: false, 752 showLoader: false,
753 dialog: false, 753 dialog: false,
754 dialogAddLecture: false, 754 dialogAddLecture: false,
755 dialogUpdateLectures: false, 755 dialogUpdateLectures: false,
756 dialog1: false, 756 dialog1: false,
757 valid: true, 757 valid: true,
758 // validLeacture:true, 758 // validLeacture:true,
759 isActive: true, 759 isActive: true,
760 newActive: false, 760 newActive: false,
761 addclass: [], 761 addclass: [],
762 addSection: [], 762 addSection: [],
763 addTeachers: [], 763 addTeachers: [],
764 gender: ["Male", "Female"], 764 gender: ["Male", "Female"],
765 AddUsercredentials: {}, 765 AddUsercredentials: {},
766 pagination: { 766 pagination: {
767 rowsPerPage: 15 767 rowsPerPage: 15
768 }, 768 },
769 imageData: {}, 769 imageData: {},
770 imageName: "", 770 imageName: "",
771 imageUrl: "", 771 imageUrl: "",
772 imageFile: "", 772 imageFile: "",
773 timeInRules: [v => !!v || "Time In is required"], 773 timeInRules: [v => !!v || "Time In is required"],
774 timeOutRules: [v => !!v || "Time Out is required"], 774 timeOutRules: [v => !!v || "Time Out is required"],
775 lectureRules: [v => !!v || "Lecture No is required"], 775 lectureRules: [v => !!v || "Lecture No is required"],
776 subjectNameRules: [v => !!v || "Subject Name is required"], 776 subjectNameRules: [v => !!v || "Subject Name is required"],
777 headers: [ 777 headers: [
778 { 778 {
779 text: "No", 779 text: "No",
780 align: "center", 780 align: "center",
781 sortable: false, 781 sortable: false,
782 value: "No" 782 value: "No"
783 }, 783 },
784 { 784 {
785 text: "Class Name", 785 text: "Class Name",
786 value: "classData.classNum", 786 value: "classData.classNum",
787 sortable: false, 787 sortable: false,
788 align: "center" 788 align: "center"
789 }, 789 },
790 { 790 {
791 text: "Section Name", 791 text: "Section Name",
792 value: "sectionData.name", 792 value: "sectionData.name",
793 sortable: false, 793 sortable: false,
794 align: "center" 794 align: "center"
795 }, 795 },
796 { text: "Action", value: "", sortable: false, align: "center" } 796 { text: "Action", value: "", sortable: false, align: "center" }
797 ], 797 ],
798 daysHeaders: [ 798 daysHeaders: [
799 { text: "Day", value: "dayday", sortable: false, align: "center" }, 799 { text: "Day", value: "dayday", sortable: false, align: "center" },
800 { 800 {
801 text: "Subject Name", 801 text: "Subject Name",
802 value: "subjectName", 802 value: "subjectName",
803 sortable: false, 803 sortable: false,
804 align: "center" 804 align: "center"
805 }, 805 },
806 { text: "Time In", value: "timeIn", sortable: false, align: "center" }, 806 { text: "Time In", value: "timeIn", sortable: false, align: "center" },
807 { text: "Time Out", value: "timeOut", sortable: false, align: "center" } 807 { text: "Time Out", value: "timeOut", sortable: false, align: "center" }
808 ], 808 ],
809 addOneDay: [ 809 addOneDay: [
810 "Monday", 810 "Monday",
811 "Tuesday", 811 "Tuesday",
812 "Wednesday", 812 "Wednesday",
813 "Thursday", 813 "Thursday",
814 "Friday", 814 "Friday",
815 "Saturday", 815 "Saturday",
816 "Sunday" 816 "Sunday"
817 ], 817 ],
818 desserts: [], 818 desserts: [],
819 timeTableList: [], 819 timeTableList: [],
820 editedIndex: -1, 820 editedIndex: -1,
821 selectTimeTable: { 821 selectTimeTable: {
822 select: "", 822 select: "",
823 selectSection: "", 823 selectSection: "",
824 }, 824 },
825 timeTable: { 825 timeTable: {
826 select: "", 826 select: "",
827 selectSection: "", 827 selectSection: "",
828 selectDay: "", 828 selectDay: "",
829 timeIn: null, 829 timeIn: null,
830 timeOut: null, 830 timeOut: null,
831 subjectName: "", 831 subjectName: "",
832 selectTeacher: "" 832 selectTeacher: ""
833 }, 833 },
834 editedItem: { 834 editedItem: {
835 classNum: "", 835 classNum: "",
836 selectSection: "" 836 selectSection: ""
837 }, 837 },
838 addlectures: { 838 addlectures: {
839 timeIn: null, 839 timeIn: null,
840 timeOut: null, 840 timeOut: null,
841 subjectName: "", 841 subjectName: "",
842 teacherId: "", 842 teacherId: "",
843 scheduleId: "", 843 scheduleId: "",
844 timeTableId: "" 844 timeTableId: ""
845 }, 845 },
846 updateLectures: { 846 updateLectures: {
847 timeIn: null, 847 timeIn: null,
848 timeOut: null, 848 timeOut: null,
849 subjectName: "", 849 subjectName: "",
850 teacherId: "", 850 teacherId: "",
851 }, 851 },
852 updateLecturesId:{ 852 updateLecturesId:{
853 lectureId: "", 853 lectureId: "",
854 scheduleId: "" 854 scheduleId: ""
855 }, 855 },
856 menu1: false, 856 menu1: false,
857 menu2: false, 857 menu2: false,
858 menu3: false, 858 menu3: false,
859 menu4: false, 859 menu4: false,
860 menu5: false, 860 menu5: false,
861 menu6: false, 861 menu6: false,
862 862
863 items: [ 863 items: [
864 { 864 {
865 href: "/changepassword", 865 href: "/changepassword",
866 title: "Change Password", 866 title: "Change Password",
867 click: e => { 867 click: e => {
868 console.log(e); 868 console.log(e);
869 } 869 }
870 }, 870 },
871 { 871 {
872 href: "#", 872 href: "#",
873 title: "Logout", 873 title: "Logout",
874 click: e => { 874 click: e => {
875 window.getApp.$emit("APP_LOGOUT"); 875 window.getApp.$emit("APP_LOGOUT");
876 } 876 }
877 } 877 }
878 ] 878 ]
879 }), 879 }),
880 methods: { 880 methods: {
881 findTimeTable(){ 881 findTimeTable(){
882 http().get( 882 http().get(
883 "/getParticularClassTimeTable", 883 "/getParticularClassTimeTable",
884 { params: { sectionId: this.selectTimeTable.selectSection, classId: this.selectTimeTable.select} }, 884 { params: { sectionId: this.selectTimeTable.selectSection, classId: this.selectTimeTable.select} },
885 ) 885 )
886 .then(response => { 886 .then(response => {
887 this.desserts = response.data.data; 887 this.desserts = response.data.data;
888 // console.log("findTimeTable=====>", this.desserts); 888 // console.log("findTimeTable=====>", this.desserts);
889 }) 889 })
890 .catch(error => { 890 .catch(error => {
891 console.log("err====>", error); 891 console.log("err====>", error);
892 if ((this.snackbar = true)) { 892 if ((this.snackbar = true)) {
893 this.text = error.response.data.message; 893 this.text = error.response.data.message;
894 this.text = error.response.data.statusText; 894 this.text = error.response.data.statusText;
895 } 895 }
896 }); 896 });
897 }, 897 },
898 getSections(_id) { 898 getSections(_id) {
899 var token = this.$store.state.token; 899 var token = this.$store.state.token;
900 http() 900 http()
901 .get( 901 .get(
902 "/getSectionsList", 902 "/getSectionsList",
903 { params: { classId: _id } }, 903 { params: { classId: _id } },
904 { 904 {
905 headers: { Authorization: "Bearer " + token } 905 headers: { Authorization: "Bearer " + token }
906 } 906 }
907 ) 907 )
908 .then(response => { 908 .then(response => {
909 this.addSection = response.data.data; 909 this.addSection = response.data.data;
910 // console.log("getSectionsList=====>", this.addSection); 910 // console.log("getSectionsList=====>", this.addSection);
911 }) 911 })
912 .catch(err => { 912 .catch(err => {
913 // console.log("err====>", err); 913 // console.log("err====>", err);
914 }); 914 });
915 }, 915 },
916 getTimeTable(item) { 916 getTimeTable(item) {
917 this.showLoader = true; 917 this.showLoader = true;
918 var token = this.$store.state.token; 918 var token = this.$store.state.token;
919 http() 919 http()
920 .get( 920 .get(
921 "/getParticularTimeTable", 921 "/getParticularTimeTable",
922 { params: { timeTableId: item._id } }, 922 { params: { timeTableId: item._id } },
923 { 923 {
924 headers: { Authorization: "Bearer " + token } 924 headers: { Authorization: "Bearer " + token }
925 } 925 }
926 ) 926 )
927 .then(response => { 927 .then(response => {
928 this.timeTableList = response.data.data; 928 this.timeTableList = response.data.data;
929 this.showLoader = false; 929 this.showLoader = false;
930 // console.log("getParticularTimeTable=====>", this.timeTableList); 930 // console.log("getParticularTimeTable=====>", this.timeTableList);
931 }) 931 })
932 .catch(err => { 932 .catch(err => {
933 this.showLoader = false; 933 this.showLoader = false;
934 // console.log("err====>", err); 934 // console.log("err====>", err);
935 }); 935 });
936 }, 936 },
937 pickFile() { 937 pickFile() {
938 this.$refs.image.click(); 938 this.$refs.image.click();
939 }, 939 },
940 940
941 onFilePicked(e) { 941 onFilePicked(e) {
942 // console.log(e) 942 // console.log(e)
943 const files = e.target.files; 943 const files = e.target.files;
944 this.imageData.upload = e.target.files[0]; 944 this.imageData.upload = e.target.files[0];
945 if (files[0] !== undefined) { 945 if (files[0] !== undefined) {
946 this.imageName = files[0].name; 946 this.imageName = files[0].name;
947 if (this.imageName.lastIndexOf(".") <= 0) { 947 if (this.imageName.lastIndexOf(".") <= 0) {
948 return; 948 return;
949 } 949 }
950 const fr = new FileReader(); 950 const fr = new FileReader();
951 fr.readAsDataURL(files[0]); 951 fr.readAsDataURL(files[0]);
952 fr.addEventListener("load", () => { 952 fr.addEventListener("load", () => {
953 this.imageUrl = fr.result; 953 this.imageUrl = fr.result;
954 this.imageFile = files[0]; // this is an image file that can be sent to server... 954 this.imageFile = files[0]; // this is an image file that can be sent to server...
955 this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 955 this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
956 // console.log("upload=======>", this.imageData.imageUrl); 956 // console.log("upload=======>", this.imageData.imageUrl);
957 // console.log("imageFile", this.imageFile); 957 // console.log("imageFile", this.imageFile);
958 }); 958 });
959 } else { 959 } else {
960 this.imageName = ""; 960 this.imageName = "";
961 this.imageFile = ""; 961 this.imageFile = "";
962 this.imageUrl = ""; 962 this.imageUrl = "";
963 } 963 }
964 }, 964 },
965 // getTimeTableList() { 965 // getTimeTableList() {
966 // this.showLoader = true; 966 // this.showLoader = true;
967 // var token = this.$store.state.token; 967 // var token = this.$store.state.token;
968 // http() 968 // http()
969 // .get("/getTimeTablesList", { 969 // .get("/getTimeTablesList", {
970 // headers: { Authorization: "Bearer " + token } 970 // headers: { Authorization: "Bearer " + token }
971 // }) 971 // })
972 // .then(response => { 972 // .then(response => {
973 // this.desserts = response.data.data; 973 // this.desserts = response.data.data;
974 // this.showLoader = false; 974 // this.showLoader = false;
975 // // console.log("getTimeTableList=====>", response.data.data); 975 // // console.log("getTimeTableList=====>", response.data.data);
976 // }) 976 // })
977 // .catch(err => { 977 // .catch(err => {
978 // // console.log("err====>", err); 978 // // console.log("err====>", err);
979 // this.showLoader = false; 979 // this.showLoader = false;
980 // this.$router.replace({ path: "/" }); 980 // this.$router.replace({ path: "/" });
981 // }); 981 // });
982 // }, 982 // },
983 editItem(item) { 983 editItem(item) {
984 this.editedIndex = this.desserts.indexOf(item); 984 this.editedIndex = this.desserts.indexOf(item);
985 this.editedItem = Object.assign({}, item); 985 this.editedItem = Object.assign({}, item);
986 this.dialog = true; 986 this.dialog = true;
987 }, 987 },
988 updateTimeTable(timeToUpdate, classToUpdate) { 988 updateTimeTable(timeToUpdate, classToUpdate) {
989 console.log( 989 console.log(
990 "timeToUpdate, classToUpdate", 990 "timeToUpdate, classToUpdate",
991 timeToUpdate._id, 991 timeToUpdate._id,
992 classToUpdate.schedule 992 classToUpdate.schedule
993 ); 993 );
994 for (let i = 0; i < classToUpdate.schedule.length; i++) { 994 for (let i = 0; i < classToUpdate.schedule.length; i++) {
995 this.updateLecturesId.scheduleId = classToUpdate.schedule[i]._id; 995 this.updateLecturesId.scheduleId = classToUpdate.schedule[i]._id;
996 } 996 }
997 this.updateLecturesId.lectureId = timeToUpdate._id, 997 this.updateLecturesId.lectureId = timeToUpdate._id,
998 this.updateLectures = timeToUpdate; 998 this.updateLectures = timeToUpdate;
999 console.log("updateLectures",this.updateLectures) 999 console.log("updateLectures",this.updateLectures)
1000 console.log("updateLectures",this.updateLecturesId) 1000 console.log("updateLectures",this.updateLecturesId)
1001 this.dialogUpdateLectures = true; 1001 this.dialogUpdateLectures = true;
1002 }, 1002 },
1003 addLecture(scheduleId, timeTableId) { 1003 addLecture(scheduleId, timeTableId) {
1004 // console.log('timeToAdd, classToAdd', scheduleId, timeTableId); 1004 // console.log('timeToAdd, classToAdd', scheduleId, timeTableId);
1005 this.addlectures.scheduleId = scheduleId; 1005 this.addlectures.scheduleId = scheduleId;
1006 this.addlectures.timeTableId = timeTableId; 1006 this.addlectures.timeTableId = timeTableId;
1007 this.dialogAddLecture = true; 1007 this.dialogAddLecture = true;
1008 }, 1008 },
1009 AddLecture() { 1009 AddLecture() {
1010 // console.log("add") 1010 // console.log("add")
1011 // if (this.$refs.form.validate()) { 1011 // if (this.$refs.form.validate()) {
1012 http() 1012 http()
1013 .post("/addLecture", this.addlectures) 1013 .post("/addLecture", this.addlectures)
1014 .then(response => { 1014 .then(response => {
1015 // console.log("addTimeTable=====>", this.addlectures); 1015 // console.log("addTimeTable=====>", this.addlectures);
1016 if ((this.snackbar = true)) { 1016 if ((this.snackbar = true)) {
1017 this.text = "New Add Lecture successfully"; 1017 this.text = "New Add Lecture successfully";
1018 } 1018 }
1019 this.closedialogLecture(); 1019 this.closedialogLecture();
1020 // this.$router.go(0); 1020 // this.$router.go(0);
1021 }) 1021 })
1022 .catch(error => { 1022 .catch(error => {
1023 if ((this.snackbar = true)) { 1023 if ((this.snackbar = true)) {
1024 this.text = error.response.data.message; 1024 this.text = error.response.data.message;
1025 this.text = error.response.data.statusText; 1025 this.text = error.response.data.statusText;
1026 1026
1027 } 1027 }
1028 }); 1028 });
1029 // } 1029 // }
1030 }, 1030 },
1031 updateParticularTable() { 1031 updateParticularTable() {
1032 let EditLecture = { 1032 let EditLecture = {
1033 lectureId: this.updateLecturesId.lectureId, 1033 lectureId: this.updateLecturesId.lectureId,
1034 scheduleId: this.updateLecturesId.scheduleId, 1034 scheduleId: this.updateLecturesId.scheduleId,
1035 updatedLecture: { 1035 updatedLecture: {
1036 timeIn: this.updateLectures.timeIn, 1036 timeIn: this.updateLectures.timeIn,
1037 timeOut: this.updateLectures.timeOut, 1037 timeOut: this.updateLectures.timeOut,
1038 subjectName: this.updateLectures.subjectName, 1038 subjectName: this.updateLectures.subjectName,
1039 teacherId: this.updateLectures.teacherId 1039 teacherId: this.updateLectures.teacherId
1040 } 1040 }
1041 }; 1041 };
1042 console.log("EditLecture", EditLecture); 1042 console.log("EditLecture", EditLecture);
1043 http() 1043 http()
1044 .put("/updateLecture", EditLecture) 1044 .put("/updateLecture", EditLecture)
1045 .then(response => { 1045 .then(response => {
1046 console.log("updateLecture", EditLecture); 1046 console.log("updateLecture", EditLecture);
1047 if ((this.snackbar = true)) { 1047 if ((this.snackbar = true)) {
1048 this.text = "Successfully Edit Update Lecture"; 1048 this.text = "Successfully Edit Update Lecture";
1049 } 1049 }
1050 this.closeUpdateLectures(); 1050 this.closeUpdateLectures();
1051 this.$router.go(0); 1051 this.$router.go(0);
1052 }) 1052 })
1053 .catch(error => { 1053 .catch(error => {
1054 // console.log(error); 1054 // console.log(error);
1055 if ((this.snackbar = true)) { 1055 if ((this.snackbar = true)) {
1056 this.text = error.response.data.message; 1056 this.text = error.response.data.message;
1057 this.text = error.response.data.statusText; 1057 this.text = error.response.data.statusText;
1058 } 1058 }
1059 }); 1059 });
1060 }, 1060 },
1061 deleteItem(item) { 1061 deleteItem(item) {
1062 let deleteTimeTable = { 1062 let deleteTimeTable = {
1063 timeTableId: item._id 1063 timeTableId: item._id
1064 }; 1064 };
1065 http() 1065 http()
1066 .delete( 1066 .delete(
1067 "/deleteTimeTable", 1067 "/deleteTimeTable",
1068 confirm("Are you sure you want to delete this?") && { 1068 confirm("Are you sure you want to delete this?") && {
1069 params: deleteTimeTable 1069 params: deleteTimeTable
1070 } 1070 }
1071 ) 1071 )
1072 .then(response => { 1072 .then(response => {
1073 // console.log("deleteUers",deleteTimeTable) 1073 // console.log("deleteUers",deleteTimeTable)
1074 if ((this.snackbar = true)) { 1074 if ((this.snackbar = true)) {
1075 this.text = "Successfully delete Existing User"; 1075 this.text = "Successfully delete Existing Time Table";
1076 } 1076 }
1077 this.findTimeTable(); 1077 this.findTimeTable();
1078 }) 1078 })
1079 .catch(error => { 1079 .catch(error => {
1080 // console.log(error); 1080 // console.log(error);
1081 }); 1081 });
1082 }, 1082 },
1083 activeTab(type) { 1083 activeTab(type) {
1084 switch (type) { 1084 switch (type) {
1085 case "existing": 1085 case "existing":
1086 this.newActive = false; 1086 this.newActive = false;
1087 this.isActive = true; 1087 this.isActive = true;
1088 break; 1088 break;
1089 1089
1090 default: 1090 default:
1091 this.newActive = true; 1091 this.newActive = true;
1092 this.isActive = false; 1092 this.isActive = false;
1093 break; 1093 break;
1094 } 1094 }
1095 }, 1095 },
1096 close() { 1096 close() {
1097 this.dialog = false; 1097 this.dialog = false;
1098 setTimeout(() => { 1098 setTimeout(() => {
1099 this.editedItem = Object.assign({}, this.defaultItem); 1099 this.editedItem = Object.assign({}, this.defaultItem);
1100 this.editedIndex = -1; 1100 this.editedIndex = -1;
1101 }, 300); 1101 }, 300);
1102 }, 1102 },
1103 close1() { 1103 close1() {
1104 this.dialog1 = false; 1104 this.dialog1 = false;
1105 }, 1105 },
1106 closedialogLecture() { 1106 closedialogLecture() {
1107 this.dialogAddLecture = false; 1107 this.dialogAddLecture = false;
1108 }, 1108 },
1109 closeUpdateLectures() { 1109 closeUpdateLectures() {
1110 this.dialogUpdateLectures = false; 1110 this.dialogUpdateLectures = false;
1111 }, 1111 },
1112 submit() { 1112 submit() {
1113 if (this.$refs.form.validate()) { 1113 if (this.$refs.form.validate()) {
1114 let imageData = new FormData(); 1114 let imageData = new FormData();
1115 imageData.append("upload", this.imageFile); 1115 imageData.append("upload", this.imageFile);
1116 // console.log(imageData); 1116 // console.log(imageData);
1117 let addTimeTable = { 1117 let addTimeTable = {
1118 sectionId: this.timeTable.selectSection, 1118 sectionId: this.timeTable.selectSection,
1119 classId: this.timeTable.select, 1119 classId: this.timeTable.select,
1120 schedule: [ 1120 schedule: [
1121 { 1121 {
1122 day: this.timeTable.selectDay, 1122 day: this.timeTable.selectDay,
1123 lectures: [ 1123 lectures: [
1124 { 1124 {
1125 timeIn: this.timeTable.timeIn, 1125 timeIn: this.timeTable.timeIn,
1126 timeOut: this.timeTable.timeOut, 1126 timeOut: this.timeTable.timeOut,
1127 subjectName: this.timeTable.subjectName, 1127 subjectName: this.timeTable.subjectName,
1128 teacherId: this.timeTable.selectTeacher 1128 teacherId: this.timeTable.selectTeacher
1129 } 1129 }
1130 ] 1130 ]
1131 } 1131 }
1132 ] 1132 ]
1133 }; 1133 };
1134 this.loading = true;
1134 http() 1135 http()
1135 .post("/createTimeTable", addTimeTable) 1136 .post("/createTimeTable", addTimeTable)
1136 .then(response => { 1137 .then(response => {
1137 // console.log("addTimeTable=====>", addTimeTable); 1138 // console.log("addTimeTable=====>", addTimeTable);
1138 if ((this.snackbar = true)) { 1139 if ((this.snackbar = true)) {
1139 this.text = "New Time Table added successfully"; 1140 this.text = "New Time Table added successfully";
1140 } 1141 }
1141 this.clear(); 1142 this.clear();
1143 this.loading = false;
1142 }) 1144 })
1143 .catch(error => { 1145 .catch(error => {
1144 // console.log(error); 1146 // console.log(error);
1145 if ((this.snackbar = true)) { 1147 if ((this.snackbar = true)) {
1146 this.text = error.response.data.message; 1148 this.text = error.response.data.message;
1147 } 1149 }
1150 this.loading = false;
1148 }); 1151 });
1149 } 1152 }
1150 }, 1153 },
1151 mail() {}, 1154 mail() {},
1152 download() {}, 1155 download() {},
1153 clear() { 1156 clear() {
1154 this.$refs.form.reset(); 1157 this.$refs.form.reset();
1155 }, 1158 },
1156 save() { 1159 save() {
1157 let imageData = new FormData(); 1160 let imageData = new FormData();
1158 imageData.append("upload", this.imageFile); 1161 imageData.append("upload", this.imageFile);
1159 // console.log(imageData); 1162 // console.log(imageData);
1160 let editTimeTable = { 1163 let editTimeTable = {
1161 timeTableId: this.editedItem._id, 1164 timeTableId: this.editedItem._id,
1162 classId: this.editedItem.classNum, 1165 classId: this.editedItem.classNum,
1163 sectionId: this.editedItem.selectSection 1166 sectionId: this.editedItem.selectSection
1164 // imageData 1167 // imageData
1165 }; 1168 };
1166 http() 1169 http()
1167 .put("/updateTimeTable", editTimeTable) 1170 .put("/updateTimeTable", editTimeTable)
1168 .then(response => { 1171 .then(response => {
1169 console.log("editTimeTable", editTimeTable); 1172 console.log("editTimeTable", editTimeTable);
1170 if ((this.snackbar = true)) { 1173 if ((this.snackbar = true)) {
1171 this.text = "Successfully Edit Existing User"; 1174 this.text = "Successfully Edit Existing Time Table";
1172 } 1175 }
1173 this.findTimeTable(); 1176 this.findTimeTable();
1174 }) 1177 })
1175 .catch(error => { 1178 .catch(error => {
1176 // console.log(error); 1179 // console.log(error);
1177 if ((this.snackbar = true)) { 1180 if ((this.snackbar = true)) {
1178 this.text = error.response.data.message; 1181 this.text = error.response.data.message;
1179 } 1182 }
1180 }); 1183 });
1181 this.close(); 1184 this.close();
1182 }, 1185 },
1183 handleDrawerToggle() { 1186 handleDrawerToggle() {
1184 window.getApp.$emit("APP_DRAWER_TOGGLED"); 1187 window.getApp.$emit("APP_DRAWER_TOGGLED");
1185 }, 1188 },
1186 handleFullScreen() { 1189 handleFullScreen() {
1187 Util.toggleFullScreen(); 1190 Util.toggleFullScreen();
1188 }, 1191 },
1189 deleteTimeTable(timeToDelete) { 1192 deleteTimeTable(timeToDelete) {
1190 // console.log('timeToUpdate', timeToDelete._id); 1193 // console.log('timeToUpdate', timeToDelete._id);
1191 let deleteLecture = { 1194 let deleteLecture = {
1192 lectureId: timeToDelete._id 1195 lectureId: timeToDelete._id
1193 }; 1196 };
1194 http() 1197 http()
1195 .delete( 1198 .delete(
1196 "/deleteLecture", 1199 "/deleteLecture",
1197 confirm("Are you sure you want to delete this?") && { 1200 confirm("Are you sure you want to delete this?") && {
1198 params: deleteLecture 1201 params: deleteLecture
1199 } 1202 }
1200 ) 1203 )
1201 .then(response => { 1204 .then(response => {
1202 // console.log("deleteLecture",deleteLecture) 1205 // console.log("deleteLecture",deleteLecture)
1203 if ((this.snackbar = true)) { 1206 if ((this.snackbar = true)) {
1204 this.text = "Successfully delete Existing User"; 1207 this.text = "Successfully delete Existing User";
1205 } 1208 }
1206 this.$router.go(0); 1209 this.$router.go(0);
1207 // this.getTimeTable(); 1210 // this.getTimeTable();
1208 }) 1211 })
1209 .catch(error => { 1212 .catch(error => {
1210 console.log(error); 1213 console.log(error);
1211 }); 1214 });
1212 } 1215 }
1213 }, 1216 },
1214 mounted() { 1217 mounted() {
1215 // this.getTimeTableList(); 1218 // this.getTimeTableList();
1216 var token = this.$store.state.token; 1219 var token = this.$store.state.token;
1217 http() 1220 http()
1218 .get("/getClassesList", { 1221 .get("/getClassesList", {
1219 headers: { Authorization: "Bearer " + token } 1222 headers: { Authorization: "Bearer " + token }
1220 }) 1223 })
1221 .then(response => { 1224 .then(response => {
1222 this.addclass = response.data.data; 1225 this.addclass = response.data.data;
1223 // console.log("getClassesList=====>",this.addclass) 1226 // console.log("getClassesList=====>",this.addclass)
1224 }) 1227 })
1225 .catch(err => { 1228 .catch(err => {
1226 // console.log("err====>", err); 1229 // console.log("err====>", err);
1227 }); 1230 });
1228 1231
1229 http() 1232 http()
1230 .get("/getTeachersList", { 1233 .get("/getTeachersList", {
1231 headers: { Authorization: "Bearer " + token } 1234 headers: { Authorization: "Bearer " + token }
1232 }) 1235 })
1233 .then(response => { 1236 .then(response => {
1234 this.addTeachers = response.data.data; 1237 this.addTeachers = response.data.data;
1235 // console.log("getClassesList=====>",this.addTeachers) 1238 // console.log("getClassesList=====>",this.addTeachers)
1236 }) 1239 })
1237 .catch(err => { 1240 .catch(err => {
1238 // console.log("err====>", err); 1241 // console.log("err====>", err);
1239 }); 1242 });
1240 }, 1243 },
1241 computed: { 1244 computed: {
1242 toolbarColor() { 1245 toolbarColor() {
1243 return this.$vuetify.options.extra.mainNav; 1246 return this.$vuetify.options.extra.mainNav;
1244 } 1247 }
1245 } 1248 }
1246 }; 1249 };
1247 </script> 1250 </script>
1248 <style scoped> 1251 <style scoped>
1249 .theme--light .v-label, 1252 .theme--light .v-label,
1250 .application .theme--light.v-label { 1253 .application .theme--light.v-label {
1251 color: black; 1254 color: black;
1252 } 1255 }
1253 .v-tabs__div { 1256 .v-tabs__div {
1254 text-transform: none; 1257 text-transform: none;
1255 } 1258 }
1256 .v-input__prepend-outer { 1259 .v-input__prepend-outer {
1257 margin-right: 0px !important; 1260 margin-right: 0px !important;
1258 } 1261 }
1259 .v-card__actions .v-btn { 1262 .v-card__actions .v-btn {
1260 margin: 0 15px; 1263 margin: 0 15px;
1261 min-width: 120px; 1264 min-width: 120px;
1262 } 1265 }
1263 .primary { 1266 .primary {
1264 background-color: #aaa !important; 1267 background-color: #aaa !important;
1265 border-color: #aaa !important; 1268 border-color: #aaa !important;
1266 } 1269 }
1267 h4 { 1270 h4 {
1268 background-repeat: no-repeat; 1271 background-repeat: no-repeat;
1269 padding: 8px; 1272 padding: 8px;
1270 margin: auto; 1273 margin: auto;
1271 font-size: 25px; 1274 font-size: 25px;
1272 } 1275 }
1273 #name { 1276 #name {
1274 position: absolute; 1277 position: absolute;
1275 left: 100px; 1278 left: 100px;
1276 top: 17px; 1279 top: 17px;
1277 } 1280 }
1278 #icon { 1281 #icon {
1279 position: absolute; 1282 position: absolute;
1280 right: 8px; 1283 right: 8px;
1281 top: 8px; 1284 top: 8px;
1282 } 1285 }
1283 #m { 1286 #m {
1284 position: relative; 1287 position: relative;
1285 left: 135px; 1288 left: 135px;
1286 top: -15px; 1289 top: -15px;
1287 } 1290 }
1288 #G { 1291 #G {
1289 position: absolute; 1292 position: absolute;
1290 top: 38px; 1293 top: 38px;
1291 color: white; 1294 color: white;
1292 } 1295 }
1293 #bt { 1296 #bt {
1294 position: relative; 1297 position: relative;
1295 top: -20px; 1298 top: -20px;
1296 left: 115px; 1299 left: 115px;
1297 } 1300 }
1298 #e { 1301 #e {
1299 position: relative; 1302 position: relative;
1300 top: 5px; 1303 top: 5px;
1301 right: -30px; 1304 right: -30px;
1302 height: 17px; 1305 height: 17px;
1303 cursor: pointer; 1306 cursor: pointer;
1304 } 1307 }
1305 #d { 1308 #d {
1306 position: relative; 1309 position: relative;
1307 top: 5px; 1310 top: 5px;
1308 right: -70px; 1311 right: -70px;
1309 height: 17px; 1312 height: 17px;
1310 cursor: pointer; 1313 cursor: pointer;
1311 } 1314 }
1312 #td { 1315 #td {
1313 border: 1px solid #dddddd; 1316 border: 1px solid #dddddd;
1314 text-align: left; 1317 text-align: left;
1315 padding: 8px; 1318 padding: 8px;
1316 } 1319 }
1317 #dialog { 1320 #dialog {
1318 height: 550px; 1321 height: 550px;
1319 } 1322 }
1320 .active { 1323 .active {
1321 background-color: black; 1324 background-color: black;
1322 color: white !important; 1325 color: white !important;
1323 } 1326 }
1324 .activebtn { 1327 .activebtn {
1325 color: black !important; 1328 color: black !important;
1326 } 1329 }
1327 #flex { 1330 #flex {
1328 height: 300px; 1331 height: 300px;
1329 } 1332 }
1330 .top { 1333 .top {
1331 margin-top: 100px; 1334 margin-top: 100px;
1332 } 1335 }
1333 .v-tabs__item a { 1336 .v-tabs__item a {
1334 font-size: 16px !important; 1337 font-size: 16px !important;
1335 } 1338 }
1336 @media screen and (max-width: 769px) { 1339 @media screen and (max-width: 769px) {
1337 .top { 1340 .top {
1338 margin-top: 0 !important; 1341 margin-top: 0 !important;
1339 } 1342 }
1340 .userSearch .v-icon { 1343 .userSearch .v-icon {
1341 font-size: 20px !important; 1344 font-size: 20px !important;
1342 margin-left: 20px; 1345 margin-left: 20px;
1343 } 1346 }
1344 } 1347 }
1345 @media screen and (max-width: 380px) { 1348 @media screen and (max-width: 380px) {
1346 .pl-3 { 1349 .pl-3 {
1347 padding-left: 0px !important; 1350 padding-left: 0px !important;
1348 } 1351 }
1349 .right { 1352 .right {
1350 float: none !important; 1353 float: none !important;
1351 } 1354 }
1352 .subheading { 1355 .subheading {
1353 font-size: 14px !important; 1356 font-size: 14px !important;
1354 } 1357 }
1355 .v-card__actions .v-btn { 1358 .v-card__actions .v-btn {
1356 margin: 0 0px; 1359 margin: 0 0px;
1357 min-width: 100px; 1360 min-width: 100px;
1358 } 1361 }
1359 /* .searchIcon .v-icon { 1362 /* .searchIcon .v-icon {
1360 font-size: 20px; 1363 font-size: 20px;
1361 margin-left: 20px; 1364 margin-left: 20px;
1362 } */ 1365 } */
1363 .subheading { 1366 .subheading {
1364 font-size: 12px !important; 1367 font-size: 12px !important;
1365 } 1368 }
1366 h5 { 1369 h5 {
1367 font-size: 13px; 1370 font-size: 13px;
1368 } 1371 }
1369 } 1372 }
1370 .v-icon { 1373 .v-icon {
1371 font-size: 30px; 1374 font-size: 30px;
1372 } 1375 }
1373 @media screen and (min-width: 1270px) { 1376 @media screen and (min-width: 1270px) {
1374 .hide { 1377 .hide {
1375 display: none; 1378 display: none;
1376 } 1379 }
1377 } 1380 }
1378 @media screen and (max-width: 420px) { 1381 @media screen and (max-width: 420px) {
1379 .userSearch .v-text-field .v-label { 1382 .userSearch .v-text-field .v-label {
1380 line-height: 24px !important; 1383 line-height: 24px !important;
1381 } 1384 }
1382 .userSearch .v-label { 1385 .userSearch .v-label {
1383 font-size: 13px !important; 1386 font-size: 13px !important;
1384 } 1387 }
1385 .v-list__tile { 1388 .v-list__tile {
1386 font-size: 14px; 1389 font-size: 14px;
1387 padding: 0 10px; 1390 padding: 0 10px;
1388 } 1391 }
1389 .name { 1392 .name {
1390 font-size: 15px; 1393 font-size: 15px;
1391 } 1394 }
1392 } 1395 }
1393 </style> 1396 </style>