Commit 4bd94ba603fbb4ca3a611f3a32ec9c0b42ccf2f2
1 parent
1571e40b57
Exists in
master
and in
3 other branches
implement api and design of holiday
Showing
10 changed files
with
1141 additions
and
10 deletions
Show diff stats
src/api/menu.js
src/components/pageHeader/AppToolbar.vue
src/pages/Event/event.vue
... | ... | @@ -0,0 +1,618 @@ |
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> | |
0 | 619 | \ No newline at end of file | ... | ... |
src/pages/Holiday/holiday.vue
... | ... | @@ -0,0 +1,477 @@ |
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> | |
0 | 478 | \ No newline at end of file | ... | ... |
src/pages/Notification/notification.vue
... | ... | @@ -17,7 +17,7 @@ |
17 | 17 | class="subheading" |
18 | 18 | >Add New Notifictaion</v-tab> |
19 | 19 | |
20 | - <!-- ****** EDITS REMINDER DETAILS ****** --> | |
20 | + <!-- ****** EDITS NOTIFICATION DETAILS ****** --> | |
21 | 21 | |
22 | 22 | <v-tab-item> |
23 | 23 | <v-snackbar |
... | ... | @@ -107,7 +107,7 @@ |
107 | 107 | </v-flex> |
108 | 108 | </v-dialog> |
109 | 109 | |
110 | - <!-- ****** PROFILE VIEW REMINDER DEATILS ****** --> | |
110 | + <!-- ****** PROFILE VIEW NOTIFICATION DEATILS ****** --> | |
111 | 111 | |
112 | 112 | <v-dialog v-model="dialog1" max-width="600px"> |
113 | 113 | <v-toolbar color="white"> |
... | ... | @@ -161,7 +161,7 @@ |
161 | 161 | color="success" |
162 | 162 | >{{ text }}</v-snackbar> |
163 | 163 | |
164 | - <!-- ****** EXISTING-USERS REMINDER TABLE ****** --> | |
164 | + <!-- ****** EXISTING-USERS NOTIFICATION TABLE ****** --> | |
165 | 165 | |
166 | 166 | <v-data-table |
167 | 167 | :headers="headers" |
... | ... | @@ -206,7 +206,7 @@ |
206 | 206 | </v-data-table> |
207 | 207 | </v-tab-item> |
208 | 208 | |
209 | - <!-- ****** ADD MULTIPLE REMINDER ****** --> | |
209 | + <!-- ****** ADD MULTIPLE NOTIFICATION ****** --> | |
210 | 210 | |
211 | 211 | <v-tab-item> |
212 | 212 | <v-container> | ... | ... |
src/pages/Teachers/teachers.vue
... | ... | @@ -799,15 +799,11 @@ |
799 | 799 | </template> |
800 | 800 | |
801 | 801 | <script> |
802 | -// import AppToolbar from '@/components/AppToolbar'; | |
803 | 802 | import http from "@/Services/http.js"; |
804 | 803 | import Util from "@/util"; |
805 | 804 | import moment from "moment"; |
806 | 805 | |
807 | 806 | export default { |
808 | - components: { | |
809 | - // "one-month": onemonth, | |
810 | - }, | |
811 | 807 | data: () => ({ |
812 | 808 | component: "report-generate", |
813 | 809 | snackbar: false, | ... | ... |
src/pages/TimeTable/timeTable.vue
... | ... | @@ -510,7 +510,12 @@ |
510 | 510 | @click="deleteItem(props.item)" |
511 | 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 | 519 | </span> |
515 | 520 | </td> |
516 | 521 | </tr> |
... | ... | @@ -913,7 +918,7 @@ export default { |
913 | 918 | menu4: false, |
914 | 919 | menu5: false, |
915 | 920 | menu6: false, |
916 | - scheduleDayId: "", | |
921 | + scheduleDayId: "" | |
917 | 922 | }), |
918 | 923 | methods: { |
919 | 924 | findTimeTable() { | ... | ... |
src/router/paths.js
... | ... | @@ -236,5 +236,29 @@ export default [{ |
236 | 236 | /* webpackMode: "lazy-once" */ |
237 | 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 | ]; |
241 | 265 | \ No newline at end of file | ... | ... |
static/icon/add.png
9.46 KB
static/icon/add1.png
45 KB