viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit d4735dce7c40b88084c8e084563421b6702d7b3b

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

show school logo and name while printing the report

Showing 3 changed files with 241 additions and 244 deletions   Show diff stats
src/pages/Library/member.vue
Diff comments   View file @d4735dc
1 <template> 1 <template>
2 <div> 2 <div>
3 <v-snackbar 3 <v-snackbar
4 :timeout="timeout" 4 :timeout="timeout"
5 :top="y === 'top'" 5 :top="y === 'top'"
6 :right="x === 'right'" 6 :right="x === 'right'"
7 :vertical="mode === 'vertical'" 7 :vertical="mode === 'vertical'"
8 v-model="snackbar" 8 v-model="snackbar"
9 color="success" 9 color="success"
10 >{{ text }}</v-snackbar> 10 >{{ text }}</v-snackbar>
11 11
12 <!-- ****** PROFILE VIEW STUDENTS LIBRARY MEMBER DEATILS ****** --> 12 <!-- ****** PROFILE VIEW STUDENTS LIBRARY MEMBER DEATILS ****** -->
13 13
14 <v-dialog v-model="dialogStudents" max-width="1100px" scrollable> 14 <v-dialog v-model="dialogStudents" max-width="1100px" scrollable>
15 <v-card> 15 <v-card>
16 <v-toolbar color="grey lighten-2" flat> 16 <v-toolbar color="grey lighten-2" flat>
17 <v-spacer></v-spacer> 17 <v-spacer></v-spacer>
18 <v-toolbar-title>Student Profile</v-toolbar-title> 18 <v-toolbar-title>Student Profile</v-toolbar-title>
19 <v-spacer></v-spacer> 19 <v-spacer></v-spacer>
20 <v-icon @click="closeViewStudent">close</v-icon> 20 <v-icon @click="closeViewStudent">close</v-icon>
21 </v-toolbar> 21 </v-toolbar>
22 <v-card-text style="height: 700px;"> 22 <v-card-text style="height: 700px;">
23 <v-flex align-center justify-center layout text-xs-center class="mt-3"> 23 <v-flex align-center justify-center layout text-xs-center class="mt-3">
24 <v-avatar size="160px"> 24 <v-avatar size="160px">
25 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" /> 25 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" />
26 <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" /> 26 <img :src="editedItem.profilePicUrl" v-else-if="editedItem.profilePicUrl" />
27 </v-avatar> 27 </v-avatar>
28 </v-flex> 28 </v-flex>
29 <v-container grid-list-md> 29 <v-container grid-list-md>
30 <v-layout wrap> 30 <v-layout wrap>
31 <v-flex xs12> 31 <v-flex xs12>
32 <v-layout wrap> 32 <v-layout wrap>
33 <v-flex xs12 sm6> 33 <v-flex xs12 sm6>
34 <v-layout> 34 <v-layout>
35 <v-flex xs6 sm5> 35 <v-flex xs6 sm5>
36 <h5 class="right my-1"> 36 <h5 class="right my-1">
37 <b>Full Name:</b> 37 <b>Full Name:</b>
38 </h5> 38 </h5>
39 </v-flex> 39 </v-flex>
40 <v-flex sm7 xs6> 40 <v-flex sm7 xs6>
41 <h5 class="my-1 left">{{ editedItem.name }}</h5> 41 <h5 class="my-1 left">{{ editedItem.name }}</h5>
42 </v-flex> 42 </v-flex>
43 </v-layout> 43 </v-layout>
44 </v-flex> 44 </v-flex>
45 <v-flex xs12 sm6> 45 <v-flex xs12 sm6>
46 <v-layout> 46 <v-layout>
47 <v-flex xs6 sm4> 47 <v-flex xs6 sm4>
48 <h5 class="right my-1"> 48 <h5 class="right my-1">
49 <b>Email:</b> 49 <b>Email:</b>
50 </h5> 50 </h5>
51 </v-flex> 51 </v-flex>
52 <v-flex sm8 xs6> 52 <v-flex sm8 xs6>
53 <h5 class="my-1 left">{{ editedItem.email }}</h5> 53 <h5 class="my-1 left">{{ editedItem.email }}</h5>
54 </v-flex> 54 </v-flex>
55 </v-layout> 55 </v-layout>
56 </v-flex> 56 </v-flex>
57 </v-layout> 57 </v-layout>
58 <v-layout wrap> 58 <v-layout wrap>
59 <v-flex xs12 sm6> 59 <v-flex xs12 sm6>
60 <v-layout> 60 <v-layout>
61 <v-flex xs6 sm5> 61 <v-flex xs6 sm5>
62 <b> 62 <b>
63 <h5 class="right my-1"> 63 <h5 class="right my-1">
64 <b>Gender:</b> 64 <b>Gender:</b>
65 </h5> 65 </h5>
66 </b> 66 </b>
67 </v-flex> 67 </v-flex>
68 <v-flex sm7 xs6> 68 <v-flex sm7 xs6>
69 <h5 class="my-1 left">{{ editedItem.gender }}</h5> 69 <h5 class="my-1 left">{{ editedItem.gender }}</h5>
70 </v-flex> 70 </v-flex>
71 </v-layout> 71 </v-layout>
72 </v-flex> 72 </v-flex>
73 <v-flex xs12 sm6> 73 <v-flex xs12 sm6>
74 <v-layout> 74 <v-layout>
75 <v-flex xs6 sm4> 75 <v-flex xs6 sm4>
76 <b> 76 <b>
77 <h5 class="right my-1"> 77 <h5 class="right my-1">
78 <b>D.O.B:</b> 78 <b>D.O.B:</b>
79 </h5> 79 </h5>
80 </b> 80 </b>
81 </v-flex> 81 </v-flex>
82 <v-flex sm7 xs6> 82 <v-flex sm7 xs6>
83 <h5 class="my-1">{{ dates(editedItem.dob) }}</h5> 83 <h5 class="my-1">{{ dates(editedItem.dob) }}</h5>
84 </v-flex> 84 </v-flex>
85 </v-layout> 85 </v-layout>
86 </v-flex> 86 </v-flex>
87 </v-layout> 87 </v-layout>
88 <v-layout wrap> 88 <v-layout wrap>
89 <v-flex xs12 sm6> 89 <v-flex xs12 sm6>
90 <v-layout> 90 <v-layout>
91 <v-flex xs6 sm5> 91 <v-flex xs6 sm5>
92 <b> 92 <b>
93 <h5 class="right my-1"> 93 <h5 class="right my-1">
94 <b>Blood Group:</b> 94 <b>Blood Group:</b>
95 </h5> 95 </h5>
96 </b> 96 </b>
97 </v-flex> 97 </v-flex>
98 <v-flex sm7 xs6> 98 <v-flex sm7 xs6>
99 <h5 class="my-1 left">{{ editedItem.bloodGroup }}</h5> 99 <h5 class="my-1 left">{{ editedItem.bloodGroup }}</h5>
100 </v-flex> 100 </v-flex>
101 </v-layout> 101 </v-layout>
102 </v-flex> 102 </v-flex>
103 <v-flex xs12 sm6> 103 <v-flex xs12 sm6>
104 <v-layout> 104 <v-layout>
105 <v-flex xs6 sm4> 105 <v-flex xs6 sm4>
106 <b> 106 <b>
107 <h5 class="right my-1"> 107 <h5 class="right my-1">
108 <b>Allergies:</b> 108 <b>Allergies:</b>
109 </h5> 109 </h5>
110 </b> 110 </b>
111 </v-flex> 111 </v-flex>
112 <v-flex sm8 xs6> 112 <v-flex sm8 xs6>
113 <h5 class="my-1">{{ editedItem.allergies }}</h5> 113 <h5 class="my-1">{{ editedItem.allergies }}</h5>
114 </v-flex> 114 </v-flex>
115 </v-layout> 115 </v-layout>
116 </v-flex> 116 </v-flex>
117 </v-layout> 117 </v-layout>
118 <v-layout wrap> 118 <v-layout wrap>
119 <v-flex xs12 sm6> 119 <v-flex xs12 sm6>
120 <v-layout> 120 <v-layout>
121 <v-flex xs6 sm5> 121 <v-flex xs6 sm5>
122 <b> 122 <b>
123 <h5 class="right my-1"> 123 <h5 class="right my-1">
124 <b>Height:</b> 124 <b>Height:</b>
125 </h5> 125 </h5>
126 </b> 126 </b>
127 </v-flex> 127 </v-flex>
128 <v-flex sm7 xs6> 128 <v-flex sm7 xs6>
129 <h5 class="my-1 left">{{ editedItem.height }}</h5> 129 <h5 class="my-1 left">{{ editedItem.height }}</h5>
130 </v-flex> 130 </v-flex>
131 </v-layout> 131 </v-layout>
132 </v-flex> 132 </v-flex>
133 <v-flex xs12 sm6> 133 <v-flex xs12 sm6>
134 <v-layout> 134 <v-layout>
135 <v-flex xs6 sm4> 135 <v-flex xs6 sm4>
136 <b> 136 <b>
137 <h5 class="right my-1"> 137 <h5 class="right my-1">
138 <b>Weight:</b> 138 <b>Weight:</b>
139 </h5> 139 </h5>
140 </b> 140 </b>
141 </v-flex> 141 </v-flex>
142 <v-flex sm8 xs6> 142 <v-flex sm8 xs6>
143 <h5 class="my-1">{{ editedItem.weight }}</h5> 143 <h5 class="my-1">{{ editedItem.weight }}</h5>
144 </v-flex> 144 </v-flex>
145 </v-layout> 145 </v-layout>
146 </v-flex> 146 </v-flex>
147 </v-layout> 147 </v-layout>
148 <v-layout wrap> 148 <v-layout wrap>
149 <v-flex xs12 sm6> 149 <v-flex xs12 sm6>
150 <v-layout> 150 <v-layout>
151 <v-flex xs6 sm5> 151 <v-flex xs6 sm5>
152 <b> 152 <b>
153 <h5 class="right my-1"> 153 <h5 class="right my-1">
154 <b>City:</b> 154 <b>City:</b>
155 </h5> 155 </h5>
156 </b> 156 </b>
157 </v-flex> 157 </v-flex>
158 <v-flex sm7 xs6> 158 <v-flex sm7 xs6>
159 <h5 class="my-1 left">{{ editedItem.city }}</h5> 159 <h5 class="my-1 left">{{ editedItem.city }}</h5>
160 </v-flex> 160 </v-flex>
161 </v-layout> 161 </v-layout>
162 </v-flex> 162 </v-flex>
163 <v-flex xs12 sm6> 163 <v-flex xs12 sm6>
164 <v-layout> 164 <v-layout>
165 <v-flex xs6 sm4> 165 <v-flex xs6 sm4>
166 <b> 166 <b>
167 <h5 class="right my-1"> 167 <h5 class="right my-1">
168 <b>State:</b> 168 <b>State:</b>
169 </h5> 169 </h5>
170 </b> 170 </b>
171 </v-flex> 171 </v-flex>
172 <v-flex sm8 xs6> 172 <v-flex sm8 xs6>
173 <h5 class="my-1">{{ editedItem.state }}</h5> 173 <h5 class="my-1">{{ editedItem.state }}</h5>
174 </v-flex> 174 </v-flex>
175 </v-layout> 175 </v-layout>
176 </v-flex> 176 </v-flex>
177 </v-layout> 177 </v-layout>
178 <v-layout wrap> 178 <v-layout wrap>
179 <v-flex xs12 sm6> 179 <v-flex xs12 sm6>
180 <v-layout> 180 <v-layout>
181 <v-flex xs6 sm5> 181 <v-flex xs6 sm5>
182 <b> 182 <b>
183 <h5 class="right my-1"> 183 <h5 class="right my-1">
184 <b>Pincode:</b> 184 <b>Pincode:</b>
185 </h5> 185 </h5>
186 </b> 186 </b>
187 </v-flex> 187 </v-flex>
188 <v-flex sm7 xs6> 188 <v-flex sm7 xs6>
189 <h5 class="my-1">{{ editedItem.pincode }}</h5> 189 <h5 class="my-1">{{ editedItem.pincode }}</h5>
190 </v-flex> 190 </v-flex>
191 </v-layout> 191 </v-layout>
192 </v-flex> 192 </v-flex>
193 <v-flex xs12 sm5> 193 <v-flex xs12 sm5>
194 <v-layout> 194 <v-layout>
195 <v-flex xs6 sm5> 195 <v-flex xs6 sm5>
196 <b> 196 <b>
197 <h5 class="right my-1"> 197 <h5 class="right my-1">
198 <b>Country:</b> 198 <b>Country:</b>
199 </h5> 199 </h5>
200 </b> 200 </b>
201 </v-flex> 201 </v-flex>
202 <v-flex sm7 xs6> 202 <v-flex sm7 xs6>
203 <h5 class="my-1">{{ editedItem.country }}</h5> 203 <h5 class="my-1">{{ editedItem.country }}</h5>
204 </v-flex> 204 </v-flex>
205 </v-layout> 205 </v-layout>
206 </v-flex> 206 </v-flex>
207 </v-layout> 207 </v-layout>
208 <v-layout wrap> 208 <v-layout wrap>
209 <v-flex xs12 sm6> 209 <v-flex xs12 sm6>
210 <v-layout> 210 <v-layout>
211 <v-flex sm5 xs6> 211 <v-flex sm5 xs6>
212 <b> 212 <b>
213 <h5 class="right my-1"> 213 <h5 class="right my-1">
214 <b>Mobile No:</b> 214 <b>Mobile No:</b>
215 </h5> 215 </h5>
216 </b> 216 </b>
217 </v-flex> 217 </v-flex>
218 <v-flex sm6 xs6> 218 <v-flex sm6 xs6>
219 <h5 class="my-1">{{ editedItem.mobile }}</h5> 219 <h5 class="my-1">{{ editedItem.mobile }}</h5>
220 </v-flex> 220 </v-flex>
221 </v-layout> 221 </v-layout>
222 </v-flex> 222 </v-flex>
223 <v-flex xs12 sm6> 223 <v-flex xs12 sm6>
224 <v-layout> 224 <v-layout>
225 <v-flex xs6 sm4> 225 <v-flex xs6 sm4>
226 <b> 226 <b>
227 <h5 class="right my-1"> 227 <h5 class="right my-1">
228 <b>Library ID :</b> 228 <b>Library ID :</b>
229 </h5> 229 </h5>
230 </b> 230 </b>
231 </v-flex> 231 </v-flex>
232 <v-flex sm8 xs6> 232 <v-flex sm8 xs6>
233 <h5 class="my-1">{{ editedItem.libraryId }}</h5> 233 <h5 class="my-1">{{ editedItem.libraryId }}</h5>
234 </v-flex> 234 </v-flex>
235 </v-layout> 235 </v-layout>
236 </v-flex> 236 </v-flex>
237 </v-layout> 237 </v-layout>
238 <v-layout wrap> 238 <v-layout wrap>
239 <v-flex xs12 sm5> 239 <v-flex xs12 sm5>
240 <v-layout> 240 <v-layout>
241 <v-flex xs6 sm6> 241 <v-flex xs6 sm6>
242 <b> 242 <b>
243 <h5 class="right my-1"> 243 <h5 class="right my-1">
244 <b>Library Fee:</b> 244 <b>Library Fee:</b>
245 </h5> 245 </h5>
246 </b> 246 </b>
247 </v-flex> 247 </v-flex>
248 <v-flex sm6 xs6> 248 <v-flex sm6 xs6>
249 <h5 class="my-1">{{ editedItem.libraryFee }}</h5> 249 <h5 class="my-1">{{ editedItem.libraryFee }}</h5>
250 </v-flex> 250 </v-flex>
251 </v-layout> 251 </v-layout>
252 </v-flex> 252 </v-flex>
253 <v-flex xs12 sm6> 253 <v-flex xs12 sm6>
254 <v-layout> 254 <v-layout>
255 <v-flex xs6 sm6> 255 <v-flex xs6 sm6>
256 <b> 256 <b>
257 <h5 class="my-1 right"> 257 <h5 class="my-1 right">
258 <b>Academic Year:</b> 258 <b>Academic Year:</b>
259 </h5> 259 </h5>
260 </b> 260 </b>
261 </v-flex> 261 </v-flex>
262 <v-flex sm5 xs6> 262 <v-flex sm5 xs6>
263 <h5 class="my-1">{{ editedItem.establishmentYear }}</h5> 263 <h5 class="my-1">{{ editedItem.establishmentYear }}</h5>
264 </v-flex> 264 </v-flex>
265 </v-layout> 265 </v-layout>
266 </v-flex> 266 </v-flex>
267 </v-layout> 267 </v-layout>
268 <v-layout wrap> 268 <v-layout wrap>
269 <v-flex xs12 sm5> 269 <v-flex xs12 sm5>
270 <v-layout> 270 <v-layout>
271 <v-flex xs6 sm6> 271 <v-flex xs6 sm6>
272 <b> 272 <b>
273 <h5 class="my-1 right"> 273 <h5 class="my-1 right">
274 <b>Medical Notes:</b> 274 <b>Medical Notes:</b>
275 </h5> 275 </h5>
276 </b> 276 </b>
277 </v-flex> 277 </v-flex>
278 <v-flex sm5 xs6> 278 <v-flex sm5 xs6>
279 <h5 class="my-1">{{ editedItem.medicalNotes }}</h5> 279 <h5 class="my-1">{{ editedItem.medicalNotes }}</h5>
280 </v-flex> 280 </v-flex>
281 </v-layout> 281 </v-layout>
282 </v-flex> 282 </v-flex>
283 <v-flex xs12 sm6> 283 <v-flex xs12 sm6>
284 <v-layout> 284 <v-layout>
285 <v-flex xs6 sm6> 285 <v-flex xs6 sm6>
286 <b> 286 <b>
287 <h5 class="right my-1"> 287 <h5 class="right my-1">
288 <b>Roll No. :</b> 288 <b>Roll No. :</b>
289 </h5> 289 </h5>
290 </b> 290 </b>
291 </v-flex> 291 </v-flex>
292 <v-flex sm6 xs8> 292 <v-flex sm6 xs8>
293 <h5 class="my-1">{{ editedItem.rollNo }}</h5> 293 <h5 class="my-1">{{ editedItem.rollNo }}</h5>
294 </v-flex> 294 </v-flex>
295 </v-layout> 295 </v-layout>
296 </v-flex> 296 </v-flex>
297 </v-layout> 297 </v-layout>
298 <v-layout wrap> 298 <v-layout wrap>
299 <v-flex xs12 sm5> 299 <v-flex xs12 sm5>
300 <v-layout> 300 <v-layout>
301 <v-flex xs6 sm6> 301 <v-flex xs6 sm6>
302 <b> 302 <b>
303 <h5 class="my-1 right"> 303 <h5 class="my-1 right">
304 <b>present Address:</b> 304 <b>present Address:</b>
305 </h5> 305 </h5>
306 </b> 306 </b>
307 </v-flex> 307 </v-flex>
308 <v-flex sm5 xs6> 308 <v-flex sm5 xs6>
309 <h5 class="my-1">{{ editedItem.presentAddress }}</h5> 309 <h5 class="my-1">{{ editedItem.presentAddress }}</h5>
310 </v-flex> 310 </v-flex>
311 </v-layout> 311 </v-layout>
312 </v-flex> 312 </v-flex>
313 <v-flex xs12 sm6> 313 <v-flex xs12 sm6>
314 <v-layout> 314 <v-layout>
315 <v-flex xs6 sm6> 315 <v-flex xs6 sm6>
316 <b> 316 <b>
317 <h5 class="right my-1"> 317 <h5 class="right my-1">
318 <b>present Address:</b> 318 <b>present Address:</b>
319 </h5> 319 </h5>
320 </b> 320 </b>
321 </v-flex> 321 </v-flex>
322 <v-flex sm6 xs8> 322 <v-flex sm6 xs8>
323 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5> 323 <h5 class="my-1">{{ editedItem.permanentAddress }}</h5>
324 </v-flex> 324 </v-flex>
325 </v-layout> 325 </v-layout>
326 </v-flex> 326 </v-flex>
327 </v-layout> 327 </v-layout>
328 </v-flex> 328 </v-flex>
329 </v-layout> 329 </v-layout>
330 </v-container> 330 </v-container>
331 </v-card-text> 331 </v-card-text>
332 </v-card> 332 </v-card>
333 </v-dialog> 333 </v-dialog>
334 334
335 <!-- Edit Student Library Member Dialog --> 335 <!-- Edit Student Library Member Dialog -->
336 336
337 <v-dialog v-model="editStudentdialog" max-width="600px" scrollable> 337 <v-dialog v-model="editStudentdialog" max-width="600px" scrollable>
338 <v-card flat> 338 <v-card flat>
339 <v-toolbar color="grey lighten-2" flat> 339 <v-toolbar color="grey lighten-2" flat>
340 <v-spacer></v-spacer> 340 <v-spacer></v-spacer>
341 <v-toolbar-title> 341 <v-toolbar-title>
342 <h3>Edit Student Profile</h3> 342 <h3>Edit Student Profile</h3>
343 </v-toolbar-title> 343 </v-toolbar-title>
344 <v-spacer></v-spacer> 344 <v-spacer></v-spacer>
345 </v-toolbar> 345 </v-toolbar>
346 <v-card-text style="height: 426px;"> 346 <v-card-text style="height: 426px;">
347 <v-form ref="form"> 347 <v-form ref="form">
348 <v-container fluid> 348 <v-container fluid>
349 <v-layout> 349 <v-layout>
350 <v-flex 350 <v-flex
351 xs12 351 xs12
352 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4" 352 class="text-xs-center text-sm-center text-md-center text-lg-center mr-4"
353 > 353 >
354 <v-avatar size="160px"> 354 <v-avatar size="160px">
355 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl && !imageUrl" /> 355 <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl && !imageUrl" />
356 <img 356 <img
357 :src="editedItem.profilePicUrl" 357 :src="editedItem.profilePicUrl"
358 v-else-if="editedItem.profilePicUrl && !imageUrl" 358 v-else-if="editedItem.profilePicUrl && !imageUrl"
359 /> 359 />
360 <img 360 <img
361 v-if="imageUrl" 361 v-if="imageUrl"
362 :src="imageUrl" 362 :src="imageUrl"
363 height="150" 363 height="150"
364 style="border-radius:50%; width:200px" 364 style="border-radius:50%; width:200px"
365 /> 365 />
366 </v-avatar> 366 </v-avatar>
367 </v-flex> 367 </v-flex>
368 </v-layout> 368 </v-layout>
369 <v-layout wrap> 369 <v-layout wrap>
370 <v-flex xs12 sm12 md10> 370 <v-flex xs12 sm12 md10>
371 <v-layout> 371 <v-layout>
372 <v-flex xs4 class="pt-4 subheading"> 372 <v-flex xs4 class="pt-4 subheading">
373 <label class="right hidden-xs-only hidden-sm-only">Library ID:</label> 373 <label class="right hidden-xs-only hidden-sm-only">Library ID:</label>
374 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Library ID:</label> 374 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Library ID:</label>
375 </v-flex> 375 </v-flex>
376 <v-flex xs8 class="ml-3"> 376 <v-flex xs8 class="ml-3">
377 <v-text-field 377 <v-text-field
378 v-model="editedItem.libraryId" 378 v-model="editedItem.libraryId"
379 placeholder="fill your Library ID" 379 placeholder="fill your Library ID"
380 ></v-text-field> 380 ></v-text-field>
381 </v-flex> 381 </v-flex>
382 </v-layout> 382 </v-layout>
383 </v-flex> 383 </v-flex>
384 <v-flex xs12 sm12 md10> 384 <v-flex xs12 sm12 md10>
385 <v-layout> 385 <v-layout>
386 <v-flex xs4 class="pt-4 subheading"> 386 <v-flex xs4 class="pt-4 subheading">
387 <label class="right hidden-xs-only hidden-sm-only">Library Fee:</label> 387 <label class="right hidden-xs-only hidden-sm-only">Library Fee:</label>
388 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Library Fee:</label> 388 <label class="right hidden-lg-only hidden-md-only hidden-xl-only">Library Fee:</label>
389 </v-flex> 389 </v-flex>
390 <v-flex xs8 class="ml-3"> 390 <v-flex xs8 class="ml-3">
391 <v-text-field 391 <v-text-field
392 v-model="editedItem.libraryFee" 392 v-model="editedItem.libraryFee"
393 placeholder="fill your Library Fee" 393 placeholder="fill your Library Fee"
394 ></v-text-field> 394 ></v-text-field>
395 </v-flex> 395 </v-flex>
396 </v-layout> 396 </v-layout>
397 </v-flex> 397 </v-flex>
398 </v-layout> 398 </v-layout>
399 <v-layout> 399 <v-layout>
400 <v-flex xs12 sm12> 400 <v-flex xs12 sm12>
401 <v-layout> 401 <v-layout>
402 <v-flex xs6> 402 <v-flex xs6>
403 <v-btn round dark @click.native="closeEditStudentDialog">Cancel</v-btn> 403 <v-btn round dark @click.native="closeEditStudentDialog">Cancel</v-btn>
404 </v-flex> 404 </v-flex>
405 <v-flex xs6> 405 <v-flex xs6>
406 <v-btn @click="save" round dark :loading="loading" class="right">Save</v-btn> 406 <v-btn @click="save" round dark :loading="loading" class="right">Save</v-btn>
407 </v-flex> 407 </v-flex>
408 </v-layout> 408 </v-layout>
409 </v-flex> 409 </v-flex>
410 </v-layout> 410 </v-layout>
411 </v-container> 411 </v-container>
412 </v-form> 412 </v-form>
413 </v-card-text> 413 </v-card-text>
414 </v-card> 414 </v-card>
415 </v-dialog> 415 </v-dialog>
416 <!-- Add Student Library Member Dialog --> 416 <!-- Add Student Library Member Dialog -->
417 417
418 <v-dialog v-model="addLibrary" max-width="600px"> 418 <v-dialog v-model="addLibrary" max-width="600px">
419 <v-toolbar color="grey lighten-2"> 419 <v-toolbar color="grey lighten-2">
420 <v-spacer></v-spacer> 420 <v-spacer></v-spacer>
421 <v-toolbar-title> 421 <v-toolbar-title>
422 <h3>Library Member</h3> 422 <h3>Library Member</h3>
423 </v-toolbar-title> 423 </v-toolbar-title>
424 <v-spacer></v-spacer> 424 <v-spacer></v-spacer>
425 </v-toolbar> 425 </v-toolbar>
426 <v-card> 426 <v-card>
427 <v-card-text> 427 <v-card-text>
428 <v-layout wrap justify-center> 428 <v-layout wrap justify-center>
429 <v-flex xs12 sm12 md10> 429 <v-flex xs12 sm12 md10>
430 <v-form ref="form" v-model="valid" lazy-validation> 430 <v-form ref="form" v-model="valid" lazy-validation>
431 <v-layout> 431 <v-layout>
432 <v-flex xs4 class="pt-4 subheading"> 432 <v-flex xs4 class="pt-4 subheading">
433 <label class="right pr-3">Library Id:</label> 433 <label class="right pr-3">Library Id:</label>
434 </v-flex> 434 </v-flex>
435 <v-flex xs8> 435 <v-flex xs8>
436 <v-text-field 436 <v-text-field
437 v-model="addBook.libraryId" 437 v-model="addBook.libraryId"
438 :rules="libraryIdRules" 438 :rules="libraryIdRules"
439 type="number" 439 type="number"
440 placeholder="fill your Library ID" 440 placeholder="fill your Library ID"
441 ></v-text-field> 441 ></v-text-field>
442 </v-flex> 442 </v-flex>
443 </v-layout> 443 </v-layout>
444 <v-layout> 444 <v-layout>
445 <v-flex xs4 class="pt-4 subheading"> 445 <v-flex xs4 class="pt-4 subheading">
446 <label class="right pr-3">Library Fee:</label> 446 <label class="right pr-3">Library Fee:</label>
447 </v-flex> 447 </v-flex>
448 <v-flex xs8> 448 <v-flex xs8>
449 <v-text-field 449 <v-text-field
450 v-model="addBook.libraryFee" 450 v-model="addBook.libraryFee"
451 type="number" 451 type="number"
452 :rules="libraryFeeRules" 452 :rules="libraryFeeRules"
453 placeholder="fill your Library Fee" 453 placeholder="fill your Library Fee"
454 ></v-text-field> 454 ></v-text-field>
455 </v-flex> 455 </v-flex>
456 </v-layout> 456 </v-layout>
457 <v-card-actions> 457 <v-card-actions>
458 <v-btn round dark @click.native="addLibrary = false">Cancel</v-btn> 458 <v-btn round dark @click.native="addLibrary = false">Cancel</v-btn>
459 <v-spacer></v-spacer> 459 <v-spacer></v-spacer>
460 <v-btn round dark @click="submit" :loading="loading">Add Member</v-btn> 460 <v-btn round dark @click="submit" :loading="loading">Add Member</v-btn>
461 </v-card-actions> 461 </v-card-actions>
462 </v-form> 462 </v-form>
463 </v-flex> 463 </v-flex>
464 </v-layout> 464 </v-layout>
465 </v-card-text> 465 </v-card-text>
466 </v-card> 466 </v-card>
467 </v-dialog> 467 </v-dialog>
468 <!-- ****** EXISTING MEMBER TABLE ****** --> 468 <!-- ****** EXISTING MEMBER TABLE ****** -->
469 <v-card flat> 469 <v-card flat>
470 <h4 470 <h4
471 class="text-xs-center pt-4 ml-2 hidden-lg-only hidden-xl-only hidden-md-only" 471 class="text-xs-center pt-4 ml-2 hidden-lg-only hidden-xl-only hidden-md-only"
472 >Library Member</h4> 472 >Library Member</h4>
473 <v-card-actions> 473 <v-card-actions>
474 <h3 class="right mt-2 ml-2 hidden-sm-only hidden-xs-only">Library Member</h3> 474 <h3 class="right mt-2 ml-2 hidden-sm-only hidden-xs-only">Library Member</h3>
475 <v-spacer></v-spacer> 475 <v-spacer></v-spacer>
476 <v-flex xs12 sm4 md2> 476 <v-flex xs12 sm4 md2>
477 <v-select 477 <v-select
478 outline 478 outline
479 small 479 small
480 :items="addclass" 480 :items="addclass"
481 label="Select Class" 481 label="Select Class"
482 v-model="selectStudents" 482 v-model="selectStudents"
483 item-text="classNum" 483 item-text="classNum"
484 item-value="_id" 484 item-value="_id"
485 name="Select Class" 485 name="Select Class"
486 @change="getAllStudents(selectStudents)" 486 @change="getAllStudents(selectStudents)"
487 class="px-2" 487 class="px-2"
488 required 488 required
489 ></v-select> 489 ></v-select>
490 </v-flex> 490 </v-flex>
491 </v-card-actions> 491 </v-card-actions>
492 </v-card> 492 </v-card>
493 <v-data-table 493 <v-card class="transparent">
494 :headers="headers" 494 <v-data-table
495 :items="studentData" 495 :headers="headers"
496 :pagination.sync="pagination" 496 :items="studentData"
497 :search="search" 497 :pagination.sync="pagination"
498 > 498 :search="search"
499 <template slot="items" slot-scope="props"> 499 >
500 <td id="td" class="text-xs-center">{{ props.index}}</td> 500 <template slot="items" slot-scope="props">
501 <td id="td" class="text-xs-center"> 501 <tr class="tr">
502 <v-avatar> 502 <td class="td td-row text-xs-center">{{ props.index}}</td>
503 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" /> 503 <td class="td td-row text-xs-center">
504 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" /> 504 <v-avatar>
505 </v-avatar> 505 <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
506 </td> 506 <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
507 <td id="td" class="text-xs-center">{{ props.item.name}}</td> 507 </v-avatar>
508 <td id="td" class="text-xs-center">{{ props.item.rollNo }}</td> 508 </td>
509 <td id="td" class="text-xs-center">{{ props.item.email }}</td> 509 <td class="td td-row text-xs-center">{{ props.item.name}}</td>
510 <td class="text-xs-center"> 510 <td class="td td-row text-xs-center">{{ props.item.rollNo }}</td>
511 <v-tooltip top> 511 <td class="td td-row text-xs-center">{{ props.item.email }}</td>
512 <img 512 <td class="td td-row text-xs-center">
513 slot="activator" 513 <v-tooltip top>
514 v-if="!props.item.libraryId" 514 <img
515 style="cursor:pointer; width:25px; height:18px; " 515 slot="activator"
516 @click="addLibraryData(props.item)" 516 v-if="!props.item.libraryId"
517 src="/static/icon/add.png" 517 style="cursor:pointer; width:25px; height:18px; "
518 /> 518 @click="addLibraryData(props.item)"
519 <span>Add</span> 519 src="/static/icon/add.png"
520 </v-tooltip> 520 />
521 <span v-if="props.item.libraryId"> 521 <span>Add</span>
522 <v-tooltip top> 522 </v-tooltip>
523 <img 523 <span v-if="props.item.libraryId">
524 slot="activator" 524 <v-tooltip top>
525 style="cursor:pointer; width:25px; height:18px; " 525 <img
526 class="mr5" 526 slot="activator"
527 @click="profile(props.item)" 527 style="cursor:pointer; width:25px; height:18px; "
528 src="/static/icon/eye1.png" 528 class="mr5"
529 /> 529 @click="profile(props.item)"
530 <span>View</span> 530 src="/static/icon/eye1.png"
531 </v-tooltip> 531 />
532 <v-tooltip top> 532 <span>View</span>
533 <img 533 </v-tooltip>
534 slot="activator" 534 <v-tooltip top>
535 style="cursor:pointer; width:20px; height:18px; " 535 <img
536 class="mr5" 536 slot="activator"
537 @click="editItem(props.item)" 537 style="cursor:pointer; width:20px; height:18px; "
538 src="/static/icon/edit1.png" 538 class="mr5"
539 /> 539 @click="editItem(props.item)"
540 <span>Edit</span> 540 src="/static/icon/edit1.png"
541 </v-tooltip> 541 />
542 <v-tooltip top> 542 <span>Edit</span>
543 <img 543 </v-tooltip>
544 slot="activator" 544 <v-tooltip top>
545 style="cursor:pointer; width:20px; height:20px; " 545 <img
546 class="mr5" 546 slot="activator"
547 @click="deleteItem(props.item)" 547 style="cursor:pointer; width:20px; height:20px; "
548 src="/static/icon/delete1.png" 548 class="mr5"
549 /> 549 @click="deleteItem(props.item)"
550 <span>Delete</span> 550 src="/static/icon/delete1.png"
551 </v-tooltip> 551 />
552 </span> 552 <span>Delete</span>
553 </td> 553 </v-tooltip>
554 </template> 554 </span>
555 <v-alert 555 </td>
556 slot="no-results" 556 </tr>
557 :value="true" 557 </template>
558 color="error" 558 <v-alert
559 icon="warning" 559 slot="no-results"
560 >Your search for "{{ search }}" found no results.</v-alert> 560 :value="true"
561 </v-data-table> 561 color="error"
562 icon="warning"
563 >Your search for "{{ search }}" found no results.</v-alert>
564 </v-data-table>
565 </v-card>
562 <div class="loader" v-if="showLoader"> 566 <div class="loader" v-if="showLoader">
563 <v-progress-circular indeterminate color="white"></v-progress-circular> 567 <v-progress-circular indeterminate color="white"></v-progress-circular>
564 </div> 568 </div>
565 </div> 569 </div>
566 </template> 570 </template>
567 571
568 <script> 572 <script>
569 import http from "@/Services/http.js"; 573 import http from "@/Services/http.js";
570 import Util from "@/util"; 574 import Util from "@/util";
571 import moment from "moment"; 575 import moment from "moment";
572 576
573 export default { 577 export default {
574 data: () => ({ 578 data: () => ({
575 snackbar: false, 579 snackbar: false,
576 y: "top", 580 y: "top",
577 x: "right", 581 x: "right",
578 mode: "", 582 mode: "",
579 timeout: 3000, 583 timeout: 3000,
580 text: "", 584 text: "",
581 showLoader: false, 585 showLoader: false,
582 loading: false, 586 loading: false,
583 addLibrary: false, 587 addLibrary: false,
584 dialogStudents: false, 588 dialogStudents: false,
585 editStudentdialog: false, 589 editStudentdialog: false,
586 valid: true, 590 valid: true,
587 libraryIdRules: [v => !!v || "Library Id Fee is required"], 591 libraryIdRules: [v => !!v || "Library Id Fee is required"],
588 libraryFeeRules: [v => !!v || "Library Fee is required"], 592 libraryFeeRules: [v => !!v || "Library Fee is required"],
589 date: null, 593 date: null,
590 search: "", 594 search: "",
591 addclass: [], 595 addclass: [],
592 pagination: { 596 pagination: {
593 rowsPerPage: 15 597 rowsPerPage: 15
594 }, 598 },
595 addBook: {}, 599 addBook: {},
596 imageName: "", 600 imageName: "",
597 imageUrl: "", 601 imageUrl: "",
598 imageFile: "", 602 imageFile: "",
599 headers: [ 603 headers: [
600 { 604 {
601 text: "No", 605 text: "No",
602 align: "center", 606 align: "center",
603 sortable: false, 607 sortable: false,
604 value: "index" 608 value: "index"
605 }, 609 },
606 { 610 {
607 text: "Photo", 611 text: "Photo",
608 value: "uploadCover", 612 value: "uploadCover",
609 sortable: false, 613 sortable: false,
610 align: "center" 614 align: "center"
611 }, 615 },
612 { text: "Name", value: "name", sortable: false, align: "center" }, 616 { text: "Name", value: "name", sortable: false, align: "center" },
613 { text: "Roll No.", value: "rollNo", sortable: false, align: "center" }, 617 { text: "Roll No.", value: "rollNo", sortable: false, align: "center" },
614 { text: "Email", value: "email", sortable: false, align: "center" }, 618 { text: "Email", value: "email", sortable: false, align: "center" },
615 { text: "Action", value: "", sortable: false, align: "center" } 619 { text: "Action", value: "", sortable: false, align: "center" }
616 ], 620 ],
617 studentData: [], 621 studentData: [],
618 editedItem: {}, 622 editedItem: {},
619 parentId: "", 623 parentId: "",
620 token: "", 624 token: "",
621 selectStudents: {}, 625 selectStudents: {},
622 editedIndex: -1 626 editedIndex: -1
623 }), 627 }),
624 methods: { 628 methods: {
625 getAllStudents() { 629 getAllStudents() {
626 this.showLoader = true; 630 this.showLoader = true;
627 http() 631 http()
628 .get("/getStudentsList", { 632 .get("/getStudentsList", {
629 params: { 633 params: {
630 classId: this.selectStudents, 634 classId: this.selectStudents,
631 schoolId: this.$store.state.schoolId 635 schoolId: this.$store.state.schoolId
632 }, 636 },
633 headers: { Authorization: "Bearer " + this.token } 637 headers: { Authorization: "Bearer " + this.token }
634 }) 638 })
635 .then(response => { 639 .then(response => {
636 this.studentData = response.data.data; 640 this.studentData = response.data.data;
637 this.showLoader = false; 641 this.showLoader = false;
638 }) 642 })
639 .catch(error => { 643 .catch(error => {
640 // console.log("err====>", err); 644 // console.log("err====>", err);
641 if (error.response.status === 401) { 645 if (error.response.status === 401) {
642 this.$router.replace({ path: "/" }); 646 this.$router.replace({ path: "/" });
643 this.$store.dispatch("setToken", null); 647 this.$store.dispatch("setToken", null);
644 this.$store.dispatch("Id", null); 648 this.$store.dispatch("Id", null);
645 this.$store.dispatch("Role", null); 649 this.$store.dispatch("Role", null);
646 } 650 }
647 }); 651 });
648 }, 652 },
649 addLibraryData(item) { 653 addLibraryData(item) {
650 this.addBook.studentId = item._id; 654 this.addBook.studentId = item._id;
651 this.addLibrary = true; 655 this.addLibrary = true;
652 }, 656 },
653 editItem(item) { 657 editItem(item) {
654 this.editedIndex = this.studentData.indexOf(item); 658 this.editedIndex = this.studentData.indexOf(item);
655 this.editedItem = Object.assign({}, item); 659 this.editedItem = Object.assign({}, item);
656 this.editStudentdialog = true; 660 this.editStudentdialog = true;
657 }, 661 },
658 dates: function(date) { 662 dates: function(date) {
659 return moment(date).format("MMMM DD, YYYY"); 663 return moment(date).format("MMMM DD, YYYY");
660 }, 664 },
661 profile(item) { 665 profile(item) {
662 console.log("item", item); 666 console.log("item", item);
663 this.editedIndex = this.studentData.indexOf(item); 667 this.editedIndex = this.studentData.indexOf(item);
664 this.editedItem = Object.assign({}, item); 668 this.editedItem = Object.assign({}, item);
665 this.dialogStudents = true; 669 this.dialogStudents = true;
666 }, 670 },
667 deleteItem(item) { 671 deleteItem(item) {
668 let deleteStudentLibraryData = { 672 let deleteStudentLibraryData = {
669 studentId: item._id, 673 studentId: item._id,
670 libraryId: item.libraryId 674 libraryId: item.libraryId
671 }; 675 };
672 http() 676 http()
673 .put( 677 .put(
674 "/deleteLibrary", 678 "/deleteLibrary",
675 confirm("Are you sure you want to delete this?") && 679 confirm("Are you sure you want to delete this?") &&
676 deleteStudentLibraryData 680 deleteStudentLibraryData
677 ) 681 )
678 .then(response => { 682 .then(response => {
679 this.snackbar = true; 683 this.snackbar = true;
680 this.text = "Delete Successfully"; 684 this.text = "Delete Successfully";
681 this.getAllStudents(); 685 this.getAllStudents();
682 }) 686 })
683 .catch(error => { 687 .catch(error => {
684 // console.log(error); 688 // console.log(error);
685 }); 689 });
686 }, 690 },
687 close() { 691 close() {
688 this.dialog = false; 692 this.dialog = false;
689 }, 693 },
690 closeEditStudentDialog() { 694 closeEditStudentDialog() {
691 this.editStudentdialog = false; 695 this.editStudentdialog = false;
692 }, 696 },
693 closeViewStudent() { 697 closeViewStudent() {
694 this.dialogStudents = false; 698 this.dialogStudents = false;
695 }, 699 },
696 submit() { 700 submit() {
697 if (this.$refs.form.validate()) { 701 if (this.$refs.form.validate()) {
698 this.loading = true; 702 this.loading = true;
699 this.addBook.schoolId = this.$store.state.schoolId; 703 this.addBook.schoolId = this.$store.state.schoolId;
700 http() 704 http()
701 .put("/addLibrary", this.addBook) 705 .put("/addLibrary", this.addBook)
702 .then(response => { 706 .then(response => {
703 this.snackbar = true; 707 this.snackbar = true;
704 this.text = "New Library Member added successfully"; 708 this.text = "New Library Member added successfully";
705 this.getAllStudents(); 709 this.getAllStudents();
706 this.clear(); 710 this.clear();
707 this.addLibrary = false; 711 this.addLibrary = false;
708 this.loading = false; 712 this.loading = false;
709 }) 713 })
710 .catch(error => { 714 .catch(error => {
711 // console.log(error); 715 // console.log(error);
712 this.snackbar = true; 716 this.snackbar = true;
713 this.text = error.response.data.message; 717 this.text = error.response.data.message;
714 this.loading = false; 718 this.loading = false;
715 }); 719 });
716 } 720 }
717 }, 721 },
718 clear() { 722 clear() {
719 this.$refs.form.reset(); 723 this.$refs.form.reset();
720 }, 724 },
721 save() { 725 save() {
722 this.editedItem.studentId = this.editedItem._id; 726 this.editedItem.studentId = this.editedItem._id;
723 http() 727 http()
724 .put("/updateLibrary", this.editedItem) 728 .put("/updateLibrary", this.editedItem)
725 .then(response => { 729 .then(response => {
726 this.snackbar = true; 730 this.snackbar = true;
727 this.text = "Edit Library Member Successfully"; 731 this.text = "Edit Library Member Successfully";
728 this.getAllStudents(); 732 this.getAllStudents();
729 this.closeEditStudentDialog(); 733 this.closeEditStudentDialog();
730 }) 734 })
731 .catch(error => { 735 .catch(error => {
732 this.snackbar = true; 736 this.snackbar = true;
733 this.text = error.response.data.statusText; 737 this.text = error.response.data.statusText;
734 }); 738 });
735 }, 739 },
736 getAllClass() { 740 getAllClass() {
737 http() 741 http()
738 .get("/getClassesList", { 742 .get("/getClassesList", {
739 params: { 743 params: {
740 schoolId: this.$store.state.schoolId 744 schoolId: this.$store.state.schoolId
741 }, 745 },
742 headers: { Authorization: "Bearer " + this.token } 746 headers: { Authorization: "Bearer " + this.token }
743 }) 747 })
744 .then(response => { 748 .then(response => {
745 this.addclass = response.data.data; 749 this.addclass = response.data.data;
746 }) 750 })
747 .catch(err => { 751 .catch(err => {
748 // console.log("err====>", err); 752 // console.log("err====>", err);
749 this.$router.replace({ path: "/" }); 753 this.$router.replace({ path: "/" });
750 }); 754 });
751 } 755 }
752 }, 756 },
753 mounted() { 757 mounted() {
754 // this.getStudentList(); 758 // this.getStudentList();
755 this.token = this.$store.state.token; 759 this.token = this.$store.state.token;
756 this.getAllClass(); 760 this.getAllClass();
757 }, 761 },
758 created() { 762 created() {
759 this.$root.$on("app:search", search => { 763 this.$root.$on("app:search", search => {
760 this.search = search; 764 this.search = search;
761 }); 765 });
762 }, 766 },
763 beforeDestroy() { 767 beforeDestroy() {
764 // dont forget to remove the listener 768 // dont forget to remove the listener
765 this.$root.$off("app:search"); 769 this.$root.$off("app:search");
766 } 770 }
767 }; 771 };
768 </script> 772 </script>
769 <style scoped> 773 <style scoped>
770 .active { 774 .active {
771 background-color: gray; 775 background-color: gray;
772 color: white !important; 776 color: white !important;
773 } 777 }
774 .activebtn { 778 .activebtn {
775 color: black !important; 779 color: black !important;
776 } 780 }
777 </style> 781 </style>
src/pages/Mark/viewMark.vue
Diff comments   View file @d4735dc
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 v-if="index === 0"> 32 <!-- <v-layout>
33 <v-flex xs12 style="border-bottom: 1px solid #707478;padding-bottom:6px !important"> 33 <v-flex xs12>
34 <img :src="userData.schoolLogoUrl" v-if="userData.schoolLogoUrl" width="100" /> 34 <v-btn class="add-button right" round dark @click="printStudentReport()">
35 <img src="/static/icon/user.png" v-else-if="!userData.schoolLogoUrl" width="100" /> 35 Print
36 <v-icon right dark>print</v-icon>
37 </v-btn>
38 </v-flex>
39 </v-layout> -->
40 <v-layout>
41 <v-flex xs12 class="text-xs-center">
42 <img :src="userData.schoolLogoUrl" width="140" alt="logo" />
43 <p class="title">{{ userData.name }}</p>
44 <p>{{ userData.address }}</p>
36 </v-flex> 45 </v-flex>
37 </v-layout> 46 </v-layout>
38 <v-layout style="padding-top:10px" v-if="index === 0"> 47 <v-layout style="padding-top:10px" v-if="index === 0">
39 <v-flex xs5> 48 <v-flex xs5>
40 <p style="margin:0px;margin-bottom:4px">
41 <span style="font-size:20px">{{ userData.name }}</span>
42 <br />
43 <span style="font-size: 15px;color: #707478;">{{ userData.address }}</span>
44 </p>
45 <p
46 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
47 >phone : {{ userData.mobile }}</p>
48 <p
49 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
50 >Email : {{ userData.email }}</p>
51 </v-flex>
52 <v-flex xs5>
53 <p 49 <p
54 style="font-size:20px;margin:0px;margin-bottom:4px;" 50 style="font-size:20px;margin:0px;margin-bottom:4px;"
55 >{{ value[0].studentId.name }}</p> 51 >{{ value[0].studentId.name }}</p>
56 <p 52 <p
57 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;" 53 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
58 >Class : {{ value[0].classId.classNum }}</p> 54 >Class : {{ value[0].classId.classNum }}</p>
59 <p 55 <p
60 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;" 56 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
61 >Roll NO : {{ value[0].studentId.rollNo }}</p> 57 >Roll NO : {{ value[0].studentId.rollNo }}</p>
62 <p 58 <p
63 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;" 59 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
64 >Section : {{ value[0].sectionId.name }}</p> 60 >Section : {{ value[0].sectionId.name }}</p>
65 </v-flex> 61 </v-flex>
66 <v-flex xs2> 62 <v-flex xs2>
67 <v-avatar size="100"> 63 <v-avatar size="100">
68 <img 64 <img
69 :src="value[0].studentId.profilePicUrl" 65 :src="value[0].studentId.profilePicUrl"
70 v-if="value[0].studentId.profilePicUrl" 66 v-if="value[0].studentId.profilePicUrl"
71 width="100px" 67 width="100px"
72 /> 68 />
73 <img 69 <img
74 src="/static/icon/user.png" 70 src="/static/icon/user.png"
75 v-else-if="!value[0].studentId.profilePicUrl" 71 v-else-if="!value[0].studentId.profilePicUrl"
76 width="100px" 72 width="100px"
77 /> 73 />
78 </v-avatar> 74 </v-avatar>
79 </v-flex> 75 </v-flex>
80 </v-layout> 76 </v-layout>
81 <v-card-title class="subheading">{{value[0].examId.examName}}</v-card-title> 77 <v-card-title class="subheading">{{value[0].examId.examName}}</v-card-title>
82 <table 78 <table
83 class="mb-5 tableRsponsive feeTypeTable" 79 class="mb-5 tableRsponsive feeTypeTable"
84 style="border: 1px solid lightgrey; 80 style="border: 1px solid lightgrey;
85 border-collapse: collapse;!important 81 border-collapse: collapse;!important
86 table-layout: auto !important; 82 table-layout: auto !important;
87 width: 100% !important; 83 width: 100% !important;
88 overflow: hidden; 84 "
89 display: block;"
90
91 > 85 >
92 <thead style="border: 1px solid lightgrey !important;"> 86 <thead style="border: 1px solid lightgrey !important;">
93 <tr style="border: 1px solid lightgrey !important;padding:4px;"> 87 <tr style="border: 1px solid lightgrey !important;padding:4px;">
94 <td 88 <td
95 rowspan="2" 89 rowspan="2"
96 style="border: 1px solid lightgrey !important;padding: 10px;" 90 style="border: 1px solid lightgrey !important;padding: 10px;"
97 >Subject</td> 91 >Subject</td>
98 <template v-for="studentData in value"> 92 <template v-for="studentData in value">
99 <td 93 <td
100 colspan="2" 94 colspan="2"
101 v-for="studentMark in studentData.studentsMarks" 95 v-for="studentMark in studentData.studentsMarks"
102 style="border: 1px solid lightgrey !important;padding: 10px;" 96 style="border: 1px solid lightgrey !important;padding: 10px;"
103 >{{studentMark.markDistributionId.distributionType}}</td> 97 >{{studentMark.markDistributionId.distributionType}}</td>
104 <td style="border: 1px solid lightgrey !important;padding: 10px;">Total</td> 98 <td style="border: 1px solid lightgrey !important;padding: 10px;">Total</td>
105 </template> 99 </template>
106 </tr> 100 </tr>
107 <tr 101 <tr
108 v-for="(subject, ind) in value" 102 v-for="(subject, ind) in value"
109 v-if="ind == 0" 103 v-if="ind == 0"
110 style="border: 1px solid lightgrey !important;" 104 style="border: 1px solid lightgrey !important;"
111 > 105 >
112 <template v-for="(exam, i) in subject.studentsMarks"> 106 <template v-for="(exam, i) in subject.studentsMarks">
113 <td 107 <td style="border: 1px solid lightgrey !important;padding: 10px;">Mark</td>
114 108 <td style="border: 1px solid lightgrey !important;padding: 10px;">Highest Mark</td>
115 style="border: 1px solid lightgrey !important;padding: 10px;"
116 >Mark</td>
117 <td
118
119 style="border: 1px solid lightgrey !important;padding: 10px;"
120 >Highest Mark</td>
121 </template> 109 </template>
122 <td 110 <td style="border: 1px solid lightgrey !important;padding: 10px;">Mark</td>
123
124 style="border: 1px solid lightgrey !important;padding: 10px;"
125 >Mark</td>
126 </tr> 111 </tr>
127 </thead> 112 </thead>
128 <tbody style="border: 1px solid lightgrey !important;"> 113 <tbody style="border: 1px solid lightgrey !important;">
129 <tr v-for="subject in value" style="border: 1px solid lightgrey !important;"> 114 <tr v-for="subject in value" style="border: 1px solid lightgrey !important;">
130 <td 115 <td
131 style="border: 1px solid lightgrey !important;padding: 10px;" 116 style="border: 1px solid lightgrey !important;padding: 10px;"
132 >{{subject.subjectName}}</td> 117 >{{subject.subjectName}}</td>
133 <template v-for="(exam, i) in subject.studentsMarks"> 118 <template v-for="(exam, i) in subject.studentsMarks">
134 <td 119 <td
135 style="border: 1px solid lightgrey !important;padding: 10px;" 120 style="border: 1px solid lightgrey !important;padding: 10px;"
136 >{{exam.marksScored}}</td> 121 >{{exam.marksScored}}</td>
137 <td 122 <td
138 style="border: 1px solid lightgrey !important;padding: 10px;" 123 style="border: 1px solid lightgrey !important;padding: 10px;"
139 >{{exam.markDistributionId.markValue}}</td> 124 >{{exam.markDistributionId.markValue}}</td>
140 </template> 125 </template>
141 <td 126 <td
142 style="border: 1px solid lightgrey !important;padding: 10px;" 127 style="border: 1px solid lightgrey !important;padding: 10px;"
143 >{{subject.totalMarks}}</td> 128 >{{subject.totalMarks}}</td>
144 </tr> 129 </tr>
145 </tbody> 130 </tbody>
146 </table> 131 </table>
147 </v-card> 132 </v-card>
148 </v-flex> 133 </v-flex>
149 </v-layout> 134 </v-layout>
150 </v-flex> 135 </v-flex>
151 </v-container> 136 </v-container>
152 <div class="loader" v-if="showLoader"> 137 <div class="loader" v-if="showLoader">
153 <v-progress-circular indeterminate color="white"></v-progress-circular> 138 <v-progress-circular indeterminate color="white"></v-progress-circular>
154 </div> 139 </div>
155 </v-app> 140 </v-app>
156 </template> 141 </template>
157 142
158 <script> 143 <script>
159 import http from "@/Services/http.js"; 144 import http from "@/Services/http.js";
160 import moment from "moment"; 145 import moment from "moment";
161 import _ from "underscore"; 146 import _ from "underscore";
162 147
163 export default { 148 export default {
164 data: () => ({ 149 data: () => ({
165 showLoader: true, 150 showLoader: true,
166 nameShow: false, 151 nameShow: false,
167 showMark: true, 152 showMark: true,
168 showGrade: false, 153 showGrade: false,
169 markData: [], 154 markData: [],
170 token: "", 155 token: "",
171 markDistributions: [], 156 markDistributions: [],
172 markParticularDistributionData: [], 157 markParticularDistributionData: [],
173 filterData: [], 158 filterData: [],
174 output: null, 159 output: null,
175 gradeAPlus: "A+", 160 gradeAPlus: "A+",
176 gradeA: "A", 161 gradeA: "A",
177 gradeBPlus: "B+", 162 gradeBPlus: "B+",
178 gradeB: "B", 163 gradeB: "B",
179 gradeCPlus: "C+", 164 gradeCPlus: "C+",
180 gradeC: "C", 165 gradeC: "C",
181 selectMarkList: "Mark", 166 selectMarkList: "Mark",
182 selectMark: ["Mark", "Grade"], 167 selectMark: ["Mark", "Grade"],
183 MarkData: "", 168 MarkData: "",
184 userData: {} 169 userData: {}
185
186 }), 170 }),
187 mounted() { 171 mounted() {
188 this.token = this.$store.state.token; 172 this.token = this.$store.state.token;
189 this.getMarkList(); 173 this.getMarkList();
190 this.getUserData(); 174 this.getUserData();
191 }, 175 },
192 methods: { 176 methods: {
193 getMarkList() { 177 getMarkList() {
194 this.showLoader = true; 178 this.showLoader = true;
195 http() 179 http()
196 .get("/getParticularMark", { 180 .get("/getParticularMark", {
197 params: { studentId: this.$route.params.markId }, 181 params: { studentId: this.$route.params.markId },
198 headers: { Authorization: "Bearer " + this.token } 182 headers: { Authorization: "Bearer " + this.token }
199 }) 183 })
200 .then(response => { 184 .then(response => {
201 this.markData = response.data.data; 185 this.markData = response.data.data;
202 let newData = response.data.data; 186 let newData = response.data.data;
203 // console.log("newData", newData); 187 // console.log("newData", newData);
204 for (var i = 0; i < newData.length; i++) { 188 for (var i = 0; i < newData.length; i++) {
205 newData[i].examination = newData[i].examId._id; 189 newData[i].examination = newData[i].examId._id;
206 } 190 }
207 this.filterData = _.groupBy(newData, ["examination"]); 191 this.filterData = _.groupBy(newData, ["examination"]);
208 // console.log("this.filterData", this.filterData); 192 // console.log("this.filterData", this.filterData);
209 for (let data in this.filterData) { 193 for (let data in this.filterData) {
210 for (let item in this.filterData[data]) { 194 for (let item in this.filterData[data]) {
211 var totalMarks = 0; 195 var totalMarks = 0;
212 for ( 196 for (
213 let i = 0; 197 let i = 0;
214 i < this.filterData[data][item].studentsMarks.length; 198 i < this.filterData[data][item].studentsMarks.length;
215 i++ 199 i++
216 ) { 200 ) {
217 // console.log("this.filterData[data][item].studentsMarks[i]",this.filterData[data][item].studentsMarks[i] 201 // console.log("this.filterData[data][item].studentsMarks[i]",this.filterData[data][item].studentsMarks[i]
218 // .marksScored) 202 // .marksScored)
219 totalMarks += this.filterData[data][item].studentsMarks[i] 203 totalMarks += this.filterData[data][item].studentsMarks[i]
220 .marksScored; 204 .marksScored;
221 } 205 }
222 this.filterData[data][item].totalMarks = totalMarks; 206 this.filterData[data][item].totalMarks = totalMarks;
223 207
224 if (totalMarks > 90) { 208 if (totalMarks > 90) {
225 this.filterData[data][item].grade = this.gradeAPlus; 209 this.filterData[data][item].grade = this.gradeAPlus;
226 } else if (totalMarks > 80 && totalMarks < 90) { 210 } else if (totalMarks > 80 && totalMarks < 90) {
227 this.filterData[data][item].grade = this.gradeA; 211 this.filterData[data][item].grade = this.gradeA;
228 } else if (totalMarks > 70 && totalMarks < 80) { 212 } else if (totalMarks > 70 && totalMarks < 80) {
229 this.filterData[data][item].grade = this.gradeBPlus; 213 this.filterData[data][item].grade = this.gradeBPlus;
230 } else if (totalMarks > 60 && totalMarks < 70) { 214 } else if (totalMarks > 60 && totalMarks < 70) {
231 this.filterData[data][item].grade = this.gradeB; 215 this.filterData[data][item].grade = this.gradeB;
232 } else if (totalMarks > 50 && totalMarks < 60) { 216 } else if (totalMarks > 50 && totalMarks < 60) {
233 this.filterData[data][item].grade = this.gradeCPlus; 217 this.filterData[data][item].grade = this.gradeCPlus;
234 } else if (totalMarks > 40 && totalMarks < 50) { 218 } else if (totalMarks > 40 && totalMarks < 50) {
235 this.filterData[data][item].grade = this.gradeC; 219 this.filterData[data][item].grade = this.gradeC;
236 } 220 }
237 } 221 }
238 } 222 }
239 this.showLoader = false; 223 this.showLoader = false;
240 }) 224 })
241 .catch(error => { 225 .catch(error => {
242 this.showLoader = false; 226 this.showLoader = false;
243 this.snackbar = true; 227 this.snackbar = true;
244 this.text = error.response.data.message; 228 this.text = error.response.data.message;
245 if (error.response.status === 401) { 229 if (error.response.status === 401) {
246 this.$router.replace({ path: "/" }); 230 this.$router.replace({ path: "/" });
247 this.$store.dispatch("setToken", null); 231 this.$store.dispatch("setToken", null);
248 this.$store.dispatch("Id", null); 232 this.$store.dispatch("Id", null);
249 } 233 }
250 }); 234 });
251 }, 235 },
252 print() { 236 print() {
253 // Pass the element id here 237 // Pass the element id here
254 this.$htmlToPaper("printMe"); 238 this.$htmlToPaper("printMe");
255 }, 239 },
256 getUserData() { 240 getUserData() {
257 http() 241 http()
258 .get("/getParticularUserDetail") 242 .get("/getParticularUserDetail")
259 .then(response => { 243 .then(response => {
260 this.userData = response.data.data; 244 this.userData = response.data.data;
261 }) 245 })
262 .catch(error => { 246 .catch(error => {
263 if (error.response.status === 401) { 247 if (error.response.status === 401) {
264 this.$router.replace({ path: "/" }); 248 this.$router.replace({ path: "/" });
265 this.$store.dispatch("setToken", null); 249 this.$store.dispatch("setToken", null);
266 this.$store.dispatch("Id", null); 250 this.$store.dispatch("Id", null);
267 } 251 }
268 }); 252 });
269 }, 253 },
270 selectMarkData(select) { 254 selectMarkData(select) {
271 if (select == "Mark") { 255 if (select == "Mark") {
272 this.showMark = true; 256 this.showMark = true;
273 this.showGrade = false; 257 this.showGrade = false;
274 } else if (select == "Grade") { 258 } else if (select == "Grade") {
275 this.showGrade = true; 259 this.showGrade = true;
276 this.showMark = false; 260 this.showMark = false;
277 } 261 }
278 } 262 }
279 } 263 }
280 }; 264 };
281 </script> 265 </script>
282 266
283 <style scoped> 267 <style scoped>
284 .add-button { 268 .add-button {
285 background: #feb83c !important; 269 background: #feb83c !important;
286 border-color: #feb83c !important; 270 border-color: #feb83c !important;
287 text-transform: none !important; 271 text-transform: none !important;
288 -webkit-box-shadow: none !important; 272 -webkit-box-shadow: none !important;
289 box-shadow: none !important; 273 box-shadow: none !important;
290 } 274 }
291 .card-styles { 275 .card-styles {
292 background: #7f62f8 !important; 276 background: #7f62f8 !important;
293 border-color: #7f62f8 !important; 277 border-color: #7f62f8 !important;
294 } 278 }
295 .open-dialog-button { 279 .open-dialog-button {
296 background: #827bfa !important; 280 background: #827bfa !important;
297 border-color: #827bfa !important; 281 border-color: #827bfa !important;
298 text-transform: none !important; 282 text-transform: none !important;
299 } 283 }
300 table { 284 table {
301 border-collapse: collapse; 285 border-collapse: collapse;
302 border: 1px solid #e2e7eb; 286 border: 1px solid #e2e7eb;
303 } 287 }
304 th, 288 th,
305 td { 289 td {
306 border: 1px solid #e2e7eb; 290 border: 1px solid #e2e7eb;
307 text-align: center; 291 text-align: center;
308 } 292 }
309 table.feeTypeTable { 293 table.feeTypeTable {
310 table-layout: auto !important; 294 table-layout: auto !important;
311 width: 100% !important; 295 width: 100% !important;
312 } 296 }
313 .bg-sky { 297 .bg-sky {
314 background-color: #98b2cc !important; 298 background-color: #98b2cc !important;
315 } 299 }
316 .bg-sky-light { 300 .bg-sky-light {
317 background-color: #89a0b8; 301 background-color: #89a0b8;
318 } 302 }
319 .bg-purple { 303 .bg-purple {
320 background-color: #9583ac; 304 background-color: #9583ac;
321 } 305 }
322 .bg-skyDark { 306 .bg-skyDark {
323 background-color: #956785; 307 background-color: #956785;
324 } 308 }
325 .loader { 309 .loader {
326 width: 100%; 310 width: 100%;
327 height: 100%; 311 height: 100%;
328 position: fixed; 312 position: fixed;
329 top: 0; 313 top: 0;
330 left: 0; 314 left: 0;
331 text-align: center; 315 text-align: center;
332 background-color: rgba(0, 0, 0, 0.5); 316 background-color: rgba(0, 0, 0, 0.5);
333 z-index: 999; 317 z-index: 999;
334 } 318 }
335 319
336 .loader > div { 320 .loader > div {
337 position: relative; 321 position: relative;
338 top: calc(50% - 16px); 322 top: calc(50% - 16px);
339 } 323 }
340 @media screen and (max-width: 380px) { 324 @media screen and (max-width: 380px) {
341 .tableRsponsive { 325 .tableRsponsive {
342 display: block; 326 /* display: block; */
343 position: relative; 327 position: relative;
344 overflow: scroll; 328 overflow: scroll;
345 } 329 }
346 } 330 }
347 </style> 331 </style>
348 332
349 333
350 334
351 335
352 336
353 337
354 338
355 339
356 340
src/pages/Report/progressCardReport.vue
Diff comments   View file @d4735dc
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> 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="right mt-3" 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-container grid-list-md v-show="showReport"> 79 <v-layout v-show="showReport">
80 <!-- {{ filterData }} --> 80 <v-flex xs12>
81 <v-layout> 81 <v-card class="transparent elevation-0">
82 <v-layout>
83 <v-flex xs12>
84 <v-btn class="open-dialog-button right" round dark @click="printProgressReport()">
85 Print
86 <v-icon right dark>print</v-icon>
87 </v-btn>
88 </v-flex>
89 </v-layout>
90 <v-layout>
91 <v-flex xs12 class="text-xs-center">
92 <img :src="userData.schoolLogoUrl" width="140" alt="logo" />
93 <p class="title">{{ userData.name }}</p>
94 <p>{{ userData.address }}</p>
95 </v-flex>
96 </v-layout>
97 <!-- </v-card>
98 </v-flex>
99 </v-layout>-->
100 <v-container grid-list-md v-show="showReport">
101 <!-- {{ filterData }} -->
102 <!-- <v-layout>
82 <v-flex xs12 sm12 v-if="filterData != {}"> 103 <v-flex xs12 sm12 v-if="filterData != {}">
83 <v-btn class="add-button" round dark @click="print()"> 104 <v-btn class="add-button right" round dark @click="printProgressReport()">
84 Print 105 Print
85 <v-icon right dark>print</v-icon> 106 <v-icon right dark>print</v-icon>
86 </v-btn> 107 </v-btn>
87 </v-flex> 108 </v-flex>
88 </v-layout> 109 </v-layout>-->
89 <v-flex xs12 sm12 id="printMe"> 110 <v-flex xs12 sm12 id="printMe">
90 <v-layout wrap> 111 <v-layout wrap>
91 <!-- ****** TABLE DATA MARK ****** --> 112 <!-- ****** TABLE DATA MARK ****** -->
92 <v-flex xs12 sm12 md12> 113 <v-flex xs12 sm12 md12>
93 <v-card 114 <v-card
94 v-for="(value, id, index) in filterData" 115 v-for="(value, id, index) in filterData"
95 :key="index" 116 :key="index"
96 flat 117 flat
97 style="border: 1px solid lightgrey;margin-bottom:14px;padding:20px" 118 style="border: 1px solid lightgrey;margin-bottom:14px;padding:20px"
98 >
99 <v-layout v-if="index === 0">
100 <v-flex xs12 style="border-bottom: 1px solid #707478;padding-bottom:6px !important">
101 <img :src="userData.schoolLogoUrl" v-if="userData.schoolLogoUrl" width="100" />
102 <img src="/static/icon/user.png" v-else-if="!userData.schoolLogoUrl" width="100" />
103 </v-flex>
104 </v-layout>
105 <v-layout style="padding-top:10px" v-if="index === 0">
106 <v-flex xs5>
107 <p style="margin:0px;margin-bottom:4px">
108 <span style="font-size:20px">{{ userData.name }}</span>
109 <br />
110 <span style="font-size: 15px;color: #707478;">{{ userData.address }}</span>
111 </p>
112 <p
113 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
114 >phone : {{ userData.mobile }}</p>
115 <p
116 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
117 >Email : {{ userData.email }}</p>
118 </v-flex>
119 <v-flex xs5>
120 <p
121 style="font-size:20px;margin:0px;margin-bottom:4px;"
122 >{{ value[0].studentId.name }}</p>
123 <p
124 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
125 >Class : {{ value[0].classId.classNum }}</p>
126 <p
127 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
128 >Roll NO : {{ value[0].studentId.rollNo }}</p>
129 <p
130 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
131 >Section : {{ value[0].sectionId.name }}</p>
132 </v-flex>
133 <v-flex xs2>
134 <v-avatar size="100">
135 <img
136 :src="value[0].studentId.profilePicUrl"
137 v-if="value[0].studentId.profilePicUrl"
138 width="100px"
139 />
140 <img
141 src="/static/icon/user.png"
142 v-else-if="!value[0].studentId.profilePicUrl"
143 width="100px"
144 />
145 </v-avatar>
146 </v-flex>
147 </v-layout>
148 <v-card-title class="subheading">{{value[0].examId.examName}}</v-card-title>
149 <table
150 class="mb-5 tableRsponsive feeTypeTable"
151 style="border: 1px solid lightgrey;
152 border-collapse: collapse;!important
153 table-layout: auto !important;
154 width: 100% !important;
155 overflow: hidden;
156 display: block;"
157
158 >
159 <thead style="border: 1px solid lightgrey !important;">
160 <tr style="border: 1px solid lightgrey !important;padding:4px;">
161 <td
162 rowspan="2"
163 style="border: 1px solid lightgrey !important;padding: 10px;"
164 >Subject</td>
165 <!-- <td
166 v-for="(exam,i) in value[index].studentsMarks"
167 colspan="2"
168 style="border: 1px solid lightgrey !important;padding: 10px;"
169 >{{ exam.markDistributionId.distributionType }}</td>-->
170 <template v-for="studentData in value">
171 <td
172 colspan="2"
173 v-for="studentMark in studentData.studentsMarks"
174 >{{ studentMark.markDistributionId.distributionType }}</td>
175 </template>
176 <!-- <td>{{value[0].studentsMarks[1].markDistributionId.distributionType}}</td> -->
177
178 <td style="border: 1px solid lightgrey !important;padding: 10px;">Total</td>
179 </tr>
180 <tr
181 v-for="(subject, ind) in value"
182 v-if="ind == 0"
183 style="border: 1px solid lightgrey !important;"
184 > 119 >
185 <template v-for="(exam, i) in subject.studentsMarks"> 120 <v-layout style="padding-top:10px" v-if="index === 0">
186 <td style="border: 1px solid lightgrey !important;padding: 10px;">Mark</td> 121 <v-flex xs5>
187 <td style="border: 1px solid lightgrey !important;padding: 10px;">Highest Mark</td> 122 <p
188 </template> 123 style="font-size:20px;margin:0px;margin-bottom:4px;"
189 <td style="border: 1px solid lightgrey !important;padding: 10px;">Mark</td> 124 >{{ value[0].studentId.name }}</p>
190 </tr> 125 <p
191 </thead> 126 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
192 <tbody style="border: 1px solid lightgrey !important;"> 127 >Class : {{ value[0].classId.classNum }}</p>
193 <tr v-for="subject in value" style="border: 1px solid lightgrey !important;"> 128 <p
194 <td 129 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
195 style="border: 1px solid lightgrey !important;padding: 10px;" 130 >Roll NO : {{ value[0].studentId.rollNo }}</p>
196 >{{subject.subjectName}}</td> 131 <p
197 <template v-for="(exam, i) in subject.studentsMarks"> 132 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
198 <td 133 >Section : {{ value[0].sectionId.name }}</p>
199 style="border: 1px solid lightgrey !important;padding: 10px;" 134 </v-flex>
200 >{{exam.marksScored}}</td> 135 <v-flex xs2>
201 <td 136 <v-avatar size="100">
202 style="border: 1px solid lightgrey !important;padding: 10px;" 137 <img
203 >{{exam.markDistributionId.markValue}}</td> 138 :src="value[0].studentId.profilePicUrl"
204 </template> 139 v-if="value[0].studentId.profilePicUrl"
205 <td 140 width="100px"
206 style="border: 1px solid lightgrey !important;padding: 10px;" 141 />
207 >{{subject.totalMarks}}</td> 142 <img
208 </tr> 143 src="/static/icon/user.png"
209 </tbody> 144 v-else-if="!value[0].studentId.profilePicUrl"
210 <!-- <tfoot> 145 width="100px"
146 />
147 </v-avatar>
148 </v-flex>
149 </v-layout>
150 <v-card-title class="subheading">{{value[0].examId.examName}}</v-card-title>
151 <table
152 class="mb-5 tableRsponsive feeTypeTable"
153 style="border: 1px solid lightgrey;
154 border-collapse: collapse;!important
155 table-layout: auto !important;
156 width: 100% !important;
157 overflow: hidden;
158 display: block;"
159 >
160 <thead style="border: 1px solid lightgrey !important;">
161 <tr style="border: 1px solid lightgrey !important;padding:4px;">
162 <td
163 rowspan="2"
164 style="border: 1px solid lightgrey !important;padding: 10px;"
165 >Subject</td>
166 <td
167 v-for="(exam,i) in value[index].studentsMarks"
168 colspan="2"
169 style="border: 1px solid lightgrey !important;padding: 10px;"
170 >{{ exam.markDistributionId.distributionType }}</td>
171 <template v-for="studentData in value">
172 <td
173 colspan="2"
174 v-for="studentMark in studentData.studentsMarks"
175 >{{ studentMark.markDistributionId.distributionType }}</td>
176 </template>
177 <td>{{value[0].studentsMarks[1].markDistributionId.distributionType}}</td>
178
179 <td style="border: 1px solid lightgrey !important;padding: 10px;">Total</td>
180 </tr>
181 <tr
182 v-for="(subject, ind) in value"
183 v-if="ind == 0"
184 style="border: 1px solid lightgrey !important;"
185 >
186 <template v-for="(exam, i) in subject.studentsMarks">
187 <td style="border: 1px solid lightgrey !important;padding: 10px;">Mark</td>
188 <td
189 style="border: 1px solid lightgrey !important;padding: 10px;"
190 >Highest Mark</td>
191 </template>
192 <td style="border: 1px solid lightgrey !important;padding: 10px;">Mark</td>
193 </tr>
194 </thead>
195 <tbody style="border: 1px solid lightgrey !important;">
196 <tr
197 v-for="subject in value"
198 style="border: 1px solid lightgrey !important;"
199 >
200 <td
201 style="border: 1px solid lightgrey !important;padding: 10px;"
202 >{{subject.subjectName}}</td>
203 <template v-for="(exam, i) in subject.studentsMarks">
204 <td
205 style="border: 1px solid lightgrey !important;padding: 10px;"
206 >{{exam.marksScored}}</td>
207 <td
208 style="border: 1px solid lightgrey !important;padding: 10px;"
209 >{{exam.markDistributionId.markValue}}</td>
210 </template>
211 <td
212 style="border: 1px solid lightgrey !important;padding: 10px;"
213 >{{subject.totalMarks}}</td>
214 </tr>
215 </tbody>
216 <!-- <tfoot>
211 <tr> 217 <tr>
212 <td colspan="4"> 218 <td colspan="4">
213 <span class="right subheding">Total Amount (RS) :</span> 219 <span class="right subheding">Total Amount (RS) :</span>
214 </td> 220 </td>
215 <td>{{ feeType.subTotal }}</td> 221 <td>{{ feeType.subTotal }}</td>
216 </tr> 222 </tr>
217 <tr> 223 <tr>
218 <td colspan="4"> 224 <td colspan="4">
219 <span class="right subheding">Paid (RS) :</span> 225 <span class="right subheding">Paid (RS) :</span>
220 </td> 226 </td>
221 <td>{{ feeType.totalPaidAmount ? feeType.totalPaidAmount : 0 }}</td> 227 <td>{{ feeType.totalPaidAmount ? feeType.totalPaidAmount : 0 }}</td>
222 </tr> 228 </tr>
223 <tr> 229 <tr>
224 <td colspan="4"> 230 <td colspan="4">
225 <span class="right subheding">Balance (RS) :</span> 231 <span class="right subheding">Balance (RS) :</span>
226 </td> 232 </td>
227 <td>{{ feeType.totalPaidAmount ? feeType.subTotal - feeType.totalPaidAmount : feeType.subTotal }}</td> 233 <td>{{ feeType.totalPaidAmount ? feeType.subTotal - feeType.totalPaidAmount : feeType.subTotal }}</td>
228 </tr> 234 </tr>
229 </tfoot>--> 235 </tfoot>-->
230 </table> 236 </table>
231 </v-card> 237 </v-card>
232 </v-flex> 238 </v-flex>
233 </v-layout> 239 </v-layout>
240 </v-flex>
241 </v-container>
242 </v-card>
234 </v-flex> 243 </v-flex>
235 </v-container> 244 </v-layout>
236 <div class="loader" v-if="showLoader"> 245 <div class="loader" v-if="showLoader">
237 <v-progress-circular indeterminate color="white"></v-progress-circular> 246 <v-progress-circular indeterminate color="white"></v-progress-circular>
238 </div> 247 </div>
239 </v-container> 248 </v-container>
240 </template> 249 </template>
241 250
242 <script> 251 <script>
243 import http from "@/Services/http.js"; 252 import http from "@/Services/http.js";
244 import moment from "moment"; 253 import moment from "moment";
245 import _ from "underscore"; 254 import _ from "underscore";
246 255
247 export default { 256 export default {
248 data: () => ({ 257 data: () => ({
249 showLoader: false, 258 showLoader: false,
250 markData: [], 259 markData: [],
251 token: "", 260 token: "",
252 markDistributions: [], 261 markDistributions: [],
253 markParticularDistributionData: [], 262 markParticularDistributionData: [],
254 loading: false, 263 loading: false,
255 valid: true, 264 valid: true,
256 loading: false, 265 loading: false,
257 showReport: false, 266 showReport: false,
258 addSection: [], 267 addSection: [],
259 filterData: [], 268 filterData: [],
260 getStudentsList: [], 269 getStudentsList: [],
261 classRules: [v => !!v || "Class is required"], 270 classRules: [v => !!v || "Class is required"],
262 sectionRules: [v => !!v || "Class is required"], 271 sectionRules: [v => !!v || "Class is required"],
263 studentRules: [v => !!v || "Student is required"], 272 studentRules: [v => !!v || "Student is required"],
264 getReport: {}, 273 getReport: {},
265 classList: [], 274 classList: [],
266 output: null, 275 output: null,
267 userData: {} 276 userData: {}
268 }), 277 }),
269 mounted() { 278 mounted() {
270 this.token = this.$store.state.token; 279 this.token = this.$store.state.token;
271 this.getClass(); 280 this.getClass();
272 this.getUserData(); 281 this.getUserData();
273 }, 282 },
274 methods: { 283 methods: {
275 clear() { 284 clear() {
276 this.$refs.form.reset(); 285 this.$refs.form.reset();
277 }, 286 },
278 getClass() { 287 getClass() {
279 this.showLoader = true; 288 this.showLoader = true;
280 http() 289 http()
281 .get("/getClassesList", { 290 .get("/getClassesList", {
282 headers: { Authorization: "Bearer " + this.token } 291 headers: { Authorization: "Bearer " + this.token }
283 }) 292 })
284 .then(response => { 293 .then(response => {
285 this.classList = response.data.data; 294 this.classList = response.data.data;
286 this.showLoader = false; 295 this.showLoader = false;
287 }) 296 })
288 .catch(error => { 297 .catch(error => {
289 this.showLoader = false; 298 this.showLoader = false;
290 // console.log("err====>", err); 299 // console.log("err====>", err);
291 }); 300 });
292 }, 301 },
293 getSections(_id) { 302 getSections(_id) {
294 this.showLoader = true; 303 this.showLoader = true;
295 http() 304 http()
296 .get( 305 .get(
297 "/getSectionsList", 306 "/getSectionsList",
298 { params: { classId: _id } }, 307 { params: { classId: _id } },
299 { 308 {
300 headers: { Authorization: "Bearer " + this.token } 309 headers: { Authorization: "Bearer " + this.token }
301 } 310 }
302 ) 311 )
303 .then(response => { 312 .then(response => {
304 this.addSection = response.data.data; 313 this.addSection = response.data.data;
305 this.showLoader = false; 314 this.showLoader = false;
306 }) 315 })
307 .catch(err => { 316 .catch(err => {
308 this.showLoader = false; 317 this.showLoader = false;
309 // console.log("err====>", err); 318 // console.log("err====>", err);
310 }); 319 });
311 }, 320 },
312 getStudents() { 321 getStudents() {
313 this.showLoader = true; 322 this.showLoader = true;
314 http() 323 http()
315 .get("/getStudentWithClass", { 324 .get("/getStudentWithClass", {
316 params: { 325 params: {
317 classId: this.getReport.classId, 326 classId: this.getReport.classId,
318 sectionId: this.getReport.sectionId 327 sectionId: this.getReport.sectionId
319 } 328 }
320 }) 329 })
321 .then(response => { 330 .then(response => {
322 this.getStudentsList = response.data.data; 331 this.getStudentsList = response.data.data;
323 this.showLoader = false; 332 this.showLoader = false;
324 // console.log("getSectionsList=====>", response.data.data); 333 // console.log("getSectionsList=====>", response.data.data);
325 }) 334 })
326 .catch(error => { 335 .catch(error => {
327 console.log("err====>", error); 336 console.log("err====>", error);
328 this.showLoader = false; 337 this.showLoader = false;
329 }); 338 });
330 }, 339 },
331 getMarkReportList() { 340 getMarkReportList() {
332 // this.showLoader = true; 341 // this.showLoader = true;
333 this.showReport = true; 342 this.showReport = true;
334 http() 343 http()
335 .get("/getParticularMark", { 344 .get("/getParticularMark", {
336 params: { studentId: this.getReport.studentId }, 345 params: { studentId: this.getReport.studentId },
337 headers: { Authorization: "Bearer " + this.token } 346 headers: { Authorization: "Bearer " + this.token }
338 }) 347 })
339 .then(response => { 348 .then(response => {
340 this.showLoader = false; 349 this.showLoader = false;
341 let newData = response.data.data; 350 let newData = response.data.data;
342 // console.log("response", newData); 351 // console.log("response", newData);
343 for (var i = 0; i < newData.length; i++) { 352 for (var i = 0; i < newData.length; i++) {
344 newData[i].examination = newData[i].examId._id; 353 newData[i].examination = newData[i].examId._id;
345 // console.log("newData[i].examination", newData[i].examination); 354 // console.log("newData[i].examination", newData[i].examination);
346 } 355 }
347 this.filterData = _.groupBy(newData, ["examination"]); 356 this.filterData = _.groupBy(newData, ["examination"]);
348 for (let data in this.filterData) { 357 for (let data in this.filterData) {
349 // console.log("data+++++++++++++++++++++++++++++++++++", data); 358 // console.log("data+++++++++++++++++++++++++++++++++++", data);
350 359
351 for (let item in this.filterData[data]) { 360 for (let item in this.filterData[data]) {
352 console.log( 361 // console.log(
353 "filterData[data]==========================>", 362 // "filterData[data]==========================>",
354 this.filterData[data] 363 // this.filterData[data]
355 ); 364 // );
356 console.log("filterData[item]==========================>", item); 365 // console.log("filterData[item]==========================>", item);