viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 8627b28904c22278b320f8787dca97e79d768423

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

set table fields and get data

Showing 3 changed files with 8 additions and 25 deletions   Show diff stats
src/pages/Exam/examSchedule.vue
Diff comments   View file @8627b28
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="examRules" 23 :rules="examRules"
24 :items="examList" 24 :items="examList"
25 v-model="editedItem.examId" 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="_id" 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>
56 </v-flex>
57 <v-flex xs7 class="ml-3">
58 <v-select
59 :items="addSection"
60 label="Select your section"
61 v-model="editedItem.sectionId"
62 item-text="name"
63 item-value="_id"
64 name="Select Section"
65 required
66 ></v-select>
67 </v-flex>
68 </v-layout>
69 </v-flex>
70 <v-flex xs12 sm12>
71 <v-layout>
72 <v-flex xs4 class="pt-4 subheading">
73 <label class="right">Subject Name:</label> 55 <label class="right">Subject Name:</label>
74 </v-flex> 56 </v-flex>
75 <v-flex xs7 class="ml-3"> 57 <v-flex xs7 class="ml-3">
76 <v-select 58 <v-select
77 :items="subjects" 59 :items="subjects"
78 label="Select your Subject Name" 60 label="Select your Subject"
79 v-model="editedItem.subjectName" 61 v-model="editedItem.subjectName"
80 item-text="subjectName" 62 item-text="subjectName"
81 item-value="subjectName" 63 item-value="subjectName"
82 name="Select Section" 64 name="Select Subject"
83 required 65 required
84 ></v-select> 66 ></v-select>
85 </v-flex> 67 </v-flex>
86 </v-layout> 68 </v-layout>
87 </v-flex> 69 </v-flex>
88 <v-flex xs12 sm12> 70 <v-flex xs12 sm12>
89 <v-layout> 71 <v-layout>
90 <v-flex xs4 class="pt-4 subheading"> 72 <v-flex xs4 class="pt-4 subheading">
91 <label class="right">Date:</label> 73 <label class="right">Date:</label>
92 </v-flex> 74 </v-flex>
93 <v-flex xs7 class="ml-3"> 75 <v-flex xs7 class="ml-3">
94 <v-menu 76 <v-menu
95 ref="editDate" 77 ref="editDate"
96 :close-on-content-click="false" 78 :close-on-content-click="false"
97 v-model="editDate" 79 v-model="editDate"
98 :nudge-right="40" 80 :nudge-right="40"
99 :return-value.sync="editDate" 81 :return-value.sync="editDate"
100 lazy 82 lazy
101 transition="scale-transition" 83 transition="scale-transition"
102 offset-y 84 offset-y
103 full-width 85 full-width
104 min-width="290px" 86 min-width="290px"
105 > 87 >
106 <v-text-field 88 <v-text-field
107 slot="activator" 89 slot="activator"
108 v-model="editedItem.date" 90 v-model="editedItem.date"
109 label="Select Date" 91 label="Select Date"
110 append-icon="event" 92 append-icon="event"
111 readonly 93 readonly
112 ></v-text-field> 94 ></v-text-field>
113 <v-date-picker v-model="editedItem.date" @input="editDate = false"></v-date-picker> 95 <v-date-picker v-model="editedItem.date" @input="editDate = false"></v-date-picker>
114 </v-menu> 96 </v-menu>
115 </v-flex> 97 </v-flex>
116 </v-layout> 98 </v-layout>
117 </v-flex> 99 </v-flex>
118 <v-flex xs12 sm12> 100 <v-flex xs12 sm12>
119 <v-layout> 101 <v-layout>
120 <v-flex xs4 class="pt-4 subheading"> 102 <v-flex xs4 class="pt-4 subheading">
121 <label class="right">Time From:</label> 103 <label class="right">Time From:</label>
122 </v-flex> 104 </v-flex>
123 <v-flex xs7 class="ml-3"> 105 <v-flex xs7 class="ml-3">
124 <v-menu 106 <v-menu
125 ref="menuEdit" 107 ref="menuEdit"
126 :close-on-content-click="false" 108 :close-on-content-click="false"
127 v-model="menuEdit" 109 v-model="menuEdit"
128 :nudge-right="40" 110 :nudge-right="40"
129 :return-value.sync="editedItem.timeFrom" 111 :return-value.sync="editedItem.timeFrom"
130 lazy 112 lazy
131 transition="scale-transition" 113 transition="scale-transition"
132 offset-y 114 offset-y
133 full-width 115 full-width
134 max-width="290px" 116 max-width="290px"
135 min-width="290px" 117 min-width="290px"
136 > 118 >
137 <v-text-field 119 <v-text-field
138 slot="activator" 120 slot="activator"
139 v-model="editedItem.timeFrom" 121 v-model="editedItem.timeFrom"
140 label="Select your time From" 122 label="Select your time From"
141 append-icon="access_time" 123 append-icon="access_time"
142 readonly 124 readonly
143 ></v-text-field> 125 ></v-text-field>
144 <v-time-picker 126 <v-time-picker
145 v-model="editedItem.timeIn" 127 v-model="editedItem.timeIn"
146 @change="$refs.menuEdit.save(editedItem.timeIn)" 128 @change="$refs.menuEdit.save(editedItem.timeIn)"
147 ></v-time-picker> 129 ></v-time-picker>
148 </v-menu> 130 </v-menu>
149 </v-flex> 131 </v-flex>
150 </v-layout> 132 </v-layout>
151 </v-flex> 133 </v-flex>
152 <v-flex xs12 sm12> 134 <v-flex xs12 sm12>
153 <v-layout> 135 <v-layout>
154 <v-flex xs4 class="pt-4 subheading"> 136 <v-flex xs4 class="pt-4 subheading">
155 <label class="right">Time To:</label> 137 <label class="right">Time To:</label>
156 </v-flex> 138 </v-flex>
157 <v-flex xs7 class="ml-3"> 139 <v-flex xs7 class="ml-3">
158 <v-menu 140 <v-menu
159 ref="timeToEdit" 141 ref="timeToEdit"
160 :close-on-content-click="false" 142 :close-on-content-click="false"
161 v-model="timeToEdit" 143 v-model="timeToEdit"
162 :nudge-right="40" 144 :nudge-right="40"
163 :return-value.sync="editedItem.timeTo" 145 :return-value.sync="editedItem.timeTo"
164 lazy 146 lazy
165 transition="scale-transition" 147 transition="scale-transition"
166 offset-y 148 offset-y
167 full-width 149 full-width
168 max-width="290px" 150 max-width="290px"
169 min-width="290px" 151 min-width="290px"
170 > 152 >
171 <v-text-field 153 <v-text-field
172 slot="activator" 154 slot="activator"
173 v-model="editedItem.timeTo" 155 v-model="editedItem.timeTo"
174 label="Select your Time To" 156 label="Select your Time To"
175 append-icon="access_time" 157 append-icon="access_time"
176 readonly 158 readonly
177 ></v-text-field> 159 ></v-text-field>
178 <v-time-picker 160 <v-time-picker
179 v-model="editedItem.timeTo" 161 v-model="editedItem.timeTo"
180 @change="$refs.timeToEdit.save(editedItem.timeTo)" 162 @change="$refs.timeToEdit.save(editedItem.timeTo)"
181 ></v-time-picker> 163 ></v-time-picker>
182 </v-menu> 164 </v-menu>
183 </v-flex> 165 </v-flex>
184 </v-layout> 166 </v-layout>
185 </v-flex> 167 </v-flex>
186 <v-flex xs12 sm12> 168 <v-flex xs12 sm12>
187 <v-layout> 169 <v-layout>
188 <v-flex xs4 class="pt-4 subheading"> 170 <v-flex xs4 class="pt-4 subheading">
189 <label class="right">Room:</label> 171 <label class="right">Room:</label>
190 </v-flex> 172 </v-flex>
191 <v-flex xs7 class="ml-3"> 173 <v-flex xs7 class="ml-3">
192 <v-text-field 174 <v-text-field
193 placeholder="fill your room" 175 placeholder="fill your room"
194 v-model="editedItem.room" 176 v-model="editedItem.room"
195 @keyup.enter="save" 177 @keyup.enter="save"
196 ></v-text-field> 178 ></v-text-field>
197 </v-flex> 179 </v-flex>
198 </v-layout> 180 </v-layout>
199 </v-flex> 181 </v-flex>
200 </v-layout> 182 </v-layout>
201 <v-layout> 183 <v-layout>
202 <v-flex xs12> 184 <v-flex xs12>
203 <v-card-actions> 185 <v-card-actions>
204 <v-spacer></v-spacer> 186 <v-spacer></v-spacer>
205 <v-btn round dark @click="save" class="add-button">Save</v-btn> 187 <v-btn round dark @click="save" class="add-button">Save</v-btn>
206 </v-card-actions> 188 </v-card-actions>
207 </v-flex> 189 </v-flex>
208 </v-layout> 190 </v-layout>
209 </v-container> 191 </v-container>
210 </v-form> 192 </v-form>
211 </v-card-text> 193 </v-card-text>
212 </v-card> 194 </v-card>
213 </v-dialog> 195 </v-dialog>
214 196
215 <!-- ****** PROFILE VIEW Exam Schedule DATA ****** --> 197 <!-- ****** PROFILE VIEW Exam Schedule DATA ****** -->
216 198
217 <v-dialog v-model="profileExamScheduleDialog" max-width="600px"> 199 <v-dialog v-model="profileExamScheduleDialog" max-width="600px">
218 <v-card flat class="card-style pa-3" dark> 200 <v-card flat class="card-style pa-3" dark>
219 <v-layout> 201 <v-layout>
220 <v-flex xs12> 202 <v-flex xs12>
221 <label class="title text-xs-center">View Exam Schedule</label> 203 <label class="title text-xs-center">View Exam Schedule</label>
222 <v-icon size="24" class="right" @click="profileExamScheduleDialog = false">cancel</v-icon> 204 <v-icon size="24" class="right" @click="profileExamScheduleDialog = false">cancel</v-icon>
223 </v-flex> 205 </v-flex>
224 </v-layout> 206 </v-layout>
225 <v-card-text> 207 <v-card-text>
226 <v-container grid-list-md> 208 <v-container grid-list-md>
227 <v-layout wrap> 209 <v-layout wrap>
228 <v-flex> 210 <v-flex>
229 <v-layout> 211 <v-layout>
230 <v-flex xs5 sm6> 212 <v-flex xs5 sm6>
231 <h5 class="right my-1"> 213 <h5 class="right my-1">
232 <b>Exam Name:</b> 214 <b>Exam Name:</b>
233 </h5> 215 </h5>
234 </v-flex> 216 </v-flex>
235 <v-flex sm6 xs8> 217 <v-flex sm6 xs8>
236 <h5 class="my-1">{{ editedItem.examId}}</h5> 218 <h5 class="my-1">{{ editedItem.examId}}</h5>
237 </v-flex> 219 </v-flex>
238 </v-layout> 220 </v-layout>
239 <v-layout> 221 <v-layout>
240 <v-flex xs5 sm6> 222 <v-flex xs5 sm6>
241 <h5 class="right my-1"> 223 <h5 class="right my-1">
242 <b>Class:</b> 224 <b>Class:</b>
243 </h5> 225 </h5>
244 </v-flex> 226 </v-flex>
245 <v-flex sm6 xs8> 227 <v-flex sm6 xs8>
246 <h5 class="my-1">{{ editedItem.classId }}</h5> 228 <h5 class="my-1">{{ editedItem.classId }}</h5>
247 </v-flex> 229 </v-flex>
248 </v-layout> 230 </v-layout>
249 <v-layout> 231 <v-layout>
250 <v-flex xs5 sm6> 232 <v-flex xs5 sm6>
251 <h5 class="right my-1"> 233 <h5 class="right my-1">
252 <b>Section:</b> 234 <b>Section:</b>
253 </h5> 235 </h5>
254 </v-flex> 236 </v-flex>
255 <v-flex sm6 xs8> 237 <v-flex sm6 xs8>
256 <h5 class="my-1">{{ editedItem.sectionId }}</h5> 238 <h5 class="my-1">{{ editedItem.sectionId }}</h5>
257 </v-flex> 239 </v-flex>
258 </v-layout> 240 </v-layout>
259 <v-layout> 241 <v-layout>
260 <v-flex xs5 sm6> 242 <v-flex xs5 sm6>
261 <h5 class="right my-1"> 243 <h5 class="right my-1">
262 <b>Subject Name:</b> 244 <b>Subject Name:</b>
263 </h5> 245 </h5>
264 </v-flex> 246 </v-flex>
265 <v-flex sm6 xs8> 247 <v-flex sm6 xs8>
266 <h5 class="my-1">{{ editedItem.subjectName }}</h5> 248 <h5 class="my-1">{{ editedItem.subjectName }}</h5>
267 </v-flex> 249 </v-flex>
268 </v-layout> 250 </v-layout>
269 <v-layout> 251 <v-layout>
270 <v-flex xs5 sm6> 252 <v-flex xs5 sm6>
271 <h5 class="right my-1"> 253 <h5 class="right my-1">
272 <b>Date:</b> 254 <b>Date:</b>
273 </h5> 255 </h5>
274 </v-flex> 256 </v-flex>
275 <v-flex sm6 xs8> 257 <v-flex sm6 xs8>
276 <h5 class="my-1">{{ dates(editedItem.date) }}</h5> 258 <h5 class="my-1">{{ dates(editedItem.date) }}</h5>
277 </v-flex> 259 </v-flex>
278 </v-layout> 260 </v-layout>
279 <v-layout> 261 <v-layout>
280 <v-flex xs5 sm6> 262 <v-flex xs5 sm6>
281 <h5 class="right my-1"> 263 <h5 class="right my-1">
282 <b>Time From:</b> 264 <b>Time From:</b>
283 </h5> 265 </h5>
284 </v-flex> 266 </v-flex>
285 <v-flex sm6 xs8> 267 <v-flex sm6 xs8>
286 <h5 class="my-1">{{ editedItem.timeFrom }}</h5> 268 <h5 class="my-1">{{ editedItem.timeFrom }}</h5>
287 </v-flex> 269 </v-flex>
288 </v-layout> 270 </v-layout>
289 <v-layout> 271 <v-layout>
290 <v-flex xs5 sm6> 272 <v-flex xs5 sm6>
291 <h5 class="right my-1"> 273 <h5 class="right my-1">
292 <b>Time To:</b> 274 <b>Time To:</b>
293 </h5> 275 </h5>
294 </v-flex> 276 </v-flex>
295 <v-flex sm6 xs8> 277 <v-flex sm6 xs8>
296 <h5 class="my-1">{{ editedItem.timeTo }}</h5> 278 <h5 class="my-1">{{ editedItem.timeTo }}</h5>
297 </v-flex> 279 </v-flex>
298 </v-layout> 280 </v-layout>
299 <v-layout> 281 <v-layout>
300 <v-flex xs5 sm6> 282 <v-flex xs5 sm6>
301 <h5 class="right my-1"> 283 <h5 class="right my-1">
302 <b>Room:</b> 284 <b>Room:</b>
303 </h5> 285 </h5>
304 </v-flex> 286 </v-flex>
305 <v-flex sm6 xs8> 287 <v-flex sm6 xs8>
306 <h5 class="my-1">{{ editedItem.room }}</h5> 288 <h5 class="my-1">{{ editedItem.room }}</h5>
307 </v-flex> 289 </v-flex>
308 </v-layout> 290 </v-layout>
309 </v-flex> 291 </v-flex>
310 </v-layout> 292 </v-layout>
311 </v-container> 293 </v-container>
312 </v-card-text> 294 </v-card-text>
313 </v-card> 295 </v-card>
314 </v-dialog> 296 </v-dialog>
315 <!-- ***** Exam Schedule TABLE****** --> 297 <!-- ***** Exam Schedule TABLE****** -->
316 <v-toolbar color="transparent" flat> 298 <v-toolbar color="transparent" flat>
317 <v-btn 299 <v-btn
318 fab 300 fab
319 dark 301 dark
320 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only" 302 class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
321 small 303 small
322 @click="addExamScheduleDialog = true" 304 @click="addExamScheduleDialog = true"
323 > 305 >
324 <v-icon dark>add</v-icon> 306 <v-icon dark>add</v-icon>
325 </v-btn> 307 </v-btn>
326 <v-btn 308 <v-btn
327 round 309 round
328 class="open-dialog-button hidden-sm-only hidden-xs-only" 310 class="open-dialog-button hidden-sm-only hidden-xs-only"
329 dark 311 dark
330 @click="addExamScheduleDialog = true" 312 @click="addExamScheduleDialog = true"
331 > 313 >
332 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Exam Schedule 314 <v-icon class="white--text pr-1" size="20">add</v-icon>Add Exam Schedule
333 </v-btn> 315 </v-btn>
334 <v-spacer></v-spacer> 316 <v-spacer></v-spacer>
335 <v-flex xs8 sm3 md2 class="mr-3"> 317 <v-flex xs8 sm3 md2 class="mr-3">
336 <v-select 318 <v-select
337 v-model="getScheduleData.classId" 319 v-model="getScheduleData.classId"
338 label="Select your class" 320 label="Select your class"
339 type="text" 321 type="text"
340 :items="classList" 322 :items="classList"
341 item-text="classNum" 323 item-text="classNum"
342 item-value="_id" 324 item-value="_id"
343 @change="getSchedulesList()" 325 @change="getSchedulesList()"
344 required 326 required
345 ></v-select> 327 ></v-select>
346 </v-flex> 328 </v-flex>
347 <v-card-title class="body-1" v-show="show"> 329 <v-card-title class="body-1" v-show="show">
348 <v-btn icon large flat @click="displaySearch"> 330 <v-btn icon large flat @click="displaySearch">
349 <v-avatar size="27"> 331 <v-avatar size="27">
350 <img src="/static/icon/search.png" alt="icon" /> 332 <img src="/static/icon/search.png" alt="icon" />
351 </v-avatar> 333 </v-avatar>
352 </v-btn> 334 </v-btn>
353 </v-card-title> 335 </v-card-title>
354 <v-flex xs8 sm8 md3 lg2 v-show="showSearch"> 336 <v-flex xs8 sm8 md3 lg2 v-show="showSearch">
355 <v-layout> 337 <v-layout>
356 <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field> 338 <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> 339 <v-icon @click="closeSearch" color="error">close</v-icon>
358 </v-layout> 340 </v-layout>
359 </v-flex> 341 </v-flex>
360 </v-toolbar> 342 </v-toolbar>
361 <v-data-table 343 <v-data-table
362 :headers="headers" 344 :headers="headers"
363 :items="ScheduleData" 345 :items="ScheduleData"
364 :pagination.sync="pagination" 346 :pagination.sync="pagination"
365 :search="search" 347 :search="search"
366 > 348 >
367 <template slot="items" slot-scope="props"> 349 <template slot="items" slot-scope="props">
368 <tr class="tr"> 350 <tr class="tr">
369 <td class="td td-row">{{ props.index + 1}}</td> 351 <td class="td td-row">{{ props.index + 1}}</td>
370 <td class="td td-row text-xs-center">{{ props.item.examId.examName}}</td> 352 <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> 353 <td class="td td-row text-xs-center">{{ props.item.classId.classNum}}</td>
372 <td class="td td-row text-xs-center">{{ props.item.subjectName }}</td> 354 <td class="td td-row text-xs-center">{{ props.item.subjectName }}</td>
373 <td class="td td-row text-xs-center">{{ dates(props.item.date) }}</td> 355 <td class="td td-row text-xs-center">{{ dates(props.item.date) }}</td>
374 <td class="td td-row text-xs-center">{{ props.item.timeFrom }} - {{ props.item.timeTo }}</td> 356 <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.room }}</td> 357 <td class="td td-row text-xs-center">{{ props.item.room }}</td>
376 <td class="td td-row text-xs-center"> 358 <td class="td td-row text-xs-center">
377 <span> 359 <span>
378 <v-tooltip top> 360 <v-tooltip top>
379 <img 361 <img
380 slot="activator" 362 slot="activator"
381 style="cursor:pointer; width:25px; height:25px; " 363 style="cursor:pointer; width:25px; height:25px; "
382 class="mr-3" 364 class="mr-3"
383 @click="profile(props.item)" 365 @click="profile(props.item)"
384 src="/static/icon/view.png" 366 src="/static/icon/view.png"
385 /> 367 />
386 <span>View</span> 368 <span>View</span>
387 </v-tooltip> 369 </v-tooltip>
388 <v-tooltip top> 370 <v-tooltip top>
389 <img 371 <img
390 slot="activator" 372 slot="activator"
391 style="cursor:pointer; width:20px; height:18px; " 373 style="cursor:pointer; width:20px; height:18px; "
392 class="mr-3" 374 class="mr-3"
393 @click="editItem(props.item)" 375 @click="editItem(props.item)"
394 src="/static/icon/edit.png" 376 src="/static/icon/edit.png"
395 /> 377 />
396 <span>Edit</span> 378 <span>Edit</span>
397 </v-tooltip> 379 </v-tooltip>
398 <v-tooltip top> 380 <v-tooltip top>
399 <img 381 <img
400 slot="activator" 382 slot="activator"
401 style="cursor:pointer; width:20px; height:20px; " 383 style="cursor:pointer; width:20px; height:20px; "
402 @click="deleteSchedule(props.item)" 384 @click="deleteSchedule(props.item)"
403 src="/static/icon/delete.png" 385 src="/static/icon/delete.png"
404 /> 386 />
405 <span>Delete</span> 387 <span>Delete</span>
406 </v-tooltip> 388 </v-tooltip>
407 </span> 389 </span>
408 </td> 390 </td>
409 </tr> 391 </tr>
410 </template> 392 </template>
411 <v-alert 393 <v-alert
412 slot="no-results" 394 slot="no-results"
413 :value="true" 395 :value="true"
414 color="error" 396 color="error"
415 icon="warning" 397 icon="warning"
416 >Your search for "{{ search }}" found no results.</v-alert> 398 >Your search for "{{ search }}" found no results.</v-alert>
417 </v-data-table> 399 </v-data-table>
418 400
419 <!-- ****** ADD Exam Schedule ****** --> 401 <!-- ****** ADD Exam Schedule ****** -->
420 <v-dialog v-model="addExamScheduleDialog" max-width="600"> 402 <v-dialog v-model="addExamScheduleDialog" max-width="600">
421 <v-card flat class="card-style pa-2" dark> 403 <v-card flat class="card-style pa-2" dark>
422 <v-layout> 404 <v-layout>
423 <v-flex xs12> 405 <v-flex xs12>
424 <label class="title text-xs-center">Add Exam</label> 406 <label class="title text-xs-center">Add Exam</label>
425 <v-icon size="24" class="right" @click="addExamScheduleDialog = false">cancel</v-icon> 407 <v-icon size="24" class="right" @click="addExamScheduleDialog = false">cancel</v-icon>
426 </v-flex> 408 </v-flex>
427 </v-layout> 409 </v-layout>
428 <v-form ref="form" v-model="valid" lazy-validation> 410 <v-form ref="form" v-model="valid" lazy-validation>
429 <v-container fluid> 411 <v-container fluid>
430 <v-flex xs12> 412 <v-flex xs12>
431 <v-layout> 413 <v-layout>
432 <v-flex xs5 class="pt-4 subheading"> 414 <v-flex xs5 class="pt-4 subheading">
433 <label class="right">Exam Name:</label> 415 <label class="right">Exam Name:</label>
434 </v-flex> 416 </v-flex>
435 <v-flex xs7 sm7 md6 class="ml-3"> 417 <v-flex xs7 sm7 md6 class="ml-3">
436 <v-select 418 <v-select
437 label="Select your Exam Name" 419 label="Select your Exam Name"
438 :rules="examRules" 420 :rules="examRules"
439 :items="examList" 421 :items="examList"
440 v-model="addSchedule.examId" 422 v-model="addSchedule.examId"
441 item-text="examName" 423 item-text="examName"
442 item-value="_id" 424 item-value="_id"
443 ></v-select> 425 ></v-select>
444 </v-flex> 426 </v-flex>
445 </v-layout> 427 </v-layout>
446 </v-flex> 428 </v-flex>
447 <v-flex xs12> 429 <v-flex xs12>
448 <v-layout> 430 <v-layout>
449 <v-flex xs5 class="pt-4 subheading"> 431 <v-flex xs5 class="pt-4 subheading">
450 <label class="right">Class:</label> 432 <label class="right">Class:</label>
451 </v-flex> 433 </v-flex>
452 <v-flex xs7 sm7 md6 class="ml-3"> 434 <v-flex xs7 sm7 md6 class="ml-3">
453 <v-select 435 <v-select
454 v-model="addSchedule.classId" 436 v-model="addSchedule.classId"
455 label="Select your class" 437 label="Select your class"
456 type="text" 438 type="text"
457 :items="classList" 439 :items="classList"
458 item-text="classNum" 440 item-text="classNum"
459 item-value="_id" 441 item-value="_id"
460 :rules="classRules" 442 :rules="classRules"
461 @change="getSections(addSchedule.classId)" 443 @change="getSections(addSchedule.classId)"
462 required 444 required
463 ></v-select> 445 ></v-select>
464 </v-flex> 446 </v-flex>
465 </v-layout> 447 </v-layout>
466 </v-flex> 448 </v-flex>
467 <v-flex xs12> 449 <v-flex xs12>
468 <v-layout> 450 <v-layout>
469 <v-flex xs5 class="pt-4 subheading"> 451 <v-flex xs5 class="pt-4 subheading">
470 <label class="right">Section:</label> 452 <label class="right">Section:</label>
471 </v-flex> 453 </v-flex>
472 <v-flex xs7 sm7 md6 class="ml-3"> 454 <v-flex xs7 sm7 md6 class="ml-3">
473 <v-select 455 <v-select
474 :items="addSection" 456 :items="addSection"
475 label="Select Section" 457 label="Select Section"
476 v-model="addSchedule.sectionId" 458 v-model="addSchedule.sectionId"
477 item-text="name" 459 item-text="name"
478 item-value="_id" 460 item-value="_id"
479 name="Select Section" 461 name="Select Section"
480 :rules="sectionRules" 462 :rules="sectionRules"
481 required 463 required
482 ></v-select> 464 ></v-select>
483 </v-flex> 465 </v-flex>
484 </v-layout> 466 </v-layout>
485 </v-flex> 467 </v-flex>
486 <v-flex xs12> 468 <v-flex xs12>
487 <v-layout> 469 <v-layout>
488 <v-flex xs5 class="pt-4 subheading"> 470 <v-flex xs5 class="pt-4 subheading">
489 <label class="right">Subject Name:</label> 471 <label class="right">Subject Name:</label>
490 </v-flex> 472 </v-flex>
491 <v-flex xs7 sm7 md6 class="ml-3"> 473 <v-flex xs7 sm7 md6 class="ml-3">
492 <v-select 474 <v-select
493 :items="subjects" 475 :items="subjects"
494 label="Select Subject" 476 label="Select Subject"
495 v-model="addSchedule.subjectName" 477 v-model="addSchedule.subjectName"
496 item-text="subjectName" 478 item-text="subjectName"
497 item-value="subjectName" 479 item-value="subjectName"
498 name="Select Section" 480 name="Select Section"
499 :rules="subjectRules" 481 :rules="subjectRules"
500 required 482 required
501 ></v-select> 483 ></v-select>
502 </v-flex> 484 </v-flex>
503 </v-layout> 485 </v-layout>
504 </v-flex> 486 </v-flex>
505 <v-flex xs12> 487 <v-flex xs12>
506 <v-layout> 488 <v-layout>
507 <v-flex xs5 class="pt-4 subheading"> 489 <v-flex xs5 class="pt-4 subheading">
508 <label class="right">Date:</label> 490 <label class="right">Date:</label>
509 </v-flex> 491 </v-flex>
510 <v-flex xs7 sm7 md6 class="ml-3"> 492 <v-flex xs7 sm7 md6 class="ml-3">
511 <v-menu 493 <v-menu
512 ref="menu2" 494 ref="menu2"
513 :close-on-content-click="false" 495 :close-on-content-click="false"
514 v-model="menu2" 496 v-model="menu2"
515 :nudge-right="40" 497 :nudge-right="40"
516 :return-value.sync="addSchedule.date" 498 :return-value.sync="addSchedule.date"
517 lazy 499 lazy
518 transition="scale-transition" 500 transition="scale-transition"
519 offset-y 501 offset-y
520 full-width 502 full-width
521 min-width="290px" 503 min-width="290px"
522 > 504 >
523 <v-text-field 505 <v-text-field
524 slot="activator" 506 slot="activator"
525 v-model="addSchedule.date" 507 v-model="addSchedule.date"
526 :rules="examScheduleDateRules" 508 :rules="examScheduleDateRules"
527 label="Select Date" 509 label="Select Date"
528 append-icon="event" 510 append-icon="event"
529 readonly 511 readonly
530 ></v-text-field> 512 ></v-text-field>
531 <v-date-picker 513 <v-date-picker
532 v-model="addSchedule.date" 514 v-model="addSchedule.date"
533 @input="$refs.menu2.save(addSchedule.date)" 515 @input="$refs.menu2.save(addSchedule.date)"
534 ></v-date-picker> 516 ></v-date-picker>
535 </v-menu> 517 </v-menu>
536 </v-flex> 518 </v-flex>
537 </v-layout> 519 </v-layout>
538 </v-flex> 520 </v-flex>
539 <v-flex xs12> 521 <v-flex xs12>
540 <v-layout> 522 <v-layout>
541 <v-flex xs5 class="pt-4 subheading"> 523 <v-flex xs5 class="pt-4 subheading">
542 <label class="right">Time From:</label> 524 <label class="right">Time From:</label>
543 </v-flex> 525 </v-flex>
544 <v-flex xs7 sm7 md6 class="ml-3"> 526 <v-flex xs7 sm7 md6 class="ml-3">
545 <v-menu 527 <v-menu
546 ref="menuA" 528 ref="menuA"
547 :close-on-content-click="false" 529 :close-on-content-click="false"
548 v-model="menuB" 530 v-model="menuB"
549 :nudge-right="40" 531 :nudge-right="40"
550 :return-value.sync="addSchedule.timeFrom" 532 :return-value.sync="addSchedule.timeFrom"
551 lazy 533 lazy
552 transition="scale-transition" 534 transition="scale-transition"
553 offset-y 535 offset-y
554 full-width 536 full-width
555 max-width="290px" 537 max-width="290px"
556 min-width="290px" 538 min-width="290px"
557 > 539 >
558 <v-text-field 540 <v-text-field
559 slot="activator" 541 slot="activator"
560 v-model="addSchedule.timeIn" 542 v-model="addSchedule.timeIn"
561 label="Select your time From" 543 label="Select your time From"
562 append-icon="access_time" 544 append-icon="access_time"
563 :rules="timeInRules" 545 :rules="timeInRules"
564 readonly 546 readonly
565 ></v-text-field> 547 ></v-text-field>
566 <v-time-picker 548 <v-time-picker
567 v-model="addSchedule.timeIn" 549 v-model="addSchedule.timeIn"
568 @change="$refs.menuA.save(addSchedule.timeIn)" 550 @change="$refs.menuA.save(addSchedule.timeIn)"
569 ></v-time-picker> 551 ></v-time-picker>
570 </v-menu> 552 </v-menu>
571 </v-flex> 553 </v-flex>
572 </v-layout> 554 </v-layout>
573 </v-flex> 555 </v-flex>
574 <v-flex xs12> 556 <v-flex xs12>
575 <v-layout> 557 <v-layout>
576 <v-flex xs5 class="pt-4 subheading"> 558 <v-flex xs5 class="pt-4 subheading">
577 <label class="right">Time To:</label> 559 <label class="right">Time To:</label>
578 </v-flex> 560 </v-flex>
579 <v-flex xs7 sm7 md6 class="ml-3"> 561 <v-flex xs7 sm7 md6 class="ml-3">
580 <v-menu 562 <v-menu
581 ref="menu" 563 ref="menu"
582 :close-on-content-click="false" 564 :close-on-content-click="false"
583 v-model="menu1" 565 v-model="menu1"
584 :nudge-right="40" 566 :nudge-right="40"
585 :return-value.sync="addSchedule.timeTo" 567 :return-value.sync="addSchedule.timeTo"
586 lazy 568 lazy
587 transition="scale-transition" 569 transition="scale-transition"
588 offset-y 570 offset-y
589 full-width 571 full-width
590 max-width="290px" 572 max-width="290px"
591 min-width="290px" 573 min-width="290px"
592 > 574 >
593 <v-text-field 575 <v-text-field
594 slot="activator" 576 slot="activator"
595 v-model="addSchedule.timeTo" 577 v-model="addSchedule.timeTo"
596 label="Select your Time To" 578 label="Select your Time To"
597 append-icon="access_time" 579 append-icon="access_time"
598 :rules="timeOutRules" 580 :rules="timeOutRules"
599 readonly 581 readonly
600 ></v-text-field> 582 ></v-text-field>
601 <v-time-picker 583 <v-time-picker
602 v-model="addSchedule.timeTo" 584 v-model="addSchedule.timeTo"
603 @change="$refs.menu.save(addSchedule.timeTo)" 585 @change="$refs.menu.save(addSchedule.timeTo)"
604 ></v-time-picker> 586 ></v-time-picker>
605 </v-menu> 587 </v-menu>
606 </v-flex> 588 </v-flex>
607 </v-layout> 589 </v-layout>
608 </v-flex> 590 </v-flex>
609 <v-flex xs12> 591 <v-flex xs12>
610 <v-layout> 592 <v-layout>
611 <v-flex xs5 class="pt-4 subheading"> 593 <v-flex xs5 class="pt-4 subheading">
612 <label class="right">Room:</label> 594 <label class="right">Room:</label>
613 </v-flex> 595 </v-flex>
614 <v-flex xs7 sm7 md6 class="ml-3"> 596 <v-flex xs7 sm7 md6 class="ml-3">
615 <v-text-field 597 <v-text-field
616 placeholder="fill your room" 598 placeholder="fill your room"
617 :rules="roomRules" 599 :rules="roomRules"
618 v-model="addSchedule.room" 600 v-model="addSchedule.room"
619 @keyup.enter="submit" 601 @keyup.enter="submit"
620 ></v-text-field> 602 ></v-text-field>
621 </v-flex> 603 </v-flex>
622 </v-layout> 604 </v-layout>
623 </v-flex> 605 </v-flex>
624 <v-layout> 606 <v-layout>
625 <v-flex xs12> 607 <v-flex xs12>
626 <v-card-actions> 608 <v-card-actions>
627 <v-spacer class="hidden-xs-only"></v-spacer> 609 <v-spacer class="hidden-xs-only"></v-spacer>
628 <v-btn @click="clear" round dark class="clear-button">clear</v-btn> 610 <v-btn @click="clear" round dark class="clear-button">clear</v-btn>
629 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn> 611 <v-btn @click="submit" round dark :loading="loading" class="add-button">Add</v-btn>
630 </v-card-actions> 612 </v-card-actions>
631 </v-flex> 613 </v-flex>
632 </v-layout> 614 </v-layout>
633 </v-container> 615 </v-container>
634 </v-form> 616 </v-form>
635 </v-card> 617 </v-card>
636 </v-dialog> 618 </v-dialog>
637 <v-snackbar 619 <v-snackbar
638 :timeout="timeout" 620 :timeout="timeout"
639 :top="y === 'top'" 621 :top="y === 'top'"
640 :right="x === 'right'" 622 :right="x === 'right'"
641 :vertical="mode === 'vertical'" 623 :vertical="mode === 'vertical'"
642 v-model="snackbar" 624 v-model="snackbar"
643 :color="color" 625 :color="color"
644 >{{ text }}</v-snackbar> 626 >{{ text }}</v-snackbar>
645 <div class="loader" v-if="showLoader"> 627 <div class="loader" v-if="showLoader">
646 <v-progress-circular indeterminate color="white"></v-progress-circular> 628 <v-progress-circular indeterminate color="white"></v-progress-circular>
647 </div> 629 </div>
648 </v-container> 630 </v-container>
649 </template> 631 </template>
650 632
651 <script> 633 <script>
652 import http from "@/Services/http.js"; 634 import http from "@/Services/http.js";
653 import moment from "moment"; 635 import moment from "moment";
654 636
655 export default { 637 export default {
656 data: () => ({ 638 data: () => ({
657 snackbar: false, 639 snackbar: false,
658 date: null, 640 date: null,
659 editDate: false, 641 editDate: false,
660 menu1: false, 642 menu1: false,
661 menuB: false, 643 menuB: false,
662 menu2: false, 644 menu2: false,
663 menuEdit: false, 645 menuEdit: false,
664 timeToEdit: false, 646 timeToEdit: false,
665 show: true, 647 show: true,
666 showSearch: false, 648 showSearch: false,
667 addExamScheduleDialog: false, 649 addExamScheduleDialog: false,
668 color: "", 650 color: "",
669 y: "top", 651 y: "top",
670 x: "right", 652 x: "right",
671 mode: "", 653 mode: "",
672 timeout: 10000, 654 timeout: 10000,
673 text: "", 655 text: "",
674 loading: false, 656 loading: false,
675 date: null, 657 date: null,
676 search: "", 658 search: "",
677 showLoader: false, 659 showLoader: false,
678 editExamScheduleDialog: false, 660 editExamScheduleDialog: false,
679 profileExamScheduleDialog: false, 661 profileExamScheduleDialog: false,
680 valid: true, 662 valid: true,
681 addSection: [],
682 pagination: { 663 pagination: {
683 rowsPerPage: 10 664 rowsPerPage: 10
684 }, 665 },
685 examRules: [v => !!v || "Exam Name is required"], 666 examRules: [v => !!v || "Exam Name is required"],
686 classRules: [v => !!v || "Class Name is required"], 667 classRules: [v => !!v || "Class Name is required"],
687 sectionRules: [v => !!v || "section is required"], 668 sectionRules: [v => !!v || "section is required"],
688 subjectRules: [v => !!v || "Subject is required"], 669 subjectRules: [v => !!v || "Subject is required"],
689 timeInRules: [v => !!v || "Time In is required"], 670 timeInRules: [v => !!v || "Time In is required"],
690 timeOutRules: [v => !!v || "time Out s is required"], 671 timeOutRules: [v => !!v || "time Out s is required"],
691 roomRules: [v => !!v || "Room is required"], 672 roomRules: [v => !!v || "Room is required"],
692 examScheduleDateRules: [v => !!v || "Date is required"], 673 examScheduleDateRules: [v => !!v || "Date is required"],
693 headers: [ 674 headers: [
694 { 675 {
695 align: "", 676 align: "",
696 text: "No", 677 text: "No",
697 sortable: false, 678 sortable: false,
698 value: "No" 679 value: "No"
699 }, 680 },
700 { 681 {
701 text: "Exam Name", 682 text: "Exam Name",
702 vaue: "examId.examName", 683 vaue: "examId.examName",
703 sortable: false, 684 sortable: false,
704 align: "center" 685 align: "center"
705 }, 686 },
706 { 687 {
707 text: "Class", 688 text: "Class",
708 value: "classId.classNum", 689 value: "classId.classNum",
709 sortable: false, 690 sortable: false,
710 align: "center" 691 align: "center"
711 }, 692 },
712 // { 693 // {
713 // text: "Section", 694 // text: "Section",
714 // value: "sectionId.name", 695 // value: "sectionId.name",
715 // sortable: false, 696 // sortable: false,
716 // align: "center" 697 // align: "center"
717 // }, 698 // },
718 { 699 {
719 text: "Subject Name", 700 text: "Subject Name",
720 value: "subjectName", 701 value: "subjectName",
721 sortable: false, 702 sortable: false,
722 align: "center" 703 align: "center"
723 }, 704 },
724 { 705 {
725 text: "Date", 706 text: "Date",
726 value: "date", 707 value: "date",
727 sortable: false, 708 sortable: false,
728 align: "center" 709 align: "center"
729 }, 710 },
730 { 711 {
731 text: "Time", 712 text: "Time",
732 value: "timeFrom", 713 value: "timeFrom",
733 sortable: false, 714 sortable: false,
734 align: "center" 715 align: "center"
735 }, 716 },
736 { 717 {
737 text: "Room", 718 text: "Room",
738 value: "room", 719 value: "room",
739 sortable: false, 720 sortable: false,
740 align: "center" 721 align: "center"
741 }, 722 },
742 { text: "Action", value: "", sortable: false, align: "center" } 723 { text: "Action", value: "", sortable: false, align: "center" }
743 ], 724 ],
744 classList: [], 725 classList: [],
726 addSection: [],
745 examList: [], 727 examList: [],
746 subjects: [], 728 subjects: [],
747 addSchedule: {}, 729 addSchedule: {},
748 editedItem: { 730 editedItem: {
749 sectionId: { 731 sectionId: {
750 name: "" 732 name: ""
751 } 733 }
752 }, 734 },
753 getScheduleData: {}, 735 getScheduleData: {},
754 ScheduleData: [], 736 ScheduleData: [],
755 token: "" 737 token: ""
756 }), 738 }),
757 methods: { 739 methods: {
758 dates: function(date) { 740 dates: function(date) {
759 return moment(date).format("MMMM DD, YYYY"); 741 return moment(date).format("MMMM DD, YYYY");
760 }, 742 },
761 pickFile() { 743 pickFile() {
762 this.$refs.image.click(); 744 this.$refs.image.click();
763 }, 745 },
764 getSchedulesList() { 746 getSchedulesList() {
765 this.showLoader = true; 747 this.showLoader = true;
766 http() 748 http()
767 .get("/getSchedulesList", { 749 .get("/getSchedulesList", {
768 params: { classId: this.getScheduleData.classId }, 750 params: { classId: this.getScheduleData.classId },
769 headers: { Authorization: "Bearer " + this.token } 751 headers: { Authorization: "Bearer " + this.token }
770 }) 752 })
771 .then(response => { 753 .then(response => {
772 this.ScheduleData = response.data.data; 754 this.ScheduleData = response.data.data;
773 // console.log("this.ScheduleData", this.ScheduleData); 755 // console.log("this.ScheduleData", this.ScheduleData);
774 this.showLoader = false; 756 this.showLoader = false;
775 }) 757 })
776 .catch(error => { 758 .catch(error => {
777 // console.log("err====>", err); 759 // console.log("err====>", err);
778 this.showLoader = false; 760 this.showLoader = false;
779 this.loadingSearch = false; 761 this.loadingSearch = false;
780 this.snackbar = true; 762 this.snackbar = true;
781 this.text = error.response.data.message; 763 this.text = error.response.data.message;
782 if (error.response.status === 401) { 764 if (error.response.status === 401) {
783 this.$router.replace({ path: "/" }); 765 this.$router.replace({ path: "/" });
784 this.$store.dispatch("setToken", null); 766 this.$store.dispatch("setToken", null);
785 this.$store.dispatch("Id", null); 767 this.$store.dispatch("Id", null);
786 } 768 }
787 }); 769 });
788 }, 770 },
789 editItem(item) { 771 editItem(item) {
790 // console.log("item", item); 772 // console.log("item", item);
791 this.editedIndex = this.ScheduleData.indexOf(item); 773 this.editedIndex = this.ScheduleData.indexOf(item);
792 this.editedItem = Object.assign({}, item); 774 this.editedItem = Object.assign({}, item);
793 this.editedItem.examId = this.editedItem.examId._id; 775 this.editedItem.examId = this.editedItem.examId._id;
794 this.editedItem.classId = this.editedItem.classId._id; 776 this.editedItem.classId = this.editedItem.classId._id;
795 this.editedItem.sectionId = this.editedItem.sectionId._id; 777 this.editedItem.sectionId = this.editedItem.sectionId._id;
796 this.editedItem.date = 778 this.editedItem.date =
797 this.editedItem.date != undefined 779 this.editedItem.date != undefined
798 ? (this.editedItem.date = this.editedItem.date.substring(0, 10)) 780 ? (this.editedItem.date = this.editedItem.date.substring(0, 10))
799 : (this.editedItem.date = ""); 781 : (this.editedItem.date = "");
800 this.editExamScheduleDialog = true; 782 this.editExamScheduleDialog = true;
801 }, 783 },
802 profile(item) { 784 profile(item) {
803 this.editedIndex = this.ScheduleData.indexOf(item); 785 this.editedIndex = this.ScheduleData.indexOf(item);
804 this.editedItem = Object.assign({}, item); 786 this.editedItem = Object.assign({}, item);
805 this.editedItem.examId = this.editedItem.examId.examName; 787 this.editedItem.examId = this.editedItem.examId.examName;
806 this.editedItem.classId = this.editedItem.classId.classNum; 788 this.editedItem.classId = this.editedItem.classId.classNum;
807 this.editedItem.sectionId = this.editedItem.sectionId.name; 789 this.editedItem.sectionId = this.editedItem.sectionId.name;
808 this.profileExamScheduleDialog = true; 790 this.profileExamScheduleDialog = true;
809 }, 791 },
810 deleteSchedule(item) { 792 deleteSchedule(item) {
811 let deleteSchedule = { 793 let deleteSchedule = {
812 scheduleId: item._id 794 scheduleId: item._id
813 }; 795 };
814 http() 796 http()
815 .delete( 797 .delete(
816 "/deleteSchedule", 798 "/deleteSchedule",
817 confirm("Are you sure you want to Delete this?") && { 799 confirm("Are you sure you want to Delete this?") && {
818 params: deleteSchedule 800 params: deleteSchedule
819 } 801 }
820 ) 802 )
821 .then(response => { 803 .then(response => {
822 this.snackbar = true; 804 this.snackbar = true;
823 this.text = response.data.message; 805 this.text = response.data.message;
824 this.color = "green"; 806 this.color = "green";
825 this.getSchedulesList(); 807 this.getSchedulesList();
826 }) 808 })
827 .catch(error => { 809 .catch(error => {
828 this.snackbar = true; 810 this.snackbar = true;
829 this.color = "error"; 811 this.color = "error";
830 this.text = error.response.data.message; 812 this.text = error.response.data.message;
831 }); 813 });
832 }, 814 },
833 close() { 815 close() {
834 this.dialog = false; 816 this.dialog = false;
835 }, 817 },
836 submit() { 818 submit() {
837 if (this.$refs.form.validate()) { 819 if (this.$refs.form.validate()) {
838 this.loading = true; 820 this.loading = true;
839 http() 821 http()
840 .post("/createSchedule", this.addSchedule) 822 .post("/createSchedule", this.addSchedule)
841 .then(response => { 823 .then(response => {
842 this.snackbar = true; 824 this.snackbar = true;
843 this.text = response.data.message; 825 this.text = response.data.message;
844 this.addExamScheduleDialog = false; 826 this.addExamScheduleDialog = false;
845 this.color = "green"; 827 this.color = "green";
846 this.loading = false; 828 this.loading = false;
847 this.clear(); 829 this.clear();
848 }) 830 })
849 .catch(error => { 831 .catch(error => {
850 this.snackbar = true; 832 this.snackbar = true;
851 this.text = error.response.data.message; 833 this.text = error.response.data.message;
852 this.color = "red"; 834 this.color = "red";
853 this.loading = false; 835 this.loading = false;
854 }); 836 });
855 } 837 }
856 }, 838 },
857 clear() { 839 clear() {
858 this.$refs.form.reset(); 840 this.$refs.form.reset();
859 this.disable = false; 841 this.disable = false;
860 this.loading = false; 842 this.loading = false;
861 }, 843 },
862 save() { 844 save() {
863 this.editedItem.scheduleId = this.editedItem._id; 845 this.editedItem.scheduleId = this.editedItem._id;
864 http() 846 http()
865 .put("/updateSchedule", this.editedItem) 847 .put("/updateSchedule", this.editedItem)
866 .then(response => { 848 .then(response => {
867 this.snackbar = true; 849 this.snackbar = true;
868 this.text = "Successfully Edit Exam Schedule"; 850 this.text = "Successfully Edit Exam Schedule";
869 this.color = "green"; 851 this.color = "green";
870 this.getSchedulesList(); 852 this.getSchedulesList();
871 this.close(); 853 this.close();
872 }) 854 })
873 .catch(error => { 855 .catch(error => {
874 this.snackbar = true; 856 this.snackbar = true;
875 this.text = error.response.data.message; 857 this.text = error.response.data.message;
876 this.color = "red"; 858 this.color = "red";
877 }); 859 });
878 }, 860 },
879 getClass() { 861 getClass() {
880 http() 862 http()
881 .get("/getClassesList", { 863 .get("/getClassesList", {
882 headers: { Authorization: "Bearer " + this.token } 864 headers: { Authorization: "Bearer " + this.token }
883 }) 865 })
884 .then(response => { 866 .then(response => {
885 this.classList = response.data.data; 867 this.classList = response.data.data;
886 }) 868 })
887 .catch(err => { 869 .catch(err => {
888 // console.log("err====>", err); 870 // console.log("err====>", err);
889 }); 871 });
890 }, 872 },
891 getSections(_id) { 873 getSections(_id) {
892 for (let i = 0; i < this.classList.length; i++) { 874 for (let i = 0; i < this.classList.length; i++) {
893 if (_id == this.classList[i]._id) { 875 if (_id == this.classList[i]._id) {
894 this.subjects = this.classList[i].subjects; 876 this.subjects = this.classList[i].subjects;
895 } 877 }
896 } 878 }
897 http() 879 http()
898 .get( 880 .get(
899 "/getSectionsList", 881 "/getSectionsList",
900 { params: { classId: _id } }, 882 { params: { classId: _id } },
901 { 883 {
902 headers: { Authorization: "Bearer " + this.token } 884 headers: { Authorization: "Bearer " + this.token }
903 } 885 }
904 ) 886 )
905 .then(response => { 887 .then(response => {
906 this.addSection = response.data.data; 888 this.addSection = response.data.data;
907 }) 889 })
908 .catch(err => { 890 .catch(err => {
909 }); 891 });
910 }, 892 },
911 getExamList() { 893 getExamList() {
912 this.showLoader = true; 894 this.showLoader = true;
913 this.loadingSearch = true; 895 this.loadingSearch = true;
914 http() 896 http()
915 .get("/getExamsList", { 897 .get("/getExamsList", {
916 headers: { Authorization: "Bearer " + this.token } 898 headers: { Authorization: "Bearer " + this.token }
917 }) 899 })
918 .then(response => { 900 .then(response => {
919 this.examList = response.data.data; 901 this.examList = response.data.data;
920 this.showLoader = false; 902 this.showLoader = false;
921 this.loadingSearch = false; 903 this.loadingSearch = false;
922 }) 904 })
923 .catch(error => { 905 .catch(error => {
924 this.showLoader = false; 906 this.showLoader = false;
925 this.loadingSearch = false; 907 this.loadingSearch = false;
926 this.snackbar = true; 908 this.snackbar = true;
927 this.text = error.response.data.message; 909 this.text = error.response.data.message;
928 if (error.response.status === 401) { 910 if (error.response.status === 401) {
929 this.$router.replace({ path: "/" }); 911 this.$router.replace({ path: "/" });
930 this.$store.dispatch("setToken", null); 912 this.$store.dispatch("setToken", null);
931 this.$store.dispatch("Id", null); 913 this.$store.dispatch("Id", null);
932 } 914 }
933 }); 915 });
934 }, 916 },
935 displaySearch() { 917 displaySearch() {
936 (this.show = false), (this.showSearch = true); 918 (this.show = false), (this.showSearch = true);
937 }, 919 },
938 closeSearch() { 920 closeSearch() {
939 this.showSearch = false; 921 this.showSearch = false;
940 this.show = true; 922 this.show = true;
941 this.search = ""; 923 this.search = "";
942 } 924 }
943 }, 925 },
944 mounted() { 926 mounted() {
945 this.token = this.$store.state.token; 927 this.token = this.$store.state.token;
946 this.getClass(); 928 this.getClass();
947 this.getExamList(); 929 this.getExamList();
948 } 930 }
949 }; 931 };
src/pages/Mark/viewMark.vue
Diff comments   View file @8627b28
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <!-- ****** PROFILE MARK ****** --> 3 <!-- ****** PROFILE MARK ****** -->
4 <v-container fluid grid-list-md> 4 <v-container fluid grid-list-md>
5 <v-layout> 5 <v-layout>
6 <v-flex xs12 sm8 md10> 6 <v-flex xs12 sm8 md10>
7 <v-btn class="open-dialog-button mt-3" round dark @click="print()"> 7 <v-btn class="open-dialog-button mt-3" round dark @click="print()">
8 Print 8 Print
9 <v-icon size="18" right dark>print</v-icon> 9 <v-icon size="18" right dark>print</v-icon>
10 </v-btn> 10 </v-btn>
11 </v-flex> 11 </v-flex>
12 <v-flex xs12 sm4 md2 class="right"> 12 <v-flex xs12 sm4 md2 class="right">
13 <v-select 13 <v-select
14 class 14 class
15 :items="selectMark" 15 :items="selectMark"
16 label="Select" 16 label="Select"
17 v-model="selectMarkList" 17 v-model="selectMarkList"
18 @change="selectMarkData(selectMarkList)" 18 @change="selectMarkData(selectMarkList)"
19 ></v-select> 19 ></v-select>
20 </v-flex> 20 </v-flex>
21 </v-layout> 21 </v-layout>
22 <v-flex xs12 sm12 id="printMe"> 22 <v-flex xs12 sm12 id="printMe">
23 <v-layout wrap> 23 <v-layout wrap>
24 <!-- ****** TABLE DATA MARK ****** --> 24 <!-- ****** TABLE DATA MARK ****** -->
25 <v-flex xs12 sm12 md12> 25 <v-flex xs12 sm12 md12>
26 <v-card 26 <v-card
27 v-for="(value, id, index) in filterData" 27 v-for="(value, id, index) in filterData"
28 :key="index" 28 :key="index"
29 flat 29 flat
30 style="border: 1px solid lightgrey;margin-bottom:14px;padding:20px" 30 style="border: 1px solid lightgrey;margin-bottom:14px;padding:20px"
31 > 31 >
32 <v-layout> 32 <v-layout>
33 <v-flex xs12 sm12 md12 class="text-xs-center"> 33 <v-flex xs12 sm12 md12 class="text-xs-center">
34 <img :src="userData.schoolLogoUrl" width="140" alt="logo" /> 34 <img :src="userData.schoolLogoUrl" width="140" alt="logo" />
35 <p class="title">{{ userData.name }}</p> 35 <p class="title">{{ userData.name }}</p>
36 <p>{{ userData.address }}</p> 36 <p>{{ userData.address }}</p>
37 </v-flex> 37 </v-flex>
38 <v-flex xs12 sm12 md12 class="text-xs-center"> 38 <v-flex xs12 sm12 md12 class="text-xs-center">
39 <v-avatar size="80px"> 39 <v-avatar size="80px">
40 <img src="/static/icon/user.png" v-if="!value[0].studentId.profilePicUrl" /> 40 <img src="/static/icon/user.png" v-if="!value[0].studentId.profilePicUrl" />
41 <img :src="value[0].studentId.profilePicUrl" v-else-if="value[0].studentId.profilePicUrl" /> 41 <img :src="value[0].studentId.profilePicUrl" v-else-if="value[0].studentId.profilePicUrl" />
42 </v-avatar> 42 </v-avatar>
43 <p 43 <p
44 style="font-size:20px;margin:0px;margin-bottom:4px;" 44 style="font-size:20px;margin:0px;margin-bottom:4px;"
45 >{{ value[0].studentId.name }}</p> 45 >{{ value[0].studentId.name }}</p>
46 <p 46 <p
47 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;" 47 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
48 > Class : {{ value[0].classId.classNum }}</p> 48 > Class : {{ value[0].classId.classNum }}</p>
49 <p 49 <p
50 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;" 50 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
51 > Section : {{ value[0].sectionId.name }}</p> 51 > Section : {{ value[0].sectionId.name }}</p>
52 <p 52 <p
53 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;" 53 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
54 > Roll No : {{ value[0].studentId.rollNo }}</p> 54 > Roll No : {{ value[0].studentId.rollNo }}</p>
55 </v-flex> 55 </v-flex>
56 </v-layout> 56 </v-layout>
57 <v-card-title class="subheading">{{value[0].examId.examName}}</v-card-title> 57 <v-card-title class="subheading">{{value[0].examId.examName}}</v-card-title>
58 <table 58 <table
59 class="mb-5 tableRsponsive feeTypeTable" 59 class="mb-5 tableRsponsive feeTypeTable"
60 style="border: 1px solid lightgrey; 60 style="border: 1px solid lightgrey;
61 border-collapse: collapse;!important 61 border-collapse: collapse;!important
62 table-layout: auto !important; 62 table-layout: auto !important;
63 width: 100% !important; 63 width: 100% !important;
64 overflow: hidden;" 64 overflow: hidden;"
65 > 65 >
66 <thead style="border: 1px solid lightgrey !important;"> 66 <thead style="border: 1px solid lightgrey !important;">
67 <tr style="border: 1px solid lightgrey !important;padding:4px;"> 67 <tr style="border: 1px solid lightgrey !important;padding:4px;">
68 <td 68 <td
69 rowspan="2" 69 rowspan="2"
70 style="border: 1px solid lightgrey !important;padding: 10px;" 70 style="border: 1px solid lightgrey !important;padding: 10px;"
71 >Subject</td> 71 >Subject</td>
72 <template v-for="studentData in value"> 72 <template v-for="studentData in value">
73 <td 73 <td
74 colspan="2" 74 colspan="2"
75 v-for="studentMark in studentData.studentsMarks" 75 v-for="studentMark in studentData.studentsMarks"
76 style="border: 1px solid lightgrey !important;padding: 10px;" 76 style="border: 1px solid lightgrey !important;padding: 10px;"
77 >{{studentMark.markDistributionId.distributionType}}</td> 77 >{{studentMark.markDistributionId.distributionType}}</td>
78 <td style="border: 1px solid lightgrey !important;padding: 10px;">Total Marks</td> 78 <td style="border: 1px solid lightgrey !important;padding: 10px;">Total Marks</td>
79 </template> 79 </template>
80 </tr> 80 </tr>
81 <tr 81 <tr
82 v-for="(subject, ind) in value" 82 v-for="(subject, ind) in value"
83 v-if="ind == 0" 83 v-if="ind == 0"
84 style="border: 1px solid lightgrey !important;" 84 style="border: 1px solid lightgrey !important;"
85 > 85 >
86 <template v-for="(exam, i) in subject.studentsMarks"> 86 <template v-for="(exam, i) in subject.studentsMarks">
87 <td style="border: 1px solid lightgrey !important;padding: 10px;">Marks</td> 87 <td style="border: 1px solid lightgrey !important;padding: 10px;">Marks</td>
88 <td style="border: 1px solid lightgrey !important;padding: 10px;">Highest Marks</td> 88 <td style="border: 1px solid lightgrey !important;padding: 10px;">Highest Marks</td>
89 </template> 89 </template>
90 <!-- <td style="border: 1px solid lightgrey !important;padding: 10px;">Mark</td> --> 90 <!-- <td style="border: 1px solid lightgrey !important;padding: 10px;">Mark</td> -->
91 </tr> 91 </tr>
92 </thead> 92 </thead>
93 <tbody style="border: 1px solid lightgrey !important;"> 93 <tbody style="border: 1px solid lightgrey !important;">
94 <tr v-for="subject in value" style="border: 1px solid lightgrey !important;"> 94 <tr v-for="subject in value" style="border: 1px solid lightgrey !important;">
95 <td 95 <!-- <td
96 style="border: 1px solid lightgrey !important;padding: 10px;" 96 style="border: 1px solid lightgrey !important;padding: 10px;"
97 >{{subject.subjectName}}</td> 97 >{{subject.subjectName}}</td> -->
98 <td style="border: 1px solid lightgrey !important;padding: 10px;"></td>
98 <template v-for="(exam, i) in subject.studentsMarks"> 99 <template v-for="(exam, i) in subject.studentsMarks">
99 <td 100 <td
100 style="border: 1px solid lightgrey !important;padding: 10px;" 101 style="border: 1px solid lightgrey !important;padding: 10px;"
101 >{{exam.marksScored}}</td> 102 >{{exam.marksScored}}</td>
102 <td 103 <td
103 style="border: 1px solid lightgrey !important;padding: 10px;" 104 style="border: 1px solid lightgrey !important;padding: 10px;"
104 >{{exam.markDistributionId.markValue}}</td> 105 >{{exam.markDistributionId.markValue}}</td>
105 </template> 106 </template>
106 <td 107 <td
107 style="border: 1px solid lightgrey !important;padding: 10px;" 108 style="border: 1px solid lightgrey !important;padding: 10px;"
108 >{{subject.totalMarks}}</td> 109 >{{subject.totalMarks}}</td>
109 </tr> 110 </tr>
110 </tbody> 111 </tbody>
111 </table> 112 </table>
112 </v-card> 113 </v-card>
113 </v-flex> 114 </v-flex>
114 </v-layout> 115 </v-layout>
115 </v-flex> 116 </v-flex>
116 </v-container> 117 </v-container>
117 <div class="loader" v-if="showLoader"> 118 <div class="loader" v-if="showLoader">
118 <v-progress-circular indeterminate color="white"></v-progress-circular> 119 <v-progress-circular indeterminate color="white"></v-progress-circular>
119 </div> 120 </div>
120 </v-app> 121 </v-app>
121 </template> 122 </template>
122 123
123 <script> 124 <script>
124 import http from "@/Services/http.js"; 125 import http from "@/Services/http.js";
125 import moment from "moment"; 126 import moment from "moment";
126 import _ from "underscore"; 127 import _ from "underscore";
127 128
128 export default { 129 export default {
129 data: () => ({ 130 data: () => ({
130 showLoader: true, 131 showLoader: true,
131 nameShow: false, 132 nameShow: false,
132 showMark: true, 133 showMark: true,
133 showGrade: false, 134 showGrade: false,
134 markData: [], 135 markData: [],
135 token: "", 136 token: "",
136 markDistributions: [], 137 markDistributions: [],
137 markParticularDistributionData: [], 138 markParticularDistributionData: [],
138 filterData: [], 139 filterData: [],
139 output: null, 140 output: null,
140 gradeAPlus: "A+", 141 gradeAPlus: "A+",
141 gradeA: "A", 142 gradeA: "A",
142 gradeBPlus: "B+", 143 gradeBPlus: "B+",
143 gradeB: "B", 144 gradeB: "B",
144 gradeCPlus: "C+", 145 gradeCPlus: "C+",
145 gradeC: "C", 146 gradeC: "C",
146 selectMarkList: "Mark", 147 selectMarkList: "Mark",
147 selectMark: ["Mark", "Grade"], 148 selectMark: ["Mark", "Grade"],
148 MarkData: "", 149 MarkData: "",
149 userData: {} 150 userData: {}
150 }), 151 }),
151 mounted() { 152 mounted() {
152 this.token = this.$store.state.token; 153 this.token = this.$store.state.token;
153 this.getMarkList(); 154 this.getMarkList();
154 this.getUserData(); 155 this.getUserData();
155 }, 156 },
156 methods: { 157 methods: {
157 getMarkList() { 158 getMarkList() {
158 this.showLoader = true; 159 this.showLoader = true;
159 http() 160 http()
160 .get("/getParticularMark", { 161 .get("/getParticularMark", {
161 params: { studentId: this.$route.params.markId }, 162 params: { studentId: this.$route.params.markId },
162 headers: { Authorization: "Bearer " + this.token } 163 headers: { Authorization: "Bearer " + this.token }
163 }) 164 })
164 .then(response => { 165 .then(response => {
165 this.markData = response.data.data; 166 this.markData = response.data.data;
166 let newData = response.data.data; 167 let newData = response.data.data;
167 // console.log("newData", newData); 168 // console.log("newData", newData);
168 for (var i = 0; i < newData.length; i++) { 169 for (var i = 0; i < newData.length; i++) {
169 newData[i].examination = newData[i].examId._id; 170 newData[i].examination = newData[i].examId._id;
170 } 171 }
171 this.filterData = _.groupBy(newData, ["examination"]); 172 this.filterData = _.groupBy(newData, ["examination"]);
172 // console.log("this.filterData", this.filterData); 173 // console.log("this.filterData", this.filterData);
173 for (let data in this.filterData) { 174 for (let data in this.filterData) {
174 for (let item in this.filterData[data]) { 175 for (let item in this.filterData[data]) {
175 var totalMarks = 0; 176 var totalMarks = 0;
176 for ( 177 for (
177 let i = 0; 178 let i = 0;
178 i < this.filterData[data][item].studentsMarks.length; 179 i < this.filterData[data][item].studentsMarks.length;
179 i++ 180 i++
180 ) { 181 ) {
181 // console.log("this.filterData[data][item].studentsMarks[i]",this.filterData[data][item].studentsMarks[i] 182 // console.log("this.filterData[data][item].studentsMarks[i]",this.filterData[data][item].studentsMarks[i]
182 // .marksScored) 183 // .marksScored)
183 totalMarks += this.filterData[data][item].studentsMarks[i] 184 totalMarks += this.filterData[data][item].studentsMarks[i]
184 .marksScored; 185 .marksScored;
185 } 186 }
186 this.filterData[data][item].totalMarks = totalMarks; 187 this.filterData[data][item].totalMarks = totalMarks;
187 188
188 if (totalMarks > 90) { 189 if (totalMarks > 90) {
189 this.filterData[data][item].grade = this.gradeAPlus; 190 this.filterData[data][item].grade = this.gradeAPlus;
190 } else if (totalMarks > 80 && totalMarks < 90) { 191 } else if (totalMarks > 80 && totalMarks < 90) {
191 this.filterData[data][item].grade = this.gradeA; 192 this.filterData[data][item].grade = this.gradeA;
192 } else if (totalMarks > 70 && totalMarks < 80) { 193 } else if (totalMarks > 70 && totalMarks < 80) {
193 this.filterData[data][item].grade = this.gradeBPlus; 194 this.filterData[data][item].grade = this.gradeBPlus;
194 } else if (totalMarks > 60 && totalMarks < 70) { 195 } else if (totalMarks > 60 && totalMarks < 70) {
195 this.filterData[data][item].grade = this.gradeB; 196 this.filterData[data][item].grade = this.gradeB;
196 } else if (totalMarks > 50 && totalMarks < 60) { 197 } else if (totalMarks > 50 && totalMarks < 60) {
197 this.filterData[data][item].grade = this.gradeCPlus; 198 this.filterData[data][item].grade = this.gradeCPlus;
198 } else if (totalMarks > 40 && totalMarks < 50) { 199 } else if (totalMarks > 40 && totalMarks < 50) {
199 this.filterData[data][item].grade = this.gradeC; 200 this.filterData[data][item].grade = this.gradeC;
200 } 201 }
201 } 202 }
202 } 203 }
203 this.showLoader = false; 204 this.showLoader = false;
204 }) 205 })
205 .catch(error => { 206 .catch(error => {
206 this.showLoader = false; 207 this.showLoader = false;
207 this.snackbar = true; 208 this.snackbar = true;
208 this.text = error.response.data.message; 209 this.text = error.response.data.message;
209 if (error.response.status === 401) { 210 if (error.response.status === 401) {
210 this.$router.replace({ path: "/" }); 211 this.$router.replace({ path: "/" });
211 this.$store.dispatch("setToken", null); 212 this.$store.dispatch("setToken", null);
212 this.$store.dispatch("Id", null); 213 this.$store.dispatch("Id", null);
213 } 214 }
214 }); 215 });
215 }, 216 },
216 print() { 217 print() {
217 // Pass the element id here 218 // Pass the element id here
218 this.$htmlToPaper("printMe"); 219 this.$htmlToPaper("printMe");
219 }, 220 },
220 getUserData() { 221 getUserData() {
221 http() 222 http()
222 .get("/getParticularUserDetail") 223 .get("/getParticularUserDetail")
223 .then(response => { 224 .then(response => {
224 this.userData = response.data.data; 225 this.userData = response.data.data;
225 }) 226 })
226 .catch(error => { 227 .catch(error => {
227 // if (error.response.status === 401) { 228 // if (error.response.status === 401) {
228 // this.$router.replace({ path: "/" }); 229 // this.$router.replace({ path: "/" });
229 // this.$store.dispatch("setToken", null); 230 // this.$store.dispatch("setToken", null);
230 // this.$store.dispatch("Id", null); 231 // this.$store.dispatch("Id", null);
231 // } 232 // }
232 }); 233 });
233 }, 234 },
234 selectMarkData(select) { 235 selectMarkData(select) {
235 if (select == "Mark") { 236 if (select == "Mark") {
236 this.showMark = true; 237 this.showMark = true;
237 this.showGrade = false; 238 this.showGrade = false;
238 } else if (select == "Grade") { 239 } else if (select == "Grade") {
239 this.showGrade = true; 240 this.showGrade = true;
240 this.showMark = false; 241 this.showMark = false;
241 } 242 }
242 } 243 }
243 } 244 }
244 }; 245 };
245 </script> 246 </script>
246 247
247 <style scoped> 248 <style scoped>
248 .add-button { 249 .add-button {
249 background: #feb83c !important; 250 background: #feb83c !important;
250 border-color: #feb83c !important; 251 border-color: #feb83c !important;
251 text-transform: none !important; 252 text-transform: none !important;
252 -webkit-box-shadow: none !important; 253 -webkit-box-shadow: none !important;
253 box-shadow: none !important; 254 box-shadow: none !important;
254 } 255 }
255 .card-styles { 256 .card-styles {
256 background: #7f62f8 !important; 257 background: #7f62f8 !important;
257 border-color: #7f62f8 !important; 258 border-color: #7f62f8 !important;
258 } 259 }
259 .open-dialog-button { 260 .open-dialog-button {
260 background: #827bfa !important; 261 background: #827bfa !important;
261 border-color: #827bfa !important; 262 border-color: #827bfa !important;
262 text-transform: none !important; 263 text-transform: none !important;
263 } 264 }
264 table { 265 table {
265 border-collapse: collapse; 266 border-collapse: collapse;
266 border: 1px solid #e2e7eb; 267 border: 1px solid #e2e7eb;
267 } 268 }
268 th, 269 th,
269 td { 270 td {
270 border: 1px solid #e2e7eb; 271 border: 1px solid #e2e7eb;
271 text-align: center; 272 text-align: center;
272 } 273 }
273 table.feeTypeTable { 274 table.feeTypeTable {
274 table-layout: auto !important; 275 table-layout: auto !important;
275 width: 100% !important; 276 width: 100% !important;
276 } 277 }
277 .bg-sky { 278 .bg-sky {
278 background-color: #98b2cc !important; 279 background-color: #98b2cc !important;
279 } 280 }
280 .bg-sky-light { 281 .bg-sky-light {
281 background-color: #89a0b8; 282 background-color: #89a0b8;
282 } 283 }
283 .bg-purple { 284 .bg-purple {
284 background-color: #9583ac; 285 background-color: #9583ac;
285 } 286 }
286 .bg-skyDark { 287 .bg-skyDark {
287 background-color: #956785; 288 background-color: #956785;
288 } 289 }
289 .loader { 290 .loader {
290 width: 100%; 291 width: 100%;
291 height: 100%; 292 height: 100%;
292 position: fixed; 293 position: fixed;
293 top: 0; 294 top: 0;
294 left: 0; 295 left: 0;
295 text-align: center; 296 text-align: center;
296 background-color: rgba(0, 0, 0, 0.5); 297 background-color: rgba(0, 0, 0, 0.5);
297 z-index: 999; 298 z-index: 999;
298 } 299 }
299 300
300 .loader > div { 301 .loader > div {
301 position: relative; 302 position: relative;
302 top: calc(50% - 16px); 303 top: calc(50% - 16px);
303 } 304 }
304 @media screen and (max-width: 380px) { 305 @media screen and (max-width: 380px) {
305 .tableRsponsive { 306 .tableRsponsive {
306 /* display: block; */ 307 /* display: block; */
307 position: relative; 308 position: relative;
308 overflow: scroll; 309 overflow: scroll;
309 } 310 }
310 } 311 }
311 </style> 312 </style>
312 313
313 314
314 315
315 316
316 317
317 318
318 319
319 320
320 321
321 322
322 323
323 324
324 325
325 326
326 327
327 328
328 329
329 330
src/pages/Report/progressCardReport.vue
Diff comments   View file @8627b28
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** Progress Card Report Table****** --> 3 <!-- ****** Progress Card Report Table****** -->
4 <v-card flat class="elevation-0 transparent"> 4 <v-card flat class="elevation-0 transparent">
5 <v-form ref="form" v-model="valid" lazy-validation> 5 <v-form ref="form" v-model="valid" lazy-validation>
6 <v-flex xs12 sm12 lg12> 6 <v-flex xs12 sm12 lg12>
7 <v-layout wrap> 7 <v-layout wrap>
8 <v-flex xs12 sm12 lg3> 8 <v-flex xs12 sm12 lg3>
9 <v-layout> 9 <v-layout>
10 <v-flex xs3 sm6 lg2 class="subheading mt-4"> 10 <v-flex xs3 sm6 lg2 class="subheading mt-4">
11 <label class="right">Class:</label> 11 <label class="right">Class:</label>
12 </v-flex> 12 </v-flex>
13 <v-flex xs9 sm6 lg8 class="ml-2"> 13 <v-flex xs9 sm6 lg8 class="ml-2">
14 <v-select 14 <v-select
15 v-model="getReport.classId" 15 v-model="getReport.classId"
16 label="Select your class" 16 label="Select your class"
17 type="text" 17 type="text"
18 :items="classList" 18 :items="classList"
19 item-text="classNum" 19 item-text="classNum"
20 item-value="_id" 20 item-value="_id"
21 :rules="classRules" 21 :rules="classRules"
22 @change="getSections(getReport.classId)" 22 @change="getSections(getReport.classId)"
23 required 23 required
24 ></v-select> 24 ></v-select>
25 </v-flex> 25 </v-flex>
26 </v-layout> 26 </v-layout>
27 </v-flex> 27 </v-flex>
28 <v-flex xs12 sm12 lg3> 28 <v-flex xs12 sm12 lg3>
29 <v-layout> 29 <v-layout>
30 <v-flex xs3 sm6 lg2 class="subheading mt-4"> 30 <v-flex xs3 sm6 lg2 class="subheading mt-4">
31 <label class="right">Section:</label> 31 <label class="right">Section:</label>
32 </v-flex> 32 </v-flex>
33 <v-flex xs9 sm6 lg8 class="ml-2"> 33 <v-flex xs9 sm6 lg8 class="ml-2">
34 <v-select 34 <v-select
35 :items="addSection" 35 :items="addSection"
36 label="Select your Section" 36 label="Select your Section"
37 v-model="getReport.sectionId" 37 v-model="getReport.sectionId"
38 item-text="name" 38 item-text="name"
39 item-value="_id" 39 item-value="_id"
40 name="Select Section" 40 name="Select Section"
41 @change="getStudents" 41 @change="getStudents"
42 :rules="sectionRules" 42 :rules="sectionRules"
43 required 43 required
44 ></v-select> 44 ></v-select>
45 </v-flex> 45 </v-flex>
46 </v-layout> 46 </v-layout>
47 </v-flex> 47 </v-flex>
48 <v-flex xs12 sm12 lg3> 48 <v-flex xs12 sm12 lg3>
49 <v-layout> 49 <v-layout>
50 <v-flex xs3 sm6 lg2 class="subheading mt-4"> 50 <v-flex xs3 sm6 lg2 class="subheading mt-4">
51 <label class="right">Student:</label> 51 <label class="right">Student:</label>
52 </v-flex> 52 </v-flex>
53 <v-flex xs9 sm6 lg8 class="ml-2"> 53 <v-flex xs9 sm6 lg8 class="ml-2">
54 <v-select 54 <v-select
55 :items="getStudentsList" 55 :items="getStudentsList"
56 label="Select your student" 56 label="Select your student"
57 v-model="getReport.studentId" 57 v-model="getReport.studentId"
58 item-text="name" 58 item-text="name"
59 item-value="_id" 59 item-value="_id"
60 :rules="studentRules" 60 :rules="studentRules"
61 required 61 required
62 ></v-select> 62 ></v-select>
63 </v-flex> 63 </v-flex>
64 </v-layout> 64 </v-layout>
65 </v-flex> 65 </v-flex>
66 <v-flex xs12 sm12 lg3 class="hidden-xs-only hidden-sm-only pl-5"> 66 <v-flex xs12 sm12 lg3 class="hidden-xs-only hidden-sm-only pl-5">
67 <v-btn 67 <v-btn
68 @click="getMarkReportList" 68 @click="getMarkReportList"
69 round 69 round
70 dark 70 dark
71 :loading="loading" 71 :loading="loading"
72 class="open-dialog-button mt-3 ml-5" 72 class="open-dialog-button mt-3 ml-5"
73 >Get Report</v-btn> 73 >Get Report</v-btn>
74 </v-flex> 74 </v-flex>
75 </v-layout> 75 </v-layout>
76 </v-flex> 76 </v-flex>
77 </v-form> 77 </v-form>
78 </v-card> 78 </v-card>
79 <v-layout v-show="showReport"> 79 <v-layout v-show="showReport">
80 <v-flex xs12> 80 <v-flex xs12>
81 <v-card class="transparent elevation-0"> 81 <v-card class="transparent elevation-0">
82 <v-layout> 82 <v-layout>
83 <v-flex xs12> 83 <v-flex xs12>
84 <v-btn class="open-dialog-button right" round dark @click="printProgressReport()"> 84 <v-btn class="open-dialog-button right" round dark @click="printProgressReport()">
85 Print 85 Print
86 <v-icon right dark>print</v-icon> 86 <v-icon right dark>print</v-icon>
87 </v-btn> 87 </v-btn>
88 </v-flex> 88 </v-flex>
89 </v-layout> 89 </v-layout>
90 <v-container grid-list-md v-show="showReport" class="report"> 90 <v-container grid-list-md v-show="showReport" class="report">
91 <v-flex xs12 sm12 id="printMe"> 91 <v-flex xs12 sm12 id="printMe">
92 <v-layout wrap> 92 <v-layout wrap>
93 <!-- ****** TABLE DATA MARK ****** --> 93 <!-- ****** TABLE DATA MARK ****** -->
94 <v-flex xs12 sm12 md12> 94 <v-flex xs12 sm12 md12>
95 <v-card 95 <v-card
96 v-for="(value, id, index) in filterData" 96 v-for="(value, id, index) in filterData"
97 :key="index" 97 :key="index"
98 flat 98 flat
99 style="border: 1px solid lightgrey;margin-bottom:14px;padding:20px" 99 style="border: 1px solid lightgrey;margin-bottom:14px;padding:20px"
100 > 100 >
101 <v-layout> 101 <v-layout>
102 <v-flex xs12 sm12 md12 class="text-xs-center"> 102 <v-flex xs12 sm12 md12 class="text-xs-center">
103 <div class="line"> 103 <div class="line">
104 <div class="school-logo"> 104 <div class="school-logo">
105 <img :src="userData.schoolLogoUrl" width="140" alt="logo" /> 105 <img :src="userData.schoolLogoUrl" width="140" alt="logo" />
106 </div> 106 </div>
107 <div class="school-name"> 107 <div class="school-name">
108 <h2>{{ userData.name }}</h2> 108 <h2>{{ userData.name }}</h2>
109 </div> 109 </div>
110 </div> 110 </div>
111 <div class="school-info"> 111 <div class="school-info">
112 <v-flex class="school-address"> 112 <v-flex class="school-address">
113 <p class="title">{{ userData.name }}</p> 113 <p class="title">{{ userData.name }}</p>
114 <p>{{ userData.address }}</p> 114 <p>{{ userData.address }}</p>
115 </v-flex> 115 </v-flex>
116 <v-flex xs12 sm12 md12 class="text-xs-center student-data"> 116 <v-flex xs12 sm12 md12 class="text-xs-center student-data">
117 <v-avatar size="100"> 117 <v-avatar size="100">
118 <img :src="value[0].studentId.profilePicUrl" v-if="value[0].studentId.profilePicUrl" width="100px" /> 118 <img :src="value[0].studentId.profilePicUrl" v-if="value[0].studentId.profilePicUrl" width="100px" />
119 <img src="/static/icon/user.png" v-else-if="!value[0].studentId.profilePicUrl" width="100px" /> 119 <img src="/static/icon/user.png" v-else-if="!value[0].studentId.profilePicUrl" width="100px" />
120 </v-avatar> 120 </v-avatar>
121 <div class="student-info"> 121 <div class="student-info">
122 <p 122 <p
123 style="font-size:20px;margin:0px;margin-bottom:4px;" 123 style="font-size:20px;margin:0px;margin-bottom:4px;"
124 >{{ value[0].studentId.name }}</p> 124 >{{ value[0].studentId.name }}</p>
125 <p 125 <p
126 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;" 126 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
127 >Class : {{ value[0].classId.classNum }}</p> 127 >Class : {{ value[0].classId.classNum }}</p>
128 <p 128 <p
129 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;" 129 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
130 >Section : {{ value[0].sectionId.name }}</p> 130 >Section : {{ value[0].sectionId.name }}</p>
131 <p 131 <p
132 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;" 132 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
133 >Roll NO : {{ value[0].studentId.rollNo }}</p> 133 >Roll NO : {{ value[0].studentId.rollNo }}</p>
134 </div> 134 </div>
135 </v-flex> 135 </v-flex>
136 </div> 136 </div>
137 </v-flex> 137 </v-flex>
138 </v-layout> 138 </v-layout>
139 <!-- <v-card-title class="subheading">{{value[0].examId.examName}}</v-card-title> --> 139 <!-- <v-card-title class="subheading">{{value[0].examId.examName}}</v-card-title> -->
140 <table 140 <table
141 class="mb-5 tableRsponsive feeTypeTable" 141 class="mb-5 tableRsponsive feeTypeTable"
142 style="border: 1px solid lightgrey; 142 style="border: 1px solid lightgrey;
143 border-collapse: collapse;!important 143 border-collapse: collapse;!important
144 table-layout: auto !important; 144 table-layout: auto !important;
145 width: 100% !important; 145 width: 100% !important;
146 overflow: hidden;" 146 overflow: hidden;"
147 > 147 >
148 <thead style="border: 1px solid lightgrey !important;"> 148 <thead style="border: 1px solid lightgrey !important;">
149 <tr style="border: 1px solid lightgrey !important;padding:4px;"> 149 <tr style="border: 1px solid lightgrey !important;padding:4px;">
150 <td 150 <td
151 rowspan="2" 151 rowspan="2"
152 style="border: 1px solid lightgrey !important;padding: 10px;" 152 style="border: 1px solid lightgrey !important;padding: 10px;"
153 >Subject</td> 153 >Subject</td>
154 <td 154 <td
155 v-for="(exam,i) in value[index].studentsMarks" 155 v-for="(exam,i) in value[index].studentsMarks"
156 colspan="2" 156 colspan="2"
157 style="border: 1px solid lightgrey !important;padding: 10px;" 157 style="border: 1px solid lightgrey !important;padding: 10px;"
158 >{{ exam.markDistributionId.distributionType }}</td> 158 >{{ exam.markDistributionId.distributionType }}</td>
159 <!-- <template v-for="studentData in value"> 159 <!-- <template v-for="studentData in value">
160 <td 160 <td
161 colspan="2" 161 colspan="2"
162 v-for="studentMark in studentData.studentsMarks" 162 v-for="studentMark in studentData.studentsMarks"
163 >{{ studentMark.markDistributionId.distributionType }}</td> 163 >{{ studentMark.markDistributionId.distributionType }}</td>
164 </template> --> 164 </template> -->
165 <!-- <td>{{value[0].studentsMarks[1].markDistributionId.distributionType}}</td> --> 165 <!-- <td>{{value[0].studentsMarks[1].markDistributionId.distributionType}}</td> -->
166 166
167 <td style="border: 1px solid lightgrey !important;padding: 10px;">Total</td> 167 <td style="border: 1px solid lightgrey !important;padding: 10px;">Total Marks</td>
168 </tr> 168 </tr>
169 <tr 169 <tr
170 v-for="(subject, ind) in value" 170 v-for="(subject, ind) in value"
171 v-if="ind == 0" 171 v-if="ind == 0"
172 style="border: 1px solid lightgrey !important;" 172 style="border: 1px solid lightgrey !important;"
173 > 173 >
174 <template v-for="(exam, i) in subject.studentsMarks"> 174 <template v-for="(exam, i) in subject.studentsMarks">
175 <td style="border: 1px solid lightgrey !important;padding: 10px;">Mark</td> 175 <td style="border: 1px solid lightgrey !important;padding: 10px;">Mark</td>
176 <td 176 <td
177 style="border: 1px solid lightgrey !important;padding: 10px;" 177 style="border: 1px solid lightgrey !important;padding: 10px;"
178 >Highest Mark</td> 178 >Highest Mark</td>
179 </template> 179 </template>
180 <td style="border: 1px solid lightgrey !important;padding: 10px;">Mark</td> 180 <!-- <td style="border: 1px solid lightgrey !important;padding: 10px;">Mark</td> -->
181 </tr> 181 </tr>
182 </thead> 182 </thead>
183 <tbody style="border: 1px solid lightgrey !important;"> 183 <tbody style="border: 1px solid lightgrey !important;">
184 <tr 184 <tr
185 v-for="subject in value" 185 v-for="subject in value"
186 style="border: 1px solid lightgrey !important;" 186 style="border: 1px solid lightgrey !important;"
187 > 187 >
188 <td style="border: 1px solid lightgrey !important;padding: 10px;"></td> 188 <td style="border: 1px solid lightgrey !important;padding: 10px;"></td>
189 <!-- <td 189 <!-- <td
190 style="border: 1px solid lightgrey !important;padding: 10px;" 190 style="border: 1px solid lightgrey !important;padding: 10px;"
191 >{{subject.subjectName}}</td> --> 191 >{{subject.subjectName}}</td> -->
192 <template v-for="(exam, i) in subject.studentsMarks"> 192 <template v-for="(exam, i) in subject.studentsMarks">
193 <td 193 <td
194 style="border: 1px solid lightgrey !important;padding: 10px;" 194 style="border: 1px solid lightgrey !important;padding: 10px;"
195 >{{exam.marksScored}}</td> 195 >{{exam.marksScored}}</td>
196 <td 196 <td
197 style="border: 1px solid lightgrey !important;padding: 10px;" 197 style="border: 1px solid lightgrey !important;padding: 10px;"
198 >{{exam.markDistributionId.markValue}}</td> 198 >{{exam.markDistributionId.markValue}}</td>
199 </template> 199 </template>
200 <td 200 <td
201 style="border: 1px solid lightgrey !important;padding: 10px;" 201 style="border: 1px solid lightgrey !important;padding: 10px;"
202 >{{subject.totalMarks}}</td> 202 >{{subject.totalMarks}}</td>
203 </tr> 203 </tr>
204 </tbody> 204 </tbody>
205 <!-- <tfoot> 205 <!-- <tfoot>
206 <tr> 206 <tr>
207 <td colspan="4"> 207 <td colspan="4">
208 <span class="right subheding">Total Amount (RS) :</span> 208 <span class="right subheding">Total Amount (RS) :</span>
209 </td> 209 </td>
210 <td>{{ feeType.subTotal }}</td> 210 <td>{{ feeType.subTotal }}</td>
211 </tr> 211 </tr>
212 <tr> 212 <tr>
213 <td colspan="4"> 213 <td colspan="4">
214 <span class="right subheding">Paid (RS) :</span> 214 <span class="right subheding">Paid (RS) :</span>
215 </td> 215 </td>
216 <td>{{ feeType.totalPaidAmount ? feeType.totalPaidAmount : 0 }}</td> 216 <td>{{ feeType.totalPaidAmount ? feeType.totalPaidAmount : 0 }}</td>
217 </tr> 217 </tr>
218 <tr> 218 <tr>
219 <td colspan="4"> 219 <td colspan="4">
220 <span class="right subheding">Balance (RS) :</span> 220 <span class="right subheding">Balance (RS) :</span>
221 </td> 221 </td>
222 <td>{{ feeType.totalPaidAmount ? feeType.subTotal - feeType.totalPaidAmount : feeType.subTotal }}</td> 222 <td>{{ feeType.totalPaidAmount ? feeType.subTotal - feeType.totalPaidAmount : feeType.subTotal }}</td>
223 </tr> 223 </tr>
224 </tfoot>--> 224 </tfoot>-->
225 </table> 225 </table>
226 </v-card> 226 </v-card>
227 </v-flex> 227 </v-flex>
228 </v-layout> 228 </v-layout>
229 </v-flex> 229 </v-flex>
230 </v-container> 230 </v-container>
231 </v-card> 231 </v-card>
232 </v-flex> 232 </v-flex>
233 </v-layout> 233 </v-layout>
234 <div class="loader" v-if="showLoader"> 234 <div class="loader" v-if="showLoader">
235 <v-progress-circular indeterminate color="white"></v-progress-circular> 235 <v-progress-circular indeterminate color="white"></v-progress-circular>
236 </div> 236 </div>
237 </v-container> 237 </v-container>
238 </template> 238 </template>
239 239
240 <script> 240 <script>
241 import http from "@/Services/http.js"; 241 import http from "@/Services/http.js";
242 import moment from "moment"; 242 import moment from "moment";
243 import _ from "underscore"; 243 import _ from "underscore";
244 244
245 export default { 245 export default {
246 data: () => ({ 246 data: () => ({
247 showLoader: false, 247 showLoader: false,
248 markData: [], 248 markData: [],
249 token: "", 249 token: "",
250 markDistributions: [], 250 markDistributions: [],
251 markParticularDistributionData: [], 251 markParticularDistributionData: [],
252 loading: false, 252 loading: false,
253 valid: true, 253 valid: true,
254 loading: false, 254 loading: false,
255 showReport: false, 255 showReport: false,
256 addSection: [], 256 addSection: [],
257 filterData: [], 257 filterData: [],
258 getStudentsList: [], 258 getStudentsList: [],
259 classRules: [v => !!v || "Class is required"], 259 classRules: [v => !!v || "Class is required"],
260 sectionRules: [v => !!v || "Class is required"], 260 sectionRules: [v => !!v || "Class is required"],
261 studentRules: [v => !!v || "Student is required"], 261 studentRules: [v => !!v || "Student is required"],
262 getReport: {}, 262 getReport: {},
263 classList: [], 263 classList: [],
264 output: null, 264 output: null,
265 userData: {} 265 userData: {}
266 }), 266 }),
267 mounted() { 267 mounted() {
268 this.token = this.$store.state.token; 268 this.token = this.$store.state.token;
269 this.getClass(); 269 this.getClass();
270 this.getUserData(); 270 this.getUserData();
271 }, 271 },
272 methods: { 272 methods: {
273 clear() { 273 clear() {
274 this.$refs.form.reset(); 274 this.$refs.form.reset();
275 }, 275 },
276 getClass() { 276 getClass() {
277 this.showLoader = true; 277 this.showLoader = true;
278 http() 278 http()
279 .get("/getClassesList", { 279 .get("/getClassesList", {
280 headers: { Authorization: "Bearer " + this.token } 280 headers: { Authorization: "Bearer " + this.token }
281 }) 281 })
282 .then(response => { 282 .then(response => {
283 this.classList = response.data.data; 283 this.classList = response.data.data;
284 this.showLoader = false; 284 this.showLoader = false;
285 }) 285 })
286 .catch(error => { 286 .catch(error => {
287 this.showLoader = false; 287 this.showLoader = false;
288 // console.log("err====>", err); 288 // console.log("err====>", err);
289 }); 289 });
290 }, 290 },
291 getSections(_id) { 291 getSections(_id) {
292 this.showLoader = true; 292 this.showLoader = true;
293 http() 293 http()
294 .get( 294 .get(
295 "/getSectionsList", 295 "/getSectionsList",
296 { params: { classId: _id } }, 296 { params: { classId: _id } },
297 { 297 {
298 headers: { Authorization: "Bearer " + this.token } 298 headers: { Authorization: "Bearer " + this.token }
299 } 299 }
300 ) 300 )
301 .then(response => { 301 .then(response => {
302 this.addSection = response.data.data; 302 this.addSection = response.data.data;
303 this.showLoader = false; 303 this.showLoader = false;
304 }) 304 })
305 .catch(err => { 305 .catch(err => {
306 this.showLoader = false; 306 this.showLoader = false;
307 // console.log("err====>", err); 307 // console.log("err====>", err);
308 }); 308 });
309 }, 309 },
310 getStudents() { 310 getStudents() {
311 this.showLoader = true; 311 this.showLoader = true;
312 http() 312 http()
313 .get("/getStudentWithClass", { 313 .get("/getStudentWithClass", {
314 params: { 314 params: {
315 classId: this.getReport.classId, 315 classId: this.getReport.classId,
316 sectionId: this.getReport.sectionId 316 sectionId: this.getReport.sectionId
317 } 317 }
318 }) 318 })
319 .then(response => { 319 .then(response => {
320 this.getStudentsList = response.data.data; 320 this.getStudentsList = response.data.data;
321 this.showLoader = false; 321 this.showLoader = false;
322 // console.log("getSectionsList=====>", response.data.data); 322 // console.log("getSectionsList=====>", response.data.data);
323 }) 323 })
324 .catch(error => { 324 .catch(error => {
325 console.log("err====>", error); 325 console.log("err====>", error);
326 this.showLoader = false; 326 this.showLoader = false;
327 }); 327 });
328 }, 328 },
329 getMarkReportList() { 329 getMarkReportList() {
330 // this.showLoader = true; 330 // this.showLoader = true;
331 this.showReport = true; 331 this.showReport = true;
332 http() 332 http()
333 .get("/getParticularMark", { 333 .get("/getParticularMark", {
334 params: { studentId: this.getReport.studentId }, 334 params: { studentId: this.getReport.studentId },
335 headers: { Authorization: "Bearer " + this.token } 335 headers: { Authorization: "Bearer " + this.token }
336 }) 336 })
337 .then(response => { 337 .then(response => {
338 this.showLoader = false; 338 this.showLoader = false;
339 let newData = response.data.data; 339 let newData = response.data.data;
340 // console.log("response", newData); 340 // console.log("response", newData);
341 for (var i = 0; i < newData.length; i++) { 341 for (var i = 0; i < newData.length; i++) {
342 newData[i].examination = newData[i].examId._id; 342 newData[i].examination = newData[i].examId._id;
343 // console.log("newData[i].examination", newData[i].examination); 343 // console.log("newData[i].examination", newData[i].examination);
344 } 344 }
345 this.filterData = _.groupBy(newData, ["examination"]); 345 this.filterData = _.groupBy(newData, ["examination"]);
346 for (let data in this.filterData) { 346 for (let data in this.filterData) {
347 // console.log("data+++++++++++++++++++++++++++++++++++", data); 347 // console.log("data+++++++++++++++++++++++++++++++++++", data);
348 348
349 for (let item in this.filterData[data]) { 349 for (let item in this.filterData[data]) {
350 // console.log( 350 // console.log(
351 // "filterData[data]==========================>", 351 // "filterData[data]==========================>",
352 // this.filterData[data] 352 // this.filterData[data]
353 // ); 353 // );
354 // console.log("filterData[item]==========================>", item); 354 // console.log("filterData[item]==========================>", item);
355 var totalMarks = 0; 355 var totalMarks = 0;
356 for ( 356 for (
357 let i = 0; 357 let i = 0;
358 i < this.filterData[data][item].studentsMarks.length; 358 i < this.filterData[data][item].studentsMarks.length;
359 i++ 359 i++
360 ) { 360 ) {
361 totalMarks += this.filterData[data][item].studentsMarks[i] 361 totalMarks += this.filterData[data][item].studentsMarks[i]
362 .marksScored; 362 .marksScored;
363 } 363 }
364 this.filterData[data][item].totalMarks = totalMarks; 364 this.filterData[data][item].totalMarks = totalMarks;
365 // var total = 0; 365 // var total = 0;
366 // total += this.filterData[data][item].totalMarks ; 366 // total += this.filterData[data][item].totalMarks ;
367 // console.log("total", total); 367 // console.log("total", total);
368 } 368 }
369 } 369 }
370 }) 370 })
371 .catch(error => { 371 .catch(error => {
372 // console.log("err====>", err); 372 // console.log("err====>", err);
373 this.showLoader = false; 373 this.showLoader = false;
374 this.snackbar = true; 374 this.snackbar = true;
375 this.text = error.response.data.message; 375 this.text = error.response.data.message;
376 if (error.response.status === 401) { 376 if (error.response.status === 401) {
377 this.$router.replace({ path: "/" }); 377 this.$router.replace({ path: "/" });
378 this.$store.dispatch("setToken", null); 378 this.$store.dispatch("setToken", null);
379 this.$store.dispatch("Id", null); 379 this.$store.dispatch("Id", null);
380 } 380 }
381 }); 381 });
382 }, 382 },
383 printProgressReport() { 383 printProgressReport() {
384 // Pass the element id here 384 // Pass the element id here
385 this.$htmlToPaper("printMe"); 385 this.$htmlToPaper("printMe");
386 }, 386 },
387 getUserData() { 387 getUserData() {
388 http() 388 http()
389 .get("/getParticularUserDetail") 389 .get("/getParticularUserDetail")
390 .then(response => { 390 .then(response => {
391 this.userData = response.data.data; 391 this.userData = response.data.data;
392 }) 392 })
393 .catch(error => { 393 .catch(error => {
394 // if (error.response.status === 401) { 394 // if (error.response.status === 401) {
395 // this.$router.replace({ path: "/" }); 395 // this.$router.replace({ path: "/" });
396 // this.$store.dispatch("setToken", null); 396 // this.$store.dispatch("setToken", null);
397 // this.$store.dispatch("Id", null); 397 // this.$store.dispatch("Id", null);
398 // } 398 // }
399 }); 399 });
400 } 400 }
401 } 401 }
402 }; 402 };
403 </script> 403 </script>
404 404
405 <style scoped> 405 <style scoped>
406 table { 406 table {
407 border-collapse: collapse; 407 border-collapse: collapse;
408 border: 1px solid #e2e7eb; 408 border: 1px solid #e2e7eb;
409 } 409 }
410 410
411 th, 411 th,
412 td { 412 td {
413 border: 1px solid #e2e7eb; 413 border: 1px solid #e2e7eb;
414 padding: 10px; 414 padding: 10px;
415 text-align: center; 415 text-align: center;
416 } 416 }
417 table.feeTypeTable { 417 table.feeTypeTable {
418 table-layout: auto !important; 418 table-layout: auto !important;
419 width: 100% !important; 419 width: 100% !important;
420 } 420 }
421 .bg-sky { 421 .bg-sky {
422 background-color: #98b2cc !important; 422 background-color: #98b2cc !important;
423 } 423 }
424 .bg-sky-light { 424 .bg-sky-light {
425 background-color: #89a0b8; 425 background-color: #89a0b8;
426 } 426 }
427 .bg-purple { 427 .bg-purple {
428 background-color: #9583ac; 428 background-color: #9583ac;
429 } 429 }
430 .bg-skyDark { 430 .bg-skyDark {
431 background-color: #956785; 431 background-color: #956785;
432 } 432 }
433 433
434 /* .report { 434 /* .report {
435 overflow: hidden; 435 overflow: hidden;
436 max-width: 794px; 436 max-width: 794px;
437 margin: 0px auto; 437 margin: 0px auto;
438 margin-bottom: 10px; 438 margin-bottom: 10px;
439 padding: 30px; 439 padding: 30px;
440 } */ 440 } */
441 .line { 441 .line {
442 border-bottom: 1px solid #ddd; 442 border-bottom: 1px solid #ddd;
443 overflow: hidden; 443 overflow: hidden;
444 padding-bottom: 10px; 444 padding-bottom: 10px;
445 vertical-align: middle; 445 vertical-align: middle;
446 margin-bottom: 4px; 446 margin-bottom: 4px;
447 } 447 }
448 .school-logo { 448 .school-logo {
449 float: left; 449 float: left;
450 } 450 }
451 .school-name { 451 .school-name {
452 box-sizing: border-box; 452 box-sizing: border-box;
453 } 453 }
454 .school-info { 454 .school-info {
455 width: 100%; 455 width: 100%;
456 overflow: hidden; 456 overflow: hidden;
457 } 457 }
458 .school-address { 458 .school-address {
459 float: left; 459 float: left;
460 width: 40%; 460 width: 40%;
461 } 461 }
462 .student-data { 462 .student-data {
463 float: right; 463 float: right;
464 width: 40%; 464 width: 40%;
465 } 465 }
466 .student-info { 466 .student-info {
467 float: left; 467 float: left;
468 } 468 }
469 @media screen and (max-width: 380px) { 469 @media screen and (max-width: 380px) {
470 .tableRsponsive { 470 .tableRsponsive {
471 /* display: block; */ 471 /* display: block; */
472 position: relative; 472 position: relative;
473 overflow: scroll; 473 overflow: scroll;
474 } 474 }
475 } 475 }
476 </style> s 476 </style> s