viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 4bd94ba603fbb4ca3a611f3a32ec9c0b42ccf2f2

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

implement api and design of holiday

Showing 10 changed files with 1141 additions and 10 deletions   Show diff stats
1 const Menu = [ 1 const Menu = [
2 // { header: 'Apps' }, 2 // { header: 'Apps' },
3 { 3 {
4 title: 'Dashboard', 4 title: 'Dashboard',
5 // group: 'apps', 5 // group: 'apps',
6 name: 'Dashboard', 6 name: 'Dashboard',
7 icon: 'dashboard', 7 icon: 'dashboard',
8 }, 8 },
9 { 9 {
10 title: 'Class', 10 title: 'Class',
11 // group: 'apps', 11 // group: 'apps',
12 name: 'addclass', 12 name: 'addclass',
13 icon: 'local_library', 13 icon: 'local_library',
14 }, 14 },
15 { 15 {
16 title: 'Section', 16 title: 'Section',
17 // group: 'apps', 17 // group: 'apps',
18 name: 'section', 18 name: 'section',
19 icon: 'view_module', 19 icon: 'view_module',
20 }, 20 },
21 { 21 {
22 title: 'Subjects', 22 title: 'Subjects',
23 name: 'Subject', 23 name: 'Subject',
24 icon: 'subject', 24 icon: 'subject',
25 }, 25 },
26 { 26 {
27 title: 'Parents', 27 title: 'Parents',
28 // group: 'apps', 28 // group: 'apps',
29 name: 'parents', 29 name: 'parents',
30 icon: 'group', 30 icon: 'group',
31 }, 31 },
32 { 32 {
33 title: 'Teachers', 33 title: 'Teachers',
34 // group: '', 34 // group: '',
35 name: 'teachers', 35 name: 'teachers',
36 icon: 'person', 36 icon: 'person',
37 }, 37 },
38 { 38 {
39 title: 'Students', 39 title: 'Students',
40 // group: 'apps', 40 // group: 'apps',
41 name: 'Students', 41 name: 'Students',
42 icon: 'school', 42 icon: 'school',
43 }, 43 },
44 { 44 {
45 title: 'Notice Board', 45 title: 'Notice Board',
46 name: 'NoticeBoard', 46 name: 'NoticeBoard',
47 icon: 'notifications', 47 icon: 'notifications',
48 }, 48 },
49 { 49 {
50 title: 'News', 50 title: 'News',
51 name: 'news', 51 name: 'news',
52 icon: 'announcement', 52 icon: 'announcement',
53 }, 53 },
54 // { 54 // {
55 // title: 'Reminder', 55 // title: 'Reminder',
56 // name: 'reminder', 56 // name: 'reminder',
57 // icon: 'alarm_add', 57 // icon: 'alarm_add',
58 // }, 58 // },
59 { 59 {
60 title: 'Time Table', 60 title: 'Time Table',
61 name: 'timeTable', 61 name: 'timeTable',
62 icon: 'event_note', 62 icon: 'event_note',
63 }, 63 },
64 { 64 {
65 title: 'Notification', 65 title: 'Notification',
66 name: 'notification', 66 name: 'notification',
67 icon: 'notifications_active', 67 icon: 'notifications_active',
68 }, 68 },
69 { 69 {
70 title: 'Social Media', 70 title: 'Social Media',
71 name: 'SocialMedia', 71 name: 'SocialMedia',
72 icon: 'cloud_upload', 72 icon: 'cloud_upload',
73 }, 73 },
74 { 74 {
75 title: 'Gallery', 75 title: 'Gallery',
76 name: 'Gallery', 76 name: 'Gallery',
77 icon: 'photo', 77 icon: 'photo',
78 }, 78 },
79 {
80 title: 'Event',
81 name: 'Event',
82 icon: 'event',
83 },
84 {
85 title: 'Holiday',
86 name: 'Holiday',
87 icon: 'star',
88 }
79 ]; 89 ];
80 90
81 91
82 // reorder menu 92 // reorder menu
83 Menu.forEach((item) => { 93 Menu.forEach((item) => {
84 if (item.items) { 94 if (item.items) {
85 item.items.sort((x, y) => { 95 item.items.sort((x, y) => {
86 let textA = x.title.toUpperCase(); 96 let textA = x.title.toUpperCase();
87 let textB = y.title.toUpperCase(); 97 let textB = y.title.toUpperCase();
88 return (textA < textB) ? -1 : (textA > textB) ? 1 : 0; 98 return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
89 }); 99 });
90 } 100 }
91 }); 101 });
92 102
93 export default Menu; 103 export default Menu;
src/components/pageHeader/AppToolbar.vue
Diff comments   View file @4bd94ba
1 <template> 1 <template>
2 <v-toolbar class="fixcolors" fixed app> 2 <v-toolbar class="fixcolors" fixed app>
3 <v-toolbar-title class="ml-0 pl-3"> 3 <v-toolbar-title class="ml-0 pl-3">
4 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon> 4 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon>
5 </v-toolbar-title> 5 </v-toolbar-title>
6 6
7 <!-- ****** SEARCH ALL EXISTING STUDENTS ****** --> 7 <!-- ****** SEARCH ALL EXISTING STUDENTS ****** -->
8 <v-flex xs7 sm3 class="userSearch" v-if="$route.name != 'Dashboard'"> 8 <v-flex xs7 sm3 class="userSearch" v-if="$route.name != 'Dashboard'">
9 <v-text-field 9 <v-text-field
10 flat 10 flat
11 append-icon="search" 11 append-icon="search"
12 label="Seacrh" 12 label="Seacrh"
13 color="white" 13 color="white"
14 @input.native="emitSearch" 14 @input.native="emitSearch"
15 type="text" 15 type="text"
16 dark 16 dark
17 ></v-text-field> 17 ></v-text-field>
18 </v-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 class="iconSize">{{ item.icon }}</v-icon> 39 <v-icon class="iconSize">{{ 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 </template> 48 </template>
49 <script> 49 <script>
50 import Util from "@/util"; 50 import Util from "@/util";
51 export default { 51 export default {
52 name: "app-toolbar", 52 name: "app-toolbar",
53 data: () => ({ 53 data: () => ({
54 userName: "", 54 userName: "",
55 search: "", 55 search: "",
56 items: [ 56 items: [
57 { 57 {
58 icon: 'account_circle', 58 icon: 'account_circle',
59 href: "/changepassword", 59 href: "/changepassword",
60 title: "Change Password", 60 title: "Change Password",
61 click: e => { 61 click: e => {
62 console.log(e); 62 console.log(e);
63 } 63 }
64 }, 64 },
65 // { 65 // {
66 // icon: 'settings', 66 // icon: 'settings',
67 // href: '#', 67 // href: '#',
68 // title: 'Settings', 68 // title: 'Settings',
69 // click: (e) => { 69 // click: (e) => {
70 // console.log(e); 70 // console.log(e);
71 // } 71 // }
72 // }, 72 // },
73 { 73 {
74 icon: 'lock', 74 icon: 'lock',
75 href: "#", 75 href: "#",
76 title: "Logout", 76 title: "Logout",
77 click: e => { 77 click: e => {
78 window.getApp.$emit("APP_LOGOUT"); 78 window.getApp.$emit("APP_LOGOUT");
79 } 79 }
80 } 80 }
81 ] 81 ]
82 }), 82 }),
83 computed: { 83 computed: {
84 toolbarColor() { 84 toolbarColor() {
85 return this.$vuetify.options.extra.mainNav; 85 return this.$vuetify.options.extra.mainNav;
86 } 86 }
87 }, 87 },
88 methods: { 88 methods: {
89 emitSearch (ev) { 89 emitSearch (ev) {
90 this.$root.$emit('app:search', ev.target.value) 90 this.$root.$emit('app:search', ev.target.value)
91 console.log("ev.target.value",ev.target.value)
91 }, 92 },
92 handleDrawerToggle() { 93 handleDrawerToggle() {
93 window.getApp.$emit("APP_DRAWER_TOGGLED"); 94 window.getApp.$emit("APP_DRAWER_TOGGLED");
94 }, 95 },
95 handleFullScreen() { 96 handleFullScreen() {
96 Util.toggleFullScreen(); 97 Util.toggleFullScreen();
97 } 98 }
98 } 99 }
99 }; 100 };
100 </script> 101 </script>
101 <style> 102 <style>
102 .v-icon { 103 .v-icon {
103 font-size: 30px; 104 font-size: 30px;
104 } 105 }
105 @media screen and (min-width: 1270px) { 106 @media screen and (min-width: 1270px) {
106 .hide { 107 .hide {
107 display: none; 108 display: none;
108 } 109 }
109 /* } 110 /* }
110 @media screen and (max-width: 962px) { 111 @media screen and (max-width: 962px) {
111 .imglogo{ 112 .imglogo{
112 position: absolute; 113 position: absolute;
113 top: 13px; 114 top: 13px;
114 left: 13px !important; 115 left: 13px !important;
115 width: 70px; 116 width: 70px;
116 height: 24px; 117 height: 24px;
117 } */ 118 } */
118 } 119 }
119 @media screen and (max-width: 420px) { 120 @media screen and (max-width: 420px) {
120 .v-list__tile { 121 .v-list__tile {
121 font-size: 14px; 122 font-size: 14px;
122 padding: 0 10px; 123 padding: 0 10px;
123 } 124 }
124 .name { 125 .name {
125 font-size: 15px; 126 font-size: 15px;
126 } 127 }
127 } 128 }
128 </style> 129 </style>
129 130
src/pages/Event/event.vue
Diff comments   View file @4bd94ba
File was created 1 <template>
2 <v-app id="pages-dasboard">
3 <v-tabs grow slider-color="black">
4 <v-tab
5 ripple
6 @click="activeTab('existing')"
7 v-bind:class="{ active: isActive }"
8 id="tab"
9 class="subheading"
10 >Existing Event</v-tab>
11 <v-tab
12 ripple
13 @click="activeTab('new')"
14 v-bind:class="{ active: newActive }"
15 id="tab1"
16 User
17 class="subheading"
18 >Add New Event</v-tab>
19
20 <!-- ****** EDITS EVENT DETAILS ****** -->
21
22 <v-tab-item>
23 <v-snackbar
24 :timeout="timeout"
25 :top="y === 'top'"
26 :right="x === 'right'"
27 :vertical="mode === 'vertical'"
28 v-model="snackbar"
29 color="success"
30 >{{ text }}</v-snackbar>
31 <v-dialog v-model="dialog" max-width="600px">
32 <v-flex xs12 sm12>
33 <v-toolbar color="v-toolbar">
34 <v-spacer></v-spacer>
35 <v-toolbar-title>
36 <h3>Edit Event</h3>
37 </v-toolbar-title>
38 <v-spacer></v-spacer>
39 </v-toolbar>
40 <v-card flat>
41 <v-form ref="form">
42 <v-container fluid>
43 <v-layout>
44 <!-- <v-flex
45 xs12
46 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4"
47 >
48 <v-avatar size="100px">
49 <img src="/static/icon/user.png" />
50 </v-avatar> -->
51 <!-- <input
52 type="file"
53 style="display: none"
54 ref="image"
55 accept="image/*"
56 @change="onFilePicked"
57 />
58 <img
59 :src="imageData.imageUrl"
60 height="150"
61 v-if="imageUrl"
62 style="border-radius:50%; width:200px"
63 />-->
64 <!-- </v-flex> -->
65 </v-layout>
66 <v-flex xs12 sm12>
67 <v-layout>
68 <v-flex xs4 class="pt-4 subheading">
69 <label class="right">Title:</label>
70 </v-flex>
71 <v-flex xs5 class="ml-3">
72 <v-text-field
73 v-model="editedItem.title"
74 placeholder="fill your Title"
75 name="name"
76 type="text"
77 ></v-text-field>
78 </v-flex>
79 </v-layout>
80 </v-flex>
81 <v-flex xs12 sm12>
82 <v-layout>
83 <v-flex xs4 class="pt-4 subheading">
84 <label class="right">Date:</label>
85 </v-flex>
86 <v-flex xs5 class="ml-3">
87 <v-menu
88 ref="menu"
89 :close-on-content-click="false"
90 v-model="menu"
91 :nudge-right="40"
92 lazy
93 transition="scale-transition"
94 offset-y
95 full-width
96 min-width="290px"
97 >
98 <v-text-field
99 slot="activator"
100 :rules="dateRules"
101 v-model="editedItem.joinDate"
102 placeholder="Select date"
103 ></v-text-field>
104 <v-date-picker
105 ref="picker"
106 v-model="editedItem.joinDate"
107 @input="menu = false"
108 ></v-date-picker>
109 </v-menu>
110 </v-flex>
111 </v-layout>
112 </v-flex>
113 <v-flex xs12 sm12>
114 <v-layout>
115 <v-flex xs4 class="pt-4 subheading">
116 <label class="right">Description:</label>
117 </v-flex>
118 <v-flex xs5 class="ml-3">
119 <v-text-field
120 placeholder="fill your Description"
121 v-model="editedItem.description"
122 type="text"
123 ></v-text-field>
124 </v-flex>
125 </v-layout>
126 </v-flex>
127 <v-layout>
128 <v-flex xs12 sm10 offset-sm1>
129 <v-card-actions>
130 <v-btn round dark @click.native="close">Cancel</v-btn>
131 <v-spacer></v-spacer>
132 <v-btn round dark @click="save">Save</v-btn>
133 </v-card-actions>
134 </v-flex>
135 </v-layout>
136 </v-container>
137 </v-form>
138 </v-card>
139 </v-flex>
140 </v-dialog>
141
142 <!-- ****** PROFILE VIEW EVENT DEATILS ****** -->
143
144 <v-dialog v-model="dialog1" max-width="700px">
145 <v-toolbar color="white">
146 <v-spacer></v-spacer>
147 <v-toolbar-title>
148 <h3>Event</h3>
149 </v-toolbar-title>
150 <v-spacer></v-spacer>
151 <v-icon @click="close1">close</v-icon>
152 </v-toolbar>
153 <v-card>
154 <!-- <v-flex align-center justify-center layout text-xs-center>
155 <v-avatar size="50px" style="position:absolute; top:20px;">
156 <img src="/static/icon/user.png" />
157 </v-avatar>
158 </v-flex> -->
159 <v-card-text>
160 <v-container grid-list-md>
161 <v-layout wrap>
162 <v-flex>
163 <v-layout>
164 <v-flex xs5 sm6>
165 <h5 class="right my-1">Title:</h5>
166 </v-flex>
167 <v-flex sm6 xs8>
168 <h5 class="my-1">{{ editedItem.title }}</h5>
169 </v-flex>
170 </v-layout>
171 <v-layout>
172 <v-flex xs5 sm6>
173 <h5 class="right my-1">Date:</h5>
174 </v-flex>
175 <v-flex sm6 xs8>
176 <h5 class="my-1">{{ editedItem.title }}</h5>
177 </v-flex>
178 </v-layout>
179 <v-layout>
180 <v-flex xs5 sm6>
181 <h5 class="right my-1">Description:</h5>
182 </v-flex>
183 <v-flex sm6 xs8>
184 <h5 class="my-1">{{ editedItem.description }}</h5>
185 </v-flex>
186 </v-layout>
187 </v-flex>
188 </v-layout>
189 </v-container>
190 </v-card-text>
191 </v-card>
192 </v-dialog>
193 <v-snackbar
194 :timeout="timeout"
195 :top="y === 'top'"
196 :right="x === 'right'"
197 :vertical="mode === 'vertical'"
198 v-model="snackbar"
199 color="success"
200 >{{ text }}</v-snackbar>
201
202 <!-- ****** EXISTING-USERS EVENT TABLE ****** -->
203
204 <v-data-table
205 :headers="headers"
206 :items="desserts"
207 :pagination.sync="pagination"
208 :search="search"
209 >
210 <template slot="items" slot-scope="props">
211 <td id="td" class="text-xs-center">{{ props.index}}</td>
212 <td id="td" class="text-xs-center">{{ props.item.title}}</td>
213 <td id="td" class="text-xs-center">{{ props.item.description}}</td>
214
215 <td id="td" class="text-xs-center">
216 <span>
217 <img
218 style="cursor:pointer; width:25px; height:18px; "
219 class="mr-5"
220 @click="profile(props.item)"
221 src="/static/icon/eye1.png"
222 />
223 <img
224 style="cursor:pointer; width:20px; height:18px; "
225 class="mr-5"
226 @click="editItem(props.item)"
227 src="/static/icon/edit1.png"
228 />
229 <img
230 style="cursor:pointer;width:20px; height:20px; "
231 class="mr-5"
232 @click="deleteItem(props.item)"
233 src="/static/icon/delete1.png"
234 />
235 </span>
236 </td>
237 </template>
238 <v-alert
239 slot="no-results"
240 :value="true"
241 color="error"
242 icon="warning"
243 >Your search for "{{ search }}" found no results.</v-alert>
244 </v-data-table>
245 </v-tab-item>
246
247 <!-- ****** ADD MULTIPLE EVENT ****** -->
248
249 <v-tab-item>
250 <v-container>
251 <v-snackbar
252 :timeout="timeout"
253 :top="y === 'top'"
254 :right="x === 'right'"
255 :vertical="mode === 'vertical'"
256 v-model="snackbar"
257 color="success"
258 >{{ text }}</v-snackbar>
259 <v-flex xs12 sm12 class="my-4">
260 <v-card flat>
261 <v-form ref="form" v-model="valid" lazy-validation>
262 <v-container fluid>
263 <v-layout>
264 <!-- <v-flex
265 xs12
266 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
267 >
268 <v-avatar size="100px">
269 <img src="/static/icon/user.png" />
270 </v-avatar> -->
271 <!-- <input
272 type="file"
273 style="display: none"
274 ref="image"
275 accept="image/*"
276 @change="onFilePicked"
277 />
278 <img
279 :src="imageData.imageUrl"
280 height="150"
281 v-if="imageUrl"
282 style="border-radius:50%; width:200px"
283 />-->
284 <!-- </v-flex> -->
285 </v-layout>
286 <v-flex xs12>
287 <v-layout>
288 <v-flex xs4 class="pt-4 subheading">
289 <label class="right">Title:</label>
290 </v-flex>
291 <v-flex xs4 class="ml-3">
292 <v-text-field
293 v-model="addEvent.title"
294 placeholder="fill your Title"
295 type="text"
296 :rules="titleRules"
297 required
298 ></v-text-field>
299 </v-flex>
300 </v-layout>
301 </v-flex>
302 <v-flex xs12>
303 <v-layout>
304 <v-flex xs4 class="pt-4 subheading">
305 <label class="right">date:</label>
306 </v-flex>
307 <v-flex xs4 class="ml-3">
308 <v-menu
309 ref="menu1"
310 :close-on-content-click="false"
311 v-model="menu1"
312 :nudge-right="40"
313 lazy
314 transition="scale-transition"
315 offset-y
316 full-width
317 min-width="290px"
318 >
319 <v-text-field
320 slot="activator"
321 :rules="dateRules"
322 v-model="addEvent.joinDate"
323 placeholder="Select date"
324 ></v-text-field>
325 <v-date-picker
326 ref="picker"
327 v-model="addEvent.joinDate"
328 @input="menu1 = false"
329 ></v-date-picker>
330 </v-menu>
331 </v-flex>
332 </v-layout>
333 </v-flex>
334 <v-flex xs12>
335 <v-layout>
336 <v-flex xs4 class="pt-4 subheading">
337 <label class="right">Description:</label>
338 </v-flex>
339 <v-flex xs4 class="ml-3">
340 <v-text-field
341 placeholder="fill your Description"
342 :rules="descriptionRules"
343 v-model="addEvent.description"
344 type="text"
345 required
346 ></v-text-field>
347 </v-flex>
348 </v-layout>
349 </v-flex>
350 <v-layout>
351 <v-flex xs12 sm6 offset-sm3>
352 <v-card-actions>
353 <v-btn @click="clear" round dark>clear</v-btn>
354 <v-spacer></v-spacer>
355 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
356 </v-card-actions>
357 </v-flex>
358 </v-layout>
359 </v-container>
360 </v-form>
361 </v-card>
362 </v-flex>
363 </v-container>
364 </v-tab-item>
365 </v-tabs>
366 <div class="loader" v-if="showLoader">
367 <v-progress-circular indeterminate color="white"></v-progress-circular>
368 </div>
369 </v-app>
370 </template>
371
372 <script>
373 import http from "@/Services/http.js";
374 import Util from "@/util";
375
376 export default {
377 data: () => ({
378 snackbar: false,
379 y: "top",
380 x: "right",
381 mode: "",
382 timeout: 3000,
383 text: "",
384 loading: false,
385 date: null,
386 search: "",
387 showLoader: false,
388 dialog: false,
389 dialog1: false,
390 valid: true,
391 isActive: true,
392 newActive: false,
393 pagination: {
394 rowsPerPage: 15
395 },
396 date: null,
397 menu1: false,
398 menu: false,
399 // imageData: {},
400 // imageName: "",
401 // imageUrl: "",
402 // imageFile: "",
403 titleRules: [v => !!v || " Tilte is required"],
404 descriptionRules: [v => !!v || " Discription is required"],
405 dateRules: [v => !!v || "Date is required"],
406 headers: [
407 {
408 text: "No",
409 align: "center",
410 sortable: false,
411 value: "No"
412 },
413 { text: "Title", value: "title", sortable: false, align: "center" },
414 {
415 text: "Description",
416 value: "description",
417 sortable: false,
418 align: "center"
419 },
420 { text: "Action", value: "", sortable: false, align: "center" }
421 ],
422 desserts: [],
423 editedIndex: -1,
424 addEvent: {},
425 editedItem: {}
426 }),
427 methods: {
428 // pickFile() {
429 // this.$refs.image.click();
430 // },
431
432 // onFilePicked(e) {
433 // // console.log(e)
434 // const files = e.target.files;
435 // this.imageData.upload = e.target.files[0];
436 // if (files[0] !== undefined) {
437 // this.imageName = files[0].name;
438 // if (this.imageName.lastIndexOf(".") <= 0) {
439 // return;
440 // }
441 // const fr = new FileReader();
442 // fr.readAsDataURL(files[0]);
443 // fr.addEventListener("load", () => {
444 // this.imageUrl = fr.result;
445 // this.imageFile = files[0]; // this is an image file that can be sent to server...
446 // this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
447 // console.log("upload=======>", this.imageData.imageUrl);
448 // console.log("imageFile", this.imageFile);
449 // });
450 // } else {
451 // this.imageName = "";
452 // this.imageFile = "";
453 // this.imageUrl = "";
454 // }
455 // },
456 getEvents() {
457 // this.showLoader = true;
458 var token = this.$store.state.token;
459 http()
460 .get("/getNotificationsList", {
461 headers: { Authorization: "Bearer " + token }
462 })
463 .then(response => {
464 this.desserts = response.data.data;
465 this.showLoader = false;
466 })
467 .catch(err => {
468 // console.log("err====>", err);
469 this.showLoader = false;
470 if (error.response.status === 401) {
471 this.$router.replace({ path: "/" });
472 this.$store.dispatch("setToken", null);
473 this.$store.dispatch("Id", null);
474 }
475 });
476 },
477 editItem(item) {
478 this.editedIndex = this.desserts.indexOf(item);
479 this.editedItem = Object.assign({}, item);
480 this.dialog = true;
481 },
482 profile(item) {
483 this.editedIndex = this.desserts.indexOf(item);
484 this.editedItem = Object.assign({}, item);
485 this.dialog1 = true;
486 },
487
488 deleteItem(item) {
489 let deleteEvent = {
490 notificationId: item._id
491 };
492 http()
493 .delete(
494 "/deleteNotification",
495 confirm("Are you sure you want to delete this?") && {
496 params: deleteNotification
497 }
498 )
499 .then(response => {
500 // console.log("deleteNotification",deleteNotification)
501 if ((this.snackbar = true)) {
502 this.text = response.data.message;
503 }
504 this.getEvents();
505 })
506 .catch(error => {
507 console.log(error);
508 });
509 },
510 activeTab(type) {
511 switch (type) {
512 case "existing":
513 this.newActive = false;
514 this.isActive = true;
515 break;
516
517 default:
518 this.newActive = true;
519 this.isActive = false;
520 break;
521 }
522 },
523 close() {
524 this.dialog = false;
525 setTimeout(() => {
526 this.editedItem = Object.assign({}, this.defaultItem);
527 this.editedIndex = -1;
528 }, 300);
529 },
530 close1() {
531 this.dialog1 = false;
532 },
533 submit() {
534 if (this.$refs.form.validate()) {
535 // let imageData = new FormData();
536 // imageData.append("upload", this.imageFile);
537 // console.log(imageData);
538 // let create = {
539 // title: this.addNotification.title,
540 // description: this.addNotification.description
541 // // imageData
542 // };
543 // console.log(create);
544 this.loading = true;
545 http()
546 .post("/createNotification", this.addEvent)
547 .then(response => {
548 console.log(create);
549 if ((this.snackbar = true)) {
550 this.text = "New Notification added successfully";
551 }
552 this.getEvents();
553 this.clear();
554 this.loading = false;
555 })
556 .catch(error => {
557 // console.log(error);
558 if ((this.snackbar = true)) {
559 this.text = error.response.data.message;
560 }
561 this.loading = false;
562 });
563 }
564 },
565 clear() {
566 this.$refs.form.reset();
567 },
568 save() {
569 // let imageData = new FormData();
570 // imageData.append("upload", this.imageFile);
571 // console.log(imageData);
572 // let editNotification = {
573 // notificationId: this.editedItem._id,
574 // title: this.editedItem.title,
575 // description: this.editedItem.description
576 // // imageData
577 // };
578 http()
579 .put("/updateNotification", this.editedItem)
580 .then(response => {
581 // console.log("editNotification",editNotification);
582 if ((this.snackbar = true)) {
583 this.text = "Successfully Edit Notification";
584 }
585 this.getEvents();
586 })
587 .catch(error => {
588 // console.log(error);
589 });
590 this.close();
591 }
592 },
593 mounted() {
594 this.getEvents();
595 },
596 created() {
597 this.$root.$on("app:search", search => {
598 this.search = search;
599 });
600 },
601 beforeDestroy() {
602 // dont forget to remove the listener
603 this.$root.$off("app:search");
604 }
605 };
606 </script>
607 <style scoped>
608 #td {
609 max-width: 200px;
610 }
611 .active {
612 background-color: black;
613 color: white !important;
614 }
615 .activebtn {
616 color: black !important;
617 }
618 </style>
src/pages/Holiday/holiday.vue
Diff comments   View file @4bd94ba
File was created 1 <template>
2 <v-app id="pages-dasboard">
3 <v-tabs grow slider-color="black">
4 <v-tab
5 ripple
6 @click="activeTab('existing')"
7 v-bind:class="{ active: isActive }"
8 id="tab"
9 class="subheading"
10 >Existing Holiday</v-tab>
11 <v-tab
12 ripple
13 @click="activeTab('new')"
14 v-bind:class="{ active: newActive }"
15 id="tab1"
16 User
17 class="subheading"
18 >Add New Holiday</v-tab>
19
20 <!-- ****** EDITS Holiday DETAILS ****** -->
21
22 <v-tab-item>
23 <v-snackbar
24 :timeout="timeout"
25 :top="y === 'top'"
26 :right="x === 'right'"
27 :vertical="mode === 'vertical'"
28 v-model="snackbar"
29 color="success"
30 >{{ text }}</v-snackbar>
31 <v-dialog v-model="dialog" max-width="600px">
32 <v-flex xs12 sm12>
33 <v-toolbar color="v-toolbar">
34 <v-spacer></v-spacer>
35 <v-toolbar-title>
36 <h3>Edit Holiday</h3>
37 </v-toolbar-title>
38 <v-spacer></v-spacer>
39 </v-toolbar>
40 <v-card flat>
41 <v-form ref="form">
42 <v-container fluid>
43 <v-flex xs12 sm12>
44 <v-layout>
45 <v-flex xs4 class="pt-4 subheading">
46 <label class="right">Occasion:</label>
47 </v-flex>
48 <v-flex xs5 class="ml-3">
49 <v-text-field
50 v-model="editedItem.occasion"
51 placeholder="fill your Occasion"
52 name="name"
53 type="text"
54 ></v-text-field>
55 </v-flex>
56 </v-layout>
57 </v-flex>
58 <v-flex xs12 sm12>
59 <v-layout>
60 <v-flex xs4 class="pt-4 subheading">
61 <label class="right">Date:</label>
62 </v-flex>
63 <v-flex xs5 class="ml-3">
64 <v-menu
65 ref="menu"
66 :close-on-content-click="false"
67 v-model="menu"
68 :nudge-right="40"
69 lazy
70 transition="scale-transition"
71 offset-y
72 full-width
73 min-width="290px"
74 >
75 <v-text-field
76 slot="activator"
77 :rules="dateRules"
78 v-model="editedItem.dateOfHoliday"
79 placeholder="Select date"
80 ></v-text-field>
81 <v-date-picker
82 ref="picker"
83 v-model="editedItem.dateOfHoliday"
84 @input="menu = false"
85 ></v-date-picker>
86 </v-menu>
87 </v-flex>
88 </v-layout>
89 </v-flex>
90 <v-layout>
91 <v-flex xs12 sm10 offset-sm1>
92 <v-card-actions>
93 <v-btn round dark @click.native="close">Cancel</v-btn>
94 <v-spacer></v-spacer>
95 <v-btn round dark @click="save">Save</v-btn>
96 </v-card-actions>
97 </v-flex>
98 </v-layout>
99 </v-container>
100 </v-form>
101 </v-card>
102 </v-flex>
103 </v-dialog>
104
105 <!-- ****** PROFILE VIEW Holiday DEATILS ****** -->
106
107 <v-dialog v-model="dialog1" max-width="700px">
108 <v-toolbar color="white">
109 <v-spacer></v-spacer>
110 <v-toolbar-title>
111 <h3>Holiday</h3>
112 </v-toolbar-title>
113 <v-spacer></v-spacer>
114 <v-icon @click="close1">close</v-icon>
115 </v-toolbar>
116 <v-card>
117 <v-card-text>
118 <v-container grid-list-md>
119 <v-layout wrap>
120 <v-flex>
121 <v-layout>
122 <v-flex xs5 sm6>
123 <h5 class="right my-1">Occasion:</h5>
124 </v-flex>
125 <v-flex sm6 xs8>
126 <h5 class="my-1">{{ editedItem.occasion }}</h5>
127 </v-flex>
128 </v-layout>
129 <v-layout>
130 <v-flex xs5 sm6>
131 <h5 class="right my-1">Date:</h5>
132 </v-flex>
133 <v-flex sm6 xs8>
134 <h5 class="my-1">{{ editedItem.dateOfHoliday }}</h5>
135 </v-flex>
136 </v-layout>
137 </v-flex>
138 </v-layout>
139 </v-container>
140 </v-card-text>
141 </v-card>
142 </v-dialog>
143 <v-snackbar
144 :timeout="timeout"
145 :top="y === 'top'"
146 :right="x === 'right'"
147 :vertical="mode === 'vertical'"
148 v-model="snackbar"
149 color="success"
150 >{{ text }}</v-snackbar>
151
152 <!-- ****** EXISTING-USERS Holiday TABLE ****** -->
153
154 <v-data-table
155 :headers="headers"
156 :items="desserts"
157 :pagination.sync="pagination"
158 :search="search"
159 >
160 <template slot="items" slot-scope="props">
161 <td id="td" class="text-xs-center">{{ props.index}}</td>
162 <td id="td" class="text-xs-center">{{ props.item.occasion}}</td>
163 <td id="td" class="text-xs-center">{{ dates(props.item.dateOfHoliday) }}</td>
164
165 <td id="td" class="text-xs-center">
166 <span>
167 <img
168 style="cursor:pointer; width:25px; height:18px; "
169 class="mr-5"
170 @click="profile(props.item)"
171 src="/static/icon/eye1.png"
172 />
173 <img
174 style="cursor:pointer; width:20px; height:18px; "
175 class="mr-5"
176 @click="editItem(props.item)"
177 src="/static/icon/edit1.png"
178 />
179 <img
180 style="cursor:pointer;width:20px; height:20px; "
181 class="mr-5"
182 @click="deleteItem(props.item)"
183 src="/static/icon/delete1.png"
184 />
185 </span>
186 </td>
187 </template>
188 <v-alert
189 slot="no-results"
190 :value="true"
191 color="error"
192 icon="warning"
193 >Your search for "{{ search }}" found no results.</v-alert>
194 </v-data-table>
195 </v-tab-item>
196
197 <!-- ****** ADD MULTIPLE Holiday ****** -->
198
199 <v-tab-item>
200 <v-container>
201 <v-snackbar
202 :timeout="timeout"
203 :top="y === 'top'"
204 :right="x === 'right'"
205 :vertical="mode === 'vertical'"
206 v-model="snackbar"
207 color="success"
208 >{{ text }}</v-snackbar>
209 <v-flex xs12 sm8 class="my-4" offset-sm2>
210 <v-card flat>
211 <v-form ref="form" v-model="valid" lazy-validation>
212 <v-container fluid>
213 <v-flex xs12>
214 <v-layout>
215 <v-flex xs4 class="pt-4 subheading">
216 <label class="right">Occasion:</label>
217 </v-flex>
218 <v-flex xs4 class="ml-3">
219 <v-text-field
220 v-model="addHoliday.occasion"
221 placeholder="fill your Occasion"
222 type="text"
223 :rules="occasionRules"
224 required
225 ></v-text-field>
226 </v-flex>
227 </v-layout>
228 </v-flex>
229 <v-flex xs12>
230 <v-layout>
231 <v-flex xs4 class="pt-4 subheading">
232 <label class="right">date:</label>
233 </v-flex>
234 <v-flex xs4 class="ml-3">
235 <v-menu
236 ref="menu1"
237 :close-on-content-click="false"
238 v-model="menu1"
239 :nudge-right="40"
240 lazy
241 transition="scale-transition"
242 offset-y
243 full-width
244 min-width="290px"
245 >
246 <v-text-field
247 slot="activator"
248 :rules="dateRules"
249 v-model="addHoliday.dateOfHoliday"
250 placeholder="Select date"
251 ></v-text-field>
252 <v-date-picker
253 ref="picker"
254 v-model="addHoliday.dateOfHoliday"
255 @input="menu1 = false"
256 ></v-date-picker>
257 </v-menu>
258 </v-flex>
259 </v-layout>
260 </v-flex>
261 <v-layout>
262 <v-flex xs12 sm7 offset-sm2>
263 <v-card-actions>
264 <v-btn @click="clear" round dark>clear</v-btn>
265 <v-spacer></v-spacer>
266 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
267 </v-card-actions>
268 </v-flex>
269 </v-layout>
270 </v-container>
271 </v-form>
272 </v-card>
273 </v-flex>
274 </v-container>
275 </v-tab-item>
276 </v-tabs>
277 <div class="loader" v-if="showLoader">
278 <v-progress-circular indeterminate color="white"></v-progress-circular>
279 </div>
280 </v-app>
281 </template>
282
283 <script>
284 import http from "@/Services/http.js";
285 import moment from "moment";
286
287 export default {
288 data: () => ({
289 snackbar: false,
290 y: "top",
291 x: "right",
292 mode: "",
293 timeout: 3000,
294 text: "",
295 loading: false,
296 date: null,
297 search: "",
298 showLoader: false,
299 dialog: false,
300 dialog1: false,
301 valid: true,
302 isActive: true,
303 newActive: false,
304 pagination: {
305 rowsPerPage: 15
306 },
307 date: null,
308 menu1: false,
309 menu: false,
310 occasionRules: [v => !!v || "Occasion is required"],
311 dateRules: [v => !!v || "Date is required"],
312 headers: [
313 {
314 text: "No",
315 align: "center",
316 sortable: false,
317 value: "No"
318 },
319 { text: "Occasion", value: "occasion", sortable: false, align: "center" },
320 {
321 text: "Date Of Holiday",
322 value: "dateOfHoliday",
323 sortable: false,
324 align: "center"
325 },
326 { text: "Action", value: "", sortable: false, align: "center" }
327 ],
328 desserts: [],
329 editedIndex: -1,
330 addHoliday: {},
331 editedItem: {}
332 }),
333 methods: {
334 dates: function(date) {
335 return moment(date).format("MMMM DD, YYYY");
336 },
337 getHolidays() {
338 this.showLoader = true;
339 var token = this.$store.state.token;
340 http()
341 .get("/getHolidaysList", {
342 headers: { Authorization: "Bearer " + token }
343 })
344 .then(response => {
345 this.desserts = response.data.data;
346 this.showLoader = false;
347 })
348 .catch(err => {
349 // console.log("err====>", err);
350 this.showLoader = false;
351 if (error.response.status === 401) {
352 this.$router.replace({ path: "/" });
353 this.$store.dispatch("setToken", null);
354 this.$store.dispatch("Id", null);
355 }
356 });
357 },
358 editItem(item) {
359 this.editedIndex = this.desserts.indexOf(item);
360 this.editedItem = Object.assign({}, item);
361 this.editedItem.holidayId = item._id;
362 this.dialog = true;
363 },
364 profile(item) {
365 this.editedIndex = this.desserts.indexOf(item);
366 this.editedItem = Object.assign({}, item);
367 this.dialog1 = true;
368 },
369
370 deleteItem(item) {
371 let deleteHoliday = {
372 holidayId: item._id
373 };
374 http()
375 .delete(
376 "/deleteHoliday",
377 confirm("Are you sure you want to delete this?") && {
378 params: deleteHoliday
379 }
380 )
381 .then(response => {
382 this.snackbar = true;
383 this.text = response.data.message;
384 this.getHolidays();
385 })
386 .catch(error => {
387 console.log(error);
388 });
389 },
390 activeTab(type) {
391 switch (type) {
392 case "existing":
393 this.newActive = false;
394 this.isActive = true;
395 break;
396
397 default:
398 this.newActive = true;
399 this.isActive = false;
400 break;
401 }
402 },
403 close() {
404 this.dialog = false;
405 setTimeout(() => {
406 this.editedItem = Object.assign({}, this.defaultItem);
407 this.editedIndex = -1;
408 }, 300);
409 },
410 close1() {
411 this.dialog1 = false;
412 },
413 submit() {
414 if (this.$refs.form.validate()) {
415 this.loading = true;
416 http()
417 .post("/createHoliday", this.addHoliday)
418 .then(response => {
419 this.snackbar = true;
420 this.text = response.data.message;
421 this.getHolidays();
422 this.clear();
423 this.loading = false;
424 })
425 .catch(error => {
426 // console.log(error);
427 if ((this.snackbar = true)) {
428 this.text = error.response.data.message;
429 }
430 this.loading = false;
431 });
432 }
433 },
434 clear() {
435 this.$refs.form.reset();
436 },
437 save() {
438 http()
439 .put("/updateHoliday", this.editedItem)
440 .then(response => {
441 if ((this.snackbar = true)) {
442 this.text = response.data.message;
443 }
444 this.getHolidays();
445 })
446 .catch(error => {
447 // console.log(error);
448 });
449 this.close();
450 }
451 },
452 mounted() {
453 this.getHolidays();
454 },
455 created() {
456 this.$root.$on("app:search", search => {
457 this.search = search;
458 });
459 },
460 beforeDestroy() {
461 // dont forget to remove the listener
462 this.$root.$off("app:search");
463 }
464 };
465 </script>
466 <style scoped>
467 #td {
468 max-width: 200px;
469 }
470 .active {
471 background-color: black;
472 color: white !important;
473 }
474 .activebtn {
475 color: black !important;
476 }
477 </style>
src/pages/Notification/notification.vue
Diff comments   View file @4bd94ba
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-tabs grow slider-color="black"> 3 <v-tabs grow slider-color="black">
4 <v-tab 4 <v-tab
5 ripple 5 ripple
6 @click="activeTab('existing')" 6 @click="activeTab('existing')"
7 v-bind:class="{ active: isActive }" 7 v-bind:class="{ active: isActive }"
8 id="tab" 8 id="tab"
9 class="subheading" 9 class="subheading"
10 >Existing Notifictaion</v-tab> 10 >Existing Notifictaion</v-tab>
11 <v-tab 11 <v-tab
12 ripple 12 ripple
13 @click="activeTab('new')" 13 @click="activeTab('new')"
14 v-bind:class="{ active: newActive }" 14 v-bind:class="{ active: newActive }"
15 id="tab1" 15 id="tab1"
16 User 16 User
17 class="subheading" 17 class="subheading"
18 >Add New Notifictaion</v-tab> 18 >Add New Notifictaion</v-tab>
19 19
20 <!-- ****** EDITS REMINDER DETAILS ****** --> 20 <!-- ****** EDITS NOTIFICATION DETAILS ****** -->
21 21
22 <v-tab-item> 22 <v-tab-item>
23 <v-snackbar 23 <v-snackbar
24 :timeout="timeout" 24 :timeout="timeout"
25 :top="y === 'top'" 25 :top="y === 'top'"
26 :right="x === 'right'" 26 :right="x === 'right'"
27 :vertical="mode === 'vertical'" 27 :vertical="mode === 'vertical'"
28 v-model="snackbar" 28 v-model="snackbar"
29 color="success" 29 color="success"
30 >{{ text }}</v-snackbar> 30 >{{ text }}</v-snackbar>
31 <v-dialog v-model="dialog" max-width="600px"> 31 <v-dialog v-model="dialog" max-width="600px">
32 <v-flex xs12 sm12> 32 <v-flex xs12 sm12>
33 <v-toolbar color="v-toolbar"> 33 <v-toolbar color="v-toolbar">
34 <v-spacer></v-spacer> 34 <v-spacer></v-spacer>
35 <v-toolbar-title> 35 <v-toolbar-title>
36 <h3>Edit Notifictaion</h3> 36 <h3>Edit Notifictaion</h3>
37 </v-toolbar-title> 37 </v-toolbar-title>
38 <v-spacer></v-spacer> 38 <v-spacer></v-spacer>
39 </v-toolbar> 39 </v-toolbar>
40 <v-card flat> 40 <v-card flat>
41 <v-form ref="form"> 41 <v-form ref="form">
42 <v-container fluid> 42 <v-container fluid>
43 <v-layout> 43 <v-layout>
44 <v-flex 44 <v-flex
45 xs12 45 xs12
46 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4" 46 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4"
47 > 47 >
48 <v-avatar size="100px"> 48 <v-avatar size="100px">
49 <img src="/static/icon/user.png" v-if="!imageUrl" /> 49 <img src="/static/icon/user.png" v-if="!imageUrl" />
50 </v-avatar> 50 </v-avatar>
51 <input 51 <input
52 type="file" 52 type="file"
53 style="display: none" 53 style="display: none"
54 ref="image" 54 ref="image"
55 accept="image/*" 55 accept="image/*"
56 @change="onFilePicked" 56 @change="onFilePicked"
57 /> 57 />
58 <img 58 <img
59 :src="imageData.imageUrl" 59 :src="imageData.imageUrl"
60 height="150" 60 height="150"
61 v-if="imageUrl" 61 v-if="imageUrl"
62 style="border-radius:50%; width:200px" 62 style="border-radius:50%; width:200px"
63 /> 63 />
64 </v-flex> 64 </v-flex>
65 </v-layout> 65 </v-layout>
66 <v-flex xs12 sm12> 66 <v-flex xs12 sm12>
67 <v-layout> 67 <v-layout>
68 <v-flex xs4 class="pt-4 subheading"> 68 <v-flex xs4 class="pt-4 subheading">
69 <label class="right">Title:</label> 69 <label class="right">Title:</label>
70 </v-flex> 70 </v-flex>
71 <v-flex xs5 class="ml-3"> 71 <v-flex xs5 class="ml-3">
72 <v-text-field 72 <v-text-field
73 v-model="editedItem.title" 73 v-model="editedItem.title"
74 placeholder="fill your Title" 74 placeholder="fill your Title"
75 name="name" 75 name="name"
76 type="text" 76 type="text"
77 ></v-text-field> 77 ></v-text-field>
78 </v-flex> 78 </v-flex>
79 </v-layout> 79 </v-layout>
80 </v-flex> 80 </v-flex>
81 <v-flex xs12 sm12> 81 <v-flex xs12 sm12>
82 <v-layout> 82 <v-layout>
83 <v-flex xs4 class="pt-4 subheading"> 83 <v-flex xs4 class="pt-4 subheading">
84 <label class="right">Description:</label> 84 <label class="right">Description:</label>
85 </v-flex> 85 </v-flex>
86 <v-flex xs5 class="ml-3"> 86 <v-flex xs5 class="ml-3">
87 <v-text-field 87 <v-text-field
88 placeholder="fill your Description" 88 placeholder="fill your Description"
89 v-model="editedItem.description" 89 v-model="editedItem.description"
90 type="text" 90 type="text"
91 ></v-text-field> 91 ></v-text-field>
92 </v-flex> 92 </v-flex>
93 </v-layout> 93 </v-layout>
94 </v-flex> 94 </v-flex>
95 <v-layout> 95 <v-layout>
96 <v-flex xs12 sm10 offset-sm1> 96 <v-flex xs12 sm10 offset-sm1>
97 <v-card-actions> 97 <v-card-actions>
98 <v-btn round dark @click.native="close">Cancel</v-btn> 98 <v-btn round dark @click.native="close">Cancel</v-btn>
99 <v-spacer></v-spacer> 99 <v-spacer></v-spacer>
100 <v-btn round dark @click="save">Save</v-btn> 100 <v-btn round dark @click="save">Save</v-btn>
101 </v-card-actions> 101 </v-card-actions>
102 </v-flex> 102 </v-flex>
103 </v-layout> 103 </v-layout>
104 </v-container> 104 </v-container>
105 </v-form> 105 </v-form>
106 </v-card> 106 </v-card>
107 </v-flex> 107 </v-flex>
108 </v-dialog> 108 </v-dialog>
109 109
110 <!-- ****** PROFILE VIEW REMINDER DEATILS ****** --> 110 <!-- ****** PROFILE VIEW NOTIFICATION DEATILS ****** -->
111 111
112 <v-dialog v-model="dialog1" max-width="600px"> 112 <v-dialog v-model="dialog1" max-width="600px">
113 <v-toolbar color="white"> 113 <v-toolbar color="white">
114 <v-spacer></v-spacer> 114 <v-spacer></v-spacer>
115 <v-toolbar-title> 115 <v-toolbar-title>
116 <h3>Notification</h3> 116 <h3>Notification</h3>
117 </v-toolbar-title> 117 </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">Title:</h5> 135 <h5 class="right my-1">Title:</h5>
136 </v-flex> 136 </v-flex>
137 <v-flex sm6 xs8> 137 <v-flex sm6 xs8>
138 <h5 class="my-1">{{ editedItem.title }}</h5> 138 <h5 class="my-1">{{ editedItem.title }}</h5>
139 </v-flex> 139 </v-flex>
140 </v-layout> 140 </v-layout>
141 <v-layout> 141 <v-layout>
142 <v-flex xs5 sm6> 142 <v-flex xs5 sm6>
143 <h5 class="right my-1">Description:</h5> 143 <h5 class="right my-1">Description:</h5>
144 </v-flex> 144 </v-flex>
145 <v-flex sm6 xs8> 145 <v-flex sm6 xs8>
146 <h5 class="my-1">{{ editedItem.description }}</h5> 146 <h5 class="my-1">{{ editedItem.description }}</h5>
147 </v-flex> 147 </v-flex>
148 </v-layout> 148 </v-layout>
149 </v-flex> 149 </v-flex>
150 </v-layout> 150 </v-layout>
151 </v-container> 151 </v-container>
152 </v-card-text> 152 </v-card-text>
153 </v-card> 153 </v-card>
154 </v-dialog> 154 </v-dialog>
155 <v-snackbar 155 <v-snackbar
156 :timeout="timeout" 156 :timeout="timeout"
157 :top="y === 'top'" 157 :top="y === 'top'"
158 :right="x === 'right'" 158 :right="x === 'right'"
159 :vertical="mode === 'vertical'" 159 :vertical="mode === 'vertical'"
160 v-model="snackbar" 160 v-model="snackbar"
161 color="success" 161 color="success"
162 >{{ text }}</v-snackbar> 162 >{{ text }}</v-snackbar>
163 163
164 <!-- ****** EXISTING-USERS REMINDER TABLE ****** --> 164 <!-- ****** EXISTING-USERS NOTIFICATION TABLE ****** -->
165 165
166 <v-data-table 166 <v-data-table
167 :headers="headers" 167 :headers="headers"
168 :items="desserts" 168 :items="desserts"
169 :pagination.sync="pagination" 169 :pagination.sync="pagination"
170 :search="search" 170 :search="search"
171 > 171 >
172 <template slot="items" slot-scope="props"> 172 <template slot="items" slot-scope="props">
173 <td id="td" class="text-xs-center">{{ props.index}}</td> 173 <td id="td" class="text-xs-center">{{ props.index}}</td>
174 <td id="td" class="text-xs-center">{{ props.item.title}}</td> 174 <td id="td" class="text-xs-center">{{ props.item.title}}</td>
175 <td id="td" class="text-xs-center">{{ props.item.description}}</td> 175 <td id="td" class="text-xs-center">{{ props.item.description}}</td>
176 176
177 <td id="td" class="text-xs-center"> 177 <td id="td" class="text-xs-center">
178 <span> 178 <span>
179 <img 179 <img
180 style="cursor:pointer; width:25px; height:18px; " 180 style="cursor:pointer; width:25px; height:18px; "
181 class="mr-5" 181 class="mr-5"
182 @click="profile(props.item)" 182 @click="profile(props.item)"
183 src="/static/icon/eye1.png" 183 src="/static/icon/eye1.png"
184 /> 184 />
185 <img 185 <img
186 style="cursor:pointer; width:20px; height:18px; " 186 style="cursor:pointer; width:20px; height:18px; "
187 class="mr-5" 187 class="mr-5"
188 @click="editItem(props.item)" 188 @click="editItem(props.item)"
189 src="/static/icon/edit1.png" 189 src="/static/icon/edit1.png"
190 /> 190 />
191 <img 191 <img
192 style="cursor:pointer;width:20px; height:20px; " 192 style="cursor:pointer;width:20px; height:20px; "
193 class="mr-5" 193 class="mr-5"
194 @click="deleteItem(props.item)" 194 @click="deleteItem(props.item)"
195 src="/static/icon/delete1.png" 195 src="/static/icon/delete1.png"
196 /> 196 />
197 </span> 197 </span>
198 </td> 198 </td>
199 </template> 199 </template>
200 <v-alert 200 <v-alert
201 slot="no-results" 201 slot="no-results"
202 :value="true" 202 :value="true"
203 color="error" 203 color="error"
204 icon="warning" 204 icon="warning"
205 >Your search for "{{ search }}" found no results.</v-alert> 205 >Your search for "{{ search }}" found no results.</v-alert>
206 </v-data-table> 206 </v-data-table>
207 </v-tab-item> 207 </v-tab-item>
208 208
209 <!-- ****** ADD MULTIPLE REMINDER ****** --> 209 <!-- ****** ADD MULTIPLE NOTIFICATION ****** -->
210 210
211 <v-tab-item> 211 <v-tab-item>
212 <v-container> 212 <v-container>
213 <v-snackbar 213 <v-snackbar
214 :timeout="timeout" 214 :timeout="timeout"
215 :top="y === 'top'" 215 :top="y === 'top'"
216 :right="x === 'right'" 216 :right="x === 'right'"
217 :vertical="mode === 'vertical'" 217 :vertical="mode === 'vertical'"
218 v-model="snackbar" 218 v-model="snackbar"
219 color="success" 219 color="success"
220 >{{ text }}</v-snackbar> 220 >{{ text }}</v-snackbar>
221 <v-flex xs12 sm12 class="my-4"> 221 <v-flex xs12 sm12 class="my-4">
222 <v-card flat> 222 <v-card flat>
223 <v-form ref="form" v-model="valid" lazy-validation> 223 <v-form ref="form" v-model="valid" lazy-validation>
224 <v-container fluid> 224 <v-container fluid>
225 <v-layout> 225 <v-layout>
226 <v-flex 226 <v-flex
227 xs12 227 xs12
228 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" 228 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
229 > 229 >
230 <v-avatar size="100px"> 230 <v-avatar size="100px">
231 <img src="/static/icon/user.png" v-if="!imageUrl" /> 231 <img src="/static/icon/user.png" v-if="!imageUrl" />
232 </v-avatar> 232 </v-avatar>
233 <input 233 <input
234 type="file" 234 type="file"
235 style="display: none" 235 style="display: none"
236 ref="image" 236 ref="image"
237 accept="image/*" 237 accept="image/*"
238 @change="onFilePicked" 238 @change="onFilePicked"
239 /> 239 />
240 <img 240 <img
241 :src="imageData.imageUrl" 241 :src="imageData.imageUrl"
242 height="150" 242 height="150"
243 v-if="imageUrl" 243 v-if="imageUrl"
244 style="border-radius:50%; width:200px" 244 style="border-radius:50%; width:200px"
245 /> 245 />
246 </v-flex> 246 </v-flex>
247 </v-layout> 247 </v-layout>
248 <v-flex xs12> 248 <v-flex xs12>
249 <v-layout> 249 <v-layout>
250 <v-flex xs4 class="pt-4 subheading"> 250 <v-flex xs4 class="pt-4 subheading">
251 <label class="right">Title:</label> 251 <label class="right">Title:</label>
252 </v-flex> 252 </v-flex>
253 <v-flex xs4 class="ml-3"> 253 <v-flex xs4 class="ml-3">
254 <v-text-field 254 <v-text-field
255 v-model="addNotification.title" 255 v-model="addNotification.title"
256 placeholder="fill your Title" 256 placeholder="fill your Title"
257 type="text" 257 type="text"
258 :rules="titleRules" 258 :rules="titleRules"
259 required 259 required
260 ></v-text-field> 260 ></v-text-field>
261 </v-flex> 261 </v-flex>
262 </v-layout> 262 </v-layout>
263 </v-flex> 263 </v-flex>
264 <v-flex xs12> 264 <v-flex xs12>
265 <v-layout> 265 <v-layout>
266 <v-flex xs4 class="pt-4 subheading"> 266 <v-flex xs4 class="pt-4 subheading">
267 <label class="right">Description:</label> 267 <label class="right">Description:</label>
268 </v-flex> 268 </v-flex>
269 <v-flex xs4 class="ml-3"> 269 <v-flex xs4 class="ml-3">
270 <v-text-field 270 <v-text-field
271 placeholder="fill your Description" 271 placeholder="fill your Description"
272 :rules="descriptionRules" 272 :rules="descriptionRules"
273 v-model="addNotification.description" 273 v-model="addNotification.description"
274 type="text" 274 type="text"
275 required 275 required
276 ></v-text-field> 276 ></v-text-field>
277 </v-flex> 277 </v-flex>
278 </v-layout> 278 </v-layout>
279 </v-flex> 279 </v-flex>
280 <v-layout> 280 <v-layout>
281 <v-flex xs12 sm6 offset-sm3> 281 <v-flex xs12 sm6 offset-sm3>
282 <v-card-actions> 282 <v-card-actions>
283 <v-btn @click="clear" round dark>clear</v-btn> 283 <v-btn @click="clear" round dark>clear</v-btn>
284 <v-spacer></v-spacer> 284 <v-spacer></v-spacer>
285 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 285 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
286 </v-card-actions> 286 </v-card-actions>
287 </v-flex> 287 </v-flex>
288 </v-layout> 288 </v-layout>
289 </v-container> 289 </v-container>
290 </v-form> 290 </v-form>
291 </v-card> 291 </v-card>
292 </v-flex> 292 </v-flex>
293 </v-container> 293 </v-container>
294 </v-tab-item> 294 </v-tab-item>
295 </v-tabs> 295 </v-tabs>
296 <div class="loader" v-if="showLoader"> 296 <div class="loader" v-if="showLoader">
297 <v-progress-circular indeterminate color="white"></v-progress-circular> 297 <v-progress-circular indeterminate color="white"></v-progress-circular>
298 </div> 298 </div>
299 </v-app> 299 </v-app>
300 </template> 300 </template>
301 301
302 <script> 302 <script>
303 import http from "@/Services/http.js"; 303 import http from "@/Services/http.js";
304 import Util from "@/util"; 304 import Util from "@/util";
305 305
306 export default { 306 export default {
307 data: () => ({ 307 data: () => ({
308 snackbar: false, 308 snackbar: false,
309 y: "top", 309 y: "top",
310 x: "right", 310 x: "right",
311 mode: "", 311 mode: "",
312 timeout: 3000, 312 timeout: 3000,
313 text: "", 313 text: "",
314 loading: false, 314 loading: false,
315 date: null, 315 date: null,
316 search: "", 316 search: "",
317 showLoader: false, 317 showLoader: false,
318 dialog: false, 318 dialog: false,
319 dialog1: false, 319 dialog1: false,
320 valid: true, 320 valid: true,
321 isActive: true, 321 isActive: true,
322 newActive: false, 322 newActive: false,
323 pagination: { 323 pagination: {
324 rowsPerPage: 15 324 rowsPerPage: 15
325 }, 325 },
326 imageData: {}, 326 imageData: {},
327 imageName: "", 327 imageName: "",
328 imageUrl: "", 328 imageUrl: "",
329 imageFile: "", 329 imageFile: "",
330 titleRules: [v => !!v || " Tilte is required"], 330 titleRules: [v => !!v || " Tilte is required"],
331 descriptionRules: [v => !!v || " Description is required"], 331 descriptionRules: [v => !!v || " Description is required"],
332 headers: [ 332 headers: [
333 { 333 {
334 text: "No", 334 text: "No",
335 align: "center", 335 align: "center",
336 sortable: false, 336 sortable: false,
337 value: "No" 337 value: "No"
338 }, 338 },
339 { text: "Title", value: "title", sortable: false, align: "center" }, 339 { text: "Title", value: "title", sortable: false, align: "center" },
340 { 340 {
341 text: "Description", 341 text: "Description",
342 value: "description", 342 value: "description",
343 sortable: false, 343 sortable: false,
344 align: "center" 344 align: "center"
345 }, 345 },
346 { text: "Action", value: "", sortable: false, align: "center" } 346 { text: "Action", value: "", sortable: false, align: "center" }
347 ], 347 ],
348 desserts: [], 348 desserts: [],
349 editedIndex: -1, 349 editedIndex: -1,
350 addNotification: { 350 addNotification: {
351 title: "", 351 title: "",
352 description: "" 352 description: ""
353 }, 353 },
354 editedItem: { 354 editedItem: {
355 title: "", 355 title: "",
356 description: "" 356 description: ""
357 }, 357 },
358 defaultItem: { 358 defaultItem: {
359 title: "", 359 title: "",
360 description: "" 360 description: ""
361 } 361 }
362 }), 362 }),
363 methods: { 363 methods: {
364 pickFile() { 364 pickFile() {
365 this.$refs.image.click(); 365 this.$refs.image.click();
366 }, 366 },
367 367
368 onFilePicked(e) { 368 onFilePicked(e) {
369 // console.log(e) 369 // console.log(e)
370 const files = e.target.files; 370 const files = e.target.files;
371 this.imageData.upload = e.target.files[0]; 371 this.imageData.upload = e.target.files[0];
372 if (files[0] !== undefined) { 372 if (files[0] !== undefined) {
373 this.imageName = files[0].name; 373 this.imageName = files[0].name;
374 if (this.imageName.lastIndexOf(".") <= 0) { 374 if (this.imageName.lastIndexOf(".") <= 0) {
375 return; 375 return;
376 } 376 }
377 const fr = new FileReader(); 377 const fr = new FileReader();
378 fr.readAsDataURL(files[0]); 378 fr.readAsDataURL(files[0]);
379 fr.addEventListener("load", () => { 379 fr.addEventListener("load", () => {
380 this.imageUrl = fr.result; 380 this.imageUrl = fr.result;
381 this.imageFile = files[0]; // this is an image file that can be sent to server... 381 this.imageFile = files[0]; // this is an image file that can be sent to server...
382 this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 382 this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
383 console.log("upload=======>", this.imageData.imageUrl); 383 console.log("upload=======>", this.imageData.imageUrl);
384 console.log("imageFile", this.imageFile); 384 console.log("imageFile", this.imageFile);
385 }); 385 });
386 } else { 386 } else {
387 this.imageName = ""; 387 this.imageName = "";
388 this.imageFile = ""; 388 this.imageFile = "";
389 this.imageUrl = ""; 389 this.imageUrl = "";
390 } 390 }
391 }, 391 },
392 getNotifications() { 392 getNotifications() {
393 this.showLoader = true; 393 this.showLoader = true;
394 var token = this.$store.state.token; 394 var token = this.$store.state.token;
395 http() 395 http()
396 .get("/getNotificationsList", { 396 .get("/getNotificationsList", {
397 headers: { Authorization: "Bearer " + token } 397 headers: { Authorization: "Bearer " + token }
398 }) 398 })
399 .then(response => { 399 .then(response => {
400 this.desserts = response.data.data; 400 this.desserts = response.data.data;
401 this.showLoader = false; 401 this.showLoader = false;
402 // console.log("getNotifications=====>",this.desserts) 402 // console.log("getNotifications=====>",this.desserts)
403 }) 403 })
404 .catch(err => { 404 .catch(err => {
405 // console.log("err====>", err); 405 // console.log("err====>", err);
406 this.showLoader = false; 406 this.showLoader = false;
407 if (error.response.status === 401) { 407 if (error.response.status === 401) {
408 this.$router.replace({ path: "/" }); 408 this.$router.replace({ path: "/" });
409 this.$store.dispatch("setToken", null); 409 this.$store.dispatch("setToken", null);
410 this.$store.dispatch("Id", null); 410 this.$store.dispatch("Id", null);
411 } 411 }
412 }); 412 });
413 }, 413 },
414 editItem(item) { 414 editItem(item) {
415 this.editedIndex = this.desserts.indexOf(item); 415 this.editedIndex = this.desserts.indexOf(item);
416 this.editedItem = Object.assign({}, item); 416 this.editedItem = Object.assign({}, item);
417 this.dialog = true; 417 this.dialog = true;
418 }, 418 },
419 profile(item) { 419 profile(item) {
420 this.editedIndex = this.desserts.indexOf(item); 420 this.editedIndex = this.desserts.indexOf(item);
421 this.editedItem = Object.assign({}, item); 421 this.editedItem = Object.assign({}, item);
422 this.dialog1 = true; 422 this.dialog1 = true;
423 }, 423 },
424 424
425 deleteItem(item) { 425 deleteItem(item) {
426 let deleteNotification = { 426 let deleteNotification = {
427 notificationId: item._id 427 notificationId: item._id
428 }; 428 };
429 http() 429 http()
430 .delete( 430 .delete(
431 "/deleteNotification", 431 "/deleteNotification",
432 confirm("Are you sure you want to delete this?") && { 432 confirm("Are you sure you want to delete this?") && {
433 params: deleteNotification 433 params: deleteNotification
434 } 434 }
435 ) 435 )
436 .then(response => { 436 .then(response => {
437 // console.log("deleteNotification",deleteNotification) 437 // console.log("deleteNotification",deleteNotification)
438 if ((this.snackbar = true)) { 438 if ((this.snackbar = true)) {
439 this.text = "Successfully Delete Notification"; 439 this.text = "Successfully Delete Notification";
440 } 440 }
441 this.getNotifications(); 441 this.getNotifications();
442 }) 442 })
443 .catch(error => { 443 .catch(error => {
444 console.log(error); 444 console.log(error);
445 }); 445 });
446 }, 446 },
447 activeTab(type) { 447 activeTab(type) {
448 switch (type) { 448 switch (type) {
449 case "existing": 449 case "existing":
450 this.newActive = false; 450 this.newActive = false;
451 this.isActive = true; 451 this.isActive = true;
452 break; 452 break;
453 453
454 default: 454 default:
455 this.newActive = true; 455 this.newActive = true;
456 this.isActive = false; 456 this.isActive = false;
457 break; 457 break;
458 } 458 }
459 }, 459 },
460 close() { 460 close() {
461 this.dialog = false; 461 this.dialog = false;
462 setTimeout(() => { 462 setTimeout(() => {
463 this.editedItem = Object.assign({}, this.defaultItem); 463 this.editedItem = Object.assign({}, this.defaultItem);
464 this.editedIndex = -1; 464 this.editedIndex = -1;
465 }, 300); 465 }, 300);
466 }, 466 },
467 close1() { 467 close1() {
468 this.dialog1 = false; 468 this.dialog1 = false;
469 }, 469 },
470 submit() { 470 submit() {
471 if (this.$refs.form.validate()) { 471 if (this.$refs.form.validate()) {
472 let imageData = new FormData(); 472 let imageData = new FormData();
473 imageData.append("upload", this.imageFile); 473 imageData.append("upload", this.imageFile);
474 console.log(imageData); 474 console.log(imageData);
475 let create = { 475 let create = {
476 title: this.addNotification.title, 476 title: this.addNotification.title,
477 description: this.addNotification.description 477 description: this.addNotification.description
478 // imageData 478 // imageData
479 }; 479 };
480 console.log(create); 480 console.log(create);
481 this.loading = true; 481 this.loading = true;
482 http() 482 http()
483 .post("/createNotification", create) 483 .post("/createNotification", create)
484 .then(response => { 484 .then(response => {
485 console.log(create); 485 console.log(create);
486 if ((this.snackbar = true)) { 486 if ((this.snackbar = true)) {
487 this.text = "New Notification added successfully"; 487 this.text = "New Notification added successfully";
488 } 488 }
489 this.getNotifications(); 489 this.getNotifications();
490 this.clear(); 490 this.clear();
491 this.loading = false; 491 this.loading = false;
492 }) 492 })
493 .catch(error => { 493 .catch(error => {
494 // console.log(error); 494 // console.log(error);
495 if ((this.snackbar = true)) { 495 if ((this.snackbar = true)) {
496 this.text = error.response.data.message; 496 this.text = error.response.data.message;
497 } 497 }
498 this.loading = false; 498 this.loading = false;
499 }); 499 });
500 } 500 }
501 }, 501 },
502 clear() { 502 clear() {
503 this.$refs.form.reset(); 503 this.$refs.form.reset();
504 }, 504 },
505 save() { 505 save() {
506 let imageData = new FormData(); 506 let imageData = new FormData();
507 imageData.append("upload", this.imageFile); 507 imageData.append("upload", this.imageFile);
508 console.log(imageData); 508 console.log(imageData);
509 let editNotification = { 509 let editNotification = {
510 notificationId: this.editedItem._id, 510 notificationId: this.editedItem._id,
511 title: this.editedItem.title, 511 title: this.editedItem.title,
512 description: this.editedItem.description 512 description: this.editedItem.description
513 // imageData 513 // imageData
514 }; 514 };
515 http() 515 http()
516 .put("/updateNotification", editNotification) 516 .put("/updateNotification", editNotification)
517 .then(response => { 517 .then(response => {
518 // console.log("editNotification",editNotification); 518 // console.log("editNotification",editNotification);
519 if ((this.snackbar = true)) { 519 if ((this.snackbar = true)) {
520 this.text = "Successfully Edit Notification"; 520 this.text = "Successfully Edit Notification";
521 } 521 }
522 this.getNotifications(); 522 this.getNotifications();
523 }) 523 })
524 .catch(error => { 524 .catch(error => {
525 // console.log(error); 525 // console.log(error);
526 }); 526 });
527 this.close(); 527 this.close();
528 } 528 }
529 }, 529 },
530 mounted() { 530 mounted() {
531 this.getNotifications(); 531 this.getNotifications();
532 }, 532 },
533 created() { 533 created() {
534 this.$root.$on("app:search", search => { 534 this.$root.$on("app:search", search => {
535 this.search = search; 535 this.search = search;
536 }); 536 });
537 }, 537 },
538 beforeDestroy() { 538 beforeDestroy() {
539 // dont forget to remove the listener 539 // dont forget to remove the listener
540 this.$root.$off("app:search"); 540 this.$root.$off("app:search");
541 } 541 }
542 }; 542 };
543 </script> 543 </script>
544 <style scoped> 544 <style scoped>
545 #td { 545 #td {
546 max-width: 200px; 546 max-width: 200px;
547 } 547 }
548 .active { 548 .active {
549 background-color: black; 549 background-color: black;
550 color: white !important; 550 color: white !important;
551 } 551 }
552 .activebtn { 552 .activebtn {
553 color: black !important; 553 color: black !important;
554 } 554 }
555 </style> 555 </style>
src/pages/Teachers/teachers.vue
Diff comments   View file @4bd94ba
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-tabs grow slider-color="black"> 3 <v-tabs grow slider-color="black">
4 <v-tab 4 <v-tab
5 ripple 5 ripple
6 @click="activeTab('existing')" 6 @click="activeTab('existing')"
7 v-bind:class="{ active: isActive }" 7 v-bind:class="{ active: isActive }"
8 id="tab" 8 id="tab"
9 class="subheading" 9 class="subheading"
10 >Existing Teachers</v-tab> 10 >Existing Teachers</v-tab>
11 <v-tab 11 <v-tab
12 ripple 12 ripple
13 @click="activeTab('new')" 13 @click="activeTab('new')"
14 v-bind:class="{ active: newActive }" 14 v-bind:class="{ active: newActive }"
15 id="tab1" 15 id="tab1"
16 User 16 User
17 class="subheading" 17 class="subheading"
18 >Add New Teachers</v-tab> 18 >Add New Teachers</v-tab>
19 <!-- ****** EDIT TEACHERS DETAILS ****** --> 19 <!-- ****** EDIT TEACHERS DETAILS ****** -->
20 <v-tab-item> 20 <v-tab-item>
21 <v-snackbar 21 <v-snackbar
22 :timeout="timeout" 22 :timeout="timeout"
23 :top="y === 'top'" 23 :top="y === 'top'"
24 :right="x === 'right'" 24 :right="x === 'right'"
25 :vertical="mode === 'vertical'" 25 :vertical="mode === 'vertical'"
26 v-model="snackbar" 26 v-model="snackbar"
27 color="success" 27 color="success"
28 >{{ text }}</v-snackbar> 28 >{{ text }}</v-snackbar>
29 <v-dialog v-model="dialog" max-width="1100px" scrollable> 29 <v-dialog v-model="dialog" max-width="1100px" scrollable>
30 <v-card flat> 30 <v-card flat>
31 <v-toolbar color="grey lighten-2" flat> 31 <v-toolbar color="grey lighten-2" flat>
32 <v-spacer></v-spacer> 32 <v-spacer></v-spacer>
33 <v-toolbar-title>Edit Teacher Profile</v-toolbar-title> 33 <v-toolbar-title>Edit Teacher Profile</v-toolbar-title>
34 <v-spacer></v-spacer> 34 <v-spacer></v-spacer>
35 </v-toolbar> 35 </v-toolbar>
36 <v-card-text style="height: 800px;"> 36 <v-card-text style="height: 800px;">
37 <v-form ref="form"> 37 <v-form ref="form">
38 <v-container fluid> 38 <v-container fluid>
39 <v-layout> 39 <v-layout>
40 <v-flex 40 <v-flex
41 xs12 41 xs12
42 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" 42 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
43 > 43 >
44 <v-avatar size="160px"> 44 <v-avatar size="160px">
45 <img 45 <img
46 src="/static/icon/user.png" 46 src="/static/icon/user.png"
47 v-if="!editedItem.profilePicUrl && !imageUrl" 47 v-if="!editedItem.profilePicUrl && !imageUrl"
48 /> 48 />
49 <img 49 <img
50 :src="editedItem.profilePicUrl" 50 :src="editedItem.profilePicUrl"
51 v-else-if="editedItem.profilePicUrl && !imageUrl" 51 v-else-if="editedItem.profilePicUrl && !imageUrl"
52 /> 52 />
53 <img 53 <img
54 v-if="imageUrl" 54 v-if="imageUrl"
55 :src="imageUrl" 55 :src="imageUrl"
56 height="150" 56 height="150"
57 style="border-radius:50%; width:200px" 57 style="border-radius:50%; width:200px"
58 /> 58 />
59 </v-avatar> 59 </v-avatar>
60 <input 60 <input
61 type="file" 61 type="file"
62 style="display:none" 62 style="display:none"
63 ref="image" 63 ref="image"
64 accept="image/*" 64 accept="image/*"
65 @change="onFilePicked" 65 @change="onFilePicked"
66 /> 66 />
67 </v-flex> 67 </v-flex>
68 </v-layout> 68 </v-layout>
69 <v-layout> 69 <v-layout>
70 <v-flex xs12 sm6> 70 <v-flex xs12 sm6>
71 <v-layout> 71 <v-layout>
72 <v-flex xs4 class="pt-4 subheading"> 72 <v-flex xs4 class="pt-4 subheading">
73 <label class="right">Full Name:</label> 73 <label class="right">Full Name:</label>
74 </v-flex> 74 </v-flex>
75 <v-flex xs8 class="ml-3"> 75 <v-flex xs8 class="ml-3">
76 <v-text-field 76 <v-text-field
77 v-model="editedItem.name" 77 v-model="editedItem.name"
78 placeholder="fill your full Name" 78 placeholder="fill your full Name"
79 name="name" 79 name="name"
80 type="text" 80 type="text"
81 required 81 required
82 ></v-text-field> 82 ></v-text-field>
83 </v-flex> 83 </v-flex>
84 </v-layout> 84 </v-layout>
85 </v-flex> 85 </v-flex>
86 <v-flex xs12 sm6> 86 <v-flex xs12 sm6>
87 <v-layout> 87 <v-layout>
88 <v-flex xs4 class="pt-4 subheading"> 88 <v-flex xs4 class="pt-4 subheading">
89 <label class="right">Email ID:</label> 89 <label class="right">Email ID:</label>
90 </v-flex> 90 </v-flex>
91 <v-flex xs8 class="ml-3"> 91 <v-flex xs8 class="ml-3">
92 <v-text-field 92 <v-text-field
93 placeholder="fill your email" 93 placeholder="fill your email"
94 v-model="editedItem.email" 94 v-model="editedItem.email"
95 type="text" 95 type="text"
96 name="email" 96 name="email"
97 required 97 required
98 ></v-text-field> 98 ></v-text-field>
99 </v-flex> 99 </v-flex>
100 </v-layout> 100 </v-layout>
101 </v-flex> 101 </v-flex>
102 </v-layout> 102 </v-layout>
103 <v-layout> 103 <v-layout>
104 <v-flex xs12 sm6> 104 <v-flex xs12 sm6>
105 <v-layout> 105 <v-layout>
106 <v-flex xs4 class="pt-4 subheading"> 106 <v-flex xs4 class="pt-4 subheading">
107 <label class="right">Date of Birth:</label> 107 <label class="right">Date of Birth:</label>
108 </v-flex> 108 </v-flex>
109 <v-flex xs8 class="ml-3"> 109 <v-flex xs8 class="ml-3">
110 <v-menu 110 <v-menu
111 ref="menu" 111 ref="menu"
112 :close-on-content-click="false" 112 :close-on-content-click="false"
113 v-model="menu2" 113 v-model="menu2"
114 :nudge-right="40" 114 :nudge-right="40"
115 lazy 115 lazy
116 transition="scale-transition" 116 transition="scale-transition"
117 offset-y 117 offset-y
118 full-width 118 full-width
119 min-width="290px" 119 min-width="290px"
120 > 120 >
121 <v-text-field 121 <v-text-field
122 slot="activator" 122 slot="activator"
123 v-model="editedItem.dob" 123 v-model="editedItem.dob"
124 placeholder="Select date" 124 placeholder="Select date"
125 ></v-text-field> 125 ></v-text-field>
126 <v-date-picker 126 <v-date-picker
127 ref="picker" 127 ref="picker"
128 v-model="editedItem.dob" 128 v-model="editedItem.dob"
129 :max="new Date().toISOString().substr(0, 10)" 129 :max="new Date().toISOString().substr(0, 10)"
130 min="1950-01-01" 130 min="1950-01-01"
131 @input="menu2 = false" 131 @input="menu2 = false"
132 ></v-date-picker> 132 ></v-date-picker>
133 </v-menu> 133 </v-menu>
134 </v-flex> 134 </v-flex>
135 </v-layout> 135 </v-layout>
136 </v-flex> 136 </v-flex>
137 <v-flex xs12 sm6> 137 <v-flex xs12 sm6>
138 <v-layout> 138 <v-layout>
139 <v-flex xs4 class="pt-4 subheading"> 139 <v-flex xs4 class="pt-4 subheading">
140 <label class="right">City:</label> 140 <label class="right">City:</label>
141 </v-flex> 141 </v-flex>
142 <v-flex xs8 class="ml-3"> 142 <v-flex xs8 class="ml-3">
143 <v-text-field 143 <v-text-field
144 v-model="editedItem.city" 144 v-model="editedItem.city"
145 placeholder="fill your City Name" 145 placeholder="fill your City Name"
146 name="City" 146 name="City"
147 type="text" 147 type="text"
148 required 148 required
149 ></v-text-field> 149 ></v-text-field>
150 </v-flex> 150 </v-flex>
151 </v-layout> 151 </v-layout>
152 </v-flex> 152 </v-flex>
153 </v-layout> 153 </v-layout>
154 <v-layout> 154 <v-layout>
155 <v-flex xs12 sm6> 155 <v-flex xs12 sm6>
156 <v-layout> 156 <v-layout>
157 <v-flex xs4 class="pt-4 subheading"> 157 <v-flex xs4 class="pt-4 subheading">
158 <label class="right">State:</label> 158 <label class="right">State:</label>
159 </v-flex> 159 </v-flex>
160 <v-flex xs8 class="ml-3"> 160 <v-flex xs8 class="ml-3">
161 <v-text-field 161 <v-text-field
162 v-model="editedItem.state" 162 v-model="editedItem.state"
163 placeholder="fill your State Name" 163 placeholder="fill your State Name"
164 name="state" 164 name="state"
165 type="text" 165 type="text"
166 required 166 required
167 ></v-text-field> 167 ></v-text-field>
168 </v-flex> 168 </v-flex>
169 </v-layout> 169 </v-layout>
170 </v-flex> 170 </v-flex>
171 <v-flex xs12 sm6> 171 <v-flex xs12 sm6>
172 <v-layout> 172 <v-layout>
173 <v-flex xs4 class="pt-4 subheading"> 173 <v-flex xs4 class="pt-4 subheading">
174 <label class="right">PinCode:</label> 174 <label class="right">PinCode:</label>
175 </v-flex> 175 </v-flex>
176 <v-flex xs8 class="ml-3"> 176 <v-flex xs8 class="ml-3">
177 <v-text-field 177 <v-text-field
178 v-model="editedItem.pincode" 178 v-model="editedItem.pincode"
179 placeholder="fill your pincode" 179 placeholder="fill your pincode"
180 name="pincode" 180 name="pincode"
181 type="number" 181 type="number"
182 required 182 required
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-layout> 187 </v-layout>
188 <v-layout> 188 <v-layout>
189 <v-flex xs12 sm6> 189 <v-flex xs12 sm6>
190 <v-layout> 190 <v-layout>
191 <v-flex xs4 class="pt-4 subheading"> 191 <v-flex xs4 class="pt-4 subheading">
192 <label class="right">Mobile NO:</label> 192 <label class="right">Mobile NO:</label>
193 </v-flex> 193 </v-flex>
194 <v-flex xs8 class="ml-3"> 194 <v-flex xs8 class="ml-3">
195 <v-text-field 195 <v-text-field
196 v-model="editedItem.mobileNo" 196 v-model="editedItem.mobileNo"
197 placeholder="fill your MobileNo" 197 placeholder="fill your MobileNo"
198 name="mobileNo" 198 name="mobileNo"
199 type="number" 199 type="number"
200 required 200 required
201 ></v-text-field> 201 ></v-text-field>
202 </v-flex> 202 </v-flex>
203 </v-layout> 203 </v-layout>
204 </v-flex> 204 </v-flex>
205 <v-flex xs12 sm6> 205 <v-flex xs12 sm6>
206 <v-layout> 206 <v-layout>
207 <v-flex xs4 class="pt-4 subheading"> 207 <v-flex xs4 class="pt-4 subheading">
208 <label class="right">Select Country:</label> 208 <label class="right">Select Country:</label>
209 </v-flex> 209 </v-flex>
210 <v-flex xs8 class="ml-3"> 210 <v-flex xs8 class="ml-3">
211 <v-autocomplete 211 <v-autocomplete
212 v-model="editedItem.country" 212 v-model="editedItem.country"
213 :items="countries" 213 :items="countries"
214 placeholder="Select Country Name" 214 placeholder="Select Country Name"
215 required 215 required
216 ></v-autocomplete> 216 ></v-autocomplete>
217 </v-flex> 217 </v-flex>
218 </v-layout> 218 </v-layout>
219 </v-flex> 219 </v-flex>
220 </v-layout> 220 </v-layout>
221 <v-layout> 221 <v-layout>
222 <v-flex xs12 sm6> 222 <v-flex xs12 sm6>
223 <v-layout> 223 <v-layout>
224 <v-flex xs4 class="pt-4 subheading"> 224 <v-flex xs4 class="pt-4 subheading">
225 <label class="right">Join Date:</label> 225 <label class="right">Join Date:</label>
226 </v-flex> 226 </v-flex>
227 <v-flex xs8 class="ml-3"> 227 <v-flex xs8 class="ml-3">
228 <v-menu 228 <v-menu
229 ref="menu" 229 ref="menu"
230 :close-on-content-click="false" 230 :close-on-content-click="false"
231 v-model="menu3" 231 v-model="menu3"
232 :nudge-right="40" 232 :nudge-right="40"
233 lazy 233 lazy
234 transition="scale-transition" 234 transition="scale-transition"
235 offset-y 235 offset-y
236 full-width 236 full-width
237 min-width="290px" 237 min-width="290px"
238 > 238 >
239 <v-text-field 239 <v-text-field
240 slot="activator" 240 slot="activator"
241 v-model="editedItem.joinDate" 241 v-model="editedItem.joinDate"
242 placeholder="Select date" 242 placeholder="Select date"
243 ></v-text-field> 243 ></v-text-field>
244 <v-date-picker 244 <v-date-picker
245 ref="picker" 245 ref="picker"
246 v-model="editedItem.joinDate" 246 v-model="editedItem.joinDate"
247 :max="new Date().toISOString().substr(0, 10)" 247 :max="new Date().toISOString().substr(0, 10)"
248 min="1950-01-01" 248 min="1950-01-01"
249 @input="menu3 = false" 249 @input="menu3 = false"
250 ></v-date-picker> 250 ></v-date-picker>
251 </v-menu> 251 </v-menu>
252 </v-flex> 252 </v-flex>
253 </v-layout> 253 </v-layout>
254 </v-flex> 254 </v-flex>
255 <v-flex xs12 sm6> 255 <v-flex xs12 sm6>
256 <v-layout> 256 <v-layout>
257 <v-flex xs4 class="pt-4 subheading"> 257 <v-flex xs4 class="pt-4 subheading">
258 <label class="right">Uplaod Image:</label> 258 <label class="right">Uplaod Image:</label>
259 </v-flex> 259 </v-flex>
260 <v-flex xs8 class="ml-3"> 260 <v-flex xs8 class="ml-3">
261 <v-text-field 261 <v-text-field
262 label="Select Image" 262 label="Select Image"
263 @click="pickFile" 263 @click="pickFile"
264 v-model="imageName" 264 v-model="imageName"
265 append-icon="attach_file" 265 append-icon="attach_file"
266 ></v-text-field> 266 ></v-text-field>
267 </v-flex> 267 </v-flex>
268 </v-layout> 268 </v-layout>
269 </v-flex> 269 </v-flex>
270 </v-layout> 270 </v-layout>
271 <v-layout> 271 <v-layout>
272 <v-flex xs12 sm12> 272 <v-flex xs12 sm12>
273 <v-layout> 273 <v-layout>
274 <v-flex xs3 class="pt-4 subheading pl-3" style="max-width: 17%;"> 274 <v-flex xs3 class="pt-4 subheading pl-3" style="max-width: 17%;">
275 <label class>Present Address:</label> 275 <label class>Present Address:</label>
276 </v-flex> 276 </v-flex>
277 <v-flex xs12> 277 <v-flex xs12>
278 <v-text-field 278 <v-text-field
279 name="input-4-3" 279 name="input-4-3"
280 v-model="editedItem.presentAddress" 280 v-model="editedItem.presentAddress"
281 placeholder="fill Your present Address" 281 placeholder="fill Your present Address"
282 required 282 required
283 ></v-text-field> 283 ></v-text-field>
284 </v-flex> 284 </v-flex>
285 </v-layout> 285 </v-layout>
286 </v-flex> 286 </v-flex>
287 <v-flex xs12 sm12> 287 <v-flex xs12 sm12>
288 <v-layout> 288 <v-layout>
289 <v-flex xs3 class="pt-4 subheading" style="max-width: 17%;"> 289 <v-flex xs3 class="pt-4 subheading" style="max-width: 17%;">
290 <label>Permanent Address:</label> 290 <label>Permanent Address:</label>
291 </v-flex> 291 </v-flex>
292 <v-flex xs12> 292 <v-flex xs12>
293 <v-text-field 293 <v-text-field
294 name="input-4-3" 294 name="input-4-3"
295 v-model="editedItem.permanentAddress" 295 v-model="editedItem.permanentAddress"
296 placeholder="fill Your Permanent Address" 296 placeholder="fill Your Permanent Address"
297 required 297 required
298 ></v-text-field> 298 ></v-text-field>
299 </v-flex> 299 </v-flex>
300 </v-layout> 300 </v-layout>
301 </v-flex> 301 </v-flex>
302 </v-layout> 302 </v-layout>
303 <v-layout> 303 <v-layout>
304 <v-flex xs12 sm12> 304 <v-flex xs12 sm12>
305 <v-card-actions> 305 <v-card-actions>
306 <v-btn round dark @click.native="close">Cancel</v-btn> 306 <v-btn round dark @click.native="close">Cancel</v-btn>
307 <v-spacer></v-spacer> 307 <v-spacer></v-spacer>
308 <v-btn round dark :loading="loading" @click="save">Save</v-btn> 308 <v-btn round dark :loading="loading" @click="save">Save</v-btn>
309 </v-card-actions> 309 </v-card-actions>
310 </v-flex> 310 </v-flex>
311 </v-layout> 311 </v-layout>
312 </v-container> 312 </v-container>
313 </v-form> 313 </v-form>
314 </v-card-text> 314 </v-card-text>
315 </v-card> 315 </v-card>
316 </v-dialog> 316 </v-dialog>
317 317
318 <!-- ****** PROFILE VIEW TEACHERS DETAILS ****** --> 318 <!-- ****** PROFILE VIEW TEACHERS DETAILS ****** -->
319 319
320 <v-dialog v-model="dialog1" max-width="600px" scrollable> 320 <v-dialog v-model="dialog1" max-width="600px" scrollable>
321 <v-card> 321 <v-card>
322 <v-toolbar color="grey lighten-2" flat> 322 <v-toolbar color="grey lighten-2" flat>
323 <v-spacer></v-spacer> 323 <v-spacer></v-spacer>
324 <v-toolbar-title> 324 <v-toolbar-title>
325 <h3>Teacher Profile</h3> 325 <h3>Teacher Profile</h3>
326 </v-toolbar-title> 326 </v-toolbar-title>
327 <v-spacer></v-spacer> 327 <v-spacer></v-spacer>
328 <v-icon @click="close1">close</v-icon> 328 <v-icon @click="close1">close</v-icon>
329 </v-toolbar> 329 </v-toolbar>
330 <v-card-text style="height: 700px;"> 330 <v-card-text style="height: 700px;">
331 <v-container grid-list-md> 331 <v-container grid-list-md>
332 <v-layout wrap> 332 <v-layout wrap>
333 <v-flex> 333 <v-flex>
334 <v-flex align-center justify-center layout text-xs-center> 334 <v-flex align-center justify-center layout text-xs-center>
335 <v-avatar size="160px"> 335 <v-avatar size="160px">
336 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" /> 336 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" />
337 <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" /> 337 <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" />
338 </v-avatar> 338 </v-avatar>
339 </v-flex> 339 </v-flex>
340 <v-layout> 340 <v-layout>
341 <v-flex xs5 sm6> 341 <v-flex xs5 sm6>
342 <h5 class="right my-1">Full Name:</h5> 342 <h5 class="right my-1">Full Name:</h5>
343 </v-flex> 343 </v-flex>
344 <v-flex sm6 xs8> 344 <v-flex sm6 xs8>
345 <h5 class="my-1">{{ editedItem.name }}</h5> 345 <h5 class="my-1">{{ editedItem.name }}</h5>
346 </v-flex> 346 </v-flex>
347 </v-layout> 347 </v-layout>
348 <v-layout> 348 <v-layout>
349 <v-flex xs5 sm6> 349 <v-flex xs5 sm6>
350 <h5 class="right my-1">Email:</h5> 350 <h5 class="right my-1">Email:</h5>
351 </v-flex> 351 </v-flex>
352 <v-flex sm6 xs8> 352 <v-flex sm6 xs8>
353 <h5 class="my-1">{{ editedItem.email }}</h5> 353 <h5 class="my-1">{{ editedItem.email }}</h5>
354 </v-flex> 354 </v-flex>
355 </v-layout> 355 </v-layout>
356 <v-layout> 356 <v-layout>
357 <v-flex xs5 sm6> 357 <v-flex xs5 sm6>
358 <h5 class="right my-1">City:</h5> 358 <h5 class="right my-1">City:</h5>
359 </v-flex> 359 </v-flex>
360 <v-flex sm6 xs8> 360 <v-flex sm6 xs8>
361 <h5 class="my-1">{{ editedItem.city }}</h5> 361 <h5 class="my-1">{{ editedItem.city }}</h5>
362 </v-flex> 362 </v-flex>
363 </v-layout> 363 </v-layout>
364 <v-layout> 364 <v-layout>
365 <v-flex xs5 sm6> 365 <v-flex xs5 sm6>
366 <h5 class="right my-1">State:</h5> 366 <h5 class="right my-1">State:</h5>
367 </v-flex> 367 </v-flex>
368 <v-flex sm6 xs8> 368 <v-flex sm6 xs8>
369 <h5 class="my-1">{{ editedItem.state }}</h5> 369 <h5 class="my-1">{{ editedItem.state }}</h5>
370 </v-flex> 370 </v-flex>
371 </v-layout> 371 </v-layout>
372 <v-layout> 372 <v-layout>
373 <v-flex xs5 sm6> 373 <v-flex xs5 sm6>
374 <h5 class="right my-1">Country:</h5> 374 <h5 class="right my-1">Country:</h5>
375 </v-flex> 375 </v-flex>
376 <v-flex sm6 xs8> 376 <v-flex sm6 xs8>
377 <h5 class="my-1">{{ editedItem.country }}</h5> 377 <h5 class="my-1">{{ editedItem.country }}</h5>
378 </v-flex> 378 </v-flex>
379 </v-layout> 379 </v-layout>
380 <v-layout> 380 <v-layout>
381 <v-flex xs5 sm6> 381 <v-flex xs5 sm6>
382 <h5 class="right my-1">Pincode:</h5> 382 <h5 class="right my-1">Pincode:</h5>
383 </v-flex> 383 </v-flex>
384 <v-flex sm6 xs8> 384 <v-flex sm6 xs8>
385 <h5 class="my-1">{{ editedItem.pincode }}</h5> 385 <h5 class="my-1">{{ editedItem.pincode }}</h5>
386 </v-flex> 386 </v-flex>
387 </v-layout> 387 </v-layout>
388 <v-layout> 388 <v-layout>
389 <v-flex xs5 sm6> 389 <v-flex xs5 sm6>
390 <h5 class="right my-1">Mobile No:</h5> 390 <h5 class="right my-1">Mobile No:</h5>
391 </v-flex> 391 </v-flex>
392 <v-flex sm6 xs8> 392 <v-flex sm6 xs8>
393 <h5 class="my-1">{{ editedItem.mobileNo }}</h5> 393 <h5 class="my-1">{{ editedItem.mobileNo }}</h5>
394 </v-flex> 394 </v-flex>
395 </v-layout> 395 </v-layout>
396 <v-layout> 396 <v-layout>
397 <v-flex xs5 sm6> 397 <v-flex xs5 sm6>
398 <h5 class="right my-1">Join Date:</h5> 398 <h5 class="right my-1">Join Date:</h5>
399 </v-flex> 399 </v-flex>
400 <v-flex sm6 xs8> 400 <v-flex sm6 xs8>
401 <h5 class="my-1">{{ dates(editedItem.joinDate) }}</h5> 401 <h5 class="my-1">{{ dates(editedItem.joinDate) }}</h5>
402 </v-flex> 402 </v-flex>
403 </v-layout> 403 </v-layout>
404 <v-layout> 404 <v-layout>
405 <v-flex xs5 sm6> 405 <v-flex xs5 sm6>
406 <h5 class="right my-1">Date Of Birth:</h5> 406 <h5 class="right my-1">Date Of Birth:</h5>
407 </v-flex> 407 </v-flex>
408 <v-flex sm6 xs8> 408 <v-flex sm6 xs8>
409 <h5 class="my-1">{{ dates(editedItem.dob) }}</h5> 409 <h5 class="my-1">{{ dates(editedItem.dob) }}</h5>
410 </v-flex> 410 </v-flex>
411 </v-layout> 411 </v-layout>
412 <v-layout> 412 <v-layout>
413 <v-flex xs6 sm6> 413 <v-flex xs6 sm6>
414 <h5 class="right my-1">Permanent Address:</h5> 414 <h5 class="right my-1">Permanent Address:</h5>
415 </v-flex> 415 </v-flex>
416 <v-flex sm6 xs8> 416 <v-flex sm6 xs8>
417 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5> 417 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5>
418 </v-flex> 418 </v-flex>
419 </v-layout> 419 </v-layout>
420 <v-layout> 420 <v-layout>
421 <v-flex xs6 sm6> 421 <v-flex xs6 sm6>
422 <h5 class="right my-1">present Address:</h5> 422 <h5 class="right my-1">present Address:</h5>
423 </v-flex> 423 </v-flex>
424 <v-flex sm6 xs8> 424 <v-flex sm6 xs8>
425 <h5 class="my-1">{{ editedItem.presentAddress }}</h5> 425 <h5 class="my-1">{{ editedItem.presentAddress }}</h5>
426 </v-flex> 426 </v-flex>
427 </v-layout> 427 </v-layout>
428 </v-flex> 428 </v-flex>
429 </v-layout> 429 </v-layout>
430 </v-container> 430 </v-container>
431 </v-card-text> 431 </v-card-text>
432 </v-card> 432 </v-card>
433 </v-dialog> 433 </v-dialog>
434 <v-snackbar 434 <v-snackbar
435 :timeout="timeout" 435 :timeout="timeout"
436 :top="y === 'top'" 436 :top="y === 'top'"
437 :right="x === 'right'" 437 :right="x === 'right'"
438 :vertical="mode === 'vertical'" 438 :vertical="mode === 'vertical'"
439 v-model="snackbar" 439 v-model="snackbar"
440 color="success" 440 color="success"
441 >{{ text }}</v-snackbar> 441 >{{ text }}</v-snackbar>
442 442
443 <!-- ****** EXISTING-Teachers TABLE DATA****** --> 443 <!-- ****** EXISTING-Teachers TABLE DATA****** -->
444 444
445 <v-data-table 445 <v-data-table
446 :headers="headers" 446 :headers="headers"
447 :items="desserts" 447 :items="desserts"
448 :pagination.sync="pagination" 448 :pagination.sync="pagination"
449 :search="search" 449 :search="search"
450 > 450 >
451 <template slot="items" slot-scope="props"> 451 <template slot="items" slot-scope="props">
452 <td id="td" class="text-xs-center">{{ props.index}}</td> 452 <td id="td" class="text-xs-center">{{ props.index}}</td>
453 <td id="td" class="text-xs-center"> 453 <td id="td" class="text-xs-center">
454 <v-avatar> 454 <v-avatar>
455 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> 455 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
456 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> 456 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
457 </v-avatar> 457 </v-avatar>
458 </td> 458 </td>
459 <td id="td" class="text-xs-center">{{ props.item.name}}</td> 459 <td id="td" class="text-xs-center">{{ props.item.name}}</td>
460 <td id="td" class="text-xs-center">{{ props.item.email }}</td> 460 <td id="td" class="text-xs-center">{{ props.item.email }}</td>
461 <td id="td" class="text-xs-center">{{ dates(props.item.dob) }}</td> 461 <td id="td" class="text-xs-center">{{ dates(props.item.dob) }}</td>
462 <td id="td" class="text-xs-center">{{ dates(props.item.joinDate)}}</td> 462 <td id="td" class="text-xs-center">{{ dates(props.item.joinDate)}}</td>
463 <td id="td" class="text-xs-center">{{ props.item.mobileNo }}</td> 463 <td id="td" class="text-xs-center">{{ props.item.mobileNo }}</td>
464 <td class="text-xs-center"> 464 <td class="text-xs-center">
465 <span> 465 <span>
466 <img 466 <img
467 style="cursor:pointer; width:25px; height:18px; " 467 style="cursor:pointer; width:25px; height:18px; "
468 class="mr-5" 468 class="mr-5"
469 @click="profile(props.item)" 469 @click="profile(props.item)"
470 src="/static/icon/eye1.png" 470 src="/static/icon/eye1.png"
471 /> 471 />
472 <img 472 <img
473 style="cursor:pointer; width:20px; height:18px; " 473 style="cursor:pointer; width:20px; height:18px; "
474 class="mr-5" 474 class="mr-5"
475 @click="editItem(props.item)" 475 @click="editItem(props.item)"
476 src="/static/icon/edit1.png" 476 src="/static/icon/edit1.png"
477 /> 477 />
478 <img 478 <img
479 style="cursor:pointer;width:20px; height:20px; " 479 style="cursor:pointer;width:20px; height:20px; "
480 class="mr-5" 480 class="mr-5"
481 @click="deleteItem(props.item)" 481 @click="deleteItem(props.item)"
482 src="/static/icon/delete1.png" 482 src="/static/icon/delete1.png"
483 /> 483 />
484 </span> 484 </span>
485 </td> 485 </td>
486 </template> 486 </template>
487 <v-alert 487 <v-alert
488 slot="no-results" 488 slot="no-results"
489 :value="true" 489 :value="true"
490 color="error" 490 color="error"
491 icon="warning" 491 icon="warning"
492 >Your search for "{{ search }}" found no results.</v-alert> 492 >Your search for "{{ search }}" found no results.</v-alert>
493 </v-data-table> 493 </v-data-table>
494 </v-tab-item> 494 </v-tab-item>
495 495
496 <!-- ****** Add Teachers Data****** --> 496 <!-- ****** Add Teachers Data****** -->
497 <v-tab-item> 497 <v-tab-item>
498 <v-container> 498 <v-container>
499 <v-snackbar 499 <v-snackbar
500 :timeout="timeout" 500 :timeout="timeout"
501 :top="y === 'top'" 501 :top="y === 'top'"
502 :right="x === 'right'" 502 :right="x === 'right'"
503 :vertical="mode === 'vertical'" 503 :vertical="mode === 'vertical'"
504 v-model="snackbar" 504 v-model="snackbar"
505 color="success" 505 color="success"
506 >{{ text }}</v-snackbar> 506 >{{ text }}</v-snackbar>
507 <v-flex xs12 sm12 class="my-4"> 507 <v-flex xs12 sm12 class="my-4">
508 <v-card flat> 508 <v-card flat>
509 <v-form ref="form" v-model="valid" lazy-validation> 509 <v-form ref="form" v-model="valid" lazy-validation>
510 <v-container fluid> 510 <v-container fluid>
511 <v-layout> 511 <v-layout>
512 <v-flex 512 <v-flex
513 xs12 513 xs12
514 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" 514 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
515 > 515 >
516 <v-avatar size="100px"> 516 <v-avatar size="100px">
517 <img src="/static/icon/user.png" v-if="!imageUrl" /> 517 <img src="/static/icon/user.png" v-if="!imageUrl" />
518 </v-avatar> 518 </v-avatar>
519 <img 519 <img
520 :src="imageUrl" 520 :src="imageUrl"
521 height="150" 521 height="150"
522 v-if="imageUrl" 522 v-if="imageUrl"
523 style="border-radius:50%; width:200px" 523 style="border-radius:50%; width:200px"
524 /> 524 />
525 </v-flex> 525 </v-flex>
526 </v-layout> 526 </v-layout>
527 <v-layout> 527 <v-layout>
528 <v-flex xs12 sm6> 528 <v-flex xs12 sm6>
529 <v-layout> 529 <v-layout>
530 <v-flex xs4 class="pt-4 subheading"> 530 <v-flex xs4 class="pt-4 subheading">
531 <label class="right">Full Name:</label> 531 <label class="right">Full Name:</label>
532 </v-flex> 532 </v-flex>
533 <v-flex xs8 class="ml-3"> 533 <v-flex xs8 class="ml-3">
534 <v-text-field 534 <v-text-field
535 v-model="addTeachers.name" 535 v-model="addTeachers.name"
536 placeholder="fill your full Name" 536 placeholder="fill your full Name"
537 name="name" 537 name="name"
538 type="text" 538 type="text"
539 :rules="nameRules" 539 :rules="nameRules"
540 required 540 required
541 ></v-text-field> 541 ></v-text-field>
542 </v-flex> 542 </v-flex>
543 </v-layout> 543 </v-layout>
544 </v-flex> 544 </v-flex>
545 <v-flex xs12 sm6> 545 <v-flex xs12 sm6>
546 <v-layout> 546 <v-layout>
547 <v-flex xs4 class="pt-4 subheading"> 547 <v-flex xs4 class="pt-4 subheading">
548 <label class="right">Email ID:</label> 548 <label class="right">Email ID:</label>
549 </v-flex> 549 </v-flex>
550 <v-flex xs8 class="ml-3"> 550 <v-flex xs8 class="ml-3">
551 <v-text-field 551 <v-text-field
552 placeholder="fill your email" 552 placeholder="fill your email"
553 :rules="emailRules" 553 :rules="emailRules"
554 v-model="addTeachers.email" 554 v-model="addTeachers.email"
555 type="text" 555 type="text"
556 name="email" 556 name="email"
557 required 557 required
558 ></v-text-field> 558 ></v-text-field>
559 </v-flex> 559 </v-flex>
560 </v-layout> 560 </v-layout>
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">Date of Birth:</label> 567 <label class="right">Date of Birth:</label>
568 </v-flex> 568 </v-flex>
569 <v-flex xs8 class="ml-3"> 569 <v-flex xs8 class="ml-3">
570 <v-menu 570 <v-menu
571 ref="menu" 571 ref="menu"
572 :close-on-content-click="false" 572 :close-on-content-click="false"
573 v-model="menu" 573 v-model="menu"
574 :nudge-right="40" 574 :nudge-right="40"
575 lazy 575 lazy
576 transition="scale-transition" 576 transition="scale-transition"
577 offset-y 577 offset-y
578 full-width 578 full-width
579 min-width="290px" 579 min-width="290px"
580 > 580 >
581 <v-text-field 581 <v-text-field
582 slot="activator" 582 slot="activator"
583 :rules="dateRules" 583 :rules="dateRules"
584 v-model="addTeachers.date" 584 v-model="addTeachers.date"
585 placeholder="Select date" 585 placeholder="Select date"
586 ></v-text-field> 586 ></v-text-field>
587 <v-date-picker 587 <v-date-picker
588 ref="picker" 588 ref="picker"
589 v-model="addTeachers.date" 589 v-model="addTeachers.date"
590 :max="new Date().toISOString().substr(0, 10)" 590 :max="new Date().toISOString().substr(0, 10)"
591 min="1950-01-01" 591 min="1950-01-01"
592 @input="menu = false" 592 @input="menu = false"
593 ></v-date-picker> 593 ></v-date-picker>
594 </v-menu> 594 </v-menu>
595 </v-flex> 595 </v-flex>
596 </v-layout> 596 </v-layout>
597 </v-flex> 597 </v-flex>
598 <v-flex xs12 sm6> 598 <v-flex xs12 sm6>
599 <v-layout> 599 <v-layout>
600 <v-flex xs4 class="pt-4 subheading"> 600 <v-flex xs4 class="pt-4 subheading">
601 <label class="right">City:</label> 601 <label class="right">City:</label>
602 </v-flex> 602 </v-flex>
603 <v-flex xs8 class="ml-3"> 603 <v-flex xs8 class="ml-3">
604 <v-text-field 604 <v-text-field
605 v-model="addTeachers.city" 605 v-model="addTeachers.city"
606 placeholder="fill your City Name" 606 placeholder="fill your City Name"
607 name="City" 607 name="City"
608 type="text" 608 type="text"
609 :rules="cityRules" 609 :rules="cityRules"
610 required 610 required
611 ></v-text-field> 611 ></v-text-field>
612 </v-flex> 612 </v-flex>
613 </v-layout> 613 </v-layout>
614 </v-flex> 614 </v-flex>
615 </v-layout> 615 </v-layout>
616 <v-layout> 616 <v-layout>
617 <v-flex xs12 sm6> 617 <v-flex xs12 sm6>
618 <v-layout> 618 <v-layout>
619 <v-flex xs4 class="pt-4 subheading"> 619 <v-flex xs4 class="pt-4 subheading">
620 <label class="right">State:</label> 620 <label class="right">State:</label>
621 </v-flex> 621 </v-flex>
622 <v-flex xs8 class="ml-3"> 622 <v-flex xs8 class="ml-3">
623 <v-text-field 623 <v-text-field
624 v-model="addTeachers.state" 624 v-model="addTeachers.state"
625 placeholder="fill your State Name" 625 placeholder="fill your State Name"
626 name="state" 626 name="state"
627 type="text" 627 type="text"
628 :rules="stateRules" 628 :rules="stateRules"
629 required 629 required
630 ></v-text-field> 630 ></v-text-field>
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">PinCode:</label> 637 <label class="right">PinCode:</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.pincode" 641 v-model="addTeachers.pincode"
642 placeholder="fill your pincode" 642 placeholder="fill your pincode"
643 name="pincode" 643 name="pincode"
644 type="number" 644 type="number"
645 :rules="pincode" 645 :rules="pincode"
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">Mobile NO:</label> 656 <label class="right">Mobile NO:</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.mobileNo" 660 v-model="addTeachers.mobileNo"
661 placeholder="fill your MobileNo" 661 placeholder="fill your MobileNo"
662 name="mobileNo" 662 name="mobileNo"
663 type="number" 663 type="number"
664 :rules="mobileNoRules" 664 :rules="mobileNoRules"
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">Select Country:</label> 673 <label class="right">Select Country:</label>
674 </v-flex> 674 </v-flex>
675 <v-flex xs8 class="ml-3"> 675 <v-flex xs8 class="ml-3">
676 <v-autocomplete 676 <v-autocomplete
677 v-model="addTeachers.country" 677 v-model="addTeachers.country"
678 :rules="country" 678 :rules="country"
679 :items="countries" 679 :items="countries"
680 placeholder="Select Country Name" 680 placeholder="Select Country Name"
681 required 681 required
682 ></v-autocomplete> 682 ></v-autocomplete>
683 </v-flex> 683 </v-flex>
684 </v-layout> 684 </v-layout>
685 </v-flex> 685 </v-flex>
686 </v-layout> 686 </v-layout>
687 <v-layout> 687 <v-layout>
688 <v-flex xs12 sm6> 688 <v-flex xs12 sm6>
689 <v-layout> 689 <v-layout>
690 <v-flex xs4 class="pt-4 subheading"> 690 <v-flex xs4 class="pt-4 subheading">
691 <label class="right">Join Date</label> 691 <label class="right">Join Date</label>
692 </v-flex> 692 </v-flex>
693 <v-flex xs8 class="ml-3"> 693 <v-flex xs8 class="ml-3">
694 <v-menu 694 <v-menu
695 ref="menu1" 695 ref="menu1"
696 :close-on-content-click="false" 696 :close-on-content-click="false"
697 v-model="menu1" 697 v-model="menu1"
698 :nudge-right="40" 698 :nudge-right="40"
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 min-width="290px" 703 min-width="290px"
704 > 704 >
705 <v-text-field 705 <v-text-field
706 slot="activator" 706 slot="activator"
707 :rules="joinDateRules" 707 :rules="joinDateRules"
708 v-model="addTeachers.joinDate" 708 v-model="addTeachers.joinDate"
709 placeholder="Select date" 709 placeholder="Select date"
710 ></v-text-field> 710 ></v-text-field>
711 <v-date-picker 711 <v-date-picker
712 ref="picker" 712 ref="picker"
713 v-model="addTeachers.joinDate" 713 v-model="addTeachers.joinDate"
714 :max="new Date().toISOString().substr(0, 10)" 714 :max="new Date().toISOString().substr(0, 10)"
715 min="1950-01-01" 715 min="1950-01-01"
716 @input="menu1 = false" 716 @input="menu1 = false"
717 ></v-date-picker> 717 ></v-date-picker>
718 </v-menu> 718 </v-menu>
719 </v-flex> 719 </v-flex>
720 </v-layout> 720 </v-layout>
721 </v-flex> 721 </v-flex>
722 <v-flex xs12 sm6> 722 <v-flex xs12 sm6>
723 <v-layout> 723 <v-layout>
724 <v-flex xs4 class="pt-4 subheading"> 724 <v-flex xs4 class="pt-4 subheading">
725 <label class="right">Uplaod Image:</label> 725 <label class="right">Uplaod Image:</label>
726 </v-flex> 726 </v-flex>
727 <v-flex xs8 class="ml-3"> 727 <v-flex xs8 class="ml-3">
728 <v-text-field 728 <v-text-field
729 label="Select Image" 729 label="Select Image"
730 @click="pickFile" 730 @click="pickFile"
731 v-model="imageName" 731 v-model="imageName"
732 append-icon="attach_file" 732 append-icon="attach_file"
733 ></v-text-field> 733 ></v-text-field>
734 <input 734 <input
735 type="file" 735 type="file"
736 style="display:none" 736 style="display:none"
737 ref="image" 737 ref="image"
738 accept="image/*" 738 accept="image/*"
739 @change="onFilePicked" 739 @change="onFilePicked"
740 /> 740 />
741 </v-flex> 741 </v-flex>
742 </v-layout> 742 </v-layout>
743 </v-flex> 743 </v-flex>
744 </v-layout> 744 </v-layout>
745 <v-layout> 745 <v-layout>
746 <v-flex xs12 sm12> 746 <v-flex xs12 sm12>
747 <v-layout> 747 <v-layout>
748 <v-flex xs3 class="pt-4 subheading pl-4" style="max-width: 17%;"> 748 <v-flex xs3 class="pt-4 subheading pl-4" style="max-width: 17%;">
749 <label class>Present Address:</label> 749 <label class>Present Address:</label>
750 </v-flex> 750 </v-flex>
751 <v-flex xs12 class="presentInput"> 751 <v-flex xs12 class="presentInput">
752 <v-text-field 752 <v-text-field
753 name="input-4-3" 753 name="input-4-3"
754 v-model="addTeachers.presentAddress" 754 v-model="addTeachers.presentAddress"
755 :rules="presentAddress" 755 :rules="presentAddress"
756 placeholder="fill Your present Address" 756 placeholder="fill Your present Address"
757 required 757 required
758 ></v-text-field> 758 ></v-text-field>
759 </v-flex> 759 </v-flex>
760 </v-layout> 760 </v-layout>
761 </v-flex> 761 </v-flex>
762 <v-flex xs12 sm12> 762 <v-flex xs12 sm12>
763 <v-layout> 763 <v-layout>
764 <v-flex xs3 class="pt-4 subheading" style="max-width: 17%;"> 764 <v-flex xs3 class="pt-4 subheading" style="max-width: 17%;">
765 <label>Permanent Address:</label> 765 <label>Permanent Address:</label>
766 </v-flex> 766 </v-flex>
767 <v-flex xs12 class="presentInput"> 767 <v-flex xs12 class="presentInput">
768 <v-text-field 768 <v-text-field
769 name="input-4-3" 769 name="input-4-3"
770 v-model="addTeachers.permanentAddress" 770 v-model="addTeachers.permanentAddress"
771 :rules="permanentAddress" 771 :rules="permanentAddress"
772 placeholder="fill Your Permanent Address" 772 placeholder="fill Your Permanent Address"
773 required 773 required
774 ></v-text-field> 774 ></v-text-field>
775 </v-flex> 775 </v-flex>
776 </v-layout> 776 </v-layout>
777 </v-flex> 777 </v-flex>
778 </v-layout> 778 </v-layout>
779 <v-layout> 779 <v-layout>
780 <v-flex xs12 sm12> 780 <v-flex xs12 sm12>
781 <v-card-actions> 781 <v-card-actions>
782 <v-btn @click="clear" round dark>clear</v-btn> 782 <v-btn @click="clear" round dark>clear</v-btn>
783 <v-spacer></v-spacer> 783 <v-spacer></v-spacer>
784 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 784 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
785 </v-card-actions> 785 </v-card-actions>
786 </v-flex> 786 </v-flex>
787 </v-layout> 787 </v-layout>
788 </v-container> 788 </v-container>
789 </v-form> 789 </v-form>
790 </v-card> 790 </v-card>
791 </v-flex> 791 </v-flex>
792 </v-container> 792 </v-container>
793 </v-tab-item> 793 </v-tab-item>
794 </v-tabs> 794 </v-tabs>
795 <div class="loader" v-if="showLoader"> 795 <div class="loader" v-if="showLoader">
796 <v-progress-circular indeterminate color="white"></v-progress-circular> 796 <v-progress-circular indeterminate color="white"></v-progress-circular>
797 </div> 797 </div>
798 </v-app> 798 </v-app>
799 </template> 799 </template>
800 800
801 <script> 801 <script>
802 // import AppToolbar from '@/components/AppToolbar';
803 import http from "@/Services/http.js"; 802 import http from "@/Services/http.js";
804 import Util from "@/util"; 803 import Util from "@/util";
805 import moment from "moment"; 804 import moment from "moment";
806 805
807 export default { 806 export default {
808 components: {
809 // "one-month": onemonth,
810 },
811 data: () => ({ 807 data: () => ({
812 component: "report-generate", 808 component: "report-generate",
813 snackbar: false, 809 snackbar: false,
814 y: "top", 810 y: "top",
815 x: "right", 811 x: "right",
816 mode: "", 812 mode: "",
817 timeout: 3000, 813 timeout: 3000,
818 text: "", 814 text: "",
819 showLoader: false, 815 showLoader: false,
820 loading: false, 816 loading: false,
821 date: null, 817 date: null,
822 search: "", 818 search: "",
823 menu: false, 819 menu: false,
824 menu1: false, 820 menu1: false,
825 menu2: false, 821 menu2: false,
826 menu3: false, 822 menu3: false,
827 dialog: false, 823 dialog: false,
828 dialog1: false, 824 dialog1: false,
829 valid: true, 825 valid: true,
830 isActive: true, 826 isActive: true,
831 newActive: false, 827 newActive: false,
832 pagination: { 828 pagination: {
833 rowsPerPage: 15 829 rowsPerPage: 15
834 }, 830 },
835 imageData: {}, 831 imageData: {},
836 imageName: "", 832 imageName: "",
837 imageUrl: "", 833 imageUrl: "",
838 imageFile: "", 834 imageFile: "",
839 nameRules: [v => !!v || " Full Name is required"], 835 nameRules: [v => !!v || " Full Name is required"],
840 dateRules: [v => !!v || " DOB is required"], 836 dateRules: [v => !!v || " DOB is required"],
841 cityRules: [v => !!v || " City Name is required"], 837 cityRules: [v => !!v || " City Name is required"],
842 pincode: [v => !!v || " Pincode is required"], 838 pincode: [v => !!v || " Pincode is required"],
843 country: [v => !!v || " Country Name is required"], 839 country: [v => !!v || " Country Name is required"],
844 permanentAddress: [v => !!v || " Permanent Address is required"], 840 permanentAddress: [v => !!v || " Permanent Address is required"],
845 presentAddress: [v => !!v || " Present Address is required"], 841 presentAddress: [v => !!v || " Present Address is required"],
846 mobileNoRules: [v => !!v || "Mobile Number is required"], 842 mobileNoRules: [v => !!v || "Mobile Number is required"],
847 stateRules: [v => !!v || "State Name is required"], 843 stateRules: [v => !!v || "State Name is required"],
848 joinDateRules: [v => !!v || " Join Date is required"], 844 joinDateRules: [v => !!v || " Join Date is required"],
849 errorMessages: "", 845 errorMessages: "",
850 emailRules: [ 846 emailRules: [
851 v => !!v || "E-mail is required", 847 v => !!v || "E-mail is required",
852 v => 848 v =>
853 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 849 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
854 "E-mail must be valid" 850 "E-mail must be valid"
855 ], 851 ],
856 countries: [ 852 countries: [
857 "Afghanistan", 853 "Afghanistan",
858 "Albania", 854 "Albania",
859 "Algeria", 855 "Algeria",
860 "Andorra", 856 "Andorra",
861 "Angola", 857 "Angola",
862 "Anguilla", 858 "Anguilla",
863 "Antigua &amp; Barbuda", 859 "Antigua &amp; Barbuda",
864 "Argentina", 860 "Argentina",
865 "Armenia", 861 "Armenia",
866 "Aruba", 862 "Aruba",
867 "Australia", 863 "Australia",
868 "Austria", 864 "Austria",
869 "Azerbaijan", 865 "Azerbaijan",
870 "Bahamas", 866 "Bahamas",
871 "Bahrain", 867 "Bahrain",
872 "Bangladesh", 868 "Bangladesh",
873 "Barbados", 869 "Barbados",
874 "Belarus", 870 "Belarus",
875 "Belgium", 871 "Belgium",
876 "Belize", 872 "Belize",
877 "Benin", 873 "Benin",
878 "Bermuda", 874 "Bermuda",
879 "Bhutan", 875 "Bhutan",
880 "Bolivia", 876 "Bolivia",
881 "Bosnia &amp; Herzegovina", 877 "Bosnia &amp; Herzegovina",
882 "Botswana", 878 "Botswana",
883 "Brazil", 879 "Brazil",
884 "British Virgin Islands", 880 "British Virgin Islands",
885 "Brunei", 881 "Brunei",
886 "Bulgaria", 882 "Bulgaria",
887 "Burkina Faso", 883 "Burkina Faso",
888 "Burundi", 884 "Burundi",
889 "Cambodia", 885 "Cambodia",
890 "Cameroon", 886 "Cameroon",
891 "Cape Verde", 887 "Cape Verde",
892 "Cayman Islands", 888 "Cayman Islands",
893 "Chad", 889 "Chad",
894 "Chile", 890 "Chile",
895 "China", 891 "China",
896 "Colombia", 892 "Colombia",
897 "Congo", 893 "Congo",
898 "Cook Islands", 894 "Cook Islands",
899 "Costa Rica", 895 "Costa Rica",
900 "Cote D Ivoire", 896 "Cote D Ivoire",
901 "Croatia", 897 "Croatia",
902 "Cruise Ship", 898 "Cruise Ship",
903 "Cuba", 899 "Cuba",
904 "Cyprus", 900 "Cyprus",
905 "Czech Republic", 901 "Czech Republic",
906 "Denmark", 902 "Denmark",
907 "Djibouti", 903 "Djibouti",
908 "Dominica", 904 "Dominica",
909 "Dominican Republic", 905 "Dominican Republic",
910 "Ecuador", 906 "Ecuador",
911 "Egypt", 907 "Egypt",
912 "El Salvador", 908 "El Salvador",
913 "Equatorial Guinea", 909 "Equatorial Guinea",
914 "Estonia", 910 "Estonia",
915 "Ethiopia", 911 "Ethiopia",
916 "Falkland Islands", 912 "Falkland Islands",
917 "Faroe Islands", 913 "Faroe Islands",
918 "Fiji", 914 "Fiji",
919 "Finland", 915 "Finland",
920 "France", 916 "France",
921 "French Polynesia", 917 "French Polynesia",
922 "French West Indies", 918 "French West Indies",
923 "Gabon", 919 "Gabon",
924 "Gambia", 920 "Gambia",
925 "Georgia", 921 "Georgia",
926 "Germany", 922 "Germany",
927 "Ghana", 923 "Ghana",
928 "Gibraltar", 924 "Gibraltar",
929 "Greece", 925 "Greece",
930 "Greenland", 926 "Greenland",
931 "Grenada", 927 "Grenada",
932 "Guam", 928 "Guam",
933 "Guatemala", 929 "Guatemala",
934 "Guernsey", 930 "Guernsey",
935 "Guinea", 931 "Guinea",
936 "Guinea Bissau", 932 "Guinea Bissau",
937 "Guyana", 933 "Guyana",
938 "Haiti", 934 "Haiti",
939 "Honduras", 935 "Honduras",
940 "Hong Kong", 936 "Hong Kong",
941 "Hungary", 937 "Hungary",
942 "Iceland", 938 "Iceland",
943 "India", 939 "India",
944 "Indonesia", 940 "Indonesia",
945 "Iran", 941 "Iran",
946 "Iraq", 942 "Iraq",
947 "Ireland", 943 "Ireland",
948 "Isle of Man", 944 "Isle of Man",
949 "Israel", 945 "Israel",
950 "Italy", 946 "Italy",
951 "Jamaica", 947 "Jamaica",
952 "Japan", 948 "Japan",
953 "Jersey", 949 "Jersey",
954 "Jordan", 950 "Jordan",
955 "Kazakhstan", 951 "Kazakhstan",
956 "Kenya", 952 "Kenya",
957 "Kuwait", 953 "Kuwait",
958 "Kyrgyz Republic", 954 "Kyrgyz Republic",
959 "Laos", 955 "Laos",
960 "Latvia", 956 "Latvia",
961 "Lebanon", 957 "Lebanon",
962 "Lesotho", 958 "Lesotho",
963 "Liberia", 959 "Liberia",
964 "Libya", 960 "Libya",
965 "Liechtenstein", 961 "Liechtenstein",
966 "Lithuania", 962 "Lithuania",
967 "Luxembourg", 963 "Luxembourg",
968 "Macau", 964 "Macau",
969 "Macedonia", 965 "Macedonia",
970 "Madagascar", 966 "Madagascar",
971 "Malawi", 967 "Malawi",
972 "Malaysia", 968 "Malaysia",
973 "Maldives", 969 "Maldives",
974 "Mali", 970 "Mali",
975 "Malta", 971 "Malta",
976 "Mauritania", 972 "Mauritania",
977 "Mauritius", 973 "Mauritius",
978 "Mexico", 974 "Mexico",
979 "Moldova", 975 "Moldova",
980 "Monaco", 976 "Monaco",
981 "Mongolia", 977 "Mongolia",
982 "Montenegro", 978 "Montenegro",
983 "Montserrat", 979 "Montserrat",
984 "Morocco", 980 "Morocco",
985 "Mozambique", 981 "Mozambique",
986 "Namibia", 982 "Namibia",
987 "Nepal", 983 "Nepal",
988 "Netherlands", 984 "Netherlands",
989 "Netherlands Antilles", 985 "Netherlands Antilles",
990 "New Caledonia", 986 "New Caledonia",
991 "New Zealand", 987 "New Zealand",
992 "Nicaragua", 988 "Nicaragua",
993 "Niger", 989 "Niger",
994 "Nigeria", 990 "Nigeria",
995 "Norway", 991 "Norway",
996 "Oman", 992 "Oman",
997 "Pakistan", 993 "Pakistan",
998 "Palestine", 994 "Palestine",
999 "Panama", 995 "Panama",
1000 "Papua New Guinea", 996 "Papua New Guinea",
1001 "Paraguay", 997 "Paraguay",
1002 "Peru", 998 "Peru",
1003 "Philippines", 999 "Philippines",
1004 "Poland", 1000 "Poland",
1005 "Portugal", 1001 "Portugal",
1006 "Puerto Rico", 1002 "Puerto Rico",
1007 "Qatar", 1003 "Qatar",
1008 "Reunion", 1004 "Reunion",
1009 "Romania", 1005 "Romania",
1010 "Russia", 1006 "Russia",
1011 "Rwanda", 1007 "Rwanda",
1012 "Saint Pierre &amp; Miquelon", 1008 "Saint Pierre &amp; Miquelon",
1013 "Samoa", 1009 "Samoa",
1014 "San Marino", 1010 "San Marino",
1015 "Satellite", 1011 "Satellite",
1016 "Saudi Arabia", 1012 "Saudi Arabia",
1017 "Senegal", 1013 "Senegal",
1018 "Serbia", 1014 "Serbia",
1019 "Seychelles", 1015 "Seychelles",
1020 "Sierra Leone", 1016 "Sierra Leone",
1021 "Singapore", 1017 "Singapore",
1022 "Slovakia", 1018 "Slovakia",
1023 "Slovenia", 1019 "Slovenia",
1024 "South Africa", 1020 "South Africa",
1025 "South Korea", 1021 "South Korea",
1026 "Spain", 1022 "Spain",
1027 "Sri Lanka", 1023 "Sri Lanka",
1028 "St Kitts &amp; Nevis", 1024 "St Kitts &amp; Nevis",
1029 "St Lucia", 1025 "St Lucia",
1030 "St Vincent", 1026 "St Vincent",
1031 "St. Lucia", 1027 "St. Lucia",
1032 "Sudan", 1028 "Sudan",
1033 "Suriname", 1029 "Suriname",
1034 "Swaziland", 1030 "Swaziland",
1035 "Sweden", 1031 "Sweden",
1036 "Switzerland", 1032 "Switzerland",
1037 "Syria", 1033 "Syria",
1038 "Taiwan", 1034 "Taiwan",
1039 "Tajikistan", 1035 "Tajikistan",
1040 "Tanzania", 1036 "Tanzania",
1041 "Thailand", 1037 "Thailand",
1042 "Timor L'Este", 1038 "Timor L'Este",
1043 "Togo", 1039 "Togo",
1044 "Tonga", 1040 "Tonga",
1045 "Trinidad &amp; Tobago", 1041 "Trinidad &amp; Tobago",
1046 "Tunisia", 1042 "Tunisia",
1047 "Turkey", 1043 "Turkey",
1048 "Turkmenistan", 1044 "Turkmenistan",
1049 "Turks &amp; Caicos", 1045 "Turks &amp; Caicos",
1050 "Uganda", 1046 "Uganda",
1051 "Ukraine", 1047 "Ukraine",
1052 "United Arab Emirates", 1048 "United Arab Emirates",
1053 "United Kingdom", 1049 "United Kingdom",
1054 "United States", 1050 "United States",
1055 "Uruguay", 1051 "Uruguay",
1056 "Uzbekistan", 1052 "Uzbekistan",
1057 "Venezuela", 1053 "Venezuela",
1058 "Vietnam", 1054 "Vietnam",
1059 "Virgin Islands (US)", 1055 "Virgin Islands (US)",
1060 "Yemen", 1056 "Yemen",
1061 "Zambia", 1057 "Zambia",
1062 "Zimbabwe" 1058 "Zimbabwe"
1063 ], 1059 ],
1064 headers: [ 1060 headers: [
1065 { 1061 {
1066 text: "No", 1062 text: "No",
1067 align: "center", 1063 align: "center",
1068 sortable: false, 1064 sortable: false,
1069 value: "No" 1065 value: "No"
1070 }, 1066 },
1071 { 1067 {
1072 text: "Profile Pic", 1068 text: "Profile Pic",
1073 value: "profilePicUrl", 1069 value: "profilePicUrl",
1074 sortable: false, 1070 sortable: false,
1075 align: "center" 1071 align: "center"
1076 }, 1072 },
1077 { text: "Name", value: "name", sortable: false, align: "center" }, 1073 { text: "Name", value: "name", sortable: false, align: "center" },
1078 { text: "Email", value: "email", sortable: false, align: "center" }, 1074 { text: "Email", value: "email", sortable: false, align: "center" },
1079 { text: "DOB", value: "dob", sortable: false, align: "center" }, 1075 { text: "DOB", value: "dob", sortable: false, align: "center" },
1080 { 1076 {
1081 text: "Join Date", 1077 text: "Join Date",
1082 value: "joinDate", 1078 value: "joinDate",
1083 sortable: false, 1079 sortable: false,
1084 align: "center" 1080 align: "center"
1085 }, 1081 },
1086 { 1082 {
1087 text: "Mobile No", 1083 text: "Mobile No",
1088 value: "mobileNo", 1084 value: "mobileNo",
1089 sortable: false, 1085 sortable: false,
1090 align: "center" 1086 align: "center"
1091 }, 1087 },
1092 { text: "Action", value: "", sortable: false, align: "center" } 1088 { text: "Action", value: "", sortable: false, align: "center" }
1093 ], 1089 ],
1094 desserts: [], 1090 desserts: [],
1095 editedIndex: -1, 1091 editedIndex: -1,
1096 upload: "", 1092 upload: "",
1097 editedItem: { 1093 editedItem: {
1098 role: "TEACHER", 1094 role: "TEACHER",
1099 name: "", 1095 name: "",
1100 email: "", 1096 email: "",
1101 date: null, 1097 date: null,
1102 city: "", 1098 city: "",
1103 pincode: "", 1099 pincode: "",
1104 country: "", 1100 country: "",
1105 permanentAddress: "", 1101 permanentAddress: "",
1106 presentAddress: "", 1102 presentAddress: "",
1107 mobileNo: "", 1103 mobileNo: "",
1108 state: "", 1104 state: "",
1109 joinDate: null 1105 joinDate: null
1110 }, 1106 },
1111 addTeachers: { 1107 addTeachers: {
1112 role: "TEACHER", 1108 role: "TEACHER",
1113 name: "", 1109 name: "",
1114 email: "", 1110 email: "",
1115 date: null, 1111 date: null,
1116 city: "", 1112 city: "",
1117 pincode: "", 1113 pincode: "",
1118 country: "", 1114 country: "",
1119 permanentAddress: "", 1115 permanentAddress: "",
1120 presentAddress: "", 1116 presentAddress: "",
1121 mobileNo: "", 1117 mobileNo: "",
1122 state: "", 1118 state: "",
1123 joinDate: null 1119 joinDate: null
1124 }, 1120 },
1125 defaultItem: { 1121 defaultItem: {
1126 role: "TEACHER", 1122 role: "TEACHER",
1127 name: "", 1123 name: "",
1128 email: "" 1124 email: ""
1129 }, 1125 },
1130 }), 1126 }),
1131 watch: { 1127 watch: {
1132 menu(val) { 1128 menu(val) {
1133 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 1129 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
1134 }, 1130 },
1135 menu1(val) { 1131 menu1(val) {
1136 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR")); 1132 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
1137 } 1133 }
1138 }, 1134 },
1139 methods: { 1135 methods: {
1140 save(date) { 1136 save(date) {
1141 this.$refs.menu.save(date); 1137 this.$refs.menu.save(date);
1142 }, 1138 },
1143 save(date) { 1139 save(date) {
1144 this.$refs.menu1.save(date); 1140 this.$refs.menu1.save(date);
1145 }, 1141 },
1146 pickFile() { 1142 pickFile() {
1147 this.$refs.image.click(); 1143 this.$refs.image.click();
1148 }, 1144 },
1149 onFilePicked(e) { 1145 onFilePicked(e) {
1150 // console.log(e) 1146 // console.log(e)
1151 const files = e.target.files; 1147 const files = e.target.files;
1152 this.upload = e.target.files[0]; 1148 this.upload = e.target.files[0];
1153 console.log("imageData-upload========>", this.upload); 1149 console.log("imageData-upload========>", this.upload);
1154 if (files[0] !== undefined) { 1150 if (files[0] !== undefined) {
1155 this.imageName = files[0].name; 1151 this.imageName = files[0].name;
1156 if (this.imageName.lastIndexOf(".") <= 0) { 1152 if (this.imageName.lastIndexOf(".") <= 0) {
1157 return; 1153 return;
1158 } 1154 }
1159 const fr = new FileReader(); 1155 const fr = new FileReader();
1160 fr.readAsDataURL(files[0]); 1156 fr.readAsDataURL(files[0]);
1161 fr.addEventListener("load", () => { 1157 fr.addEventListener("load", () => {
1162 this.imageUrl = fr.result; 1158 this.imageUrl = fr.result;
1163 this.imageFile = files[0]; // this is an image file that can be sent to server... 1159 this.imageFile = files[0]; // this is an image file that can be sent to server...
1164 // this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 1160 // this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
1165 // console.log("upload=======>", this.imageData.imageUrl); 1161 // console.log("upload=======>", this.imageData.imageUrl);
1166 console.log("imageFile", this.imageUrl); 1162 console.log("imageFile", this.imageUrl);
1167 }); 1163 });
1168 } else { 1164 } else {
1169 this.imageName = ""; 1165 this.imageName = "";
1170 this.imageFile = ""; 1166 this.imageFile = "";
1171 this.imageUrl = ""; 1167 this.imageUrl = "";
1172 } 1168 }
1173 }, 1169 },
1174 dates: function(date) { 1170 dates: function(date) {
1175 return moment(date).format("MMMM DD, YYYY"); 1171 return moment(date).format("MMMM DD, YYYY");
1176 }, 1172 },
1177 getTeacherList() { 1173 getTeacherList() {
1178 this.showLoader = true; 1174 this.showLoader = true;
1179 var token = this.$store.state.token; 1175 var token = this.$store.state.token;
1180 http() 1176 http()
1181 .get("/getTeachersList", { 1177 .get("/getTeachersList", {
1182 headers: { Authorization: "Bearer " + token } 1178 headers: { Authorization: "Bearer " + token }
1183 }) 1179 })
1184 .then(response => { 1180 .then(response => {
1185 this.desserts = response.data.data; 1181 this.desserts = response.data.data;
1186 this.showLoader = false; 1182 this.showLoader = false;
1187 // console.log("getTeacherList=====>",this.desserts) 1183 // console.log("getTeacherList=====>",this.desserts)
1188 }) 1184 })
1189 .catch(error => { 1185 .catch(error => {
1190 this.showLoader = false; 1186 this.showLoader = false;
1191 if (error.response.status === 401) { 1187 if (error.response.status === 401) {
1192 this.$router.replace({ path: "/" }); 1188 this.$router.replace({ path: "/" });
1193 this.$store.dispatch("setToken", null); 1189 this.$store.dispatch("setToken", null);
1194 this.$store.dispatch("Id", null); 1190 this.$store.dispatch("Id", null);
1195 } 1191 }
1196 }); 1192 });
1197 }, 1193 },
1198 editItem(item) { 1194 editItem(item) {
1199 this.editedIndex = this.desserts.indexOf(item); 1195 this.editedIndex = this.desserts.indexOf(item);
1200 this.editedItem = Object.assign({}, item); 1196 this.editedItem = Object.assign({}, item);
1201 this.editedItem.dob = 1197 this.editedItem.dob =
1202 this.editedItem.dob != undefined 1198 this.editedItem.dob != undefined
1203 ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10)) 1199 ? (this.editedItem.dob = this.editedItem.dob.substring(0, 10))
1204 : (this.editedItem.dob = ""); 1200 : (this.editedItem.dob = "");
1205 this.editedItem.joinDate = 1201 this.editedItem.joinDate =
1206 this.editedItem.joinDate != undefined 1202 this.editedItem.joinDate != undefined
1207 ? (this.editedItem.joinDate = this.editedItem.joinDate.substring( 1203 ? (this.editedItem.joinDate = this.editedItem.joinDate.substring(
1208 0, 1204 0,
1209 10 1205 10
1210 )) 1206 ))
1211 : (this.editedItem.joinDate = ""); 1207 : (this.editedItem.joinDate = "");
1212 1208
1213 this.dialog = true; 1209 this.dialog = true;
1214 }, 1210 },
1215 profile(item) { 1211 profile(item) {
1216 this.editedIndex = this.desserts.indexOf(item); 1212 this.editedIndex = this.desserts.indexOf(item);
1217 this.editedItem = Object.assign({}, item); 1213 this.editedItem = Object.assign({}, item);
1218 this.dialog1 = true; 1214 this.dialog1 = true;
1219 }, 1215 },
1220 deleteItem(item) { 1216 deleteItem(item) {
1221 let deleteTeachers = { 1217 let deleteTeachers = {
1222 teacherId: item._id 1218 teacherId: item._id
1223 }; 1219 };
1224 // console.log("deleteUers",deleteTeachers) 1220 // console.log("deleteUers",deleteTeachers)
1225 http() 1221 http()
1226 .delete( 1222 .delete(
1227 "/deleteTeacher", 1223 "/deleteTeacher",
1228 confirm("Are you sure you want to delete this?") && { 1224 confirm("Are you sure you want to delete this?") && {
1229 params: deleteTeachers 1225 params: deleteTeachers
1230 } 1226 }
1231 ) 1227 )
1232 .then(response => { 1228 .then(response => {
1233 // console.log("deleteUers",deleteTeachers) 1229 // console.log("deleteUers",deleteTeachers)
1234 if ((this.snackbar = true)) { 1230 if ((this.snackbar = true)) {
1235 this.text = "Successfully delete Existing Teacher"; 1231 this.text = "Successfully delete Existing Teacher";
1236 } 1232 }
1237 this.getTeacherList(); 1233 this.getTeacherList();
1238 }) 1234 })
1239 .catch(error => { 1235 .catch(error => {
1240 console.log(error); 1236 console.log(error);
1241 }); 1237 });
1242 }, 1238 },
1243 activeTab(type) { 1239 activeTab(type) {
1244 switch (type) { 1240 switch (type) {
1245 case "existing": 1241 case "existing":
1246 this.newActive = false; 1242 this.newActive = false;
1247 this.isActive = true; 1243 this.isActive = true;
1248 break; 1244 break;
1249 1245
1250 default: 1246 default:
1251 this.newActive = true; 1247 this.newActive = true;
1252 this.isActive = false; 1248 this.isActive = false;
1253 break; 1249 break;
1254 } 1250 }
1255 }, 1251 },
1256 close() { 1252 close() {
1257 this.dialog = false; 1253 this.dialog = false;
1258 setTimeout(() => { 1254 setTimeout(() => {
1259 this.editedItem = Object.assign({}, this.defaultItem); 1255 this.editedItem = Object.assign({}, this.defaultItem);
1260 this.editedIndex = -1; 1256 this.editedIndex = -1;
1261 }, 300); 1257 }, 300);
1262 }, 1258 },
1263 close1() { 1259 close1() {
1264 this.dialog1 = false; 1260 this.dialog1 = false;
1265 }, 1261 },
1266 submit() { 1262 submit() {
1267 if (this.$refs.form.validate()) { 1263 if (this.$refs.form.validate()) {
1268 let addTeacher = { 1264 let addTeacher = {
1269 name: this.addTeachers.name, 1265 name: this.addTeachers.name,
1270 email: this.addTeachers.email, 1266 email: this.addTeachers.email,
1271 role: this.addTeachers.role, 1267 role: this.addTeachers.role,
1272 dob: this.addTeachers.date, 1268 dob: this.addTeachers.date,
1273 city: this.addTeachers.city, 1269 city: this.addTeachers.city,
1274 pincode: this.addTeachers.pincode, 1270 pincode: this.addTeachers.pincode,
1275 country: this.addTeachers.country, 1271 country: this.addTeachers.country,
1276 permanentAddress: this.addTeachers.permanentAddress, 1272 permanentAddress: this.addTeachers.permanentAddress,
1277 presentAddress: this.addTeachers.presentAddress, 1273 presentAddress: this.addTeachers.presentAddress,
1278 mobileNo: this.addTeachers.mobileNo, 1274 mobileNo: this.addTeachers.mobileNo,
1279 state: this.addTeachers.state, 1275 state: this.addTeachers.state,
1280 joinDate: this.addTeachers.joinDate 1276 joinDate: this.addTeachers.joinDate
1281 }; 1277 };
1282 if (this.imageUrl) { 1278 if (this.imageUrl) {
1283 var str = this.imageUrl; 1279 var str = this.imageUrl;
1284 const [baseUrl, imageUrl] = str.split(/,/); 1280 const [baseUrl, imageUrl] = str.split(/,/);
1285 addTeacher.upload = imageUrl; 1281 addTeacher.upload = imageUrl;
1286 } 1282 }
1287 this.loading = true; 1283 this.loading = true;
1288 http() 1284 http()
1289 .post("/createTeacher", addTeacher) 1285 .post("/createTeacher", addTeacher)
1290 .then(response => { 1286 .then(response => {
1291 console.log("addTeacher", addTeacher); 1287 console.log("addTeacher", addTeacher);
1292 this.getTeacherList(); 1288 this.getTeacherList();
1293 if ((this.snackbar = true)) { 1289 if ((this.snackbar = true)) {
1294 this.text = "New Teacher added successfully"; 1290 this.text = "New Teacher added successfully";
1295 } 1291 }
1296 1292
1297 this.clear(); 1293 this.clear();
1298 this.loading = false; 1294 this.loading = false;
1299 }) 1295 })
1300 .catch(error => { 1296 .catch(error => {
1301 // console.log(error); 1297 // console.log(error);
1302 if ((this.snackbar = true)) { 1298 if ((this.snackbar = true)) {
1303 this.text = error.response.data.message; 1299 this.text = error.response.data.message;
1304 } 1300 }
1305 this.loading = false; 1301 this.loading = false;
1306 }); 1302 });
1307 } 1303 }
1308 }, 1304 },
1309 clear() { 1305 clear() {
1310 this.$refs.form.reset(); 1306 this.$refs.form.reset();
1311 }, 1307 },
1312 save() { 1308 save() {
1313 this.loading = true; 1309 this.loading = true;
1314 let editTeacher = { 1310 let editTeacher = {
1315 teacherId: this.editedItem._id, 1311 teacherId: this.editedItem._id,
1316 name: this.editedItem.name, 1312 name: this.editedItem.name,
1317 email: this.editedItem.email, 1313 email: this.editedItem.email,
1318 role: this.editedItem.role, 1314 role: this.editedItem.role,
1319 dob: this.editedItem.date, 1315 dob: this.editedItem.date,
1320 city: this.editedItem.city, 1316 city: this.editedItem.city,
1321 pincode: this.editedItem.pincode, 1317 pincode: this.editedItem.pincode,
1322 country: this.editedItem.country, 1318 country: this.editedItem.country,
1323 permanentAddress: this.editedItem.permanentAddress, 1319 permanentAddress: this.editedItem.permanentAddress,
1324 presentAddress: this.editedItem.presentAddress, 1320 presentAddress: this.editedItem.presentAddress,
1325 mobileNo: this.editedItem.mobileNo, 1321 mobileNo: this.editedItem.mobileNo,
1326 state: this.editedItem.state, 1322 state: this.editedItem.state,
1327 joinDate: this.editedItem.joinDate 1323 joinDate: this.editedItem.joinDate
1328 }; 1324 };
1329 if (this.imageUrl) { 1325 if (this.imageUrl) {
1330 var str = this.imageUrl; 1326 var str = this.imageUrl;
1331 const [baseUrl, imageUrl] = str.split(/,/); 1327 const [baseUrl, imageUrl] = str.split(/,/);
1332 editTeacher.upload = imageUrl; 1328 editTeacher.upload = imageUrl;
1333 } 1329 }
1334 http() 1330 http()
1335 .put("/updateTeacher", editTeacher) 1331 .put("/updateTeacher", editTeacher)
1336 .then(response => { 1332 .then(response => {
1337 console.log("editTeacher", editTeacher); 1333 console.log("editTeacher", editTeacher);
1338 if ((this.snackbar = true)) { 1334 if ((this.snackbar = true)) {
1339 this.text = "Successfully Edit Existing Teacher"; 1335 this.text = "Successfully Edit Existing Teacher";
1340 } 1336 }
1341 this.loading = false; 1337 this.loading = false;
1342 this.getTeacherList(); 1338 this.getTeacherList();
1343 this.close(); 1339 this.close();
1344 }) 1340 })
1345 .catch(error => { 1341 .catch(error => {
1346 console.log(error); 1342 console.log(error);
1347 this.loading = false; 1343 this.loading = false;
1348 }); 1344 });
1349 } 1345 }
1350 }, 1346 },
1351 mounted() { 1347 mounted() {
1352 this.getTeacherList(); 1348 this.getTeacherList();
1353 }, 1349 },
1354 created() { 1350 created() {
1355 this.$root.$on("app:search", search => { 1351 this.$root.$on("app:search", search => {
1356 this.search = search; 1352 this.search = search;
1357 }); 1353 });
1358 }, 1354 },
1359 beforeDestroy() { 1355 beforeDestroy() {
1360 // dont forget to remove the listener 1356 // dont forget to remove the listener
1361 this.$root.$off("app:search"); 1357 this.$root.$off("app:search");
1362 } 1358 }
1363 }; 1359 };
1364 </script> 1360 </script>
1365 <style scoped> 1361 <style scoped>
1366 1362
1367 .active { 1363 .active {
1368 background-color: black; 1364 background-color: black;
1369 color: white !important; 1365 color: white !important;
1370 } 1366 }
1371 .activebtn { 1367 .activebtn {
1372 color: black !important; 1368 color: black !important;
1373 } 1369 }
1374 </style> 1370 </style>
src/pages/TimeTable/timeTable.vue
Diff comments   View file @4bd94ba
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-tabs grow slider-color="black"> 3 <v-tabs grow slider-color="black">
4 <v-tab 4 <v-tab
5 ripple 5 ripple
6 @click="activeTab('existing')" 6 @click="activeTab('existing')"
7 v-bind:class="{ active: isActive }" 7 v-bind:class="{ active: isActive }"
8 id="tab" 8 id="tab"
9 class="subheading" 9 class="subheading"
10 >Existing Time Table</v-tab> 10 >Existing Time Table</v-tab>
11 <v-tab 11 <v-tab
12 ripple 12 ripple
13 @click="activeTab('new')" 13 @click="activeTab('new')"
14 v-bind:class="{ active: newActive }" 14 v-bind:class="{ active: newActive }"
15 id="tab1" 15 id="tab1"
16 User 16 User
17 class="subheading" 17 class="subheading"
18 >Add New Time Table</v-tab> 18 >Add New Time Table</v-tab>
19 19
20 <!-- ****** EDITS TIME-TABLE****** --> 20 <!-- ****** EDITS TIME-TABLE****** -->
21 21
22 <v-tab-item> 22 <v-tab-item>
23 <v-snackbar 23 <v-snackbar
24 :timeout="timeout" 24 :timeout="timeout"
25 :top="y === 'top'" 25 :top="y === 'top'"
26 :right="x === 'right'" 26 :right="x === 'right'"
27 :vertical="mode === 'vertical'" 27 :vertical="mode === 'vertical'"
28 v-model="snackbar" 28 v-model="snackbar"
29 color="success" 29 color="success"
30 >{{ text }}</v-snackbar> 30 >{{ text }}</v-snackbar>
31 <v-dialog v-model="dialog" max-width="1000px"> 31 <v-dialog v-model="dialog" max-width="1000px">
32 <v-flex xs12 sm12 class> 32 <v-flex xs12 sm12 class>
33 <v-toolbar color="grey lighten-2"> 33 <v-toolbar color="grey lighten-2">
34 <v-spacer></v-spacer> 34 <v-spacer></v-spacer>
35 <v-toolbar-title> 35 <v-toolbar-title>
36 <h3>Edit Time Table</h3> 36 <h3>Edit Time Table</h3>
37 </v-toolbar-title> 37 </v-toolbar-title>
38 <v-spacer></v-spacer> 38 <v-spacer></v-spacer>
39 </v-toolbar> 39 </v-toolbar>
40 <v-card flat> 40 <v-card flat>
41 <v-form ref="form"> 41 <v-form ref="form">
42 <v-container fluid> 42 <v-container fluid>
43 <v-layout> 43 <v-layout>
44 <v-flex 44 <v-flex
45 xs12 45 xs12
46 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4" 46 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4"
47 > 47 >
48 <v-avatar size="100px"> 48 <v-avatar size="100px">
49 <img src="/static/icon/user.png" v-if="!imageUrl" /> 49 <img src="/static/icon/user.png" v-if="!imageUrl" />
50 </v-avatar> 50 </v-avatar>
51 <input 51 <input
52 type="file" 52 type="file"
53 style="display: none" 53 style="display: none"
54 ref="image" 54 ref="image"
55 accept="image/*" 55 accept="image/*"
56 @change="onFilePicked" 56 @change="onFilePicked"
57 /> 57 />
58 <img 58 <img
59 :src="imageData.imageUrl" 59 :src="imageData.imageUrl"
60 height="150" 60 height="150"
61 v-if="imageUrl" 61 v-if="imageUrl"
62 style="border-radius:50%; width:200px" 62 style="border-radius:50%; width:200px"
63 /> 63 />
64 </v-flex> 64 </v-flex>
65 </v-layout> 65 </v-layout>
66 <v-flex xs12 sm12> 66 <v-flex xs12 sm12>
67 <v-layout> 67 <v-layout>
68 <v-flex xs4 class="pt-4 subheading"> 68 <v-flex xs4 class="pt-4 subheading">
69 <label class="right">class No:</label> 69 <label class="right">class No:</label>
70 </v-flex> 70 </v-flex>
71 <v-flex xs12 sm5 class="ml-3"> 71 <v-flex xs12 sm5 class="ml-3">
72 <v-select 72 <v-select
73 :items="addclass" 73 :items="addclass"
74 label="Select Class" 74 label="Select Class"
75 v-model="editedItem.classNum" 75 v-model="editedItem.classNum"
76 item-text="classNum" 76 item-text="classNum"
77 item-value="_id" 77 item-value="_id"
78 @change="getSections(editedItem.classNum)" 78 @change="getSections(editedItem.classNum)"
79 ></v-select> 79 ></v-select>
80 </v-flex> 80 </v-flex>
81 </v-layout> 81 </v-layout>
82 </v-flex> 82 </v-flex>
83 <v-flex xs12 sm12> 83 <v-flex xs12 sm12>
84 <v-layout> 84 <v-layout>
85 <v-flex xs4 class="pt-4 subheading"> 85 <v-flex xs4 class="pt-4 subheading">
86 <label class="right">Section Name:</label> 86 <label class="right">Section Name:</label>
87 </v-flex> 87 </v-flex>
88 <v-flex xs5 class="ml-3"> 88 <v-flex xs5 class="ml-3">
89 <v-select 89 <v-select
90 :items="addSection" 90 :items="addSection"
91 label="Select Section" 91 label="Select Section"
92 v-model="editedItem.selectSection" 92 v-model="editedItem.selectSection"
93 item-text="name" 93 item-text="name"
94 item-value="_id" 94 item-value="_id"
95 ></v-select> 95 ></v-select>
96 </v-flex> 96 </v-flex>
97 </v-layout> 97 </v-layout>
98 </v-flex> 98 </v-flex>
99 <v-layout> 99 <v-layout>
100 <v-flex xs12 sm8 offset-sm2> 100 <v-flex xs12 sm8 offset-sm2>
101 <v-card-actions> 101 <v-card-actions>
102 <v-btn round dark @click.native="close">Cancel</v-btn> 102 <v-btn round dark @click.native="close">Cancel</v-btn>
103 <v-spacer></v-spacer> 103 <v-spacer></v-spacer>
104 <v-btn round dark @click="save">Save</v-btn> 104 <v-btn round dark @click="save">Save</v-btn>
105 </v-card-actions> 105 </v-card-actions>
106 </v-flex> 106 </v-flex>
107 </v-layout> 107 </v-layout>
108 </v-container> 108 </v-container>
109 </v-form> 109 </v-form>
110 </v-card> 110 </v-card>
111 </v-flex> 111 </v-flex>
112 </v-dialog> 112 </v-dialog>
113 113
114 <!-- ****** ADD Dialog Schedule IN TIME-TABLE ****** --> 114 <!-- ****** ADD Dialog Schedule IN TIME-TABLE ****** -->
115 115
116 <v-dialog v-model="dialogSchedule" max-width="600px"> 116 <v-dialog v-model="dialogSchedule" max-width="600px">
117 <v-flex xs12 sm12> 117 <v-flex xs12 sm12>
118 <v-toolbar color="grey lighten-2"> 118 <v-toolbar color="grey lighten-2">
119 <v-spacer></v-spacer> 119 <v-spacer></v-spacer>
120 <v-toolbar-title> 120 <v-toolbar-title>
121 <h3>Add Schedule</h3> 121 <h3>Add Schedule</h3>
122 </v-toolbar-title> 122 </v-toolbar-title>
123 <v-spacer></v-spacer> 123 <v-spacer></v-spacer>
124 </v-toolbar> 124 </v-toolbar>
125 <v-card flat> 125 <v-card flat>
126 <v-form> 126 <v-form>
127 <v-container fluid> 127 <v-container fluid>
128 <v-flex xs12 sm12 class="py-3"> 128 <v-flex xs12 sm12 class="py-3">
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 Day:</label> 131 <label class="right">Select Day:</label>
132 </v-flex> 132 </v-flex>
133 <v-flex xs12 sm5 class="ml-3"> 133 <v-flex xs12 sm5 class="ml-3">
134 <v-select 134 <v-select
135 :items="addOneDay" 135 :items="addOneDay"
136 label="Select Day" 136 label="Select Day"
137 v-model="schedule.selectDay" 137 v-model="schedule.selectDay"
138 ></v-select> 138 ></v-select>
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-flex xs12 sm8 offset-sm2> 143 <v-flex xs12 sm8 offset-sm2>
144 <v-card-actions> 144 <v-card-actions>
145 <v-spacer></v-spacer> 145 <v-spacer></v-spacer>
146 <v-btn round dark @click="submitSchedule">Save</v-btn> 146 <v-btn round dark @click="submitSchedule">Save</v-btn>
147 <v-spacer></v-spacer> 147 <v-spacer></v-spacer>
148 </v-card-actions> 148 </v-card-actions>
149 </v-flex> 149 </v-flex>
150 </v-layout> 150 </v-layout>
151 </v-container> 151 </v-container>
152 </v-form> 152 </v-form>
153 </v-card> 153 </v-card>
154 </v-flex> 154 </v-flex>
155 </v-dialog> 155 </v-dialog>
156 156
157 <!-- ****** ADD LECTURES IN TIME-TABLE ****** --> 157 <!-- ****** ADD LECTURES IN TIME-TABLE ****** -->
158 158
159 <v-dialog v-model="dialogAddLecture" max-width="1000px"> 159 <v-dialog v-model="dialogAddLecture" max-width="1000px">
160 <v-flex xs12 sm12> 160 <v-flex xs12 sm12>
161 <v-toolbar color="grey lighten-2"> 161 <v-toolbar color="grey lighten-2">
162 <v-spacer></v-spacer> 162 <v-spacer></v-spacer>
163 <v-toolbar-title> 163 <v-toolbar-title>
164 <h3>Add Lecture</h3> 164 <h3>Add Lecture</h3>
165 </v-toolbar-title> 165 </v-toolbar-title>
166 <v-spacer></v-spacer> 166 <v-spacer></v-spacer>
167 </v-toolbar> 167 </v-toolbar>
168 <v-card flat> 168 <v-card flat>
169 <v-form ref="lectureForm" v-model="valid" lazy-validation> 169 <v-form ref="lectureForm" v-model="valid" lazy-validation>
170 <v-container fluid> 170 <v-container fluid>
171 <v-flex xs12 sm12> 171 <v-flex xs12 sm12>
172 <v-layout> 172 <v-layout>
173 <v-flex xs4 class="pt-4 subheading"> 173 <v-flex xs4 class="pt-4 subheading">
174 <label class="right">Subject Name:</label> 174 <label class="right">Subject Name:</label>
175 </v-flex> 175 </v-flex>
176 <v-flex xs5 class="ml-3"> 176 <v-flex xs5 class="ml-3">
177 <v-text-field 177 <v-text-field
178 v-model="addlectures.subjectName" 178 v-model="addlectures.subjectName"
179 :rules="subjectNameRules" 179 :rules="subjectNameRules"
180 placeholder="fill your Subject Name" 180 placeholder="fill your Subject Name"
181 type="text" 181 type="text"
182 ></v-text-field> 182 ></v-text-field>
183 </v-flex> 183 </v-flex>
184 </v-layout> 184 </v-layout>
185 </v-flex> 185 </v-flex>
186 <v-flex xs12 sm12> 186 <v-flex xs12 sm12>
187 <v-layout> 187 <v-layout>
188 <v-flex xs4 class="pt-4 subheading"> 188 <v-flex xs4 class="pt-4 subheading">
189 <label class="right">Time In:</label> 189 <label class="right">Time In:</label>
190 </v-flex> 190 </v-flex>
191 <v-flex xs5 class="ml-3"> 191 <v-flex xs5 class="ml-3">
192 <v-menu 192 <v-menu
193 ref="menuD" 193 ref="menuD"
194 :close-on-content-click="false" 194 :close-on-content-click="false"
195 v-model="menu5" 195 v-model="menu5"
196 :nudge-right="40" 196 :nudge-right="40"
197 lazy 197 lazy
198 transition="scale-transition" 198 transition="scale-transition"
199 offset-y 199 offset-y
200 full-width 200 full-width
201 max-width="290px" 201 max-width="290px"
202 min-width="290px" 202 min-width="290px"
203 > 203 >
204 <v-text-field 204 <v-text-field
205 slot="activator" 205 slot="activator"
206 v-model="addlectures.timeIn" 206 v-model="addlectures.timeIn"
207 label="Select your Time In" 207 label="Select your Time In"
208 append-icon="access_time" 208 append-icon="access_time"
209 :rules="timeInRules" 209 :rules="timeInRules"
210 ></v-text-field> 210 ></v-text-field>
211 <v-time-picker v-model="addlectures.timeIn" @change="menu5 = false"></v-time-picker> 211 <v-time-picker v-model="addlectures.timeIn" @change="menu5 = false"></v-time-picker>
212 </v-menu> 212 </v-menu>
213 </v-flex> 213 </v-flex>
214 </v-layout> 214 </v-layout>
215 </v-flex> 215 </v-flex>
216 <v-flex xs12 sm12> 216 <v-flex xs12 sm12>
217 <v-layout> 217 <v-layout>
218 <v-flex xs4 class="pt-4 subheading"> 218 <v-flex xs4 class="pt-4 subheading">
219 <label class="right">Time Out:</label> 219 <label class="right">Time Out:</label>
220 </v-flex> 220 </v-flex>
221 <v-flex xs5 class="ml-3"> 221 <v-flex xs5 class="ml-3">
222 <v-menu 222 <v-menu
223 ref="menuE" 223 ref="menuE"
224 :close-on-content-click="false" 224 :close-on-content-click="false"
225 v-model="menu6" 225 v-model="menu6"
226 :nudge-right="40" 226 :nudge-right="40"
227 lazy 227 lazy
228 transition="scale-transition" 228 transition="scale-transition"
229 offset-y 229 offset-y
230 full-width 230 full-width
231 max-width="290px" 231 max-width="290px"
232 min-width="290px" 232 min-width="290px"
233 > 233 >
234 <v-text-field 234 <v-text-field
235 slot="activator" 235 slot="activator"
236 :rules="timeOutRules" 236 :rules="timeOutRules"
237 v-model="addlectures.timeOut" 237 v-model="addlectures.timeOut"
238 label="Select your Time Out" 238 label="Select your Time Out"
239 append-icon="access_time" 239 append-icon="access_time"
240 ></v-text-field> 240 ></v-text-field>
241 <v-time-picker v-model="addlectures.timeOut" @change="menu6 = false"></v-time-picker> 241 <v-time-picker v-model="addlectures.timeOut" @change="menu6 = false"></v-time-picker>
242 </v-menu> 242 </v-menu>
243 </v-flex> 243 </v-flex>
244 </v-layout> 244 </v-layout>
245 </v-flex> 245 </v-flex>
246 <v-flex xs12 sm12> 246 <v-flex xs12 sm12>
247 <v-layout> 247 <v-layout>
248 <v-flex xs4 class="pt-4 subheading"> 248 <v-flex xs4 class="pt-4 subheading">
249 <label class="right">Select Teacher:</label> 249 <label class="right">Select Teacher:</label>
250 </v-flex> 250 </v-flex>
251 <v-flex xs5 class="ml-3"> 251 <v-flex xs5 class="ml-3">
252 <v-select 252 <v-select
253 :items="addTeachers" 253 :items="addTeachers"
254 v-model="addlectures.teacherId" 254 v-model="addlectures.teacherId"
255 :rules="subjectNameRules" 255 :rules="subjectNameRules"
256 item-text="name" 256 item-text="name"
257 item-value="_id" 257 item-value="_id"
258 required 258 required
259 ></v-select> 259 ></v-select>
260 </v-flex> 260 </v-flex>
261 </v-layout> 261 </v-layout>
262 </v-flex> 262 </v-flex>
263 <v-layout> 263 <v-layout>
264 <v-flex xs12 sm8 offset-sm2> 264 <v-flex xs12 sm8 offset-sm2>
265 <v-card-actions> 265 <v-card-actions>
266 <v-btn round dark @click.native="closedialogLecture">Cancel</v-btn> 266 <v-btn round dark @click.native="closedialogLecture">Cancel</v-btn>
267 <v-spacer></v-spacer> 267 <v-spacer></v-spacer>
268 <v-btn round dark @click="AddLecture">Save</v-btn> 268 <v-btn round dark @click="AddLecture">Save</v-btn>
269 </v-card-actions> 269 </v-card-actions>
270 </v-flex> 270 </v-flex>
271 </v-layout> 271 </v-layout>
272 </v-container> 272 </v-container>
273 </v-form> 273 </v-form>
274 </v-card> 274 </v-card>
275 </v-flex> 275 </v-flex>
276 </v-dialog> 276 </v-dialog>
277 277
278 <!-- ****** EDIT PARTICULAR LECTURES TIME-TABLE ****** --> 278 <!-- ****** EDIT PARTICULAR LECTURES TIME-TABLE ****** -->
279 279
280 <v-dialog v-model="dialogUpdateLectures" max-width="1000px"> 280 <v-dialog v-model="dialogUpdateLectures" max-width="1000px">
281 <v-flex xs12 sm12 class> 281 <v-flex xs12 sm12 class>
282 <v-toolbar color="grey lighten-2"> 282 <v-toolbar color="grey lighten-2">
283 <v-spacer></v-spacer> 283 <v-spacer></v-spacer>
284 <v-toolbar-title>Edit Lecture</v-toolbar-title> 284 <v-toolbar-title>Edit Lecture</v-toolbar-title>
285 <v-spacer></v-spacer> 285 <v-spacer></v-spacer>
286 </v-toolbar> 286 </v-toolbar>
287 <v-card flat> 287 <v-card flat>
288 <v-form ref="form"> 288 <v-form ref="form">
289 <v-container fluid> 289 <v-container fluid>
290 <v-flex xs12 sm12> 290 <v-flex xs12 sm12>
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">Subject Name:</label> 293 <label class="right">Subject Name:</label>
294 </v-flex> 294 </v-flex>
295 <v-flex xs5 class="ml-3"> 295 <v-flex xs5 class="ml-3">
296 <v-text-field 296 <v-text-field
297 v-model="updateLectures.subjectName" 297 v-model="updateLectures.subjectName"
298 placeholder="fill your Subject Name" 298 placeholder="fill your Subject Name"
299 type="text" 299 type="text"
300 ></v-text-field> 300 ></v-text-field>
301 </v-flex> 301 </v-flex>
302 </v-layout> 302 </v-layout>
303 </v-flex> 303 </v-flex>
304 <v-flex xs12 sm12> 304 <v-flex xs12 sm12>
305 <v-layout> 305 <v-layout>
306 <v-flex xs4 class="pt-4 subheading"> 306 <v-flex xs4 class="pt-4 subheading">
307 <label class="right">Time In:</label> 307 <label class="right">Time In:</label>
308 </v-flex> 308 </v-flex>
309 <v-flex xs5 class="ml-3"> 309 <v-flex xs5 class="ml-3">
310 <v-menu 310 <v-menu
311 ref="menuC" 311 ref="menuC"
312 :close-on-content-click="false" 312 :close-on-content-click="false"
313 v-model="menu4" 313 v-model="menu4"
314 :nudge-right="40" 314 :nudge-right="40"
315 lazy 315 lazy
316 transition="scale-transition" 316 transition="scale-transition"
317 offset-y 317 offset-y
318 full-width 318 full-width
319 max-width="290px" 319 max-width="290px"
320 min-width="290px" 320 min-width="290px"
321 > 321 >
322 <v-text-field 322 <v-text-field
323 slot="activator" 323 slot="activator"
324 v-model="updateLectures.timeIn" 324 v-model="updateLectures.timeIn"
325 placeholder="Select your Time In" 325 placeholder="Select your Time In"
326 append-icon="access_time" 326 append-icon="access_time"
327 ></v-text-field> 327 ></v-text-field>
328 <v-time-picker v-model="updateLectures.timeIn" @change="menu4= false"></v-time-picker> 328 <v-time-picker v-model="updateLectures.timeIn" @change="menu4= false"></v-time-picker>
329 </v-menu> 329 </v-menu>
330 </v-flex> 330 </v-flex>
331 </v-layout> 331 </v-layout>
332 </v-flex> 332 </v-flex>
333 <v-flex xs12 sm12> 333 <v-flex xs12 sm12>
334 <v-layout> 334 <v-layout>
335 <v-flex xs4 class="pt-4 subheading"> 335 <v-flex xs4 class="pt-4 subheading">
336 <label class="right">Time Out:</label> 336 <label class="right">Time Out:</label>
337 </v-flex> 337 </v-flex>
338 <v-flex xs5 class="ml-3"> 338 <v-flex xs5 class="ml-3">
339 <v-menu 339 <v-menu
340 ref="menuB" 340 ref="menuB"
341 :close-on-content-click="false" 341 :close-on-content-click="false"
342 v-model="menu3" 342 v-model="menu3"
343 :nudge-right="40" 343 :nudge-right="40"
344 lazy 344 lazy
345 transition="scale-transition" 345 transition="scale-transition"
346 offset-y 346 offset-y
347 full-width 347 full-width
348 max-width="290px" 348 max-width="290px"
349 min-width="290px" 349 min-width="290px"
350 > 350 >
351 <v-text-field 351 <v-text-field
352 slot="activator" 352 slot="activator"
353 v-model="updateLectures.timeOut" 353 v-model="updateLectures.timeOut"
354 placeholder="Select your Time Out" 354 placeholder="Select your Time Out"
355 append-icon="access_time" 355 append-icon="access_time"
356 ></v-text-field> 356 ></v-text-field>
357 <v-time-picker v-model="updateLectures.timeOut" @change="menu3 = false"></v-time-picker> 357 <v-time-picker v-model="updateLectures.timeOut" @change="menu3 = false"></v-time-picker>
358 </v-menu> 358 </v-menu>
359 </v-flex> 359 </v-flex>
360 </v-layout> 360 </v-layout>
361 </v-flex> 361 </v-flex>
362 <v-flex xs12 sm12> 362 <v-flex xs12 sm12>
363 <v-layout> 363 <v-layout>
364 <v-flex xs4 class="pt-4 subheading"> 364 <v-flex xs4 class="pt-4 subheading">
365 <label class="right">Select Teacher:</label> 365 <label class="right">Select Teacher:</label>
366 </v-flex> 366 </v-flex>
367 <v-flex xs5 class="ml-3"> 367 <v-flex xs5 class="ml-3">
368 <v-select 368 <v-select
369 :items="addTeachers" 369 :items="addTeachers"
370 label="Select Teacher" 370 label="Select Teacher"
371 v-model="updateLectures.teacherId" 371 v-model="updateLectures.teacherId"
372 item-text="name" 372 item-text="name"
373 item-value="_id" 373 item-value="_id"
374 required 374 required
375 ></v-select> 375 ></v-select>
376 </v-flex> 376 </v-flex>
377 </v-layout> 377 </v-layout>
378 </v-flex> 378 </v-flex>
379 <v-layout> 379 <v-layout>
380 <v-flex xs12 sm8 offset-sm2> 380 <v-flex xs12 sm8 offset-sm2>
381 <v-card-actions> 381 <v-card-actions>
382 <v-btn round dark @click.native="closeUpdateLectures">Cancel</v-btn> 382 <v-btn round dark @click.native="closeUpdateLectures">Cancel</v-btn>
383 <v-spacer></v-spacer> 383 <v-spacer></v-spacer>
384 <v-btn 384 <v-btn
385 round 385 round
386 dark 386 dark
387 @click="updateParticularTable(updateLectures.timeIn,updateLectures.timeOut)" 387 @click="updateParticularTable(updateLectures.timeIn,updateLectures.timeOut)"
388 >Save</v-btn> 388 >Save</v-btn>
389 </v-card-actions> 389 </v-card-actions>
390 </v-flex> 390 </v-flex>
391 </v-layout> 391 </v-layout>
392 </v-container> 392 </v-container>
393 </v-form> 393 </v-form>
394 </v-card> 394 </v-card>
395 </v-flex> 395 </v-flex>
396 </v-dialog> 396 </v-dialog>
397 <v-snackbar 397 <v-snackbar
398 :timeout="timeout" 398 :timeout="timeout"
399 :top="y === 'top'" 399 :top="y === 'top'"
400 :right="x === 'right'" 400 :right="x === 'right'"
401 :vertical="mode === 'vertical'" 401 :vertical="mode === 'vertical'"
402 v-model="snackbar" 402 v-model="snackbar"
403 color="success" 403 color="success"
404 >{{ text }}</v-snackbar> 404 >{{ text }}</v-snackbar>
405 405
406 <!-- ****** EXISTING-USERS TIME-TABLE ****** --> 406 <!-- ****** EXISTING-USERS TIME-TABLE ****** -->
407 407
408 <v-card flat> 408 <v-card flat>
409 <v-card-actions class="hidden-xs-only hidden-sm-only"> 409 <v-card-actions class="hidden-xs-only hidden-sm-only">
410 <v-layout> 410 <v-layout>
411 <label class="right mt-4 ml-5">Select Class:</label> 411 <label class="right mt-4 ml-5">Select Class:</label>
412 <v-select 412 <v-select
413 :items="addclass" 413 :items="addclass"
414 label="Select Class" 414 label="Select Class"
415 v-model="selectTimeTable.select" 415 v-model="selectTimeTable.select"
416 item-text="classNum" 416 item-text="classNum"
417 item-value="_id" 417 item-value="_id"
418 name="Select Class" 418 name="Select Class"
419 @change="getSections(selectTimeTable.select)" 419 @change="getSections(selectTimeTable.select)"
420 class="px-4" 420 class="px-4"
421 required 421 required
422 ></v-select> 422 ></v-select>
423 <label class="right mt-4">Select Section:</label> 423 <label class="right mt-4">Select Section:</label>
424 <v-select 424 <v-select
425 :items="addSection" 425 :items="addSection"
426 label="Select Section" 426 label="Select Section"
427 v-model="selectTimeTable.selectSection" 427 v-model="selectTimeTable.selectSection"
428 item-text="name" 428 item-text="name"
429 item-value="_id" 429 item-value="_id"
430 name="Select Section" 430 name="Select Section"
431 class="pl-3" 431 class="pl-3"
432 required 432 required
433 ></v-select> 433 ></v-select>
434 </v-layout> 434 </v-layout>
435 <v-spacer></v-spacer> 435 <v-spacer></v-spacer>
436 <v-btn @click="findTimeTable()" round dark :loading="loading" class="left">Find</v-btn> 436 <v-btn @click="findTimeTable()" round dark :loading="loading" class="left">Find</v-btn>
437 </v-card-actions> 437 </v-card-actions>
438 <v-layout class="hidden-xl-only hidden-lg-only hidden-md-only"> 438 <v-layout class="hidden-xl-only hidden-lg-only hidden-md-only">
439 <v-flex xs4 sm2 class="mt-4 ml-2"> 439 <v-flex xs4 sm2 class="mt-4 ml-2">
440 <label>Select Class:</label> 440 <label>Select Class:</label>
441 </v-flex> 441 </v-flex>
442 <v-flex xs6 sm9> 442 <v-flex xs6 sm9>
443 <v-select 443 <v-select
444 :items="addclass" 444 :items="addclass"
445 label="Select Class" 445 label="Select Class"
446 v-model="selectTimeTable.select" 446 v-model="selectTimeTable.select"
447 item-text="classNum" 447 item-text="classNum"
448 item-value="_id" 448 item-value="_id"
449 name="Select Class" 449 name="Select Class"
450 @change="getSections(selectTimeTable.select)" 450 @change="getSections(selectTimeTable.select)"
451 required 451 required
452 ></v-select> 452 ></v-select>
453 </v-flex> 453 </v-flex>
454 </v-layout> 454 </v-layout>
455 <v-layout class="hidden-xl-only hidden-lg-only hidden-md-only"> 455 <v-layout class="hidden-xl-only hidden-lg-only hidden-md-only">
456 <v-flex xs4 sm2 class="mt-4 ml-2"> 456 <v-flex xs4 sm2 class="mt-4 ml-2">
457 <label>Select Section:</label> 457 <label>Select Section:</label>
458 </v-flex> 458 </v-flex>
459 <v-flex xs6 sm9> 459 <v-flex xs6 sm9>
460 <v-select 460 <v-select
461 :items="addSection" 461 :items="addSection"
462 label="Select Section" 462 label="Select Section"
463 v-model="selectTimeTable.selectSection" 463 v-model="selectTimeTable.selectSection"
464 item-text="name" 464 item-text="name"
465 item-value="_id" 465 item-value="_id"
466 name="Select Section" 466 name="Select Section"
467 required 467 required
468 ></v-select> 468 ></v-select>
469 </v-flex> 469 </v-flex>
470 </v-layout> 470 </v-layout>
471 <v-layout class="hidden-xl-only hidden-lg-only hidden-md-only"> 471 <v-layout class="hidden-xl-only hidden-lg-only hidden-md-only">
472 <v-flex xs12> 472 <v-flex xs12>
473 <v-btn 473 <v-btn
474 @click="findTimeTable()" 474 @click="findTimeTable()"
475 round 475 round
476 dark 476 dark
477 :loading="loading" 477 :loading="loading"
478 class="right mr-4 mb-2" 478 class="right mr-4 mb-2"
479 >Find</v-btn> 479 >Find</v-btn>
480 </v-flex> 480 </v-flex>
481 </v-layout> 481 </v-layout>
482 </v-card> 482 </v-card>
483 <v-flex xs12> 483 <v-flex xs12>
484 <v-data-table 484 <v-data-table
485 :headers="headers" 485 :headers="headers"
486 :items="desserts" 486 :items="desserts"
487 :pagination.sync="pagination" 487 :pagination.sync="pagination"
488 :search="search" 488 :search="search"
489 item-key="_id" 489 item-key="_id"
490 > 490 >
491 <template slot="items" slot-scope="props"> 491 <template slot="items" slot-scope="props">
492 <tr 492 <tr
493 style="cursor: pointer;" 493 style="cursor: pointer;"
494 @click="getTimeTable(props.item), props.expanded = !props.expanded" 494 @click="getTimeTable(props.item), props.expanded = !props.expanded"
495 > 495 >
496 <td class="text-xs-center">{{ props.index }}</td> 496 <td class="text-xs-center">{{ props.index }}</td>
497 <td class="text-xs-center">{{ props.item.classData.classNum}}</td> 497 <td class="text-xs-center">{{ props.item.classData.classNum}}</td>
498 <td class="text-xs-center">{{ props.item.sectionData.name }}</td> 498 <td class="text-xs-center">{{ props.item.sectionData.name }}</td>
499 <td class="text-xs-center"> 499 <td class="text-xs-center">
500 <span> 500 <span>
501 <img 501 <img
502 style="cursor:pointer; width:20px; height:18px; " 502 style="cursor:pointer; width:20px; height:18px; "
503 class="mr-3 mt-2" 503 class="mr-3 mt-2"
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;width:20px; height:20px; " 508 style="cursor:pointer;width:20px; height:20px; "
509 class="mr-3" 509 class="mr-3"
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 <v-icon color="black" @click="addSchedule(props.item._id)">add_circle_outline</v-icon> 513 <img
514 style="cursor:pointer; width:20px; height:20px; "
515 src="/static/icon/add1.png"
516 @click="addSchedule(props.item._id)"
517 />
518 <!-- <v-icon color="black" >add_circle_outline</v-icon> -->
514 </span> 519 </span>
515 </td> 520 </td>
516 </tr> 521 </tr>
517 </template> 522 </template>
518 <template slot="expand" slot-scope="props"> 523 <template slot="expand" slot-scope="props">
519 <v-data-table 524 <v-data-table
520 :items="timeTableList.schedule" 525 :items="timeTableList.schedule"
521 hide-actions 526 hide-actions
522 item-key="title" 527 item-key="title"
523 style="width: auto;" 528 style="width: auto;"
524 > 529 >
525 <template slot="items" slot-scope="props"> 530 <template slot="items" slot-scope="props">
526 <tr> 531 <tr>
527 <td class="text-xs-left subheading table-td"> 532 <td class="text-xs-left subheading table-td">
528 <b>{{ props.item.day }}</b> 533 <b>{{ props.item.day }}</b>
529 </td> 534 </td>
530 <td class="table-td"> 535 <td class="table-td">
531 <b>Subject</b> 536 <b>Subject</b>
532 <br /> 537 <br />
533 <b>Time In</b> 538 <b>Time In</b>
534 <br /> 539 <br />
535 <b>Time Out</b> 540 <b>Time Out</b>
536 </td> 541 </td>
537 <td v-for="list in props.item.lectures" class="table-td"> 542 <td v-for="list in props.item.lectures" class="table-td">
538 <b>{{ list.subjectName }}</b> 543 <b>{{ list.subjectName }}</b>
539 <img 544 <img
540 style="cursor:pointer; width:20px; height:18px; " 545 style="cursor:pointer; width:20px; height:18px; "
541 class="mr-2 ml-2" 546 class="mr-2 ml-2"
542 src="/static/icon/edit1.png" 547 src="/static/icon/edit1.png"
543 @click="updateTimeTable(list, timeTableList)" 548 @click="updateTimeTable(list, timeTableList)"
544 /> 549 />
545 <img 550 <img
546 style="cursor:pointer; width:20px; height:20px; " 551 style="cursor:pointer; width:20px; height:20px; "
547 src="/static/icon/delete1.png" 552 src="/static/icon/delete1.png"
548 @click="deleteTimeTable(list,props.item.lectures)" 553 @click="deleteTimeTable(list,props.item.lectures)"
549 /> 554 />
550 <br /> 555 <br />
551 {{list.timeIn}} 556 {{list.timeIn}}
552 <br /> 557 <br />
553 {{list.timeOut}} 558 {{list.timeOut}}
554 </td> 559 </td>
555 <td> 560 <td>
556 <v-icon 561 <v-icon
557 color="black" 562 color="black"
558 @click="addLecture(props.item._id, timeTableList._id)" 563 @click="addLecture(props.item._id, timeTableList._id)"
559 >add_circle_outline</v-icon> 564 >add_circle_outline</v-icon>
560 </td> 565 </td>
561 </tr> 566 </tr>
562 </template> 567 </template>
563 </v-data-table> 568 </v-data-table>
564 </template> 569 </template>
565 <v-alert 570 <v-alert
566 slot="no-results" 571 slot="no-results"
567 :value="true" 572 :value="true"
568 color="error" 573 color="error"
569 icon="warning" 574 icon="warning"
570 >Your search for "{{ search }}" found no results.</v-alert> 575 >Your search for "{{ search }}" found no results.</v-alert>
571 </v-data-table> 576 </v-data-table>
572 <br /> 577 <br />
573 <br /> 578 <br />
574 </v-flex> 579 </v-flex>
575 </v-tab-item> 580 </v-tab-item>
576 581
577 <!-- ****** ADD MULTIPLE TIME-TABLE ****** --> 582 <!-- ****** ADD MULTIPLE TIME-TABLE ****** -->
578 583
579 <v-tab-item> 584 <v-tab-item>
580 <v-container> 585 <v-container>
581 <v-snackbar 586 <v-snackbar
582 :timeout="timeout" 587 :timeout="timeout"
583 :top="y === 'top'" 588 :top="y === 'top'"
584 :right="x === 'right'" 589 :right="x === 'right'"
585 :vertical="mode === 'vertical'" 590 :vertical="mode === 'vertical'"
586 v-model="snackbar" 591 v-model="snackbar"
587 color="success" 592 color="success"
588 >{{ text }}</v-snackbar> 593 >{{ text }}</v-snackbar>
589 <v-flex xs12 sm12 class="my-4"> 594 <v-flex xs12 sm12 class="my-4">
590 <v-card flat> 595 <v-card flat>
591 <v-form ref="form" v-model="valid" lazy-validation> 596 <v-form ref="form" v-model="valid" lazy-validation>
592 <v-container fluid> 597 <v-container fluid>
593 <v-layout> 598 <v-layout>
594 <v-flex 599 <v-flex
595 xs12 600 xs12
596 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" 601 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
597 > 602 >
598 <v-avatar size="100px"> 603 <v-avatar size="100px">
599 <img src="/static/icon/user.png" v-if="!imageUrl" /> 604 <img src="/static/icon/user.png" v-if="!imageUrl" />
600 </v-avatar> 605 </v-avatar>
601 <input 606 <input
602 type="file" 607 type="file"
603 style="display: none" 608 style="display: none"
604 ref="image" 609 ref="image"
605 accept="image/*" 610 accept="image/*"
606 @change="onFilePicked" 611 @change="onFilePicked"
607 /> 612 />
608 <img 613 <img
609 :src="imageData.imageUrl" 614 :src="imageData.imageUrl"
610 height="150" 615 height="150"
611 v-if="imageUrl" 616 v-if="imageUrl"
612 style="border-radius:50%; width:200px" 617 style="border-radius:50%; width:200px"
613 /> 618 />
614 </v-flex> 619 </v-flex>
615 </v-layout> 620 </v-layout>
616 <v-flex xs12> 621 <v-flex xs12>
617 <v-layout> 622 <v-layout>
618 <v-flex xs4 class="pt-4 subheading"> 623 <v-flex xs4 class="pt-4 subheading">
619 <label class="right">Select Class:</label> 624 <label class="right">Select Class:</label>
620 </v-flex> 625 </v-flex>
621 <v-flex xs4 class="ml-3"> 626 <v-flex xs4 class="ml-3">
622 <v-select 627 <v-select
623 :items="addclass" 628 :items="addclass"
624 label="Select Class" 629 label="Select Class"
625 v-model="timeTable.select" 630 v-model="timeTable.select"
626 item-text="classNum" 631 item-text="classNum"
627 item-value="_id" 632 item-value="_id"
628 @change="getSections(timeTable.select)" 633 @change="getSections(timeTable.select)"
629 required 634 required
630 ></v-select> 635 ></v-select>
631 </v-flex> 636 </v-flex>
632 </v-layout> 637 </v-layout>
633 </v-flex> 638 </v-flex>
634 <v-flex xs12> 639 <v-flex xs12>
635 <v-layout> 640 <v-layout>
636 <v-flex xs4 class="pt-4 subheading"> 641 <v-flex xs4 class="pt-4 subheading">
637 <label class="right">Select Section:</label> 642 <label class="right">Select Section:</label>
638 </v-flex> 643 </v-flex>
639 <v-flex xs4 class="ml-3"> 644 <v-flex xs4 class="ml-3">
640 <v-select 645 <v-select
641 :items="addSection" 646 :items="addSection"
642 label="Select Section" 647 label="Select Section"
643 v-model="timeTable.selectSection" 648 v-model="timeTable.selectSection"
644 item-text="name" 649 item-text="name"
645 item-value="_id" 650 item-value="_id"
646 required 651 required
647 ></v-select> 652 ></v-select>
648 </v-flex> 653 </v-flex>
649 </v-layout> 654 </v-layout>
650 </v-flex> 655 </v-flex>
651 <v-flex xs12> 656 <v-flex xs12>
652 <v-layout> 657 <v-layout>
653 <v-flex xs4 class="pt-4 subheading"> 658 <v-flex xs4 class="pt-4 subheading">
654 <label class="right">Select Teacher:</label> 659 <label class="right">Select Teacher:</label>
655 </v-flex> 660 </v-flex>
656 <v-flex xs4 class="ml-3"> 661 <v-flex xs4 class="ml-3">
657 <v-select 662 <v-select
658 :items="addTeachers" 663 :items="addTeachers"
659 label="Select Teacher" 664 label="Select Teacher"
660 v-model="timeTable.selectTeacher" 665 v-model="timeTable.selectTeacher"
661 item-text="name" 666 item-text="name"
662 item-value="_id" 667 item-value="_id"
663 required 668 required
664 ></v-select> 669 ></v-select>
665 </v-flex> 670 </v-flex>
666 </v-layout> 671 </v-layout>
667 </v-flex> 672 </v-flex>
668 <v-flex xs12> 673 <v-flex xs12>
669 <v-layout> 674 <v-layout>
670 <v-flex xs4 class="pt-4 subheading"> 675 <v-flex xs4 class="pt-4 subheading">
671 <label class="right">Select Day:</label> 676 <label class="right">Select Day:</label>
672 </v-flex> 677 </v-flex>
673 <v-flex xs4 class="ml-3"> 678 <v-flex xs4 class="ml-3">
674 <v-select 679 <v-select
675 :items="addOneDay" 680 :items="addOneDay"
676 label="Select Day" 681 label="Select Day"
677 v-model="timeTable.selectDay" 682 v-model="timeTable.selectDay"
678 item-text="name" 683 item-text="name"
679 item-value="_id" 684 item-value="_id"
680 required 685 required
681 ></v-select> 686 ></v-select>
682 </v-flex> 687 </v-flex>
683 </v-layout> 688 </v-layout>
684 </v-flex> 689 </v-flex>
685 <v-flex xs12> 690 <v-flex xs12>
686 <v-layout> 691 <v-layout>
687 <v-flex xs4 class="pt-4 subheading"> 692 <v-flex xs4 class="pt-4 subheading">
688 <label class="right">Subject Name:</label> 693 <label class="right">Subject Name:</label>
689 </v-flex> 694 </v-flex>
690 <v-flex xs4 class="ml-3"> 695 <v-flex xs4 class="ml-3">
691 <v-text-field 696 <v-text-field
692 placeholder="fill your Subject Name" 697 placeholder="fill your Subject Name"
693 :rules="subjectNameRules" 698 :rules="subjectNameRules"
694 v-model="timeTable.subjectName" 699 v-model="timeTable.subjectName"
695 type="text" 700 type="text"
696 required 701 required
697 ></v-text-field> 702 ></v-text-field>
698 </v-flex> 703 </v-flex>
699 </v-layout> 704 </v-layout>
700 </v-flex> 705 </v-flex>
701 <v-flex xs12> 706 <v-flex xs12>
702 <v-layout> 707 <v-layout>
703 <v-flex xs4 class="pt-4 subheading"> 708 <v-flex xs4 class="pt-4 subheading">
704 <label class="right">Time In:</label> 709 <label class="right">Time In:</label>
705 </v-flex> 710 </v-flex>
706 <v-flex xs4 class="ml-3"> 711 <v-flex xs4 class="ml-3">
707 <v-menu 712 <v-menu
708 ref="menuA" 713 ref="menuA"
709 :close-on-content-click="false" 714 :close-on-content-click="false"
710 v-model="menu2" 715 v-model="menu2"
711 :nudge-right="40" 716 :nudge-right="40"
712 :return-value.sync="timeTable.timeIn" 717 :return-value.sync="timeTable.timeIn"
713 lazy 718 lazy
714 transition="scale-transition" 719 transition="scale-transition"
715 offset-y 720 offset-y
716 full-width 721 full-width
717 max-width="290px" 722 max-width="290px"
718 min-width="290px" 723 min-width="290px"
719 > 724 >
720 <v-text-field 725 <v-text-field
721 slot="activator" 726 slot="activator"
722 v-model="timeTable.timeIn" 727 v-model="timeTable.timeIn"
723 label="Select your timeIn" 728 label="Select your timeIn"
724 append-icon="access_time" 729 append-icon="access_time"
725 ></v-text-field> 730 ></v-text-field>
726 <v-time-picker 731 <v-time-picker
727 v-model="timeTable.timeIn" 732 v-model="timeTable.timeIn"
728 @change="$refs.menuA.save(timeTable.timeIn)" 733 @change="$refs.menuA.save(timeTable.timeIn)"
729 ></v-time-picker> 734 ></v-time-picker>
730 </v-menu> 735 </v-menu>
731 </v-flex> 736 </v-flex>
732 </v-layout> 737 </v-layout>
733 </v-flex> 738 </v-flex>
734 <v-flex xs12> 739 <v-flex xs12>
735 <v-layout> 740 <v-layout>
736 <v-flex xs4 class="pt-4 subheading"> 741 <v-flex xs4 class="pt-4 subheading">
737 <label class="right">Time Out:</label> 742 <label class="right">Time Out:</label>
738 </v-flex> 743 </v-flex>
739 <v-flex xs4 class="ml-3"> 744 <v-flex xs4 class="ml-3">
740 <v-menu 745 <v-menu
741 ref="menu" 746 ref="menu"
742 :close-on-content-click="false" 747 :close-on-content-click="false"
743 v-model="menu1" 748 v-model="menu1"
744 :nudge-right="40" 749 :nudge-right="40"
745 :return-value.sync="timeTable.timeOut" 750 :return-value.sync="timeTable.timeOut"
746 lazy 751 lazy
747 transition="scale-transition" 752 transition="scale-transition"
748 offset-y 753 offset-y
749 full-width 754 full-width
750 max-width="290px" 755 max-width="290px"
751 min-width="290px" 756 min-width="290px"
752 > 757 >
753 <v-text-field 758 <v-text-field
754 slot="activator" 759 slot="activator"
755 v-model="timeTable.timeOut" 760 v-model="timeTable.timeOut"
756 label="Select your Time Out" 761 label="Select your Time Out"
757 append-icon="access_time" 762 append-icon="access_time"
758 ></v-text-field> 763 ></v-text-field>
759 <v-time-picker 764 <v-time-picker
760 v-model="timeTable.timeOut" 765 v-model="timeTable.timeOut"
761 @change="$refs.menu.save(timeTable.timeOut)" 766 @change="$refs.menu.save(timeTable.timeOut)"
762 ></v-time-picker> 767 ></v-time-picker>
763 </v-menu> 768 </v-menu>
764 </v-flex> 769 </v-flex>
765 </v-layout> 770 </v-layout>
766 </v-flex> 771 </v-flex>
767 <v-layout> 772 <v-layout>
768 <v-flex xs12 sm6 offset-sm3> 773 <v-flex xs12 sm6 offset-sm3>
769 <v-card-actions> 774 <v-card-actions>
770 <v-btn @click="clear" round dark>clear</v-btn> 775 <v-btn @click="clear" round dark>clear</v-btn>
771 <v-spacer></v-spacer> 776 <v-spacer></v-spacer>
772 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 777 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
773 </v-card-actions> 778 </v-card-actions>
774 </v-flex> 779 </v-flex>
775 </v-layout> 780 </v-layout>
776 </v-container> 781 </v-container>
777 </v-form> 782 </v-form>
778 </v-card> 783 </v-card>
779 </v-flex> 784 </v-flex>
780 </v-container> 785 </v-container>
781 </v-tab-item> 786 </v-tab-item>
782 </v-tabs> 787 </v-tabs>
783 <div class="loader" v-if="showLoader"> 788 <div class="loader" v-if="showLoader">
784 <v-progress-circular indeterminate color="white"></v-progress-circular> 789 <v-progress-circular indeterminate color="white"></v-progress-circular>
785 </div> 790 </div>
786 </v-app> 791 </v-app>
787 </template> 792 </template>
788 <script> 793 <script>
789 import http from "@/Services/http.js"; 794 import http from "@/Services/http.js";
790 import Util from "@/util"; 795 import Util from "@/util";
791 796
792 export default { 797 export default {
793 data: () => ({ 798 data: () => ({
794 y: "top", 799 y: "top",
795 x: "right", 800 x: "right",
796 mode: "", 801 mode: "",
797 timeout: 3000, 802 timeout: 3000,
798 text: "", 803 text: "",
799 search: "", 804 search: "",
800 snackbar: false, 805 snackbar: false,
801 loading: false, 806 loading: false,
802 showLoader: false, 807 showLoader: false,
803 dialog: false, 808 dialog: false,
804 dialogAddLecture: false, 809 dialogAddLecture: false,
805 dialogUpdateLectures: false, 810 dialogUpdateLectures: false,
806 dialogSchedule: false, 811 dialogSchedule: false,
807 dialog1: false, 812 dialog1: false,
808 valid: true, 813 valid: true,
809 isActive: true, 814 isActive: true,
810 newActive: false, 815 newActive: false,
811 addclass: [], 816 addclass: [],
812 addSection: [], 817 addSection: [],
813 addTeachers: [], 818 addTeachers: [],
814 gender: ["Male", "Female"], 819 gender: ["Male", "Female"],
815 AddUsercredentials: {}, 820 AddUsercredentials: {},
816 pagination: { 821 pagination: {
817 rowsPerPage: 15 822 rowsPerPage: 15
818 }, 823 },
819 imageData: {}, 824 imageData: {},
820 imageName: "", 825 imageName: "",
821 imageUrl: "", 826 imageUrl: "",
822 imageFile: "", 827 imageFile: "",
823 timeInRules: [v => !!v || "Time In is required"], 828 timeInRules: [v => !!v || "Time In is required"],
824 timeOutRules: [v => !!v || "Time Out is required"], 829 timeOutRules: [v => !!v || "Time Out is required"],
825 lectureRules: [v => !!v || "Lecture No is required"], 830 lectureRules: [v => !!v || "Lecture No is required"],
826 subjectNameRules: [v => !!v || "Subject Name is required"], 831 subjectNameRules: [v => !!v || "Subject Name is required"],
827 getParticulerLecture: "", 832 getParticulerLecture: "",
828 headers: [ 833 headers: [
829 { 834 {
830 text: "No", 835 text: "No",
831 align: "center", 836 align: "center",
832 sortable: false, 837 sortable: false,
833 value: "No" 838 value: "No"
834 }, 839 },
835 { 840 {
836 text: "Class Name", 841 text: "Class Name",
837 value: "classData.classNum", 842 value: "classData.classNum",
838 sortable: false, 843 sortable: false,
839 align: "center" 844 align: "center"
840 }, 845 },
841 { 846 {
842 text: "Section Name", 847 text: "Section Name",
843 value: "sectionData.name", 848 value: "sectionData.name",
844 sortable: false, 849 sortable: false,
845 align: "center" 850 align: "center"
846 }, 851 },
847 { text: "Action", value: "", sortable: false, align: "center" } 852 { text: "Action", value: "", sortable: false, align: "center" }
848 ], 853 ],
849 daysHeaders: [ 854 daysHeaders: [
850 { text: "Day", value: "dayday", sortable: false, align: "center" }, 855 { text: "Day", value: "dayday", sortable: false, align: "center" },
851 { 856 {
852 text: "Subject Name", 857 text: "Subject Name",
853 value: "subjectName", 858 value: "subjectName",
854 sortable: false, 859 sortable: false,
855 align: "center" 860 align: "center"
856 }, 861 },
857 { text: "Time In", value: "timeIn", sortable: false, align: "center" }, 862 { text: "Time In", value: "timeIn", sortable: false, align: "center" },
858 { text: "Time Out", value: "timeOut", sortable: false, align: "center" } 863 { text: "Time Out", value: "timeOut", sortable: false, align: "center" }
859 ], 864 ],
860 addOneDay: [ 865 addOneDay: [
861 "Monday", 866 "Monday",
862 "Tuesday", 867 "Tuesday",
863 "Wednesday", 868 "Wednesday",
864 "Thursday", 869 "Thursday",
865 "Friday", 870 "Friday",
866 "Saturday", 871 "Saturday",
867 "Sunday" 872 "Sunday"
868 ], 873 ],
869 schedule: { 874 schedule: {
870 selectDay: "" 875 selectDay: ""
871 }, 876 },
872 desserts: [], 877 desserts: [],
873 timeTableList: [], 878 timeTableList: [],
874 editedIndex: -1, 879 editedIndex: -1,
875 selectTimeTable: { 880 selectTimeTable: {
876 select: "", 881 select: "",
877 selectSection: "" 882 selectSection: ""
878 }, 883 },
879 timeTable: { 884 timeTable: {
880 select: "", 885 select: "",
881 selectSection: "", 886 selectSection: "",
882 selectDay: "", 887 selectDay: "",
883 timeIn: null, 888 timeIn: null,
884 timeOut: null, 889 timeOut: null,
885 subjectName: "", 890 subjectName: "",
886 selectTeacher: "" 891 selectTeacher: ""
887 }, 892 },
888 editedItem: { 893 editedItem: {
889 classNum: "", 894 classNum: "",
890 selectSection: "" 895 selectSection: ""
891 }, 896 },
892 addlectures: { 897 addlectures: {
893 timeIn: null, 898 timeIn: null,
894 timeOut: null, 899 timeOut: null,
895 subjectName: "", 900 subjectName: "",
896 teacherId: "", 901 teacherId: "",
897 scheduleId: "", 902 scheduleId: "",
898 timeTableId: "" 903 timeTableId: ""
899 }, 904 },
900 updateLectures: { 905 updateLectures: {
901 timeIn: null, 906 timeIn: null,
902 timeOut: null, 907 timeOut: null,
903 subjectName: "", 908 subjectName: "",
904 teacherId: "" 909 teacherId: ""
905 }, 910 },
906 updateLecturesId: { 911 updateLecturesId: {
907 lectureId: "", 912 lectureId: "",
908 scheduleId: "" 913 scheduleId: ""
909 }, 914 },
910 menu1: false, 915 menu1: false,
911 menu2: false, 916 menu2: false,
912 menu3: false, 917 menu3: false,
913 menu4: false, 918 menu4: false,
914 menu5: false, 919 menu5: false,
915 menu6: false, 920 menu6: false,
916 scheduleDayId: "", 921 scheduleDayId: ""
917 }), 922 }),
918 methods: { 923 methods: {
919 findTimeTable() { 924 findTimeTable() {
920 http() 925 http()
921 .get("/getParticularClassTimeTable", { 926 .get("/getParticularClassTimeTable", {
922 params: { 927 params: {
923 sectionId: this.selectTimeTable.selectSection, 928 sectionId: this.selectTimeTable.selectSection,
924 classId: this.selectTimeTable.select 929 classId: this.selectTimeTable.select
925 } 930 }
926 }) 931 })
927 .then(response => { 932 .then(response => {
928 this.desserts = response.data.data; 933 this.desserts = response.data.data;
929 }) 934 })
930 .catch(error => { 935 .catch(error => {
931 console.log("err====>", error); 936 console.log("err====>", error);
932 if ((this.snackbar = true)) { 937 if ((this.snackbar = true)) {
933 this.text = error.response.data.message; 938 this.text = error.response.data.message;
934 this.text = error.response.data.statusText; 939 this.text = error.response.data.statusText;
935 } 940 }
936 }); 941 });
937 }, 942 },
938 getSections(_id) { 943 getSections(_id) {
939 var token = this.$store.state.token; 944 var token = this.$store.state.token;
940 http() 945 http()
941 .get( 946 .get(
942 "/getSectionsList", 947 "/getSectionsList",
943 { params: { classId: _id } }, 948 { params: { classId: _id } },
944 { 949 {
945 headers: { Authorization: "Bearer " + token } 950 headers: { Authorization: "Bearer " + token }
946 } 951 }
947 ) 952 )
948 .then(response => { 953 .then(response => {
949 this.addSection = response.data.data; 954 this.addSection = response.data.data;
950 }) 955 })
951 .catch(err => { 956 .catch(err => {
952 // console.log("err====>", err); 957 // console.log("err====>", err);
953 }); 958 });
954 }, 959 },
955 getTimeTable(item) { 960 getTimeTable(item) {
956 this.showLoader = true; 961 this.showLoader = true;
957 this.getParticulerLecture = item._id; 962 this.getParticulerLecture = item._id;
958 var token = this.$store.state.token; 963 var token = this.$store.state.token;
959 http() 964 http()
960 .get( 965 .get(
961 "/getParticularTimeTable", 966 "/getParticularTimeTable",
962 { params: { timeTableId: item._id } }, 967 { params: { timeTableId: item._id } },
963 { 968 {
964 headers: { Authorization: "Bearer " + token } 969 headers: { Authorization: "Bearer " + token }
965 } 970 }
966 ) 971 )
967 .then(response => { 972 .then(response => {
968 this.timeTableList = response.data.data; 973 this.timeTableList = response.data.data;
969 this.showLoader = false; 974 this.showLoader = false;
970 }) 975 })
971 .catch(err => { 976 .catch(err => {
972 this.showLoader = false; 977 this.showLoader = false;
973 // console.log("err====>", err); 978 // console.log("err====>", err);
974 }); 979 });
975 }, 980 },
976 pickFile() { 981 pickFile() {
977 this.$refs.image.click(); 982 this.$refs.image.click();
978 }, 983 },
979 984
980 onFilePicked(e) { 985 onFilePicked(e) {
981 const files = e.target.files; 986 const files = e.target.files;
982 this.imageData.upload = e.target.files[0]; 987 this.imageData.upload = e.target.files[0];
983 if (files[0] !== undefined) { 988 if (files[0] !== undefined) {
984 this.imageName = files[0].name; 989 this.imageName = files[0].name;
985 if (this.imageName.lastIndexOf(".") <= 0) { 990 if (this.imageName.lastIndexOf(".") <= 0) {
986 return; 991 return;
987 } 992 }
988 const fr = new FileReader(); 993 const fr = new FileReader();
989 fr.readAsDataURL(files[0]); 994 fr.readAsDataURL(files[0]);
990 fr.addEventListener("load", () => { 995 fr.addEventListener("load", () => {
991 this.imageUrl = fr.result; 996 this.imageUrl = fr.result;
992 this.imageFile = files[0]; // this is an image file that can be sent to server... 997 this.imageFile = files[0]; // this is an image file that can be sent to server...
993 this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 998 this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
994 }); 999 });
995 } else { 1000 } else {
996 this.imageName = ""; 1001 this.imageName = "";
997 this.imageFile = ""; 1002 this.imageFile = "";
998 this.imageUrl = ""; 1003 this.imageUrl = "";
999 } 1004 }
1000 }, 1005 },
1001 // getTimeTableList() { 1006 // getTimeTableList() {
1002 // this.showLoader = true; 1007 // this.showLoader = true;
1003 // var token = this.$store.state.token; 1008 // var token = this.$store.state.token;
1004 // http() 1009 // http()
1005 // .get("/getTimeTablesList", { 1010 // .get("/getTimeTablesList", {
1006 // headers: { Authorization: "Bearer " + token } 1011 // headers: { Authorization: "Bearer " + token }
1007 // }) 1012 // })
1008 // .then(response => { 1013 // .then(response => {
1009 // this.desserts = response.data.data; 1014 // this.desserts = response.data.data;
1010 // this.showLoader = false; 1015 // this.showLoader = false;
1011 // // console.log("getTimeTableList=====>", response.data.data); 1016 // // console.log("getTimeTableList=====>", response.data.data);
1012 // }) 1017 // })
1013 // .catch(err => { 1018 // .catch(err => {
1014 // // console.log("err====>", err); 1019 // // console.log("err====>", err);
1015 // this.showLoader = false; 1020 // this.showLoader = false;
1016 // this.$router.replace({ path: "/" }); 1021 // this.$router.replace({ path: "/" });
1017 // }); 1022 // });
1018 // }, 1023 // },
1019 editItem(item) { 1024 editItem(item) {
1020 this.editedIndex = this.desserts.indexOf(item); 1025 this.editedIndex = this.desserts.indexOf(item);
1021 this.editedItem = Object.assign({}, item); 1026 this.editedItem = Object.assign({}, item);
1022 this.dialog = true; 1027 this.dialog = true;
1023 }, 1028 },
1024 updateTimeTable(timeToUpdate, classToUpdate) { 1029 updateTimeTable(timeToUpdate, classToUpdate) {
1025 console.log( 1030 console.log(
1026 "timeToUpdate, classToUpdate", 1031 "timeToUpdate, classToUpdate",
1027 timeToUpdate._id, 1032 timeToUpdate._id,
1028 classToUpdate.schedule 1033 classToUpdate.schedule
1029 ); 1034 );
1030 for (let i = 0; i < classToUpdate.schedule.length; i++) { 1035 for (let i = 0; i < classToUpdate.schedule.length; i++) {
1031 this.updateLecturesId.scheduleId = classToUpdate.schedule[i]._id; 1036 this.updateLecturesId.scheduleId = classToUpdate.schedule[i]._id;
1032 } 1037 }
1033 (this.updateLecturesId.lectureId = timeToUpdate._id), 1038 (this.updateLecturesId.lectureId = timeToUpdate._id),
1034 (this.updateLectures = timeToUpdate); 1039 (this.updateLectures = timeToUpdate);
1035 this.dialogUpdateLectures = true; 1040 this.dialogUpdateLectures = true;
1036 }, 1041 },
1037 addLecture(scheduleId, timeTableId) { 1042 addLecture(scheduleId, timeTableId) {
1038 this.addlectures.scheduleId = scheduleId; 1043 this.addlectures.scheduleId = scheduleId;
1039 this.addlectures.timeTableId = timeTableId; 1044 this.addlectures.timeTableId = timeTableId;
1040 this.dialogAddLecture = true; 1045 this.dialogAddLecture = true;
1041 }, 1046 },
1042 AddLecture() { 1047 AddLecture() {
1043 if (this.$refs.lectureForm.validate()) { 1048 if (this.$refs.lectureForm.validate()) {
1044 http() 1049 http()
1045 .post("/addLecture", this.addlectures) 1050 .post("/addLecture", this.addlectures)
1046 .then(response => { 1051 .then(response => {
1047 if ((this.snackbar = true)) { 1052 if ((this.snackbar = true)) {
1048 this.text = "New Add Lecture successfully"; 1053 this.text = "New Add Lecture successfully";
1049 } 1054 }
1050 var token = this.$store.state.token; 1055 var token = this.$store.state.token;
1051 http() 1056 http()
1052 .get( 1057 .get(
1053 "/getParticularTimeTable", 1058 "/getParticularTimeTable",
1054 { params: { timeTableId: this.getParticulerLecture } }, 1059 { params: { timeTableId: this.getParticulerLecture } },
1055 { 1060 {
1056 headers: { Authorization: "Bearer " + token } 1061 headers: { Authorization: "Bearer " + token }
1057 } 1062 }
1058 ) 1063 )
1059 .then(response => { 1064 .then(response => {
1060 this.timeTableList = response.data.data; 1065 this.timeTableList = response.data.data;
1061 this.showLoader = false; 1066 this.showLoader = false;
1062 }) 1067 })
1063 .catch(err => { 1068 .catch(err => {
1064 this.showLoader = false; 1069 this.showLoader = false;
1065 // console.log("err====>", err); 1070 // console.log("err====>", err);
1066 }); 1071 });
1067 this.closedialogLecture(); 1072 this.closedialogLecture();
1068 this.clearLeactureData(); 1073 this.clearLeactureData();
1069 }) 1074 })
1070 .catch(error => { 1075 .catch(error => {
1071 if ((this.snackbar = true)) { 1076 if ((this.snackbar = true)) {
1072 this.text = error.response.data.message; 1077 this.text = error.response.data.message;
1073 this.text = error.response.data.statusText; 1078 this.text = error.response.data.statusText;
1074 } 1079 }
1075 }); 1080 });
1076 } 1081 }
1077 }, 1082 },
1078 updateParticularTable() { 1083 updateParticularTable() {
1079 let EditLecture = { 1084 let EditLecture = {
1080 lectureId: this.updateLecturesId.lectureId, 1085 lectureId: this.updateLecturesId.lectureId,
1081 scheduleId: this.updateLecturesId.scheduleId, 1086 scheduleId: this.updateLecturesId.scheduleId,
1082 updatedLecture: { 1087 updatedLecture: {
1083 timeIn: this.updateLectures.timeIn, 1088 timeIn: this.updateLectures.timeIn,
1084 timeOut: this.updateLectures.timeOut, 1089 timeOut: this.updateLectures.timeOut,
1085 subjectName: this.updateLectures.subjectName, 1090 subjectName: this.updateLectures.subjectName,
1086 teacherId: this.updateLectures.teacherId 1091 teacherId: this.updateLectures.teacherId
1087 } 1092 }
1088 }; 1093 };
1089 http() 1094 http()
1090 .put("/updateLecture", EditLecture) 1095 .put("/updateLecture", EditLecture)
1091 .then(response => { 1096 .then(response => {
1092 console.log("updateLecture", EditLecture); 1097 console.log("updateLecture", EditLecture);
1093 if ((this.snackbar = true)) { 1098 if ((this.snackbar = true)) {
1094 this.text = "Successfully Edit Update Lecture"; 1099 this.text = "Successfully Edit Update Lecture";
1095 } 1100 }
1096 this.closeUpdateLectures(); 1101 this.closeUpdateLectures();
1097 }) 1102 })
1098 .catch(error => { 1103 .catch(error => {
1099 // console.log(error); 1104 // console.log(error);
1100 if ((this.snackbar = true)) { 1105 if ((this.snackbar = true)) {
1101 this.text = error.response.data.message; 1106 this.text = error.response.data.message;
1102 this.text = error.response.data.statusText; 1107 this.text = error.response.data.statusText;
1103 } 1108 }
1104 }); 1109 });
1105 }, 1110 },
1106 deleteItem(item) { 1111 deleteItem(item) {
1107 let deleteTimeTable = { 1112 let deleteTimeTable = {
1108 timeTableId: item._id 1113 timeTableId: item._id
1109 }; 1114 };
1110 http() 1115 http()
1111 .delete( 1116 .delete(
1112 "/deleteTimeTable", 1117 "/deleteTimeTable",
1113 confirm("Are you sure you want to delete this?") && { 1118 confirm("Are you sure you want to delete this?") && {
1114 params: deleteTimeTable 1119 params: deleteTimeTable
1115 } 1120 }
1116 ) 1121 )
1117 .then(response => { 1122 .then(response => {
1118 // console.log("deleteUers",deleteTimeTable) 1123 // console.log("deleteUers",deleteTimeTable)
1119 if ((this.snackbar = true)) { 1124 if ((this.snackbar = true)) {
1120 this.text = "Successfully delete Existing Time Table"; 1125 this.text = "Successfully delete Existing Time Table";
1121 } 1126 }
1122 this.findTimeTable(); 1127 this.findTimeTable();
1123 }) 1128 })
1124 .catch(error => { 1129 .catch(error => {
1125 // console.log(error); 1130 // console.log(error);
1126 }); 1131 });
1127 }, 1132 },
1128 activeTab(type) { 1133 activeTab(type) {
1129 switch (type) { 1134 switch (type) {
1130 case "existing": 1135 case "existing":
1131 this.newActive = false; 1136 this.newActive = false;
1132 this.isActive = true; 1137 this.isActive = true;
1133 break; 1138 break;
1134 1139
1135 default: 1140 default:
1136 this.newActive = true; 1141 this.newActive = true;
1137 this.isActive = false; 1142 this.isActive = false;
1138 break; 1143 break;
1139 } 1144 }
1140 }, 1145 },
1141 close() { 1146 close() {
1142 this.dialog = false; 1147 this.dialog = false;
1143 setTimeout(() => { 1148 setTimeout(() => {
1144 this.editedItem = Object.assign({}, this.defaultItem); 1149 this.editedItem = Object.assign({}, this.defaultItem);
1145 this.editedIndex = -1; 1150 this.editedIndex = -1;
1146 }, 300); 1151 }, 300);
1147 }, 1152 },
1148 close1() { 1153 close1() {
1149 this.dialog1 = false; 1154 this.dialog1 = false;
1150 }, 1155 },
1151 closedialogLecture() { 1156 closedialogLecture() {
1152 this.dialogAddLecture = false; 1157 this.dialogAddLecture = false;
1153 }, 1158 },
1154 closeUpdateLectures() { 1159 closeUpdateLectures() {
1155 this.dialogUpdateLectures = false; 1160 this.dialogUpdateLectures = false;
1156 }, 1161 },
1157 submit() { 1162 submit() {
1158 if (this.$refs.form.validate()) { 1163 if (this.$refs.form.validate()) {
1159 let imageData = new FormData(); 1164 let imageData = new FormData();
1160 imageData.append("upload", this.imageFile); 1165 imageData.append("upload", this.imageFile);
1161 let addTimeTable = { 1166 let addTimeTable = {
1162 sectionId: this.timeTable.selectSection, 1167 sectionId: this.timeTable.selectSection,
1163 classId: this.timeTable.select, 1168 classId: this.timeTable.select,
1164 schedule: [ 1169 schedule: [
1165 { 1170 {
1166 day: this.timeTable.selectDay, 1171 day: this.timeTable.selectDay,
1167 lectures: [ 1172 lectures: [
1168 { 1173 {
1169 timeIn: this.timeTable.timeIn, 1174 timeIn: this.timeTable.timeIn,
1170 timeOut: this.timeTable.timeOut, 1175 timeOut: this.timeTable.timeOut,
1171 subjectName: this.timeTable.subjectName, 1176 subjectName: this.timeTable.subjectName,
1172 teacherId: this.timeTable.selectTeacher 1177 teacherId: this.timeTable.selectTeacher
1173 } 1178 }
1174 ] 1179 ]
1175 } 1180 }
1176 ] 1181 ]
1177 }; 1182 };
1178 this.loading = true; 1183 this.loading = true;
1179 http() 1184 http()
1180 .post("/createTimeTable", addTimeTable) 1185 .post("/createTimeTable", addTimeTable)
1181 .then(response => { 1186 .then(response => {
1182 // console.log("addTimeTable=====>", addTimeTable); 1187 // console.log("addTimeTable=====>", addTimeTable);
1183 if ((this.snackbar = true)) { 1188 if ((this.snackbar = true)) {
1184 this.text = "New Time Table added successfully"; 1189 this.text = "New Time Table added successfully";
1185 } 1190 }
1186 this.clear(); 1191 this.clear();
1187 this.loading = false; 1192 this.loading = false;
1188 }) 1193 })
1189 .catch(error => { 1194 .catch(error => {
1190 // console.log(error); 1195 // console.log(error);
1191 if ((this.snackbar = true)) { 1196 if ((this.snackbar = true)) {
1192 this.text = error.response.data.message; 1197 this.text = error.response.data.message;
1193 } 1198 }
1194 this.loading = false; 1199 this.loading = false;
1195 }); 1200 });
1196 } 1201 }
1197 }, 1202 },
1198 clear() { 1203 clear() {
1199 this.$refs.form.reset(); 1204 this.$refs.form.reset();
1200 }, 1205 },
1201 clearLeactureData() { 1206 clearLeactureData() {
1202 this.$refs.lectureForm.reset(); 1207 this.$refs.lectureForm.reset();
1203 }, 1208 },
1204 save() { 1209 save() {
1205 let imageData = new FormData(); 1210 let imageData = new FormData();
1206 imageData.append("upload", this.imageFile); 1211 imageData.append("upload", this.imageFile);
1207 // console.log(imageData); 1212 // console.log(imageData);
1208 let editTimeTable = { 1213 let editTimeTable = {
1209 timeTableId: this.editedItem._id, 1214 timeTableId: this.editedItem._id,
1210 classId: this.editedItem.classNum, 1215 classId: this.editedItem.classNum,
1211 sectionId: this.editedItem.selectSection 1216 sectionId: this.editedItem.selectSection
1212 // imageData 1217 // imageData
1213 }; 1218 };
1214 http() 1219 http()
1215 .put("/updateTimeTable", editTimeTable) 1220 .put("/updateTimeTable", editTimeTable)
1216 .then(response => { 1221 .then(response => {
1217 console.log("editTimeTable", editTimeTable); 1222 console.log("editTimeTable", editTimeTable);
1218 if ((this.snackbar = true)) { 1223 if ((this.snackbar = true)) {
1219 this.text = "Successfully Edit Existing Time Table"; 1224 this.text = "Successfully Edit Existing Time Table";
1220 } 1225 }
1221 this.findTimeTable(); 1226 this.findTimeTable();
1222 }) 1227 })
1223 .catch(error => { 1228 .catch(error => {
1224 // console.log(error); 1229 // console.log(error);
1225 if ((this.snackbar = true)) { 1230 if ((this.snackbar = true)) {
1226 this.text = error.response.data.message; 1231 this.text = error.response.data.message;
1227 } 1232 }
1228 }); 1233 });
1229 this.close(); 1234 this.close();
1230 }, 1235 },
1231 deleteTimeTable(timeToDelete, deleteLectures) { 1236 deleteTimeTable(timeToDelete, deleteLectures) {
1232 let deleteLecture = { 1237 let deleteLecture = {
1233 lectureId: timeToDelete._id 1238 lectureId: timeToDelete._id
1234 }; 1239 };
1235 http() 1240 http()
1236 .delete( 1241 .delete(
1237 "/deleteLecture", 1242 "/deleteLecture",
1238 confirm("Are you sure you want to delete this?") && { 1243 confirm("Are you sure you want to delete this?") && {
1239 params: deleteLecture 1244 params: deleteLecture
1240 } 1245 }
1241 ) 1246 )
1242 .then(response => { 1247 .then(response => {
1243 if ((this.snackbar = true)) { 1248 if ((this.snackbar = true)) {
1244 this.text = "Successfully delete Existing User"; 1249 this.text = "Successfully delete Existing User";
1245 } 1250 }
1246 const index = this.timeTableList.schedule.indexOf(deleteLectures); 1251 const index = this.timeTableList.schedule.indexOf(deleteLectures);
1247 for (let i = 0; i < this.timeTableList.schedule.length; i++) { 1252 for (let i = 0; i < this.timeTableList.schedule.length; i++) {
1248 this.timeTableList.schedule[i].lectures.splice(index, 1); 1253 this.timeTableList.schedule[i].lectures.splice(index, 1);
1249 } 1254 }
1250 }) 1255 })
1251 .catch(error => { 1256 .catch(error => {
1252 console.log(error); 1257 console.log(error);
1253 }); 1258 });
1254 }, 1259 },
1255 addSchedule(id) { 1260 addSchedule(id) {
1256 this.scheduleDayId = id; 1261 this.scheduleDayId = id;
1257 this.dialogSchedule = true; 1262 this.dialogSchedule = true;
1258 }, 1263 },
1259 submitSchedule() { 1264 submitSchedule() {
1260 let scheduleDayData = { 1265 let scheduleDayData = {
1261 timeTableId: this.scheduleDayId, 1266 timeTableId: this.scheduleDayId,
1262 day: this.schedule.selectDay 1267 day: this.schedule.selectDay
1263 }; 1268 };
1264 http() 1269 http()
1265 .post("/addSchedule", scheduleDayData) 1270 .post("/addSchedule", scheduleDayData)
1266 .then(response => { 1271 .then(response => {
1267 if ((this.snackbar = true)) { 1272 if ((this.snackbar = true)) {
1268 this.text = "New Schedule Day added successfully"; 1273 this.text = "New Schedule Day added successfully";
1269 } 1274 }
1270 this.dialogSchedule = true; 1275 this.dialogSchedule = true;
1271 this.loading = false; 1276 this.loading = false;
1272 }) 1277 })
1273 .catch(error => { 1278 .catch(error => {
1274 // console.log(error); 1279 // console.log(error);
1275 if ((this.snackbar = true)) { 1280 if ((this.snackbar = true)) {
1276 this.text = error.response.data.message; 1281 this.text = error.response.data.message;
1277 } 1282 }
1278 this.loading = false; 1283 this.loading = false;
1279 }); 1284 });
1280 } 1285 }
1281 }, 1286 },
1282 mounted() { 1287 mounted() {
1283 // this.getTimeTableList(); 1288 // this.getTimeTableList();
1284 var token = this.$store.state.token; 1289 var token = this.$store.state.token;
1285 http() 1290 http()
1286 .get("/getClassesList", { 1291 .get("/getClassesList", {
1287 headers: { Authorization: "Bearer " + token } 1292 headers: { Authorization: "Bearer " + token }
1288 }) 1293 })
1289 .then(response => { 1294 .then(response => {
1290 this.addclass = response.data.data; 1295 this.addclass = response.data.data;
1291 // console.log("getClassesList=====>",this.addclass) 1296 // console.log("getClassesList=====>",this.addclass)
1292 }) 1297 })
1293 .catch(err => { 1298 .catch(err => {
1294 // console.log("err====>", err); 1299 // console.log("err====>", err);
1295 }); 1300 });
1296 1301
1297 http() 1302 http()
1298 .get("/getTeachersList", { 1303 .get("/getTeachersList", {
1299 headers: { Authorization: "Bearer " + token } 1304 headers: { Authorization: "Bearer " + token }
1300 }) 1305 })
1301 .then(response => { 1306 .then(response => {
1302 this.addTeachers = response.data.data; 1307 this.addTeachers = response.data.data;
1303 // console.log("getClassesList=====>",this.addTeachers) 1308 // console.log("getClassesList=====>",this.addTeachers)
1304 }) 1309 })
1305 .catch(err => { 1310 .catch(err => {
1306 // console.log("err====>", err); 1311 // console.log("err====>", err);
1307 }); 1312 });
1308 }, 1313 },
1309 created() { 1314 created() {
1310 this.$root.$on("app:search", search => { 1315 this.$root.$on("app:search", search => {
1311 this.search = search; 1316 this.search = search;
1312 }); 1317 });
1313 }, 1318 },
1314 beforeDestroy() { 1319 beforeDestroy() {
1315 // dont forget to remove the listener 1320 // dont forget to remove the listener
1316 this.$root.$off("app:search"); 1321 this.$root.$off("app:search");
1317 } 1322 }
1318 }; 1323 };
1319 </script> 1324 </script>
1320 <style scoped> 1325 <style scoped>
1321 .active { 1326 .active {
1322 background-color: black; 1327 background-color: black;
1323 color: white !important; 1328 color: white !important;
1324 } 1329 }
1325 .activebtn { 1330 .activebtn {
1326 color: black !important; 1331 color: black !important;
1327 } 1332 }
1328 </style> 1333 </style>
src/router/paths.js
Diff comments   View file @4bd94ba
1 export default [{ 1 export default [{
2 path: '*', 2 path: '*',
3 meta: { 3 meta: {
4 public: true, 4 public: true,
5 }, 5 },
6 redirect: { 6 redirect: {
7 path: '/404' 7 path: '/404'
8 } 8 }
9 }, 9 },
10 { 10 {
11 path: '/404', 11 path: '/404',
12 meta: { 12 meta: {
13 public: true, 13 public: true,
14 }, 14 },
15 name: 'NotFound', 15 name: 'NotFound',
16 component: () => 16 component: () =>
17 import ( 17 import (
18 /* webpackChunkName: "routes" */ 18 /* webpackChunkName: "routes" */
19 /* webpackMode: "lazy-once" */ 19 /* webpackMode: "lazy-once" */
20 `@/pages/NotFound/NotFound.vue` 20 `@/pages/NotFound/NotFound.vue`
21 ) 21 )
22 }, 22 },
23 { 23 {
24 path: '/500', 24 path: '/500',
25 meta: { 25 meta: {
26 public: true, 26 public: true,
27 }, 27 },
28 name: 'ServerError', 28 name: 'ServerError',
29 component: () => 29 component: () =>
30 import ( 30 import (
31 /* webpackChunkName: "routes" */ 31 /* webpackChunkName: "routes" */
32 /* webpackMode: "lazy-once" */ 32 /* webpackMode: "lazy-once" */
33 `@/pages/NotFound/Error.vue` 33 `@/pages/NotFound/Error.vue`
34 ) 34 )
35 }, 35 },
36 { 36 {
37 path: '/changepassword', 37 path: '/changepassword',
38 meta: {}, 38 meta: {},
39 name: 'changepassword', 39 name: 'changepassword',
40 props: (route) => ({ type: route.query.type }), 40 props: (route) => ({ type: route.query.type }),
41 component: () => 41 component: () =>
42 import ( 42 import (
43 /* webpackChunkName: "routes" */ 43 /* webpackChunkName: "routes" */
44 /* webpackMode: "lazy-once" */ 44 /* webpackMode: "lazy-once" */
45 `@/pages/Authentication/changepassword.vue` 45 `@/pages/Authentication/changepassword.vue`
46 ) 46 )
47 }, 47 },
48 { 48 {
49 path: '/teachers', 49 path: '/teachers',
50 meta: { breadcrumb: false }, 50 meta: { breadcrumb: false },
51 name: 'teachers', 51 name: 'teachers',
52 component: () => 52 component: () =>
53 import ( 53 import (
54 /* webpackChunkName: "routes" */ 54 /* webpackChunkName: "routes" */
55 /* webpackMode: "lazy-once" */ 55 /* webpackMode: "lazy-once" */
56 `@/pages/Teachers/teachers.vue` 56 `@/pages/Teachers/teachers.vue`
57 ) 57 )
58 }, 58 },
59 { 59 {
60 path: '/', 60 path: '/',
61 meta: { 61 meta: {
62 public: true, 62 public: true,
63 }, 63 },
64 name: 'Login', 64 name: 'Login',
65 component: () => 65 component: () =>
66 import ( 66 import (
67 /* webpackChunkName: "routes" */ 67 /* webpackChunkName: "routes" */
68 /* webpackMode: "lazy-once" */ 68 /* webpackMode: "lazy-once" */
69 `@/pages/Authentication/Login.vue` 69 `@/pages/Authentication/Login.vue`
70 ) 70 )
71 }, 71 },
72 { 72 {
73 path: '/forgetpassword', 73 path: '/forgetpassword',
74 meta: { 74 meta: {
75 public: true, 75 public: true,
76 }, 76 },
77 name: 'forgetpassword', 77 name: 'forgetpassword',
78 component: () => 78 component: () =>
79 import ( 79 import (
80 /* webpackChunkName: "routes" */ 80 /* webpackChunkName: "routes" */
81 /* webpackMode: "lazy-once" */ 81 /* webpackMode: "lazy-once" */
82 `@/pages/Authentication/forgetpassword.vue` 82 `@/pages/Authentication/forgetpassword.vue`
83 ) 83 )
84 }, 84 },
85 { 85 {
86 path: '/students', 86 path: '/students',
87 meta: {}, 87 meta: {},
88 name: 'Students', 88 name: 'Students',
89 props: (route) => ({ type: route.query.type }), 89 props: (route) => ({ type: route.query.type }),
90 component: () => 90 component: () =>
91 import ( 91 import (
92 /* webpackChunkName: "routes" */ 92 /* webpackChunkName: "routes" */
93 /* webpackMode: "lazy-once" */ 93 /* webpackMode: "lazy-once" */
94 `@/pages/Students/students.vue` 94 `@/pages/Students/students.vue`
95 ) 95 )
96 }, 96 },
97 { 97 {
98 path: '/addclass', 98 path: '/addclass',
99 meta: {}, 99 meta: {},
100 name: 'addclass', 100 name: 'addclass',
101 props: (route) => ({ type: route.query.type }), 101 props: (route) => ({ type: route.query.type }),
102 component: () => 102 component: () =>
103 import ( 103 import (
104 /* webpackChunkName: "routes" */ 104 /* webpackChunkName: "routes" */
105 /* webpackMode: "lazy-once" */ 105 /* webpackMode: "lazy-once" */
106 `@/pages/Class/addclass.vue` 106 `@/pages/Class/addclass.vue`
107 ) 107 )
108 }, 108 },
109 { 109 {
110 path: '/section', 110 path: '/section',
111 meta: {}, 111 meta: {},
112 name: 'section', 112 name: 'section',
113 props: (route) => ({ type: route.query.type }), 113 props: (route) => ({ type: route.query.type }),
114 component: () => 114 component: () =>
115 import ( 115 import (
116 /* webpackChunkName: "routes" */ 116 /* webpackChunkName: "routes" */
117 /* webpackMode: "lazy-once" */ 117 /* webpackMode: "lazy-once" */
118 `@/pages/Section/section.vue` 118 `@/pages/Section/section.vue`
119 ) 119 )
120 }, 120 },
121 { 121 {
122 path: '/noticeBoard', 122 path: '/noticeBoard',
123 meta: {}, 123 meta: {},
124 name: 'NoticeBoard', 124 name: 'NoticeBoard',
125 props: (route) => ({ type: route.query.type }), 125 props: (route) => ({ type: route.query.type }),
126 component: () => 126 component: () =>
127 import ( 127 import (
128 /* webpackChunkName: "routes" */ 128 /* webpackChunkName: "routes" */
129 /* webpackMode: "lazy-once" */ 129 /* webpackMode: "lazy-once" */
130 `@/pages/NoticeBoard/noticeBoard.vue` 130 `@/pages/NoticeBoard/noticeBoard.vue`
131 ) 131 )
132 }, 132 },
133 { 133 {
134 path: '/news', 134 path: '/news',
135 meta: {}, 135 meta: {},
136 name: 'news', 136 name: 'news',
137 props: (route) => ({ type: route.query.type }), 137 props: (route) => ({ type: route.query.type }),
138 component: () => 138 component: () =>
139 import ( 139 import (
140 /* webpackChunkName: "routes" */ 140 /* webpackChunkName: "routes" */
141 /* webpackMode: "lazy-once" */ 141 /* webpackMode: "lazy-once" */
142 `@/pages/News/news.vue` 142 `@/pages/News/news.vue`
143 ) 143 )
144 }, 144 },
145 // { 145 // {
146 // path: '/reminder', 146 // path: '/reminder',
147 // meta: { }, 147 // meta: { },
148 // name: 'reminder', 148 // name: 'reminder',
149 // props: (route) => ({ type: route.query.type }), 149 // props: (route) => ({ type: route.query.type }),
150 // component: () => import( 150 // component: () => import(
151 // /* webpackChunkName: "routes" */ 151 // /* webpackChunkName: "routes" */
152 // /* webpackMode: "lazy-once" */ 152 // /* webpackMode: "lazy-once" */
153 // `@/pages/Reminder/reminder.vue` 153 // `@/pages/Reminder/reminder.vue`
154 // ) 154 // )
155 // }, 155 // },
156 { 156 {
157 path: '/timeTable', 157 path: '/timeTable',
158 meta: {}, 158 meta: {},
159 name: 'timeTable', 159 name: 'timeTable',
160 props: (route) => ({ type: route.query.type }), 160 props: (route) => ({ type: route.query.type }),
161 component: () => 161 component: () =>
162 import ( 162 import (
163 /* webpackChunkName: "routes" */ 163 /* webpackChunkName: "routes" */
164 /* webpackMode: "lazy-once" */ 164 /* webpackMode: "lazy-once" */
165 `@/pages/TimeTable/timeTable.vue` 165 `@/pages/TimeTable/timeTable.vue`
166 ) 166 )
167 }, 167 },
168 { 168 {
169 path: '/notification', 169 path: '/notification',
170 meta: {}, 170 meta: {},
171 name: 'notification', 171 name: 'notification',
172 props: (route) => ({ type: route.query.type }), 172 props: (route) => ({ type: route.query.type }),
173 component: () => 173 component: () =>
174 import ( 174 import (
175 /* webpackChunkName: "routes" */ 175 /* webpackChunkName: "routes" */
176 /* webpackMode: "lazy-once" */ 176 /* webpackMode: "lazy-once" */
177 `@/pages/Notification/notification.vue` 177 `@/pages/Notification/notification.vue`
178 ) 178 )
179 }, 179 },
180 { 180 {
181 path: '/parents', 181 path: '/parents',
182 meta: {}, 182 meta: {},
183 name: 'parents', 183 name: 'parents',
184 props: (route) => ({ type: route.query.type }), 184 props: (route) => ({ type: route.query.type }),
185 component: () => 185 component: () =>
186 import ( 186 import (
187 /* webpackChunkName: "routes" */ 187 /* webpackChunkName: "routes" */
188 /* webpackMode: "lazy-once" */ 188 /* webpackMode: "lazy-once" */
189 `@/pages/Parent/parents.vue` 189 `@/pages/Parent/parents.vue`
190 ) 190 )
191 }, 191 },
192 { 192 {
193 path: '/subjects', 193 path: '/subjects',
194 meta: {}, 194 meta: {},
195 name: 'Subject', 195 name: 'Subject',
196 props: (route) => ({ type: route.query.type }), 196 props: (route) => ({ type: route.query.type }),
197 component: () => 197 component: () =>
198 import ( 198 import (
199 /* webpackChunkName: "routes" */ 199 /* webpackChunkName: "routes" */
200 /* webpackMode: "lazy-once" */ 200 /* webpackMode: "lazy-once" */
201 `@/pages/Subjects/subjects.vue` 201 `@/pages/Subjects/subjects.vue`
202 ) 202 )
203 }, 203 },
204 { 204 {
205 path: '/dashboard', 205 path: '/dashboard',
206 meta: {}, 206 meta: {},
207 name: 'Dashboard', 207 name: 'Dashboard',
208 props: (route) => ({ type: route.query.type }), 208 props: (route) => ({ type: route.query.type }),
209 component: () => 209 component: () =>
210 import ( 210 import (
211 /* webpackChunkName: "routes" */ 211 /* webpackChunkName: "routes" */
212 /* webpackMode: "lazy-once" */ 212 /* webpackMode: "lazy-once" */
213 `@/pages/Dashboard/dashboard.vue` 213 `@/pages/Dashboard/dashboard.vue`
214 ) 214 )
215 }, 215 },
216 { 216 {
217 path: '/socialMedia', 217 path: '/socialMedia',
218 meta: {}, 218 meta: {},
219 name: 'SocialMedia', 219 name: 'SocialMedia',
220 props: (route) => ({ type: route.query.type }), 220 props: (route) => ({ type: route.query.type }),
221 component: () => 221 component: () =>
222 import ( 222 import (
223 /* webpackChunkName: "routes" */ 223 /* webpackChunkName: "routes" */
224 /* webpackMode: "lazy-once" */ 224 /* webpackMode: "lazy-once" */
225 `@/pages/socialMedia/socialMedia.vue` 225 `@/pages/socialMedia/socialMedia.vue`
226 ) 226 )
227 }, 227 },
228 { 228 {
229 path: '/gallery', 229 path: '/gallery',
230 meta: {}, 230 meta: {},
231 name: 'Gallery', 231 name: 'Gallery',
232 props: (route) => ({ type: route.query.type }), 232 props: (route) => ({ type: route.query.type }),
233 component: () => 233 component: () =>
234 import ( 234 import (
235 /* webpackChunkName: "routes" */ 235 /* webpackChunkName: "routes" */
236 /* webpackMode: "lazy-once" */ 236 /* webpackMode: "lazy-once" */
237 `@/pages/Gallery/gallery.vue` 237 `@/pages/Gallery/gallery.vue`
238 ) 238 )
239 },
240 {
241 path: '/event',
242 meta: {},
243 name: 'Event',
244 props: (route) => ({ type: route.query.type }),
245 component: () =>
246 import (
247 /* webpackChunkName: "routes" */
248 /* webpackMode: "lazy-once" */
249 `@/pages/Event/event.vue`
250 )
251 },
252 {
253 path: '/holiday',
254 meta: {},
255 name: 'Holiday',
256 props: (route) => ({ type: route.query.type }),
257 component: () =>
258 import (
259 /* webpackChunkName: "routes" */
260 /* webpackMode: "lazy-once" */
261 `@/pages/Holiday/holiday.vue`
262 )
239 } 263 }
240 ]; 264 ];
static/icon/add.png
Diff comments   View file @4bd94ba

9.46 KB
static/icon/add1.png
Diff comments   View file @4bd94ba

45 KB