viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 9056815e1a7b5a10dedd497341812c0052a2fe2c

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

fixed bugs

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