viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 65d5475b667d37ef597e1f2d200a6acd86a776bf

Authored by Shikha Mishra
1 parent c34b2bc04c
Exists in master and in 3 other branches amber-development, development, ui-design

changes in api and ui

Showing 2 changed files with 32 additions and 13 deletions   Show diff stats
src/pages/Dashboard/dashboard.vue
Diff comments   View file @65d5475
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <!-- ****** VIEW PROFIL NOTICE BOARD ****** --> 3 <!-- ****** VIEW PROFIL NOTICE BOARD ****** -->
4 <!-- <v-dialog v-model="dialogNotice" max-width="940px" scrollable> 4 <!-- <v-dialog v-model="dialogNotice" max-width="940px" scrollable>
5 <v-card> 5 <v-card>
6 <v-toolbar color="grey lighten-2" flat> 6 <v-toolbar color="grey lighten-2" flat>
7 <v-spacer></v-spacer> 7 <v-spacer></v-spacer>
8 <v-toolbar-title> 8 <v-toolbar-title>
9 <h3>Notice Board</h3> 9 <h3>Notice Board</h3>
10 </v-toolbar-title> 10 </v-toolbar-title>
11 <v-spacer></v-spacer> 11 <v-spacer></v-spacer>
12 <v-icon @click="closeNotice">close</v-icon> 12 <v-icon @click="closeNotice">close</v-icon>
13 </v-toolbar> 13 </v-toolbar>
14 <v-card-text> 14 <v-card-text>
15 <v-layout> 15 <v-layout>
16 <v-flex align-center justify-center layout text-xs-center class="mt-2"> 16 <v-flex align-center justify-center layout text-xs-center class="mt-2">
17 <img src="/static/icon/user.png" width="70px" v-if="!notice.eventImageUrl" /> 17 <img src="/static/icon/user.png" width="70px" v-if="!notice.eventImageUrl" />
18 <img :src="notice.eventImageUrl" width="280px" v-else-if="notice.eventImageUrl" /> 18 <img :src="notice.eventImageUrl" width="280px" v-else-if="notice.eventImageUrl" />
19 </v-flex> 19 </v-flex>
20 </v-layout> 20 </v-layout>
21 <v-container grid-list-md> 21 <v-container grid-list-md>
22 <v-layout wrap> 22 <v-layout wrap>
23 <v-flex> 23 <v-flex>
24 <v-layout> 24 <v-layout>
25 <v-flex xs5 sm6> 25 <v-flex xs5 sm6>
26 <h5 class="right my-1"> 26 <h5 class="right my-1">
27 <b>Title:</b> 27 <b>Title:</b>
28 </h5> 28 </h5>
29 </v-flex> 29 </v-flex>
30 <v-flex sm6 xs8> 30 <v-flex sm6 xs8>
31 <h5 class="my-1">{{ notice.title }}</h5> 31 <h5 class="my-1">{{ notice.title }}</h5>
32 </v-flex> 32 </v-flex>
33 </v-layout> 33 </v-layout>
34 <v-layout> 34 <v-layout>
35 <v-flex xs5 sm6> 35 <v-flex xs5 sm6>
36 <h5 class="right my-1"> 36 <h5 class="right my-1">
37 <b>Description:</b> 37 <b>Description:</b>
38 </h5> 38 </h5>
39 </v-flex> 39 </v-flex>
40 <v-flex sm6 xs8> 40 <v-flex sm6 xs8>
41 <h5 class="my-1">{{ notice.description }}</h5> 41 <h5 class="my-1">{{ notice.description }}</h5>
42 </v-flex> 42 </v-flex>
43 </v-layout> 43 </v-layout>
44 </v-flex> 44 </v-flex>
45 </v-layout> 45 </v-layout>
46 </v-container> 46 </v-container>
47 </v-card-text> 47 </v-card-text>
48 </v-card> 48 </v-card>
49 </v-dialog>--> 49 </v-dialog>-->
50 <!-- <v-container fluid grid-list-xl> --> 50 <!-- <v-container fluid grid-list-xl> -->
51 <v-layout wrap> 51 <v-layout wrap>
52 <v-flex xs12> 52 <v-flex xs12>
53 <v-layout wrap row> 53 <v-layout wrap row>
54 <!-- ***** Total Students ***** --> 54 <!-- ***** Total Students ***** -->
55 <v-flex xs12 sm12 md9> 55 <v-flex xs12 sm12 md9>
56 <v-container fluid grid-list-xl> 56 <v-container fluid grid-list-xl>
57 <v-flex xs12 sm12 md12> 57 <v-flex xs12 sm12 md12>
58 <v-layout wrap class> 58 <v-layout wrap class>
59 <v-flex xs12 sm12 md3> 59 <v-flex xs12 sm12 md3>
60 <router-link :to="{ name:'Students' }"> 60 <router-link :to="{ name:'Students' }">
61 <v-card class="card pink-bgcolor"> 61 <v-card class="card pink-bgcolor">
62 <v-card-title primary-title class="titleCard white--text py-3">Students</v-card-title> 62 <v-card-title primary-title class="titleCard white--text py-3">Students</v-card-title>
63 <img src="/static/icon/student.png" class="ml-2" width="40" alt="icons" /> 63 <img src="/static/icon/student.png" class="ml-2" width="40" alt="icons" />
64 <v-card-title class="headline py-1 white--text">{{ students.length }}</v-card-title> 64 <v-card-title class="headline py-1 white--text">{{ students.length }}</v-card-title>
65 </v-card> 65 </v-card>
66 </router-link> 66 </router-link>
67 </v-flex> 67 </v-flex>
68 <!-- ***** Total Teachers***** --> 68 <!-- ***** Total Teachers***** -->
69 <v-flex xs12 sm12 md3> 69 <v-flex xs12 sm12 md3>
70 <router-link :to="{ name:'Teachers' }"> 70 <router-link :to="{ name:'Teachers' }">
71 <v-card flat class="card elevation-2 firozi-bgcolor"> 71 <v-card flat class="card elevation-2 firozi-bgcolor">
72 <v-card-title primary-title class="titleCard white--text py-3">Teachers</v-card-title> 72 <v-card-title primary-title class="titleCard white--text py-3">Teachers</v-card-title>
73 <img src="/static/icon/teacher.png" class="ml-2" width="40" alt="icons" /> 73 <img src="/static/icon/teacher.png" class="ml-2" width="40" alt="icons" />
74 74
75 <v-card-title class="headline py-1 white--text">{{ teachers.length }}</v-card-title> 75 <v-card-title class="headline py-1 white--text">{{ teachers.length }}</v-card-title>
76 </v-card> 76 </v-card>
77 </router-link> 77 </router-link>
78 </v-flex> 78 </v-flex>
79 <!-- ***** Total Parents ***** --> 79 <!-- ***** Total Parents ***** -->
80 <v-flex xs12 sm12 md3> 80 <v-flex xs12 sm12 md3>
81 <router-link :to="{ name:'Parents' }"> 81 <router-link :to="{ name:'Parents' }">
82 <v-card flat class="card yellow darken-3"> 82 <v-card flat class="card yellow darken-3">
83 <v-card-title primary-title class="titleCard white--text py-3">Parents</v-card-title> 83 <v-card-title primary-title class="titleCard white--text py-3">Parents</v-card-title>
84 <img src="/static/icon/parents.png" class="ml-3" width="40px" alt="icons" /> 84 <img src="/static/icon/parents.png" class="ml-3" width="40px" alt="icons" />
85 <v-card-title class="headline py-1 white--text">{{ parents.length }}</v-card-title> 85 <v-card-title class="headline py-1 white--text">{{ parents.length }}</v-card-title>
86 </v-card> 86 </v-card>
87 </router-link> 87 </router-link>
88 </v-flex> 88 </v-flex>
89 <!-- ***** Total Class***** --> 89 <!-- ***** Total Class***** -->
90 <v-flex xs12 sm12 md3> 90 <v-flex xs12 sm12 md3>
91 <router-link :to="{ name:'Class' }"> 91 <router-link :to="{ name:'Class' }">
92 <v-card flat class="card darkBlue-bgcolor"> 92 <v-card flat class="card darkBlue-bgcolor">
93 <v-card-title primary-title class="titleCard white--text py-3">Class</v-card-title> 93 <v-card-title primary-title class="titleCard white--text py-3">Class</v-card-title>
94 <img src="/static/icon/class.png" width="40" alt="icons" class="ml-2" /> 94 <img src="/static/icon/class.png" width="40" alt="icons" class="ml-2" />
95 <v-card-title class="headline py-1 white--text">{{ classes.length }}</v-card-title> 95 <v-card-title class="headline py-1 white--text">{{ classes.length }}</v-card-title>
96 </v-card> 96 </v-card>
97 </router-link> 97 </router-link>
98 </v-flex> 98 </v-flex>
99 </v-layout> 99 </v-layout>
100 </v-flex> 100 </v-flex>
101 <v-layout> 101 <v-layout>
102 <v-flex xs12> 102 <v-flex xs12>
103 <v-card class="card mt-2 account-Card"> 103 <v-card class="card mt-2 account-Card">
104 <h4> 104 <h4>
105 <b>Account</b> 105 <b>Account</b>
106 </h4> 106 </h4>
107 <v-layout wrap> 107 <v-layout wrap>
108 <v-flex xs12 sm12 md3> 108 <v-flex xs12 sm12 md3>
109 <v-list two-line> 109 <v-list two-line>
110 <template> 110 <template>
111 <v-list-tile> 111 <v-list-tile>
112 <v-list-tile-avatar> 112 <v-list-tile-avatar>
113 <v-icon class="account-circle darkBlue-color">panorama_fish_eye</v-icon> 113 <v-icon class="account-circle darkBlue-color">panorama_fish_eye</v-icon>
114 </v-list-tile-avatar> 114 </v-list-tile-avatar>
115 <v-list-tile-content> 115 <v-list-tile-content>
116 <v-list-tile-title class="mt-2"> 116 <v-list-tile-title class="mt-2">
117 <p class="subheading font-color">Fees</p> 117 <p class="subheading font-color">Fees</p>
118 </v-list-tile-title> 118 </v-list-tile-title>
119 <v-list-tile-title>Rs 1000</v-list-tile-title> 119 <v-list-tile-title>Rs 1000</v-list-tile-title>
120 </v-list-tile-content> 120 </v-list-tile-content>
121 </v-list-tile> 121 </v-list-tile>
122 <v-list-tile> 122 <v-list-tile>
123 <v-list-tile-avatar> 123 <v-list-tile-avatar>
124 <v-icon class="account-circle yellowDark-color">panorama_fish_eye</v-icon> 124 <v-icon class="account-circle yellowDark-color">panorama_fish_eye</v-icon>
125 </v-list-tile-avatar> 125 </v-list-tile-avatar>
126 <v-list-tile-content> 126 <v-list-tile-content>
127 <v-list-tile-title class="mt-2"> 127 <v-list-tile-title class="mt-2">
128 <p class="subheading font-color">Collection</p> 128 <p class="subheading font-color">Collection</p>
129 </v-list-tile-title> 129 </v-list-tile-title>
130 <v-list-tile-title>Rs 2000</v-list-tile-title> 130 <v-list-tile-title>Rs 2000</v-list-tile-title>
131 </v-list-tile-content> 131 </v-list-tile-content>
132 </v-list-tile> 132 </v-list-tile>
133 <v-list-tile> 133 <v-list-tile>
134 <v-list-tile-avatar> 134 <v-list-tile-avatar>
135 <v-icon class="account-circle pink-color">panorama_fish_eye</v-icon> 135 <v-icon class="account-circle pink-color">panorama_fish_eye</v-icon>
136 </v-list-tile-avatar> 136 </v-list-tile-avatar>
137 <v-list-tile-content> 137 <v-list-tile-content>
138 <v-list-tile-title class="mt-2"> 138 <v-list-tile-title class="mt-2">
139 <p class="subheading font-color">Expences</p> 139 <p class="subheading font-color">Expences</p>
140 </v-list-tile-title> 140 </v-list-tile-title>
141 <v-list-tile-title>Rs 3000</v-list-tile-title> 141 <v-list-tile-title>Rs. {{ expenseData.sum }}</v-list-tile-title>
142 </v-list-tile-content> 142 </v-list-tile-content>
143 </v-list-tile> 143 </v-list-tile>
144 </template> 144 </template>
145 </v-list> 145 </v-list>
146 </v-flex> 146 </v-flex>
147 <v-flex xs12 sm12 md9 lg9> 147 <v-flex xs12 sm12 md9 lg9>
148 <!-- <div id="chart"> --> 148 <!-- <div id="chart"> -->
149 <apexchart 149 <apexchart
150 type="bar" 150 type="bar"
151 height="250" 151 height="250"
152 style="max-width: 800px !important" 152 style="max-width: 800px !important"
153 :options="chartOptions" 153 :options="chartOptions"
154 :series="series" 154 :series="series"
155 ></apexchart> 155 ></apexchart>
156 <!-- </div> --> 156 <!-- </div> -->
157 </v-flex> 157 </v-flex>
158 </v-layout> 158 </v-layout>
159 </v-card> 159 </v-card>
160 </v-flex> 160 </v-flex>
161 </v-layout> 161 </v-layout>
162 <v-card class="mt-2 card"> 162 <v-card class="mt-2 card">
163 <!-- <full-calendar 163 <!-- <full-calendar
164 ref="calendar" 164 ref="calendar"
165 defaultView="month" 165 defaultView="month"
166 droppable="false" 166 droppable="false"
167 :events="events" 167 :events="events"
168 :config="config" 168 :config="config"
169 ></full-calendar>--> 169 ></full-calendar>-->
170 <h4 class="pa-3"> 170 <h4 class="pa-3">
171 <b>Notice</b> 171 <b>Notice</b>
172 </h4> 172 </h4>
173 173
174 <v-data-table 174 <v-data-table
175 :items="noticeData" 175 :items="noticeData"
176 class="elevation-0" 176 class="elevation-0"
177 flat 177 flat
178 hide-actions 178 hide-actions
179 hide-headers 179 hide-headers
180 style="border-spacing: 0 !important;" 180 style="border-spacing: 0 !important;"
181 > 181 >
182 <template 182 <template
183 slot="items" 183 slot="items"
184 slot-scope="props" 184 slot-scope="props"
185 v-if="props.index < 5" 185 v-if="props.index < 5"
186 style="border-spacing: 0 !important;" 186 style="border-spacing: 0 !important;"
187 > 187 >
188 <tr class="td-notice"> 188 <tr class="td-notice">
189 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td> 189 <td class="grey--text" style="width:18px">{{ props.index + 1}}</td>
190 <td> 190 <td>
191 <span class="grey--text caption">{{ date(props.item.created) }}</span> 191 <span class="grey--text caption">{{ date(props.item.created) }}</span>
192 <br /> 192 <br />
193 <span class="body-2">{{ props.item.title}}</span> 193 <span class="body-2">{{ props.item.title}}</span>
194 </td> 194 </td>
195 <td class="noticeDecritpion grey--text mt-2">{{ props.item.description}}</td> 195 <td class="noticeDecritpion grey--text mt-2">{{ props.item.description}}</td>
196 196
197 <td class="text-xs-center"> 197 <td class="text-xs-center">
198 <span> 198 <span>
199 <v-tooltip top> 199 <v-tooltip top>
200 <img 200 <img
201 slot="activator" 201 slot="activator"
202 style="cursor:pointer; width:25px; height:25px; " 202 style="cursor:pointer; width:25px; height:25px; "
203 @click="profile" 203 @click="profile"
204 src="/static/icon/view.png" 204 src="/static/icon/view.png"
205 /> 205 />
206 <span>View</span> 206 <span>View</span>
207 </v-tooltip> 207 </v-tooltip>
208 </span> 208 </span>
209 </td> 209 </td>
210 </tr> 210 </tr>
211 </template> 211 </template>
212 </v-data-table> 212 </v-data-table>
213 </v-card> 213 </v-card>
214 </v-container> 214 </v-container>
215 </v-flex> 215 </v-flex>
216 <v-flex xs12 sm12 md3> 216 <v-flex xs12 sm12 md3>
217 <v-card height="100%" class="elevation-0 mt-3 profileDasboard"> 217 <v-card height="100%" class="elevation-0 mt-3 profileDasboard">
218 <v-card-text> 218 <v-card-text>
219 <h4 class="text-xs-center py-3"> 219 <h4 class="text-xs-center py-3">
220 <b>Profile</b> 220 <b>Profile</b>
221 </h4> 221 </h4>
222 <v-flex xs12 class="py-3"> 222 <v-flex xs12 class="py-3">
223 <v-layout wrap> 223 <v-layout wrap>
224 <v-flex xs12 sm12 md4> 224 <v-flex xs12 sm12 md4>
225 <img src="/static/icon/user.png" v-if="!userData.schoolLogoUrl" width="80" /> 225 <img src="/static/icon/user.png" v-if="!userData.schoolLogoUrl" width="80" />
226 <img 226 <img
227 :src="userData.schoolLogoUrl" 227 :src="userData.schoolLogoUrl"
228 v-else-if="userData.schoolLogoUrl" 228 v-else-if="userData.schoolLogoUrl"
229 width="80" 229 width="80"
230 /> 230 />
231 </v-flex> 231 </v-flex>
232 <v-flex xs12 sm12 md6> 232 <v-flex xs12 sm12 md6>
233 <p class="mb-0 body-1"> 233 <p class="mb-0 body-1">
234 <i>{{ userData.name }}</i> 234 <i>{{ userData.name }}</i>
235 </p> 235 </p>
236 <p class="mb-0 caption grey--text">{{ userData.email }}</p> 236 <p class="mb-0 caption grey--text">{{ userData.email }}</p>
237 <p class="mb-0 caption grey--text">{{ userData.mobile }}</p> 237 <p class="mb-0 caption grey--text">{{ userData.mobile }}</p>
238 <address class="caption grey--text mb-3">{{ userData.address }}</address> 238 <address class="caption grey--text mb-3">{{ userData.address }}</address>
239 </v-flex> 239 </v-flex>
240 </v-layout> 240 </v-layout>
241 </v-flex> 241 </v-flex>
242 <hr /> 242 <hr />
243 <h4 class="text-xs-center py-3"> 243 <h4 class="text-xs-center py-3">
244 <b>Calender</b> 244 <b>Calender</b>
245 </h4> 245 </h4>
246 <vue-event-calendar :events="demoEvents"></vue-event-calendar> 246 <vue-event-calendar :events="demoEvents"></vue-event-calendar>
247 </v-card-text> 247 </v-card-text>
248 </v-card> 248 </v-card>
249 </v-flex> 249 </v-flex>
250 </v-layout> 250 </v-layout>
251 </v-flex> 251 </v-flex>
252 </v-layout> 252 </v-layout>
253 <v-dialog v-model="dialog" max-width="500"> 253 <v-dialog v-model="dialog" max-width="500">
254 <v-card color="grey lighten-4" flat> 254 <v-card color="grey lighten-4" flat>
255 <v-toolbar dark color="fixcolors"> 255 <v-toolbar dark color="fixcolors">
256 <v-spacer></v-spacer> 256 <v-spacer></v-spacer>
257 <v-btn icon @click="dialog= false"> 257 <v-btn icon @click="dialog= false">
258 <v-icon>close</v-icon> 258 <v-icon>close</v-icon>
259 </v-btn> 259 </v-btn>
260 </v-toolbar> 260 </v-toolbar>
261 <v-flex class="py-4"> 261 <v-flex class="py-4">
262 <v-list-tile> 262 <v-list-tile>
263 <v-list-tile-action> 263 <v-list-tile-action>
264 <v-icon>edit</v-icon> 264 <v-icon>edit</v-icon>
265 </v-list-tile-action> 265 </v-list-tile-action>
266 <v-list-tile-content> 266 <v-list-tile-content>
267 <v-list-tile-title>{{ selected.title }}</v-list-tile-title> 267 <v-list-tile-title>{{ selected.title }}</v-list-tile-title>
268 </v-list-tile-content> 268 </v-list-tile-content>
269 </v-list-tile> 269 </v-list-tile>
270 <v-list-tile> 270 <v-list-tile>
271 <v-list-tile-action> 271 <v-list-tile-action>
272 <v-icon>access_time</v-icon> 272 <v-icon>access_time</v-icon>
273 </v-list-tile-action> 273 </v-list-tile-action>
274 <v-list-tile-content> 274 <v-list-tile-content>
275 <v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title> 275 <v-list-tile-title>{{ date(selected.start)}}</v-list-tile-title>
276 </v-list-tile-content> 276 </v-list-tile-content>
277 </v-list-tile> 277 </v-list-tile>
278 </v-flex> 278 </v-flex>
279 </v-card> 279 </v-card>
280 </v-dialog> 280 </v-dialog>
281 <div class="loader" v-if="showLoader"> 281 <div class="loader" v-if="showLoader">
282 <v-progress-circular indeterminate color="white"></v-progress-circular> 282 <v-progress-circular indeterminate color="white"></v-progress-circular>
283 </div> 283 </div>
284 </v-app> 284 </v-app>
285 </template> 285 </template>
286 286
287 <script> 287 <script>
288 import http from "@/Services/http.js"; 288 import http from "@/Services/http.js";
289 import moment from "moment"; 289 import moment from "moment";
290 // import { FunctionalCalendar } from "vue-functional-calendar"; 290 // import { FunctionalCalendar } from "vue-functional-calendar";
291 291
292 export default { 292 export default {
293 components: { 293 components: {
294 // FunctionalCalendar 294 // FunctionalCalendar
295 }, 295 },
296 data() { 296 data() {
297 return { 297 return {
298 // data: { 298 // data: {
299 // clieckedToday: false 299 // clieckedToday: false
300 // }, 300 // },
301 // markedDates: ["16/4/2019", "18/4/2019", "20/4/2019", "21/4/2019"], 301 // markedDates: ["16/4/2019", "18/4/2019", "20/4/2019", "21/4/2019"],
302 // calendarData: {}, 302 // calendarData: {},
303 // calendar: {}, 303 // calendar: {},
304 demoEvents: [ 304 demoEvents: [
305 { 305 {
306 date: "2020/01/10", // Required 306 date: "2020/01/10", // Required
307 title: "Foo" // Required 307 title: "Foo" // Required
308 }, 308 },
309 { 309 {
310 date: "2020/01/12", 310 date: "2020/01/12",
311 title: "Bar", 311 title: "Bar",
312 desc: "description", 312 desc: "description",
313 customClass: "disabled highlight" // Custom classes to an calendar cell 313 customClass: "disabled highlight" // Custom classes to an calendar cell
314 } 314 }
315 ], 315 ],
316 316
317 showLoader: false, 317 showLoader: false,
318 calendarData: {}, 318 calendarData: {},
319 dialog: false, 319 dialog: false,
320 dialogNotice: false, 320 dialogNotice: false,
321 HolidaysList: [], 321 HolidaysList: [],
322 EventsList: [], 322 EventsList: [],
323 events: [], 323 events: [],
324 config: { 324 config: {
325 eventClick: event => { 325 eventClick: event => {
326 this.selected = event; 326 this.selected = event;
327 this.dialog = true; 327 this.dialog = true;
328 } 328 }
329 }, 329 },
330 selected: {}, 330 selected: {},
331 // notice: {}, 331 // notice: {},
332 userData: {}, 332 userData: {},
333 dated: new Date(2018, 0, 9), 333 dated: new Date(2018, 0, 9),
334 userList: [], 334 userList: [],
335 sectionList: [], 335 sectionList: [],
336 students: "", 336 students: "",
337 parents: "", 337 parents: "",
338 teachers: "", 338 teachers: "",
339 classes: "", 339 classes: "",
340 noticeData: [], 340 noticeData: [],
341 expenseData: [],
341 attrs: [ 342 attrs: [
342 { 343 {
343 key: "today", 344 key: "today",
344 highlight: true, 345 highlight: true,
345 dates: new Date() 346 dates: new Date()
346 } 347 }
347 ], 348 ],
348 drawer: true, 349 drawer: true,
349 items: [ 350 items: [
350 { title: "Home", icon: "dashboard" }, 351 { title: "Home", icon: "dashboard" },
351 { title: "About", icon: "question_answer" } 352 { title: "About", icon: "question_answer" }
352 ], 353 ],
353 right: null, 354 right: null,
354 355
355 series: [ 356 series: [
356 { 357 {
357 name: "Total", 358 name: "Total",
358 data: [66, 44, 33] 359 data: [66, 44, 33]
359 } 360 }
360 ], 361 ],
361 chartOptions: { 362 chartOptions: {
362 chart: { 363 chart: {
363 type: "bar", 364 type: "bar",
364 height: 150, 365 height: 150,
365 stacked: true 366 stacked: true
366 // animations: { 367 // animations: {
367 // enabled: true, 368 // enabled: true,
368 // easing: "easeinout", 369 // easing: "easeinout",
369 // speed: 1200, 370 // speed: 1200,
370 // animateGradually: { 371 // animateGradually: {
371 // enabled: true, 372 // enabled: true,
372 // delay: 450 373 // delay: 450
373 // }, 374 // },
374 // dynamicAnimation: { 375 // dynamicAnimation: {
375 // enabled: true, 376 // enabled: true,
376 // speed: 450 377 // speed: 450
377 // } 378 // }
378 // } 379 // }
379 }, 380 },
380 plotOptions: { 381 plotOptions: {
381 bar: { 382 bar: {
382 horizontal: false, 383 horizontal: false,
383 columnWidth: "25%", 384 columnWidth: "25%",
384 // endingShape: "rounded", 385 // endingShape: "rounded",
385 distributed: true 386 distributed: true
386 } 387 }
387 }, 388 },
388 responsive: [ 389 responsive: [
389 { 390 {
390 breakpoint: 480, 391 breakpoint: 480,
391 options: { 392 options: {
392 legend: { 393 legend: {
393 position: "bottom", 394 position: "bottom",
394 offsetX: -10, 395 offsetX: -10,
395 offsetY: 0 396 offsetY: 0
396 } 397 }
397 } 398 }
398 } 399 }
399 ], 400 ],
400 legend: { 401 legend: {
401 show: false 402 show: false
402 }, 403 },
403 colors: ["#7852cc", "#f9a825", "#ff8a89"], 404 colors: ["#7852cc", "#f9a825", "#ff8a89"],
404 dataLabels: { 405 dataLabels: {
405 enabled: false 406 enabled: false
406 }, 407 },
407 stroke: { 408 stroke: {
408 show: true, 409 show: true,
409 width: 2, 410 width: 2,
410 colors: ["transparent"] 411 colors: ["transparent"]
411 }, 412 },
412 xaxis: { 413 xaxis: {
413 categories: ["Fee", "Collections", "Expences"] 414 categories: ["Fee", "Collections", "Expences"]
414 }, 415 },
415 yaxis: { 416 yaxis: {
416 title: { 417 title: {
417 text: "" 418 text: ""
418 } 419 }
419 }, 420 },
420 fill: { 421 fill: {
421 opacity: 1 422 opacity: 1
422 }, 423 },
423 tooltip: { 424 tooltip: {
424 y: { 425 y: {
425 formatter: function(val, opts) { 426 formatter: function(val, opts) {
426 // console.log("opts",opts.w.config.xaxis.categories) 427 // console.log("opts",opts.w.config.xaxis.categories)
427 return "" + val + " "; 428 return "" + val + " ";
428 } 429 }
429 } 430 }
430 } 431 }
431 } 432 }
432 }; 433 };
433 }, 434 },
434 mounted() { 435 mounted() {
435 // = this.$store.state.schoolToken; 436 // = this.$store.state.schoolToken;
436 // console.log("this.$store.state.role", this.token); 437 // console.log("this.$store.state.role", this.token);
437 if (this.$store.state.role === "ADMIN") { 438 if (this.$store.state.role === "ADMIN") {
438 this.token = this.$store.state.token; 439 this.token = this.$store.state.token;
439 } else if (this.$store.state.schoolRole === "SUPERADMIN") { 440 } else if (this.$store.state.schoolRole === "SUPERADMIN") {
440 this.token = this.$store.state.schoolToken; 441 this.token = this.$store.state.schoolToken;
441 } 442 }
442 // console.log("role", this.$store.state.schoolRole,"tt",this.$store.state.schoolToken); 443 // console.log("role", this.$store.state.schoolRole,"tt",this.$store.state.schoolToken);
443 // this.getData(); 444 // this.getData();
444 this.getStudents(); 445 this.getStudents();
445 this.getTeachers(); 446 this.getTeachers();
446 this.getParents(); 447 this.getParents();
447 this.getClasses(); 448 this.getClasses();
448 this.getNoticeData(); 449 this.getNoticeData();
449 this.getUserData(); 450 this.getUserData();
451 this.getExpensesData();
450 // this.getUsersList(); 452 // this.getUsersList();
451 }, 453 },
452 methods: { 454 methods: {
453 closeNotice() { 455 closeNotice() {
454 this.dialogNotice = false; 456 this.dialogNotice = false;
455 }, 457 },
456 profile() { 458 profile() {
457 // this.editedIndex = this.desserts.indexOf(item); 459 // this.editedIndex = this.desserts.indexOf(item);
458 // this.notice = Object.assign({}, item); 460 // this.notice = Object.assign({}, item);
459 // this.dialogNotice = true; 461 // this.dialogNotice = true;
460 this.$router.push({ name: "NoticeBoard" }); 462 this.$router.push({ name: "NoticeBoard" });
461 }, 463 },
462 date: function(date) { 464 date: function(date) {
463 return moment(date).format("MMMM DD, YYYY HH:mm"); 465 return moment(date).format("MMMM DD, YYYY HH:mm");
464 }, 466 },
465 refreshEvents() { 467 refreshEvents() {
466 this.$refs.calendar.$emit("refetch-events"); 468 this.$refs.calendar.$emit("refetch-events");
467 }, 469 },
468 removeEvent() { 470 removeEvent() {
469 this.$refs.calendar.$emit("remove-event", this.selected); 471 this.$refs.calendar.$emit("remove-event", this.selected);
470 this.selected = {}; 472 this.selected = {};
471 }, 473 },
472 eventSelected(event) { 474 eventSelected(event) {
473 this.selected = event; 475 this.selected = event;
474 console.log("this.selected", this.selected); 476 console.log("this.selected", this.selected);
475 }, 477 },
476 // eventDropStart: function(event) { 478 // eventDropStart: function(event) {
477 // event.editable = false; 479 // event.editable = false;
478 // }, 480 // },
479 eventCreated(...test) { 481 eventCreated(...test) {
480 console.log(test); 482 console.log(test);
481 }, 483 },
482 getStudents() { 484 getStudents() {
483 http() 485 http()
484 .get("/getStudentsList", { 486 .get("/getStudentsList", {
485 headers: { 487 headers: {
486 Authorization: "Bearer " + this.token 488 Authorization: "Bearer " + this.token
487 } 489 }
488 }) 490 })
489 .then(response => { 491 .then(response => {
490 this.students = response.data.data; 492 this.students = response.data.data;
491 this.showLoader = false; 493 this.showLoader = false;
492 }) 494 })
493 .catch(error => { 495 .catch(error => {
494 // console.log("err====>", err); 496 // console.log("err====>", err);
495 this.showLoader = false; 497 this.showLoader = false;
496 // if (error.response.status === 401) { 498 // if (error.response.status === 401) {
497 // this.$router.replace({ path: "/" }); 499 // this.$router.replace({ path: "/" });
498 // this.$store.dispatch("setToken", null); 500 // this.$store.dispatch("setToken", null);
499 // this.$store.dispatch("Id", null); 501 // this.$store.dispatch("Id", null);
500 // } 502 // }
501 }); 503 });
502 }, 504 },
503 getParents() { 505 getParents() {
504 http() 506 http()
505 .get("/getParentsList", { 507 .get("/getParentsList", {
506 headers: { 508 headers: {
507 Authorization: "Bearer " + this.token 509 Authorization: "Bearer " + this.token
508 } 510 }
509 }) 511 })
510 .then(response => { 512 .then(response => {
511 this.parents = response.data.data; 513 this.parents = response.data.data;
512 this.showLoader = false; 514 this.showLoader = false;
513 }) 515 })
514 .catch(error => { 516 .catch(error => {
515 // console.log("err====>", err); 517 // console.log("err====>", err);
516 this.showLoader = false; 518 this.showLoader = false;
517 // if (error.response.status === 401) { 519 // if (error.response.status === 401) {
518 // this.$router.replace({ path: "/" }); 520 // this.$router.replace({ path: "/" });
519 // this.$store.dispatch("setToken", null); 521 // this.$store.dispatch("setToken", null);
520 // this.$store.dispatch("Id", null); 522 // this.$store.dispatch("Id", null);
521 // } 523 // }
522 }); 524 });
523 }, 525 },
524 getTeachers() { 526 getTeachers() {
525 http() 527 http()
526 .get("/getTeachersList", { 528 .get("/getTeachersList", {
527 headers: { 529 headers: {
528 Authorization: "Bearer " + this.token 530 Authorization: "Bearer " + this.token
529 } 531 }
530 }) 532 })
531 .then(response => { 533 .then(response => {
532 this.teachers = response.data.data; 534 this.teachers = response.data.data;
533 this.showLoader = false; 535 this.showLoader = false;
534 }) 536 })
535 .catch(error => { 537 .catch(error => {
536 // console.log("err====>", err); 538 // console.log("err====>", err);
537 this.showLoader = false; 539 this.showLoader = false;
538 // if (error.response.status === 401) { 540 // if (error.response.status === 401) {
539 // this.$router.replace({ path: "/" }); 541 // this.$router.replace({ path: "/" });
540 // this.$store.dispatch("setToken", null); 542 // this.$store.dispatch("setToken", null);
541 // this.$store.dispatch("Id", null); 543 // this.$store.dispatch("Id", null);
542 // } 544 // }
543 }); 545 });
544 }, 546 },
545 getClasses() { 547 getClasses() {
546 http() 548 http()
547 .get("/getClassesList", { 549 .get("/getClassesList", {
548 headers: { 550 headers: {
549 Authorization: "Bearer " + this.token 551 Authorization: "Bearer " + this.token
550 } 552 }
551 }) 553 })
552 .then(response => { 554 .then(response => {
553 this.classes = response.data.data; 555 this.classes = response.data.data;
554 this.showLoader = false; 556 this.showLoader = false;
555 }) 557 })
556 .catch(error => { 558 .catch(error => {
557 this.showLoader = false; 559 this.showLoader = false;
558 // if (error.response.status === 401) { 560 // if (error.response.status === 401) {
559 // this.$router.replace({ path: "/" }); 561 // this.$router.replace({ path: "/" });
560 // this.$store.dispatch("setToken", null); 562 // this.$store.dispatch("setToken", null);
561 // this.$store.dispatch("Id", null); 563 // this.$store.dispatch("Id", null);
562 // this.$store.dispatch("Role", null); 564 // this.$store.dispatch("Role", null);
563 // } 565 // }
564 }); 566 });
565 }, 567 },
566 getNoticeData() { 568 getNoticeData() {
567 this.showLoader = true; 569 this.showLoader = true;
568 http() 570 http()
569 .get("/getEventsList", { 571 .get("/getEventsList", {
570 headers: { 572 headers: {
571 Authorization: "Bearer " + this.token 573 Authorization: "Bearer " + this.token
572 } 574 }
573 }) 575 })
574 .then(response => { 576 .then(response => {
575 this.noticeData = response.data.data; 577 this.noticeData = response.data.data;
576 this.showLoader = false; 578 this.showLoader = false;
577 }) 579 })
578 .catch(error => { 580 .catch(error => {
579 this.showLoader = false; 581 this.showLoader = false;
580 // if (error.response.status === 401) { 582 // if (error.response.status === 401) {
581 // this.$router.replace({ path: "/" }); 583 // this.$router.replace({ path: "/" });
582 // this.$store.dispatch("setToken", null); 584 // this.$store.dispatch("setToken", null);
583 // this.$store.dispatch("Id", null); 585 // this.$store.dispatch("Id", null);
584 // } 586 // }
585 }); 587 });
586 }, 588 },
587 getUserData() { 589 getUserData() {
588 // this.showLoader = true; 590 // this.showLoader = true;
589 http() 591 http()
590 .get("/getParticularUserDetail", { 592 .get("/getParticularUserDetail", {
591 headers: { 593 headers: {
592 Authorization: "Bearer " + this.token 594 Authorization: "Bearer " + this.token
593 } 595 }
594 }) 596 })
595 .then(response => { 597 .then(response => {
596 this.userData = response.data.data; 598 this.userData = response.data.data;
597 this.showLoader = false; 599 this.showLoader = false;
598 }) 600 })
599 .catch(error => { 601 .catch(error => {
600 this.showLoader = false; 602 this.showLoader = false;
601 // if (error.response.status === 401) { 603 // if (error.response.status === 401) {
602 // this.$router.replace({ path: "/" }); 604 // this.$router.replace({ path: "/" });
603 // this.$store.dispatch("setToken", null); 605 // this.$store.dispatch("setToken", null);
604 // this.$store.dispatch("Id", null); 606 // this.$store.dispatch("Id", null);
605 // } 607 // }
606 }); 608 });
609 },
610 getExpensesData() {
611 http()
612 .get("/getTotalExpenses", {
613 headers: {
614 Authorization: "Bearer " + this.token
615 }
616 })
617 .then(response => {
618 this.expenseData = response.data.data;
619 this.showLoader = false;
620 })
621 .catch(error => {
622 this.showLoader = false;
623 })
607 } 624 }
608 } 625 }
609 }; 626 };
610 </script> 627 </script>
611 628
612 <style scoped> 629 <style scoped>
613 @import "fullcalendar/dist/fullcalendar.css"; 630 @import "fullcalendar/dist/fullcalendar.css";
614 </style> 631 </style>
src/pages/Exam/examSchedule.vue
Diff comments   View file @65d5475
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** Edit Exam Schedule****** --> 3 <!-- ****** Edit Exam Schedule****** -->
4 <v-dialog v-model="editExamScheduleDialog" max-width="800px" scrollable> 4 <v-dialog v-model="editExamScheduleDialog" max-width="800px" scrollable>
5 <v-card flat class="card-style pa-2" dark> 5 <v-card flat class="card-style pa-2" dark>
6 <v-layout> 6 <v-layout>
7 <v-flex xs12> 7 <v-flex xs12>
8 <label class="title text-xs-center">Edit Exam Schedule</label> 8 <label class="title text-xs-center">Edit Exam Schedule</label>
9 <v-icon size="24" class="right" @click="editExamScheduleDialog = false">cancel</v-icon> 9 <v-icon size="24" class="right" @click="editExamScheduleDialog = false">cancel</v-icon>
10 </v-flex> 10 </v-flex>
11 </v-layout> 11 </v-layout>
12 <v-card-text> 12 <v-card-text>
13 <v-form ref="form"> 13 <v-form ref="form">
14 <v-container fluid> 14 <v-container fluid>
15 <v-layout wrap> 15 <v-layout wrap>
16 <v-flex xs12 sm12> 16 <v-flex xs12 sm12>
17 <v-layout> 17 <v-layout>
18 <v-flex xs4 class="pt-4 subheading"> 18 <v-flex xs4 class="pt-4 subheading">
19 <label class="right">Exam Name:</label> 19 <label class="right">Exam Name:</label>
20 </v-flex> 20 </v-flex>
21 <v-flex xs7 class="ml-3"> 21 <v-flex xs7 class="ml-3">
22 <v-select 22 <v-select
23 :rules="examNameRules" 23 :rules="examRules"
24 :items="examList" 24 :items="examList"
25 v-model="editedItem.examName" 25 v-model="editedItem.examId"
26 label="Select your Exam Name" 26 label="Select your Exam Name"
27 item-text="examName" 27 item-text="examName"
28 item-value="examName" 28 item-value="_id"
29 ></v-select> 29 ></v-select>
30 </v-flex> 30 </v-flex>
31 </v-layout> 31 </v-layout>
32 </v-flex> 32 </v-flex>
33 <v-flex xs12 sm12> 33 <v-flex xs12 sm12>
34 <v-layout> 34 <v-layout>
35 <v-flex xs4 class="pt-4 subheading"> 35 <v-flex xs4 class="pt-4 subheading">
36 <label class="right">Class:</label> 36 <label class="right">Class:</label>
37 </v-flex> 37 </v-flex>
38 <v-flex xs7 class="ml-3"> 38 <v-flex xs7 class="ml-3">
39 <v-select 39 <v-select
40 v-model="editedItem.classId" 40 v-model="editedItem.classId"
41 label="Select your Class" 41 label="Select your Class"
42 type="text" 42 type="text"
43 :items="classList" 43 :items="classList"
44 item-text="classNum" 44 item-text="classNum"
45 item-value="_id" 45 item-value="_id"
46 @change="getSections(editedItem.classId)" 46 @change="getSections(editedItem.classId)"
47 required 47 required
48 ></v-select> 48 ></v-select>
49 </v-flex> 49 </v-flex>
50 </v-layout> 50 </v-layout>
51 </v-flex> 51 </v-flex>
52 <v-flex xs12 sm12> 52 <v-flex xs12 sm12>
53 <v-layout> 53 <v-layout>
54 <v-flex xs4 class="pt-4 subheading"> 54 <v-flex xs4 class="pt-4 subheading">
55 <label class="right">Section:</label> 55 <label class="right">Section:</label>
56 </v-flex> 56 </v-flex>
57 <v-flex xs7 class="ml-3"> 57 <v-flex xs7 class="ml-3">
58 <v-select 58 <v-select
59 :items="addSection" 59 :items="addSection"
60 label="Select your section" 60 label="Select your section"
61 v-model="editedItem.sectionId" 61 v-model="editedItem.sectionId"
62 item-text="name" 62 item-text="name"
63 item-value="_id" 63 item-value="_id"
64 name="Select Section" 64 name="Select Section"
65 required 65 required
66 ></v-select> 66 ></v-select>
67 </v-flex> 67 </v-flex>
68 </v-layout> 68 </v-layout>
69 </v-flex> 69 </v-flex>
70 <v-flex xs12 sm12> 70 <v-flex xs12 sm12>
71 <v-layout> 71 <v-layout>
72 <v-flex xs4 class="pt-4 subheading"> 72 <v-flex xs4 class="pt-4 subheading">
73 <label class="right">Subject Name:</label> 73 <label class="right">Subject Name:</label>
74 </v-flex> 74 </v-flex>
75 <v-flex xs7 class="ml-3"> 75 <v-flex xs7 class="ml-3">
76 <v-select 76 <v-select
77 :items="subjects" 77 :items="subjects"
78 label="Select your Subject Name" 78 label="Select your Subject Name"
79 v-model="editedItem.subjectName" 79 v-model="editedItem.subjectName"
80 item-text="subjectName" 80 item-text="subjectName"
81 item-value="subjectName" 81 item-value="subjectName"
82 name="Select Section" 82 name="Select Section"
83 required 83 required
84 ></v-select> 84 ></v-select>
85 </v-flex> 85 </v-flex>
86 </v-layout> 86 </v-layout>
87 </v-flex> 87 </v-flex>
88 <v-flex xs12 sm12> 88 <v-flex xs12 sm12>
89 <v-layout> 89 <v-layout>
90 <v-flex xs4 class="pt-4 subheading"> 90 <v-flex xs4 class="pt-4 subheading">
91 <label class="right">Date:</label> 91 <label class="right">Date:</label>
92 </v-flex> 92 </v-flex>
93 <v-flex xs7 class="ml-3"> 93 <v-flex xs7 class="ml-3">
94 <v-menu 94 <v-menu
95 ref="editDate" 95 ref="editDate"
96 :close-on-content-click="false" 96 :close-on-content-click="false"
97 v-model="editDate" 97 v-model="editDate"
98 :nudge-right="40" 98 :nudge-right="40"
99 :return-value.sync="editDate" 99 :return-value.sync="editDate"
100 lazy 100 lazy
101 transition="scale-transition" 101 transition="scale-transition"
102 offset-y 102 offset-y
103 full-width 103 full-width
104 min-width="290px" 104 min-width="290px"
105 > 105 >
106 <v-text-field 106 <v-text-field
107 slot="activator" 107 slot="activator"
108 v-model="editedItem.date" 108 v-model="editedItem.date"
109 label="Select Date" 109 label="Select Date"
110 append-icon="event" 110 append-icon="event"
111 readonly 111 readonly
112 ></v-text-field> 112 ></v-text-field>
113 <v-date-picker v-model="editedItem.date" @input="editDate = false"></v-date-picker> 113 <v-date-picker v-model="editedItem.date" @input="editDate = false"></v-date-picker>
114 </v-menu> 114 </v-menu>
115 </v-flex> 115 </v-flex>
116 </v-layout> 116 </v-layout>
117 </v-flex> 117 </v-flex>
118 <v-flex xs12 sm12> 118 <v-flex xs12 sm12>
119 <v-layout> 119 <v-layout>
120 <v-flex xs4 class="pt-4 subheading"> 120 <v-flex xs4 class="pt-4 subheading">
121 <label class="right">Time From:</label> 121 <label class="right">Time From:</label>
122 </v-flex> 122 </v-flex>
123 <v-flex xs7 class="ml-3"> 123 <v-flex xs7 class="ml-3">
124 <v-menu 124 <v-menu
125 ref="menuEdit" 125 ref="menuEdit"
126 :close-on-content-click="false" 126 :close-on-content-click="false"
127 v-model="menuEdit" 127 v-model="menuEdit"
128 :nudge-right="40" 128 :nudge-right="40"
129 :return-value.sync="editedItem.timeFrom" 129 :return-value.sync="editedItem.timeFrom"
130 lazy 130 lazy
131 transition="scale-transition" 131 transition="scale-transition"
132 offset-y 132 offset-y
133 full-width 133 full-width
134 max-width="290px" 134 max-width="290px"
135 min-width="290px" 135 min-width="290px"
136 > 136 >
137 <v-text-field 137 <v-text-field
138 slot="activator" 138 slot="activator"
139 v-model="editedItem.timeFrom" 139 v-model="editedItem.timeFrom"
140 label="Select your time From" 140 label="Select your time From"
141 append-icon="access_time" 141 append-icon="access_time"
142 readonly 142 readonly
143 ></v-text-field> 143 ></v-text-field>
144 <v-time-picker 144 <v-time-picker
145 v-model="editedItem.timeIn" 145 v-model="editedItem.timeIn"
146 @change="$refs.menuEdit.save(editedItem.timeIn)" 146 @change="$refs.menuEdit.save(editedItem.timeIn)"
147 ></v-time-picker> 147 ></v-time-picker>
148 </v-menu> 148 </v-menu>
149 </v-flex> 149 </v-flex>
150 </v-layout> 150 </v-layout>
151 </v-flex> 151 </v-flex>
152 <v-flex xs12 sm12> 152 <v-flex xs12 sm12>
153 <v-layout> 153 <v-layout>
154 <v-flex xs4 class="pt-4 subheading"> 154 <v-flex xs4 class="pt-4 subheading">
155 <label class="right">Time To:</label> 155 <label class="right">Time To:</label>
156 </v-flex> 156 </v-flex>
157 <v-flex xs7 class="ml-3"> 157 <v-flex xs7 class="ml-3">
158 <v-menu 158 <v-menu
159 ref="timeToEdit" 159 ref="timeToEdit"
160 :close-on-content-click="false" 160 :close-on-content-click="false"
161 v-model="timeToEdit" 161 v-model="timeToEdit"
162 :nudge-right="40" 162 :nudge-right="40"
163 :return-value.sync="editedItem.timeTo" 163 :return-value.sync="editedItem.timeTo"
164 lazy 164 lazy
165 transition="scale-transition" 165 transition="scale-transition"
166 offset-y 166 offset-y
167 full-width 167 full-width
168 max-width="290px" 168 max-width="290px"
169 min-width="290px" 169 min-width="290px"
170 > 170 >
171 <v-text-field 171 <v-text-field
172 slot="activator" 172 slot="activator"
173 v-model="editedItem.timeTo" 173 v-model="editedItem.timeTo"
174 label="Select your Time To" 174 label="Select your Time To"
175 append-icon="access_time" 175 append-icon="access_time"
176 readonly 176 readonly
177 ></v-text-field> 177 ></v-text-field>
178 <v-time-picker 178 <v-time-picker
179 v-model="editedItem.timeTo" 179 v-model="editedItem.timeTo"
180 @change="$refs.timeToEdit.save(editedItem.timeTo)" 180 @change="$refs.timeToEdit.save(editedItem.timeTo)"
181 ></v-time-picker> 181 ></v-time-picker>
182 </v-menu> 182 </v-menu>
183 </v-flex> 183 </v-flex>
184 </v-layout> 184 </v-layout>
185 </v-flex> 185 </v-flex>
186 <v-flex xs12 sm12> 186 <v-flex xs12 sm12>
187 <v-layout> 187 <v-layout>
188 <v-flex xs4 class="pt-4 subheading"> 188 <v-flex xs4 class="pt-4 subheading">
189 <label class="right">Room:</label> 189 <label class="right">Room:</label>
190 </v-flex> 190 </v-flex>
191 <v-flex xs7 class="ml-3"> 191 <v-flex xs7 class="ml-3">
192 <v-text-field 192 <v-text-field
193 placeholder="fill your room" 193 placeholder="fill your room"
194 v-model="editedItem.room" 194 v-model="editedItem.room"
195 @keyup.enter="save" 195 @keyup.enter="save"
196 ></v-text-field> 196 ></v-text-field>
197 </v-flex> 197 </v-flex>
198 </v-layout> 198 </v-layout>
199 </v-flex> 199 </v-flex>
200 </v-layout> 200 </v-layout>
201 <v-layout> 201 <v-layout>
202 <v-flex xs12> 202 <v-flex xs12>
203 <v-card-actions> 203 <v-card-actions>
204 <v-spacer></v-spacer> 204 <v-spacer></v-spacer>
205 <v-btn round dark @click="save" class="add-button">Save</v-btn> 205 <v-btn round dark @click="save" class="add-button">Save</v-btn>
206 </v-card-actions> 206 </v-card-actions>
207 </v-flex> 207 </v-flex>
208 </v-layout> 208 </v-layout>
209 </v-container> 209 </v-container>
210 </v-form> 210 </v-form>
211 </v-card-text> 211 </v-card-text>
212 </v-card> 212 </v-card>
213 </v-dialog> 213 </v-dialog>
214 214
215 <!-- ****** PROFILE VIEW Exam Schedule DATA ****** --> 215 <!-- ****** PROFILE VIEW Exam Schedule DATA ****** -->
216 216
217 <v-dialog v-model="profileExamScheduleDialog" max-width="600px"> 217 <v-dialog v-model="profileExamScheduleDialog" max-width="600px">
218 <v-card flat class="card-style pa-3" dark> 218 <v-card flat class="card-style pa-3" dark>
219 <v-layout> 219 <v-layout>
220 <v-flex xs12> 220 <v-flex xs12>
221 <label class="title text-xs-center">View Exam Schedule</label> 221 <label class="title text-xs-center">View Exam Schedule</label>
222 <v-icon size="24" class="right" @click="profileExamScheduleDialog = false">cancel</v-icon> 222 <v-icon size="24" class="right" @click="profileExamScheduleDialog = false">cancel</v-icon>
223 </v-flex> 223 </v-flex>
224 </v-layout> 224 </v-layout>
225 <v-card-text> 225 <v-card-text>
226 <v-container grid-list-md> 226 <v-container grid-list-md>
227 <v-layout wrap> 227 <v-layout wrap>
228 <v-flex> 228 <v-flex>
229 <v-layout> 229 <v-layout>
230 <v-flex xs5 sm6> 230 <v-flex xs5 sm6>
231 <h5 class="right my-1"> 231 <h5 class="right my-1">
232 <b>Exam Name:</b> 232 <b>Exam Name:</b>
233 </h5> 233 </h5>
234 </v-flex> 234 </v-flex>
235 <v-flex sm6 xs8> 235 <v-flex sm6 xs8>
236 <h5 class="my-1">{{ editedItem.examName }}</h5> 236 <h5 class="my-1">{{ editedItem.examId}}</h5>
237 </v-flex> 237 </v-flex>
238 </v-layout> 238 </v-layout>
239 <v-layout> 239 <v-layout>
240 <v-flex xs5 sm6> 240 <v-flex xs5 sm6>
241 <h5 class="right my-1"> 241 <h5 class="right my-1">
242 <b>Class:</b> 242 <b>Class:</b>
243 </h5> 243 </h5>
244 </v-flex> 244 </v-flex>
245 <v-flex sm6 xs8> 245 <v-flex sm6 xs8>
246 <h5 class="my-1">{{ editedItem.classId }}</h5> 246 <h5 class="my-1">{{ editedItem.classId }}</h5>
247 </v-flex> 247 </v-flex>
248 </v-layout> 248 </v-layout>
249 <v-layout> 249 <v-layout>
250 <v-flex xs5 sm6> 250 <v-flex xs5 sm6>
251 <h5 class="right my-1"> 251 <h5 class="right my-1">
252 <b>Section:</b> 252 <b>Section:</b>
253 </h5> 253 </h5>
254 </v-flex> 254 </v-flex>
255 <v-flex sm6 xs8> 255 <v-flex sm6 xs8>
256 <h5 class="my-1">{{ editedItem.sectionId }}</h5> 256 <h5 class="my-1">{{ editedItem.sectionId }}</h5>
257 </v-flex> 257 </v-flex>
258 </v-layout> 258 </v-layout>
259 <v-layout> 259 <v-layout>
260 <v-flex xs5 sm6> 260 <v-flex xs5 sm6>
261 <h5 class="right my-1"> 261 <h5 class="right my-1">
262 <b>Subject Name:</b> 262 <b>Subject Name:</b>
263 </h5> 263 </h5>
264 </v-flex> 264 </v-flex>
265 <v-flex sm6 xs8> 265 <v-flex sm6 xs8>
266 <h5 class="my-1">{{ editedItem.subjectName }}</h5> 266 <h5 class="my-1">{{ editedItem.subjectName }}</h5>
267 </v-flex> 267 </v-flex>
268 </v-layout> 268 </v-layout>
269 <v-layout> 269 <v-layout>
270 <v-flex xs5 sm6> 270 <v-flex xs5 sm6>
271 <h5 class="right my-1"> 271 <h5 class="right my-1">
272 <b>Date:</b> 272 <b>Date:</b>
273 </h5> 273 </h5>
274 </v-flex> 274 </v-flex>
275 <v-flex sm6 xs8> 275 <v-flex sm6 xs8>
276 <h5 class="my-1">{{ dates(editedItem.date) }}</h5> 276 <h5 class="my-1">{{ dates(editedItem.date) }}</h5>
277 </v-flex> 277 </v-flex>
278 </v-layout> 278 </v-layout>
279 <v-layout> 279 <v-layout>
280 <v-flex xs5 sm6> 280 <v-flex xs5 sm6>
281 <h5 class="right my-1"> 281 <h5 class="right my-1">
282 <b>Time From:</b> 282 <b>Time From:</b>
283 </h5> 283 </h5>
284 </v-flex> 284 </v-flex>
285 <v-flex sm6 xs8> 285 <v-flex sm6 xs8>
286 <h5 class="my-1">{{ editedItem.timeFrom }}</h5> 286 <h5 class="my-1">{{ editedItem.timeFrom }}</h5>
287 </v-flex> 287 </v-flex>
288 </v-layout> 288 </v-layout>
289 <v-layout> 289 <v-layout>
290 <v-flex xs5 sm6> 290 <v-flex xs5 sm6>
291 <h5 class="right my-1"> 291 <h5 class="right my-1">
292 <b>Time To:</b> 292 <b>Time To:</b>
293 </h5> 293 </h5>
294 </v-flex> 294 </v-flex>
295 <v-flex sm6 xs8> 295 <v-flex sm6 xs8>
296 <h5 class="my-1">{{ editedItem.timeTo }}</h5> 296 <h5 class="my-1">{{ editedItem.timeTo }}</h5>
297 </v-flex> 297 </v-flex>
298 </v-layout> 298 </v-layout>
299 <v-layout> 299 <v-layout>
300 <v-flex xs5 sm6> 300 <v-flex xs5 sm6>
301 <h5 class="right my-1"> 301 <h5 class="right my-1">
302 <b>Room:</b> 302 <b>Room:</b>
303 </h5> 303 </h5>
304 </v-flex> 304 </v-flex>
305 <v-flex sm6 xs8> 305 <v-flex sm6 xs8>
306 <h5 class="my-1">{{ editedItem.room }}</h5> 306 <h5 class="my-1">{{ editedItem.room }}</h5>
307 </v-flex> 307 </v-flex>
308 </v-layout> 308 </v-layout>
309 </v-flex> 309 </v-flex>
310 </v-layout> 310 </v-layout>
311 </v-container> 311 </v-container>
312 </v-card-text> 312 </v-card-text>
313 </v-card> 313 </v-card>
314 </v-dialog> 314 </v-dialog>
315 <!-- ***** Exam Schedule TABLE****** --> 315 <!-- ***** Exam Schedule TABLE****** -->
316 <v-toolbar color="transparent" flat> 316 <v-toolbar color="transparent" flat>
317 <v-btn 317 <v-btn
318 fab 318 fab
319 dark 319 dark
320 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 320 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
321 small 321 small
322 @click="addExamScheduleDialog = true" 322 @click="addExamScheduleDialog = true"
323 > 323 >
324 <v-icon dark>add</v-icon> 324 <v-icon dark>add</v-icon>
325 </v-btn> 325 </v-btn>
326 <v-btn 326 <v-btn
327 round 327 round
328 class="open-dialog-button hidden-sm-only hidden-xs-only" 328 class="open-dialog-button hidden-sm-only hidden-xs-only"
329 dark 329 dark
330 @click="addExamScheduleDialog = true" 330 @click="addExamScheduleDialog = true"
331 > 331 >
332 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Exam Schedule 332 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Exam Schedule
333 </v-btn> 333 </v-btn>
334 <v-spacer></v-spacer> 334 <v-spacer></v-spacer>
335 <v-flex xs8 sm3 md2 class="mr-3"> 335 <v-flex xs8 sm3 md2 class="mr-3">
336 <v-select 336 <v-select
337 v-model="getScheduleData.classId" 337 v-model="getScheduleData.classId"
338 label="Select your class" 338 label="Select your class"
339 type="text" 339 type="text"
340 :items="classList" 340 :items="classList"
341 item-text="classNum" 341 item-text="classNum"
342 item-value="_id" 342 item-value="_id"
343 @change="getSchedulesList()" 343 @change="getSchedulesList()"
344 required 344 required
345 ></v-select> 345 ></v-select>
346 </v-flex> 346 </v-flex>
347 <v-card-title class="body-1" v-show="show"> 347 <v-card-title class="body-1" v-show="show">
348 <v-btn icon large flat @click="displaySearch"> 348 <v-btn icon large flat @click="displaySearch">
349 <v-avatar size="27"> 349 <v-avatar size="27">
350 <img src="/static/icon/search.png" alt="icon" /> 350 <img src="/static/icon/search.png" alt="icon" />
351 </v-avatar> 351 </v-avatar>
352 </v-btn> 352 </v-btn>
353 </v-card-title> 353 </v-card-title>
354 <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> 354 <v-flex xs8 sm8 md3 lg2 v-show="showSearch">
355 <v-layout> 355 <v-layout>
356 <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> 356 <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>
357 <v-icon @click="closeSearch" color="error">close</v-icon> 357 <v-icon @click="closeSearch" color="error">close</v-icon>
358 </v-layout> 358 </v-layout>
359 </v-flex> 359 </v-flex>
360 </v-toolbar> 360 </v-toolbar>
361 <v-data-table 361 <v-data-table
362 :headers="headers" 362 :headers="headers"
363 :items="ScheduleData" 363 :items="ScheduleData"
364 :pagination.sync="pagination" 364 :pagination.sync="pagination"
365 :search="search" 365 :search="search"
366 > 366 >
367 <template slot="items" slot-scope="props"> 367 <template slot="items" slot-scope="props">
368 <tr class="tr"> 368 <tr class="tr">
369 <td class="td td-row">{{ props.index + 1}}</td> 369 <td class="td td-row">{{ props.index + 1}}</td>
370 <td class="td td-row text-xs-center">{{ props.item.examName}}</td> 370 <td class="td td-row text-xs-center">{{ props.item.examId.examName}}</td>
371 <td class="td td-row text-xs-center">{{ props.item.classId.classNum}}</td> 371 <td class="td td-row text-xs-center">{{ props.item.classId.classNum}}</td>
372 <td class="td td-row text-xs-center">{{ props.item.sectionId.name }}</td> 372 <td class="td td-row text-xs-center">{{ props.item.sectionId.name }}</td>
373 <td class="td td-row text-xs-center">{{ props.item.subjectName }}</td> 373 <td class="td td-row text-xs-center">{{ props.item.subjectName }}</td>
374 <td class="td td-row text-xs-center">{{ dates(props.item.date) }}</td> 374 <td class="td td-row text-xs-center">{{ dates(props.item.date) }}</td>
375 <td class="td td-row text-xs-center">{{ props.item.timeFrom }} - {{ props.item.timeTo }}</td> 375 <td class="td td-row text-xs-center">{{ props.item.timeFrom }} - {{ props.item.timeTo }}</td>
376 <td class="td td-row text-xs-center">{{ props.item.room }}</td> 376 <td class="td td-row text-xs-center">{{ props.item.room }}</td>
377 <td class="td td-row text-xs-center"> 377 <td class="td td-row text-xs-center">
378 <span> 378 <span>
379 <v-tooltip top> 379 <v-tooltip top>
380 <img 380 <img
381 slot="activator" 381 slot="activator"
382 style="cursor:pointer; width:25px; height:25px; " 382 style="cursor:pointer; width:25px; height:25px; "
383 class="mr-3" 383 class="mr-3"
384 @click="profile(props.item)" 384 @click="profile(props.item)"
385 src="/static/icon/view.png" 385 src="/static/icon/view.png"
386 /> 386 />
387 <span>View</span> 387 <span>View</span>
388 </v-tooltip> 388 </v-tooltip>
389 <v-tooltip top> 389 <v-tooltip top>
390 <img 390 <img
391 slot="activator" 391 slot="activator"
392 style="cursor:pointer; width:20px; height:18px; " 392 style="cursor:pointer; width:20px; height:18px; "
393 class="mr-3" 393 class="mr-3"
394 @click="editItem(props.item)" 394 @click="editItem(props.item)"
395 src="/static/icon/edit.png" 395 src="/static/icon/edit.png"
396 /> 396 />
397 <span>Edit</span> 397 <span>Edit</span>
398 </v-tooltip> 398 </v-tooltip>
399 <v-tooltip top> 399 <v-tooltip top>
400 <img 400 <img
401 slot="activator" 401 slot="activator"
402 style="cursor:pointer; width:20px; height:20px; " 402 style="cursor:pointer; width:20px; height:20px; "
403 @click="deleteItem(props.item)" 403 @click="deleteSchedule(props.item)"
404 src="/static/icon/delete.png" 404 src="/static/icon/delete.png"
405 /> 405 />
406 <span>Delete</span> 406 <span>Delete</span>
407 </v-tooltip> 407 </v-tooltip>
408 </span> 408 </span>
409 </td> 409 </td>
410 </tr> 410 </tr>
411 </template> 411 </template>
412 <v-alert 412 <v-alert
413 slot="no-results" 413 slot="no-results"
414 :value="true" 414 :value="true"
415 color="error" 415 color="error"
416 icon="warning" 416 icon="warning"
417 >Your search for "{{ search }}" found no results.</v-alert> 417 >Your search for "{{ search }}" found no results.</v-alert>
418 </v-data-table> 418 </v-data-table>
419 419
420 <!-- ****** ADD Exam Schedule ****** --> 420 <!-- ****** ADD Exam Schedule ****** -->
421 <v-dialog v-model="addExamScheduleDialog" max-width="600"> 421 <v-dialog v-model="addExamScheduleDialog" max-width="600">
422 <v-card flat class="card-style pa-2" dark> 422 <v-card flat class="card-style pa-2" dark>
423 <v-layout> 423 <v-layout>
424 <v-flex xs12> 424 <v-flex xs12>
425 <label class="title text-xs-center">Add Class</label> 425 <label class="title text-xs-center">Add Exam</label>
426 <v-icon size="24" class="right" @click="addExamScheduleDialog = false">cancel</v-icon> 426 <v-icon size="24" class="right" @click="addExamScheduleDialog = false">cancel</v-icon>
427 </v-flex> 427 </v-flex>
428 </v-layout> 428 </v-layout>
429 <v-form ref="form" v-model="valid" lazy-validation> 429 <v-form ref="form" v-model="valid" lazy-validation>
430 <v-container fluid> 430 <v-container fluid>
431 <v-flex xs12> 431 <v-flex xs12>
432 <v-layout> 432 <v-layout>
433 <v-flex xs5 class="pt-4 subheading"> 433 <v-flex xs5 class="pt-4 subheading">
434 <label class="right">Exam Name:</label> 434 <label class="right">Exam Name:</label>
435 </v-flex> 435 </v-flex>
436 <v-flex xs7 sm7 md6 class="ml-3"> 436 <v-flex xs7 sm7 md6 class="ml-3">
437 <v-select 437 <v-select
438 label="Select your Exam Name" 438 label="Select your Exam Name"
439 :rules="examNameRules" 439 :rules="examRules"
440 :items="examList" 440 :items="examList"
441 v-model="addSchedule.examName" 441 v-model="addSchedule.examId"
442 item-text="examName" 442 item-text="examName"
443 item-value="examName" 443 item-value="_id"
444 ></v-select> 444 ></v-select>
445 </v-flex> 445 </v-flex>
446 </v-layout> 446 </v-layout>
447 </v-flex> 447 </v-flex>
448 <v-flex xs12> 448 <v-flex xs12>
449 <v-layout> 449 <v-layout>
450 <v-flex xs5 class="pt-4 subheading"> 450 <v-flex xs5 class="pt-4 subheading">
451 <label class="right">Class:</label> 451 <label class="right">Class:</label>
452 </v-flex> 452 </v-flex>
453 <v-flex xs7 sm7 md6 class="ml-3"> 453 <v-flex xs7 sm7 md6 class="ml-3">
454 <v-select 454 <v-select
455 v-model="addSchedule.classId" 455 v-model="addSchedule.classId"
456 label="Select your class" 456 label="Select your class"
457 type="text" 457 type="text"
458 :items="classList" 458 :items="classList"
459 item-text="classNum" 459 item-text="classNum"
460 item-value="_id" 460 item-value="_id"
461 :rules="classRules" 461 :rules="classRules"
462 @change="getSections(addSchedule.classId)" 462 @change="getSections(addSchedule.classId)"
463 required 463 required
464 ></v-select> 464 ></v-select>
465 </v-flex> 465 </v-flex>
466 </v-layout> 466 </v-layout>
467 </v-flex> 467 </v-flex>
468 <v-flex xs12> 468 <v-flex xs12>
469 <v-layout> 469 <v-layout>
470 <v-flex xs5 class="pt-4 subheading"> 470 <v-flex xs5 class="pt-4 subheading">
471 <label class="right">Section:</label> 471 <label class="right">Section:</label>
472 </v-flex> 472 </v-flex>
473 <v-flex xs7 sm7 md6 class="ml-3"> 473 <v-flex xs7 sm7 md6 class="ml-3">
474 <v-select 474 <v-select
475 :items="addSection" 475 :items="addSection"
476 label="Select Section" 476 label="Select Section"
477 v-model="addSchedule.sectionId" 477 v-model="addSchedule.sectionId"
478 item-text="name" 478 item-text="name"
479 item-value="_id" 479 item-value="_id"
480 name="Select Section" 480 name="Select Section"
481 :rules="sectionRules" 481 :rules="sectionRules"
482 required 482 required
483 ></v-select> 483 ></v-select>
484 </v-flex> 484 </v-flex>
485 </v-layout> 485 </v-layout>
486 </v-flex> 486 </v-flex>
487 <v-flex xs12> 487 <v-flex xs12>
488 <v-layout> 488 <v-layout>
489 <v-flex xs5 class="pt-4 subheading"> 489 <v-flex xs5 class="pt-4 subheading">
490 <label class="right">Subject Name:</label> 490 <label class="right">Subject Name:</label>
491 </v-flex> 491 </v-flex>
492 <v-flex xs7 sm7 md6 class="ml-3"> 492 <v-flex xs7 sm7 md6 class="ml-3">
493 <v-select 493 <v-select
494 :items="subjects" 494 :items="subjects"
495 label="Select Subject" 495 label="Select Subject"
496 v-model="addSchedule.subjectName" 496 v-model="addSchedule.subjectName"
497 item-text="subjectName" 497 item-text="subjectName"
498 item-value="subjectName" 498 item-value="subjectName"
499 name="Select Section" 499 name="Select Section"
500 :rules="subjectRules" 500 :rules="subjectRules"
501 required 501 required
502 ></v-select> 502 ></v-select>
503 </v-flex> 503 </v-flex>
504 </v-layout> 504 </v-layout>
505 </v-flex> 505 </v-flex>
506 <v-flex xs12> 506 <v-flex xs12>
507 <v-layout> 507 <v-layout>
508 <v-flex xs5 class="pt-4 subheading"> 508 <v-flex xs5 class="pt-4 subheading">
509 <label class="right">Date:</label> 509 <label class="right">Date:</label>
510 </v-flex> 510 </v-flex>
511 <v-flex xs7 sm7 md6 class="ml-3"> 511 <v-flex xs7 sm7 md6 class="ml-3">
512 <v-menu 512 <v-menu
513 ref="menu2" 513 ref="menu2"
514 :close-on-content-click="false" 514 :close-on-content-click="false"
515 v-model="menu2" 515 v-model="menu2"
516 :nudge-right="40" 516 :nudge-right="40"
517 :return-value.sync="addSchedule.date" 517 :return-value.sync="addSchedule.date"
518 lazy 518 lazy
519 transition="scale-transition" 519 transition="scale-transition"
520 offset-y 520 offset-y
521 full-width 521 full-width
522 min-width="290px" 522 min-width="290px"
523 > 523 >
524 <v-text-field 524 <v-text-field
525 slot="activator" 525 slot="activator"
526 v-model="addSchedule.date" 526 v-model="addSchedule.date"
527 :rules="examScheduleDateRules" 527 :rules="examScheduleDateRules"
528 label="Select Date" 528 label="Select Date"
529 append-icon="event" 529 append-icon="event"
530 readonly 530 readonly
531 ></v-text-field> 531 ></v-text-field>
532 <v-date-picker 532 <v-date-picker
533 v-model="addSchedule.date" 533 v-model="addSchedule.date"
534 @input="$refs.menu2.save(addSchedule.date)" 534 @input="$refs.menu2.save(addSchedule.date)"
535 ></v-date-picker> 535 ></v-date-picker>
536 </v-menu> 536 </v-menu>
537 </v-flex> 537 </v-flex>
538 </v-layout> 538 </v-layout>
539 </v-flex> 539 </v-flex>
540 <v-flex xs12> 540 <v-flex xs12>
541 <v-layout> 541 <v-layout>
542 <v-flex xs5 class="pt-4 subheading"> 542 <v-flex xs5 class="pt-4 subheading">
543 <label class="right">Time From:</label> 543 <label class="right">Time From:</label>
544 </v-flex> 544 </v-flex>
545 <v-flex xs7 sm7 md6 class="ml-3"> 545 <v-flex xs7 sm7 md6 class="ml-3">
546 <v-menu 546 <v-menu
547 ref="menuA" 547 ref="menuA"
548 :close-on-content-click="false" 548 :close-on-content-click="false"
549 v-model="menuB" 549 v-model="menuB"
550 :nudge-right="40" 550 :nudge-right="40"
551 :return-value.sync="addSchedule.timeFrom" 551 :return-value.sync="addSchedule.timeFrom"
552 lazy 552 lazy
553 transition="scale-transition" 553 transition="scale-transition"
554 offset-y 554 offset-y
555 full-width 555 full-width
556 max-width="290px" 556 max-width="290px"
557 min-width="290px" 557 min-width="290px"
558 > 558 >
559 <v-text-field 559 <v-text-field
560 slot="activator" 560 slot="activator"
561 v-model="addSchedule.timeIn" 561 v-model="addSchedule.timeIn"
562 label="Select your time From" 562 label="Select your time From"
563 append-icon="access_time" 563 append-icon="access_time"
564 :rules="timeInRules" 564 :rules="timeInRules"
565 readonly 565 readonly
566 ></v-text-field> 566 ></v-text-field>
567 <v-time-picker 567 <v-time-picker
568 v-model="addSchedule.timeIn" 568 v-model="addSchedule.timeIn"
569 @change="$refs.menuA.save(addSchedule.timeIn)" 569 @change="$refs.menuA.save(addSchedule.timeIn)"
570 ></v-time-picker> 570 ></v-time-picker>
571 </v-menu> 571 </v-menu>
572 </v-flex> 572 </v-flex>
573 </v-layout> 573 </v-layout>
574 </v-flex> 574 </v-flex>
575 <v-flex xs12> 575 <v-flex xs12>
576 <v-layout> 576 <v-layout>
577 <v-flex xs5 class="pt-4 subheading"> 577 <v-flex xs5 class="pt-4 subheading">
578 <label class="right">Time To:</label> 578 <label class="right">Time To:</label>
579 </v-flex> 579 </v-flex>
580 <v-flex xs7 sm7 md6 class="ml-3"> 580 <v-flex xs7 sm7 md6 class="ml-3">
581 <v-menu 581 <v-menu
582 ref="menu" 582 ref="menu"
583 :close-on-content-click="false" 583 :close-on-content-click="false"
584 v-model="menu1" 584 v-model="menu1"
585 :nudge-right="40" 585 :nudge-right="40"
586 :return-value.sync="addSchedule.timeTo" 586 :return-value.sync="addSchedule.timeTo"
587 lazy 587 lazy
588 transition="scale-transition" 588 transition="scale-transition"
589 offset-y 589 offset-y
590 full-width 590 full-width
591 max-width="290px" 591 max-width="290px"
592 min-width="290px" 592 min-width="290px"
593 > 593 >
594 <v-text-field 594 <v-text-field
595 slot="activator" 595 slot="activator"
596 v-model="addSchedule.timeTo" 596 v-model="addSchedule.timeTo"
597 label="Select your Time To" 597 label="Select your Time To"
598 append-icon="access_time" 598 append-icon="access_time"
599 :rules="timeOutRules" 599 :rules="timeOutRules"
600 readonly 600 readonly
601 ></v-text-field> 601 ></v-text-field>
602 <v-time-picker 602 <v-time-picker
603 v-model="addSchedule.timeTo" 603 v-model="addSchedule.timeTo"
604 @change="$refs.menu.save(addSchedule.timeTo)" 604 @change="$refs.menu.save(addSchedule.timeTo)"
605 ></v-time-picker> 605 ></v-time-picker>
606 </v-menu> 606 </v-menu>
607 </v-flex> 607 </v-flex>
608 </v-layout> 608 </v-layout>
609 </v-flex> 609 </v-flex>
610 <v-flex xs12> 610 <v-flex xs12>
611 <v-layout> 611 <v-layout>
612 <v-flex xs5 class="pt-4 subheading"> 612 <v-flex xs5 class="pt-4 subheading">
613 <label class="right">Room:</label> 613 <label class="right">Room:</label>
614 </v-flex> 614 </v-flex>
615 <v-flex xs7 sm7 md6 class="ml-3"> 615 <v-flex xs7 sm7 md6 class="ml-3">
616 <v-text-field 616 <v-text-field
617 placeholder="fill your room" 617 placeholder="fill your room"
618 :rules="roomRules" 618 :rules="roomRules"
619 v-model="addSchedule.room" 619 v-model="addSchedule.room"
620 @keyup.enter="submit" 620 @keyup.enter="submit"
621 ></v-text-field> 621 ></v-text-field>
622 </v-flex> 622 </v-flex>
623 </v-layout> 623 </v-layout>
624 </v-flex> 624 </v-flex>
625 <v-layout> 625 <v-layout>
626 <v-flex xs12> 626 <v-flex xs12>
627 <v-card-actions> 627 <v-card-actions>
628 <v-spacer class="hidden-xs-only"></v-spacer> 628 <v-spacer class="hidden-xs-only"></v-spacer>
629 <v-btn @click="clear" round dark class="clear-button">clear</v-btn> 629 <v-btn @click="clear" round dark class="clear-button">clear</v-btn>
630 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> 630 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
631 </v-card-actions> 631 </v-card-actions>
632 </v-flex> 632 </v-flex>
633 </v-layout> 633 </v-layout>
634 </v-container> 634 </v-container>
635 </v-form> 635 </v-form>
636 </v-card> 636 </v-card>
637 </v-dialog> 637 </v-dialog>
638 <v-snackbar 638 <v-snackbar
639 :timeout="timeout" 639 :timeout="timeout"
640 :top="y === 'top'" 640 :top="y === 'top'"
641 :right="x === 'right'" 641 :right="x === 'right'"
642 :vertical="mode === 'vertical'" 642 :vertical="mode === 'vertical'"
643 v-model="snackbar" 643 v-model="snackbar"
644 :color="color" 644 :color="color"
645 >{{ text }}</v-snackbar> 645 >{{ text }}</v-snackbar>
646 <div class="loader" v-if="showLoader"> 646 <div class="loader" v-if="showLoader">
647 <v-progress-circular indeterminate color="white"></v-progress-circular> 647 <v-progress-circular indeterminate color="white"></v-progress-circular>
648 </div> 648 </div>
649 </v-container> 649 </v-container>
650 </template> 650 </template>
651 651
652 <script> 652 <script>
653 import http from "@/Services/http.js"; 653 import http from "@/Services/http.js";
654 import moment from "moment"; 654 import moment from "moment";
655 655
656 export default { 656 export default {
657 data: () => ({ 657 data: () => ({
658 snackbar: false, 658 snackbar: false,
659 date: null, 659 date: null,
660 editDate: false, 660 editDate: false,
661 menu1: false, 661 menu1: false,
662 menuB: false, 662 menuB: false,
663 menu2: false, 663 menu2: false,
664 menuEdit: false, 664 menuEdit: false,
665 timeToEdit: false, 665 timeToEdit: false,
666 show: true, 666 show: true,
667 showSearch: false, 667 showSearch: false,
668 addExamScheduleDialog: false, 668 addExamScheduleDialog: false,
669 color: "", 669 color: "",
670 y: "top", 670 y: "top",
671 x: "right", 671 x: "right",
672 mode: "", 672 mode: "",
673 timeout: 10000, 673 timeout: 10000,
674 text: "", 674 text: "",
675 loading: false, 675 loading: false,
676 date: null, 676 date: null,
677 search: "", 677 search: "",
678 showLoader: false, 678 showLoader: false,
679 editExamScheduleDialog: false, 679 editExamScheduleDialog: false,
680 profileExamScheduleDialog: false, 680 profileExamScheduleDialog: false,
681 valid: true, 681 valid: true,
682 addSection: [], 682 addSection: [],
683 pagination: { 683 pagination: {
684 rowsPerPage: 10 684 rowsPerPage: 10
685 }, 685 },
686 examNameRules: [v => !!v || "Exam Name is required"], 686 examRules: [v => !!v || "Exam Name is required"],
687 classRules: [v => !!v || "Class Name is required"], 687 classRules: [v => !!v || "Class Name is required"],
688 sectionRules: [v => !!v || "section is required"], 688 sectionRules: [v => !!v || "section is required"],
689 subjectRules: [v => !!v || "Subject is required"], 689 subjectRules: [v => !!v || "Subject is required"],
690 timeInRules: [v => !!v || "Time In is required"], 690 timeInRules: [v => !!v || "Time In is required"],
691 timeOutRules: [v => !!v || "time Out s is required"], 691 timeOutRules: [v => !!v || "time Out s is required"],
692 roomRules: [v => !!v || "Room is required"], 692 roomRules: [v => !!v || "Room is required"],
693 examScheduleDateRules: [v => !!v || "Date is required"], 693 examScheduleDateRules: [v => !!v || "Date is required"],
694 headers: [ 694 headers: [
695 { 695 {
696 align: "", 696 align: "",
697 text: "No", 697 text: "No",
698 sortable: false, 698 sortable: false,
699 value: "No" 699 value: "No"
700 }, 700 },
701 { 701 {
702 text: "Exam Name", 702 text: "Exam Name",
703 vaue: "examName", 703 vaue: "examId.examName",
704 sortable: false, 704 sortable: false,
705 align: "center" 705 align: "center"
706 }, 706 },
707 { 707 {
708 text: "Class", 708 text: "Class",
709 value: "classId.classNum", 709 value: "classId.classNum",
710 sortable: false, 710 sortable: false,
711 align: "center" 711 align: "center"
712 }, 712 },
713 { 713 {
714 text: "Section", 714 text: "Section",
715 value: "sectionId.name", 715 value: "sectionId.name",
716 sortable: false, 716 sortable: false,
717 align: "center" 717 align: "center"
718 }, 718 },
719 { 719 {
720 text: "Subject Name", 720 text: "Subject Name",
721 value: "subjectName", 721 value: "subjectName",
722 sortable: false, 722 sortable: false,
723 align: "center" 723 align: "center"
724 }, 724 },
725 { 725 {
726 text: "Date", 726 text: "Date",
727 value: "date", 727 value: "date",
728 sortable: false, 728 sortable: false,
729 align: "center" 729 align: "center"
730 }, 730 },
731 { 731 {
732 text: "Time", 732 text: "Time",
733 value: "timeFrom", 733 value: "timeFrom",
734 sortable: false, 734 sortable: false,
735 align: "center" 735 align: "center"
736 }, 736 },
737 { 737 {
738 text: "Room", 738 text: "Room",
739 value: "room", 739 value: "room",
740 sortable: false, 740 sortable: false,
741 align: "center" 741 align: "center"
742 }, 742 },
743 { text: "Action", value: "", sortable: false, align: "center" } 743 { text: "Action", value: "", sortable: false, align: "center" }
744 ], 744 ],
745 classList: [], 745 classList: [],
746 examList: [], 746 examList: [],
747 subjects: [], 747 subjects: [],
748 addSchedule: {}, 748 addSchedule: {},
749 editedItem: {}, 749 editedItem: {},
750 getScheduleData: {}, 750 getScheduleData: {},
751 ScheduleData: [], 751 ScheduleData: [],
752 token: "" 752 token: ""
753 }), 753 }),
754 methods: { 754 methods: {
755 dates: function(date) { 755 dates: function(date) {
756 return moment(date).format("MMMM DD, YYYY"); 756 return moment(date).format("MMMM DD, YYYY");
757 }, 757 },
758 pickFile() { 758 pickFile() {
759 this.$refs.image.click(); 759 this.$refs.image.click();
760 }, 760 },
761 getSchedulesList() { 761 getSchedulesList() {
762 this.showLoader = true; 762 this.showLoader = true;
763 http() 763 http()
764 .get("/getSchedulesList", { 764 .get("/getSchedulesList", {
765 params: { classId: this.getScheduleData.classId }, 765 params: { classId: this.getScheduleData.classId },
766 headers: { Authorization: "Bearer " + this.token } 766 headers: { Authorization: "Bearer " + this.token }
767 }) 767 })
768 .then(response => { 768 .then(response => {
769 this.ScheduleData = response.data.data; 769 this.ScheduleData = response.data.data;
770 // console.log("this.ScheduleData", this.ScheduleData); 770 // console.log("this.ScheduleData", this.ScheduleData);
771 this.showLoader = false; 771 this.showLoader = false;
772 }) 772 })
773 .catch(error => { 773 .catch(error => {
774 // console.log("err====>", err); 774 // console.log("err====>", err);
775 this.showLoader = false; 775 this.showLoader = false;
776 this.loadingSearch = false; 776 this.loadingSearch = false;
777 this.snackbar = true; 777 this.snackbar = true;
778 this.text = error.response.data.message; 778 this.text = error.response.data.message;
779 if (error.response.status === 401) { 779 if (error.response.status === 401) {
780 this.$router.replace({ path: "/" }); 780 this.$router.replace({ path: "/" });
781 this.$store.dispatch("setToken", null); 781 this.$store.dispatch("setToken", null);
782 this.$store.dispatch("Id", null); 782 this.$store.dispatch("Id", null);
783 } 783 }
784 }); 784 });
785 }, 785 },
786 editItem(item) { 786 editItem(item) {
787 // console.log("item", item); 787 // console.log("item", item);
788 this.editedIndex = this.ScheduleData.indexOf(item); 788 this.editedIndex = this.ScheduleData.indexOf(item);
789 this.editedItem = Object.assign({}, item); 789 this.editedItem = Object.assign({}, item);
790 this.editedItem.examId = this.editedItem.examId._id;
790 this.editedItem.classId = this.editedItem.classId._id; 791 this.editedItem.classId = this.editedItem.classId._id;
791 this.editedItem.sectionId = this.editedItem.sectionId._id; 792 this.editedItem.sectionId = this.editedItem.sectionId._id;
792 this.editedItem.date = 793 this.editedItem.date =
793 this.editedItem.date != undefined 794 this.editedItem.date != undefined
794 ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) 795 ? (this.editedItem.date = this.editedItem.date.substring(0, 10))
795 : (this.editedItem.date = ""); 796 : (this.editedItem.date = "");
796 this.editExamScheduleDialog = true; 797 this.editExamScheduleDialog = true;
797 }, 798 },
798 profile(item) { 799 profile(item) {
799 this.editedIndex = this.ScheduleData.indexOf(item); 800 this.editedIndex = this.ScheduleData.indexOf(item);
800 this.editedItem = Object.assign({}, item); 801 this.editedItem = Object.assign({}, item);
802 this.editedItem.examId = this.editedItem.examId.examName;
801 this.editedItem.classId = this.editedItem.classId.classNum; 803 this.editedItem.classId = this.editedItem.classId.classNum;
802 this.editedItem.sectionId = this.editedItem.sectionId.name; 804 this.editedItem.sectionId = this.editedItem.sectionId.name;
803 this.profileExamScheduleDialog = true; 805 this.profileExamScheduleDialog = true;
804 }, 806 },
805 deleteSchedule(item) { 807 deleteSchedule(item) {
806 let deleteSchedule = { 808 let deleteSchedule = {
807 scheduleId: item._id 809 scheduleId: item._id
808 }; 810 };
809 http() 811 http()
810 .delete( 812 .delete(
811 "/deleteSchedule", 813 "/deleteSchedule",
812 confirm("Are you sure you want to Delete this?") && { 814 confirm("Are you sure you want to Delete this?") && {
813 params: deleteSchedule 815 params: deleteSchedule
814 } 816 }
815 ) 817 )
816 .then(response => { 818 .then(response => {
817 this.snackbar = true; 819 this.snackbar = true;
818 this.text = response.data.message; 820 this.text = response.data.message;
819 this.color = "green"; 821 this.color = "green";
820 this.getSchedulesList(); 822 this.getSchedulesList();
821 }) 823 })
822 .catch(error => { 824 .catch(error => {
823 this.snackbar = true; 825 this.snackbar = true;
824 this.color = "error"; 826 this.color = "error";
825 this.text = error.response.data.message; 827 this.text = error.response.data.message;
826 }); 828 });
827 }, 829 },
828 close() { 830 close() {
829 this.dialog = false; 831 this.dialog = false;
830 }, 832 },
831 submit() { 833 submit() {
832 if (this.$refs.form.validate()) { 834 if (this.$refs.form.validate()) {
833 this.loading = true; 835 this.loading = true;
834 http() 836 http()
835 .post("/createSchedule", this.addSchedule) 837 .post("/createSchedule", this.addSchedule)
836 .then(response => { 838 .then(response => {
837 this.snackbar = true; 839 this.snackbar = true;
838 this.text = response.data.message; 840 this.text = response.data.message;
839 this.addExamScheduleDialog = false; 841 this.addExamScheduleDialog = false;
840 this.color = "green"; 842 this.color = "green";
841 this.loading = false; 843 this.loading = false;
842 this.clear(); 844 this.clear();
843 }) 845 })
844 .catch(error => { 846 .catch(error => {
845 this.snackbar = true; 847 this.snackbar = true;
846 this.text = error.response.data.message; 848 this.text = error.response.data.message;
847 this.color = "red"; 849 this.color = "red";
848 this.loading = false; 850 this.loading = false;
849 }); 851 });
850 } 852 }
851 }, 853 },
852 clear() { 854 clear() {
853 this.$refs.form.reset(); 855 this.$refs.form.reset();
854 this.disable = false; 856 this.disable = false;
855 this.loading = false; 857 this.loading = false;
856 }, 858 },
857 save() { 859 save() {
858 this.editedItem.scheduleId = this.editedItem._id; 860 this.editedItem.scheduleId = this.editedItem._id;
859 http() 861 http()
860 .put("/updateSchedule", this.editedItem) 862 .put("/updateSchedule", this.editedItem)
861 .then(response => { 863 .then(response => {
862 this.snackbar = true; 864 this.snackbar = true;
863 this.text = "Successfully Edit Exam Schedule"; 865 this.text = "Successfully Edit Exam Schedule";
864 this.color = "green"; 866 this.color = "green";
865 this.getSchedulesList(); 867 this.getSchedulesList();
866 this.close(); 868 this.close();
867 }) 869 })
868 .catch(error => { 870 .catch(error => {
869 this.snackbar = true; 871 this.snackbar = true;
870 this.text = error.response.data.message; 872 this.text = error.response.data.message;
871 this.color = "red"; 873 this.color = "red";
872 }); 874 });
873 }, 875 },
874 getClass() { 876 getClass() {
875 http() 877 http()
876 .get("/getClassesList", { 878 .get("/getClassesList", {
877 headers: { Authorization: "Bearer " + this.token } 879 headers: { Authorization: "Bearer " + this.token }
878 }) 880 })
879 .then(response => { 881 .then(response => {
880 this.classList = response.data.data; 882 this.classList = response.data.data;
881 }) 883 })
882 .catch(err => { 884 .catch(err => {
883 // console.log("err====>", err); 885 // console.log("err====>", err);
884 }); 886 });
885 }, 887 },
886 getSections(_id) { 888 getSections(_id) {
887 for (let i = 0; i < this.classList.length; i++) { 889 for (let i = 0; i < this.classList.length; i++) {
888 if (_id == this.classList[i]._id) { 890 if (_id == this.classList[i]._id) {
889 this.subjects = this.classList[i].subjects; 891 this.subjects = this.classList[i].subjects;
890 } 892 }
891 } 893 }
892 http() 894 http()
893 .get( 895 .get(
894 "/getSectionsList", 896 "/getSectionsList",
895 { params: { classId: _id } }, 897 { params: { classId: _id } },
896 { 898 {
897 headers: { Authorization: "Bearer " + this.token } 899 headers: { Authorization: "Bearer " + this.token }
898 } 900 }
899 ) 901 )
900 .then(response => { 902 .then(response => {
901 this.addSection = response.data.data; 903 this.addSection = response.data.data;
902 }) 904 })
903 .catch(err => { 905 .catch(err => {
904 }); 906 });
905 }, 907 },
906 getExamList() { 908 getExamList() {
907 this.showLoader = true; 909 this.showLoader = true;
908 this.loadingSearch = true; 910 this.loadingSearch = true;
909 http() 911 http()
910 .get("/getExamsList", { 912 .get("/getExamsList", {
911 headers: { Authorization: "Bearer " + this.token } 913 headers: { Authorization: "Bearer " + this.token }
912 }) 914 })
913 .then(response => { 915 .then(response => {
914 this.examList = response.data.data; 916 this.examList = response.data.data;
915 this.showLoader = false; 917 this.showLoader = false;
916 this.loadingSearch = false; 918 this.loadingSearch = false;
917 }) 919 })
918 .catch(error => { 920 .catch(error => {
919 this.showLoader = false; 921 this.showLoader = false;
920 this.loadingSearch = false; 922 this.loadingSearch = false;
921 this.snackbar = true; 923 this.snackbar = true;
922 this.text = error.response.data.message; 924 this.text = error.response.data.message;
923 if (error.response.status === 401) { 925 if (error.response.status === 401) {
924 this.$router.replace({ path: "/" }); 926 this.$router.replace({ path: "/" });
925 this.$store.dispatch("setToken", null); 927 this.$store.dispatch("setToken", null);
926 this.$store.dispatch("Id", null); 928 this.$store.dispatch("Id", null);
927 } 929 }
928 }); 930 });
929 }, 931 },
930 displaySearch() { 932 displaySearch() {
931 (this.show = false), (this.showSearch = true); 933 (this.show = false), (this.showSearch = true);
932 }, 934 },
933 closeSearch() { 935 closeSearch() {
934 this.showSearch = false; 936 this.showSearch = false;
935 this.show = true; 937 this.show = true;
936 this.search = ""; 938 this.search = "";
937 } 939 }
938 }, 940 },
939 mounted() { 941 mounted() {
940 this.token = this.$store.state.token; 942 this.token = this.$store.state.token;
941 this.getClass(); 943 this.getClass();
942 this.getExamList(); 944 this.getExamList();
943 } 945 }
944 }; 946 };
945 </script> 947 </script>