viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 05746bfaec6c7a5585cbc98fa3383b85445d1fcd

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

test progress card

Showing 1 changed file with 5 additions and 4 deletions   Show diff stats
src/pages/Report/progressCardReport.vue
Diff comments   View file @05746bf
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 sm3 lg2 class="subheading mt-4"> 10 <v-flex xs3 sm3 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 sm3 lg2 class="subheading mt-4"> 30 <v-flex xs3 sm3 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 sm3 lg2 class="subheading mt-4"> 50 <v-flex xs3 sm3 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>
67 <v-btn 67 <v-btn
68 style="margin: auto; 68 style="margin: auto;
69 display: block;" 69 display: block;"
70 @click="getMarkReportList" 70 @click="getMarkReportList"
71 round 71 round
72 dark 72 dark
73 :loading="loading" 73 :loading="loading"
74 class="open-dialog-button mt-3" 74 class="open-dialog-button mt-3"
75 >Get Report</v-btn> 75 >Get Report</v-btn>
76 </v-flex> 76 </v-flex>
77 </v-layout> 77 </v-layout>
78 </v-flex> 78 </v-flex>
79 </v-form> 79 </v-form>
80 </v-card> 80 </v-card>
81 81
82 <v-layout v-show="showReport"> 82 <v-layout v-show="showReport">
83 <v-flex xs12> 83 <v-flex xs12>
84 <v-card class="transparent elevation-0"> 84 <v-card class="transparent elevation-0">
85 <v-container grid-list-md class="report"> 85 <v-container grid-list-md class="report">
86 <v-flex xs12 sm12> 86 <v-flex xs12 sm12>
87 <v-layout wrap> 87 <v-layout wrap>
88 <!-- ****** TABLE DATA MARK ****** --> 88 <!-- ****** TABLE DATA MARK ****** -->
89 <v-flex xs12 sm12 md12> 89 <v-flex xs12 sm12 md12>
90 <v-layout> 90 <v-layout>
91 <v-flex xs12> 91 <v-flex xs12>
92 <v-btn 92 <v-btn
93 class="open-dialog-button" 93 class="open-dialog-button"
94 :loading="printLoader" 94 :loading="printLoader"
95 round 95 round
96 dark 96 dark
97 @click="printProgressReport()" 97 @click="printProgressReport()"
98 > 98 >
99 Print 99 Print
100 <v-icon right dark>print</v-icon> 100 <v-icon right dark>print</v-icon>
101 </v-btn> 101 </v-btn>
102 </v-flex> 102 </v-flex>
103 </v-layout> 103 </v-layout>
104 <div id="printMe"> 104 <div id="printMe">
105 <card class="elevation-0" v-for="(value, id, Index) in filterData" :key="Index"> 105 <card class="elevation-0" v-for="(value, id, Index) in filterData" :key="Index">
106 <!-- <v-flex xs12 flat> --> 106 <!-- <v-flex xs12 flat> -->
107 <!-- {{value}}---{{id}}---{{index}} --> 107 <!-- {{value}}---{{id}}---{{index}} -->
108 <v-card 108 <v-card
109 class="ma-3" 109 class="ma-3"
110 style=" 110 style="
111 border: 1px solid lightgrey; 111 border: 1px solid lightgrey;
112 margin-bottom:0px; 112 margin-bottom:0px;
113 padding: 0px" 113 padding: 0px"
114 > 114 >
115 <div style="border: 1px solid lightgray;"> 115 <div style="border: 1px solid lightgray;">
116 <v-layout> 116 <v-layout>
117 <v-flex xs12 sm12 md12> 117 <v-flex xs12 sm12 md12>
118 <!-- <div 118 <!-- <div
119 style=" 119 style="
120 border-bottom: 1px solid #ddd; 120 border-bottom: 1px solid #ddd;
121 overflow: hidden; 121 overflow: hidden;
122 vertical-align: middle; 122 vertical-align: middle;
123 margin: 10px; 123 margin: 10px;
124 padding-bottom: 0px;" 124 padding-bottom: 0px;"
125 > 125 >
126 <v-flex xs12 sm12 md12> 126 <v-flex xs12 sm12 md12>
127 <v-layout> 127 <v-layout>
128 <div class="school-logo"> 128 <div class="school-logo">
129 <img 129 <img
130 :src="userData.schoolLogoUrl" 130 :src="userData.schoolLogoUrl"
131 v-if="userData.schoolLogoUrl" 131 v-if="userData.schoolLogoUrl"
132 style="width:40px !important;height:40px !important;" 132 style="width:40px !important;height:40px !important;"
133 /> 133 />
134 <img 134 <img
135 src="/static/schoolIcons/INTRACK_White.png" 135 src="/static/schoolIcons/INTRACK_White.png"
136 v-else-if="!userData.schoolLogoUrl" 136 v-else-if="!userData.schoolLogoUrl"
137 style="width:40px !important;height:40px !important;" 137 style="width:40px !important;height:40px !important;"
138 /> 138 />
139 </div> 139 </div>
140 <div class="school-name"> 140 <div class="school-name">
141 <h3>{{ userData.name }}</h3> 141 <h3>{{ userData.name }}</h3>
142 </div> 142 </div>
143 </v-layout> 143 </v-layout>
144 </v-flex> 144 </v-flex>
145 </div>--> 145 </div>-->
146 <!-- Profile School --> 146 <!-- Profile School -->
147 <v-flex xs12 sm12 md12 lg12 style="margin:0px 0px; "> 147 <v-flex xs12 sm12 md12 lg12 style="margin:0px 0px; ">
148 <v-layout> 148 <v-layout>
149 <v-flex 149 <v-flex
150 xs5 150 xs5
151 sm5 151 sm5
152 md5 152 md5
153 lg5 153 lg5
154 style="padding: 4px; 154 style="padding: 4px;
155 padding-left: 16px !important;" 155 padding-left: 16px !important;"
156 > 156 >
157 <p 157 <p
158 style="font-size:20px;margin-bottom: 0px;" 158 style="font-size:20px;margin-bottom: 0px;"
159 >{{ userData.name }}</p> 159 >{{ userData.name }}</p>
160 <p 160 <p
161 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;" 161 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
162 >{{ userData.address }}</p> 162 >{{ userData.address }}</p>
163 <p 163 <p
164 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;" 164 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
165 >Phone : {{ userData.mobile }}</p> 165 >Phone : {{ userData.mobile }}</p>
166 <p 166 <p
167 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;" 167 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
168 >Email : {{ userData.email }}</p> 168 >Email : {{ userData.email }}</p>
169 </v-flex> 169 </v-flex>
170 <!-- Profile Student Report Card--> 170 <!-- Profile Student Report Card-->
171 <v-flex xs5 sm5 md5 lg5> 171 <v-flex xs5 sm5 md5 lg5>
172 <div v-for="(studentMark,i,index) in value" :key="index"> 172 <div v-for="(studentMark,i,index) in value" :key="index">
173 <p 173 <p
174 v-if="index == 0" 174 v-if="index == 0"
175 style="font-size:20px;margin-bottom: 0px;" 175 style="font-size:20px;margin-bottom: 0px;"
176 >{{ studentMark[0].studentId.name }}</p> 176 >{{ studentMark[0].studentId.name }}</p>
177 <p 177 <p
178 v-if="index == 0" 178 v-if="index == 0"
179 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;" 179 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
180 > 180 >
181 Class : 181 Class :
182 <b>{{ studentMark[0].classId.classNum }}</b> 182 <b>{{ studentMark[0].classId.classNum }}</b>
183 </p> 183 </p>
184 <p 184 <p
185 v-if="index == 0" 185 v-if="index == 0"
186 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;" 186 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
187 > 187 >
188 Section : 188 Section :
189 <b>{{ studentMark[0].sectionId.name }}</b> 189 <b>{{ studentMark[0].sectionId.name }}</b>
190 </p> 190 </p>
191 <p 191 <p
192 v-if="index == 0" 192 v-if="index == 0"
193 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;" 193 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
194 > 194 >
195 Roll NO : 195 Roll NO :
196 <b>{{ studentMark[0].studentId.rollNo }}</b> 196 <b>{{ studentMark[0].studentId.rollNo }}</b>
197 </p> 197 </p>
198 </div> 198 </div>
199 </v-flex> 199 </v-flex>
200 <v-flex xs2 sm2 md2 lg2> 200 <v-flex xs2 sm2 md2 lg2>
201 <div v-for="(studentMark,i,index) in value" :key="index"> 201 <div v-for="(studentMark,i,index) in value" :key="index">
202 <v-avatar 202 <div
203 size="100" 203 style="padding-top:16px"
204 style="margin-top:16px"
205 v-if="index == 0" 204 v-if="index == 0"
206 class="hidden-sm-only hidden-xs-only" 205 class="hidden-sm-only hidden-xs-only"
207 > 206 >
208 <img 207 <img
209 src="/static/icon/user.png" 208 src="/static/icon/user.png"
210 v-if="!studentMark[0].studentId.profilePicUrl" 209 v-if="!studentMark[0].studentId.profilePicUrl"
210 style="width:60px;height:60px;"
211 /> 211 />
212 <img 212 <img
213 :src="studentMark[0].studentId.profilePicUrl" 213 :src="studentMark[0].studentId.profilePicUrl"
214 v-else-if="studentMark[0].studentId.profilePicUrl" 214 v-else-if="studentMark[0].studentId.profilePicUrl"
215 style="width:60px;height:60px;"
215 /> 216 />
216 </v-avatar> 217 </div>
217 </div> 218 </div>
218 </v-flex> 219 </v-flex>
219 </v-layout> 220 </v-layout>
220 </v-flex> 221 </v-flex>
221 </v-flex> 222 </v-flex>
222 </v-layout> 223 </v-layout>
223 <v-card 224 <v-card
224 v-for="studentMarks in value" 225 v-for="studentMarks in value"
225 :key="studentMarks" 226 :key="studentMarks"
226 style=" 227 style="
227 background-color: #fff; 228 background-color: #fff;
228 border-color: #fff; 229 border-color: #fff;
229 color: rgba(0,0,0,0.87); 230 color: rgba(0,0,0,0.87);
230 overflow-x: auto; 231 overflow-x: auto;
231 display: block; 232 display: block;
232 webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important; 233 webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important;
233 box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important;" 234 box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 0px 0px rgba(0,0,0,0.12) !important;"
234 > 235 >
235 <!-- {{studentMark}} --> 236 <!-- {{studentMark}} -->
236 <!-- <div 237 <!-- <div
237 style="overflow-x:auto; 238 style="overflow-x:auto;
238 border: 1px solid lightgrey !important;" 239 border: 1px solid lightgrey !important;"
239 >--> 240 >-->
240 <table 241 <table
241 v-for="(studentMark,key) in studentMarks" 242 v-for="(studentMark,key) in studentMarks"
242 :key="key" 243 :key="key"
243 class="tableRsponsive feeTypeTable subheading" 244 class="tableRsponsive feeTypeTable subheading"
244 style="border: 1px solid black; 245 style="border: 1px solid black;
245 border-collapse: collapse;!important 246 border-collapse: collapse;!important
246 table-layout: auto !important; 247 table-layout: auto !important;
247 width: 100% !important; 248 width: 100% !important;
248 overflow: hidden;" 249 overflow: hidden;"
249 > 250 >
250 <thead 251 <thead
251 style="border: 1px solid transparent !important" 252 style="border: 1px solid transparent !important"
252 v-if="key == 0" 253 v-if="key == 0"
253 > 254 >
254 <tr style="border: 1px solid transparent !important"> 255 <tr style="border: 1px solid transparent !important">
255 <td 256 <td
256 colspan="4" 257 colspan="4"
257 style="text-align: inherit !important; 258 style="text-align: inherit !important;
258 border-right: inherit; 259 border-right: inherit;
259 border-top: inherit; 260 border-top: inherit;
260 padding:14px;" 261 padding:14px;"
261 >{{studentMark.examId.examName}}</td> 262 >{{studentMark.examId.examName}}</td>
262 </tr> 263 </tr>
263 <tr style="border: 1px solid lightgrey !important;padding:4px;"> 264 <tr style="border: 1px solid lightgrey !important;padding:4px;">
264 <td 265 <td
265 rowspan="2" 266 rowspan="2"
266 style="border: 1px solid lightgrey !important;padding: 0px;" 267 style="border: 1px solid lightgrey !important;padding: 0px;"
267 >Subject</td> 268 >Subject</td>
268 <template> 269 <template>
269 <td 270 <td
270 v-for="(studentMarkData,i) in studentMark.studentsMarks" 271 v-for="(studentMarkData,i) in studentMark.studentsMarks"
271 :key="i" 272 :key="i"
272 colspan="2" 273 colspan="2"
273 style="border: 1px solid lightgrey !important;padding: 0px;" 274 style="border: 1px solid lightgrey !important;padding: 0px;"
274 >{{studentMarkData.markDistributionId.distributionType}}</td> 275 >{{studentMarkData.markDistributionId.distributionType}}</td>
275 <td 276 <td
276 style="border: 1px solid lightgrey !important;padding: 0px;" 277 style="border: 1px solid lightgrey !important;padding: 0px;"
277 >Total Marks</td> 278 >Total Marks</td>
278 </template> 279 </template>
279 </tr> 280 </tr>
280 <tr style="border: 1px solid lightgrey !important;"> 281 <tr style="border: 1px solid lightgrey !important;">
281 <template v-for="(exam, ind) in studentMark.studentsMarks"> 282 <template v-for="(exam, ind) in studentMark.studentsMarks">
282 <td 283 <td
283 :key="ind" 284 :key="ind"
284 style="border: 1px solid lightgrey !important;padding: 0px;" 285 style="border: 1px solid lightgrey !important;padding: 0px;"
285 >Marks</td> 286 >Marks</td>
286 <td 287 <td
287 :key="ind" 288 :key="ind"
288 style="border: 1px solid lightgrey !important;padding: 0px;" 289 style="border: 1px solid lightgrey !important;padding: 0px;"
289 >Highest Marks</td> 290 >Highest Marks</td>
290 </template> 291 </template>
291 </tr> 292 </tr>
292 </thead> 293 </thead>
293 <tbody 294 <tbody
294 style="border: 1px solid lightgrey !important;" 295 style="border: 1px solid lightgrey !important;"
295 v-if="key == 0" 296 v-if="key == 0"
296 > 297 >
297 <tr v-for="studentMark in studentMarks" :key="studentMark"> 298 <tr v-for="studentMark in studentMarks" :key="studentMark">
298 <td 299 <td
299 style="border: 1px solid lightgrey !important;padding: 0px;" 300 style="border: 1px solid lightgrey !important;padding: 0px;"
300 >{{studentMark.subjectName}}</td> 301 >{{studentMark.subjectName}}</td>
301 <template v-for="(exam, index) in studentMark.studentsMarks"> 302 <template v-for="(exam, index) in studentMark.studentsMarks">
302 <td 303 <td
303 :key="index" 304 :key="index"
304 style="border: 1px solid lightgrey !important;padding: 0px;" 305 style="border: 1px solid lightgrey !important;padding: 0px;"
305 >{{exam.marksScored}}</td> 306 >{{exam.marksScored}}</td>
306 <td 307 <td
307 :key="index" 308 :key="index"
308 style="border: 1px solid lightgrey !important;padding: 0px;" 309 style="border: 1px solid lightgrey !important;padding: 0px;"
309 >{{exam.markDistributionId.markValue}}</td> 310 >{{exam.markDistributionId.markValue}}</td>
310 </template> 311 </template>
311 <td 312 <td
312 style="border: 1px solid lightgrey !important;padding: 0px;" 313 style="border: 1px solid lightgrey !important;padding: 0px;"
313 >{{studentMark.totalMarks}}</td> 314 >{{studentMark.totalMarks}}</td>
314 </tr> 315 </tr>
315 </tbody> 316 </tbody>
316 <tfoot v-if="key == studentMarks.length - 1"> 317 <tfoot v-if="key == studentMarks.length - 1">
317 <tr style="border: 1px solid lightgrey !important;"> 318 <tr style="border: 1px solid lightgrey !important;">
318 <td 319 <td
319 colspan="5" 320 colspan="5"
320 class="subheding" 321 class="subheding"
321 style=" 322 style="
322 border: 1px solid #e2e7eb; 323 border: 1px solid #e2e7eb;
323 text-align:center 324 text-align:center
324 padding: 0px;" 325 padding: 0px;"
325 >Total Marks</td> 326 >Total Marks</td>
326 <td 327 <td
327 colspan="7" 328 colspan="7"
328 style="border: 1px solid lightgrey !important;padding: 0px;" 329 style="border: 1px solid lightgrey !important;padding: 0px;"
329 >{{ studentMark.allSubjectTotalMarks }}</td> 330 >{{ studentMark.allSubjectTotalMarks }}</td>
330 </tr> 331 </tr>
331 <tr> 332 <tr>
332 <td 333 <td
333 colspan="5" 334 colspan="5"
334 class="subheding" 335 class="subheding"
335 style=" 336 style="
336 border: 1px solid #e2e7eb; 337 border: 1px solid #e2e7eb;
337 text-align:center 338 text-align:center
338 padding: 0px;" 339 padding: 0px;"
339 >Grade</td> 340 >Grade</td>
340 <td 341 <td
341 colspan="7" 342 colspan="7"
342 style="border: 1px solid lightgrey !important;padding: 0px;" 343 style="border: 1px solid lightgrey !important;padding: 0px;"
343 >{{ studentMark.grade ? studentMark.grade : "-" }}</td> 344 >{{ studentMark.grade ? studentMark.grade : "-" }}</td>
344 </tr> 345 </tr>
345 <tr> 346 <tr>
346 <td 347 <td
347 colspan="5" 348 colspan="5"
348 style=" 349 style="
349 border: 1px solid #e2e7eb; 350 border: 1px solid #e2e7eb;
350 text-align:center 351 text-align:center
351 padding: 0px;" 352 padding: 0px;"
352 class="subheding" 353 class="subheding"
353 >Average Mark</td> 354 >Average Mark</td>
354 <td 355 <td
355 colspan="7" 356 colspan="7"
356 style="border: 1px solid lightgrey !important;padding: 0px;" 357 style="border: 1px solid lightgrey !important;padding: 0px;"
357 >-</td> 358 >-</td>
358 </tr> 359 </tr>
359 <tr> 360 <tr>
360 <td 361 <td
361 colspan="5" 362 colspan="5"
362 style=" 363 style="
363 border: 1px solid #e2e7eb; 364 border: 1px solid #e2e7eb;
364 text-align:center 365 text-align:center
365 padding: 0px; !important; 366 padding: 0px; !important;
366 font-size: 16px !important;" 367 font-size: 16px !important;"
367 class="subheding" 368 class="subheding"
368 >GPA</td> 369 >GPA</td>
369 <td 370 <td
370 colspan="7" 371 colspan="7"
371 style="border: 1px solid lightgrey !important;padding: 0px !important;font-size: 16px !important;" 372 style="border: 1px solid lightgrey !important;padding: 0px !important;font-size: 16px !important;"
372 >-</td> 373 >-</td>
373 </tr> 374 </tr>
374 </tfoot> 375 </tfoot>
375 </table> 376 </table>
376 </v-card> 377 </v-card>
377 </div> 378 </div>
378 </v-card> 379 </v-card>
379 <p style="page-break-after: always;">&nbsp;</p> 380 <p style="page-break-after: always;">&nbsp;</p>
380 </card> 381 </card>
381 </div> 382 </div>
382 </v-flex> 383 </v-flex>
383 </v-layout> 384 </v-layout>
384 </v-flex> 385 </v-flex>
385 </v-container> 386 </v-container>
386 </v-card> 387 </v-card>
387 </v-flex> 388 </v-flex>
388 </v-layout> 389 </v-layout>
389 <div class="loader" v-if="showLoader"> 390 <div class="loader" v-if="showLoader">
390 <v-progress-circular indeterminate color="white"></v-progress-circular> 391 <v-progress-circular indeterminate color="white"></v-progress-circular>
391 </div> 392 </div>
392 </v-container> 393 </v-container>
393 </template> 394 </template>
394 395
395 <script> 396 <script>
396 import http from "@/Services/http.js"; 397 import http from "@/Services/http.js";
397 import moment from "moment"; 398 import moment from "moment";
398 import _ from "underscore"; 399 import _ from "underscore";
399 400
400 export default { 401 export default {
401 data: () => ({ 402 data: () => ({
402 showLoader: false, 403 showLoader: false,
403 cardData: [], 404 cardData: [],
404 token: "", 405 token: "",
405 markDistributions: [], 406 markDistributions: [],
406 markParticularDistributionData: [], 407 markParticularDistributionData: [],
407 loading: false, 408 loading: false,
408 valid: true, 409 valid: true,
409 loading: false, 410 loading: false,
410 showReport: false, 411 showReport: false,
411 printLoader: false, 412 printLoader: false,
412 addSection: [], 413 addSection: [],
413 filterData: [], 414 filterData: [],
414 getStudentsList: [], 415 getStudentsList: [],
415 classRules: [v => !!v || "Class is required"], 416 classRules: [v => !!v || "Class is required"],
416 sectionRules: [v => !!v || "Class is required"], 417 sectionRules: [v => !!v || "Class is required"],
417 studentRules: [v => !!v || "Student is required"], 418 studentRules: [v => !!v || "Student is required"],
418 getReport: {}, 419 getReport: {},
419 classList: [], 420 classList: [],
420 output: null, 421 output: null,
421 userData: {}, 422 userData: {},
422 newData: [], 423 newData: [],
423 gradeAPlus: "A+", 424 gradeAPlus: "A+",
424 gradeA: "A", 425 gradeA: "A",
425 gradeBPlus: "B+", 426 gradeBPlus: "B+",
426 gradeB: "B", 427 gradeB: "B",
427 gradeCPlus: "C+", 428 gradeCPlus: "C+",
428 gradeC: "C", 429 gradeC: "C",
429 totalMarks: "" 430 totalMarks: ""
430 }), 431 }),
431 mounted() { 432 mounted() {
432 this.token = this.$store.state.token; 433 this.token = this.$store.state.token;
433 this.getClass(); 434 this.getClass();
434 this.getUserData(); 435 this.getUserData();
435 }, 436 },
436 methods: { 437 methods: {
437 clear() { 438 clear() {
438 this.$refs.form.reset(); 439 this.$refs.form.reset();
439 }, 440 },
440 getClass() { 441 getClass() {
441 this.showLoader = true; 442 this.showLoader = true;
442 http() 443 http()
443 .get("/getClassesList", { 444 .get("/getClassesList", {
444 headers: { Authorization: "Bearer " + this.token } 445 headers: { Authorization: "Bearer " + this.token }
445 }) 446 })
446 .then(response => { 447 .then(response => {
447 this.classList = response.data.data; 448 this.classList = response.data.data;
448 this.showLoader = false; 449 this.showLoader = false;
449 }) 450 })
450 .catch(error => { 451 .catch(error => {
451 this.showLoader = false; 452 this.showLoader = false;
452 // console.log("err====>", err); 453 // console.log("err====>", err);
453 }); 454 });
454 }, 455 },
455 getSections(_id) { 456 getSections(_id) {
456 this.showLoader = true; 457 this.showLoader = true;
457 http() 458 http()
458 .get( 459 .get(
459 "/getSectionsList", 460 "/getSectionsList",
460 { params: { classId: _id } }, 461 { params: { classId: _id } },
461 { 462 {
462 headers: { Authorization: "Bearer " + this.token } 463 headers: { Authorization: "Bearer " + this.token }
463 } 464 }
464 ) 465 )
465 .then(response => { 466 .then(response => {
466 this.addSection = response.data.data; 467 this.addSection = response.data.data;
467 this.showLoader = false; 468 this.showLoader = false;
468 }) 469 })
469 .catch(err => { 470 .catch(err => {
470 this.showLoader = false; 471 this.showLoader = false;
471 // console.log("err====>", err); 472 // console.log("err====>", err);
472 }); 473 });
473 }, 474 },
474 getStudents() { 475 getStudents() {
475 this.showLoader = true; 476 this.showLoader = true;
476 http() 477 http()
477 .get("/getStudentWithClass", { 478 .get("/getStudentWithClass", {
478 params: { 479 params: {
479 classId: this.getReport.classId, 480 classId: this.getReport.classId,
480 sectionId: this.getReport.sectionId 481 sectionId: this.getReport.sectionId
481 } 482 }
482 }) 483 })
483 .then(response => { 484 .then(response => {
484 response.data.data.unshift({ 485 response.data.data.unshift({
485 name: "Select All", 486 name: "Select All",
486 _id: "Select All" 487 _id: "Select All"
487 }); 488 });
488 this.getStudentsList = response.data.data; 489 this.getStudentsList = response.data.data;
489 this.showLoader = false; 490 this.showLoader = false;
490 // console.log("getSectionsList=====>", response.data.data); 491 // console.log("getSectionsList=====>", response.data.data);
491 }) 492 })
492 .catch(error => { 493 .catch(error => {
493 console.log("err====>", error); 494 console.log("err====>", error);
494 this.showLoader = false; 495 this.showLoader = false;
495 }); 496 });
496 }, 497 },
497 getMarkReportList() { 498 getMarkReportList() {
498 this.showLoader = true; 499 this.showLoader = true;
499 this.showReport = true; 500 this.showReport = true;
500 var getSelectMarks = {}; 501 var getSelectMarks = {};
501 if (this.getReport.studentId == "Select All") { 502 if (this.getReport.studentId == "Select All") {
502 getSelectMarks = { 503 getSelectMarks = {
503 classId: this.getReport.classId, 504 classId: this.getReport.classId,
504 sectionId: this.getReport.sectionId 505 sectionId: this.getReport.sectionId
505 }; 506 };
506 } else if (this.getReport.studentId != "Select All") { 507 } else if (this.getReport.studentId != "Select All") {
507 getSelectMarks = { 508 getSelectMarks = {
508 classId: this.getReport.classId, 509 classId: this.getReport.classId,
509 sectionId: this.getReport.sectionId, 510 sectionId: this.getReport.sectionId,
510 studentId: this.getReport.studentId 511 studentId: this.getReport.studentId
511 }; 512 };
512 } 513 }
513 http() 514 http()
514 .get("/getParticularMark", { 515 .get("/getParticularMark", {
515 params: getSelectMarks, 516 params: getSelectMarks,
516 headers: { Authorization: "Bearer " + this.token } 517 headers: { Authorization: "Bearer " + this.token }
517 }) 518 })
518 .then(response => { 519 .then(response => {
519 this.cardData = response.data.data; 520 this.cardData = response.data.data;
520 let newData = response.data.data; 521 let newData = response.data.data;
521 for (var i = 0; i < newData.length; i++) { 522 for (var i = 0; i < newData.length; i++) {
522 newData[i].examination = newData[i].examId._id; 523 newData[i].examination = newData[i].examId._id;
523 newData[i].studentsId = newData[i].studentId._id; 524 newData[i].studentsId = newData[i].studentId._id;
524 } 525 }
525 var studentMarkArray = []; 526 var studentMarkArray = [];
526 studentMarkArray = _.groupBy(newData, ["studentsId"]); 527 studentMarkArray = _.groupBy(newData, ["studentsId"]);
527 for (let data in studentMarkArray) { 528 for (let data in studentMarkArray) {
528 studentMarkArray[data] = _.groupBy(studentMarkArray[data], [ 529 studentMarkArray[data] = _.groupBy(studentMarkArray[data], [
529 "examination" 530 "examination"
530 ]); 531 ]);
531 } 532 }
532 this.filterData = studentMarkArray; 533 this.filterData = studentMarkArray;
533 for (let data in this.filterData) { 534 for (let data in this.filterData) {
534 for (let item in this.filterData[data]) { 535 for (let item in this.filterData[data]) {
535 var allSubjectTotalMarks = 0; 536 var allSubjectTotalMarks = 0;
536 for (let i = 0; i < this.filterData[data][item].length; i++) { 537 for (let i = 0; i < this.filterData[data][item].length; i++) {
537 var totalMarks = 0; 538 var totalMarks = 0;
538 for ( 539 for (
539 let j = 0; 540 let j = 0;
540 j < studentMarkArray[data][item][i].studentsMarks.length; 541 j < studentMarkArray[data][item][i].studentsMarks.length;
541 j++ 542 j++
542 ) { 543 ) {
543 totalMarks += 544 totalMarks +=
544 studentMarkArray[data][item][i].studentsMarks[j] 545 studentMarkArray[data][item][i].studentsMarks[j]
545 .marksScored; 546 .marksScored;
546 } 547 }
547 this.filterData[data][item][i].totalMarks = totalMarks; 548 this.filterData[data][item][i].totalMarks = totalMarks;
548 549
549 allSubjectTotalMarks += this.filterData[data][item][i] 550 allSubjectTotalMarks += this.filterData[data][item][i]
550 .totalMarks; 551 .totalMarks;
551 this.filterData[data][item][ 552 this.filterData[data][item][
552 i 553 i
553 ].allSubjectTotalMarks = allSubjectTotalMarks; 554 ].allSubjectTotalMarks = allSubjectTotalMarks;
554 } 555 }
555 556
556 // this.totalMarks = totalMarks; 557 // this.totalMarks = totalMarks;
557 if (totalMarks > 90) { 558 if (totalMarks > 90) {
558 this.filterData[data][item].grade = this.gradeAPlus; 559 this.filterData[data][item].grade = this.gradeAPlus;
559 } else if (totalMarks > 80 && totalMarks < 90) { 560 } else if (totalMarks > 80 && totalMarks < 90) {
560 this.filterData[data][item].grade = this.gradeA; 561 this.filterData[data][item].grade = this.gradeA;
561 } else if (totalMarks > 70 && totalMarks < 80) { 562 } else if (totalMarks > 70 && totalMarks < 80) {
562 this.filterData[data][item].grade = this.gradeBPlus; 563 this.filterData[data][item].grade = this.gradeBPlus;
563 } else if (totalMarks > 60 && totalMarks < 70) { 564 } else if (totalMarks > 60 && totalMarks < 70) {
564 this.filterData[data][item].grade = this.gradeB; 565 this.filterData[data][item].grade = this.gradeB;
565 } else if (totalMarks > 50 && totalMarks < 60) { 566 } else if (totalMarks > 50 && totalMarks < 60) {
566 this.filterData[data][item].grade = this.gradeCPlus; 567 this.filterData[data][item].grade = this.gradeCPlus;
567 } else if (totalMarks > 40 && totalMarks < 50) { 568 } else if (totalMarks > 40 && totalMarks < 50) {
568 this.filterData[data][item].grade = this.gradeC; 569 this.filterData[data][item].grade = this.gradeC;
569 } 570 }
570 } 571 }
571 } 572 }
572 // console.log("this.filterData-----------last", this.filterData); 573 // console.log("this.filterData-----------last", this.filterData);
573 574
574 this.showLoader = false; 575 this.showLoader = false;
575 }) 576 })
576 .catch(error => { 577 .catch(error => {
577 // console.log("err====>", err); 578 // console.log("err====>", err);
578 this.showLoader = false; 579 this.showLoader = false;
579 this.snackbar = true; 580 this.snackbar = true;
580 // this.text = error.response.data.message; 581 // this.text = error.response.data.message;
581 // if (error.response.status === 401) { 582 // if (error.response.status === 401) {
582 // this.$router.replace({ path: "/" }); 583 // this.$router.replace({ path: "/" });
583 // this.$store.dispatch("setToken", null); 584 // this.$store.dispatch("setToken", null);
584 // this.$store.dispatch("Id", null); 585 // this.$store.dispatch("Id", null);
585 // } 586 // }
586 }); 587 });
587 }, 588 },
588 printProgressReport() { 589 printProgressReport() {
589 this.printLoader = true; 590 this.printLoader = true;
590 setTimeout(() => { 591 setTimeout(() => {
591 // Pass the element id here 592 // Pass the element id here
592 this.$htmlToPaper("printMe"); 593 this.$htmlToPaper("printMe");
593 this.printLoader = false; 594 this.printLoader = false;
594 }, 4000); 595 }, 4000);
595 }, 596 },
596 getUserData() { 597 getUserData() {
597 http() 598 http()
598 .get("/getParticularUserDetail") 599 .get("/getParticularUserDetail")
599 .then(response => { 600 .then(response => {
600 this.userData = response.data.data; 601 this.userData = response.data.data;
601 }) 602 })
602 .catch(error => { 603 .catch(error => {
603 // if (error.response.status === 401) { 604 // if (error.response.status === 401) {
604 // this.$router.replace({ path: "/" }); 605 // this.$router.replace({ path: "/" });
605 // this.$store.dispatch("setToken", null); 606 // this.$store.dispatch("setToken", null);
606 // this.$store.dispatch("Id", null); 607 // this.$store.dispatch("Id", null);
607 // } 608 // }
608 }); 609 });
609 } 610 }
610 } 611 }
611 }; 612 };
612 </script> 613 </script>
613 614
614 <style scoped> 615 <style scoped>
615 table { 616 table {
616 border-collapse: collapse; 617 border-collapse: collapse;
617 border: 1px solid #e2e7eb; 618 border: 1px solid #e2e7eb;
618 } 619 }
619 620
620 th, 621 th,
621 td { 622 td {
622 border: 1px solid #e2e7eb; 623 border: 1px solid #e2e7eb;
623 padding: 0px; 624 padding: 0px;
624 text-align: center; 625 text-align: center;
625 } 626 }
626 table.feeTypeTable { 627 table.feeTypeTable {
627 table-layout: auto !important; 628 table-layout: auto !important;
628 width: 100% !important; 629 width: 100% !important;
629 } 630 }
630 .bg-sky { 631 .bg-sky {
631 background-color: #98b2cc !important; 632 background-color: #98b2cc !important;
632 } 633 }
633 .bg-sky-light { 634 .bg-sky-light {
634 background-color: #89a0b8; 635 background-color: #89a0b8;
635 } 636 }
636 .bg-purple { 637 .bg-purple {
637 background-color: #9583ac; 638 background-color: #9583ac;
638 } 639 }
639 .bg-skyDark { 640 .bg-skyDark {
640 background-color: #956785; 641 background-color: #956785;
641 } 642 }
642 643
643 /* .report { 644 /* .report {
644 overflow: hidden; 645 overflow: hidden;
645 max-width: 794px; 646 max-width: 794px;
646 margin: 0px auto; 647 margin: 0px auto;
647 margin-bottom: 10px; 648 margin-bottom: 10px;
648 padding: 30px; 649 padding: 30px;
649 } */ 650 } */
650 .line { 651 .line {
651 border-bottom: 1px solid #ddd; 652 border-bottom: 1px solid #ddd;
652 overflow: hidden; 653 overflow: hidden;
653 padding-bottom: 10px; 654 padding-bottom: 10px;
654 vertical-align: middle; 655 vertical-align: middle;
655 margin-bottom: 4px; 656 margin-bottom: 4px;
656 } 657 }
657 .school-logo { 658 .school-logo {
658 float: left; 659 float: left;
659 } 660 }
660 .school-name { 661 .school-name {
661 box-sizing: border-box; 662 box-sizing: border-box;
662 } 663 }
663 .school-info { 664 .school-info {
664 width: 100%; 665 width: 100%;
665 overflow: hidden; 666 overflow: hidden;
666 } 667 }
667 .school-address { 668 .school-address {
668 float: left; 669 float: left;
669 width: 40%; 670 width: 40%;
670 } 671 }
671 .student-data { 672 .student-data {
672 float: right; 673 float: right;
673 width: 40%; 674 width: 40%;
674 } 675 }
675 .student-info { 676 .student-info {
676 float: left; 677 float: left;
677 } 678 }
678 @media screen and (max-width: 380px) { 679 @media screen and (max-width: 380px) {
679 .tableRsponsive { 680 .tableRsponsive {
680 /* display: block; */ 681 /* display: block; */
681 position: relative; 682 position: relative;
682 overflow: scroll; 683 overflow: scroll;
683 } 684 }
684 } 685 }