viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit b82d0d998b496b44f909ec0fb03a28ccb6bb7edc

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

changes and modified in students and techers

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