viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit d58cc93a5f4c517ddb92c60b9580351788d94a9d

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

working uplaod date in edit holiday

Showing 2 changed files with 2 additions and 2 deletions   Show diff stats
src/pages/Event/event.vue
Diff comments   View file @d58cc93
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-tabs grow slider-color="gary"> 3 <v-tabs grow slider-color="gary">
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-container fluid> 41 <v-container fluid>
42 <v-flex xs12 sm12> 42 <v-flex xs12 sm12>
43 <v-layout> 43 <v-layout>
44 <v-flex xs4 class="pt-4 subheading"> 44 <v-flex xs4 class="pt-4 subheading">
45 <label class="right">Title:</label> 45 <label class="right">Title:</label>
46 </v-flex> 46 </v-flex>
47 <v-flex xs8 sm5 class="ml-3"> 47 <v-flex xs8 sm5 class="ml-3">
48 <v-text-field 48 <v-text-field
49 v-model="editedItem.title" 49 v-model="editedItem.title"
50 placeholder="fill your Title" 50 placeholder="fill your Title"
51 name="name" 51 name="name"
52 type="text" 52 type="text"
53 ></v-text-field> 53 ></v-text-field>
54 </v-flex> 54 </v-flex>
55 </v-layout> 55 </v-layout>
56 </v-flex> 56 </v-flex>
57 <v-flex xs12 sm12> 57 <v-flex xs12 sm12>
58 <v-layout> 58 <v-layout>
59 <v-flex xs4 class="pt-4 subheading"> 59 <v-flex xs4 class="pt-4 subheading">
60 <label class="right">Date:</label> 60 <label class="right">Date:</label>
61 </v-flex> 61 </v-flex>
62 <v-flex xs8 sm5 class="ml-3"> 62 <v-flex xs8 sm5 class="ml-3">
63 <v-menu 63 <v-menu
64 ref="menu" 64 ref="menu"
65 :close-on-content-click="false" 65 :close-on-content-click="false"
66 v-model="menu" 66 v-model="menu"
67 :nudge-right="40" 67 :nudge-right="40"
68 lazy 68 lazy
69 transition="scale-transition" 69 transition="scale-transition"
70 offset-y 70 offset-y
71 full-width 71 full-width
72 min-width="290px" 72 min-width="290px"
73 > 73 >
74 <v-text-field 74 <v-text-field
75 slot="activator" 75 slot="activator"
76 :rules="dateRules" 76 :rules="dateRules"
77 v-model="editedItem.dateOfEvent" 77 v-model="editedItem.dateOfEvent"
78 placeholder="Select date" 78 placeholder="Select date"
79 ></v-text-field> 79 ></v-text-field>
80 <v-date-picker 80 <v-date-picker
81 color="info" 81 color="info"
82 ref="picker" 82 ref="picker"
83 v-model="editedItem.dateOfEvent" 83 v-model="editedItem.dateOfEvent"
84 @input="$refs.menu.save(editedItem.dateOfEvent)" 84 @input="$refs.menu.save(editedItem.dateOfEvent)"
85 ></v-date-picker> 85 ></v-date-picker>
86 </v-menu> 86 </v-menu>
87 </v-flex> 87 </v-flex>
88 </v-layout> 88 </v-layout>
89 </v-flex> 89 </v-flex>
90 <v-flex xs12 sm12> 90 <v-flex xs12 sm12>
91 <v-layout> 91 <v-layout>
92 <v-flex xs4 class="pt-4 subheading"> 92 <v-flex xs4 class="pt-4 subheading">
93 <label class="right">Description:</label> 93 <label class="right">Description:</label>
94 </v-flex> 94 </v-flex>
95 <v-flex xs8 sm5 class="ml-3"> 95 <v-flex xs8 sm5 class="ml-3">
96 <v-text-field 96 <v-text-field
97 placeholder="fill your Description" 97 placeholder="fill your Description"
98 v-model="editedItem.description" 98 v-model="editedItem.description"
99 type="text" 99 type="text"
100 ></v-text-field> 100 ></v-text-field>
101 </v-flex> 101 </v-flex>
102 </v-layout> 102 </v-layout>
103 </v-flex> 103 </v-flex>
104 <v-layout> 104 <v-layout>
105 <v-flex xs12 sm10 offset-sm1> 105 <v-flex xs12 sm10 offset-sm1>
106 <v-card-actions> 106 <v-card-actions>
107 <v-btn round dark @click.native="close">Cancel</v-btn> 107 <v-btn round dark @click.native="close">Cancel</v-btn>
108 <v-spacer></v-spacer> 108 <v-spacer></v-spacer>
109 <v-btn round dark @click="save">Save</v-btn> 109 <v-btn round dark @click="save">Save</v-btn>
110 </v-card-actions> 110 </v-card-actions>
111 </v-flex> 111 </v-flex>
112 </v-layout> 112 </v-layout>
113 </v-container> 113 </v-container>
114 </v-card> 114 </v-card>
115 </v-flex> 115 </v-flex>
116 </v-dialog> 116 </v-dialog>
117 117
118 <!-- ****** PROFILE VIEW EVENT DEATILS ****** --> 118 <!-- ****** PROFILE VIEW EVENT DEATILS ****** -->
119 119
120 <v-dialog v-model="dialog1" max-width="700px"> 120 <v-dialog v-model="dialog1" max-width="700px">
121 <v-toolbar color="white"> 121 <v-toolbar color="v-toolbar">
122 <v-spacer></v-spacer> 122 <v-spacer></v-spacer>
123 <v-toolbar-title> 123 <v-toolbar-title>
124 <h3>Event</h3> 124 <h3>Event</h3>
125 </v-toolbar-title> 125 </v-toolbar-title>
126 <v-spacer></v-spacer> 126 <v-spacer></v-spacer>
127 <v-icon @click="close1">close</v-icon> 127 <v-icon @click="close1">close</v-icon>
128 </v-toolbar> 128 </v-toolbar>
129 <v-card> 129 <v-card>
130 <v-card-text> 130 <v-card-text>
131 <v-container grid-list-md> 131 <v-container grid-list-md>
132 <v-layout wrap> 132 <v-layout wrap>
133 <v-flex> 133 <v-flex>
134 <v-layout> 134 <v-layout>
135 <v-flex xs5 sm6> 135 <v-flex xs5 sm6>
136 <h5 class="right my-1"> 136 <h5 class="right my-1">
137 <b>Title:</b> 137 <b>Title:</b>
138 </h5> 138 </h5>
139 </v-flex> 139 </v-flex>
140 <v-flex sm6 xs8> 140 <v-flex sm6 xs8>
141 <h5 class="my-1">{{ editedItem.title }}</h5> 141 <h5 class="my-1">{{ editedItem.title }}</h5>
142 </v-flex> 142 </v-flex>
143 </v-layout> 143 </v-layout>
144 <v-layout> 144 <v-layout>
145 <v-flex xs5 sm6> 145 <v-flex xs5 sm6>
146 <h5 class="right my-1"> 146 <h5 class="right my-1">
147 <b>Date:</b> 147 <b>Date:</b>
148 </h5> 148 </h5>
149 </v-flex> 149 </v-flex>
150 <v-flex sm6 xs8> 150 <v-flex sm6 xs8>
151 <h5 class="my-1">{{ dates(editedItem.dateOfEvent) }}</h5> 151 <h5 class="my-1">{{ dates(editedItem.dateOfEvent) }}</h5>
152 </v-flex> 152 </v-flex>
153 </v-layout> 153 </v-layout>
154 <v-layout> 154 <v-layout>
155 <v-flex xs5 sm6> 155 <v-flex xs5 sm6>
156 <h5 class="right my-1"> 156 <h5 class="right my-1">
157 <b>Description:</b> 157 <b>Description:</b>
158 </h5> 158 </h5>
159 </v-flex> 159 </v-flex>
160 <v-flex sm6 xs8> 160 <v-flex sm6 xs8>
161 <h5 class="my-1">{{ editedItem.description }}</h5> 161 <h5 class="my-1">{{ editedItem.description }}</h5>
162 </v-flex> 162 </v-flex>
163 </v-layout> 163 </v-layout>
164 </v-flex> 164 </v-flex>
165 </v-layout> 165 </v-layout>
166 </v-container> 166 </v-container>
167 </v-card-text> 167 </v-card-text>
168 </v-card> 168 </v-card>
169 </v-dialog> 169 </v-dialog>
170 <v-snackbar 170 <v-snackbar
171 :timeout="timeout" 171 :timeout="timeout"
172 :top="y === 'top'" 172 :top="y === 'top'"
173 :right="x === 'right'" 173 :right="x === 'right'"
174 :vertical="mode === 'vertical'" 174 :vertical="mode === 'vertical'"
175 v-model="snackbar" 175 v-model="snackbar"
176 color="success" 176 color="success"
177 >{{ text }}</v-snackbar> 177 >{{ text }}</v-snackbar>
178 178
179 <!-- ****** EXISTING-USERS EVENT TABLE ****** --> 179 <!-- ****** EXISTING-USERS EVENT TABLE ****** -->
180 180
181 <v-data-table 181 <v-data-table
182 :headers="headers" 182 :headers="headers"
183 :items="desserts" 183 :items="desserts"
184 :pagination.sync="pagination" 184 :pagination.sync="pagination"
185 :search="search" 185 :search="search"
186 > 186 >
187 <template slot="items" slot-scope="props"> 187 <template slot="items" slot-scope="props">
188 <td id="td" class="text-xs-center">{{ props.index + 1}}</td> 188 <td id="td" class="text-xs-center">{{ props.index + 1}}</td>
189 <td id="td" class="text-xs-center">{{ props.item.title}}</td> 189 <td id="td" class="text-xs-center">{{ props.item.title}}</td>
190 <td id="td" class="text-xs-center">{{ dates(props.item.dateOfEvent)}}</td> 190 <td id="td" class="text-xs-center">{{ dates(props.item.dateOfEvent)}}</td>
191 <td id="td" class="text-xs-center">{{ props.item.description}}</td> 191 <td id="td" class="text-xs-center">{{ props.item.description}}</td>
192 192
193 <td id="td" class="text-xs-center"> 193 <td id="td" class="text-xs-center">
194 <span> 194 <span>
195 <v-tooltip top> 195 <v-tooltip top>
196 <img 196 <img
197 slot="activator" 197 slot="activator"
198 style="cursor:pointer; width:25px; height:18px; " 198 style="cursor:pointer; width:25px; height:18px; "
199 class="mr5" 199 class="mr5"
200 @click="profile(props.item)" 200 @click="profile(props.item)"
201 src="/static/icon/eye1.png" 201 src="/static/icon/eye1.png"
202 /> 202 />
203 <span>View</span> 203 <span>View</span>
204 </v-tooltip> 204 </v-tooltip>
205 <v-tooltip top> 205 <v-tooltip top>
206 <img 206 <img
207 slot="activator" 207 slot="activator"
208 style="cursor:pointer; width:20px; height:18px; " 208 style="cursor:pointer; width:20px; height:18px; "
209 class="mr5" 209 class="mr5"
210 @click="editItem(props.item)" 210 @click="editItem(props.item)"
211 src="/static/icon/edit1.png" 211 src="/static/icon/edit1.png"
212 /> 212 />
213 <span>Edit</span> 213 <span>Edit</span>
214 </v-tooltip> 214 </v-tooltip>
215 <v-tooltip top> 215 <v-tooltip top>
216 <img 216 <img
217 slot="activator" 217 slot="activator"
218 style="cursor:pointer; width:20px; height:20px; " 218 style="cursor:pointer; width:20px; height:20px; "
219 class="mr5" 219 class="mr5"
220 @click="deleteItem(props.item)" 220 @click="deleteItem(props.item)"
221 src="/static/icon/delete1.png" 221 src="/static/icon/delete1.png"
222 /> 222 />
223 <span>Delete</span> 223 <span>Delete</span>
224 </v-tooltip> 224 </v-tooltip>
225 </span> 225 </span>
226 </td> 226 </td>
227 </template> 227 </template>
228 <v-alert 228 <v-alert
229 slot="no-results" 229 slot="no-results"
230 :value="true" 230 :value="true"
231 color="error" 231 color="error"
232 icon="warning" 232 icon="warning"
233 >Your search for "{{ search }}" found no results.</v-alert> 233 >Your search for "{{ search }}" found no results.</v-alert>
234 </v-data-table> 234 </v-data-table>
235 </v-tab-item> 235 </v-tab-item>
236 236
237 <!-- ****** ADD MULTIPLE EVENT ****** --> 237 <!-- ****** ADD MULTIPLE EVENT ****** -->
238 238
239 <v-tab-item> 239 <v-tab-item>
240 <v-container> 240 <v-container>
241 <v-snackbar 241 <v-snackbar
242 :timeout="timeout" 242 :timeout="timeout"
243 :top="y === 'top'" 243 :top="y === 'top'"
244 :right="x === 'right'" 244 :right="x === 'right'"
245 :vertical="mode === 'vertical'" 245 :vertical="mode === 'vertical'"
246 v-model="snackbar" 246 v-model="snackbar"
247 color="success" 247 color="success"
248 >{{ text }}</v-snackbar> 248 >{{ text }}</v-snackbar>
249 <v-flex xs12 sm12 md8 offset-md2 class="top"> 249 <v-flex xs12 sm12 md8 offset-md2 class="top">
250 <v-card flat> 250 <v-card flat>
251 <v-form ref="form" v-model="valid" lazy-validation> 251 <v-form ref="form" v-model="valid" lazy-validation>
252 <v-container fluid> 252 <v-container fluid>
253 <v-flex xs12> 253 <v-flex xs12>
254 <v-layout> 254 <v-layout>
255 <v-flex xs4 class="pt-4 subheading"> 255 <v-flex xs4 class="pt-4 subheading">
256 <label class="right">Title:</label> 256 <label class="right">Title:</label>
257 </v-flex> 257 </v-flex>
258 <v-flex xs8 sm6 class="ml-3"> 258 <v-flex xs8 sm6 class="ml-3">
259 <v-text-field 259 <v-text-field
260 v-model="addEvent.title" 260 v-model="addEvent.title"
261 placeholder="fill your Title" 261 placeholder="fill your Title"
262 type="text" 262 type="text"
263 :rules="titleRules" 263 :rules="titleRules"
264 required 264 required
265 ></v-text-field> 265 ></v-text-field>
266 </v-flex> 266 </v-flex>
267 </v-layout> 267 </v-layout>
268 </v-flex> 268 </v-flex>
269 <v-flex xs12> 269 <v-flex xs12>
270 <v-layout> 270 <v-layout>
271 <v-flex xs4 class="pt-4 subheading"> 271 <v-flex xs4 class="pt-4 subheading">
272 <label class="right">Date:</label> 272 <label class="right">Date:</label>
273 </v-flex> 273 </v-flex>
274 <v-flex xs8 sm6 class="ml-3"> 274 <v-flex xs8 sm6 class="ml-3">
275 <v-menu 275 <v-menu
276 ref="menu1" 276 ref="menu1"
277 :close-on-content-click="false" 277 :close-on-content-click="false"
278 v-model="menu1" 278 v-model="menu1"
279 :nudge-right="40" 279 :nudge-right="40"
280 :return-value.sync="addEvent.dateOfEvent" 280 :return-value.sync="addEvent.dateOfEvent"
281 app 281 app
282 lazy 282 lazy
283 transition="scale-transition" 283 transition="scale-transition"
284 offset-y 284 offset-y
285 full-width 285 full-width
286 min-width="290px" 286 min-width="290px"
287 > 287 >
288 <v-text-field 288 <v-text-field
289 slot="activator" 289 slot="activator"
290 :rules="dateRules" 290 :rules="dateRules"
291 v-model="addEvent.dateOfEvent" 291 v-model="addEvent.dateOfEvent"
292 append-icon="event" 292 append-icon="event"
293 placeholder="Select date" 293 placeholder="Select date"
294 ></v-text-field> 294 ></v-text-field>
295 <v-date-picker 295 <v-date-picker
296 color="info" 296 color="info"
297 v-model="addEvent.dateOfEvent" 297 v-model="addEvent.dateOfEvent"
298 @input="$refs.menu1.save(addEvent.dateOfEvent)" 298 @input="$refs.menu1.save(addEvent.dateOfEvent)"
299 ></v-date-picker> 299 ></v-date-picker>
300 </v-menu> 300 </v-menu>
301 </v-flex> 301 </v-flex>
302 </v-layout> 302 </v-layout>
303 </v-flex> 303 </v-flex>
304 <v-flex xs12> 304 <v-flex xs12>
305 <v-layout> 305 <v-layout>
306 <v-flex xs4 class="pt-4 subheading"> 306 <v-flex xs4 class="pt-4 subheading">
307 <label class="right">Description:</label> 307 <label class="right">Description:</label>
308 </v-flex> 308 </v-flex>
309 <v-flex xs8 sm6 class="ml-3"> 309 <v-flex xs8 sm6 class="ml-3">
310 <v-text-field 310 <v-text-field
311 placeholder="fill your Description" 311 placeholder="fill your Description"
312 :rules="descriptionRules" 312 :rules="descriptionRules"
313 v-model="addEvent.description" 313 v-model="addEvent.description"
314 type="text" 314 type="text"
315 required 315 required
316 ></v-text-field> 316 ></v-text-field>
317 </v-flex> 317 </v-flex>
318 </v-layout> 318 </v-layout>
319 </v-flex> 319 </v-flex>
320 <v-layout> 320 <v-layout>
321 <v-flex xs12 sm9 offset-sm2> 321 <v-flex xs12 sm9 offset-sm2>
322 <v-layout> 322 <v-layout>
323 <v-flex xs6> 323 <v-flex xs6>
324 <v-btn @click="clear" round class="ml-3" dark>clear</v-btn> 324 <v-btn @click="clear" round class="ml-3" dark>clear</v-btn>
325 </v-flex> 325 </v-flex>
326 <v-flex xs6> 326 <v-flex xs6>
327 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn> 327 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn>
328 </v-flex> 328 </v-flex>
329 </v-layout> 329 </v-layout>
330 </v-flex> 330 </v-flex>
331 </v-layout> 331 </v-layout>
332 </v-container> 332 </v-container>
333 </v-form> 333 </v-form>
334 </v-card> 334 </v-card>
335 </v-flex> 335 </v-flex>
336 </v-container> 336 </v-container>
337 </v-tab-item> 337 </v-tab-item>
338 </v-tabs> 338 </v-tabs>
339 <div class="loader" v-if="showLoader"> 339 <div class="loader" v-if="showLoader">
340 <v-progress-circular indeterminate color="white"></v-progress-circular> 340 <v-progress-circular indeterminate color="white"></v-progress-circular>
341 </div> 341 </div>
342 </v-app> 342 </v-app>
343 </template> 343 </template>
344 344
345 <script> 345 <script>
346 import http from "@/Services/http.js"; 346 import http from "@/Services/http.js";
347 import Util from "@/util"; 347 import Util from "@/util";
348 import moment from "moment"; 348 import moment from "moment";
349 349
350 export default { 350 export default {
351 data: () => ({ 351 data: () => ({
352 snackbar: false, 352 snackbar: false,
353 y: "top", 353 y: "top",
354 x: "right", 354 x: "right",
355 mode: "", 355 mode: "",
356 timeout: 3000, 356 timeout: 3000,
357 text: "", 357 text: "",
358 loading: false, 358 loading: false,
359 date: null, 359 date: null,
360 search: "", 360 search: "",
361 showLoader: false, 361 showLoader: false,
362 dialog: false, 362 dialog: false,
363 dialog1: false, 363 dialog1: false,
364 valid: true, 364 valid: true,
365 isActive: true, 365 isActive: true,
366 newActive: false, 366 newActive: false,
367 pagination: { 367 pagination: {
368 rowsPerPage: 15 368 rowsPerPage: 15
369 }, 369 },
370 date: null, 370 date: null,
371 menu1: false, 371 menu1: false,
372 menu: false, 372 menu: false,
373 titleRules: [v => !!v || " Tilte is required"], 373 titleRules: [v => !!v || " Tilte is required"],
374 descriptionRules: [v => !!v || " Discription is required"], 374 descriptionRules: [v => !!v || " Discription is required"],
375 dateRules: [v => !!v || "Date is required"], 375 dateRules: [v => !!v || "Date is required"],
376 headers: [ 376 headers: [
377 { 377 {
378 text: "No", 378 text: "No",
379 align: "center", 379 align: "center",
380 sortable: false, 380 sortable: false,
381 value: "No" 381 value: "No"
382 }, 382 },
383 { text: "Title", value: "title", sortable: false, align: "center" }, 383 { text: "Title", value: "title", sortable: false, align: "center" },
384 { text: "Date", value: "date", sortable: false, align: "center" }, 384 { text: "Date", value: "date", sortable: false, align: "center" },
385 385
386 { 386 {
387 text: "Description", 387 text: "Description",
388 value: "description", 388 value: "description",
389 sortable: false, 389 sortable: false,
390 align: "center" 390 align: "center"
391 }, 391 },
392 { text: "Action", value: "", sortable: false, align: "center" } 392 { text: "Action", value: "", sortable: false, align: "center" }
393 ], 393 ],
394 desserts: [], 394 desserts: [],
395 editedIndex: -1, 395 editedIndex: -1,
396 addEvent: {}, 396 addEvent: {},
397 editedItem: {} 397 editedItem: {}
398 }), 398 }),
399 methods: { 399 methods: {
400 dates: function(date) { 400 dates: function(date) {
401 return moment(date).format("MMMM DD, YYYY"); 401 return moment(date).format("MMMM DD, YYYY");
402 }, 402 },
403 getEvents() { 403 getEvents() {
404 this.showLoader = true; 404 this.showLoader = true;
405 var token = this.$store.state.token; 405 var token = this.$store.state.token;
406 http() 406 http()
407 .get("/getSchoolEventsList", { 407 .get("/getSchoolEventsList", {
408 headers: { Authorization: "Bearer " + token } 408 headers: { Authorization: "Bearer " + token }
409 }) 409 })
410 .then(response => { 410 .then(response => {
411 this.desserts = response.data.data; 411 this.desserts = response.data.data;
412 this.showLoader = false; 412 this.showLoader = false;
413 }) 413 })
414 .catch(error => { 414 .catch(error => {
415 // console.log("err====>", err); 415 // console.log("err====>", err);
416 this.showLoader = false; 416 this.showLoader = false;
417 if (error.response.status === 401) { 417 if (error.response.status === 401) {
418 this.$router.replace({ path: "/" }); 418 this.$router.replace({ path: "/" });
419 this.$store.dispatch("setToken", null); 419 this.$store.dispatch("setToken", null);
420 this.$store.dispatch("Id", null); 420 this.$store.dispatch("Id", null);
421 } 421 }
422 }); 422 });
423 }, 423 },
424 editItem(item) { 424 editItem(item) {
425 this.editedIndex = this.desserts.indexOf(item); 425 this.editedIndex = this.desserts.indexOf(item);
426 this.editedItem = Object.assign({}, item); 426 this.editedItem = Object.assign({}, item);
427 this.editedItem.schoolEventId = item._id; 427 this.editedItem.schoolEventId = item._id;
428 this.dialog = true; 428 this.dialog = true;
429 }, 429 },
430 profile(item) { 430 profile(item) {
431 this.editedIndex = this.desserts.indexOf(item); 431 this.editedIndex = this.desserts.indexOf(item);
432 this.editedItem = Object.assign({}, item); 432 this.editedItem = Object.assign({}, item);
433 this.dialog1 = true; 433 this.dialog1 = true;
434 }, 434 },
435 435
436 deleteItem(item) { 436 deleteItem(item) {
437 let deleteEvent = { 437 let deleteEvent = {
438 schoolEventId: item._id 438 schoolEventId: item._id
439 }; 439 };
440 http() 440 http()
441 .delete( 441 .delete(
442 "/deleteSchoolEvent", 442 "/deleteSchoolEvent",
443 confirm("Are you sure you want to delete this?") && { 443 confirm("Are you sure you want to delete this?") && {
444 params: deleteEvent 444 params: deleteEvent
445 } 445 }
446 ) 446 )
447 .then(response => { 447 .then(response => {
448 if ((this.snackbar = true)) { 448 if ((this.snackbar = true)) {
449 this.text = response.data.message; 449 this.text = response.data.message;
450 } 450 }
451 this.getEvents(); 451 this.getEvents();
452 }) 452 })
453 .catch(error => { 453 .catch(error => {
454 console.log(error); 454 console.log(error);
455 }); 455 });
456 }, 456 },
457 activeTab(type) { 457 activeTab(type) {
458 switch (type) { 458 switch (type) {
459 case "existing": 459 case "existing":
460 this.newActive = false; 460 this.newActive = false;
461 this.isActive = true; 461 this.isActive = true;
462 break; 462 break;
463 463
464 default: 464 default:
465 this.newActive = true; 465 this.newActive = true;
466 this.isActive = false; 466 this.isActive = false;
467 break; 467 break;
468 } 468 }
469 }, 469 },
470 close() { 470 close() {
471 this.dialog = false; 471 this.dialog = false;
472 setTimeout(() => { 472 setTimeout(() => {
473 this.editedItem = Object.assign({}, this.defaultItem); 473 this.editedItem = Object.assign({}, this.defaultItem);
474 this.editedIndex = -1; 474 this.editedIndex = -1;
475 }, 300); 475 }, 300);
476 }, 476 },
477 close1() { 477 close1() {
478 this.dialog1 = false; 478 this.dialog1 = false;
479 }, 479 },
480 submit() { 480 submit() {
481 if (this.$refs.form.validate()) { 481 if (this.$refs.form.validate()) {
482 this.loading = true; 482 this.loading = true;
483 http() 483 http()
484 .post("/createSchoolEvent", this.addEvent) 484 .post("/createSchoolEvent", this.addEvent)
485 .then(response => { 485 .then(response => {
486 if ((this.snackbar = true)) { 486 if ((this.snackbar = true)) {
487 this.text = response.data.message; 487 this.text = response.data.message;
488 } 488 }
489 this.getEvents(); 489 this.getEvents();
490 this.clear(); 490 this.clear();
491 this.loading = false; 491 this.loading = false;
492 }) 492 })
493 .catch(error => { 493 .catch(error => {
494 if ((this.snackbar = true)) { 494 if ((this.snackbar = true)) {
495 this.text = error.response.data.message; 495 this.text = error.response.data.message;
496 } 496 }
497 this.loading = false; 497 this.loading = false;
498 }); 498 });
499 } 499 }
500 }, 500 },
501 clear() { 501 clear() {
502 this.$refs.form.reset(); 502 this.$refs.form.reset();
503 }, 503 },
504 save() { 504 save() {
505 http() 505 http()
506 .put("/updateSchoolEvent", this.editedItem) 506 .put("/updateSchoolEvent", this.editedItem)
507 .then(response => { 507 .then(response => {
508 this.snackbar = true; 508 this.snackbar = true;
509 this.text = response.data.message; 509 this.text = response.data.message;
510 this.getEvents(); 510 this.getEvents();
511 this.close(); 511 this.close();
512 }) 512 })
513 .catch(error => { 513 .catch(error => {
514 // console.log(error); 514 // console.log(error);
515 }); 515 });
516 } 516 }
517 }, 517 },
518 mounted() { 518 mounted() {
519 this.getEvents(); 519 this.getEvents();
520 }, 520 },
521 created() { 521 created() {
522 this.$root.$on("app:search", search => { 522 this.$root.$on("app:search", search => {
523 this.search = search; 523 this.search = search;
524 }); 524 });
525 }, 525 },
526 beforeDestroy() { 526 beforeDestroy() {
527 // dont forget to remove the listener 527 // dont forget to remove the listener
528 this.$root.$off("app:search"); 528 this.$root.$off("app:search");
529 } 529 }
530 }; 530 };
531 </script> 531 </script>
532 <style scoped> 532 <style scoped>
533 #td { 533 #td {
534 max-width: 200px; 534 max-width: 200px;
535 } 535 }
536 .active { 536 .active {
537 background-color: gray; 537 background-color: gray;
538 color: white !important; 538 color: white !important;
539 } 539 }
540 .activebtn { 540 .activebtn {
541 color: black !important; 541 color: black !important;
542 } 542 }
543 </style> 543 </style>
src/pages/Holiday/holiday.vue
Diff comments   View file @d58cc93
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <v-tabs grow slider-color="gray"> 3 <v-tabs grow slider-color="gray">
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 <!-- ****** EDIT HOLIDAY DATA ****** --> 20 <!-- ****** EDIT HOLIDAY DATA ****** -->
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-container fluid> 41 <v-container fluid>
42 <v-flex xs12 sm12> 42 <v-flex xs12 sm12>
43 <v-layout> 43 <v-layout>
44 <v-flex xs4 class="pt-4 subheading"> 44 <v-flex xs4 class="pt-4 subheading">
45 <label class="right">Occasion:</label> 45 <label class="right">Occasion:</label>
46 </v-flex> 46 </v-flex>
47 <v-flex xs8 sm5 class="ml-3"> 47 <v-flex xs8 sm5 class="ml-3">
48 <v-text-field 48 <v-text-field
49 v-model="editedItem.occasion" 49 v-model="editedItem.occasion"
50 placeholder="fill your Occasion" 50 placeholder="fill your Occasion"
51 name="name" 51 name="name"
52 type="text" 52 type="text"
53 ></v-text-field> 53 ></v-text-field>
54 </v-flex> 54 </v-flex>
55 </v-layout> 55 </v-layout>
56 </v-flex> 56 </v-flex>
57 <v-flex xs12 sm12> 57 <v-flex xs12 sm12>
58 <v-layout> 58 <v-layout>
59 <v-flex xs4 class="pt-4 subheading"> 59 <v-flex xs4 class="pt-4 subheading">
60 <label class="right">Date:</label> 60 <label class="right">Date:</label>
61 </v-flex> 61 </v-flex>
62 <v-flex xs8 sm5 class="ml-3"> 62 <v-flex xs8 sm5 class="ml-3">
63 <v-menu 63 <v-menu
64 ref="menu" 64 ref="menu"
65 :close-on-content-click="false" 65 :close-on-content-click="false"
66 :return-value.sync="editedItem.dateOfHoliday" 66 :return-value.sync="editedItem.dateOfHoliday"
67 v-model="menu" 67 v-model="menu"
68 :nudge-right="40" 68 :nudge-right="40"
69 lazy 69 lazy
70 transition="scale-transition" 70 transition="scale-transition"
71 offset-y 71 offset-y
72 full-width 72 full-width
73 min-width="290px" 73 min-width="290px"
74 > 74 >
75 <v-text-field 75 <v-text-field
76 slot="activator" 76 slot="activator"
77 :rules="dateRules" 77 :rules="dateRules"
78 v-model="editedItem.dateOfHoliday" 78 v-model="editedItem.dateOfHoliday"
79 append-icon="event" 79 append-icon="event"
80 placeholder="Select date" 80 placeholder="Select date"
81 ></v-text-field> 81 ></v-text-field>
82 <v-date-picker 82 <v-date-picker
83 ref="picker" 83 ref="picker"
84 color="info" 84 color="info"
85 v-model="editedItem.dateOfHoliday" 85 v-model="editedItem.dateOfHoliday"
86 @input="menu = false" 86 @input="$refs.menu.save(editedItem.dateOfHoliday)"
87 ></v-date-picker> 87 ></v-date-picker>
88 </v-menu> 88 </v-menu>
89 </v-flex> 89 </v-flex>
90 </v-layout> 90 </v-layout>
91 </v-flex> 91 </v-flex>
92 <v-layout> 92 <v-layout>
93 <v-flex xs12 sm10 offset-sm1> 93 <v-flex xs12 sm10 offset-sm1>
94 <v-card-actions> 94 <v-card-actions>
95 <v-btn round dark @click.native="close">Cancel</v-btn> 95 <v-btn round dark @click.native="close">Cancel</v-btn>
96 <v-spacer></v-spacer> 96 <v-spacer></v-spacer>
97 <v-btn round dark @click="save">Save</v-btn> 97 <v-btn round dark @click="save">Save</v-btn>
98 </v-card-actions> 98 </v-card-actions>
99 </v-flex> 99 </v-flex>
100 </v-layout> 100 </v-layout>
101 </v-container> 101 </v-container>
102 </v-card> 102 </v-card>
103 </v-flex> 103 </v-flex>
104 </v-dialog> 104 </v-dialog>
105 105
106 <!-- ****** PROFILE VIEW Holiday DEATILS ****** --> 106 <!-- ****** PROFILE VIEW Holiday DEATILS ****** -->
107 107
108 <v-dialog v-model="dialog1" max-width="500px"> 108 <v-dialog v-model="dialog1" max-width="500px">
109 <v-toolbar class="v-toolbar"> 109 <v-toolbar class="v-toolbar">
110 <v-spacer></v-spacer> 110 <v-spacer></v-spacer>
111 <v-toolbar-title> 111 <v-toolbar-title>
112 <h3>Holiday</h3> 112 <h3>Holiday</h3>
113 </v-toolbar-title> 113 </v-toolbar-title>
114 <v-spacer></v-spacer> 114 <v-spacer></v-spacer>
115 <v-icon @click="close1">close</v-icon> 115 <v-icon @click="close1">close</v-icon>
116 </v-toolbar> 116 </v-toolbar>
117 <v-card> 117 <v-card>
118 <v-card-text> 118 <v-card-text>
119 <v-container grid-list-md> 119 <v-container grid-list-md>
120 <v-layout wrap> 120 <v-layout wrap>
121 <v-flex> 121 <v-flex>
122 <v-layout> 122 <v-layout>
123 <v-flex xs4 sm6> 123 <v-flex xs4 sm6>
124 <h5 class="right my-1"> 124 <h5 class="right my-1">
125 <b>Occasion:</b> 125 <b>Occasion:</b>
126 </h5> 126 </h5>
127 </v-flex> 127 </v-flex>
128 <v-flex sm6 xs8> 128 <v-flex sm6 xs8>
129 <h5 class="my-1">{{ editedItem.occasion }}</h5> 129 <h5 class="my-1">{{ editedItem.occasion }}</h5>
130 </v-flex> 130 </v-flex>
131 </v-layout> 131 </v-layout>
132 <v-layout> 132 <v-layout>
133 <v-flex xs4 sm6> 133 <v-flex xs4 sm6>
134 <h5 class="right my-1"> 134 <h5 class="right my-1">
135 <b>Date:</b> 135 <b>Date:</b>
136 </h5> 136 </h5>
137 </v-flex> 137 </v-flex>
138 <v-flex sm6 xs8> 138 <v-flex sm6 xs8>
139 <h5 class="my-1">{{ editedItem.dateOfHoliday }}</h5> 139 <h5 class="my-1">{{ editedItem.dateOfHoliday }}</h5>
140 </v-flex> 140 </v-flex>
141 </v-layout> 141 </v-layout>
142 </v-flex> 142 </v-flex>
143 </v-layout> 143 </v-layout>
144 </v-container> 144 </v-container>
145 </v-card-text> 145 </v-card-text>
146 </v-card> 146 </v-card>
147 </v-dialog> 147 </v-dialog>
148 <v-snackbar 148 <v-snackbar
149 :timeout="timeout" 149 :timeout="timeout"
150 :top="y === 'top'" 150 :top="y === 'top'"
151 :right="x === 'right'" 151 :right="x === 'right'"
152 :vertical="mode === 'vertical'" 152 :vertical="mode === 'vertical'"
153 v-model="snackbar" 153 v-model="snackbar"
154 color="success" 154 color="success"
155 >{{ text }}</v-snackbar> 155 >{{ text }}</v-snackbar>
156 156
157 <!-- ****** EXISTING-USERS Holiday TABLE ****** --> 157 <!-- ****** EXISTING-USERS Holiday TABLE ****** -->
158 158
159 <v-data-table 159 <v-data-table
160 :headers="headers" 160 :headers="headers"
161 :items="desserts" 161 :items="desserts"
162 :pagination.sync="pagination" 162 :pagination.sync="pagination"
163 :search="search" 163 :search="search"
164 > 164 >
165 <template slot="items" slot-scope="props"> 165 <template slot="items" slot-scope="props">
166 <td id="td" class="text-xs-center">{{ props.index + 1}}</td> 166 <td id="td" class="text-xs-center">{{ props.index + 1}}</td>
167 <td id="td" class="text-xs-center">{{ props.item.occasion}}</td> 167 <td id="td" class="text-xs-center">{{ props.item.occasion}}</td>
168 <td id="td" class="text-xs-center">{{ dates(props.item.dateOfHoliday) }}</td> 168 <td id="td" class="text-xs-center">{{ dates(props.item.dateOfHoliday) }}</td>
169 169
170 <td id="td" class="text-xs-center"> 170 <td id="td" class="text-xs-center">
171 <span> 171 <span>
172 <v-tooltip top> 172 <v-tooltip top>
173 <img 173 <img
174 slot="activator" 174 slot="activator"
175 style="cursor:pointer; width:25px; height:18px; " 175 style="cursor:pointer; width:25px; height:18px; "
176 class="mr5" 176 class="mr5"
177 @click="profile(props.item)" 177 @click="profile(props.item)"
178 src="/static/icon/eye1.png" 178 src="/static/icon/eye1.png"
179 /> 179 />
180 <span>View</span> 180 <span>View</span>
181 </v-tooltip> 181 </v-tooltip>
182 <v-tooltip top> 182 <v-tooltip top>
183 <img 183 <img
184 slot="activator" 184 slot="activator"
185 style="cursor:pointer; width:20px; height:18px; " 185 style="cursor:pointer; width:20px; height:18px; "
186 class="mr5" 186 class="mr5"
187 @click="editItem(props.item)" 187 @click="editItem(props.item)"
188 src="/static/icon/edit1.png" 188 src="/static/icon/edit1.png"
189 /> 189 />
190 <span>Edit</span> 190 <span>Edit</span>
191 </v-tooltip> 191 </v-tooltip>
192 <v-tooltip top> 192 <v-tooltip top>
193 <img 193 <img
194 slot="activator" 194 slot="activator"
195 style="cursor:pointer; width:20px; height:20px; " 195 style="cursor:pointer; width:20px; height:20px; "
196 class="mr5" 196 class="mr5"
197 @click="deleteItem(props.item)" 197 @click="deleteItem(props.item)"
198 src="/static/icon/delete1.png" 198 src="/static/icon/delete1.png"
199 /> 199 />
200 <span>Delete</span> 200 <span>Delete</span>
201 </v-tooltip> 201 </v-tooltip>
202 </span> 202 </span>
203 </td> 203 </td>
204 </template> 204 </template>
205 <v-alert 205 <v-alert
206 slot="no-results" 206 slot="no-results"
207 :value="true" 207 :value="true"
208 color="error" 208 color="error"
209 icon="warning" 209 icon="warning"
210 >Your search for "{{ search }}" found no results.</v-alert> 210 >Your search for "{{ search }}" found no results.</v-alert>
211 </v-data-table> 211 </v-data-table>
212 </v-tab-item> 212 </v-tab-item>
213 213
214 <!-- ****** ADD MULTIPLE Holiday ****** --> 214 <!-- ****** ADD MULTIPLE Holiday ****** -->
215 215
216 <v-tab-item> 216 <v-tab-item>
217 <v-container> 217 <v-container>
218 <v-snackbar 218 <v-snackbar
219 :timeout="timeout" 219 :timeout="timeout"
220 :top="y === 'top'" 220 :top="y === 'top'"
221 :right="x === 'right'" 221 :right="x === 'right'"
222 :vertical="mode === 'vertical'" 222 :vertical="mode === 'vertical'"
223 v-model="snackbar" 223 v-model="snackbar"
224 color="success" 224 color="success"
225 >{{ text }}</v-snackbar> 225 >{{ text }}</v-snackbar>
226 <v-flex xs12 sm8 class="my-4" offset-sm2> 226 <v-flex xs12 sm8 class="my-4" offset-sm2>
227 <v-card flat> 227 <v-card flat>
228 <v-form ref="form" v-model="valid" lazy-validation> 228 <v-form ref="form" v-model="valid" lazy-validation>
229 <v-container fluid> 229 <v-container fluid>
230 <v-flex xs12> 230 <v-flex xs12>
231 <v-layout> 231 <v-layout>
232 <v-flex xs4 class="pt-4 subheading"> 232 <v-flex xs4 class="pt-4 subheading">
233 <label class="right">Occasion:</label> 233 <label class="right">Occasion:</label>
234 </v-flex> 234 </v-flex>
235 <v-flex xs8 sm4 class="ml-3"> 235 <v-flex xs8 sm4 class="ml-3">
236 <v-text-field 236 <v-text-field
237 v-model="addHoliday.occasion" 237 v-model="addHoliday.occasion"
238 placeholder="fill your Occasion" 238 placeholder="fill your Occasion"
239 type="text" 239 type="text"
240 :rules="occasionRules" 240 :rules="occasionRules"
241 required 241 required
242 ></v-text-field> 242 ></v-text-field>
243 </v-flex> 243 </v-flex>
244 </v-layout> 244 </v-layout>
245 </v-flex> 245 </v-flex>
246 <v-flex xs12> 246 <v-flex xs12>
247 <v-layout> 247 <v-layout>
248 <v-flex xs4 class="pt-4 subheading"> 248 <v-flex xs4 class="pt-4 subheading">
249 <label class="right">Date:</label> 249 <label class="right">Date:</label>
250 </v-flex> 250 </v-flex>
251 <v-flex xs8 sm4 class="ml-3"> 251 <v-flex xs8 sm4 class="ml-3">
252 <v-menu 252 <v-menu
253 ref="menu1" 253 ref="menu1"
254 :close-on-content-click="false" 254 :close-on-content-click="false"
255 v-model="menu1" 255 v-model="menu1"
256 :nudge-right="40" 256 :nudge-right="40"
257 :return-value.sync="addHoliday.dateOfHoliday" 257 :return-value.sync="addHoliday.dateOfHoliday"
258 lazy 258 lazy
259 transition="scale-transition" 259 transition="scale-transition"
260 offset-y 260 offset-y
261 full-width 261 full-width
262 min-width="290px" 262 min-width="290px"
263 > 263 >
264 <v-text-field 264 <v-text-field
265 slot="activator" 265 slot="activator"
266 :rules="dateRules" 266 :rules="dateRules"
267 v-model="addHoliday.dateOfHoliday" 267 v-model="addHoliday.dateOfHoliday"
268 append-icon="event" 268 append-icon="event"
269 label="Select date" 269 label="Select date"
270 ></v-text-field> 270 ></v-text-field>
271 <v-date-picker 271 <v-date-picker
272 ref="picker" 272 ref="picker"
273 color="info" 273 color="info"
274 v-model="addHoliday.dateOfHoliday" 274 v-model="addHoliday.dateOfHoliday"
275 @input="$refs.menu1.save(addHoliday.dateOfHoliday)" 275 @input="$refs.menu1.save(addHoliday.dateOfHoliday)"
276 ></v-date-picker> 276 ></v-date-picker>
277 </v-menu> 277 </v-menu>
278 </v-flex> 278 </v-flex>
279 </v-layout> 279 </v-layout>
280 </v-flex> 280 </v-flex>
281 <v-flex xs12 sm7 offset-sm2> 281 <v-flex xs12 sm7 offset-sm2>
282 <v-layout> 282 <v-layout>
283 <v-flex xs6> 283 <v-flex xs6>
284 <v-btn @click="clear" round class="ml-3" dark>clear</v-btn> 284 <v-btn @click="clear" round class="ml-3" dark>clear</v-btn>
285 </v-flex> 285 </v-flex>
286 <v-flex xs6> 286 <v-flex xs6>
287 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn> 287 <v-btn @click="submit" round dark :loading="loading" class="right">Add</v-btn>
288 </v-flex> 288 </v-flex>
289 </v-layout> 289 </v-layout>
290 </v-flex> 290 </v-flex>
291 </v-container> 291 </v-container>
292 </v-form> 292 </v-form>
293 </v-card> 293 </v-card>
294 </v-flex> 294 </v-flex>
295 </v-container> 295 </v-container>
296 </v-tab-item> 296 </v-tab-item>
297 </v-tabs> 297 </v-tabs>
298 <div class="loader" v-if="showLoader"> 298 <div class="loader" v-if="showLoader">
299 <v-progress-circular indeterminate color="white"></v-progress-circular> 299 <v-progress-circular indeterminate color="white"></v-progress-circular>
300 </div> 300 </div>
301 </v-app> 301 </v-app>
302 </template> 302 </template>
303 303
304 <script> 304 <script>
305 import http from "@/Services/http.js"; 305 import http from "@/Services/http.js";
306 import moment from "moment"; 306 import moment from "moment";
307 307
308 export default { 308 export default {
309 data: () => ({ 309 data: () => ({
310 snackbar: false, 310 snackbar: false,
311 y: "top", 311 y: "top",
312 x: "right", 312 x: "right",
313 mode: "", 313 mode: "",
314 timeout: 3000, 314 timeout: 3000,
315 text: "", 315 text: "",
316 loading: false, 316 loading: false,
317 date: null, 317 date: null,
318 search: "", 318 search: "",
319 showLoader: false, 319 showLoader: false,
320 dialog: false, 320 dialog: false,
321 dialog1: false, 321 dialog1: false,
322 valid: true, 322 valid: true,
323 isActive: true, 323 isActive: true,
324 newActive: false, 324 newActive: false,
325 pagination: { 325 pagination: {
326 rowsPerPage: 15 326 rowsPerPage: 15
327 }, 327 },
328 date: null, 328 date: null,
329 menu1: false, 329 menu1: false,
330 menu: false, 330 menu: false,
331 occasionRules: [v => !!v || "Occasion is required"], 331 occasionRules: [v => !!v || "Occasion is required"],
332 dateRules: [v => !!v || "Date is required"], 332 dateRules: [v => !!v || "Date is required"],
333 headers: [ 333 headers: [
334 { 334 {
335 text: "No", 335 text: "No",
336 align: "center", 336 align: "center",
337 sortable: false, 337 sortable: false,
338 value: "No" 338 value: "No"
339 }, 339 },
340 { text: "Occasion", value: "occasion", sortable: false, align: "center" }, 340 { text: "Occasion", value: "occasion", sortable: false, align: "center" },
341 { 341 {
342 text: "Date Of Holiday", 342 text: "Date Of Holiday",
343 value: "dateOfHoliday", 343 value: "dateOfHoliday",
344 sortable: false, 344 sortable: false,
345 align: "center" 345 align: "center"
346 }, 346 },
347 { text: "Action", value: "", sortable: false, align: "center" } 347 { text: "Action", value: "", sortable: false, align: "center" }
348 ], 348 ],
349 desserts: [], 349 desserts: [],
350 editedIndex: -1, 350 editedIndex: -1,
351 addHoliday: {}, 351 addHoliday: {},
352 editedItem: {} 352 editedItem: {}
353 }), 353 }),
354 methods: { 354 methods: {
355 dates: function(date) { 355 dates: function(date) {
356 return moment(date).format("MMMM DD, YYYY"); 356 return moment(date).format("MMMM DD, YYYY");
357 }, 357 },
358 getHolidays() { 358 getHolidays() {
359 this.showLoader = true; 359 this.showLoader = true;
360 var token = this.$store.state.token; 360 var token = this.$store.state.token;
361 http() 361 http()
362 .get("/getHolidaysList", { 362 .get("/getHolidaysList", {
363 headers: { Authorization: "Bearer " + token } 363 headers: { Authorization: "Bearer " + token }
364 }) 364 })
365 .then(response => { 365 .then(response => {
366 this.desserts = response.data.data; 366 this.desserts = response.data.data;
367 this.showLoader = false; 367 this.showLoader = false;
368 }) 368 })
369 .catch(err => { 369 .catch(err => {
370 // console.log("err====>", err); 370 // console.log("err====>", err);
371 this.showLoader = false; 371 this.showLoader = false;
372 if (error.response.status === 401) { 372 if (error.response.status === 401) {
373 this.$router.replace({ path: "/" }); 373 this.$router.replace({ path: "/" });
374 this.$store.dispatch("setToken", null); 374 this.$store.dispatch("setToken", null);
375 this.$store.dispatch("Id", null); 375 this.$store.dispatch("Id", null);
376 } 376 }
377 }); 377 });
378 }, 378 },
379 editItem(item) { 379 editItem(item) {
380 this.editedIndex = this.desserts.indexOf(item); 380 this.editedIndex = this.desserts.indexOf(item);
381 this.editedItem = Object.assign({}, item); 381 this.editedItem = Object.assign({}, item);
382 this.editedItem.holidayId = item._id; 382 this.editedItem.holidayId = item._id;
383 this.dialog = true; 383 this.dialog = true;
384 }, 384 },
385 profile(item) { 385 profile(item) {
386 this.editedIndex = this.desserts.indexOf(item); 386 this.editedIndex = this.desserts.indexOf(item);
387 this.editedItem = Object.assign({}, item); 387 this.editedItem = Object.assign({}, item);
388 this.dialog1 = true; 388 this.dialog1 = true;
389 }, 389 },
390 390
391 deleteItem(item) { 391 deleteItem(item) {
392 let deleteHoliday = { 392 let deleteHoliday = {
393 holidayId: item._id 393 holidayId: item._id
394 }; 394 };
395 http() 395 http()
396 .delete( 396 .delete(
397 "/deleteHoliday", 397 "/deleteHoliday",
398 confirm("Are you sure you want to delete this?") && { 398 confirm("Are you sure you want to delete this?") && {
399 params: deleteHoliday 399 params: deleteHoliday
400 } 400 }
401 ) 401 )
402 .then(response => { 402 .then(response => {
403 this.snackbar = true; 403 this.snackbar = true;
404 this.text = response.data.message; 404 this.text = response.data.message;
405 this.getHolidays(); 405 this.getHolidays();
406 }) 406 })
407 .catch(error => { 407 .catch(error => {
408 console.log(error); 408 console.log(error);
409 }); 409 });
410 }, 410 },
411 activeTab(type) { 411 activeTab(type) {
412 switch (type) { 412 switch (type) {
413 case "existing": 413 case "existing":
414 this.newActive = false; 414 this.newActive = false;
415 this.isActive = true; 415 this.isActive = true;
416 break; 416 break;
417 417
418 default: 418 default:
419 this.newActive = true; 419 this.newActive = true;
420 this.isActive = false; 420 this.isActive = false;
421 break; 421 break;
422 } 422 }
423 }, 423 },
424 close() { 424 close() {
425 this.dialog = false; 425 this.dialog = false;
426 setTimeout(() => { 426 setTimeout(() => {
427 this.editedItem = Object.assign({}, this.defaultItem); 427 this.editedItem = Object.assign({}, this.defaultItem);
428 this.editedIndex = -1; 428 this.editedIndex = -1;
429 }, 300); 429 }, 300);
430 }, 430 },
431 close1() { 431 close1() {
432 this.dialog1 = false; 432 this.dialog1 = false;
433 }, 433 },
434 submit() { 434 submit() {
435 if (this.$refs.form.validate()) { 435 if (this.$refs.form.validate()) {
436 this.loading = true; 436 this.loading = true;
437 http() 437 http()
438 .post("/createHoliday", this.addHoliday) 438 .post("/createHoliday", this.addHoliday)
439 .then(response => { 439 .then(response => {
440 this.snackbar = true; 440 this.snackbar = true;
441 this.text = response.data.message; 441 this.text = response.data.message;
442 this.getHolidays(); 442 this.getHolidays();
443 this.clear(); 443 this.clear();
444 this.loading = false; 444 this.loading = false;
445 }) 445 })
446 .catch(error => { 446 .catch(error => {
447 // console.log(error); 447 // console.log(error);
448 if ((this.snackbar = true)) { 448 if ((this.snackbar = true)) {
449 this.text = error.response.data.message; 449 this.text = error.response.data.message;
450 } 450 }
451 this.loading = false; 451 this.loading = false;
452 }); 452 });
453 } 453 }
454 }, 454 },
455 clear() { 455 clear() {
456 this.$refs.form.reset(); 456 this.$refs.form.reset();
457 }, 457 },
458 save() { 458 save() {
459 http() 459 http()
460 .put("/updateHoliday", this.editedItem) 460 .put("/updateHoliday", this.editedItem)
461 .then(response => { 461 .then(response => {
462 if ((this.snackbar = true)) { 462 if ((this.snackbar = true)) {
463 this.text = response.data.message; 463 this.text = response.data.message;
464 } 464 }
465 this.getHolidays(); 465 this.getHolidays();
466 }) 466 })
467 .catch(error => { 467 .catch(error => {
468 // console.log(error); 468 // console.log(error);
469 }); 469 });
470 this.close(); 470 this.close();
471 } 471 }
472 }, 472 },
473 mounted() { 473 mounted() {
474 this.getHolidays(); 474 this.getHolidays();
475 }, 475 },
476 created() { 476 created() {
477 this.$root.$on("app:search", search => { 477 this.$root.$on("app:search", search => {
478 this.search = search; 478 this.search = search;
479 }); 479 });
480 }, 480 },
481 beforeDestroy() { 481 beforeDestroy() {
482 // dont forget to remove the listener 482 // dont forget to remove the listener
483 this.$root.$off("app:search"); 483 this.$root.$off("app:search");
484 } 484 }
485 }; 485 };
486 </script> 486 </script>
487 <style scoped> 487 <style scoped>
488 #td { 488 #td {
489 max-width: 200px; 489 max-width: 200px;
490 } 490 }
491 .active { 491 .active {
492 background-color: gray; 492 background-color: gray;
493 color: white !important; 493 color: white !important;
494 } 494 }
495 .activebtn { 495 .activebtn {
496 color: black !important; 496 color: black !important;
497 } 497 }
498 </style> 498 </style>