viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit b28a5f17df1ca6741182ddec90e3bb58676bebec

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

fixed events and holidays api in calender dashbaord

Showing 3 changed files with 47 additions and 87 deletions   Show diff stats
src/pages/Dashboard/dashboard.vue
Diff comments   View file @b28a5f1
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-tabs icons-and-text centered> 3 <full-calendar ref="calendar" :events="events" :config="config"></full-calendar>
4 <v-tabs-slider color="green"></v-tabs-slider>
5 <v-tab href="#tab-1">
6 Events
7 <v-icon>event</v-icon>
8 </v-tab>
9 <v-tab href="#tab-2">
10 Holidays
11 <v-icon>star</v-icon>
12 </v-tab>
13 <v-tab-item id="tab-1">
14 <v-card flat>
15 <full-calendar ref="calendar" :events="events" :config="config"></full-calendar>
16 </v-card>
17 </v-tab-item>
18 <v-tab-item id="tab-2">
19 <v-card flat>
20 <full-calendar ref="calendar" :events="eventHoliday" :config="config"></full-calendar>
21 </v-card>
22 </v-tab-item>
23 </v-tabs>
24 <v-dialog v-model="dialog" max-width="500"> 4 <v-dialog v-model="dialog" max-width="500">
25 <v-card color="grey lighten-4" flat> 5 <v-card color="grey lighten-4" flat>
26 <v-toolbar dark color="fixcolors"> 6 <v-toolbar dark color="fixcolors">
27 <v-toolbar-side-icon></v-toolbar-side-icon> 7 <v-toolbar-side-icon></v-toolbar-side-icon>
28 <!-- <v-toolbar-title class="white--text">Title</v-toolbar-title> --> 8 <!-- <v-toolbar-title class="white--text">Title</v-toolbar-title> -->
29 <v-spacer></v-spacer> 9 <v-spacer></v-spacer>
30 <v-btn icon @click="dialog= false"> 10 <v-btn icon @click="dialog= false">
31 <v-icon>close</v-icon> 11 <v-icon>close</v-icon>
32 </v-btn> 12 </v-btn>
33 </v-toolbar> 13 </v-toolbar>
34 <v-flex class="py-4"> 14 <v-flex class="py-4">
35 <v-list-tile> 15 <v-list-tile>
36 <v-list-tile-action> 16 <v-list-tile-action>
37 <v-icon>edit</v-icon> 17 <v-icon>edit</v-icon>
38 </v-list-tile-action> 18 </v-list-tile-action>
39 <v-list-tile-content> 19 <v-list-tile-content>
40 <v-list-tile-title>{{ selected.title }}</v-list-tile-title> 20 <v-list-tile-title>{{ selected.title }}</v-list-tile-title>
41 </v-list-tile-content> 21 </v-list-tile-content>
42 </v-list-tile> 22 </v-list-tile>
43 <v-list-tile> 23 <v-list-tile>
44 <v-list-tile-action> 24 <v-list-tile-action>
45 <v-icon>access_time</v-icon> 25 <v-icon>access_time</v-icon>
46 </v-list-tile-action> 26 </v-list-tile-action>
47 <v-list-tile-content> 27 <v-list-tile-content>
48 <v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title> 28 <v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title>
49 <!-- <v-list-tile-sub-title>{{ date(selected.end) }}</v-list-tile-sub-title> --> 29 <!-- <v-list-tile-sub-title>{{ date(selected.end) }}</v-list-tile-sub-title> -->
50 </v-list-tile-content> 30 </v-list-tile-content>
51 </v-list-tile> 31 </v-list-tile>
52 </v-flex> 32 </v-flex>
53 </v-card> 33 </v-card>
54 </v-dialog> 34 </v-dialog>
55 <div class="loader" v-if="showLoader"> 35 <div class="loader" v-if="showLoader">
56 <v-progress-circular indeterminate color="white"></v-progress-circular> 36 <v-progress-circular indeterminate color="white"></v-progress-circular>
57 </div> 37 </div>
58 </v-app> 38 </v-app>
59 </template> 39 </template>
60 40
61 <script> 41 <script>
62 import http from "@/Services/http.js"; 42 import http from "@/Services/http.js";
63 import Util from "@/util"; 43 import Util from "@/util";
64 import moment from "moment"; 44 import moment from "moment";
65 45
66 export default { 46 export default {
67 data() { 47 data() {
68 return { 48 return {
69 showLoader: false, 49 showLoader: false,
70 dialog: false, 50 dialog: false,
51 HolidaysList: [],
52 EventsList: [],
71 events: [], 53 events: [],
72 eventHoliday: [],
73 config: { 54 config: {
74 eventClick: event => { 55 eventClick: event => {
75 this.selected = event; 56 this.selected = event;
76 this.dialog = true; 57 this.dialog = true;
77 } 58 }
78 }, 59 },
79 selected: {} 60 selected: {}
80 }; 61 };
81 }, 62 },
82 methods: { 63 methods: {
83 date: function(date) { 64 date: function(date) {
84 return moment(date).format("MMMM DD, YYYY HH:mm:ss"); 65 return moment(date).format("MMMM DD, YYYY HH:mm:ss");
85 }, 66 },
86 refreshEvents() { 67 refreshEvents() {
87 this.$refs.calendar.$emit("refetch-events"); 68 this.$refs.calendar.$emit("refetch-events");
88 }, 69 },
89 removeEvent() { 70 removeEvent() {
90 this.$refs.calendar.$emit("remove-event", this.selected); 71 this.$refs.calendar.$emit("remove-event", this.selected);
91 this.selected = {}; 72 this.selected = {};
92 }, 73 },
93 eventSelected(event) { 74 eventSelected(event) {
94 this.selected = event; 75 this.selected = event;
95 console.log("this.selected", this.selected); 76 console.log("this.selected", this.selected);
96 }, 77 },
97 eventCreated(...test) { 78 eventCreated(...test) {
98 console.log(test); 79 console.log(test);
99 }, 80 },
100 // getEvents() {
101 // this.showLoader = true;
102 // var token = this.$store.state.token;
103 // http()
104 // .get("/getSchoolEventsList", {
105 // headers: { Authorization: "Bearer " + token }
106 // })
107 // .then(response => {
108 // for(var i=0; i<response.data.data.length;i++){
109 // console.log(response.data.data[i])
110 // this.events = [
111 // {
112 // title:response.data.data[i].title,
113 // start:response.data.data[i].dateOfEvent
114 // }
115 // ]
116 // }
117 // this.showLoader = false;
118 // })
119 // .catch(err => {
120 // // console.log("err====>", err);
121 // this.showLoader = false;
122 // if (error.response.status === 401) {
123 // this.$router.replace({ path: "/" });
124 // this.$store.dispatch("setToken", null);
125 // this.$store.dispatch("Id", null);
126 // }
127 // });
128 // }
129 getHolidays() { 81 getHolidays() {
130 this.showLoader = true; 82 this.showLoader = true;
131 var token = this.$store.state.token; 83 var token = this.$store.state.token;
132 http() 84 http()
133 .get("/getHolidaysList", { 85 .get("/getHolidaysList", {
134 headers: { Authorization: "Bearer " + token } 86 headers: { Authorization: "Bearer " + token }
135 }) 87 })
136 .then(response => { 88 .then(response => {
137 this.eventHoliday = response.data.data; 89 this.HolidaysList = response.data.data;
90 // this.events = response.data.data;
138 this.showLoader = false; 91 this.showLoader = false;
139 }) 92 })
140 .catch(err => { 93 .catch(err => {
141 // console.log("err====>", err); 94 // console.log("err====>", err);
142 this.showLoader = false; 95 this.showLoader = false;
143 if (error.response.status === 401) { 96 if (error.response.status === 401) {
144 this.$router.replace({ path: "/" }); 97 this.$router.replace({ path: "/" });
145 this.$store.dispatch("setToken", null); 98 this.$store.dispatch("setToken", null);
146 this.$store.dispatch("Id", null); 99 this.$store.dispatch("Id", null);
147 } 100 }
148 }); 101 });
102 // },
103 // getEvents() {
104 var token = this.$store.state.token;
105 http()
106 .get("/getSchoolEventsList", {
107 headers: { Authorization: "Bearer " + token }
108 })
109 .then(response => {
110 this.EventsList = response.data.data;
111 let allData = [];
112 allData = this.HolidaysList.concat(this.EventsList);
113 this.events = allData;
114 this.showLoader = false;
115 })
116 .catch(error => {
117 // console.log("err====>", err);
118 this.showLoader = false;
119 if (error.response.status === 401) {
120 this.$router.replace({ path: "/" });
121 this.$store.dispatch("setToken", null);
122 this.$store.dispatch("Id", null);
123 }
124 });
149 } 125 }
150 // eventSources() { 126 // eventSources() {
151 // const self = this; 127 // const self = this;
152 // return [ 128 // return [
153 // { 129 // {
154 // events(start, end, timezone, callback) { 130 // events(start, end, timezone, callback) {
155 // setTimeout(() => { 131 // setTimeout(() => {
156 // callback(self.events.filter(() => Math.random() > 0.5)); 132 // callback(self.events.filter(() => Math.random() > 0.5));
157 // }, 1000); 133 // }, 1000);
158 // } 134 // }
159 // } 135 // }
160 // ]; 136 // ];
161 // } 137 // }
162 }, 138 },
163 mounted() { 139 mounted() {
164 // this.getEvents(); 140 // this.getEvents();
165 var token = this.$store.state.token;
166 http()
167 .get("/getSchoolEventsList", {
168 headers: { Authorization: "Bearer " + token }
169 })
170 .then(response => {
171 this.events = response.data.data;
172 this.showLoader = false;
173 })
174 .catch(error => {
175 // console.log("err====>", err);
176 this.showLoader = false;
177 if (error.response.status === 401) {
178 this.$router.replace({ path: "/" });
179 this.$store.dispatch("setToken", null);
180 this.$store.dispatch("Id", null);
181 }
182 });
183 this.getHolidays(); 141 this.getHolidays();
184 } 142 }
185 }; 143 };
186 </script> 144 </script>
187 <style> 145 <style>
188 @import "fullcalendar/dist/fullcalendar.css"; 146 @import "fullcalendar/dist/fullcalendar.css";
189 .fc button { 147 .fc button {
190 background: #39b982 !important; 148 background: #39b982 !important;
191 border: none; 149 border: none;
192 border-radius: 4px; 150 border-radius: 4px;
193 color: white; 151 color: white;
194 padding: 6px 32px; 152 padding: 6px 32px;
195 text-align: center; 153 text-align: center;
196 text-decoration: none; 154 text-decoration: none;
197 display: inline-block; 155 display: inline-block;
198 font-size: 18px; 156 font-size: 18px;
199 margin: 8px 2px !important; 157 margin: 8px 2px !important;
200 cursor: pointer; 158 cursor: pointer;
201 -webkit-transition-duration: 0.4s; 159 -webkit-transition-duration: 0.4s;
202 transition-duration: 0.4s; 160 transition-duration: 0.4s;
203 box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 161 box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
204 } 162 }
205 .v-tabs__container--icons-and-text { 163 .v-tabs__container--icons-and-text {
206 height: 64px !important; 164 height: 64px !important;
207 } 165 }
208 .v-tabs__div { 166 .v-tabs__div {
209 text-transform: none; 167 text-transform: none;
210 } 168 }
211 .v-input__prepend-outer { 169 .v-input__prepend-outer {
212 margin-right: 0px !important; 170 margin-right: 0px !important;
213 } 171 }
214 .v-card__actions .v-btn { 172 .v-card__actions .v-btn {
215 margin: 0 15px; 173 margin: 0 15px;
216 min-width: 120px; 174 min-width: 120px;
217 } 175 }
218 .primary { 176
219 background-color: #aaa !important;
220 border-color: #aaa !important;
221 }
222 h4 { 177 h4 {
223 background-repeat: no-repeat; 178 background-repeat: no-repeat;
224 padding: 8px; 179 padding: 8px;
225 margin: auto; 180 margin: auto;
226 font-size: 25px; 181 font-size: 25px;
227 } 182 }
228 #name { 183 #name {
229 position: absolute; 184 position: absolute;
230 left: 100px; 185 left: 100px;
231 top: 17px; 186 top: 17px;
232 } 187 }
233 #icon { 188 #icon {
234 position: absolute; 189 position: absolute;
235 right: 8px; 190 right: 8px;
236 top: 8px; 191 top: 8px;
237 } 192 }
238 #m { 193 #m {
239 position: relative; 194 position: relative;
240 left: 135px; 195 left: 135px;
241 top: -15px; 196 top: -15px;
242 } 197 }
243 #G { 198 #G {
244 position: absolute; 199 position: absolute;
245 top: 38px; 200 top: 38px;
246 color: white; 201 color: white;
247 } 202 }
248 #bt { 203 #bt {
249 position: relative; 204 position: relative;
250 top: -20px; 205 top: -20px;
251 left: 115px; 206 left: 115px;
252 } 207 }
253 #e { 208 #e {
254 position: relative; 209 position: relative;
255 top: 5px; 210 top: 5px;
256 right: -30px; 211 right: -30px;
257 height: 17px; 212 height: 17px;
258 cursor: pointer; 213 cursor: pointer;
259 } 214 }
260 #d { 215 #d {
261 position: relative; 216 position: relative;
262 top: 5px; 217 top: 5px;
263 right: -70px; 218 right: -70px;
264 height: 17px; 219 height: 17px;
265 cursor: pointer; 220 cursor: pointer;
266 } 221 }
267 #indexId { 222 #indexId {
268 padding: 0 0px !important; 223 padding: 0 0px !important;
269 } 224 }
270 #td { 225 #td {
271 border: 1px solid #dddddd; 226 border: 1px solid #dddddd;
272 text-align: left; 227 text-align: left;
273 padding: 8px; 228 padding: 8px;
274 } 229 }
275 #dialog { 230 #dialog {
276 height: 550px; 231 height: 550px;
277 } 232 }
278 .active {
279 background-color: black;
280 color: white !important;
281 }
282 .activebtn {
283 color: black !important;
284 }
285 #flex { 233 #flex {
286 height: 300px; 234 height: 300px;
287 } 235 }
288 .top { 236 .top {
289 margin-top: 100px; 237 margin-top: 100px;
290 } 238 }
291 .v-tabs__item a { 239 .v-tabs__item a {
292 font-size: 16px !important; 240 font-size: 16px !important;
293 } 241 }
294 @media screen and (max-width: 769px) { 242 @media screen and (max-width: 769px) {
295 .top { 243 .top {
296 margin-top: 0 !important; 244 margin-top: 0 !important;
297 } 245 }
298 .userSearch .v-icon { 246 .userSearch .v-icon {
299 font-size: 20px !important; 247 font-size: 20px !important;
300 margin-left: 20px; 248 margin-left: 20px;
301 } 249 }
302 } 250 }
303 @media screen and (max-width: 380px) { 251 @media screen and (max-width: 380px) {
304 .pl-3 { 252 .pl-3 {
305 padding-left: 0px !important; 253 padding-left: 0px !important;
306 } 254 }
307 .right { 255 .right {
308 float: none !important; 256 float: none !important;
309 } 257 }
310 .subheading { 258 .subheading {
311 font-size: 14px !important; 259 font-size: 14px !important;
312 } 260 }
313 .v-card__actions .v-btn { 261 .v-card__actions .v-btn {
314 margin: 0 0px; 262 margin: 0 0px;
315 min-width: 100px; 263 min-width: 100px;
316 } 264 }
317 .subheading { 265 .subheading {
318 font-size: 12px !important; 266 font-size: 12px !important;
319 } 267 }
320 h5 { 268 h5 {
321 font-size: 13px; 269 font-size: 13px;
src/pages/Event/event.vue
Diff comments   View file @b28a5f1
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 Event</v-tab> 10 >Existing Event</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 Event</v-tab> 18 >Add New Event</v-tab>
19 19
20 <!-- ****** EDITS EVENT DETAILS ****** --> 20 <!-- ****** EDITS EVENT 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 Event</h3> 36 <h3>Edit Event</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" /> 49 <img src="/static/icon/user.png" />
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">Date:</label> 84 <label class="right">Date:</label>
85 </v-flex> 85 </v-flex>
86 <v-flex xs5 class="ml-3"> 86 <v-flex xs5 class="ml-3">
87 <v-menu 87 <v-menu
88 ref="menu" 88 ref="menu"
89 :close-on-content-click="false" 89 :close-on-content-click="false"
90 v-model="menu" 90 v-model="menu"
91 :nudge-right="40" 91 :nudge-right="40"
92 lazy 92 lazy
93 transition="scale-transition" 93 transition="scale-transition"
94 offset-y 94 offset-y
95 full-width 95 full-width
96 min-width="290px" 96 min-width="290px"
97 > 97 >
98 <v-text-field 98 <v-text-field
99 slot="activator" 99 slot="activator"
100 :rules="dateRules" 100 :rules="dateRules"
101 v-model="editedItem.dateOfEvent" 101 v-model="editedItem.dateOfEvent"
102 placeholder="Select date" 102 placeholder="Select date"
103 ></v-text-field> 103 ></v-text-field>
104 <v-date-picker 104 <v-date-picker
105 color="info"
105 ref="picker" 106 ref="picker"
106 v-model="editedItem.dateOfEvent" 107 v-model="editedItem.dateOfEvent"
107 @input="$refs.menu.save(editedItem.dateOfEvent)" 108 @input="$refs.menu.save(editedItem.dateOfEvent)"
108 ></v-date-picker> 109 ></v-date-picker>
109 </v-menu> 110 </v-menu>
110 </v-flex> 111 </v-flex>
111 </v-layout> 112 </v-layout>
112 </v-flex> 113 </v-flex>
113 <v-flex xs12 sm12> 114 <v-flex xs12 sm12>
114 <v-layout> 115 <v-layout>
115 <v-flex xs4 class="pt-4 subheading"> 116 <v-flex xs4 class="pt-4 subheading">
116 <label class="right">Description:</label> 117 <label class="right">Description:</label>
117 </v-flex> 118 </v-flex>
118 <v-flex xs5 class="ml-3"> 119 <v-flex xs5 class="ml-3">
119 <v-text-field 120 <v-text-field
120 placeholder="fill your Description" 121 placeholder="fill your Description"
121 v-model="editedItem.description" 122 v-model="editedItem.description"
122 type="text" 123 type="text"
123 ></v-text-field> 124 ></v-text-field>
124 </v-flex> 125 </v-flex>
125 </v-layout> 126 </v-layout>
126 </v-flex> 127 </v-flex>
127 <v-layout> 128 <v-layout>
128 <v-flex xs12 sm10 offset-sm1> 129 <v-flex xs12 sm10 offset-sm1>
129 <v-card-actions> 130 <v-card-actions>
130 <v-btn round dark @click.native="close">Cancel</v-btn> 131 <v-btn round dark @click.native="close">Cancel</v-btn>
131 <v-spacer></v-spacer> 132 <v-spacer></v-spacer>
132 <v-btn round dark @click="save">Save</v-btn> 133 <v-btn round dark @click="save">Save</v-btn>
133 </v-card-actions> 134 </v-card-actions>
134 </v-flex> 135 </v-flex>
135 </v-layout> 136 </v-layout>
136 </v-container> 137 </v-container>
137 </v-form> 138 </v-form>
138 </v-card> 139 </v-card>
139 </v-flex> 140 </v-flex>
140 </v-dialog> 141 </v-dialog>
141 142
142 <!-- ****** PROFILE VIEW EVENT DEATILS ****** --> 143 <!-- ****** PROFILE VIEW EVENT DEATILS ****** -->
143 144
144 <v-dialog v-model="dialog1" max-width="700px"> 145 <v-dialog v-model="dialog1" max-width="700px">
145 <v-toolbar color="white"> 146 <v-toolbar color="white">
146 <v-spacer></v-spacer> 147 <v-spacer></v-spacer>
147 <v-toolbar-title> 148 <v-toolbar-title>
148 <h3>Event</h3> 149 <h3>Event</h3>
149 </v-toolbar-title> 150 </v-toolbar-title>
150 <v-spacer></v-spacer> 151 <v-spacer></v-spacer>
151 <v-icon @click="close1">close</v-icon> 152 <v-icon @click="close1">close</v-icon>
152 </v-toolbar> 153 </v-toolbar>
153 <v-card> 154 <v-card>
154 <v-card-text> 155 <v-card-text>
155 <v-container grid-list-md> 156 <v-container grid-list-md>
156 <v-layout wrap> 157 <v-layout wrap>
157 <v-flex> 158 <v-flex>
158 <v-layout> 159 <v-layout>
159 <v-flex xs5 sm6> 160 <v-flex xs5 sm6>
160 <h5 class="right my-1"><b>Title:</b></h5> 161 <h5 class="right my-1">
162 <b>Title:</b>
163 </h5>
161 </v-flex> 164 </v-flex>
162 <v-flex sm6 xs8> 165 <v-flex sm6 xs8>
163 <h5 class="my-1">{{ editedItem.title }}</h5> 166 <h5 class="my-1">{{ editedItem.title }}</h5>
164 </v-flex> 167 </v-flex>
165 </v-layout> 168 </v-layout>
166 <v-layout> 169 <v-layout>
167 <v-flex xs5 sm6> 170 <v-flex xs5 sm6>
168 <h5 class="right my-1"><b>Date:</b></h5> 171 <h5 class="right my-1">
172 <b>Date:</b>
173 </h5>
169 </v-flex> 174 </v-flex>
170 <v-flex sm6 xs8> 175 <v-flex sm6 xs8>
171 <h5 class="my-1">{{ dates(editedItem.dateOfEvent) }}</h5> 176 <h5 class="my-1">{{ dates(editedItem.dateOfEvent) }}</h5>
172 </v-flex> 177 </v-flex>
173 </v-layout> 178 </v-layout>
174 <v-layout> 179 <v-layout>
175 <v-flex xs5 sm6> 180 <v-flex xs5 sm6>
176 <h5 class="right my-1"><b>Description:</b></h5> 181 <h5 class="right my-1">
182 <b>Description:</b>
183 </h5>
177 </v-flex> 184 </v-flex>
178 <v-flex sm6 xs8> 185 <v-flex sm6 xs8>
179 <h5 class="my-1">{{ editedItem.description }}</h5> 186 <h5 class="my-1">{{ editedItem.description }}</h5>
180 </v-flex> 187 </v-flex>
181 </v-layout> 188 </v-layout>
182 </v-flex> 189 </v-flex>
183 </v-layout> 190 </v-layout>
184 </v-container> 191 </v-container>
185 </v-card-text> 192 </v-card-text>
186 </v-card> 193 </v-card>
187 </v-dialog> 194 </v-dialog>
188 <v-snackbar 195 <v-snackbar
189 :timeout="timeout" 196 :timeout="timeout"
190 :top="y === 'top'" 197 :top="y === 'top'"
191 :right="x === 'right'" 198 :right="x === 'right'"
192 :vertical="mode === 'vertical'" 199 :vertical="mode === 'vertical'"
193 v-model="snackbar" 200 v-model="snackbar"
194 color="success" 201 color="success"
195 >{{ text }}</v-snackbar> 202 >{{ text }}</v-snackbar>
196 203
197 <!-- ****** EXISTING-USERS EVENT TABLE ****** --> 204 <!-- ****** EXISTING-USERS EVENT TABLE ****** -->
198 205
199 <v-data-table 206 <v-data-table
200 :headers="headers" 207 :headers="headers"
201 :items="desserts" 208 :items="desserts"
202 :pagination.sync="pagination" 209 :pagination.sync="pagination"
203 :search="search" 210 :search="search"
204 > 211 >
205 <template slot="items" slot-scope="props"> 212 <template slot="items" slot-scope="props">
206 <td id="td" class="text-xs-center">{{ props.index}}</td> 213 <td id="td" class="text-xs-center">{{ props.index}}</td>
207 <td id="td" class="text-xs-center">{{ props.item.title}}</td> 214 <td id="td" class="text-xs-center">{{ props.item.title}}</td>
208 <td id="td" class="text-xs-center">{{ dates(props.item.dateOfEvent)}}</td> 215 <td id="td" class="text-xs-center">{{ dates(props.item.dateOfEvent)}}</td>
209 <td id="td" class="text-xs-center">{{ props.item.description}}</td> 216 <td id="td" class="text-xs-center">{{ props.item.description}}</td>
210 217
211 <td id="td" class="text-xs-center"> 218 <td id="td" class="text-xs-center">
212 <span> 219 <span>
213 <img 220 <img
214 style="cursor:pointer; width:25px; height:18px; " 221 style="cursor:pointer; width:25px; height:18px; "
215 class="mr-5" 222 class="mr-5"
216 @click="profile(props.item)" 223 @click="profile(props.item)"
217 src="/static/icon/eye1.png" 224 src="/static/icon/eye1.png"
218 /> 225 />
219 <img 226 <img
220 style="cursor:pointer; width:20px; height:18px; " 227 style="cursor:pointer; width:20px; height:18px; "
221 class="mr-5" 228 class="mr-5"
222 @click="editItem(props.item)" 229 @click="editItem(props.item)"
223 src="/static/icon/edit1.png" 230 src="/static/icon/edit1.png"
224 /> 231 />
225 <img 232 <img
226 style="cursor:pointer;width:20px; height:20px; " 233 style="cursor:pointer;width:20px; height:20px; "
227 class="mr-5" 234 class="mr-5"
228 @click="deleteItem(props.item)" 235 @click="deleteItem(props.item)"
229 src="/static/icon/delete1.png" 236 src="/static/icon/delete1.png"
230 /> 237 />
231 </span> 238 </span>
232 </td> 239 </td>
233 </template> 240 </template>
234 <v-alert 241 <v-alert
235 slot="no-results" 242 slot="no-results"
236 :value="true" 243 :value="true"
237 color="error" 244 color="error"
238 icon="warning" 245 icon="warning"
239 >Your search for "{{ search }}" found no results.</v-alert> 246 >Your search for "{{ search }}" found no results.</v-alert>
240 </v-data-table> 247 </v-data-table>
241 </v-tab-item> 248 </v-tab-item>
242 249
243 <!-- ****** ADD MULTIPLE EVENT ****** --> 250 <!-- ****** ADD MULTIPLE EVENT ****** -->
244 251
245 <v-tab-item> 252 <v-tab-item>
246 <v-container> 253 <v-container>
247 <v-snackbar 254 <v-snackbar
248 :timeout="timeout" 255 :timeout="timeout"
249 :top="y === 'top'" 256 :top="y === 'top'"
250 :right="x === 'right'" 257 :right="x === 'right'"
251 :vertical="mode === 'vertical'" 258 :vertical="mode === 'vertical'"
252 v-model="snackbar" 259 v-model="snackbar"
253 color="success" 260 color="success"
254 >{{ text }}</v-snackbar> 261 >{{ text }}</v-snackbar>
255 <v-flex xs12 sm12 class="my-4"> 262 <v-flex xs12 sm12 class="my-4">
256 <v-card flat> 263 <v-card flat>
257 <v-form ref="form" v-model="valid" lazy-validation> 264 <v-form ref="form" v-model="valid" lazy-validation>
258 <v-container fluid> 265 <v-container fluid>
259 <v-layout> 266 <v-layout>
260 <!-- <v-flex 267 <!-- <v-flex
261 xs12 268 xs12
262 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4" 269 class="text-xs-center text-sm-center text-md-center text-lg-center my-4 mr-4"
263 > 270 >
264 <v-avatar size="100px"> 271 <v-avatar size="100px">
265 <img src="/static/icon/user.png" /> 272 <img src="/static/icon/user.png" />
266 </v-avatar>--> 273 </v-avatar>-->
267 <!-- <input 274 <!-- <input
268 type="file" 275 type="file"
269 style="display: none" 276 style="display: none"
270 ref="image" 277 ref="image"
271 accept="image/*" 278 accept="image/*"
272 @change="onFilePicked" 279 @change="onFilePicked"
273 /> 280 />
274 <img 281 <img
275 :src="imageData.imageUrl" 282 :src="imageData.imageUrl"
276 height="150" 283 height="150"
277 v-if="imageUrl" 284 v-if="imageUrl"
278 style="border-radius:50%; width:200px" 285 style="border-radius:50%; width:200px"
279 />--> 286 />-->
280 <!-- </v-flex> --> 287 <!-- </v-flex> -->
281 </v-layout> 288 </v-layout>
282 <v-flex xs12> 289 <v-flex xs12>
283 <v-layout> 290 <v-layout>
284 <v-flex xs4 class="pt-4 subheading"> 291 <v-flex xs4 class="pt-4 subheading">
285 <label class="right">Title:</label> 292 <label class="right">Title:</label>
286 </v-flex> 293 </v-flex>
287 <v-flex xs4 class="ml-3"> 294 <v-flex xs4 class="ml-3">
288 <v-text-field 295 <v-text-field
289 v-model="addEvent.title" 296 v-model="addEvent.title"
290 placeholder="fill your Title" 297 placeholder="fill your Title"
291 type="text" 298 type="text"
292 :rules="titleRules" 299 :rules="titleRules"
293 required 300 required
294 ></v-text-field> 301 ></v-text-field>
295 </v-flex> 302 </v-flex>
296 </v-layout> 303 </v-layout>
297 </v-flex> 304 </v-flex>
298 <v-flex xs12> 305 <v-flex xs12>
299 <v-layout> 306 <v-layout>
300 <v-flex xs4 class="pt-4 subheading"> 307 <v-flex xs4 class="pt-4 subheading">
301 <label class="right">date:</label> 308 <label class="right">Date:</label>
302 </v-flex> 309 </v-flex>
303 <v-flex xs4 class="ml-3"> 310 <v-flex xs4 class="ml-3">
304 <v-menu 311 <v-menu
305 ref="menu1" 312 ref="menu1"
306 :close-on-content-click="false" 313 :close-on-content-click="false"
307 v-model="menu1" 314 v-model="menu1"
308 :nudge-right="40" 315 :nudge-right="40"
309 :return-value.sync="addEvent.dateOfEvent" 316 :return-value.sync="addEvent.dateOfEvent"
317 app
310 lazy 318 lazy
311 transition="scale-transition" 319 transition="scale-transition"
312 offset-y 320 offset-y
313 full-width 321 full-width
314 min-width="290px" 322 min-width="290px"
315 > 323 >
316 <v-text-field 324 <v-text-field
317 slot="activator" 325 slot="activator"
318 :rules="dateRules" 326 :rules="dateRules"
319 v-model="addEvent.dateOfEvent" 327 v-model="addEvent.dateOfEvent"
328 append-icon="event"
320 placeholder="Select date" 329 placeholder="Select date"
321 ></v-text-field> 330 ></v-text-field>
322 <v-date-picker 331 <v-date-picker
332 color="info"
323 v-model="addEvent.dateOfEvent" 333 v-model="addEvent.dateOfEvent"
324 @input="$refs.menu1.save(addEvent.dateOfEvent)"> 334 @input="$refs.menu1.save(addEvent.dateOfEvent)"
325 </v-date-picker> 335 ></v-date-picker>
326 </v-menu> 336 </v-menu>
327 </v-flex> 337 </v-flex>
328 </v-layout> 338 </v-layout>
329 </v-flex> 339 </v-flex>
330 <v-flex xs12> 340 <v-flex xs12>
331 <v-layout> 341 <v-layout>
332 <v-flex xs4 class="pt-4 subheading"> 342 <v-flex xs4 class="pt-4 subheading">
333 <label class="right">Description:</label> 343 <label class="right">Description:</label>
334 </v-flex> 344 </v-flex>
335 <v-flex xs4 class="ml-3"> 345 <v-flex xs4 class="ml-3">
336 <v-text-field 346 <v-text-field
337 placeholder="fill your Description" 347 placeholder="fill your Description"
338 :rules="descriptionRules" 348 :rules="descriptionRules"
339 v-model="addEvent.description" 349 v-model="addEvent.description"
340 type="text" 350 type="text"
341 required 351 required
342 ></v-text-field> 352 ></v-text-field>
343 </v-flex> 353 </v-flex>
344 </v-layout> 354 </v-layout>
345 </v-flex> 355 </v-flex>
346 <v-layout> 356 <v-layout>
347 <v-flex xs12 sm6 offset-sm3> 357 <v-flex xs12 sm6 offset-sm3>
348 <v-card-actions> 358 <v-card-actions>
349 <v-btn @click="clear" round dark>clear</v-btn> 359 <v-btn @click="clear" round dark>clear</v-btn>
350 <v-spacer></v-spacer> 360 <v-spacer></v-spacer>
351 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 361 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
352 </v-card-actions> 362 </v-card-actions>
353 </v-flex> 363 </v-flex>
354 </v-layout> 364 </v-layout>
355 </v-container> 365 </v-container>
356 </v-form> 366 </v-form>
357 </v-card> 367 </v-card>
358 </v-flex> 368 </v-flex>
359 </v-container> 369 </v-container>
360 </v-tab-item> 370 </v-tab-item>
361 </v-tabs> 371 </v-tabs>
362 <div class="loader" v-if="showLoader"> 372 <div class="loader" v-if="showLoader">
363 <v-progress-circular indeterminate color="white"></v-progress-circular> 373 <v-progress-circular indeterminate color="white"></v-progress-circular>
364 </div> 374 </div>
365 </v-app> 375 </v-app>
366 </template> 376 </template>
367 377
368 <script> 378 <script>
369 import http from "@/Services/http.js"; 379 import http from "@/Services/http.js";
370 import Util from "@/util"; 380 import Util from "@/util";
371 import moment from "moment"; 381 import moment from "moment";
372 382
373 export default { 383 export default {
374 data: () => ({ 384 data: () => ({
375 snackbar: false, 385 snackbar: false,
376 y: "top", 386 y: "top",
377 x: "right", 387 x: "right",
378 mode: "", 388 mode: "",
379 timeout: 3000, 389 timeout: 3000,
380 text: "", 390 text: "",
381 loading: false, 391 loading: false,
382 date: null, 392 date: null,
383 search: "", 393 search: "",
384 showLoader: false, 394 showLoader: false,
385 dialog: false, 395 dialog: false,
386 dialog1: false, 396 dialog1: false,
387 valid: true, 397 valid: true,
388 isActive: true, 398 isActive: true,
389 newActive: false, 399 newActive: false,
390 pagination: { 400 pagination: {
391 rowsPerPage: 15 401 rowsPerPage: 15
392 }, 402 },
393 date: null, 403 date: null,
394 menu1: false, 404 menu1: false,
395 menu: false, 405 menu: false,
396 // imageData: {}, 406 // imageData: {},
397 // imageName: "", 407 // imageName: "",
398 // imageUrl: "", 408 // imageUrl: "",
399 // imageFile: "", 409 // imageFile: "",
400 titleRules: [v => !!v || " Tilte is required"], 410 titleRules: [v => !!v || " Tilte is required"],
401 descriptionRules: [v => !!v || " Discription is required"], 411 descriptionRules: [v => !!v || " Discription is required"],
402 dateRules: [v => !!v || "Date is required"], 412 dateRules: [v => !!v || "Date is required"],
403 headers: [ 413 headers: [
404 { 414 {
405 text: "No", 415 text: "No",
406 align: "center", 416 align: "center",
407 sortable: false, 417 sortable: false,
408 value: "No" 418 value: "No"
409 }, 419 },
410 { text: "Title", value: "title", sortable: false, align: "center" }, 420 { text: "Title", value: "title", sortable: false, align: "center" },
411 { 421 {
412 text: "Description", 422 text: "Description",
413 value: "description", 423 value: "description",
414 sortable: false, 424 sortable: false,
415 align: "center" 425 align: "center"
416 }, 426 },
417 { text: "Action", value: "", sortable: false, align: "center" } 427 { text: "Action", value: "", sortable: false, align: "center" }
418 ], 428 ],
419 desserts: [], 429 desserts: [],
420 editedIndex: -1, 430 editedIndex: -1,
421 addEvent: {}, 431 addEvent: {},
422 editedItem: {} 432 editedItem: {}
423 }), 433 }),
424 methods: { 434 methods: {
425 // pickFile() { 435 // pickFile() {
426 // this.$refs.image.click(); 436 // this.$refs.image.click();
427 // }, 437 // },
428 438
429 // onFilePicked(e) { 439 // onFilePicked(e) {
430 // // console.log(e) 440 // // console.log(e)
431 // const files = e.target.files; 441 // const files = e.target.files;
432 // this.imageData.upload = e.target.files[0]; 442 // this.imageData.upload = e.target.files[0];
433 // if (files[0] !== undefined) { 443 // if (files[0] !== undefined) {
434 // this.imageName = files[0].name; 444 // this.imageName = files[0].name;
435 // if (this.imageName.lastIndexOf(".") <= 0) { 445 // if (this.imageName.lastIndexOf(".") <= 0) {
436 // return; 446 // return;
437 // } 447 // }
438 // const fr = new FileReader(); 448 // const fr = new FileReader();
439 // fr.readAsDataURL(files[0]); 449 // fr.readAsDataURL(files[0]);
440 // fr.addEventListener("load", () => { 450 // fr.addEventListener("load", () => {
441 // this.imageUrl = fr.result; 451 // this.imageUrl = fr.result;
442 // this.imageFile = files[0]; // this is an image file that can be sent to server... 452 // this.imageFile = files[0]; // this is an image file that can be sent to server...
443 // this.imageData.imageUrl = URL.createObjectURL(this.imageFile); 453 // this.imageData.imageUrl = URL.createObjectURL(this.imageFile);
444 // console.log("upload=======>", this.imageData.imageUrl); 454 // console.log("upload=======>", this.imageData.imageUrl);
445 // console.log("imageFile", this.imageFile); 455 // console.log("imageFile", this.imageFile);
446 // }); 456 // });
447 // } else { 457 // } else {
448 // this.imageName = ""; 458 // this.imageName = "";
449 // this.imageFile = ""; 459 // this.imageFile = "";
450 // this.imageUrl = ""; 460 // this.imageUrl = "";
451 // } 461 // }
452 // }, 462 // },
453 dates: function(date) { 463 dates: function(date) {
454 return moment(date).format("MMMM DD, YYYY"); 464 return moment(date).format("MMMM DD, YYYY");
455 }, 465 },
456 getEvents() { 466 getEvents() {
457 this.showLoader = true; 467 this.showLoader = true;
458 var token = this.$store.state.token; 468 var token = this.$store.state.token;
459 http() 469 http()
460 .get("/getSchoolEventsList", { 470 .get("/getSchoolEventsList", {
461 headers: { Authorization: "Bearer " + token } 471 headers: { Authorization: "Bearer " + token }
462 }) 472 })
463 .then(response => { 473 .then(response => {
464 this.desserts = response.data.data; 474 this.desserts = response.data.data;
465 this.showLoader = false; 475 this.showLoader = false;
466 }) 476 })
467 .catch(err => { 477 .catch(err => {
468 // console.log("err====>", err); 478 // console.log("err====>", err);
469 this.showLoader = false; 479 this.showLoader = false;
470 if (error.response.status === 401) { 480 if (error.response.status === 401) {
471 this.$router.replace({ path: "/" }); 481 this.$router.replace({ path: "/" });
472 this.$store.dispatch("setToken", null); 482 this.$store.dispatch("setToken", null);
473 this.$store.dispatch("Id", null); 483 this.$store.dispatch("Id", null);
474 } 484 }
475 }); 485 });
476 }, 486 },
477 editItem(item) { 487 editItem(item) {
478 this.editedIndex = this.desserts.indexOf(item); 488 this.editedIndex = this.desserts.indexOf(item);
479 this.editedItem = Object.assign({}, item); 489 this.editedItem = Object.assign({}, item);
480 this.editedItem.schoolEventId = item._id; 490 this.editedItem.schoolEventId = item._id;
481 this.dialog = true; 491 this.dialog = true;
482 }, 492 },
483 profile(item) { 493 profile(item) {
484 this.editedIndex = this.desserts.indexOf(item); 494 this.editedIndex = this.desserts.indexOf(item);
485 this.editedItem = Object.assign({}, item); 495 this.editedItem = Object.assign({}, item);
486 this.dialog1 = true; 496 this.dialog1 = true;
487 }, 497 },
488 498
489 deleteItem(item) { 499 deleteItem(item) {
490 let deleteEvent = { 500 let deleteEvent = {
491 schoolEventId: item._id 501 schoolEventId: item._id
492 }; 502 };
493 http() 503 http()
494 .delete( 504 .delete(
495 "/deleteSchoolEvent", 505 "/deleteSchoolEvent",
496 confirm("Are you sure you want to delete this?") && { 506 confirm("Are you sure you want to delete this?") && {
497 params: deleteEvent 507 params: deleteEvent
498 } 508 }
499 ) 509 )
500 .then(response => { 510 .then(response => {
501 if ((this.snackbar = true)) { 511 if ((this.snackbar = true)) {
502 this.text = response.data.message; 512 this.text = response.data.message;
503 } 513 }
504 this.getEvents(); 514 this.getEvents();
505 }) 515 })
506 .catch(error => { 516 .catch(error => {
507 console.log(error); 517 console.log(error);
508 }); 518 });
509 }, 519 },
510 activeTab(type) { 520 activeTab(type) {
511 switch (type) { 521 switch (type) {
512 case "existing": 522 case "existing":
513 this.newActive = false; 523 this.newActive = false;
514 this.isActive = true; 524 this.isActive = true;
515 break; 525 break;
516 526
517 default: 527 default:
518 this.newActive = true; 528 this.newActive = true;
519 this.isActive = false; 529 this.isActive = false;
520 break; 530 break;
521 } 531 }
522 }, 532 },
523 close() { 533 close() {
524 this.dialog = false; 534 this.dialog = false;
525 setTimeout(() => { 535 setTimeout(() => {
526 this.editedItem = Object.assign({}, this.defaultItem); 536 this.editedItem = Object.assign({}, this.defaultItem);
527 this.editedIndex = -1; 537 this.editedIndex = -1;
528 }, 300); 538 }, 300);
529 }, 539 },
530 close1() { 540 close1() {
531 this.dialog1 = false; 541 this.dialog1 = false;
532 }, 542 },
533 submit() { 543 submit() {
534 if (this.$refs.form.validate()) { 544 if (this.$refs.form.validate()) {
535 this.loading = true; 545 this.loading = true;
536 http() 546 http()
537 .post("/createSchoolEvent", this.addEvent) 547 .post("/createSchoolEvent", this.addEvent)
538 .then(response => { 548 .then(response => {
539 if ((this.snackbar = true)) { 549 if ((this.snackbar = true)) {
540 this.text = response.data.message; 550 this.text = response.data.message;
541 } 551 }
542 this.getEvents(); 552 this.getEvents();
543 this.clear(); 553 this.clear();
544 this.loading = false; 554 this.loading = false;
545 }) 555 })
546 .catch(error => { 556 .catch(error => {
547 if ((this.snackbar = true)) { 557 if ((this.snackbar = true)) {
548 this.text = error.response.data.message; 558 this.text = error.response.data.message;
549 } 559 }
550 this.loading = false; 560 this.loading = false;
551 }); 561 });
552 } 562 }
553 }, 563 },
554 clear() { 564 clear() {
555 this.$refs.form.reset(); 565 this.$refs.form.reset();
556 }, 566 },
557 save() { 567 save() {
558 http() 568 http()
559 .put("/updateSchoolEvent", this.editedItem) 569 .put("/updateSchoolEvent", this.editedItem)
560 .then(response => { 570 .then(response => {
561 this.snackbar = true; 571 this.snackbar = true;
562 this.text = response.data.message; 572 this.text = response.data.message;
563 this.getEvents(); 573 this.getEvents();
564 this.close(); 574 this.close();
565 }) 575 })
566 .catch(error => { 576 .catch(error => {
567 // console.log(error); 577 // console.log(error);
568 }); 578 });
569 } 579 }
570 }, 580 },
571 mounted() { 581 mounted() {
572 this.getEvents(); 582 this.getEvents();
573 }, 583 },
574 created() { 584 created() {
575 this.$root.$on("app:search", search => { 585 this.$root.$on("app:search", search => {
576 this.search = search; 586 this.search = search;
577 }); 587 });
578 }, 588 },
579 beforeDestroy() { 589 beforeDestroy() {
580 // dont forget to remove the listener 590 // dont forget to remove the listener
581 this.$root.$off("app:search"); 591 this.$root.$off("app:search");
582 } 592 }
583 }; 593 };
584 </script> 594 </script>
585 <style scoped> 595 <style scoped>
586 #td { 596 #td {
587 max-width: 200px; 597 max-width: 200px;
588 } 598 }
589 .active { 599 .active {
590 background-color: black; 600 background-color: black;
591 color: white !important; 601 color: white !important;
592 } 602 }
593 .activebtn { 603 .activebtn {
594 color: black !important; 604 color: black !important;
595 } 605 }
596 </style> 606 </style>
src/pages/Holiday/holiday.vue
Diff comments   View file @b28a5f1
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 Holiday</v-tab> 10 >Existing Holiday</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 Holiday</v-tab> 18 >Add New Holiday</v-tab>
19 19
20 <!-- ****** EDITS Holiday DETAILS ****** --> 20 <!-- ****** EDITS Holiday 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 Holiday</h3> 36 <h3>Edit Holiday</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-flex xs12 sm12> 43 <v-flex xs12 sm12>
44 <v-layout> 44 <v-layout>
45 <v-flex xs4 class="pt-4 subheading"> 45 <v-flex xs4 class="pt-4 subheading">
46 <label class="right">Occasion:</label> 46 <label class="right">Occasion:</label>
47 </v-flex> 47 </v-flex>
48 <v-flex xs5 class="ml-3"> 48 <v-flex xs5 class="ml-3">
49 <v-text-field 49 <v-text-field
50 v-model="editedItem.occasion" 50 v-model="editedItem.occasion"
51 placeholder="fill your Occasion" 51 placeholder="fill your Occasion"
52 name="name" 52 name="name"
53 type="text" 53 type="text"
54 ></v-text-field> 54 ></v-text-field>
55 </v-flex> 55 </v-flex>
56 </v-layout> 56 </v-layout>
57 </v-flex> 57 </v-flex>
58 <v-flex xs12 sm12> 58 <v-flex xs12 sm12>
59 <v-layout> 59 <v-layout>
60 <v-flex xs4 class="pt-4 subheading"> 60 <v-flex xs4 class="pt-4 subheading">
61 <label class="right">Date:</label> 61 <label class="right">Date:</label>
62 </v-flex> 62 </v-flex>
63 <v-flex xs5 class="ml-3"> 63 <v-flex xs5 class="ml-3">
64 <v-menu 64 <v-menu
65 ref="menu" 65 ref="menu"
66 :close-on-content-click="false" 66 :close-on-content-click="false"
67 :return-value.sync="editedItem.dateOfHoliday" 67 :return-value.sync="editedItem.dateOfHoliday"
68 v-model="menu" 68 v-model="menu"
69 :nudge-right="40" 69 :nudge-right="40"
70 lazy 70 lazy
71 transition="scale-transition" 71 transition="scale-transition"
72 offset-y 72 offset-y
73 full-width 73 full-width
74 min-width="290px" 74 min-width="290px"
75 > 75 >
76 <v-text-field 76 <v-text-field
77 slot="activator" 77 slot="activator"
78 :rules="dateRules" 78 :rules="dateRules"
79 v-model="editedItem.dateOfHoliday" 79 v-model="editedItem.dateOfHoliday"
80 append-icon="event" 80 append-icon="event"
81 placeholder="Select date" 81 placeholder="Select date"
82 ></v-text-field> 82 ></v-text-field>
83 <v-date-picker 83 <v-date-picker
84 ref="picker" 84 ref="picker"
85 color="info"
85 v-model="editedItem.dateOfHoliday" 86 v-model="editedItem.dateOfHoliday"
86 @input="menu = false" 87 @input="menu = false"
87 ></v-date-picker> 88 ></v-date-picker>
88 </v-menu> 89 </v-menu>
89 </v-flex> 90 </v-flex>
90 </v-layout> 91 </v-layout>
91 </v-flex> 92 </v-flex>
92 <v-layout> 93 <v-layout>
93 <v-flex xs12 sm10 offset-sm1> 94 <v-flex xs12 sm10 offset-sm1>
94 <v-card-actions> 95 <v-card-actions>
95 <v-btn round dark @click.native="close">Cancel</v-btn> 96 <v-btn round dark @click.native="close">Cancel</v-btn>
96 <v-spacer></v-spacer> 97 <v-spacer></v-spacer>
97 <v-btn round dark @click="save">Save</v-btn> 98 <v-btn round dark @click="save">Save</v-btn>
98 </v-card-actions> 99 </v-card-actions>
99 </v-flex> 100 </v-flex>
100 </v-layout> 101 </v-layout>
101 </v-container> 102 </v-container>
102 </v-form> 103 </v-form>
103 </v-card> 104 </v-card>
104 </v-flex> 105 </v-flex>
105 </v-dialog> 106 </v-dialog>
106 107
107 <!-- ****** PROFILE VIEW Holiday DEATILS ****** --> 108 <!-- ****** PROFILE VIEW Holiday DEATILS ****** -->
108 109
109 <v-dialog v-model="dialog1" max-width="700px"> 110 <v-dialog v-model="dialog1" max-width="700px">
110 <v-toolbar class="v-toolbar"> 111 <v-toolbar class="v-toolbar">
111 <v-spacer></v-spacer> 112 <v-spacer></v-spacer>
112 <v-toolbar-title> 113 <v-toolbar-title>
113 <h3>Holiday</h3> 114 <h3>Holiday</h3>
114 </v-toolbar-title> 115 </v-toolbar-title>
115 <v-spacer></v-spacer> 116 <v-spacer></v-spacer>
116 <v-icon @click="close1">close</v-icon> 117 <v-icon @click="close1">close</v-icon>
117 </v-toolbar> 118 </v-toolbar>
118 <v-card> 119 <v-card>
119 <v-card-text> 120 <v-card-text>
120 <v-container grid-list-md> 121 <v-container grid-list-md>
121 <v-layout wrap> 122 <v-layout wrap>
122 <v-flex> 123 <v-flex>
123 <v-layout> 124 <v-layout>
124 <v-flex xs5 sm6> 125 <v-flex xs5 sm6>
125 <h5 class="right my-1"> 126 <h5 class="right my-1">
126 <b>Occasion:</b> 127 <b>Occasion:</b>
127 </h5> 128 </h5>
128 </v-flex> 129 </v-flex>
129 <v-flex sm6 xs8> 130 <v-flex sm6 xs8>
130 <h5 class="my-1">{{ editedItem.occasion }}</h5> 131 <h5 class="my-1">{{ editedItem.occasion }}</h5>
131 </v-flex> 132 </v-flex>
132 </v-layout> 133 </v-layout>
133 <v-layout> 134 <v-layout>
134 <v-flex xs5 sm6> 135 <v-flex xs5 sm6>
135 <h5 class="right my-1"> 136 <h5 class="right my-1">
136 <b>Date:</b> 137 <b>Date:</b>
137 </h5> 138 </h5>
138 </v-flex> 139 </v-flex>
139 <v-flex sm6 xs8> 140 <v-flex sm6 xs8>
140 <h5 class="my-1">{{ editedItem.dateOfHoliday }}</h5> 141 <h5 class="my-1">{{ editedItem.dateOfHoliday }}</h5>
141 </v-flex> 142 </v-flex>
142 </v-layout> 143 </v-layout>
143 </v-flex> 144 </v-flex>
144 </v-layout> 145 </v-layout>
145 </v-container> 146 </v-container>
146 </v-card-text> 147 </v-card-text>
147 </v-card> 148 </v-card>
148 </v-dialog> 149 </v-dialog>
149 <v-snackbar 150 <v-snackbar
150 :timeout="timeout" 151 :timeout="timeout"
151 :top="y === 'top'" 152 :top="y === 'top'"
152 :right="x === 'right'" 153 :right="x === 'right'"
153 :vertical="mode === 'vertical'" 154 :vertical="mode === 'vertical'"
154 v-model="snackbar" 155 v-model="snackbar"
155 color="success" 156 color="success"
156 >{{ text }}</v-snackbar> 157 >{{ text }}</v-snackbar>
157 158
158 <!-- ****** EXISTING-USERS Holiday TABLE ****** --> 159 <!-- ****** EXISTING-USERS Holiday TABLE ****** -->
159 160
160 <v-data-table 161 <v-data-table
161 :headers="headers" 162 :headers="headers"
162 :items="desserts" 163 :items="desserts"
163 :pagination.sync="pagination" 164 :pagination.sync="pagination"
164 :search="search" 165 :search="search"
165 > 166 >
166 <template slot="items" slot-scope="props"> 167 <template slot="items" slot-scope="props">
167 <td id="td" class="text-xs-center">{{ props.index}}</td> 168 <td id="td" class="text-xs-center">{{ props.index}}</td>
168 <td id="td" class="text-xs-center">{{ props.item.occasion}}</td> 169 <td id="td" class="text-xs-center">{{ props.item.occasion}}</td>
169 <td id="td" class="text-xs-center">{{ dates(props.item.dateOfHoliday) }}</td> 170 <td id="td" class="text-xs-center">{{ dates(props.item.dateOfHoliday) }}</td>
170 171
171 <td id="td" class="text-xs-center"> 172 <td id="td" class="text-xs-center">
172 <span> 173 <span>
173 <img 174 <img
174 style="cursor:pointer; width:25px; height:18px; " 175 style="cursor:pointer; width:25px; height:18px; "
175 class="mr-5" 176 class="mr-5"
176 @click="profile(props.item)" 177 @click="profile(props.item)"
177 src="/static/icon/eye1.png" 178 src="/static/icon/eye1.png"
178 /> 179 />
179 <img 180 <img
180 style="cursor:pointer; width:20px; height:18px; " 181 style="cursor:pointer; width:20px; height:18px; "
181 class="mr-5" 182 class="mr-5"
182 @click="editItem(props.item)" 183 @click="editItem(props.item)"
183 src="/static/icon/edit1.png" 184 src="/static/icon/edit1.png"
184 /> 185 />
185 <img 186 <img
186 style="cursor:pointer;width:20px; height:20px; " 187 style="cursor:pointer;width:20px; height:20px; "
187 class="mr-5" 188 class="mr-5"
188 @click="deleteItem(props.item)" 189 @click="deleteItem(props.item)"
189 src="/static/icon/delete1.png" 190 src="/static/icon/delete1.png"
190 /> 191 />
191 </span> 192 </span>
192 </td> 193 </td>
193 </template> 194 </template>
194 <v-alert 195 <v-alert
195 slot="no-results" 196 slot="no-results"
196 :value="true" 197 :value="true"
197 color="error" 198 color="error"
198 icon="warning" 199 icon="warning"
199 >Your search for "{{ search }}" found no results.</v-alert> 200 >Your search for "{{ search }}" found no results.</v-alert>
200 </v-data-table> 201 </v-data-table>
201 </v-tab-item> 202 </v-tab-item>
202 203
203 <!-- ****** ADD MULTIPLE Holiday ****** --> 204 <!-- ****** ADD MULTIPLE Holiday ****** -->
204 205
205 <v-tab-item> 206 <v-tab-item>
206 <v-container> 207 <v-container>
207 <v-snackbar 208 <v-snackbar
208 :timeout="timeout" 209 :timeout="timeout"
209 :top="y === 'top'" 210 :top="y === 'top'"
210 :right="x === 'right'" 211 :right="x === 'right'"
211 :vertical="mode === 'vertical'" 212 :vertical="mode === 'vertical'"
212 v-model="snackbar" 213 v-model="snackbar"
213 color="success" 214 color="success"
214 >{{ text }}</v-snackbar> 215 >{{ text }}</v-snackbar>
215 <v-flex xs12 sm8 class="my-4" offset-sm2> 216 <v-flex xs12 sm8 class="my-4" offset-sm2>
216 <v-card flat> 217 <v-card flat>
217 <v-form ref="form" v-model="valid" lazy-validation> 218 <v-form ref="form" v-model="valid" lazy-validation>
218 <v-container fluid> 219 <v-container fluid>
219 <v-flex xs12> 220 <v-flex xs12>
220 <v-layout> 221 <v-layout>
221 <v-flex xs4 class="pt-4 subheading"> 222 <v-flex xs4 class="pt-4 subheading">
222 <label class="right">Occasion:</label> 223 <label class="right">Occasion:</label>
223 </v-flex> 224 </v-flex>
224 <v-flex xs4 class="ml-3"> 225 <v-flex xs4 class="ml-3">
225 <v-text-field 226 <v-text-field
226 v-model="addHoliday.occasion" 227 v-model="addHoliday.occasion"
227 placeholder="fill your Occasion" 228 placeholder="fill your Occasion"
228 type="text" 229 type="text"
229 :rules="occasionRules" 230 :rules="occasionRules"
230 required 231 required
231 ></v-text-field> 232 ></v-text-field>
232 </v-flex> 233 </v-flex>
233 </v-layout> 234 </v-layout>
234 </v-flex> 235 </v-flex>
235 <v-flex xs12> 236 <v-flex xs12>
236 <v-layout> 237 <v-layout>
237 <v-flex xs4 class="pt-4 subheading"> 238 <v-flex xs4 class="pt-4 subheading">
238 <label class="right">Date:</label> 239 <label class="right">Date:</label>
239 </v-flex> 240 </v-flex>
240 <v-flex xs4 class="ml-3"> 241 <v-flex xs4 class="ml-3">
241 <v-menu 242 <v-menu
242 ref="menu1" 243 ref="menu1"
243 :close-on-content-click="false" 244 :close-on-content-click="false"
244 v-model="menu1" 245 v-model="menu1"
245 :nudge-right="40" 246 :nudge-right="40"
246 :return-value.sync="addHoliday.dateOfHoliday" 247 :return-value.sync="addHoliday.dateOfHoliday"
247 lazy 248 lazy
248 transition="scale-transition" 249 transition="scale-transition"
249 offset-y 250 offset-y
250 full-width 251 full-width
251 min-width="290px" 252 min-width="290px"
252 > 253 >
253 <v-text-field 254 <v-text-field
254 slot="activator" 255 slot="activator"
255 :rules="dateRules" 256 :rules="dateRules"
256 v-model="addHoliday.dateOfHoliday" 257 v-model="addHoliday.dateOfHoliday"
257 append-icon="event" 258 append-icon="event"
258 label="Select date" 259 label="Select date"
259 ></v-text-field> 260 ></v-text-field>
260 <v-date-picker 261 <v-date-picker
261 ref="picker" 262 ref="picker"
263 color="info"
262 v-model="addHoliday.dateOfHoliday" 264 v-model="addHoliday.dateOfHoliday"
263 @input="$refs.menu1.save(addHoliday.dateOfHoliday)" 265 @input="$refs.menu1.save(addHoliday.dateOfHoliday)"
264 ></v-date-picker> 266 ></v-date-picker>
265 </v-menu> 267 </v-menu>
266 </v-flex> 268 </v-flex>
267 </v-layout> 269 </v-layout>
268 </v-flex> 270 </v-flex>
269 <v-layout> 271 <v-layout>
270 <v-flex xs12 sm7 offset-sm2> 272 <v-flex xs12 sm7 offset-sm2>
271 <v-card-actions> 273 <v-card-actions>
272 <v-btn @click="clear" round dark>clear</v-btn> 274 <v-btn @click="clear" round dark>clear</v-btn>
273 <v-spacer></v-spacer> 275 <v-spacer></v-spacer>
274 <v-btn @click="submit" round dark :loading="loading">Add</v-btn> 276 <v-btn @click="submit" round dark :loading="loading">Add</v-btn>
275 </v-card-actions> 277 </v-card-actions>
276 </v-flex> 278 </v-flex>
277 </v-layout> 279 </v-layout>
278 </v-container> 280 </v-container>
279 </v-form> 281 </v-form>
280 </v-card> 282 </v-card>
281 </v-flex> 283 </v-flex>
282 </v-container> 284 </v-container>
283 </v-tab-item> 285 </v-tab-item>
284 </v-tabs> 286 </v-tabs>
285 <div class="loader" v-if="showLoader"> 287 <div class="loader" v-if="showLoader">
286 <v-progress-circular indeterminate color="white"></v-progress-circular> 288 <v-progress-circular indeterminate color="white"></v-progress-circular>
287 </div> 289 </div>
288 </v-app> 290 </v-app>
289 </template> 291 </template>
290 292
291 <script> 293 <script>
292 import http from "@/Services/http.js"; 294 import http from "@/Services/http.js";
293 import moment from "moment"; 295 import moment from "moment";
294 296
295 export default { 297 export default {
296 data: () => ({ 298 data: () => ({
297 snackbar: false, 299 snackbar: false,
298 y: "top", 300 y: "top",
299 x: "right", 301 x: "right",
300 mode: "", 302 mode: "",
301 timeout: 3000, 303 timeout: 3000,
302 text: "", 304 text: "",
303 loading: false, 305 loading: false,
304 date: null, 306 date: null,
305 search: "", 307 search: "",
306 showLoader: false, 308 showLoader: false,
307 dialog: false, 309 dialog: false,
308 dialog1: false, 310 dialog1: false,
309 valid: true, 311 valid: true,
310 isActive: true, 312 isActive: true,
311 newActive: false, 313 newActive: false,
312 pagination: { 314 pagination: {
313 rowsPerPage: 15 315 rowsPerPage: 15
314 }, 316 },
315 date: null, 317 date: null,
316 menu1: false, 318 menu1: false,
317 menu: false, 319 menu: false,
318 occasionRules: [v => !!v || "Occasion is required"], 320 occasionRules: [v => !!v || "Occasion is required"],
319 dateRules: [v => !!v || "Date is required"], 321 dateRules: [v => !!v || "Date is required"],
320 headers: [ 322 headers: [
321 { 323 {
322 text: "No", 324 text: "No",
323 align: "center", 325 align: "center",
324 sortable: false, 326 sortable: false,
325 value: "No" 327 value: "No"
326 }, 328 },
327 { text: "Occasion", value: "occasion", sortable: false, align: "center" }, 329 { text: "Occasion", value: "occasion", sortable: false, align: "center" },
328 { 330 {
329 text: "Date Of Holiday", 331 text: "Date Of Holiday",
330 value: "dateOfHoliday", 332 value: "dateOfHoliday",
331 sortable: false, 333 sortable: false,
332 align: "center" 334 align: "center"
333 }, 335 },
334 { text: "Action", value: "", sortable: false, align: "center" } 336 { text: "Action", value: "", sortable: false, align: "center" }
335 ], 337 ],
336 desserts: [], 338 desserts: [],
337 editedIndex: -1, 339 editedIndex: -1,
338 addHoliday: {}, 340 addHoliday: {},
339 editedItem: {} 341 editedItem: {}
340 }), 342 }),
341 methods: { 343 methods: {
342 dates: function(date) { 344 dates: function(date) {
343 return moment(date).format("MMMM DD, YYYY"); 345 return moment(date).format("MMMM DD, YYYY");
344 }, 346 },
345 getHolidays() { 347 getHolidays() {
346 this.showLoader = true; 348 this.showLoader = true;
347 var token = this.$store.state.token; 349 var token = this.$store.state.token;
348 http() 350 http()
349 .get("/getHolidaysList", { 351 .get("/getHolidaysList", {
350 headers: { Authorization: "Bearer " + token } 352 headers: { Authorization: "Bearer " + token }
351 }) 353 })
352 .then(response => { 354 .then(response => {
353 this.desserts = response.data.data; 355 this.desserts = response.data.data;
354 this.showLoader = false; 356 this.showLoader = false;
355 }) 357 })
356 .catch(err => { 358 .catch(err => {
357 // console.log("err====>", err); 359 // console.log("err====>", err);
358 this.showLoader = false; 360 this.showLoader = false;
359 if (error.response.status === 401) { 361 if (error.response.status === 401) {
360 this.$router.replace({ path: "/" }); 362 this.$router.replace({ path: "/" });
361 this.$store.dispatch("setToken", null); 363 this.$store.dispatch("setToken", null);
362 this.$store.dispatch("Id", null); 364 this.$store.dispatch("Id", null);
363 } 365 }
364 }); 366 });
365 }, 367 },
366 editItem(item) { 368 editItem(item) {
367 this.editedIndex = this.desserts.indexOf(item); 369 this.editedIndex = this.desserts.indexOf(item);
368 this.editedItem = Object.assign({}, item); 370 this.editedItem = Object.assign({}, item);
369 this.editedItem.holidayId = item._id; 371 this.editedItem.holidayId = item._id;
370 this.dialog = true; 372 this.dialog = true;
371 }, 373 },
372 profile(item) { 374 profile(item) {
373 this.editedIndex = this.desserts.indexOf(item); 375 this.editedIndex = this.desserts.indexOf(item);
374 this.editedItem = Object.assign({}, item); 376 this.editedItem = Object.assign({}, item);
375 this.dialog1 = true; 377 this.dialog1 = true;
376 }, 378 },
377 379
378 deleteItem(item) { 380 deleteItem(item) {
379 let deleteHoliday = { 381 let deleteHoliday = {
380 holidayId: item._id 382 holidayId: item._id
381 }; 383 };
382 http() 384 http()
383 .delete( 385 .delete(
384 "/deleteHoliday", 386 "/deleteHoliday",
385 confirm("Are you sure you want to delete this?") && { 387 confirm("Are you sure you want to delete this?") && {
386 params: deleteHoliday 388 params: deleteHoliday
387 } 389 }
388 ) 390 )
389 .then(response => { 391 .then(response => {
390 this.snackbar = true; 392 this.snackbar = true;
391 this.text = response.data.message; 393 this.text = response.data.message;
392 this.getHolidays(); 394 this.getHolidays();
393 }) 395 })
394 .catch(error => { 396 .catch(error => {
395 console.log(error); 397 console.log(error);
396 }); 398 });
397 }, 399 },
398 activeTab(type) { 400 activeTab(type) {
399 switch (type) { 401 switch (type) {
400 case "existing": 402 case "existing":
401 this.newActive = false; 403 this.newActive = false;
402 this.isActive = true; 404 this.isActive = true;
403 break; 405 break;
404 406
405 default: 407 default:
406 this.newActive = true; 408 this.newActive = true;
407 this.isActive = false; 409 this.isActive = false;
408 break; 410 break;
409 } 411 }
410 }, 412 },
411 close() { 413 close() {
412 this.dialog = false; 414 this.dialog = false;
413 setTimeout(() => { 415 setTimeout(() => {
414 this.editedItem = Object.assign({}, this.defaultItem); 416 this.editedItem = Object.assign({}, this.defaultItem);
415 this.editedIndex = -1; 417 this.editedIndex = -1;
416 }, 300); 418 }, 300);
417 }, 419 },
418 close1() { 420 close1() {
419 this.dialog1 = false; 421 this.dialog1 = false;
420 }, 422 },
421 submit() { 423 submit() {
422 if (this.$refs.form.validate()) { 424 if (this.$refs.form.validate()) {
423 this.loading = true; 425 this.loading = true;
424 http() 426 http()
425 .post("/createHoliday", this.addHoliday) 427 .post("/createHoliday", this.addHoliday)
426 .then(response => { 428 .then(response => {
427 this.snackbar = true; 429 this.snackbar = true;
428 this.text = response.data.message; 430 this.text = response.data.message;
429 this.getHolidays(); 431 this.getHolidays();
430 this.clear(); 432 this.clear();
431 this.loading = false; 433 this.loading = false;
432 }) 434 })
433 .catch(error => { 435 .catch(error => {
434 // console.log(error); 436 // console.log(error);
435 if ((this.snackbar = true)) { 437 if ((this.snackbar = true)) {
436 this.text = error.response.data.message; 438 this.text = error.response.data.message;
437 } 439 }
438 this.loading = false; 440 this.loading = false;
439 }); 441 });
440 } 442 }
441 }, 443 },
442 clear() { 444 clear() {
443 this.$refs.form.reset(); 445 this.$refs.form.reset();
444 }, 446 },
445 save() { 447 save() {
446 http() 448 http()
447 .put("/updateHoliday", this.editedItem) 449 .put("/updateHoliday", this.editedItem)
448 .then(response => { 450 .then(response => {
449 if ((this.snackbar = true)) { 451 if ((this.snackbar = true)) {
450 this.text = response.data.message; 452 this.text = response.data.message;
451 } 453 }
452 this.getHolidays(); 454 this.getHolidays();
453 }) 455 })
454 .catch(error => { 456 .catch(error => {
455 // console.log(error); 457 // console.log(error);
456 }); 458 });
457 this.close(); 459 this.close();
458 } 460 }
459 }, 461 },
460 mounted() { 462 mounted() {
461 this.getHolidays(); 463 this.getHolidays();
462 }, 464 },
463 created() { 465 created() {
464 this.$root.$on("app:search", search => { 466 this.$root.$on("app:search", search => {
465 this.search = search; 467 this.search = search;
466 }); 468 });
467 }, 469 },
468 beforeDestroy() { 470 beforeDestroy() {
469 // dont forget to remove the listener 471 // dont forget to remove the listener
470 this.$root.$off("app:search"); 472 this.$root.$off("app:search");
471 } 473 }
472 }; 474 };
473 </script> 475 </script>
474 <style scoped> 476 <style scoped>
475 #td { 477 #td {
476 max-width: 200px; 478 max-width: 200px;
477 } 479 }
478 .active { 480 .active {
479 background-color: black; 481 background-color: black;
480 color: white !important; 482 color: white !important;
481 } 483 }
482 .activebtn { 484 .activebtn {
483 color: black !important; 485 color: black !important;
484 } 486 }
485 </style> 487 </style>