viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 49d105a7d56d45d80950eb8eb33926753c8e6a5a

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

design and functionality add Reminder data and showing Data in table by getData… 

… api,edit Reminder,view Reminder, delete Reminder in Reminder page
Showing 1 changed file with 784 additions and 0 deletions   Show diff stats
src/pages/Reminder/reminder.vue
Diff comments   View file @49d105a
File was created 1 <template>
2 <v-app id="pages-dasboard">
3 <v-toolbar class="fixcolors" fixed app>
4 <v-toolbar-title class="ml-0 pl-3">
5 <v-toolbar-side-icon @click.stop="handleDrawerToggle" class="hide"></v-toolbar-side-icon>
6 </v-toolbar-title>
7 <!-- ****** SEARCH ALL EXISTING REMINDER ****** -->
8 <v-flex xs7 sm3 class="userSearch">
9 <v-text-field
10 flat
11 append-icon="search"
12 label="Find your Teachers"
13 v-model="search"
14 color="white"
15 dark
16 ></v-text-field>
17 </v-flex>
18 <v-spacer></v-spacer>
19 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
20 <v-btn icon large flat slot="activator">
21 <v-avatar size="40px">
22 <img src="/static/icon/user.png">
23 </v-avatar>
24 </v-btn>
25 <v-list class="pa-0">
26 <v-list-tile
27 v-for="(item,index) in items"
28 :to="!item.href ? { name: item.name } : null"
29 :href="item.href"
30 @click="item.click"
31 ripple="ripple"
32 :disabled="item.disabled"
33 :target="item.target"
34 rel="noopener"
35 :key="index"
36 >
37 <v-list-tile-action v-if="item.icon">
38 <v-icon>{{ item.icon }}</v-icon>
39 </v-list-tile-action>
40 <v-list-tile-content>
41 <v-list-tile-title>{{ item.title }}</v-list-tile-title>
42 </v-list-tile-content>
43 </v-list-tile>
44 </v-list>
45 </v-menu>
46 </v-toolbar>
47 <v-tabs grow slider-color="black">
48 <v-tab
49 ripple
50 @click="activeTab('existing')"
51 v-bind:class="{ active: isActive }"
52 id="tab"
53 class="subheading"
54 >Existing Reminder</v-tab>
55 <v-tab
56 ripple
57 @click="activeTab('new')"
58 v-bind:class="{ active: newActive }"
59 id="tab1"
60 User
61 class="subheading"
62 >Add New Reminder</v-tab>
63
64 <!-- ****** EDITS REMINDER DETAILS ****** -->
65
66 <v-tab-item>
67 <v-snackbar
68 :timeout="timeout"
69 :top="y === 'top'"
70 :right="x === 'right'"
71 :vertical="mode === 'vertical'"
72 v-model="snackbar"
73 color="success"
74 >{{ text }}</v-snackbar>
75 <v-dialog v-model="dialog" max-width="600px">
76 <v-flex xs12 sm12 class="">
77 <v-toolbar color="white">
78 <v-spacer></v-spacer>
79 <v-toolbar-title>Edit Profile</v-toolbar-title>
80 <v-spacer></v-spacer>
81 </v-toolbar>
82 <v-card flat>
83 <v-form ref="form">
84 <v-container fluid>
85 <v-layout>
86 <v-flex
87 xs12
88 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4"
89 >
90 <v-avatar size="100px">
91 <img src="/static/icon/user.png" v-if="!imageUrl">
92 </v-avatar>
93 <input
94 type="file"
95 style="display: none"
96 ref="image"
97 accept="image/*"
98 @change="onFilePicked"
99 >
100 <img
101 :src="imageData.imageUrl"
102 height="150"
103 v-if="imageUrl"
104 style="border-radius:50%; width:200px"
105 >
106 </v-flex>
107 </v-layout>
108 <v-flex xs12 sm12>
109 <v-layout>
110 <v-flex xs4 class="pt-4 subheading">
111 <label class="right">Title:</label>
112 </v-flex>
113 <v-flex xs5 class="ml-3">
114 <v-text-field
115 v-model="editedItem.title"
116 placeholder="fill your Title"
117 name="name"
118 type="text"
119 ></v-text-field>
120 </v-flex>
121 </v-layout>
122 </v-flex>
123 <v-flex xs12 sm12>
124 <v-layout>
125 <v-flex xs4 class="pt-4 subheading">
126 <label class="right">Description:</label>
127 </v-flex>
128 <v-flex xs5 class="ml-3">
129 <v-text-field
130 placeholder="fill your Description"
131 v-model="editedItem.description"
132 type="text"
133 ></v-text-field>
134 </v-flex>
135 </v-layout>
136 </v-flex>
137 <v-layout>
138 <v-flex xs12 sm10 offset-sm1>
139 <v-card-actions>
140 <v-btn round dark @click.native="close">Cancel</v-btn>
141 <v-spacer></v-spacer>
142 <v-btn round dark @click="save">Save</v-btn>
143 </v-card-actions>
144 </v-flex>
145 </v-layout>
146 </v-container>
147 </v-form>
148 </v-card>
149 </v-flex>
150 </v-dialog>
151
152 <!-- ****** PROFILE VIEW REMINDER DEATILS ****** -->
153 <v-dialog v-model="dialog1" max-width="600px">
154 <v-toolbar color="white">
155 <v-spacer></v-spacer>
156 <v-toolbar-title>Profile</v-toolbar-title>
157 <v-spacer></v-spacer>
158 <v-icon @click="close1">close</v-icon>
159 </v-toolbar>
160 <v-card>
161 <v-flex align-center justify-center layout text-xs-center>
162 <v-avatar size="50px" style="position:absolute; top:20px;">
163 <img src="/static/icon/user.png">
164 </v-avatar>
165 </v-flex>
166 <v-card-text>
167 <v-container grid-list-md>
168 <v-layout wrap>
169 <v-flex>
170 <br>
171 <br>
172 <v-layout>
173 <v-flex xs5 sm6>
174 <h5 class="right my-1">Title:</h5>
175 </v-flex>
176 <v-flex sm6 xs8>
177 <h5 class="my-1">{{ editedItem.title }}</h5>
178 </v-flex>
179 </v-layout>
180 <v-layout>
181 <v-flex xs5 sm6>
182 <h5 class="right my-1">Description:</h5>
183 </v-flex>
184 <v-flex sm6 xs8>
185 <h5 class="my-1">{{ editedItem.description }}</h5>
186 </v-flex>
187 </v-layout>
188 </v-flex>
189 </v-layout>
190 </v-container>
191 </v-card-text>
192 </v-card>
193 </v-dialog>
194
195 <v-snackbar
196 :timeout="timeout"
197 :top="y === 'top'"
198 :right="x === 'right'"
199 :vertical="mode === 'vertical'"
200 v-model="snackbar"
201 color="success"
202 >{{ text }}</v-snackbar>
203
204 <!-- ****** EXISTING-USERS REMINDER TABLE ****** -->
205 <v-data-table
206 :headers="headers"
207 :items="desserts"
208 :pagination.sync="pagination"
209 :search="search"
210 >
211 <template slot="items" slot-scope="props">
212 <td id="td" class="text-xs-center">{{ props.index}}</td>
213 <td id="td" class="text-xs-center">{{ props.item.title}}</td>
214 <td id="td" class="text-xs-center">{{ props.item.description}}</td>
215
216 <td class="text-xs-center">
217 <span>
218 <img
219 style="cursor:pointer; width:25px; height:18px; "
220 class="mr-5"
221 @click="profile(props.item)"
222 src="/static/icon/eye1.png"
223 >
224 <img
225 style="cursor:pointer; width:20px; height:18px; "
226 class="mr-5"
227 @click="editItem(props.item)"
228 src="/static/icon/edit1.png"
229 >
230 <img
231 style="cursor:pointer; height:20px; "
232 class="mr-5"
233 @click="deleteItem(props.item)"
234 src="/static/icon/delete1.png"
235 >
236 </span>
237 </td>
238 </template>
239 <v-alert
240 slot="no-results"
241 :value="true"
242 color="error"
243 icon="warning"
244 >Your search for "{{ search }}" found no results.</v-alert>
245 </v-data-table>
246 </v-tab-item>
247
248 <!-- ****** ADD MULTIPLE REMINDER ****** -->
249
250 <v-tab-item>
251 <v-container>
252 <v-snackbar
253 :timeout="timeout"
254 :top="y === 'top'"
255 :right="x === 'right'"
256 :vertical="mode === 'vertical'"
257 v-model="snackbar"
258 color="success"
259 >{{ text }}</v-snackbar>
260 <v-flex xs12 sm12 class="my-4">
261 <v-card flat>
262 <v-form ref="form" v-model="valid" lazy-validation>
263 <v-container fluid>
264 <v-layout>
265 <v-flex
266 xs12
267 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
268 >
269 <v-avatar size="100px">
270 <img src="/static/icon/user.png" v-if="!imageUrl">
271 </v-avatar>
272 <input
273 type="file"
274 style="display: none"
275 ref="image"
276 accept="image/*"
277 @change="onFilePicked"
278 >
279 <img
280 :src="imageData.imageUrl"
281 height="150"
282 v-if="imageUrl"
283 style="border-radius:50%; width:200px"
284 >
285 </v-flex>
286 </v-layout>
287 <v-flex xs12>
288 <v-layout>
289 <v-flex xs4 class="pt-4 subheading">
290 <label class="right">Title:</label>
291 </v-flex>
292 <v-flex xs4 class="ml-3">
293 <v-text-field
294 v-model="addRemind.title"
295 placeholder="fill your Title"
296 type="text"
297 :rules="titleRules"
298 required
299 ></v-text-field>
300 </v-flex>
301 </v-layout>
302 </v-flex>
303 <v-flex xs12>
304 <v-layout>
305 <v-flex xs4 class="pt-4 subheading">
306 <label class="right">Description:</label>
307 </v-flex>
308 <v-flex xs4 class="ml-3">
309 <v-text-field
310 placeholder="fill your Description"
311 :rules="descriptionRules"
312 v-model="addRemind.description"
313 type="text"
314 required
315 ></v-text-field>
316 </v-flex>
317 </v-layout>
318 </v-flex>
319 <v-layout>
320 <v-flex xs12 sm6 offset-sm3>
321 <v-card-actions>
322 <v-btn @click="clear" round dark>clear</v-btn>
323 <v-spacer></v-spacer>
324 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
325 </v-card-actions>
326 </v-flex>
327 </v-layout>
328 </v-container>
329 </v-form>
330 </v-card>
331 </v-flex>
332 </v-container>
333 </v-tab-item>
334 </v-tabs>
335 </v-app>
336 </template>
337
338 <script>
339 import http from "@/Services/http.js";
340 import Util from "@/util";
341
342 export default {
343 data: () => ({
344 snackbar: false,
345 y: "top",
346 x: "right",
347 mode: "",
348 timeout: 3000,
349 text: "",
350 loading: false,
351 date: null,
352 search: "",
353 menu: false,
354 menu1: false,
355 dialog: false,
356 dialog1: false,
357 valid: true,
358 isActive: true,
359 newActive: false,
360 addclass: [],
361 addSection: [],
362 gender: ["Male", "Female"],
363 AddUsercredentials: {},
364 pagination: {
365 rowsPerPage: 15
366 },
367 imageData: {},
368 imageName: "",
369 imageUrl: "",
370 imageFile: "",
371 titleRules: [v => !!v || " Tilte is required"],
372 descriptionRules: [v => !!v || " Description is required"],
373 errorMessages: "",
374 emailRules: [
375 v => !!v || "E-mail is required",
376 v =>
377 /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
378 "E-mail must be valid"
379 ],
380 headers: [
381 {
382 text: "No",
383 align: "center",
384 sortable: false,
385 value: "No"
386 },
387 { text: "Title", value: "title", sortable: false, align: "center" },
388 { text: "Description", value: "description", sortable: false, align: "center" },
389 { text: "Action", value: "", sortable: false, align: "center" }
390 ],
391 desserts: [],
392 editedIndex: -1,
393 addRemind:{
394 title:'',
395 description:''
396 },
397 editedItem: {
398 title:'',
399 description:''
400 },
401 defaultItem: {
402 title:'',
403 description:''
404 },
405 userName: "",
406 items: [
407 {
408 href: "/changepassword",
409 title: "Change Password",
410 click: e => {
411 console.log(e);
412 }
413 },
414 {
415 href: "#",
416 title: "Logout",
417 click: e => {
418 window.getApp.$emit("APP_LOGOUT");
419 }
420 }
421 ]
422 }),
423 watch: {
424 menu(val) {
425 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
426 },
427 menu1(val) {
428 val && this.$nextTick(() => (this.$refs.picker.activePicker = "YEAR"));
429 }
430 },
431 methods: {
432 getSections(_id) {
433 // var token = this.$store.state.token;
434 // http()
435 // .get(
436 // "/getSectionsList",
437 // { params: { classId: _id } },
438 // {
439 // headers: { Authorization: "Bearer " + token }
440 // }
441 // )
442 // .then(response => {
443 // this.addSection = response.data.data;
444 // console.log("getSectionsList=====>", this.addSection);
445 // })
446 // .catch(err => {
447 // // console.log("err====>", err);
448 // // this.$router.replace({ path: '/' });
449 // });
450 },
451 pickFile() {
452 this.$refs.image.click();
453 },
454
455 onFilePicked(e) {
456 // console.log(e)
457 const files = e.target.files;
458 this.imageData.upload = e.target.files[0];
459 if (files[0] !== undefined) {
460 this.imageName = files[0].name;
461 if (this.imageName.lastIndexOf(".") <= 0) {
462 return;
463 }
464 const fr = new FileReader();
465 fr.readAsDataURL(files[0]);
466 fr.addEventListener("load", () => {
467 this.imageUrl = fr.result;
468 this.imageFile = files[0]; // this is an image file that can be sent to server...
469 this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
470 console.log("upload=======>", this.imageData.imageUrl);
471 console.log("imageFile", this.imageFile);
472 });
473 } else {
474 this.imageName = "";
475 this.imageFile = "";
476 this.imageUrl = "";
477 }
478 },
479 getReminderList() {
480 var token = this.$store.state.token;
481 http()
482 .get("/getRemindersList", {
483 headers: { Authorization: "Bearer " + token }
484 })
485 .then(response => {
486 this.desserts = response.data.data;
487 // console.log("getRemindersList=====>",this.desserts)
488 })
489 .catch(err => {
490 // console.log("err====>", err);
491 // this.$router.replace({ path: "/" });
492 });
493 },
494 editItem(item) {
495 this.editedIndex = this.desserts.indexOf(item);
496 this.editedItem = Object.assign({}, item);
497 this.dialog = true;
498 },
499 profile(item) {
500 this.editedIndex = this.desserts.indexOf(item);
501 this.editedItem = Object.assign({}, item);
502 this.dialog1 = true;
503 },
504
505 deleteItem(item) {
506 let deleteReminder = {
507 reminderId: item._id
508 };
509 http()
510 .delete(
511 "/deleteReminder",
512 confirm("Are you sure you want to delete this?") && {
513 params: deleteReminder
514 }
515 )
516 .then(response => {
517 // console.log("deleteReminder",deleteReminder)
518 if ((this.snackbar = true)) {
519 this.text = "Successfully delete Existing User";
520 }
521 this.getReminderList();
522 })
523 .catch(error => {
524 // console.log(error);
525 });
526 },
527 activeTab(type) {
528 switch (type) {
529 case "existing":
530 this.newActive = false;
531 this.isActive = true;
532 break;
533
534 default:
535 this.newActive = true;
536 this.isActive = false;
537 break;
538 }
539 },
540 close() {
541 this.dialog = false;
542 setTimeout(() => {
543 this.editedItem = Object.assign({}, this.defaultItem);
544 this.editedIndex = -1;
545 }, 300);
546 },
547 close1() {
548 this.dialog1 = false;
549 },
550 submit() {
551 if (this.$refs.form.validate()) {
552 let imageData = new FormData();
553 imageData.append("upload", this.imageFile);
554 console.log(imageData);
555 let addReminds = {
556 title: this.addRemind.title,
557 description: this.addRemind.description,
558 // imageData
559 };
560 http()
561 .post("/createReminder", addReminds)
562 .then(response => {
563 // console.log(addReminds)
564 if ((this.snackbar = true)) {
565 this.text = "New user added successfully";
566 }
567 this.getReminderList();
568 this.clear();
569 })
570 .catch(error => {
571 // console.log(error);
572 if ((this.snackbar = true)) {
573 this.text = error.response.data.message;
574 }
575 });
576 }
577 },
578 mail() {},
579 download() {},
580 clear() {
581 this.$refs.form.reset();
582 },
583 save() {
584 let imageData = new FormData();
585 imageData.append("upload", this.imageFile);
586 console.log(imageData);
587 let editReminder = {
588 reminderId:this.editedItem._id,
589 title: this.editedItem.title,
590 description: this.editedItem.description,
591 // imageData
592 };
593 http()
594 .put("/updateReminder", editReminder)
595 .then(response => {
596 // console.log("updateReminder",updateReminder);
597 if ((this.snackbar = true)) {
598 this.text = "Successfully Edit Existing User";
599 }
600 this.getReminderList();
601 })
602 .catch(error => {
603 // console.log(error);
604 });
605 this.close();
606 },
607 handleDrawerToggle() {
608 window.getApp.$emit("APP_DRAWER_TOGGLED");
609 },
610 handleFullScreen() {
611 Util.toggleFullScreen();
612 }
613 },
614 mounted() {
615 this.getReminderList();
616 // var token = this.$store.state.token;
617 // http()
618 // .get("/getReminderList", {
619 // headers: { Authorization: "Bearer " + token }
620 // })
621 // .then(response => {
622 // this.addclass = response.data.data;
623 // // console.log("getClassesList=====>",this.addclass)
624 // })
625 // .catch(err => {
626 // // console.log("err====>", err);
627 // this.$router.replace({ path: "/" });
628 // });
629 },
630 computed: {
631 toolbarColor() {
632 return this.$vuetify.options.extra.mainNav;
633 }
634 }
635 };
636 </script>
637 <style scoped>
638 .v-tabs__div {
639 text-transform: none;
640 }
641 .v-input__prepend-outer {
642 margin-right: 0px !important;
643 }
644 .v-card__actions .v-btn {
645 margin: 0 15px;
646 min-width: 120px;
647 }
648 .primary {
649 background-color: #aaa !important;
650 border-color: #aaa !important;
651 }
652 h4 {
653 background-repeat: no-repeat;
654 padding: 8px;
655 margin: auto;
656 font-size: 25px;
657 }
658 #name {
659 position: absolute;
660 left: 100px;
661 top: 17px;
662 }
663 #icon {
664 position: absolute;
665 right: 8px;
666 top: 8px;
667 }
668 #m {
669 position: relative;
670 left: 135px;
671 top: -15px;
672 }
673 #G {
674 position: absolute;
675 top: 38px;
676 color: white;
677 }
678 #bt {
679 position: relative;
680 top: -20px;
681 left: 115px;
682 }
683 #e {
684 position: relative;
685 top: 5px;
686 right: -30px;
687 height: 17px;
688 cursor: pointer;
689 }
690 #d {
691 position: relative;
692 top: 5px;
693 right: -70px;
694 height: 17px;
695 cursor: pointer;
696 }
697 #td {
698 border: 1px solid #dddddd;
699 text-align: left;
700 padding: 8px;
701 }
702 #dialog {
703 height: 550px;
704 }
705 .active {
706 background-color: black;
707 color: white !important;
708 }
709 .activebtn {
710 color: black !important;
711 }
712 #flex {
713 height: 300px;
714 }
715 .top {
716 margin-top: 100px;
717 }
718 .v-tabs__item a {
719 font-size: 16px !important;
720 }
721 @media screen and (max-width: 769px) {
722 .top {
723 margin-top: 0 !important;
724 }
725 .userSearch .v-icon {
726 font-size: 20px !important;
727 margin-left: 20px;
728 }
729 }
730 @media screen and (max-width: 380px) {
731 .right {
732 float: none !important;
733 }
734 .subheading {
735 font-size: 14px !important;
736 }
737 .v-card__actions .v-btn {
738 margin: 0 0px;
739 min-width: 100px;
740 }
741 /* .searchIcon .v-icon {
742 font-size: 20px;
743 margin-left: 20px;
744 } */
745 .subheading {
746 font-size: 12px !important;
747 }
748 h5 {
749 font-size: 13px;
750 }
751 }
752 .v-icon {
753 font-size: 30px;
754 }
755 @media screen and (min-width: 1270px) {
756 .hide {
757 display: none;
758 }
759 /* }
760 @media screen and (max-width: 962px) {
761 .imglogo{
762 position: absolute;
763 top: 13px;
764 left: 13px !important;
765 width: 70px;
766 height: 24px;
767 } */
768 }
769 @media screen and (max-width: 420px) {
770 .userSearch .v-text-field .v-label {
771 line-height: 24px !important;
772 }
773 .userSearch .v-label {
774 font-size: 13px !important;
775 }
776 .v-list__tile {
777 font-size: 14px;
778 padding: 0 10px;
779 }
780 .name {
781 font-size: 15px;
782 }
783 }
784 </style>