viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 394e1f2555a6fa1c9b85162a64cfe8c7e53b4613

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

test progress card

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