viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 664cc2c52747fc2f6c69a2cf3760a80b67fbe605

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

test progress card

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