viithiisys / School-Management-dashboard

Download as
Browse Code ยป

Commit 1d7227237ca5e5b8afd1fdd28ff823995c5725ea

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

implement view mark and report card

Showing 2 changed files with 180 additions and 123 deletions   Show diff stats
src/pages/Mark/viewMark.vue
Diff comments   View file @1d72272
1 <template> 1 <template>
2 <v-app id="pages-dasboard"> 2 <v-app id="pages-dasboard">
3 <!-- ****** PROFILE MARK ****** --> 3 <!-- ****** PROFILE MARK ****** -->
4 <v-container fluid grid-list-md> 4 <v-container fluid grid-list-md>
5 <v-layout> 5 <v-layout>
6 <v-flex xs12 sm8 md10> 6 <v-flex xs12 sm8 md10>
7 <v-btn class="open-dialog-button mt-3" round dark @click="print()"> 7 <v-btn class="open-dialog-button mt-3" round dark @click="print()">
8 Print 8 Print
9 <v-icon size="18" right dark>print</v-icon> 9 <v-icon size="18" right dark>print</v-icon>
10 </v-btn> 10 </v-btn>
11 </v-flex> 11 </v-flex>
12 <v-flex xs12 sm4 md2 class="right"> 12 <v-flex xs12 sm4 md2 class="right">
13 <v-select 13 <v-select
14 class 14 class
15 :items="selectMark" 15 :items="selectMark"
16 label="Select" 16 label="Select"
17 v-model="selectMarkList" 17 v-model="selectMarkList"
18 @change="selectMarkData(selectMarkList)" 18 @change="selectMarkData(selectMarkList)"
19 ></v-select> 19 ></v-select>
20 </v-flex> 20 </v-flex>
21 </v-layout> 21 </v-layout>
22 <v-flex xs12 sm12 id="printMe"> 22 <v-flex xs12 sm12 id="printMe">
23 <v-layout wrap> 23 <v-layout wrap>
24 <!-- ****** TABLE DATA MARK ****** --> 24 <!-- ****** TABLE DATA MARK ****** -->
25 <v-flex xs12 sm12 md12> 25 <v-flex xs12 sm12 md12>
26 <v-card flat style="border: 1px solid lightgrey;margin-bottom:14px;padding:20px"> 26 <v-card flat style="border: 1px solid lightgrey;margin-bottom:14px;padding:20px">
27 <v-layout> 27 <v-layout>
28 <v-flex xs12 sm12 md12 class="text-xs-center"> 28 <v-flex xs12 sm12 md12 class="text-xs-center">
29 <!-- <img :src="userData.schoolLogoUrl" width="140" alt="logo" /> --> 29 <!-- <img :src="userData.schoolLogoUrl" width="140" alt="logo" /> -->
30 <v-avatar> 30 <v-avatar>
31 <img :src="userData.schoolLogoUrl" v-if="userData.schoolLogoUrl" /> 31 <img :src="userData.schoolLogoUrl" v-if="userData.schoolLogoUrl" />
32 <img 32 <img
33 src="/static/schoolIcons/INTRACK_White.png" 33 src="/static/schoolIcons/INTRACK_White.png"
34 v-else-if="!userData.schoolLogoUrl" 34 v-else-if="!userData.schoolLogoUrl"
35 /> 35 />
36 </v-avatar> 36 </v-avatar>
37 <p class="title">{{ userData.name }}</p> 37 <p class="title">{{ userData.name }}</p>
38 <p>{{ userData.address }}</p> 38 <p>{{ userData.address }}</p>
39 </v-flex> 39 </v-flex>
40 </v-layout> 40 </v-layout>
41 <v-layout wrap> 41 <v-layout wrap>
42 <v-flex xs12 sm12 md12 class="text-xs-center"> 42 <v-flex xs12 sm12 md4>
43 <v-card class="student-card" xs6 sm6 md6> 43 <v-card>
44 <v-avatar style="padding-top: 8%"> 44 <v-layout class="py-4">
45 <img src="/static/icon/user.png" v-if="!markData[0].studentId.profilePicUrl" /> 45 <v-avatar class="mx-auto" size="70">
46 <img 46 <img
47 :src="markData[0].studentId.profilePicUrl" 47 src="/static/icon/user.png"
48 v-else-if="markData[0].studentId.profilePicUrl" 48 v-if="!markData[0].studentId.profilePicUrl"
49 /> 49 />
50 </v-avatar> 50 <img
51 <v-layout style=" padding-top: 8%"> 51 :src="markData[0].studentId.profilePicUrl"
52 <v-flex xs6 sm6 class="pa-0"> 52 v-else-if="markData[0].studentId.profilePicUrl"
53 />
54 </v-avatar>
55 </v-layout>
56 <v-layout class="pa-2">
57 <v-flex xs6 sm6>
53 <h4 class="right"> 58 <h4 class="right">
54 <b>Name :</b> 59 <b>Name :</b>
55 </h4> 60 </h4>
56 </v-flex> 61 </v-flex>
57 <v-flex sm6 xs6 class="pa-0"> 62 <v-flex sm6 xs6>
58 <h4>{{ markData[0].studentId.name }}</h4> 63 <h4>{{ markData[0].studentId.name }}</h4>
59 </v-flex> 64 </v-flex>
60 </v-layout> 65 </v-layout>
61 <v-layout style=" padding-top: 8%"> 66 <v-layout class="pa-2">
62 <v-flex xs6 sm6 class="pa-0"> 67 <v-flex xs6 sm6>
63 <h4 class="right"> 68 <h4 class="right">
64 <b>Class :</b> 69 <b>Class :</b>
65 </h4> 70 </h4>
66 </v-flex> 71 </v-flex>
67 <v-flex sm6 xs6 class="pa-0"> 72 <v-flex sm6 xs6>
68 <h4>{{ markData[0].classId.classNum }}</h4> 73 <h4>{{ markData[0].classId.classNum }}</h4>
69 </v-flex> 74 </v-flex>
70 </v-layout> 75 </v-layout>
71 <v-layout style=" padding-top: 8%"> 76 <v-layout class="pa-2">
72 <v-flex xs6 sm6 class="pa-0"> 77 <v-flex xs6 sm6>
73 <h4 class="right"> 78 <h4 class="right">
74 <b>Section :</b> 79 <b>Section :</b>
75 </h4> 80 </h4>
76 </v-flex> 81 </v-flex>
77 <v-flex sm6 xs6 class="pa-0"> 82 <v-flex sm6 xs6>
78 <h4>{{ markData[0].sectionId.name }}</h4> 83 <h4>{{ markData[0].sectionId.name }}</h4>
79 </v-flex> 84 </v-flex>
80 </v-layout> 85 </v-layout>
81 <v-layout style=" padding-top: 8%"> 86 <v-layout class="pa-2">
82 <v-flex xs6 sm6 class="pa-0"> 87 <v-flex xs6 sm6>
83 <h4 class="right"> 88 <h4 class="right">
84 <b>Roll No :</b> 89 <b>Roll No :</b>
85 </h4> 90 </h4>
86 </v-flex> 91 </v-flex>
87 <v-flex sm6 xs6 class="pa-0"> 92 <v-flex sm6 xs6>
88 <h4>{{ markData[0].studentId.rollNo }}</h4> 93 <h4>{{ markData[0].studentId.rollNo }}</h4>
89 </v-flex> 94 </v-flex>
90 </v-layout> 95 </v-layout>
91 <!-- <p 96 <!-- <p
92 style="font-size:20px;margin:0px;margin-bottom:4px;" 97 style="font-size:20px;margin:0px;margin-bottom:4px;"
93 >{{ markData[0].studentId.name }}</p> 98 >{{ markData[0].studentId.name }}</p>
94 <p 99 <p
95 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;" 100 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
96 >Class : {{ markData[0].classId.classNum }}</p> 101 >Class : {{ markData[0].classId.classNum }}</p>
97 <p 102 <p
98 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;" 103 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
99 >Section : {{ markData[0].sectionId.name }}</p> 104 >Section : {{ markData[0].sectionId.name }}</p>
100 <p 105 <p
101 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;" 106 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:4px;"
102 >Roll No : {{ markData[0].studentId.rollNo }}</p> --> 107 >Roll No : {{ markData[0].studentId.rollNo }}</p>-->
103 </v-card> 108 </v-card>
104 <v-card class="student-table" xs6 sm6 md6> 109 </v-flex>
110 <v-flex xs12 sm12 md8 v-show="showMark">
111 <v-card>
105 <!-- <v-card-title class="subheading">{{value[0].examId.examName}}</v-card-title> --> 112 <!-- <v-card-title class="subheading">{{value[0].examId.examName}}</v-card-title> -->
106 <table 113 <table
107 v-for="(value, id) in filterData" 114 v-for="(value, id) in filterData"
108 :key="id" 115 :key="id"
109 class="mb-5 tableRsponsive feeTypeTable subheading" 116 class="mb-5 tableRsponsive feeTypeTable subheading"
110 style="border: 1px solid black; 117 style="border: 1px solid black;
111 border-collapse: collapse;!important 118 border-collapse: collapse;!important
112 table-layout: auto !important; 119 table-layout: auto !important;
113 width: 100% !important; 120 width: 100% !important;
114 overflow: hidden;" 121 overflow: hidden;"
115 > 122 >
116 <thead style="border: 1px solid lightgrey !important;"> 123 <thead style="border: 1px solid transparent !important;">
117 <v-card-title class="subheading">{{value[0].examId.examName}}</v-card-title> 124 <!-- <tr>
118 125 <v-card-title class="subheading">{{value[0].examId.examName}}</v-card-title>
126 </tr>-->
127 <!-- <tr style="border: 1px solid transparent !important"> -->
128 <td
129 colspan="4"
130 style="text-align: inherit !important;
131 border-right: inherit;
132 border-top: inherit;
133 padding:14px;"
134 >{{value[0].examId.examName}}</td>
135 <!-- </tr> -->
119 <tr style="border: 1px solid lightgrey !important;padding:4px;"> 136 <tr style="border: 1px solid lightgrey !important;padding:4px;">
120 <td 137 <td
121 rowspan="2" 138 rowspan="2"
122 style="border: 1px solid lightgrey !important;padding: 10px;" 139 style="border: 1px solid lightgrey !important;padding: 10px;"
123 >Subject</td> 140 >Subject</td>
124 <template v-for="studentData in value"> 141 <template v-for="(studentData,ind) in value">
125 <td 142 <td
143 v-if="ind == 0"
126 colspan="2" 144 colspan="2"
127 v-for="studentMark in studentData.studentsMarks" 145 v-for="studentMark in studentData.studentsMarks"
128 style="border: 1px solid lightgrey !important;padding: 10px;" 146 style="border: 1px solid lightgrey !important;padding: 10px;"
129 >{{studentMark.markDistributionId.distributionType}}</td> 147 >{{studentMark.markDistributionId.distributionType}}</td>
130 <td 148 <td
149 v-if="ind == 0"
131 style="border: 1px solid lightgrey !important;padding: 10px;" 150 style="border: 1px solid lightgrey !important;padding: 10px;"
132 >Total Marks</td> 151 >Total Marks</td>
133 </template> 152 </template>
134 </tr> 153 </tr>
135 <tr 154 <tr
136 v-for="(subject, ind) in value" 155 v-for="(subject, ind) in value"
137 v-if="ind == 0" 156 v-if="ind == 0"
138 style="border: 1px solid lightgrey !important;" 157 style="border: 1px solid lightgrey !important;"
139 > 158 >
140 <template v-for="(exam, i) in subject.studentsMarks"> 159 <template v-for="(exam, i) in subject.studentsMarks">
141 <td style="border: 1px solid lightgrey !important;padding: 10px;">Marks</td> 160 <td style="border: 1px solid lightgrey !important;padding: 10px;">Marks</td>
142 <td 161 <td
143 style="border: 1px solid lightgrey !important;padding: 10px;" 162 style="border: 1px solid lightgrey !important;padding: 10px;"
144 >Highest Marks</td> 163 >Highest Marks</td>
145 </template> 164 </template>
146 </tr> 165 </tr>
147 </thead> 166 </thead>
148 <tbody style="border: 1px solid lightgrey !important;"> 167 <tbody style="border: 1px solid lightgrey !important;">
149 <tr 168 <tr
150 v-for="subject in value" 169 v-for="subject in value"
151 style="border: 1px solid lightgrey !important;" 170 style="border: 1px solid lightgrey !important;"
152 > 171 >
153 <td 172 <td
154 style="border: 1px solid lightgrey !important;padding: 10px;" 173 style="border: 1px solid lightgrey !important;padding: 10px;"
155 >{{subject.subjectName}}</td> 174 >{{subject.subjectName}}</td>
156 <template v-for="(exam, i) in subject.studentsMarks"> 175 <template v-for="(exam, i) in subject.studentsMarks">
157 <td 176 <td
158 style="border: 1px solid lightgrey !important;padding: 10px;" 177 style="border: 1px solid lightgrey !important;padding: 10px;"
159 >{{exam.marksScored}}</td> 178 >{{exam.marksScored}}</td>
160 <td 179 <td
161 style="border: 1px solid lightgrey !important;padding: 10px;" 180 style="border: 1px solid lightgrey !important;padding: 10px;"
162 >{{exam.markDistributionId.markValue}}</td> 181 >{{exam.markDistributionId.markValue}}</td>
163 </template> 182 </template>
164 <td 183 <td
165 style="border: 1px solid lightgrey !important;padding: 10px;" 184 style="border: 1px solid lightgrey !important;padding: 10px;"
166 >{{subject.totalMarks}}</td> 185 >{{subject.totalMarks}}</td>
167 </tr> 186 </tr>
168 </tbody> 187 </tbody>
169 </table> 188 </table>
170 </v-card> 189 </v-card>
171 </v-flex> 190 </v-flex>
191 <!-- ****** TABLE GRADE MARK ****** -->
192 <v-flex xs12 sm12 md8 v-show="showGrade">
193 <!-- <v-card class="fixcolors white--text" flat>
194 <v-card-actions class="pa-0">
195 <v-spacer></v-spacer>
196 <v-card-title class="pa-2">
197 <h3>Mark</h3>
198 </v-card-title>
199 <v-spacer></v-spacer>
200 </v-card-actions>
201 </v-card> -->
202 <v-card
203 v-for="(value, id, index) in filterData"
204 :key="index"
205 flat
206 style="border: 1px solid lightgrey;margin-bottom:14px;"
207 >
208 <v-card-title class="subheading">{{value[0].examId.examName}}</v-card-title>
209 <table
210 class="mb-5 tableRsponsive feeTypeTable"
211 style="border: 1px solid lightgrey;
212 border-collapse: collapse;!important
213 table-layout: auto !important;
214 width: 100% !important;"
215 >
216 <thead style="border: 1px solid lightgrey !important;">
217 <tr
218 class="info white--text"
219 style="border: 1px solid lightgrey !important;padding:4px;"
220 >
221 <td style="border: 1px solid lightgrey !important;padding: 10px;">Subject</td>
222 <td style="border: 1px solid lightgrey !important;padding: 10px;">Grade</td>
223 </tr>
224 </thead>
225 <tbody style="border: 1px solid lightgrey !important;">
226 <tr
227 v-for="subject in value"
228 style="border: 1px solid lightgrey !important;"
229 >
230 <td
231 style="border: 1px solid lightgrey !important;padding: 10px;"
232 >{{ subject.subjectName }}</td>
233 <td
234 style="border: 1px solid lightgrey !important;padding: 10px;"
235 >{{ subject.grade }}</td>
236 </tr>
237 </tbody>
238 </table>
239 </v-card>
240 <v-card v-if="markData == ''">
241 <v-layout>
242 <v-flex xs12>
243 <h5 class="text-xs-center pa-3">No Data Found</h5>
244 </v-flex>
245 </v-layout>
246 </v-card>
247 </v-flex>
172 </v-layout> 248 </v-layout>
173 </v-card> 249 </v-card>
174 </v-flex> 250 </v-flex>
175 </v-layout> 251 </v-layout>
176 </v-flex> 252 </v-flex>
177 </v-container> 253 </v-container>
178 <div class="loader" v-if="showLoader"> 254 <div class="loader" v-if="showLoader">
179 <v-progress-circular indeterminate color="white"></v-progress-circular> 255 <v-progress-circular indeterminate color="white"></v-progress-circular>
180 </div> 256 </div>
181 </v-app> 257 </v-app>
182 </template> 258 </template>
183 259
184 <script> 260 <script>
185 import http from "@/Services/http.js"; 261 import http from "@/Services/http.js";
186 import moment from "moment"; 262 import moment from "moment";
187 import _ from "underscore"; 263 import _ from "underscore";
188 264
189 export default { 265 export default {
190 data: () => ({ 266 data: () => ({
191 showLoader: true, 267 showLoader: true,
192 nameShow: false, 268 nameShow: false,
193 showMark: true, 269 showMark: true,
194 showGrade: false, 270 showGrade: false,
195 markData: [], 271 markData: [],
196 token: "", 272 token: "",
197 markDistributions: [], 273 markDistributions: [],
198 markParticularDistributionData: [], 274 markParticularDistributionData: [],
199 filterData: [], 275 filterData: [],
200 output: null, 276 output: null,
201 gradeAPlus: "A+", 277 gradeAPlus: "A+",
202 gradeA: "A", 278 gradeA: "A",
203 gradeBPlus: "B+", 279 gradeBPlus: "B+",
204 gradeB: "B", 280 gradeB: "B",
205 gradeCPlus: "C+", 281 gradeCPlus: "C+",
206 gradeC: "C", 282 gradeC: "C",
207 selectMarkList: "Mark", 283 selectMarkList: "Mark",
208 selectMark: ["Mark", "Grade"], 284 selectMark: ["Mark", "Grade"],
209 MarkData: "", 285 MarkData: "",
210 userData: {} 286 userData: {}
211 }), 287 }),
212 mounted() { 288 mounted() {
213 this.token = this.$store.state.token; 289 this.token = this.$store.state.token;
214 this.getMarkList(); 290 this.getMarkList();
215 this.getUserData(); 291 this.getUserData();
216 }, 292 },
217 methods: { 293 methods: {
218 getMarkList() { 294 getMarkList() {
219 this.showLoader = true; 295 this.showLoader = true;
220 http() 296 http()
221 .get("/getParticularMark", { 297 .get("/getParticularMark", {
222 params: { studentId: this.$route.params.markId }, 298 params: { studentId: this.$route.params.markId },
223 headers: { Authorization: "Bearer " + this.token } 299 headers: { Authorization: "Bearer " + this.token }
224 }) 300 })
225 .then(response => { 301 .then(response => {
226 this.markData = response.data.data; 302 this.markData = response.data.data;
227 let newData = response.data.data; 303 let newData = response.data.data;
228 // console.log("newData", newData); 304 // console.log("newData", newData);
229 for (var i = 0; i < newData.length; i++) { 305 for (var i = 0; i < newData.length; i++) {
230 newData[i].examination = newData[i].examId._id; 306 newData[i].examination = newData[i].examId._id;
231 } 307 }
232 this.filterData = _.groupBy(newData, ["examination"]); 308 this.filterData = _.groupBy(newData, ["examination"]);
233 // console.log("this.filterData", this.filterData); 309 // console.log("this.filterData", this.filterData);
234 for (let data in this.filterData) { 310 for (let data in this.filterData) {
235 for (let item in this.filterData[data]) { 311 for (let item in this.filterData[data]) {
236 var totalMarks = 0; 312 var totalMarks = 0;
237 for ( 313 for (
238 let i = 0; 314 let i = 0;
239 i < this.filterData[data][item].studentsMarks.length; 315 i < this.filterData[data][item].studentsMarks.length;
240 i++ 316 i++
241 ) { 317 ) {
242 // console.log("this.filterData[data][item].studentsMarks[i]",this.filterData[data][item].studentsMarks[i] 318 // console.log("this.filterData[data][item].studentsMarks[i]",this.filterData[data][item].studentsMarks[i]
243 // .marksScored) 319 // .marksScored)
244 totalMarks += this.filterData[data][item].studentsMarks[i] 320 totalMarks += this.filterData[data][item].studentsMarks[i]
245 .marksScored; 321 .marksScored;
246 } 322 }
247 this.filterData[data][item].totalMarks = totalMarks; 323 this.filterData[data][item].totalMarks = totalMarks;
248 324
249 if (totalMarks > 90) { 325 if (totalMarks > 90) {
250 this.filterData[data][item].grade = this.gradeAPlus; 326 this.filterData[data][item].grade = this.gradeAPlus;
251 } else if (totalMarks > 80 && totalMarks < 90) { 327 } else if (totalMarks > 80 && totalMarks < 90) {
252 this.filterData[data][item].grade = this.gradeA; 328 this.filterData[data][item].grade = this.gradeA;
253 } else if (totalMarks > 70 && totalMarks < 80) { 329 } else if (totalMarks > 70 && totalMarks < 80) {
254 this.filterData[data][item].grade = this.gradeBPlus; 330 this.filterData[data][item].grade = this.gradeBPlus;
255 } else if (totalMarks > 60 && totalMarks < 70) { 331 } else if (totalMarks > 60 && totalMarks < 70) {
256 this.filterData[data][item].grade = this.gradeB; 332 this.filterData[data][item].grade = this.gradeB;
257 } else if (totalMarks > 50 && totalMarks < 60) { 333 } else if (totalMarks > 50 && totalMarks < 60) {
258 this.filterData[data][item].grade = this.gradeCPlus; 334 this.filterData[data][item].grade = this.gradeCPlus;
259 } else if (totalMarks > 40 && totalMarks < 50) { 335 } else if (totalMarks > 40 && totalMarks < 50) {
260 this.filterData[data][item].grade = this.gradeC; 336 this.filterData[data][item].grade = this.gradeC;
261 } 337 }
262 } 338 }
263 } 339 }
264 this.showLoader = false; 340 this.showLoader = false;
265 }) 341 })
266 .catch(error => { 342 .catch(error => {
267 this.showLoader = false; 343 this.showLoader = false;
268 this.snackbar = true; 344 this.snackbar = true;
269 this.text = error.response.data.message; 345 this.text = error.response.data.message;
270 if (error.response.status === 401) { 346 if (error.response.status === 401) {
271 this.$router.replace({ path: "/" }); 347 this.$router.replace({ path: "/" });
272 this.$store.dispatch("setToken", null); 348 this.$store.dispatch("setToken", null);
273 this.$store.dispatch("Id", null); 349 this.$store.dispatch("Id", null);
274 } 350 }
275 }); 351 });
276 }, 352 },
277 print() { 353 print() {
278 // Pass the element id here 354 // Pass the element id here
279 this.$htmlToPaper("printMe"); 355 this.$htmlToPaper("printMe");
280 }, 356 },
281 getUserData() { 357 getUserData() {
282 http() 358 http()
283 .get("/getParticularUserDetail") 359 .get("/getParticularUserDetail")
284 .then(response => { 360 .then(response => {
285 this.userData = response.data.data; 361 this.userData = response.data.data;
286 }) 362 })
287 .catch(error => { 363 .catch(error => {
288 // if (error.response.status === 401) { 364 // if (error.response.status === 401) {
289 // this.$router.replace({ path: "/" }); 365 // this.$router.replace({ path: "/" });
290 // this.$store.dispatch("setToken", null); 366 // this.$store.dispatch("setToken", null);
291 // this.$store.dispatch("Id", null); 367 // this.$store.dispatch("Id", null);
292 // } 368 // }
293 }); 369 });
294 }, 370 },
295 selectMarkData(select) { 371 selectMarkData(select) {
296 if (select == "Mark") { 372 if (select == "Mark") {
297 this.showMark = true; 373 this.showMark = true;
298 this.showGrade = false; 374 this.showGrade = false;
299 } else if (select == "Grade") { 375 } else if (select == "Grade") {
300 this.showGrade = true; 376 this.showGrade = true;
301 this.showMark = false; 377 this.showMark = false;
302 } 378 }
303 } 379 }
304 } 380 }
305 }; 381 };
306 </script> 382 </script>
307 383
308 <style scoped> 384 <style scoped>
309 .student-card { 385 .student-card {
310 float: left; 386 float: left;
311 width: 20%; 387 width: 20%;
312 height: 70%; 388 height: 70%;
313 } 389 }
314 .student-table { 390 .student-table {
315 margin-left: 28%; 391 margin-left: 28%;
316 height: -webkit-fill-available; 392 height: -webkit-fill-available;
317 } 393 }
318 .add-button { 394 .add-button {
319 background: #feb83c !important; 395 background: #feb83c !important;
320 border-color: #feb83c !important; 396 border-color: #feb83c !important;
321 text-transform: none !important; 397 text-transform: none !important;
322 -webkit-box-shadow: none !important; 398 -webkit-box-shadow: none !important;
323 box-shadow: none !important; 399 box-shadow: none !important;
324 } 400 }
325 .card-styles { 401 .card-styles {
326 background: #7f62f8 !important; 402 background: #7f62f8 !important;
327 border-color: #7f62f8 !important; 403 border-color: #7f62f8 !important;
328 } 404 }
329 .open-dialog-button { 405 .open-dialog-button {
330 background: #827bfa !important; 406 background: #827bfa !important;
331 border-color: #827bfa !important; 407 border-color: #827bfa !important;
332 text-transform: none !important; 408 text-transform: none !important;
333 } 409 }
334 /* table { 410 /* table {
335 border-collapse: collapse; 411 border-collapse: collapse;
336 border: 1px solid #e2e7eb; 412 border: 1px solid #e2e7eb;
337 } 413 }
338 th, 414 th,
339 td { 415 td {
340 border: 1px solid #e2e7eb; 416 border: 1px solid #e2e7eb;
341 text-align: center; 417 text-align: center;
342 } 418 }
343 table.feeTypeTable { 419 table.feeTypeTable {
344 table-layout: auto !important; 420 table-layout: auto !important;
345 width: 100% !important; 421 width: 100% !important;
346 } */ 422 } */
347 .bg-sky { 423 .bg-sky {
348 background-color: #98b2cc !important; 424 background-color: #98b2cc !important;
349 } 425 }
350 .bg-sky-light { 426 .bg-sky-light {
351 background-color: #89a0b8; 427 background-color: #89a0b8;
352 } 428 }
353 .bg-purple { 429 .bg-purple {
354 background-color: #9583ac; 430 background-color: #9583ac;
355 } 431 }
356 .bg-skyDark { 432 .bg-skyDark {
357 background-color: #956785; 433 background-color: #956785;
358 } 434 }
359 .loader { 435 .loader {
360 width: 100%; 436 width: 100%;
361 height: 100%; 437 height: 100%;
362 position: fixed; 438 position: fixed;
363 top: 0; 439 top: 0;
364 left: 0; 440 left: 0;
365 text-align: center; 441 text-align: center;
366 background-color: rgba(0, 0, 0, 0.5); 442 background-color: rgba(0, 0, 0, 0.5);
367 z-index: 999; 443 z-index: 999;
368 } 444 }
369 445
370 .loader > div { 446 .loader > div {
371 position: relative; 447 position: relative;
372 top: calc(50% - 16px); 448 top: calc(50% - 16px);
373 } 449 }
374 @media screen and (max-width: 380px) { 450 @media screen and (max-width: 380px) {
375 .tableRsponsive { 451 .tableRsponsive {
376 /* display: block; */ 452 /* display: block; */
377 position: relative; 453 position: relative;
378 overflow: scroll; 454 overflow: scroll;
379 } 455 }
380 } 456 }
381 </style> 457 </style>
src/pages/Report/progressCardReport.vue
Diff comments   View file @1d72272
1 <template> 1 <template>
2 <v-container fluid class="body-color"> 2 <v-container fluid class="body-color">
3 <!-- ****** Progress Card Report Table****** --> 3 <!-- ****** Progress Card Report Table****** -->
4 <v-card flat class="elevation-0 transparent"> 4 <v-card flat class="elevation-0 transparent">
5 <v-form ref="form" v-model="valid" lazy-validation> 5 <v-form ref="form" v-model="valid" lazy-validation>
6 <v-flex xs12 sm12 lg12> 6 <v-flex xs12 sm12 lg12>
7 <v-layout wrap> 7 <v-layout wrap>
8 <v-flex xs12 sm12 lg3> 8 <v-flex xs12 sm12 lg3>
9 <v-layout> 9 <v-layout>
10 <v-flex xs3 sm6 lg2 class="subheading mt-4"> 10 <v-flex xs3 sm6 lg2 class="subheading mt-4">
11 <label class="right">Class:</label> 11 <label class="right">Class:</label>
12 </v-flex> 12 </v-flex>
13 <v-flex xs9 sm6 lg8 class="ml-2"> 13 <v-flex xs9 sm6 lg8 class="ml-2">
14 <v-select 14 <v-select
15 v-model="getReport.classId" 15 v-model="getReport.classId"
16 label="Select your class" 16 label="Select your class"
17 type="text" 17 type="text"
18 :items="classList" 18 :items="classList"
19 item-text="classNum" 19 item-text="classNum"
20 item-value="_id" 20 item-value="_id"
21 :rules="classRules" 21 :rules="classRules"
22 @change="getSections(getReport.classId)" 22 @change="getSections(getReport.classId)"
23 required 23 required
24 ></v-select> 24 ></v-select>
25 </v-flex> 25 </v-flex>
26 </v-layout> 26 </v-layout>
27 </v-flex> 27 </v-flex>
28 <v-flex xs12 sm12 lg3> 28 <v-flex xs12 sm12 lg3>
29 <v-layout> 29 <v-layout>
30 <v-flex xs3 sm6 lg2 class="subheading mt-4"> 30 <v-flex xs3 sm6 lg2 class="subheading mt-4">
31 <label class="right">Section:</label> 31 <label class="right">Section:</label>
32 </v-flex> 32 </v-flex>
33 <v-flex xs9 sm6 lg8 class="ml-2"> 33 <v-flex xs9 sm6 lg8 class="ml-2">
34 <v-select 34 <v-select
35 :items="addSection" 35 :items="addSection"
36 label="Select your Section" 36 label="Select your Section"
37 v-model="getReport.sectionId" 37 v-model="getReport.sectionId"
38 item-text="name" 38 item-text="name"
39 item-value="_id" 39 item-value="_id"
40 name="Select Section" 40 name="Select Section"
41 @change="getStudents" 41 @change="getStudents"
42 :rules="sectionRules" 42 :rules="sectionRules"
43 required 43 required
44 ></v-select> 44 ></v-select>
45 </v-flex> 45 </v-flex>
46 </v-layout> 46 </v-layout>
47 </v-flex> 47 </v-flex>
48 <v-flex xs12 sm12 lg3> 48 <v-flex xs12 sm12 lg3>
49 <v-layout> 49 <v-layout>
50 <v-flex xs3 sm6 lg2 class="subheading mt-4"> 50 <v-flex xs3 sm6 lg2 class="subheading mt-4">
51 <label class="right">Student:</label> 51 <label class="right">Student:</label>
52 </v-flex> 52 </v-flex>
53 <v-flex xs9 sm6 lg8 class="ml-2"> 53 <v-flex xs9 sm6 lg8 class="ml-2">
54 <v-select 54 <v-select
55 :items="getStudentsList" 55 :items="getStudentsList"
56 label="Select your student" 56 label="Select your student"
57 v-model="getReport.studentId" 57 v-model="getReport.studentId"
58 item-text="name" 58 item-text="name"
59 item-value="_id" 59 item-value="_id"
60 :rules="studentRules" 60 :rules="studentRules"
61 required 61 required
62 ></v-select> 62 ></v-select>
63 </v-flex> 63 </v-flex>
64 </v-layout> 64 </v-layout>
65 </v-flex> 65 </v-flex>
66 <v-flex xs12 sm12 lg3 class="hidden-xs-only hidden-sm-only"> 66 <v-flex xs12 sm12 lg3 class="hidden-xs-only hidden-sm-only">
67 <v-btn 67 <v-btn
68 @click="getMarkReportList" 68 @click="getMarkReportList"
69 round 69 round
70 dark 70 dark
71 :loading="loading" 71 :loading="loading"
72 class="open-dialog-button mt-3" 72 class="open-dialog-button mt-3"
73 >Get Report</v-btn> 73 >Get Report</v-btn>
74 </v-flex> 74 </v-flex>
75 </v-layout> 75 </v-layout>
76 </v-flex> 76 </v-flex>
77 </v-form> 77 </v-form>
78 </v-card> 78 </v-card>
79
79 <v-layout v-show="showReport"> 80 <v-layout v-show="showReport">
80 <v-flex xs12> 81 <v-flex xs12>
81 <v-card class="transparent elevation-0"> 82 <v-card class="transparent elevation-0">
82 <v-container grid-list-md v-show="showReport" class="report"> 83 <v-container grid-list-md class="report">
83 <v-flex xs12 sm12 id="printMe"> 84 <v-flex xs12 sm12 id="printMe">
84 <v-layout wrap> 85 <v-layout wrap>
85 <!-- ****** TABLE DATA MARK ****** --> 86 <!-- ****** TABLE DATA MARK ****** -->
86 <v-flex xs12 sm12 md12> 87 <v-flex xs12 sm12 md12>
87 <v-layout> 88 <v-layout>
88 <v-flex xs12> 89 <v-flex xs12>
89 <v-btn class="open-dialog-button" round dark @click="printProgressReport()"> 90 <v-btn class="open-dialog-button" round dark @click="printProgressReport()">
90 Print 91 Print
91 <v-icon right dark>print</v-icon> 92 <v-icon right dark>print</v-icon>
92 </v-btn> 93 </v-btn>
93 </v-flex> 94 </v-flex>
94 </v-layout> 95 </v-layout>
95 <v-flex xs12 v-for="(value, id, index) in filterData" :key="index" flat> 96 <v-flex xs12 v-for="(value, id, index) in filterData" :key="index" flat>
96 <!-- Index Loop Start --> 97 <!-- {{value}}---{{id}}---{{index}} -->
97 <v-card 98 <v-card
98 v-for="(studentMark,i) in value" 99 class="ma-3"
99 :key="i"
100 class="pa-3 ma-3"
101 style="border: 1px solid lightgrey;margin-bottom:14px;padding:20px" 100 style="border: 1px solid lightgrey;margin-bottom:14px;padding:20px"
102 > 101 >
103 <!-- Profile School -->
104 <v-layout> 102 <v-layout>
105 <v-flex xs12 sm12 md12> 103 <v-flex xs12 sm12 md12>
106 <div> 104 <div>
107 <div class="school-logo"> 105 <div class="school-logo">
108 <v-avatar> 106 <v-avatar>
109 <img :src="userData.schoolLogoUrl" v-if="userData.schoolLogoUrl" /> 107 <img :src="userData.schoolLogoUrl" v-if="userData.schoolLogoUrl" />
110 <img 108 <img
111 src="/static/schoolIcons/INTRACK_White.png" 109 src="/static/schoolIcons/INTRACK_White.png"
112 v-else-if="!userData.schoolLogoUrl" 110 v-else-if="!userData.schoolLogoUrl"
113 /> 111 />
114 </v-avatar> 112 </v-avatar>
115 </div> 113 </div>
116 <div class="school-name"> 114 <div class="school-name">
117 <h2>{{ userData.name }}</h2> 115 <h2>{{ userData.name }}</h2>
118 </div> 116 </div>
119 </div> 117 </div>
120 <hr 118 <hr
121 style="border:1px solid #ddd; 119 style="border:1px solid #ddd;
122 overflow: hidden; 120 overflow: hidden;
123 vertical-align: middle; 121 vertical-align: middle;
124 margin-bottom: 4px;" 122 margin: 10px; 0px;"
125 /> 123 />
124 <!-- Profile School -->
126 <div class="school-info"> 125 <div class="school-info">
127 <v-layout> 126 <v-layout>
128 <v-flex xs5 class="pl-3"> 127 <v-flex xs5 class="pl-3">
129 <p style="font-size:20px;">{{ userData.name }}</p> 128 <p style="font-size:20px;">{{ userData.name }}</p>
130 <p 129 <p
131 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;" 130 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
132 >{{ userData.address }}</p> 131 >{{ userData.address }}</p>
133 <p 132 <p
134 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;" 133 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
135 >{{ userData.mobile }}</p> 134 >{{ userData.mobile }}</p>
136 <p 135 <p
137 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;" 136 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
138 >{{ userData.email }}</p> 137 >{{ userData.email }}</p>
139 </v-flex> 138 </v-flex>
140 <!-- Profile Student Report Card--> 139 <!-- Profile Student Report Card-->
141 <v-flex xs5> 140 <v-flex xs5>
142 <div v-if="cardData !=''"> 141 <div v-for="(studentMark,i,index) in value" :key="index">
143 <p style="font-size:20px;">{{ studentMark.studentId.name }}</p> 142 <p
143 v-if="index == 0"
144 style="font-size:20px;"
145 >{{ studentMark[0].studentId.name }}</p>
144 <p 146 <p
147 v-if="index == 0"
145 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;" 148 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
146 > 149 >
147 Class : 150 Class :
148 <b>{{ studentMark.classId.classNum }}</b> 151 <b>{{ studentMark[0].classId.classNum }}</b>
149 </p> 152 </p>
150 <p 153 <p
154 v-if="index == 0"
151 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;" 155 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
152 > 156 >
153 Section : 157 Section :
154 <b>{{ studentMark.sectionId.name }}</b> 158 <b>{{ studentMark[0].sectionId.name }}</b>
155 </p> 159 </p>
156 <p 160 <p
161 v-if="index == 0"
157 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;" 162 style="font-size: 15px;color: #707478;margin:0px;margin-bottom:8px;"
158 > 163 >
159 Roll NO : 164 Roll NO :
160 <b>{{ studentMark.studentId.rollNo }}</b> 165 <b>{{ studentMark[0].studentId.rollNo }}</b>
161 </p> 166 </p>
162 </div> 167 </div>
163 </v-flex> 168 </v-flex>
164 <v-flex xs2> 169 <v-flex xs2>
165 <v-avatar size="100" style="padding-top:20px"> 170 <div v-for="(studentMark,i,index) in value" :key="index">
166 <img 171 <v-avatar size="100" style="padding-top:20px" v-if="index == 0">
167 src="/static/icon/user.png" 172 <img
168 v-if="!studentMark.studentId.profilePicUrl" 173 src="/static/icon/user.png"
169 /> 174 v-if="!studentMark[0].studentId.profilePicUrl"
170 <img 175 />
171 :src="studentMark.studentId.profilePicUrl" 176 <img
172 v-else-if="studentMark.studentId.profilePicUrl" 177 :src="studentMark[0].studentId.profilePicUrl"
173 /> 178 v-else-if="studentMark[0].studentId.profilePicUrl"
174 </v-avatar> 179 />
180 </v-avatar>
181 </div>
175 </v-flex> 182 </v-flex>
176 </v-layout> 183 </v-layout>
177 </div> 184 </div>
178 </v-flex> 185 </v-flex>
179 </v-layout> 186 </v-layout>
180 <!-- Start Table Report Marks --> 187 <v-card v-for="studentMarks in value" :key="studentMarks" class="my-4">
181 <v-card class="student-table"> 188 <!-- {{studentMark}} -->
182 <table 189 <table
190 v-for="(studentMark,key) in studentMarks"
191 :key="key"
183 class="mb-5 tableRsponsive feeTypeTable subheading" 192 class="mb-5 tableRsponsive feeTypeTable subheading"
184 style="border: 1px solid black; 193 style="border: 1px solid black;
185 border-collapse: collapse;!important 194 border-collapse: collapse;!important
186 table-layout: auto !important; 195 table-layout: auto !important;
187 width: 100% !important; 196 width: 100% !important;
188 overflow: hidden;" 197 overflow: hidden;"
189 > 198 >
190 <thead style="border: 1px solid transparent !important"> 199 <thead style="border: 1px solid transparent !important" v-if="key == 0">
191 <tr style="border: 1px solid transparent !important"> 200 <tr style="border: 1px solid transparent !important">
192 <td 201 <td
193 colspan="4" 202 colspan="4"
194 style="text-align: inherit !important; 203 style="text-align: inherit !important;
195 border-right: inherit; 204 border-right: inherit;
196 border-top: inherit; 205 border-top: inherit;
197 padding:14px;" 206 padding:14px;"
198 >{{studentMark.examId.examName}}</td> 207 >{{studentMark.examId.examName}}</td>
199 </tr> 208 </tr>
200 <tr style="border: 1px solid lightgrey !important;padding:4px;"> 209 <tr style="border: 1px solid lightgrey !important;padding:4px;">
201 <td 210 <td
202 rowspan="2" 211 rowspan="2"
203 style="border: 1px solid lightgrey !important;padding: 10px;" 212 style="border: 1px solid lightgrey !important;padding: 10px;"
204 >Subject</td> 213 >Subject</td>
205 <template> 214 <template>
206 <td 215 <td
207 v-for="(studentMarkData,i) in studentMark.studentsMarks" 216 v-for="(studentMarkData,i) in studentMark.studentsMarks"
208 :key="i" 217 :key="i"
209 colspan="2" 218 colspan="2"
210 style="border: 1px solid lightgrey !important;padding: 10px;" 219 style="border: 1px solid lightgrey !important;padding: 10px;"
211 >{{studentMarkData.markDistributionId.distributionType}}</td> 220 >{{studentMarkData.markDistributionId.distributionType}}</td>
212 <td 221 <td
213 style="border: 1px solid lightgrey !important;padding: 10px;" 222 style="border: 1px solid lightgrey !important;padding: 10px;"
214 >Total Marks</td> 223 >Total Marks</td>
215 </template> 224 </template>
216 </tr> 225 </tr>
217 <tr style="border: 1px solid lightgrey !important;"> 226 <tr style="border: 1px solid lightgrey !important;">
218 <template v-for="(exam, ind) in studentMark.studentsMarks"> 227 <template v-for="(exam, ind) in studentMark.studentsMarks">
219 <td 228 <td
220 :key="ind" 229 :key="ind"
221 style="border: 1px solid lightgrey !important;padding: 10px;" 230 style="border: 1px solid lightgrey !important;padding: 10px;"
222 >Marks</td> 231 >Marks</td>
223 <td 232 <td
224 :key="ind" 233 :key="ind"
225 style="border: 1px solid lightgrey !important;padding: 10px;" 234 style="border: 1px solid lightgrey !important;padding: 10px;"
226 >Highest Marks</td> 235 >Highest Marks</td>
227 </template> 236 </template>
228 </tr> 237 </tr>
229 </thead> 238 </thead>
230 <tbody style="border: 1px solid lightgrey !important;"> 239 <tbody style="border: 1px solid lightgrey !important;" v-if="key == 0">
231 <tr> 240 <tr v-for="studentMark in studentMarks" :key="studentMark">
241 <!-- {{studentMark.totalMarks}} -->
232 <td 242 <td
233 style="border: 1px solid lightgrey !important;padding: 10px;" 243 style="border: 1px solid lightgrey !important;padding: 10px;"
234 >{{studentMark.subjectName}}</td> 244 >{{studentMark.subjectName}}</td>
235 <template v-for="(exam, index) in studentMark.studentsMarks"> 245 <template v-for="(exam, index) in studentMark.studentsMarks">
236 <td 246 <td
237 :key="index" 247 :key="index"
238 style="border: 1px solid lightgrey !important;padding: 10px;" 248 style="border: 1px solid lightgrey !important;padding: 10px;"
239 >{{exam.marksScored}}</td> 249 >{{exam.marksScored}}</td>
240 <td 250 <td
241 :key="index" 251 :key="index"
242 style="border: 1px solid lightgrey !important;padding: 10px;" 252 style="border: 1px solid lightgrey !important;padding: 10px;"
243 >{{exam.markDistributionId.markValue}}</td> 253 >{{exam.markDistributionId.markValue}}</td>
244 </template> 254 </template>
245 <td 255 <td
246 style="border: 1px solid lightgrey !important;padding: 10px;" 256 style="border: 1px solid lightgrey !important;padding: 10px;"
247 >{{studentMark.totalMarks}}</td> 257 >{{studentMark.totalMarks}}</td>
248 </tr> 258 </tr>
249 </tbody> 259 </tbody>
250 <tfoot> 260 <tfoot v-if="key == 0">
251 <tr style="border: 1px solid lightgrey !important;"> 261 <tr style="border: 1px solid lightgrey !important;">
252 <td 262 <td
253 colspan="5" 263 colspan="5"
254 style="text-align:center" 264 style="text-align:center"
255 class="subheding" 265 class="subheding"
256 >Total Marks</td> 266 >Total Marks</td>
257 <td 267 <td
258 colspan="7" 268 colspan="7"
259 style="border: 1px solid lightgrey !important;padding: 10px;" 269 style="border: 1px solid lightgrey !important;padding: 10px;"
260 >{{ studentMark.totalMarks }}</td> 270 >{{ studentMark.totalMarks }}</td>
261 </tr> 271 </tr>
262 <tr> 272 <tr>
263 <td colspan="5" style="text-align:center" class="subheding">Grade</td> 273 <td colspan="5" style="text-align:center" class="subheding">Grade</td>
264 <td 274 <td
265 colspan="7" 275 colspan="7"
266 style="border: 1px solid lightgrey !important;padding: 10px;" 276 style="border: 1px solid lightgrey !important;padding: 10px;"
267 >{{ studentMark.grade }}</td> 277 >{{ studentMark.grade }}</td>
268 </tr> 278 </tr>
269 <tr> 279 <tr>
270 <td 280 <td
271 colspan="5" 281 colspan="5"
272 style="text-align:center" 282 style="text-align:center"
273 class="subheding" 283 class="subheding"
274 >Average Mark</td> 284 >Average Mark</td>
275 <td 285 <td
276 colspan="7" 286 colspan="7"
277 style="border: 1px solid lightgrey !important;padding: 10px;" 287 style="border: 1px solid lightgrey !important;padding: 10px;"
278 ></td> 288 ></td>
279 </tr> 289 </tr>
280 <tr> 290 <tr>
281 <td colspan="5" style="text-align:center" class="subheding">GPA</td> 291 <td colspan="5" style="text-align:center" class="subheding">GPA</td>
282 <td 292 <td
283 colspan="7" 293 colspan="7"
284 style="border: 1px solid lightgrey !important;padding: 10px;" 294 style="border: 1px solid lightgrey !important;padding: 10px;"
285 ></td> 295 ></td>
286 </tr> 296 </tr>
287 </tfoot> 297 </tfoot>
288 </table> 298 </table>
289 </v-card> 299 </v-card>
290 </v-card> 300 </v-card>
291 </v-flex> 301 </v-flex>
292 </v-flex> 302 </v-flex>
293 </v-layout> 303 </v-layout>
294 </v-flex> 304 </v-flex>
295 </v-container> 305 </v-container>
296 </v-card> 306 </v-card>
297 </v-flex> 307 </v-flex>
298 </v-layout> 308 </v-layout>
299 <div class="loader" v-if="showLoader"> 309 <div class="loader" v-if="showLoader">
300 <v-progress-circular indeterminate color="white"></v-progress-circular> 310 <v-progress-circular indeterminate color="white"></v-progress-circular>
301 </div> 311 </div>
302 </v-container> 312 </v-container>
303 </template> 313 </template>
304 314
305 <script> 315 <script>
306 import http from "@/Services/http.js"; 316 import http from "@/Services/http.js";
307 import moment from "moment"; 317 import moment from "moment";
308 import _ from "underscore"; 318 import _ from "underscore";
309 319
310 export default { 320 export default {
311 data: () => ({ 321 data: () => ({
312 showLoader: false, 322 showLoader: false,
313 cardData: [], 323 cardData: [],
314 token: "", 324 token: "",
315 markDistributions: [], 325 markDistributions: [],
316 markParticularDistributionData: [], 326 markParticularDistributionData: [],
317 loading: false, 327 loading: false,
318 valid: true, 328 valid: true,
319 loading: false, 329 loading: false,
320 showReport: false, 330 showReport: false,
321 addSection: [], 331 addSection: [],
322 filterData: [], 332 filterData: [],
323 getStudentsList: [], 333 getStudentsList: [],
324 classRules: [v => !!v || "Class is required"], 334 classRules: [v => !!v || "Class is required"],
325 sectionRules: [v => !!v || "Class is required"], 335 sectionRules: [v => !!v || "Class is required"],
326 studentRules: [v => !!v || "Student is required"], 336 studentRules: [v => !!v || "Student is required"],
327 getReport: {}, 337 getReport: {},
328 classList: [], 338 classList: [],
329 output: null, 339 output: null,
330 userData: {}, 340 userData: {},
331 newData: [], 341 newData: [],
332 gradeAPlus: "A+", 342 gradeAPlus: "A+",
333 gradeA: "A", 343 gradeA: "A",
334 gradeBPlus: "B+", 344 gradeBPlus: "B+",
335 gradeB: "B", 345 gradeB: "B",
336 gradeCPlus: "C+", 346 gradeCPlus: "C+",
337 gradeC: "C", 347 gradeC: "C",
338 totalMarks: "" 348 totalMarks: ""
339 }), 349 }),
340 mounted() { 350 mounted() {
341 this.token = this.$store.state.token; 351 this.token = this.$store.state.token;
342 this.getClass(); 352 this.getClass();
343 this.getUserData(); 353 this.getUserData();
344 }, 354 },
345 methods: { 355 methods: {
346 clear() { 356 clear() {
347 this.$refs.form.reset(); 357 this.$refs.form.reset();
348 }, 358 },
349 getClass() { 359 getClass() {
350 this.showLoader = true; 360 this.showLoader = true;
351 http() 361 http()
352 .get("/getClassesList", { 362 .get("/getClassesList", {
353 headers: { Authorization: "Bearer " + this.token } 363 headers: { Authorization: "Bearer " + this.token }
354 }) 364 })
355 .then(response => { 365 .then(response => {
356 this.classList = response.data.data; 366 this.classList = response.data.data;
357 this.showLoader = false; 367 this.showLoader = false;
358 }) 368 })
359 .catch(error => { 369 .catch(error => {
360 this.showLoader = false; 370 this.showLoader = false;
361 // console.log("err====>", err); 371 // console.log("err====>", err);
362 }); 372 });
363 }, 373 },
364 getSections(_id) { 374 getSections(_id) {
365 this.showLoader = true; 375 this.showLoader = true;
366 http() 376 http()
367 .get( 377 .get(
368 "/getSectionsList", 378 "/getSectionsList",
369 { params: { classId: _id } }, 379 { params: { classId: _id } },
370 { 380 {
371 headers: { Authorization: "Bearer " + this.token } 381 headers: { Authorization: "Bearer " + this.token }
372 } 382 }
373 ) 383 )
374 .then(response => { 384 .then(response => {
375 this.addSection = response.data.data; 385 this.addSection = response.data.data;
376 this.showLoader = false; 386 this.showLoader = false;
377 }) 387 })
378 .catch(err => { 388 .catch(err => {
379 this.showLoader = false; 389 this.showLoader = false;
380 // console.log("err====>", err); 390 // console.log("err====>", err);
381 }); 391 });
382 }, 392 },
383 getStudents() { 393 getStudents() {
384 this.showLoader = true; 394 this.showLoader = true;
385 http() 395 http()
386 .get("/getStudentWithClass", { 396 .get("/getStudentWithClass", {
387 params: { 397 params: {
388 classId: this.getReport.classId, 398 classId: this.getReport.classId,
389 sectionId: this.getReport.sectionId 399 sectionId: this.getReport.sectionId
390 } 400 }
391 }) 401 })
392 .then(response => { 402 .then(response => {
393 response.data.data.unshift({ 403 response.data.data.unshift({
394 name: "Select All", 404 name: "Select All",
395 _id: "Select All" 405 _id: "Select All"
396 }); 406 });
397 this.getStudentsList = response.data.data; 407 this.getStudentsList = response.data.data;
398 this.showLoader = false; 408 this.showLoader = false;
399 // console.log("getSectionsList=====>", response.data.data); 409 // console.log("getSectionsList=====>", response.data.data);
400 }) 410 })
401 .catch(error => { 411 .catch(error => {
402 console.log("err====>", error); 412 console.log("err====>", error);
403 this.showLoader = false; 413 this.showLoader = false;
404 }); 414 });
405 }, 415 },
406 getMarkReportList() { 416 getMarkReportList() {
407 // this.showLoader = true; 417 this.showLoader = true;
408 this.showReport = true; 418 this.showReport = true;
409 // http()
410 // .get("/getParticularMark", {
411 // params: { studentId: this.getReport.studentId },
412 // headers: { Authorization: "Bearer " + this.token }
413 // })
414 // .then(response => {
415 // this.showLoader = false;
416 // this.cardData = response.data.data;
417 // let newData = response.data.data;
418 // for (var i = 0; i < newData.length; i++) {
419 // newData[i].examination = newData[i].examId._id;
420 // }
421 // this.filterData = _.groupBy(newData, ["examination"]);
422 // for (let data in this.filterData) {
423
424 // for (let item in this.filterData[data]) {
425 // var totalMarks = 0;
426 // for (
427 // let i = 0;
428 // i < this.filterData[data][item].studentsMarks.length;
429 // i++
430 // ) {
431 // totalMarks += this.filterData[data][item].studentsMarks[i]
432 // .marksScored;
433 // }
434 // this.filterData[data][item].totalMarks = totalMarks;
435 // var total = 0;
436 // total += this.filterData[data][item].totalMarks ;
437 // console.log("total", total);
438 // }
439 // }
440 // })
441 // console.log(
442 // "getReport.classId",
443 // this.getReport.classId,
444 // "getReport.sectionId",
445 // this.getReport.sectionId,
446 // "getReport.studentId",
447 // this.getReport.studentId
448 // );
449
450 var getSelectMarks = {}; 419 var getSelectMarks = {};
451 if (this.getReport.studentId == "Select All") { 420 if (this.getReport.studentId == "Select All") {
452 getSelectMarks = { 421 getSelectMarks = {
453 classId: this.getReport.classId, 422 classId: this.getReport.classId,
454 sectionId: this.getReport.sectionId 423 sectionId: this.getReport.sectionId
455 }; 424 };
456 } else if (this.getReport.studentId != "Select All") { 425 } else if (this.getReport.studentId != "Select All") {
457 getSelectMarks = { 426 getSelectMarks = {
458 classId: this.getReport.classId, 427 classId: this.getReport.classId,
459 sectionId: this.getReport.sectionId, 428 sectionId: this.getReport.sectionId,
460 studentId: this.getReport.studentId 429 studentId: this.getReport.studentId
461 }; 430 };
462 } 431 }
463 http() 432 http()
464 .get("/getParticularMark", { 433 .get("/getParticularMark", {
465 params: getSelectMarks, 434 params: getSelectMarks,
466 headers: { Authorization: "Bearer " + this.token } 435 headers: { Authorization: "Bearer " + this.token }
467 }) 436 })
468 .then(response => { 437 .then(response => {
469 this.cardData = response.data.data; 438 this.cardData = response.data.data;
470 let newData = response.data.data; 439 let newData = response.data.data;
471 // console.log("newData", newData);
472 for (var i = 0; i < newData.length; i++) { 440 for (var i = 0; i < newData.length; i++) {
473 newData[i].examination = newData[i].examId._id; 441 newData[i].examination = newData[i].examId._id;
442 newData[i].studentsId = newData[i].studentId._id;
443 }
444 var studentMarkArray = [];
445 studentMarkArray = _.groupBy(newData, ["studentsId"]);
446 for (let data in studentMarkArray) {
447 studentMarkArray[data] = _.groupBy(studentMarkArray[data], [
448 "examination"
449 ]);
474 } 450 }
475 this.filterData = _.groupBy(newData, ["examination"]); 451 this.filterData = studentMarkArray;
476 // console.log("this.filterData", this.filterData);
477 for (let data in this.filterData) { 452 for (let data in this.filterData) {
478 for (let item in this.filterData[data]) { 453 for (let item in this.filterData[data]) {
479 var totalMarks = 0; 454 var totalMarks = 0;
480 for ( 455
481 let i = 0; 456 for (let i = 0; i < this.filterData[data][item].length; i++) {
482 i < this.filterData[data][item].studentsMarks.length; 457 for (
483 i++ 458 let j = 0;
484 ) { 459 j < studentMarkArray[data][item][i].studentsMarks.length;
485 totalMarks += this.filterData[data][item].studentsMarks[i] 460 j++
486 .marksScored; 461 ) {
487 } 462 totalMarks +=
488 this.filterData[data][item].totalMarks = totalMarks; 463 studentMarkArray[data][item][i].studentsMarks[j]
489 console.log("totalMarks", totalMarks); 464 .marksScored;
490 this.totalMarks = totalMarks; 465 console.log("totalMarks", totalMarks);
491 if (totalMarks > 90) { 466 }
492 this.filterData[data][item].grade = this.gradeAPlus; 467 this.filterData[data][item][i].totalMarks = totalMarks;
493 } else if (totalMarks > 80 && totalMarks < 90) {
494 this.filterData[data][item].grade = this.gradeA;
495 } else if (totalMarks > 70 && totalMarks < 80) {
496 this.filterData[data][item].grade = this.gradeBPlus;
497 } else if (totalMarks > 60 && totalMarks < 70) {
498 this.filterData[data][item].grade = this.gradeB;
499 } else if (totalMarks > 50 && totalMarks < 60) {
500 this.filterData[data][item].grade = this.gradeCPlus;
501 } else if (totalMarks > 40 && totalMarks < 50) {
502 this.filterData[data][item].grade = this.gradeC;
503 } 468 }
469 // this.totalMarks = totalMarks;
470 // if (totalMarks > 90) {
471 // this.filterData[data][item].grade = this.gradeAPlus;
472 // } else if (totalMarks > 80 && totalMarks < 90) {
473 // this.filterData[data][item].grade = this.gradeA;
474 // } else if (totalMarks > 70 && totalMarks < 80) {
475 // this.filterData[data][item].grade = this.gradeBPlus;
476 // } else if (totalMarks > 60 && totalMarks < 70) {
477 // this.filterData[data][item].grade = this.gradeB;
478 // } else if (totalMarks > 50 && totalMarks < 60) {
479 // this.filterData[data][item].grade = this.gradeCPlus;
480 // } else if (totalMarks > 40 && totalMarks < 50) {
481 // this.filterData[data][item].grade = this.gradeC;
482 // }
504 } 483 }
505 } 484 }
485 console.log("this.filterData-----------last", this.filterData);
486
506 this.showLoader = false; 487 this.showLoader = false;
507 }) 488 })
508 .catch(error => { 489 .catch(error => {
509 // console.log("err====>", err); 490 // console.log("err====>", err);
510 this.showLoader = false; 491 this.showLoader = false;
511 this.snackbar = true; 492 this.snackbar = true;
512 // this.text = error.response.data.message; 493 // this.text = error.response.data.message;
513 // if (error.response.status === 401) { 494 // if (error.response.status === 401) {
514 // this.$router.replace({ path: "/" }); 495 // this.$router.replace({ path: "/" });
515 // this.$store.dispatch("setToken", null); 496 // this.$store.dispatch("setToken", null);
516 // this.$store.dispatch("Id", null); 497 // this.$store.dispatch("Id", null);
517 // } 498 // }
518 }); 499 });
519 }, 500 },
520 printProgressReport() { 501 printProgressReport() {
521 // Pass the element id here 502 // Pass the element id here
522 this.$htmlToPaper("printMe"); 503 this.$htmlToPaper("printMe");
523 }, 504 },
524 getUserData() { 505 getUserData() {
525 http() 506 http()
526 .get("/getParticularUserDetail") 507 .get("/getParticularUserDetail")
527 .then(response => { 508 .then(response => {
528 this.userData = response.data.data; 509 this.userData = response.data.data;
529 }) 510 })
530 .catch(error => { 511 .catch(error => {
531 // if (error.response.status === 401) { 512 // if (error.response.status === 401) {
532 // this.$router.replace({ path: "/" }); 513 // this.$router.replace({ path: "/" });
533 // this.$store.dispatch("setToken", null); 514 // this.$store.dispatch("setToken", null);
534 // this.$store.dispatch("Id", null); 515 // this.$store.dispatch("Id", null);
535 // } 516 // }
536 }); 517 });
537 } 518 }
538 } 519 }
539 }; 520 };
540 </script> 521 </script>
541 522
542 <style scoped> 523 <style scoped>
543 table { 524 table {
544 border-collapse: collapse; 525 border-collapse: collapse;
545 border: 1px solid #e2e7eb; 526 border: 1px solid #e2e7eb;
546 } 527 }
547 528
548 th, 529 th,
549 td { 530 td {
550 border: 1px solid #e2e7eb; 531 border: 1px solid #e2e7eb;
551 padding: 10px; 532 padding: 10px;
552 text-align: center; 533 text-align: center;
553 } 534 }
554 table.feeTypeTable { 535 table.feeTypeTable {
555 table-layout: auto !important; 536 table-layout: auto !important;
556 width: 100% !important; 537 width: 100% !important;
557 } 538 }
558 .bg-sky { 539 .bg-sky {
559 background-color: #98b2cc !important; 540 background-color: #98b2cc !important;
560 } 541 }
561 .bg-sky-light { 542 .bg-sky-light {
562 background-color: #89a0b8; 543 background-color: #89a0b8;
563 } 544 }
564 .bg-purple { 545 .bg-purple {
565 background-color: #9583ac; 546 background-color: #9583ac;
566 } 547 }
567 .bg-skyDark { 548 .bg-skyDark {
568 background-color: #956785; 549 background-color: #956785;
569 } 550 }
570 551
571 /* .report { 552 /* .report {
572 overflow: hidden; 553 overflow: hidden;
573 max-width: 794px; 554 max-width: 794px;
574 margin: 0px auto; 555 margin: 0px auto;
575 margin-bottom: 10px; 556 margin-bottom: 10px;
576 padding: 30px; 557 padding: 30px;